/* * Surfaces that read as layers rather than as painted rectangles. * * Measured before writing any of this: `backdrop-filter` appears exactly * twice in the whole application, both on the Ctrl-K overlay. The header, the * sidebar, every modal and every dropdown are opaque fills separated from the * content by a one-pixel line. That is why the interface reads as flat no * matter how carefully the borders and shadows are tuned — there is no depth * to tune, only edges. * * A translucent layer with content visibly moving underneath tells you two * things at once: this bar is chrome rather than content, and there is more * page above than you can currently see. A 1px border tells you neither. * * Three rules held throughout: * * A blurred surface must never sit on another blurred surface — the second * blur samples the first and legibility collapses. So the header and sidebar * are materials; the cards on the page under them stay solid. * * Bigger surfaces read as thicker. A modal gets more blur and a deeper shadow * than a dropdown, because it is closer to you and covers more. * * Every one of these degrades to the current solid look if the browser has no * `backdrop-filter` or the reader has asked for reduced transparency. Nothing * here is load-bearing. */ /* ========================================================================== 1. Chrome: the header and the sidebar ========================================================================== */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { /* * The header sits over scrolling content, so it is the one surface where * translucency does real work: you can see that the page continues * underneath it rather than being clipped by it. * * The saturation lift matters as much as the blur. Blurring alone washes * colour out and the bar goes grey; pushing saturation back up keeps what * is behind it recognisable as the page rather than as fog. */ /* * Written as rgba rather than color-mix: the header and sidebar were * already `background: transparent` from an earlier theme, and a * color-mix against a var that resolves to nothing produced a fully * transparent surface — blur with no material to blur into. A literal * alpha cannot fail that way. !important because the theme's own * `transprent-bg` class sets transparent on the same element. */ .dash-header, .dash-header.transprent-bg { background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); /* The hairline stays, but as the edge of a material rather than as a divider — it catches light along the top of the surface. */ border-bottom: 1px solid rgba(230, 234, 242, .6); } :root[data-theme="dark"] .dash-header, :root[data-theme="dark"] .dash-header.transprent-bg { background: rgba(19, 25, 34, .72) !important; border-bottom-color: rgba(255, 255, 255, .08); } /* * The sidebar is a structural region, so it takes a heavier material than * the header — that weight difference is what says one is a wall and the * other is a shelf. */ .dash-sidebar, .dash-sidebar.transprent-bg { background: rgba(255, 255, 255, .84) !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } :root[data-theme="dark"] .dash-sidebar, :root[data-theme="dark"] .dash-sidebar.transprent-bg { background: rgba(19, 25, 34, .82) !important; } /* The phone tab bar is chrome over content in exactly the same way. */ .app-tabbar { background: rgba(255, 255, 255, .80) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(230, 234, 242, .6); } :root[data-theme="dark"] .app-tabbar { background: rgba(19, 25, 34, .82) !important; border-top-color: rgba(255, 255, 255, .08); } } /* * The controls sitting on the header material. * * The attendance pill and the search box are painted white by a rule that * predates the dark theme, so in dark mode they were two bright rectangles on * a dark bar — the one thing on the screen that had not been themed. They * sit *on* a material, so what they want is not a colour of their own but a * slight lift from whatever the bar is: lighter in dark, darker in light. */ .dash-header .dash-head-link, .dash-header .cp-trigger, .hdr-break .dash-head-link { background: rgba(16, 23, 37, .04); border: 1px solid rgba(16, 23, 37, .06); } :root[data-theme="dark"] .dash-header .dash-head-link, :root[data-theme="dark"] .dash-header .cp-trigger, :root[data-theme="dark"] .hdr-break .dash-head-link { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .09); color: var(--ds-ink); } :root[data-theme="dark"] .dash-header .dash-head-link:hover, :root[data-theme="dark"] .dash-header .cp-trigger:hover { background: rgba(255, 255, 255, .12); } /* ========================================================================== 2. Things that float above the page ========================================================================== */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { /* * A dropdown is small and close to its trigger, so it takes the lightest * material — just enough that the page is visible through it and it reads * as hovering rather than as pasted on. */ .dropdown-menu, .dash-h-dropdown, .tp-menu__panel { background: color-mix(in srgb, var(--ds-surface, #FFF) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border: 1px solid color-mix(in srgb, var(--ds-line, #E9EDF3) 70%, transparent); } /* * A modal is the largest floating surface and the one furthest from the * page, so it gets the most of everything — and a scrim behind it, which * is what actually makes a modal read as modal. */ .modal-content { background: color-mix(in srgb, var(--ds-surface, #FFF) 92%, transparent); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border: 1px solid color-mix(in srgb, var(--ds-line, #E9EDF3) 55%, transparent); } .modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: .42; } } /* ========================================================================== 3. Depth by size, not by decoration ========================================================================== */ /* * These apply whether or not blur is supported, because a shadow is what * carries the hierarchy when the material cannot. The progression is the * point: a card barely lifts, a dropdown clearly floats, a modal is plainly * in front of everything. */ .ov-card, .card { box-shadow: 0 1px 2px rgba(16, 23, 37, .04), 0 2px 8px rgba(16, 23, 37, .04); } .dropdown-menu, .dash-h-dropdown, .tp-menu__panel { box-shadow: 0 4px 12px rgba(16, 23, 37, .06), 0 16px 40px rgba(16, 23, 37, .12); } .modal-content { box-shadow: 0 8px 24px rgba(16, 23, 37, .10), 0 32px 80px rgba(16, 23, 37, .20); } :root[data-theme="dark"] .ov-card, :root[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .22); } :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .dash-h-dropdown, :root[data-theme="dark"] .modal-content { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 32px 80px rgba(0, 0, 0, .55); } /* ========================================================================== 4. Scroll edges instead of dividers ========================================================================== */ /* * A sticky table header currently announces itself with a one-pixel line, * which is a border whether or not anything is scrolling under it. A fade * appears only where content actually passes beneath the header, so the edge * means something: rows are moving under here. */ /* * The fade hangs off the whole header row rather than off each cell. Put on * the cells it drew a separate gradient per column, and at the table's right * edge that read as a stray vertical line where the last cell's fade ended. * One element, one edge. */ .client-table thead, .table-responsive thead { position: relative; } .client-table thead::after, .table-responsive > table thead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, rgba(16, 23, 37, .05), rgba(16, 23, 37, 0) ); } :root[data-theme="dark"] .client-table thead::after, :root[data-theme="dark"] .table-responsive > table thead::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); } /* ========================================================================== 5. When the reader has asked for less ========================================================================== */ /* * Reduced transparency is a legibility request, not a preference about * fashion. Everything goes solid and the blur is dropped entirely — the * layout is identical, the surfaces simply stop being see-through. */ @media (prefers-reduced-transparency: reduce) { .dash-header, .dash-sidebar, .app-tabbar, .dropdown-menu, .dash-h-dropdown, .tp-menu__panel, .modal-content { background: var(--ds-surface, #FFF); -webkit-backdrop-filter: none; backdrop-filter: none; } .modal-backdrop.show { -webkit-backdrop-filter: none; backdrop-filter: none; opacity: .6; } } /* * High contrast wants defined edges, which is the opposite of a soft * material. Solid fills and a real border, everywhere. */ @media (prefers-contrast: more) { .dash-header, .dash-sidebar, .app-tabbar, .dropdown-menu, .dash-h-dropdown, .modal-content, .ov-card, .card { background: var(--ds-surface, #FFF); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--ds-ink-2, #3D4759); box-shadow: none; } .client-table thead::after, .table-responsive > table thead::after { display: none; } }