Aligne le chrono mobile sur la page cube

This commit is contained in:
2026-04-12 16:59:09 +02:00
parent 9b46b9f052
commit e0815fc279

View File

@@ -1989,35 +1989,113 @@ textarea:focus {
} }
} }
@media (max-width: 420px) { @media (max-width: 900px) {
body[data-page="chrono"] .phase-header { body[data-page="chrono"] .phase-header {
grid-template-columns: auto auto; grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: gap: 0.35rem;
"brand action" }
"title title";
align-items: center; body[data-page="chrono"] .phase-title {
row-gap: 0.28rem; display: none;
} }
body[data-page="chrono"] .brand-link-logo { body[data-page="chrono"] .brand-link-logo {
grid-area: brand;
justify-self: start; justify-self: start;
} }
body[data-page="chrono"] .utility-button { body[data-page="chrono"] .utility-button {
grid-area: action;
justify-self: end; justify-self: end;
} }
body[data-page="chrono"] .phase-title { body[data-page="chrono"] .phase-shell {
grid-area: title; gap: 0.35rem;
min-width: 0; padding:
text-align: center; calc(var(--phase-top-offset) + 0.55rem)
calc(var(--safe-right) + 0.5rem)
calc(var(--safe-bottom) + 0.55rem)
calc(var(--safe-left) + 0.5rem);
} }
body[data-page="chrono"] .phase-title h1 { body[data-page="chrono"] .status-strip {
white-space: nowrap; gap: 0.3rem;
overflow: hidden; }
text-overflow: ellipsis;
body[data-page="chrono"] .status-card {
min-height: 3.35rem;
padding: 0.35rem 0.25rem;
border-radius: 18px;
}
body[data-page="chrono"] .status-card span {
font-size: 0.66rem;
line-height: 1.1;
}
body[data-page="chrono"] .status-card strong {
font-size: 0.98rem;
}
body[data-page="chrono"] .faceoff-board {
gap: 0.35rem;
}
body[data-page="chrono"] .zone-inner {
grid-template-rows: auto minmax(0, 1fr);
padding: 0.5rem;
gap: 0.4rem;
border-radius: 20px;
}
body[data-page="chrono"] .zone-head h2 {
font-size: 1rem;
}
body[data-page="chrono"] .zone-stats strong {
font-size: 0.95rem;
}
body[data-page="chrono"] .zone-stats span {
font-size: 0.78rem;
}
body[data-page="chrono"] .seat-tag {
padding: 0.22rem 0.55rem;
font-size: 0.62rem;
}
body[data-page="chrono"] .zone-button {
min-height: clamp(92px, 12.5vh, 132px);
padding: 0.75rem;
border-radius: 22px;
font-size: clamp(1.35rem, 6.2vw, 2.05rem);
}
body[data-page="chrono"] .phase-spine {
gap: 0;
}
body[data-page="chrono"] .phase-spine .spine-card {
display: none;
}
body[data-page="chrono"] .spine-button {
min-height: 2.9rem;
padding: 0.7rem;
border-radius: 18px;
font-size: 0.96rem;
}
}
@media (max-width: 420px) {
body[data-page="chrono"] .phase-header {
grid-template-columns: minmax(0, 1fr) auto;
}
body[data-page="chrono"] .brand-link-logo {
justify-self: start;
}
body[data-page="chrono"] .utility-button {
justify-self: end;
} }
} }