Aligne le chrono mobile sur la page cube
This commit is contained in:
112
styles.css
112
styles.css
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user