/* Styling for shared/web/toolbar/toolbar.js's markup. Imports the shared design tokens itself so * a page only needs to link this one file (plus its own stylesheet) to get both. * * safe-area-inset-top padding (not just viewport-fit=cover in each page's own ) * matters here specifically: the toolbar is the first thing painted at the very top of the * screen on an installed, standalone-display PWA, exactly where a phone's notch/status-bar area * would otherwise overlap it. */ @import url("/shared/styles/tokens.css"); .app-toolbar { display: flex; gap: 0.25rem; padding: calc(env(safe-area-inset-top, 0px) + 0.4rem) 0.5rem 0.4rem; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; } .app-toolbar-link { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: none; padding: 0.3rem 0.7rem; border-bottom: 2px solid transparent; color: var(--text-muted); text-decoration: none; } .app-toolbar-link:hover { color: var(--text); } .app-toolbar-link.current { color: var(--accent); border-bottom-color: var(--accent); } .app-toolbar-icon { width: 1.5rem; height: 1.5rem; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; } .app-toolbar-label { font-size: 0.65rem; font-weight: 600; } /* Desktop: centre the row of links over the page content instead of leaving them stranded against * the left edge of a wide window. Every page centres its own content (`margin: 0 auto`, with the * width cap varying per section - 780px in scrabble-game, 640px in the dictionary, 30rem in * Wordfeud Butler), so centring in the viewport lines the toolbar up with that column rather than * with any one section's specific width. * * Deliberately gated behind min-width rather than replacing the base rule, because the base rule is * doing real work on a phone: `overflow-x: auto` lets the five sections scroll when they don't fit, * and `justify-content: center` combined with an overflowing scroll container makes the overflow * past the *start* edge unreachable in several browsers - you can't scroll back to the first item. * At 40rem there's room for all five (~28rem of links), so the two never apply at the same time. * * How wide the bar's own background/border runs is left as-is, and it differs by section, because * the toolbar is prepended as ``'s first child everywhere: on pages that cap `body` itself * (scrabble-dictionary at 640px, scrabble-game at 780px) the bar is capped with it and reads as an * island, while on the rest (hub, Wordfeud Butler, the bot page, profile) it spans the window. * Only the link row's alignment is in scope here - making the bar full-bleed on the capped pages * would mean per-page negative margins, which is a separate change. */ @media (min-width: 40rem) { .app-toolbar { justify-content: center; gap: 0.5rem; } }