/* ========================================================================== css/chrome.css — the app's one header and one primary action bar (round 46, the owner's words of 2026-10-31: «the salon's header is very beautiful, it feels like Apple's style; make it one and the same on every page», and the main button «purple, glass, fixed at the foot of the page»). THE MODEL: the salon's own page, E2 (and E1, the salon list, drawn the same way). Its header has no band of its own. A 44 px glass circle stands at each end (back on the left, the page's one action on the right, an empty 44 px slot when there is none); the title sits centred between them in 17 px bold Plus Jakarta Sans, with a small status line under it (E2: «Stängt · öppnar 10:00»); and what scrolls under it softens away instead of meeting a hard line. Here that look gets the material the owner asked for: frosted glass (blur 22 px, saturate 180 %) under a light dim of the page's own colour, so the words behind it cannot be read, fading out over 18 px at its foot (a feathered edge, never a line). It sticks at the top, under the phone's status bar. B1 (the home, a map with its own floating controls) keeps its own. THE PARTS, each an attribute a template adds (js/stitch/screens//.js keeps its classes; nothing here is per screen):
the screen's top bar: sticky (a template's fixed or absolute one stays so) data-chrome="bar" its first row, when the header holds more rows under it (tabs, a search, steps) data-chrome="title" the title: 17 px bold, the label colour data-chrome="subtitle" the small line under the title: 14 px, the second label colour data-chrome="status" a status in that line (Öppet, Pausat): its own colour and dot, no pill data-chrome="lead" a wrapper of the back and the title together (B4, M1): its two laid out as the row's own items, so the title stands in the middle The title and its line are one line each, cut with an ellipsis. A manager's first screen has the menu circle and no back; each page under it has the back circle and no menu (round 47, the templates draw it so) an icon-only control (back, share, menu …: a [data-action] with an aria-label whose one child is its icon) is a 44 px glass circle data-chrome="back" a back control outside a header (a full-screen page drawn over its screen, I1's Mini-CV): the header's back circle, its arrow alone (the owner, 2026-11-13: the CV's own «رجوع» pill broke the app's look) data-chrome="actionbar" the bar with the screen's main action: glass at the foot, over the safe area. A template's fixed bar stays fixed; any other is sticky at the foot of its page, in the flow, so it takes its own room and never covers the end of the page data-chrome-room on a page under a fixed bar that does not leave room for it: room at its foot data-chrome="primary" the main action itself: the app's purple pill, 52 px, 17 px semibold. A glass sheen sweeps across it once when it appears and once on each press (js/core/chrome.js), never under reduced motion or «Lugnare rörelser» (html.a11y-calm). Secondary buttons keep their look. WHY A LAYER: the sectors drew their headers with rules of their own, several with !important and long selectors (frame.css's round 11, apple-liquid-glass.css's Wave 15, the generated css/stitch sheets). An !important declaration inside a cascade layer outranks every !important outside one (CSS Cascade 5), so this sheet wins without a race of specificity; that is why every declaration below is !important (but the sheen's resting place, which its animation must be able to move). No other sheet of the app uses @layer. ========================================================================== */ @layer chrome { /* ---- the header ---------------------------------------------------------------------------------------------- */ #screen-outlet [data-chrome="header"] { z-index: 45 !important; background: transparent !important; border-bottom-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate !important; } #screen-outlet [data-chrome="header"]:not(.fixed, .absolute) { position: sticky !important; top: 0 !important; } #screen-outlet [data-chrome="header"].fixed { position: fixed !important; } #screen-outlet [data-chrome="header"].absolute { position: absolute !important; } /* nothing round a sticky header or bar is a scroll box that never scrolls: a screen root's overflow-x: hidden (its own generated rule, or a sector's: G2's moving pages) makes overflow-y auto, and the header stuck to that box and scrolled away with the page. clip cuts the same overflow without a scroll box (as frame.css does for .overflow-x-hidden); an overflow-hidden wrapper is clipped both ways. Only those: a wrapper that cuts nothing keeps its overflow visible, so a header that reaches past its padded parent (C12's -mx-4) stays whole. A box that scrolls on purpose keeps scrolling */ #screen-outlet > [data-screen]:has([data-chrome="header"]:not(.fixed, .absolute), [data-chrome="actionbar"]:not(.fixed)) { overflow-x: clip !important; } #screen-outlet [data-screen] .overflow-hidden:has([data-chrome="header"]:not(.fixed, .absolute), [data-chrome="actionbar"]:not(.fixed)) { overflow: clip !important; } /* the material: glass under a light dim of the page's own colour, out to the screen's edges (a header inside a padded page too), its foot feathered over 18 px. It reaches 24 px above the header too: a header that starts a little down its padded page (pt-3: Y9, CF8, P1 …) has no band of bare page over it at the top, and once stuck that part is off the screen */ #screen-outlet [data-chrome="header"]::before { content: '' !important; position: absolute !important; z-index: -1 !important; top: -24px !important; bottom: -18px !important; left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; pointer-events: none !important; background: color-mix(in srgb, var(--sys-base) 64%, transparent) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important; transform: none !important; } /* one height: the row is 56 px (a 44 px circle and 6 px above and below it) under the status bar. A header that is its own row takes the status bar's room itself; one that holds more rows gives it to its first row */ #screen-outlet [data-chrome="header"]:not(:has([data-chrome="bar"])) { height: auto !important; min-height: calc(56px + var(--safe-top, 0px)) !important; padding-top: calc(6px + var(--safe-top, 0px)) !important; padding-bottom: 6px !important; } #screen-outlet [data-chrome="header"]:has([data-chrome="bar"]) { height: auto !important; padding-top: var(--safe-top, 0px) !important; } #screen-outlet [data-chrome="bar"] { height: auto !important; min-height: 56px !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* a row's controls and words on one line through its middle (a stacked header, flex-col, keeps its own alignment) */ #screen-outlet [data-chrome="header"]:not(:has([data-chrome="bar"]), .flex-col), #screen-outlet [data-chrome="bar"]:not(.flex-col) { align-items: center !important; } /* the title in the middle, as the model's: in a row laid out as flex, the part that holds the title and its line (and no control) takes the room between the side controls and centres its words; a row with nothing after the title keeps an empty 44 px slot there, the back circle's twin (E1 draws it), so the title stands in the screen's middle. A row laid out as a grid (sys-w15-bar …) centres its own already; the car wash's and the workshop's rows are flex by their own class (sys-cw-header, sys-veh-header: with the badge gone from their right, space-between put the title there) */ #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col) > :is([data-chrome="title"], :has([data-chrome="title"])):not(:has(button, a, input, select, [data-action])) { flex: 1 1 0% !important; min-width: 0 !important; margin-inline: 0 !important; text-align: center !important; align-items: center !important; justify-content: center !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col) > :is([data-chrome="title"], :has([data-chrome="title"])):not(:has(button, a, input, select, [data-action])) :is([data-chrome="title"], [data-chrome="subtitle"]), #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col) > [data-chrome="title"]:not(:has(button, a, input, select, [data-action])) { justify-content: center !important; text-align: center !important; } /* the twin: the row's last part that shows holds the title and no control, and its first part does not hold the title. It was written with a :has() inside a :has(), which CSS does not allow, so the whole rule was dropped and never drew: every row of a back and a title alone (E7, EF1, DP4, CF8, K1 …, 111 of the 451 headers mounted bare) put its title 22 px right of the middle. Said here with :nth-last-child(… of …) and plain descendants, so a part hidden after the title (a capability that is off: I1's «ROT» pill) counts as gone, and a kept slot (data-keep-slot) as there */ #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col):has(> :nth-last-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"], > [data-chrome="title"]:nth-last-child(1 of :not([hidden]:not([data-keep-slot]), .hidden))):not(:has(> :nth-last-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)) :is(button, a, input, select, [data-action]), > :nth-last-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)):is(button, a, input, select, [data-action]))):not(:has(> :nth-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"], > [data-chrome="title"]:nth-child(1 of :not([hidden]:not([data-keep-slot]), .hidden))))::after, /* data-chrome="lead": the back and the title held in one wrapper («‹ Notiser» B4, «‹ Mina ordrar» M1); the wrapper's two are laid out as the row's own items (below), so its twin is drawn when the wrapper is the row's last part that shows */ #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):not(.flex-col):has(> [data-chrome="lead"]:nth-last-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)))::after { content: '' !important; flex: 0 0 44px !important; width: 44px !important; } #screen-outlet [data-chrome="lead"] { display: contents !important; } /* three parts, the title in the middle part with a control under it (D1: the back, «Mat» over its address button, the «Granskade» badge, 44 / 159 / 103 px): the flex-1 rule above leaves a part with a control alone, so space-between put the title half the sides' difference off the middle (29 px). Laid out as the Wave 15 bar is (sys-w15-bar), a grid of two equal outer columns, each at least its part, and the middle one's between them: the title in the screen's middle as far as the row's room allows (D1: 3.5 px off, the address line kept whole) */ /* (at an id's weight only, under the layer's rule that hides a menu beside a back: tests/unit/layout/one-way-out.test.mjs) */ #screen-outlet :where(:is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"]):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) :is(button, a, input, select, [data-action])):has(> :nth-child(3 of :not([hidden]:not([data-keep-slot]), .hidden))):not(:has(> :nth-child(4 of :not([hidden]:not([data-keep-slot]), .hidden))))) { display: grid !important; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr) !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"]):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) :is(button, a, input, select, [data-action])):has(> :nth-child(3 of :not([hidden]:not([data-keep-slot]), .hidden))):not(:has(> :nth-child(4 of :not([hidden]:not([data-keep-slot]), .hidden)))) > :nth-child(1 of :not([hidden]:not([data-keep-slot]), .hidden)) { justify-self: start !important; margin-inline: 0 !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"]):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) :is(button, a, input, select, [data-action])):has(> :nth-child(3 of :not([hidden]:not([data-keep-slot]), .hidden))):not(:has(> :nth-child(4 of :not([hidden]:not([data-keep-slot]), .hidden)))) > :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) { justify-self: center !important; min-width: 0 !important; max-width: 100% !important; margin-inline: 0 !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):is(.flex, .sys-cw-header, .sys-veh-header):not(.flex-col):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) [data-chrome="title"]):has(> :nth-child(2 of :not([hidden]:not([data-keep-slot]), .hidden)) :is(button, a, input, select, [data-action])):has(> :nth-child(3 of :not([hidden]:not([data-keep-slot]), .hidden))):not(:has(> :nth-child(4 of :not([hidden]:not([data-keep-slot]), .hidden)))) > :nth-child(3 of :not([hidden]:not([data-keep-slot]), .hidden)) { justify-self: end !important; margin-inline: 0 !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):not(.flex-col) > [data-chrome="lead"] > :is([data-chrome="title"], :has([data-chrome="title"])):not(:has(button, a, input, select, [data-action])) { flex: 1 1 0% !important; min-width: 0 !important; margin-inline: 0 !important; text-align: center !important; align-items: center !important; justify-content: center !important; } #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):not(.flex-col) > [data-chrome="lead"] > :is([data-chrome="title"], :has([data-chrome="title"])):not(:has(button, a, input, select, [data-action])) :is([data-chrome="title"], [data-chrome="subtitle"]) { justify-content: center !important; text-align: center !important; } /* ...and the title's own row inside it, the title and a chip beside it («Mina ordrar» and its count, M1): a flex row that started at its left put the title 89 px left of the middle (test page: look-header-account-login) */ #screen-outlet :is([data-chrome="bar"], [data-chrome="header"]:not(:has([data-chrome="bar"]))):not(.flex-col) > [data-chrome="lead"] > :has([data-chrome="title"]):not(:has(button, a, input, select, [data-action])) :has(> [data-chrome="title"]) { justify-content: center !important; } /* O1: the back (44 px), the brand «SeeYouSoon CLUB» and the member pill (81 px) as three columns, the outer two equal, so the brand stands in the screen's middle; with the space-between row it stood 19 px left of it (look-header-account-login) */ #screen-outlet :is([data-screen="O1"], [data-screen^="O1."]) .sys-club-header[data-chrome="header"] { display: grid !important; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr) !important; } #screen-outlet :is([data-screen="O1"], [data-screen^="O1."]) .sys-club-header[data-chrome="header"] > [data-action="back"] { grid-column: 1 !important; justify-self: start !important; } #screen-outlet :is([data-screen="O1"], [data-screen^="O1."]) .sys-club-header[data-chrome="header"] > [data-part="brand"] { grid-column: 2 !important; justify-self: center !important; min-width: 0 !important; } #screen-outlet :is([data-screen="O1"], [data-screen^="O1."]) .sys-club-header[data-chrome="header"] > [data-part="body"] { grid-column: 3 !important; justify-self: end !important; } /* the title and its line */ #screen-outlet [data-chrome="header"] [data-chrome="title"] { font-size: 17px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--sys-label) !important; margin: 0 !important; } html:not([dir="rtl"]) #screen-outlet [data-chrome="header"] [data-chrome="title"] { font-family: var(--font-display) !important; } #screen-outlet [data-chrome="header"] [data-chrome="subtitle"] { font-size: 14px !important; /* the screens' 14 px floor (the taxi's binding type rule); 13 px put CF9, CP2 and C12 under it */ line-height: 18px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--sys-label-2) !important; } #screen-outlet [data-chrome="header"] [data-chrome="subtitle"] :not(.material-symbols-outlined, [class*="rounded-full"]) { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; } /* one line each, cut with an ellipsis where the room ends (round 47: a restaurant paused on DP1, its line «Pausat – tar inte emot nya ordrar • Avhämtning och leverans» wrapped and ran into the page), and what holds them never grows past the room between the side controls. A line of several parts (a status, a dot, a service) gives way part by part, its dots and icons keeping their size */ #screen-outlet [data-chrome="header"] :is([data-chrome="title"], [data-chrome="subtitle"]) { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; flex-wrap: nowrap !important; } #screen-outlet [data-chrome="header"] :has(> :is([data-chrome="title"], [data-chrome="subtitle"])) { min-width: 0 !important; max-width: 100% !important; } /* a demo business's «Demo» pill after a header's title or line (js/core/demo-mark.js, inline): on a line of its own under the words, so the ellipsis that cuts a long name never cuts the mark with it (LP1 «Kassa · Demo Kassa Göteborg…» hid it) */ #screen-outlet [data-chrome="header"] :is([data-chrome="title"], [data-chrome="subtitle"]) [data-demo-badge="inline"] { display: block !important; width: max-content; max-width: 100%; margin: 3px auto 0 !important; overflow: hidden; text-overflow: ellipsis; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; } /* a line of words alone (DP1's status • service) runs as one line of text, cut once at its end; one with a dot, an icon or a status stays a row, each word part giving way */ #screen-outlet [data-chrome="header"] [data-chrome="subtitle"]:not(:has(> :is(.material-symbols-outlined, [class*="rounded-full"]:empty, [data-chrome="status"], div, p)), [hidden], .hidden) { display: block !important; } #screen-outlet [data-chrome="header"] [data-chrome="subtitle"] > :not(.material-symbols-outlined, [class*="rounded-full"]:empty, [data-chrome="status"], :has([data-chrome="status"])) { min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } #screen-outlet [data-chrome="header"] [data-chrome="subtitle"] > :is(.material-symbols-outlined, [class*="rounded-full"]:empty, :has([data-chrome="status"])) { flex-shrink: 0 !important; } /* a status (Öppet, Pausat, the kind of business) never stands beside or over the title: it is part of the line under it, as the salon's «● Stängt · öppnar 10:00», in its own colour with its dot or icon, no pill. Its line is a row (a status may sit in a wrapper of its own that a flow shows and hides: CF9's online pill) */ #screen-outlet [data-chrome="header"] [data-chrome="subtitle"]:has([data-chrome="status"]):not([hidden], .hidden) { display: flex !important; align-items: center !important; gap: 8px !important; } #screen-outlet [data-chrome="header"] [data-chrome="status"] { flex-shrink: 0 !important; gap: 5px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; letter-spacing: 0 !important; } #screen-outlet [data-chrome="header"] [data-chrome="status"]:not([hidden], .hidden) { display: inline-flex !important; align-items: center !important; } #screen-outlet [data-chrome="header"] [data-chrome="status"] > :not(.material-symbols-outlined, [class*="rounded-full"]:empty) { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: inherit !important; letter-spacing: 0 !important; text-transform: none !important; } #screen-outlet [data-chrome="header"] [data-chrome="status"] > [class*="rounded-full"]:empty { width: 6px !important; height: 6px !important; } #screen-outlet [data-chrome="header"] [data-chrome="status"] > .material-symbols-outlined { font-size: 14px !important; width: 14px !important; } /* each icon-only control is a 44 px glass circle (back on the left, the actions on the right) */ #screen-outlet [data-chrome="header"] :is(button, a)[data-action][aria-label]:has(> :is(.material-symbols-outlined, svg):only-child), #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)), #screen-outlet :is(button, a)[data-chrome="back"]:has(:is(.material-symbols-outlined, svg)) { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; flex-shrink: 0 !important; border-radius: 999px !important; align-items: center !important; justify-content: center !important; color: var(--sys-label) !important; background: color-mix(in srgb, var(--sys-raised) 62%, transparent) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; border: 1px solid var(--sys-hairline) !important; box-shadow: inset 0 1px 0 var(--sys-film), 0 4px 16px var(--sys-shadow) !important; } #screen-outlet [data-chrome="header"] :is(button, a)[data-action][aria-label]:has(> :is(.material-symbols-outlined, svg):only-child) > :is(.material-symbols-outlined, svg), #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)) :is(.material-symbols-outlined, svg), #screen-outlet :is(button, a)[data-chrome="back"]:has(:is(.material-symbols-outlined, svg)) :is(.material-symbols-outlined, svg) { font-size: 22px !important; width: 22px !important; height: 22px !important; color: inherit !important; } /* shown as a flex circle only while it is shown at all: a [hidden] control (a capability that is off, a state not reached) stays hidden, which an !important display here would otherwise outrank */ #screen-outlet [data-chrome="header"] :is(button, a)[data-action][aria-label]:has(> :is(.material-symbols-outlined, svg):only-child):not([hidden], .hidden), #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)):not([hidden], .hidden), #screen-outlet :is(button, a)[data-chrome="back"]:has(:is(.material-symbols-outlined, svg)):not([hidden], .hidden) { display: inline-flex !important; } /* a back control drawn as its arrow and «Tillbaka» (vehicle, the tyre hotel, loyalty …) is the same circle: the word stays its name for a screen reader, not on screen */ #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)), #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)) :not(.material-symbols-outlined, svg, svg *) { font-size: 0 !important; gap: 0 !important; letter-spacing: 0 !important; } /* one way out of a header: a header that shows a back never shows a menu too (round 47's rule, which the templates were left to keep; pages drawn since put the two side by side again, on the owner's iPhone in Swedish and Arabic, 2026-11-09). Every header of a screen, the shared one or a template's own, in a page or an overlay. A back that is hidden ([hidden], .hidden: a state not reached) leaves the menu in place. It weighs more than the icon circle's display above (which shows every icon-only control as inline-flex), or the circle would win in this layer. design-ui's lint-ui (one-way-out) and verify-live (CORNER) keep the templates and the screens to it */ :is(#screen-outlet, #overlay-outlet) [data-screen] :is(header, [data-chrome="header"]):has(:is(button, a)[data-action="back"]:not([hidden], .hidden)) :is(button, a)[data-action]:is([data-action="open-menu"], [data-action="open-drawer"], [data-action="menu"]):not([hidden], .hidden) { display: none !important; } /* ---- the action bar ------------------------------------------------------------------------------------------ */ #screen-outlet [data-chrome="actionbar"] { z-index: 40 !important; background: transparent !important; border-top-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; isolation: isolate !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; } #screen-outlet [data-chrome="actionbar"]:not(.fixed) { position: sticky !important; bottom: 0 !important; margin-top: auto !important; margin-bottom: 0 !important; } /* the bottom padding a page kept for a bar fixed over it (pb-32 …) would leave a sticky bar standing that high above the screen's foot at the end of the page (F6: 136 px): the sticky bar takes its own room, so what holds it keeps none (and in a full-height column, margin-top: auto above sets a short page's bar at the foot) */ #screen-outlet :is([data-screen], [data-screen] *):has([data-chrome="actionbar"]:not(.fixed, [hidden], .hidden)) { padding-bottom: 0 !important; } /* a fixed bar spans the phone (the column from 560 px, as css/responsive.css places the others) */ #screen-outlet [data-chrome="actionbar"].fixed { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin-inline: auto !important; transform: none !important; translate: none !important; } @media (min-width: 560px) { #screen-outlet [data-chrome="actionbar"].fixed { max-width: var(--app-col) !important; } } #screen-outlet [data-chrome="actionbar"]::before { content: '' !important; position: absolute !important; z-index: -1 !important; top: -20px !important; bottom: 0 !important; left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; pointer-events: none !important; background: color-mix(in srgb, var(--sys-base) 64%, transparent) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px) !important; mask-image: linear-gradient(to bottom, transparent 0, #000 20px) !important; transform: none !important; } #screen-outlet [data-chrome="actionbar"].fixed::before { left: 0 !important; right: 0 !important; } /* room at the foot of a page under a fixed bar (the bar is 76 px and its fade 20 px) */ #screen-outlet [data-chrome-room] { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; } /* ---- the primary button: the app's purple pill ----------------------------------------------------------------- */ #screen-outlet [data-chrome="primary"] { position: relative !important; overflow: hidden !important; isolation: isolate !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: auto !important; min-height: 52px !important; padding: 6px 24px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important; color: #FFFFFF !important; font-size: 17px !important; line-height: 22px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-align: center !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px -8px rgba(124, 58, 237, 0.6) !important; } /* a flex pill while it is shown: a [hidden] one (not yet its turn, a capability that is off) stays hidden */ #screen-outlet [data-chrome="primary"]:not([hidden], .hidden) { display: inline-flex !important; } html:not([dir="rtl"]) #screen-outlet [data-chrome="primary"] { font-family: var(--font-display) !important; } /* its words are its own size and colour, whatever a span inside drew */ #screen-outlet [data-chrome="primary"] :not(.material-symbols-outlined, svg, svg *) { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; color: inherit !important; } #screen-outlet [data-chrome="primary"] .material-symbols-outlined { font-size: 20px !important; color: inherit !important; } /* a shimmer a design drew to run on a loop inside its button (D4, G3, H1, Y8) gives way to the one sweep below */ #screen-outlet [data-chrome="primary"] [class*="animate-shimmer"]:empty { display: none !important; } #screen-outlet [data-chrome="primary"]:is(:disabled, [aria-disabled="true"]) { opacity: 0.45 !important; box-shadow: none !important; } /* the sheen: a soft band of light, outside the pill at rest. ::before, since a button's ::after is its tap reach (css/responsive.css) */ #screen-outlet [data-chrome="primary"]::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; border-radius: inherit !important; background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.12) 58%, transparent 72%) !important; /* the one declaration here that is not !important: an !important one would outrank the sweep's animation */ transform: translateX(-120%); } @media (prefers-reduced-motion: no-preference) { html:not(.a11y-calm) #screen-outlet [data-chrome="primary"]:not(:disabled, [aria-disabled="true"])::before { animation: chrome-sheen 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms 1 both !important; } html:not(.a11y-calm) #screen-outlet [data-chrome="primary"][data-sheen]:not(:disabled, [aria-disabled="true"])::before { animation: chrome-sheen-press 720ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms 1 both !important; } } /* ---- less transparency (the phone's setting): solid, no blur ------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { #screen-outlet :is([data-chrome="header"], [data-chrome="actionbar"])::before { background: var(--sys-base) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #screen-outlet [data-chrome="header"] :is(button, a)[data-action][aria-label]:has(> :is(.material-symbols-outlined, svg):only-child), #screen-outlet [data-chrome="header"] :is(button, a)[data-action="back"]:has(:is(.material-symbols-outlined, svg)), #screen-outlet :is(button, a)[data-chrome="back"]:has(:is(.material-symbols-outlined, svg)) { background: var(--sys-raised) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } } /* two names for the same sweep, so a press (js/core/chrome.js sets data-sheen) starts one anew instead of the one that ran */ @keyframes chrome-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } } @keyframes chrome-sheen-press { from { transform: translateX(-120%); } to { transform: translateX(120%); } }