christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrige l'en-tête du chrono en PWA

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 16:51:35 +02:00
parent 39c563ff37
commit 198109e14e
1 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
styles.css
View File

@@ -1861,6 +1861,13 @@ textarea:focus {
/* Keep phase pages inside the visible mobile viewport, including safe areas. */ /* Keep phase pages inside the visible mobile viewport, including safe areas. */
.phase-body { .phase-body {
padding: 0; padding: 0;
--phase-top-offset: var(--safe-top);
}
@media (display-mode: standalone), (display-mode: fullscreen) {
.phase-body {
--phase-top-offset: max(var(--safe-top), 1.15rem);
}
} }
.phase-body .phase-shell { .phase-body .phase-shell {
@@ -1870,7 +1877,7 @@ textarea:focus {
height: 100dvh; height: 100dvh;
max-height: 100dvh; max-height: 100dvh;
padding: padding:
calc(var(--safe-top) + 0.8rem) calc(var(--phase-top-offset) + 0.8rem)
calc(var(--safe-right) + 0.6rem) calc(var(--safe-right) + 0.6rem)
calc(var(--safe-bottom) + 0.9rem) calc(var(--safe-bottom) + 0.9rem)
calc(var(--safe-left) + 0.6rem); calc(var(--safe-left) + 0.6rem);
@@ -1881,7 +1888,7 @@ textarea:focus {
.phase-body .phase-shell { .phase-body .phase-shell {
width: 100%; width: 100%;
padding: padding:
calc(var(--safe-top) + 0.55rem) calc(var(--phase-top-offset) + 0.55rem)
calc(var(--safe-right) + 0.5rem) calc(var(--safe-right) + 0.5rem)
calc(var(--safe-bottom) + 0.55rem) calc(var(--safe-bottom) + 0.55rem)
calc(var(--safe-left) + 0.5rem); calc(var(--safe-left) + 0.5rem);
@@ -1892,7 +1899,7 @@ textarea:focus {
.phase-body .phase-shell { .phase-body .phase-shell {
gap: 0.2rem; gap: 0.2rem;
padding: padding:
calc(var(--safe-top) + 0.2rem) calc(var(--phase-top-offset) + 0.2rem)
calc(var(--safe-right) + 0.35rem) calc(var(--safe-right) + 0.35rem)
calc(var(--safe-bottom) + 0.2rem) calc(var(--safe-bottom) + 0.2rem)
calc(var(--safe-left) + 0.35rem); calc(var(--safe-left) + 0.35rem);
@@ -1981,3 +1988,36 @@ textarea:focus {
font-size: 0.72rem; font-size: 0.72rem;
} }
} }
@media (max-width: 420px) {
body[data-page="chrono"] .phase-header {
grid-template-columns: auto auto;
grid-template-areas:
"brand action"
"title title";
align-items: center;
row-gap: 0.28rem;
}
body[data-page="chrono"] .brand-link-logo {
grid-area: brand;
justify-self: start;
}
body[data-page="chrono"] .utility-button {
grid-area: action;
justify-self: end;
}
body[data-page="chrono"] .phase-title {
grid-area: title;
min-width: 0;
text-align: center;
}
body[data-page="chrono"] .phase-title h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}