/* ============================================================ Print Ledgers — "Liquid Glass" skin (opt-in, additive, third layer) Requires html.theme-appui as a base — this file only ever adds rules scoped under html.theme-appui.theme-glass, so it is a complete no-op unless BOTH classes are present, and never required for the App UI theme to look/function correctly on its own. Load order: after theme-appui.css. Section numbers below match the design spec this was built from. ============================================================ */ /* ── 8a. The glow — page canvas aurora (four corner blobs) ── */ html.theme-appui.theme-glass { --glass-fill: rgba(248,246,242,0.46); --glass-fill-2: rgba(248,246,242,0.34); --glass-border: rgba(255,253,249,0.50); --glass-rim: rgba(255,254,251,0.85); --glass-sheen: linear-gradient(135deg, rgba(255,253,249,0.28), rgba(255,253,249,0) 55%); /* saturate+blur ONLY: adding contrast()/brightness() to a backdrop-filter chain is a known iOS/WebKit trigger for the filtered region flashing solid black during re-composites (e.g. when a child button is tapped). */ --glass-blur: saturate(140%) blur(34px); /* Persistent chrome (sidebar/bars) gets a more opaque fill than regular cards — nav legibility beats the glass effect there. */ --glass-chrome-fill: rgba(248,246,242,0.62); /* Pressed-state overlay for glass surfaces (see the :active rules near the bottom of this file — transform:scale is disabled on backdrop-filtered surfaces because it invalidates the backdrop snapshot on iOS, which paints black until re-composited). */ --glass-press: rgba(0,0,0,0.05); } html.theme-appui.theme-glass.dark { /* Deliberately more opaque than you'd expect: a lower-opacity fill directly over the near-black aurora base put card and background within ~9 RGB units of each other — cards (and nav bars) became nearly invisible. This value keeps ~26 RGB units of separation. */ --glass-fill: rgba(50,48,46,0.68); --glass-fill-2: rgba(50,48,46,0.52); --glass-border: rgba(255,245,235,0.22); --glass-rim: rgba(255,245,235,0.26); --glass-sheen: linear-gradient(135deg, rgba(255,245,235,0.08), rgba(255,245,235,0) 55%); --glass-chrome-fill: rgba(40,38,36,0.62); --glass-press: rgba(255,255,255,0.07); } /* Tuning note from the spec this was built from: keep blob opacity in the 0.10-0.20 range and blur saturate() around 140%, not higher — an earlier pass at higher blob opacity + saturate(210%) compounded into a muddy uniform brown wash instead of a subtle accent. */ html.theme-appui.theme-glass body { background-color: #F3F1ED; background-image: radial-gradient(circle at 10% 8%, rgba(201,143,67,0.20) 0%, transparent 34%), radial-gradient(circle at 92% 6%, rgba(196,106,58,0.14) 0%, transparent 30%), radial-gradient(circle at 50% 102%, rgba(122,58,88,0.13) 0%, transparent 32%), radial-gradient(circle at 0% 96%, rgba(42,46,60,0.10) 0%, transparent 24%); background-attachment: fixed; background-repeat: no-repeat; } html.theme-appui.theme-glass.dark body { background-color: #0A0B10; background-image: radial-gradient(circle at 10% 8%, rgba(234,189,117,0.16) 0%, transparent 34%), radial-gradient(circle at 92% 6%, rgba(214,122,66,0.12) 0%, transparent 30%), radial-gradient(circle at 50% 102%, rgba(150,72,104,0.12) 0%, transparent 32%), radial-gradient(circle at 0% 96%, rgba(70,78,110,0.10) 0%, transparent 24%); } /* #appui-shell is position:fixed;inset:0 with its own opaque background (theme-appui.css section 3) — it paints directly over the whole viewport, so without this the aurora on above is never visible at all (fully obscured, not just dimmed). Make the shell transparent in glass mode so the aurora shows through. */ html.theme-appui.theme-glass #appui-shell { background: transparent; } /* ── 8b. Glass card material ── */ /* Regular cards: translucent tinted fill (aurora shows through), a diagonal specular sheen, heavy blur, and a bright inset top rim so it reads as glass, not flat translucent plastic. */ html.theme-appui.theme-glass .appui-tile, html.theme-appui.theme-glass .appui-list-group, html.theme-appui.theme-glass .appui-chip { background: var(--glass-sheen), var(--glass-fill); border-color: var(--glass-border); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(0,0,0,0.03); } /* The glass fill above is translucent/light, which would leave the selected chip's white text (theme-appui.css .appui-chip.is-active) unreadable against it — keep the selected chip's solid accent fill so its white label stays legible. */ html.theme-appui.theme-glass .appui-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } /* Nested surfaces (a row inside a group, the biz card inside the sidebar) use the slightly-more-transparent fill-2 so they read as "inside" the parent glass panel rather than another full panel. */ html.theme-appui.theme-glass .appui-list-row, html.theme-appui.theme-glass .appui-sidebar-biz { background: var(--glass-fill-2); border-color: var(--glass-border); } /* The More sheet's open-section tile grid: theme-appui.css gives these rows a higher-specificity background of their own (they're tiles there, not rows), which would silently beat the .appui-list-row rule above and leave opaque cards floating on the frosted sheet. Re-state the glass material at matching-or-higher specificity. */ html.theme-appui.theme-glass .appui-sheet .appui-sidebar-group[open] .appui-list-row { /* fill-2 (the dimmer nested-surface fill), no sheen/rim — tiles should sit quietly INSIDE the sheet's glass, not gleam on top. */ background: var(--glass-fill-2); box-shadow: none; } /* The sheet's bare utility rows (pinned Help, Dark Mode, Logout) are NOT nested inside a card group — the generic .appui-list-row glass fill above painted them as highlighted bands sitting directly on the sheet surface. They should be flat rows, like the section headers around them. */ html.theme-appui.theme-glass .appui-sheet .appui-sheet-pinned-link .appui-list-row { background: transparent; } /* Persistent chrome: sidebar, desktop topbar, bottom sheet, FAB sub- buttons. More opaque than regular cards (--glass-chrome-fill) — legibility of nav beats the glass effect here. None of these are position:fixed except .appui-sheet (handled separately below via the ::before technique), so a direct backdrop-filter is safe. */ html.theme-appui.theme-glass .appui-sidebar, html.theme-appui.theme-glass .appui-topbar, html.theme-appui.theme-glass .appui-fab-sub-btn, html.theme-appui.theme-glass .appui-fab-sub-label { background: var(--glass-chrome-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } /* .appui-appbar / .appui-tabbar already push their backdrop-filter onto a ::before pseudo-element (the iOS position:fixed compositing fix — see theme-appui.css section 2). Reuse that safe path for glass by just overriding the --bar-bg token they already read from, and upgrading the blur strength to match the rest of the glass system. */ html.theme-appui.theme-glass { --bar-bg: var(--glass-chrome-fill); } html.theme-appui.theme-glass .appui-appbar::before, html.theme-appui.theme-glass .appui-tabbar::before { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } /* .appui-sheet IS position:fixed, so it gets its own ::before rather than a direct filter — same iOS/WebKit compositing gotcha as the fixed bars: backdrop-filter directly on a position:fixed element can fail to composite entirely (most reliably reproduced in installed- PWA standalone mode). The sheet has no ::before in flat/App-UI mode (it doesn't need one there — no filter is applied), so this is additive: glass mode is what introduces the filter, and it goes through the safe pseudo-element path from the start. */ html.theme-appui.theme-glass .appui-sheet { background: transparent; overflow: hidden; } html.theme-appui.theme-glass .appui-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass-sheen), var(--glass-chrome-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } /* ── iOS tap "black box" mitigations ── Two related WebKit compositing bugs show up as a solid black rectangle when a button is tapped in glass mode: 1. A transparent child of a backdrop-filtered bar (tab bar / app bar buttons) gets promoted to its own compositing layer at tap time by the :active transform; the promotion re-composites the filtered region, which paints black for a frame or sticks. Fix: keep a standing translateZ(0) on those buttons so the layer exists BEFORE the tap — five tabs + two appbar buttons, so the extra layers are trivially cheap. 2. Scaling an element that ITSELF has backdrop-filter (tiles) invalidates its backdrop snapshot mid-gesture. Fix: replace the scale with a subtle press overlay — no geometry change at all. */ html.theme-appui.theme-glass .appui-tab, html.theme-appui.theme-glass .appui-appbar-btn, html.theme-appui.theme-glass .appui-tab-fab-btn { transform: translateZ(0); } html.theme-appui.theme-glass .appui-tab:active { transform: translateZ(0) scale(0.92); } html.theme-appui.theme-glass .appui-appbar-btn:active { transform: translateZ(0) scale(0.94); } html.theme-appui.theme-glass .appui-tab-fab-btn:active { transform: translateZ(0) scale(0.92); } /* Same bug, same fix, for rows inside the More sheet — .appui-sheet is backdrop-filtered via its own ::before (see section 8b above), so its open-group rows are children of a blurred surface too. */ html.theme-appui.theme-glass .appui-sheet .appui-sidebar-group[open] .appui-list-row { transform: translateZ(0); } html.theme-appui.theme-glass .appui-sheet .appui-sidebar-group[open] .appui-list-row:active { transform: translateZ(0) scale(0.95); } html.theme-appui.theme-glass .appui-tile:active { transform: none; background: linear-gradient(var(--glass-press), var(--glass-press)), var(--glass-sheen), var(--glass-fill); } /* ── 8d. Accessibility: glow/blur are decorative only ── */ @media (prefers-reduced-transparency: reduce) { html.theme-appui.theme-glass body { background-image: none !important; } html.theme-appui.theme-glass .appui-tile, html.theme-appui.theme-glass .appui-list-group, html.theme-appui.theme-glass .appui-chip, html.theme-appui.theme-glass .appui-list-row, html.theme-appui.theme-glass .appui-sidebar-biz { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } html.theme-appui.theme-glass .appui-sidebar, html.theme-appui.theme-glass .appui-topbar, html.theme-appui.theme-glass .appui-fab-sub-btn, html.theme-appui.theme-glass .appui-fab-sub-label { background: var(--card-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.theme-appui.theme-glass { --bar-bg: var(--card-solid); } html.theme-appui.theme-glass .appui-appbar::before, html.theme-appui.theme-glass .appui-tabbar::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.theme-appui.theme-glass .appui-sheet { background: var(--card-solid) !important; } html.theme-appui.theme-glass .appui-sheet::before { display: none !important; } html.theme-appui.theme-glass #appui-shell { background: var(--bg) !important; } } /* ── @supports fallback: browsers with no backdrop-filter support at all get solid cards instead of a half-applied translucent look ── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.theme-appui.theme-glass .appui-tile, html.theme-appui.theme-glass .appui-list-group, html.theme-appui.theme-glass .appui-chip, html.theme-appui.theme-glass .appui-list-row, html.theme-appui.theme-glass .appui-sidebar-biz { background: var(--card); } html.theme-appui.theme-glass .appui-sidebar, html.theme-appui.theme-glass .appui-topbar, html.theme-appui.theme-glass .appui-sheet, html.theme-appui.theme-glass .appui-fab-sub-btn, html.theme-appui.theme-glass .appui-fab-sub-label { background: var(--card-solid); } html.theme-appui.theme-glass .appui-sheet::before { display: none; } html.theme-appui.theme-glass #appui-shell { background: var(--bg); } }