/* Meridian Mail v2 — neon glass layered on the Organic tokens. Ten palettes (html[data-palette]) set hue and chroma parameters; the light and dark blocks turn them into the full token set in oklch on one lightness scale, so a palette swap keeps every contrast. palettes.json is the canonical list of palettes (id, name, tag, description); the parameters follow theme-colors.css, whose :root is Dune (see the dune block). The house default is Pulse, the redesign pack's palette: the pre-paint script in index.html sets data-palette="pulse" on a fresh profile before the first paint, so the pulse block below is what a visitor who never chose a palette sees; :root's Dune parameters are the sheet's own fallback and never paint on their own. */ :root { --hue-accent: 45; --hue-accent-2: 135; --sat: 1; --sat-2: 1; /* accent chroma multipliers */ --hue-ground: 60; --chroma-ground: 1; /* tint of the neutral ground */ --blob-scale: 1; /* per-palette strength of the ambient glow: the sheet declares it per palette and never consumes it; folding it into --blob-alpha is our extension, so Emirati's glow runs at 0.4 of the sheet's fixed 0.55 / 0.9 and Pulse's at 1.15 */ --blob-alpha: calc(0.55 * var(--blob-scale, 1)); --deco-alpha: 1; /* opacity of the palette decoration (the Emirati flag) */ } /* the dark soft glow is capped at 0.28: at the sheet's 0.55 the blob core lifts the row ground until muted text measures under 4.5:1 at the brightest point of the drift (Dune neutral-600 3.44, Pulse 3.07 at its 1.15 scale); at 0.28 every palette clears it there (Pulse 4.70, Dune 4.97, the rest >= 5.2). Light holds at 0.55 (neutral-600 >= 6 under the core); vivid is the user's explicit choice. Off and vivid still win: same specificity, later */ html[data-theme="dark"] { --blob-alpha: calc(0.28 * var(--blob-scale, 1)); } html[data-blobs="off"] { --blob-alpha: 0; } html[data-blobs="vivid"] { --blob-alpha: calc(0.9 * var(--blob-scale, 1)); } /* ---- palettes: hand-tuned glass identities from theme-colors.css (Pulse is the house default, the redesign pack's palette; palettes.json carries the same parameters except Dune's, see below) ---- */ /* Dune follows the sheet's :root (sat-2 1, chroma-ground 1: the 0.014 ground chroma the house look had before the palettes), not palettes.json's 0.8 / 0.8, where the design contradicts itself; PALETTES in index.html and the head style carry the same values */ html[data-palette="dune"] { --blob-scale: 1; --hue-accent: 45; --hue-accent-2: 135; --sat: 1; --sat-2: 1; --hue-ground: 60; --chroma-ground: 1; } html[data-palette="emirati"] { --blob-scale: 0.4; --hue-accent: 27; --hue-accent-2: 150; --sat: 1.05; --sat-2: 0.9; --hue-ground: 80; --chroma-ground: 0.15; } html[data-palette="oasis"] { --blob-scale: 0.7; --hue-accent: 190; --hue-accent-2: 70; --sat: 0.62; --sat-2: 0.55; --hue-ground: 195; --chroma-ground: 0.9; } html[data-palette="sage"] { --blob-scale: 0.6; --hue-accent: 152; --hue-accent-2: 50; --sat: 0.55; --sat-2: 0.5; --hue-ground: 145; --chroma-ground: 0.7; } html[data-palette="dusk"] { --blob-scale: 0.8; --hue-accent: 68; --hue-accent-2: 28; --sat: 0.8; --sat-2: 0.65; --hue-ground: 55; --chroma-ground: 1.5; } html[data-palette="rosewater"] { --blob-scale: 0.7; --hue-accent: 8; --hue-accent-2: 330; --sat: 0.7; --sat-2: 0.55; --hue-ground: 20; --chroma-ground: 0.9; } html[data-palette="azure"] { --blob-scale: 0.7; --hue-accent: 250; --hue-accent-2: 195; --sat: 0.85; --sat-2: 0.7; --hue-ground: 255; --chroma-ground: 1.4; } html[data-palette="pulse"] { --blob-scale: 1.15; --hue-accent: 295; --hue-accent-2: 200; --sat: 1.05; --sat-2: 0.95; --hue-ground: 285; --chroma-ground: 1.4; } html[data-palette="champagne"] { --blob-scale: 0.5; --hue-accent: 85; --hue-accent-2: 345; --sat: 0.6; --sat-2: 0.45; --hue-ground: 78; --chroma-ground: 1.1; } html[data-palette="obsidian"] { --blob-scale: 0.45; --hue-accent: 240; --hue-accent-2: 48; --sat: 0.4; --sat-2: 0.7; --hue-ground: 250; --chroma-ground: 0.7; } /* ---- light glass ---- */ :root { --color-bg: oklch(0.965 calc(0.012 * var(--chroma-ground)) var(--hue-ground)); --color-text: oklch(0.22 calc(0.02 * var(--chroma-ground)) var(--hue-ground)); --color-surface: rgba(255, 255, 255, 0.62); --color-divider: oklch(0.22 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.11); --color-accent: oklch(0.62 calc(0.2 * var(--sat)) var(--hue-accent)); --color-accent-2: oklch(0.6 calc(0.15 * var(--sat-2)) var(--hue-accent-2)); --color-neutral-100: oklch(0.985 calc(0.006 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-200: oklch(0.95 calc(0.01 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-300: oklch(0.9 calc(0.012 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-400: oklch(0.8 calc(0.014 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-500: oklch(0.6 calc(0.016 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-600: oklch(0.47 calc(0.018 * var(--chroma-ground)) var(--hue-ground)); /* muted text: >= 4.5:1 on the light glass */ --color-neutral-700: oklch(0.42 calc(0.018 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-800: oklch(0.32 calc(0.016 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-900: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground)); --color-accent-100: oklch(0.97 calc(0.03 * var(--sat)) var(--hue-accent)); --color-accent-200: oklch(0.93 calc(0.07 * var(--sat)) var(--hue-accent)); --color-accent-300: oklch(0.87 calc(0.12 * var(--sat)) var(--hue-accent)); --color-accent-400: oklch(0.79 calc(0.17 * var(--sat)) var(--hue-accent)); --color-accent-500: oklch(0.7 calc(0.2 * var(--sat)) var(--hue-accent)); --color-accent-600: oklch(0.6 calc(0.2 * var(--sat)) var(--hue-accent)); --color-accent-700: oklch(0.5 calc(0.17 * var(--sat)) var(--hue-accent)); --color-accent-800: oklch(0.4 calc(0.13 * var(--sat)) var(--hue-accent)); --color-accent-900: oklch(0.3 calc(0.09 * var(--sat)) var(--hue-accent)); --color-accent-2-100: oklch(0.97 calc(0.03 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-200: oklch(0.93 calc(0.06 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-300: oklch(0.87 calc(0.1 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-400: oklch(0.79 calc(0.14 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-500: oklch(0.7 calc(0.16 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-600: oklch(0.6 calc(0.16 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-700: oklch(0.5 calc(0.13 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-800: oklch(0.4 calc(0.1 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-900: oklch(0.3 calc(0.07 * var(--sat-2)) var(--hue-accent-2)); --glass: rgba(255, 255, 255, 0.5); --glass-strong: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.8); --glass-hover: oklch(0.22 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.06); --glass-active: oklch(0.22 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.1); --neon-glow: oklch(0.7 calc(0.2 * var(--sat)) var(--hue-accent) / 0.45); --neon-glow-2: oklch(0.7 calc(0.16 * var(--sat-2)) var(--hue-accent-2) / 0.4); --shadow-sm: 0 1px 2px oklch(0.2 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.08); --shadow-md: 0 10px 28px -10px oklch(0.2 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.2); --shadow-lg: 0 28px 70px -18px oklch(0.2 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.32); } /* ---- dark glass (charcoal) ---- */ html[data-theme="dark"] { --color-bg: oklch(0.15 calc(0.014 * var(--chroma-ground)) var(--hue-ground)); --color-text: oklch(0.95 calc(0.01 * var(--chroma-ground)) var(--hue-ground)); --color-surface: rgba(255, 255, 255, 0.06); --color-divider: rgba(255, 255, 255, 0.11); --color-accent: oklch(0.78 calc(0.19 * var(--sat)) var(--hue-accent)); --color-accent-2: oklch(0.8 calc(0.15 * var(--sat-2)) var(--hue-accent-2)); --color-neutral-100: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-200: oklch(0.27 calc(0.015 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-300: oklch(0.35 calc(0.016 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-400: oklch(0.46 calc(0.017 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-500: oklch(0.72 calc(0.016 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-600: oklch(0.85 calc(0.012 * var(--chroma-ground)) var(--hue-ground)); /* muted text: >= 4.5:1 on the brightest glass panel */ --color-neutral-700: oklch(0.8 calc(0.012 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-800: oklch(0.9 calc(0.01 * var(--chroma-ground)) var(--hue-ground)); --color-neutral-900: oklch(0.97 calc(0.006 * var(--chroma-ground)) var(--hue-ground)); --color-accent-100: oklch(0.28 calc(0.08 * var(--sat)) var(--hue-accent)); --color-accent-200: oklch(0.36 calc(0.11 * var(--sat)) var(--hue-accent)); --color-accent-300: oklch(0.46 calc(0.15 * var(--sat)) var(--hue-accent)); --color-accent-400: oklch(0.58 calc(0.18 * var(--sat)) var(--hue-accent)); --color-accent-500: oklch(0.7 calc(0.2 * var(--sat)) var(--hue-accent)); --color-accent-600: oklch(0.78 calc(0.19 * var(--sat)) var(--hue-accent)); --color-accent-700: oklch(0.85 calc(0.14 * var(--sat)) var(--hue-accent)); --color-accent-800: oklch(0.91 calc(0.09 * var(--sat)) var(--hue-accent)); --color-accent-900: oklch(0.96 calc(0.04 * var(--sat)) var(--hue-accent)); --color-accent-2-100: oklch(0.28 calc(0.06 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-200: oklch(0.36 calc(0.09 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-300: oklch(0.46 calc(0.12 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-400: oklch(0.58 calc(0.14 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-500: oklch(0.7 calc(0.16 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-600: oklch(0.8 calc(0.15 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-700: oklch(0.86 calc(0.11 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-800: oklch(0.92 calc(0.07 * var(--sat-2)) var(--hue-accent-2)); --color-accent-2-900: oklch(0.96 calc(0.03 * var(--sat-2)) var(--hue-accent-2)); --glass: rgba(255, 255, 255, 0.055); --glass-strong: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground) / 0.78); --glass-border: rgba(255, 255, 255, 0.12); --glass-hover: rgba(255, 255, 255, 0.07); --glass-active: rgba(255, 255, 255, 0.12); --neon-glow: oklch(0.78 calc(0.19 * var(--sat)) var(--hue-accent) / 0.55); --neon-glow-2: oklch(0.8 calc(0.15 * var(--sat-2)) var(--hue-accent-2) / 0.5); --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 34px -12px rgba(0, 0, 0, 0.65); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 34px 80px -22px rgba(0, 0, 0, 0.8); } /* theme cross-fade — only while html.theming is set, so hovers stay instant */ html.theming body, html.theming body * { transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, fill 0.45s ease, stroke 0.45s ease, opacity 0.45s ease !important; } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { html.theming body, html.theming body * { transition: none !important; } } html, body { height: 100%; margin: 0; overflow: hidden; background: var(--color-bg); } a { color: var(--color-accent-700); } a:hover { color: var(--color-accent-600); } * { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; } ::placeholder { color: color-mix(in srgb, var(--color-text) 42%, transparent); } .btn, .input, .seg-opt { transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; } .seg-opt { white-space: nowrap; } .seg { flex-wrap: wrap; } .btn-primary { box-shadow: 0 8px 26px -10px var(--neon-glow); } /* the ground-coloured label on the accent: the light theme needs a deeper accent to reach 4.5:1 (Compose / Send measured 3.57:1 at the token's L 0.62). The pack's sheet deepens it to L 0.53 (hover 0.48), where nine palettes read >= 4.55 (Pulse 5.22); Oasis, the lowest-chroma accent, misses there (4.36) and alone keeps L 0.50 / 0.45 (4.92) */ :root:not([data-theme="dark"]) .btn-primary { background: oklch(0.53 calc(0.19 * var(--sat)) var(--hue-accent)); border-color: oklch(0.53 calc(0.19 * var(--sat)) var(--hue-accent)); } :root:not([data-theme="dark"]) .btn-primary:hover { background: oklch(0.48 calc(0.19 * var(--sat)) var(--hue-accent)); border-color: oklch(0.48 calc(0.19 * var(--sat)) var(--hue-accent)); } html[data-palette="oasis"]:not([data-theme="dark"]) .btn-primary { background: oklch(0.5 calc(0.19 * var(--sat)) var(--hue-accent)); border-color: oklch(0.5 calc(0.19 * var(--sat)) var(--hue-accent)); } html[data-palette="oasis"]:not([data-theme="dark"]) .btn-primary:hover { background: oklch(0.45 calc(0.19 * var(--sat)) var(--hue-accent)); border-color: oklch(0.45 calc(0.19 * var(--sat)) var(--hue-accent)); } .btn-primary:hover { box-shadow: 0 10px 30px -8px var(--neon-glow); } .input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); } .seg { background: var(--glass); } .seg-opt:has(input:checked) { box-shadow: 0 0 18px -4px var(--neon-glow); } /* the checked option's label: the sheet's ground ink on the L 0.62 accent reads 3.3-3.6:1 in the light theme (Azure 3.29), so the light theme paints it as the app's ink-on-accent pair (the deepened accent, white ink: >= 5.39 in every palette); the dark theme keeps the sheet's pair, the pack's, >= 8.68 */ :root:not([data-theme="dark"]) .seg-opt:has(input:checked) { background: var(--mm-accent-strong); color: var(--mm-on-accent); } /* rich-text content inside the editor and message bodies */ .mm-rich blockquote { margin: 6px 0 6px 4px; padding: 2px 0 2px 12px; border-left: 3px solid var(--color-accent-400); opacity: 0.85; } .mm-rich p { margin: 0 0 10px; } .mm-rich ul, .mm-rich ol { margin: 6px 0 10px; padding-left: 26px; } .mm-rich a { color: var(--color-accent-700); } .mm-rich:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--color-text) 42%, transparent); pointer-events: none; } /* mobile browsers: no auto-zoom on focus (iOS zooms inputs under 16px), no double-tap zoom on controls */ html { -webkit-text-size-adjust: 100%; } button, a, [role="button"] { touch-action: manipulation; } @media (max-width: 760px), (pointer: coarse) { input, textarea, select, [contenteditable] { font-size: 16px !important; } } /* mobile app shell: fixed non-bouncing page, never a horizontal scrollbar, no tap flash */ html, body { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: rgba(255, 255, 255, 0.86); --glass-strong: rgba(255, 255, 255, 0.94); } html[data-theme="dark"] { --glass: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground) / 0.9); --glass-strong: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground) / 0.96); } } @media (max-width: 760px) { .dialog { border-radius: 0; } } /* Respect the user's reduced-motion setting for the decorative animations (sign-in card float, title typing caret, toasts, star pop). The sky renderer already checks the same media query for scene motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } } /* Search options on phones: the panel is a sheet under the header (position, top and max-height are the advPos / advTop / advMaxH vals) that ends above the bottom bar. It never scrolls sideways, its selects share the sheet's width instead of growing to their longest option (the forwarding address made the content 565 px wide and pushed Create filter off the screen), the label column folds over the fields, every control is a 40 px target, and the action row is pinned to the sheet's bottom edge so Search / Create filter are always reachable. The scrim is the real backdrop element: a ::before inside the sheet was painted over the sheet's own content, because backdrop-filter makes the sheet the containing block of its fixed descendants. */ :root { --mm-scrim: oklch(0.2 calc(0.02 * var(--chroma-ground)) var(--hue-ground) / 0.3); } html[data-theme="dark"] { --mm-scrim: rgba(0, 0, 0, 0.55); } @media (max-width: 759px) { [data-mm-adv-backdrop] { background: var(--mm-scrim) !important; } #adv-search { overflow-x: hidden !important; overscroll-behavior: contain; } #adv-search select, #adv-search input { min-width: 0 !important; max-width: 100%; width: 100%; box-sizing: border-box; } #adv-search select { text-overflow: ellipsis; } /* step 1 (the pack's 2d panel on a phone): the header wraps its chips under the title, every row folds the label over its control, the size / date rows wrap their pills, the action row is pinned to the sheet's bottom edge; every control is a 40 px target */ #adv-search .mm-as-h { flex-wrap: wrap; padding: 2px 2px 10px; } #adv-search .mm-as-tw { flex-basis: 160px; min-width: 160px; } #adv-search .mm-as-acts { flex-wrap: wrap; justify-content: flex-end; align-items: center; } #adv-search .mm-opchip { min-height: 40px; padding: 0 0 0 10px; } #adv-search .mm-opchip-x, #adv-search .mm-as-close, #adv-search .mm-as-pick { width: 40px; height: 40px; } #adv-search .mm-as-dw > .input { padding-right: 48px; } #adv-search .mm-as-r { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px; } #adv-search .mm-as-row { flex-wrap: wrap; } #adv-search .mm-as-sel { width: auto; flex: 1 1 120px; } #adv-search .mm-as-row > .input { flex: 1 1 100px; } #adv-search input.mm-as-native { width: 1px !important; } #adv-search .mm-tog { min-height: 40px; } #adv-search .mm-as-a { position: sticky; bottom: 0; z-index: 2; margin: 8px -16px -14px; padding: 8px 16px 14px; background: var(--mm-panel-deep); } /* step 2: a checkbox column and a select column; the add-address link takes its own line; the title wraps beside the back arrow */ #adv-search [data-screen-label="Create filter"] > div[style*="gap: 12px"]:not(:first-child):not(:last-child) { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; } #adv-search [data-screen-label="Create filter"] > div[style*="gap: 12px"]:not(:first-child):not(:last-child) > a { grid-column: 1 / -1; justify-self: start; } #adv-search [data-screen-label="Create filter"] > div:first-child > span { min-width: 0; flex: 1 1 auto; } #adv-search [role="checkbox"] { min-height: 40px; } #adv-search a { display: inline-flex !important; align-items: center; min-height: 40px; } #adv-search .btn { min-height: 40px; } #adv-search [data-screen-label="Create filter"] > div:first-child > button[aria-label="Back to search options"] { flex: none; width: 40px !important; height: 40px !important; } /* step 2 pins its Learn more / Create filter row to the sheet's bottom edge */ #adv-search [data-screen-label="Create filter"] > div:last-child { position: sticky; bottom: 0; z-index: 2; margin: 8px -16px -14px; padding: 8px 16px 14px; background: var(--mm-panel-deep); border-top: 1px solid var(--color-divider); } /* Settings > Filters and Blocked Addresses: 40 px links, check boxes and buttons without changing the rows' rhythm */ [data-screen-label="Filters and Blocked Addresses"] a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; margin: -9px -8px; } [data-screen-label="Filters and Blocked Addresses"] [role="checkbox"] { padding: 11px !important; margin: -9px -11px; box-sizing: content-box; } [data-screen-label="Filters and Blocked Addresses"] .btn { min-height: 40px; } [data-screen-label="Filters and Blocked Addresses"] { overflow-wrap: anywhere; } /* the settings footer's Program Policies / Details links: 40 px boxes around the 12 px text (the margin takes the padding back, so the footer keeps its height) */ [data-screen-label="Settings footer"] a { display: inline-block; padding: 13px 6px; margin: -13px -6px; } } /* Settings on phones: each row is `minmax(0,1fr) auto` and the control column won, squeezing titles to one word per line (and the Labels tab past the screen edge). Stack the control under its text, let nothing force the card wider than the screen, and fold the filter form's fixed two-column grid. */ @media (max-width: 720px) { [data-screen-label="Settings"] div[style*="grid-template-columns: minmax(0, 1fr) auto"], [data-screen-label="Settings"] div[style*="grid-template-columns: minmax(0px, 1fr) auto"] { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } /* React serialises 0 as 0px */ [data-screen-label="Settings"] div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } [data-screen-label="Settings"] .card { overflow-x: hidden; } [data-screen-label="Settings"] .card * { min-width: 0; overflow-wrap: anywhere; } } /* Tasks rail: one long unbroken title widened the whole panel and pushed Add / Remove off the edge. */ div:has(> button[aria-label="Toggle done"]) { min-width: 0; } button[aria-label="Toggle done"] ~ * { min-width: 0; overflow-wrap: anywhere; } /* Keyboard-shortcuts dialog was 420px on a 390px phone. */ @media (max-width: 720px) { .dialog[aria-label="Keyboard shortcuts"] { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; min-width: 0; box-sizing: border-box; } .dialog[aria-label="Keyboard shortcuts"] kbd { white-space: normal; } } /* Keyboard focus must be visible in Compose (To / Subject / body had no indicator when reached with Tab). */ .dialog[aria-label="Compose"] input:focus-visible, .dialog[aria-label="Compose"] [contenteditable]:focus-visible, [data-mm-row]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 6px; } /* The suggested-subject chips and their × under the compose subject get the same ring with their pill radius kept; a pressed chip darkens like the other glass buttons. */ [data-mm-subject-sugg] button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } [data-mm-subject-chip]:active { background: var(--glass-active) !important; } /* Touch: 14px importance marker and 18px chip / attachment removers get a 24px hit area without moving anything. */ @media (hover: none) { button[aria-label="Toggle importance"], button[aria-label^="Remove "], button[aria-label="Toggle done"] { padding: 5px !important; margin: -5px !important; box-sizing: content-box !important; } } /* Sign-in: the tick is only drawn once the box is checked. */ [data-screen-label="Sign in"] [role="checkbox"][aria-checked="false"] svg { visibility: hidden; } /* Phones: the passkey and linked-account sign-in buttons (the bridge places them after the Continue button) reach the 40 px tap size. */ /* Phones: scrolling surfaces get room past the Compose FAB; settings tabs are one scrollable row. */ @media (max-width: 759px) { [data-screen-label="Mail"] section[aria-label="Reading pane"] div[style*="overflow: auto"], [data-screen-label="Mail"] section[aria-label="Conversation list"] div[style*="overflow: auto"], [data-screen-label="Mail"] section[aria-label="Conversation list"] div[style*="overflow: hidden auto"], [data-screen-label="Mail"] section[aria-label="Conversation list"] div[style*="overflow-y: auto"] { padding-bottom: 96px !important; } [data-screen-label="Settings"] [role="tablist"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } [data-screen-label="Settings"] [role="tablist"]::-webkit-scrollbar { display: none; } [data-screen-label="Settings"] [role="tab"] { flex: 0 0 auto; white-space: nowrap; } } /* The inbox category row (every width): the phone's row scrolls sideways at all times (its vals set overflow-x), the desktop's only while its tabs outgrow a split list (syncCatTabs sets data-mm-scroll on it; QA-11-1) - then the same hidden scrollbar, scroll-padding and edge fade (data-mm-more, catFadeSync) serve both. The tab's hover fill is a stylesheet rule under (hover: hover), so a phone's tap leaves no fill under the tab it selected (QA-11-6). */ [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"] { --mm-tabs-fade: 36px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding: 0 calc(var(--mm-tabs-fade) + 4px); } /* the category row scrolls sideways (its phone vals set overflow-x); momentum on older WebKit, no scrollbar; the scroll-padding is wider than the edge fade below, so the chosen tab (revealCatTab reads this padding as its margin; the browser's own focus scrolling honours it) lands past the fade, never half erased by it; the first and last tabs stop at the row's 10 px end padding */ [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"]::-webkit-scrollbar { display: none; } [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"][data-mm-more="right"] { -webkit-mask: linear-gradient(to right, #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; mask: linear-gradient(to right, #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; } /* the row's edge fades where a tab is cut by it (catFadeSync sets data-mm-more only for a genuinely cut tab, not for the end padding scrolled away); the divider's 1 px under the tabs stays whole */ [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"][data-mm-more="left"] { -webkit-mask: linear-gradient(to left, #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; mask: linear-gradient(to left, #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; } [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"][data-mm-more="both"] { -webkit-mask: linear-gradient(to right, transparent, #000 var(--mm-tabs-fade), #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; mask: linear-gradient(to right, transparent, #000 var(--mm-tabs-fade), #000 calc(100% - var(--mm-tabs-fade)), transparent) 0 0 / 100% calc(100% - 1px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat; } [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"][data-mm-scroll] { overflow-x: auto !important; } @media (hover: hover) { [data-screen-label="Mail"] section[aria-label="Conversation list"] > [role="tablist"] > [role="tab"]:hover { background: var(--glass-hover) !important; } } /* Phones up to 480px: the brand bubble gives its room to the search box (it was 150px wide, clipping its own placeholder). */ @media (max-width: 480px) { [data-screen-label="Mail"] > header { gap: 4px !important; } [data-screen-label="Mail"] > header > div[style*="flex: none"] { display: none !important; } [data-screen-label="Mail"] > header button[aria-label="Toggle theme"] { padding: 8px !important; } } /* 320px phones: the header keeps every control on screen. */ @media (max-width: 360px) { [data-screen-label="Mail"] > header { gap: 2px !important; padding: 0 4px !important; } [data-screen-label="Mail"] > header > div[style*="flex: none"] { display: none !important; } [data-screen-label="Mail"] > header button[aria-label="Toggle theme"] { padding: 8px !important; } [data-screen-label="Mail"] > header button[title$="Sign out"] { margin-left: 2px !important; } [data-screen-label="Mail"] > header input[aria-label="Search mail"] { padding-right: 40px !important; } } /* Short viewports (phone landscape, keyboard up): the compose sheet scrolls instead of losing its Send row. */ @media (max-height: 460px) { [data-screen-label="Compose"] { overflow-y: auto !important; } [data-screen-label="Compose"] .mm-rich { min-height: 56px !important; } } /* Custom check boxes (sign-in, search options, filters) draw their tick only when checked; unchecked ones paint a transparent box. */ span[style*="border-radius: 6px"][style*="background: transparent"] > svg { visibility: hidden; } /* Segmented controls, tabs and the palette swatches: a visible focus ring for keyboard users. */ [role="radiogroup"] input:focus-visible + *, [role="radio"]:focus-visible, [role="tab"]:focus-visible, [data-mm-palette]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* the Emirati swatch in Settings > Themes carries its own identity: the red hoist bar and the three bands, in miniature */ [data-mm-palette="emirati"][data-mm-swatch="card"]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, oklch(0.58 0.23 28 / 0.92), oklch(0.58 0.23 28 / 0.6)) 0 0 / 6px 100% no-repeat, linear-gradient(90deg, oklch(0.5 0.15 152 / 0.3), transparent 58%) 6px 0 / 100% 10px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 58%) 6px 10px / 100% 10px no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 58%) 6px 20px / 100% 10px no-repeat; } html:not([data-theme="dark"]) [data-mm-palette="emirati"][data-mm-swatch="card"]::before { background: linear-gradient(90deg, oklch(0.56 0.23 28 / 0.95), oklch(0.56 0.23 28 / 0.65)) 0 0 / 6px 100% no-repeat, linear-gradient(90deg, oklch(0.5 0.15 152 / 0.26), transparent 58%) 6px 0 / 100% 10px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent 58%) 6px 10px / 100% 10px no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 58%) 6px 20px / 100% 10px no-repeat; } /* Native UI follows the theme. */ html[data-theme="dark"] { color-scheme: dark; } html:not([data-theme="dark"]) { color-scheme: light; } /* Android edge-to-edge: the bottom bar, the Compose button and the upload tray clear the gesture navigation bar. */ @media (max-width: 759px) { nav[aria-label="Mobile navigation"] { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } [data-screen-label="Mail"] button[aria-label="Compose"][style*="fixed"] { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; } #mmup:not(.sheet) { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } /* not the pill under the compose sheet: that sits above the sheet's send bar, which clears the bar itself */ } /* Tablets: the settings tab strip scrolls instead of wrapping an orphan onto a second row. */ @media (max-width: 1024px) { [data-screen-label="Settings"] [role="tablist"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } [data-screen-label="Settings"] [role="tablist"]::-webkit-scrollbar { display: none; } [data-screen-label="Settings"] [role="tab"] { flex: 0 0 auto; white-space: nowrap; } } /* Importance marker: a 24px round hit area on every pointer, centred on the same 14px glyph. */ button[aria-label="Toggle importance"] { padding: 5px !important; margin: -5px !important; box-sizing: content-box !important; border-radius: 999px; } button[aria-label="Toggle importance"]:hover { background: var(--glass-hover); opacity: 1 !important; } /* Compose popovers (schedule, emoji, link, more, signature) are opaque enough to read over body text. */ :root { --glass-menu: rgba(255, 255, 255, 0.96); } html[data-theme="dark"] { --glass-menu: oklch(0.2 calc(0.014 * var(--chroma-ground)) var(--hue-ground) / 0.96); } [data-screen-label="Compose"] .card[style*="position: absolute"] { background: var(--glass-menu) !important; } /* Touch: text buttons in a message header (sender name, 'to me' toggle) reach 24px without growing the header; the menus inside the message (More, Translate to, the contact card) are not headers: their rows get a 40px touch height instead. */ @media (hover: none) { section[aria-label="Reading pane"] article button:not(.btn-icon):not(.card button) { min-height: 24px; padding-top: 3px !important; padding-bottom: 3px !important; } section[aria-label="Reading pane"] article .mm-actions button.btn:not(.btn-icon) { min-height: 0; padding-top: 9px !important; padding-bottom: 9px !important; position: relative; } /* the action row inside the last card keeps its 36.8 px pills (a higher specificity than the header rule above, and than the head sheet's 36 / 40 px header text buttons, which must keep winning that one); a pseudo-element below lifts each pill's pointer target to 40 px */ section[aria-label="Reading pane"] article .mm-actions button.btn:not(.btn-icon)::before { content: ''; position: absolute; inset: -2px 0; } section[aria-label="Reading pane"] article .mm-actions .mm-react { position: relative; } section[aria-label="Reading pane"] article .mm-actions .mm-react::before { content: ''; position: absolute; inset: -1px; } /* the 38 px React disc: a 40 x 40 pointer target */ section[aria-label="Reading pane"] article div.mm-smart > button:not(.btn-icon) { min-height: 0; padding-top: 7px !important; padding-bottom: 7px !important; } section[aria-label="Reading pane"] article .card:not([role="dialog"]) button:not(.btn-icon) { min-height: 40px; } } /* Phones: the header's Assistant / Drive launchers live in the Apps grid (the assistant also opens from the message's Summarize chip); in the header they would push the layout past the viewport, and even the sparkle alone squeezes the search box below its text room. */ @media (max-width: 759px) { [data-screen-label="Mail"] > header #mm-header-tools { display: none !important; } } /* Touch: Cc / Bcc and other text buttons in the compose sheet reach 28px. */ @media (hover: none) { [data-screen-label="Compose"] button:not(.btn-icon):not([aria-label^="Remove "]) { min-height: 28px; } } /* Phones: while the search box is focused, the header gives it the row (brand and tools step aside). */ @media (max-width: 759px) { [data-screen-label="Mail"] > header[data-searching="true"] > div[style*="flex: none"], [data-screen-label="Mail"] > header[data-searching="true"] > div:last-child, [data-screen-label="Mail"] > header[data-searching="true"] > button[aria-label="Main menu"] { display: none !important; } } /* ---- Phones: the compose sheet (v0.20.2 mobile sweep). The sheet is a scrollable column whose send bar is pinned at the bottom, the editor fills the free space (editorMax is 'none' on phones), the attachment strip grows instead of scrolling inside 108px, the formatting bar folds what does not fit into its More menu (the fold math counts 40 px buttons on phones), the inline image toolbar wraps across the sheet, and every control reaches the 40 px tap size without changing the row heights. ---- */ @media (max-width: 759px) { [data-screen-label="Compose"] { overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scroll-padding-bottom: 116px; } [data-screen-label="Compose"] > div:last-child { position: sticky; bottom: 0; z-index: 4; background: var(--color-bg); margin: 0 -14px 0; padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important; } [data-screen-label="Compose"] > div:last-child .btn-primary, [data-screen-label="Compose"] > div:last-child .btn-secondary { height: 40px !important; } [data-screen-label="Compose"] .btn-icon { width: 40px !important; height: 40px !important; } [data-screen-label="Compose"] button[aria-label="Font"], [data-screen-label="Compose"] button[aria-label="Text size"] { height: 40px !important; min-width: 40px; } [data-screen-label="Compose"] button[aria-label="Remove formatting"] { padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } [data-screen-label="Compose"] > div:first-of-type { margin-bottom: 0 !important; } /* the To / Cc / Bcc rows: a short input so Cc, Bcc and the picker stay on the chip's line; 40 px targets that keep the row's height */ [data-screen-label="Compose"] input[aria-label="To"], [data-screen-label="Compose"] input[aria-label="Cc"], [data-screen-label="Compose"] input[aria-label="Bcc"] { min-width: 32px !important; } [data-screen-label="Compose"] input[aria-label="To"] ~ div:not(.card) { margin-left: auto; } [data-screen-label="Compose"] input[aria-label="To"] ~ div:not(.card) > button { min-height: 40px !important; min-width: 40px; box-sizing: border-box; margin: -6px -4px; padding: 2px 12px !important; } [data-screen-label="Compose"] button[aria-label="Select contacts"] { width: 40px !important; height: 40px !important; margin: -7px -2px; } [data-screen-label="Compose"] button[data-mm-recipients-collapsed] { min-height: 40px !important; } /* the folded recipients line is a tap target too (the 28 px compose-button rule would win otherwise) */ /* the From box holds the sender chip (index.html), a recipient chip like the To chips: 36 px here (its label line is 28 px on touch screens) in a row of the To row's height, so it takes no 40 px rule of its own */ [data-screen-label="Compose"] button[aria-label="Remove recipient"] { padding: 11px !important; margin: -11px !important; box-sizing: content-box !important; } /* attachments: the strip wraps and grows; the chip's controls are 40 px hit boxes around 32 px glyph boxes */ [data-screen-label="Compose"] div[style*="max-height: 108px"] { max-height: none !important; overflow: visible !important; } [data-screen-label="Compose"] button[aria-label="Rename or add a caption"], [data-screen-label="Compose"] button[aria-label="Show in message"], [data-screen-label="Compose"] button[aria-label="Make attachment"], [data-screen-label="Compose"] button[aria-label="Remove attachment"] { flex: none !important; width: 32px !important; height: 32px !important; padding: 4px !important; margin: -4px !important; box-sizing: content-box !important; } [data-screen-label="Compose"] button[title^="Preview "] { min-height: 40px !important; margin: -6px 0; justify-content: center; } /* the confidential-mode banner's Turn off button is a 40 px target inside the 12 px banner (the margin keeps the banner's height) */ [data-screen-label="Compose"] div[style*="accent-2-100"] > button.btn-ghost { flex: none; min-height: 40px !important; padding: 8px 12px !important; margin: -6px -4px -6px 0; } [data-screen-label="Compose"] [role="group"][aria-label="Attachment details"] { scroll-margin-bottom: 8px; } [data-screen-label="Compose"] [role="group"][aria-label="Attachment details"] .input { min-height: 40px !important; } [data-screen-label="Compose"] [role="group"][aria-label="Attachment details"] .btn { height: 40px !important; } /* the formatting bar keeps its own layout (it folds its tail into a More menu and anchors its menus itself); its icon buttons are 40 px here, which the fold math knows */ [data-screen-label="Compose"] [role="toolbar"][aria-label="Formatting"] { flex: none; } [data-screen-label="Compose"] [role="toolbar"][aria-label="Formatting"] > button { flex: none; } /* a button that could shrink is measured shrunk as the bar's head, and the fold then keeps one tool too many */ /* the inline image toolbar fits the sheet width; the drag hint is a mouse affordance */ [data-screen-label="Compose"] [role="toolbar"][aria-label="Image options"] { white-space: normal !important; flex-wrap: wrap; left: 8px !important; right: 8px; max-width: none !important; } [data-screen-label="Compose"] [role="toolbar"][aria-label="Image options"] > button { min-height: 40px; } [data-screen-label="Compose"] [role="toolbar"][aria-label="Image options"] > span:last-child { display: none; } /* menus, the help bar, the picker */ [data-screen-label="Compose"] .card button[style*="text-align: left"] { min-height: 40px; } [data-screen-label="Compose"] .card[style*="repeat(4"] { grid-template-columns: repeat(4, 36px) !important; } [data-screen-label="Compose"] .card[style*="repeat(4"] > button { width: 36px !important; height: 36px !important; } [data-screen-label="Help me write"] .btn { height: 40px !important; } [data-screen-label="Select contacts"] { overflow: hidden; overscroll-behavior: contain; } [data-screen-label="Select contacts"] select { min-height: 40px; } [data-screen-label="Select contacts"] .btn { height: 40px !important; } [data-screen-label="Select contacts"] input { height: 44px !important; } /* quoted HTML in a reply or forward stays inside the column */ [data-screen-label="Compose"] .mm-rich { overflow-wrap: anywhere; } [data-screen-label="Compose"] .mm-rich img { max-width: 100%; height: auto; } /* the minimised compose bar's title is a 40 px target */ div:has(> button[aria-label="Restore"]) > button:first-child { min-height: 40px; } } /* ---- Emirati: the flag flying from a glass hoist — a red bar down the left, green / white / black bands across the top fading right — painted by a ::before on the Mail root (position: relative; isolation: isolate, so z-index -1 sits above its ground and under the blobs and every pane) and on the loading overlay (#mm-splash, whose column is z-index 1). The sheet's all-palette glass sheen (the same ::before carrying a lone diagonal light sweep) is left out on purpose: colours only; Emirati keeps the sweep as the flag's last layer. ---- */ html[data-palette="emirati"] [data-screen-label="Mail"]::before, html[data-palette="emirati"] #mm-splash::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--deco-alpha); background: linear-gradient(90deg, oklch(0.58 0.23 28 / 0.92), oklch(0.58 0.23 28 / 0.6)) 0 0 / 10px 100% no-repeat, linear-gradient(90deg, oklch(0.5 0.15 152 / 0.3), transparent 58%) 10px 0 / 100% 64px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 58%) 10px 64px / 100% 64px no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 58%) 10px 128px / 100% 64px no-repeat, linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.035) 44%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.035) 56%, transparent 70%); box-shadow: inset 10px 0 30px -12px oklch(0.58 0.23 28 / 0.55); } html:not([data-theme="dark"])[data-palette="emirati"] [data-screen-label="Mail"]::before, html:not([data-theme="dark"])[data-palette="emirati"] #mm-splash::before { background: linear-gradient(90deg, oklch(0.56 0.23 28 / 0.95), oklch(0.56 0.23 28 / 0.65)) 0 0 / 10px 100% no-repeat, linear-gradient(90deg, oklch(0.5 0.15 152 / 0.26), transparent 58%) 10px 0 / 100% 64px no-repeat, linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent 58%) 10px 64px / 100% 64px no-repeat, linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 58%) 10px 128px / 100% 64px no-repeat, linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.22) 44%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.22) 56%, transparent 70%); } /* ==== redesign pack (six screens): tokens and recipes, additive. Everything the pack hard-coded for Pulse-dark is a formula on the palette parameters here, so the ten palettes and both themes follow; the state colours (red, gold, green, orange) are hue-fixed by design (the README's literals in dark; light counterparts that clear 4.5:1 on their own grounds, design6/contrast_check.py). Nothing above this line changes. ==== */ :root { /* grounds and fills */ --mm-ground-deep: oklch(0.945 calc(0.014 * var(--chroma-ground)) var(--hue-ground)); /* the reading pane / list / assistant scene base */ --mm-panel: oklch(0.985 calc(0.006 * var(--chroma-ground)) var(--hue-ground)); /* opaque fill under a gradient border */ --mm-inset: rgba(255, 255, 255, 0.55); /* a row sunk into a card, a time pill */ --mm-inset-body: rgba(255, 255, 255, 0.7); /* the open message's body inset */ --mm-glow-a: oklch(0.85 calc(0.09 * var(--sat)) var(--hue-accent) / 0.55); /* accent corner glow of a scene */ --mm-glow-b: oklch(0.87 calc(0.08 * var(--sat-2)) var(--hue-accent-2) / 0.5); /* accent-2 corner glow */ --mm-glow-list-a: var(--mm-glow-a); --mm-glow-list-b: var(--mm-glow-b); /* the inbox list's own pair (the dark block paints the pack's 1b values) */ --mm-toast-act: var(--color-accent-400); /* the toast's Undo: the accent that reads on the inverted toast */ --mm-ai-glow: oklch(0.87 calc(0.08 * var(--sat-2)) var(--hue-accent-2) / 0.55); /* the assistant scene's centre glow (accent-2) */ --mm-ai-glow-2: oklch(0.85 calc(0.09 * var(--sat)) var(--hue-accent) / 0.5); /* its corner glow (accent) */ --mm-ai-panel: var(--mm-panel); /* the composer's opaque fill */ --mm-glow-rail-a: oklch(0.85 calc(0.09 * var(--sat)) var(--hue-accent) / 0.5); /* the quick settings panel's corner glows (pack 2, 2h: the scene glows at 0.5 / 0.45) */ --mm-glow-rail-b: oklch(0.87 calc(0.08 * var(--sat-2)) var(--hue-accent-2) / 0.45); /* ink on the accent: the light theme deepens the accents to L 0.5 (the same reason .btn-primary is deepened above) */ --mm-accent-strong: oklch(0.5 calc(0.19 * var(--sat)) var(--hue-accent)); --mm-accent-2-strong: oklch(0.48 calc(0.15 * var(--sat-2)) var(--hue-accent-2)); --mm-on-accent: #fff; /* text / glyph on a flat accent or on the gradient where the pack used dark ink */ --mm-on-grad: #fff; /* glyph on the gradient where the pack used white (orb, send, header tiles, the assistant app tile) in both themes */ --mm-on-grad-tile: #fff; /* the Security header tile's glyph (1e) and the Assistant app tile's sparkles (the launcher's square, the rail's launcher; rd6x 1f): the pack's white on the gradient in both themes */ --mm-glow-b-panel: var(--mm-glow-b); /* the Security panel's corner glow (1e) and the Apps launcher's lower-left glow (1f): the pack's own stop, a shade under the scenes' --mm-glow-b */ --mm-gold-bg-tile: var(--mm-gold-bg); /* the gold icon tile (Linked accounts): the pack's tint is two points stronger than the External chip's */ --mm-white-ink: #fff; /* white in both themes: the 2h header tile's glyph on its gradient and the conversation-view switch's knob on the accent, as pack 2 draws them */ --mm-gradient: linear-gradient(135deg, var(--mm-accent-strong), var(--mm-accent-2-strong)); --mm-gradient-2: linear-gradient(135deg, var(--mm-accent-2-strong), var(--mm-accent-strong)); --mm-gradient-border: linear-gradient(120deg, var(--color-accent), var(--color-accent-2)); --mm-gradient-border-soft: linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 70%, transparent), color-mix(in srgb, var(--color-accent-2) 70%, transparent)); --mm-accent-ring: color-mix(in srgb, var(--color-accent) 45%, transparent); /* hovered / active borders */ --mm-accent-ring-40: color-mix(in srgb, var(--color-accent) 40%, transparent); /* the Inbox chip, the BETA tag */ --mm-accent-ring-60: color-mix(in srgb, var(--color-accent) 60%, transparent); /* the selected tile */ --mm-accent-ring-55: color-mix(in srgb, var(--color-accent) 55%, transparent); /* the selected swatch / reading-pane tile (pack 2) */ --mm-track: oklch(0.9 calc(0.012 * var(--chroma-ground)) var(--hue-ground) / 0.5); /* a segment track, an option list, an inset row on the quick settings panel (pack 2, 2h) */ --mm-glow-rail: 0 0 70px -28px var(--neon-glow); /* the quick settings panel's halo */ --mm-accent-tint: color-mix(in srgb, var(--color-accent) 16%, transparent); /* the selected row */ --mm-glow-soft: 0 0 28px -8px var(--neon-glow); --mm-glow-soft-2: 0 0 28px -8px var(--neon-glow-2); --mm-glow-panel: 0 0 80px -30px var(--neon-glow); /* a whole dialog's halo */ --mm-glow-panel-2: 0 0 80px -30px var(--neon-glow-2); --mm-gold-app-bg: var(--mm-gold-bg); --mm-danger-app-bg: var(--mm-danger-bg); /* the launcher's Drive and Labels squares (dark: the pack's 0.16 / 0.18 alphas) */ /* state colours, hue-fixed (README) */ --mm-danger: oklch(0.58 0.22 27); --mm-danger-fg: oklch(0.48 0.2 27); --mm-danger-bg: oklch(0.62 0.21 25 / 0.14); --mm-danger-bg-soft: oklch(0.62 0.21 25 / 0.1); --mm-gold: oklch(0.76 0.17 70); --mm-gold-fg: oklch(0.5 0.14 70); --mm-gold-bg: oklch(0.82 0.16 80 / 0.22); --mm-gold-border: oklch(0.76 0.17 70 / 0.55); --mm-gold-hot: oklch(0.72 0.17 78); --mm-ok: oklch(0.62 0.17 150); --mm-ok-fg: oklch(0.42 0.12 150); --mm-ok-bg: oklch(0.7 0.17 150 / 0.16); --mm-ok-border: oklch(0.62 0.17 150 / 0.45); --mm-warn: oklch(0.66 0.17 55); --mm-warn-fg: oklch(0.46 0.13 55); --mm-warn-bg: oklch(0.78 0.17 55 / 0.18); --mm-warn-border: oklch(0.66 0.17 55 / 0.45); --mm-badge-muted-fg: var(--color-neutral-700); /* rd6x 1b: the page ground behind the scenes (the pack's canvas is darker than its frames; light keeps the app's ground), the deeper panel fill the Advanced search chip carries, the unread date's ink (the accent in dark, accent-700 in light for 4.5:1) */ --mm-ground-page: var(--color-bg); --mm-chip-deep: var(--mm-panel); /* the Advanced search chip's fill (its own token: --mm-panel-deep is the 2d search panel's, a shade deeper in dark) */ --mm-date-unread: var(--color-accent-700); --mm-tab-on: oklch(0.47 calc(0.17 * var(--sat)) var(--hue-accent)); /* the selected / hovered category tab's ink: accent-700 deepened by L 0.03 so it clears 4.5:1 over the list scene's glow (azure measured 4.46 at L 0.5) */ /* rd9 2b, the side rail */ --mm-info-fg: oklch(0.45 0.12 220); --mm-info-bg: oklch(0.75 0.12 220 / 0.2); /* the README info blue (the Contacts square); the light pair clears 4.5:1 on the light rail ground */ --mm-accent-ring-55: color-mix(in srgb, var(--color-accent) 55%, transparent); /* the active rail tile's ring (between --mm-accent-ring 45 % and -60) */ --mm-badge-ink: oklch(0.15 0.03 var(--hue-ground)); /* the pack's count-badge ink on the flat accent, unscaled (the accent is L 0.62 light / 0.78 dark: >= 5:1 on both) */ --mm-gold-bg-tile: var(--mm-gold-bg); /* the Drive square's tint (the pack's 0.16 on dark; --mm-gold-bg is the pack-1 chip's 0.14) */ } html[data-theme="dark"] { /* the chroma factors are the pack's Pulse-dark literals divided by Pulse's --chroma-ground (1.4): ground 0.02, inset body 0.025, the ink 0.03 land exactly there; the other palettes scale with their own ground chroma */ --mm-ground-deep: oklch(0.13 calc(0.0143 * var(--chroma-ground)) var(--hue-ground)); --mm-ground-page: oklch(0.11 calc(0.015 * var(--chroma-ground)) var(--hue-ground)); --mm-chip-deep: oklch(0.15 calc(0.018 * var(--chroma-ground)) var(--hue-ground)); --mm-date-unread: var(--color-accent); --mm-panel: oklch(0.165 calc(0.02 * var(--chroma-ground)) var(--hue-ground)); --mm-inset: oklch(0.13 calc(0.0143 * var(--chroma-ground)) var(--hue-ground) / 0.6); --mm-track: oklch(0.12 calc(0.013 * var(--chroma-ground)) var(--hue-ground) / 0.7); /* the pack's oklch(0.12 0.018 290 / 0.7) at Pulse's chroma-ground 1.4 */ --mm-inset-body: oklch(0.17 calc(0.0179 * var(--chroma-ground)) var(--hue-ground) / 0.85); --mm-glow-a: oklch(0.32 calc(0.1 * var(--sat)) var(--hue-accent) / 0.55); --mm-glow-b: oklch(0.38 calc(0.1 * var(--sat-2)) var(--hue-accent-2) / 0.5); --mm-glow-list-a: oklch(0.32 calc(0.095 * var(--sat)) var(--hue-accent) / 0.5); /* the 1b frame: oklch(0.32 0.1 295 / 0.5) and oklch(0.4 0.1 200 / 0.45) in the pack (1a shares --mm-glow-a/-b at 0.55 / 0.5 and L 0.38); Pulse's --sat 1.05 and --sat-2 0.95 land on the pack's chroma 0.1 */ --mm-glow-list-b: oklch(0.4 calc(0.105 * var(--sat-2)) var(--hue-accent-2) / 0.45); --mm-glow-b-panel: oklch(0.36 calc(0.095 * var(--sat-2)) var(--hue-accent-2) / 0.45); /* the Security panel's corner glow (1e), the Apps launcher's lower-left glow (1f): the pack's oklch(0.36 0.09 200 / 0.45) at Pulse's --sat-2 0.95 */ --mm-toast-act: var(--color-accent-300); /* accent-400 (L 0.58) on the light toast (neutral-900, L 0.97) measures 4.2:1; one step deeper reads at 4.5:1 */ --mm-ai-glow: oklch(0.36 calc(0.0947 * var(--sat-2)) var(--hue-accent-2) / 0.55); /* the assistant frame's centre glow: the pack's oklch(0.36 0.09 200 / 0.55) at Pulse's sat-2 0.95 */ --mm-ai-glow-2: oklch(0.32 calc(0.0952 * var(--sat)) var(--hue-accent) / 0.5); /* its corner glow: oklch(0.32 0.1 295 / 0.5) at sat 1.05 */ --mm-ai-panel: oklch(0.16 calc(0.0179 * var(--chroma-ground)) var(--hue-ground)); /* the composer's fill: the pack's oklch(0.16 0.025 290) */ --mm-glow-rail-a: oklch(0.32 calc(0.1 * var(--sat)) var(--hue-accent) / 0.5); /* the pack's 2h card: oklch(0.32 0.1 295 / 0.5) and oklch(0.38 0.1 200 / 0.45) */ --mm-glow-rail-b: oklch(0.38 calc(0.1 * var(--sat-2)) var(--hue-accent-2) / 0.45); --mm-accent-strong: var(--color-accent); --mm-accent-2-strong: var(--color-accent-2); --mm-on-accent: oklch(0.15 calc(0.0214 * var(--chroma-ground)) var(--hue-ground)); /* the pack's oklch(0.15 0.03 290) is Pulse's (ground chroma 1.4): 0.03 / 1.4 per unit of chroma (rd9 2c; 2h's quick settings rail reads the same ink at 0.021, the earlier 0.03 factor gave 0.042, dE 3.1 from the pack) */ --mm-on-grad: #fff; /* the pack draws white on the gradient in dark too (the orb, Send, the header tiles, the Assistant app tile: rd6x 1c, D5); the dark ink on a flat accent stays --mm-on-accent (my avatar, the Account tile, the ribbon) */ --mm-danger: oklch(0.7 0.18 25); --mm-danger-fg: oklch(0.85 0.12 25); --mm-danger-bg: oklch(0.7 0.18 25 / 0.2); --mm-danger-bg-soft: oklch(0.7 0.18 25 / 0.15); --mm-gold: oklch(0.82 0.16 80); --mm-gold-fg: oklch(0.86 0.14 80); --mm-gold-bg: oklch(0.82 0.16 80 / 0.14); --mm-gold-bg-tile: oklch(0.82 0.16 80 / 0.16); --mm-gold-border: oklch(0.82 0.16 80 / 0.45); --mm-gold-hot: oklch(0.86 0.16 85); --mm-gold-app-bg: oklch(0.82 0.16 80 / 0.16); --mm-danger-app-bg: oklch(0.7 0.18 25 / 0.18); /* the launcher's Drive and Labels squares: the pack's own alphas (its README's gold / red sit behind --mm-gold-bg / --mm-danger-bg) */ --mm-ok: oklch(0.8 0.17 150); --mm-ok-fg: oklch(0.9 0.1 150); --mm-ok-bg: oklch(0.8 0.17 150 / 0.16); --mm-ok-border: oklch(0.8 0.17 150 / 0.45); --mm-warn: oklch(0.78 0.17 55); --mm-warn-fg: oklch(0.9 0.1 55); --mm-warn-bg: oklch(0.78 0.17 55 / 0.16); --mm-warn-border: oklch(0.78 0.17 55 / 0.45); --mm-badge-muted-fg: var(--color-neutral-700); /* the pack's ink; over the badge's composited ground (glass-active on the card on the panel) it measures 6.3:1 in Pulse dark and clears 4.5 in every dark palette (probe9_rd6x_1e) */ --mm-tab-on: var(--color-accent-700); --mm-info-fg: oklch(0.88 0.08 220); --mm-info-bg: oklch(0.75 0.12 220 / 0.2); --mm-gold-bg-tile: oklch(0.82 0.16 80 / 0.16); } /* motion: html[data-motion="off"] and prefers-reduced-motion above already stop this */ @keyframes mm-orb { 0%, 100% { box-shadow: 0 0 40px -6px var(--neon-glow), 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent); } 50% { box-shadow: 0 0 70px -4px var(--neon-glow), 0 0 0 14px transparent; } } /* ---- scenes: the pack's screen grounds (radial corner glows over a deep base), framed on desktop, never clipped (the split grip and the popovers stay) ---- */ .mm-scene { background: radial-gradient(60% 50% at 0% 0%, var(--mm-glow-a), transparent 60%), radial-gradient(55% 55% at 100% 100%, var(--mm-glow-b), transparent 60%), var(--mm-ground-deep); border-radius: 28px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); } [data-mm-mailgrid] { gap: 8px; } /* the list and the pane are two framed scenes with the pack's 8 px between them; the grip sits in the gap */ .mm-scene-panel, .mm-surface.mm-scene-panel { background: radial-gradient(60% 40% at 100% 0%, var(--mm-glow-a), transparent 60%), var(--color-bg); border-radius: 28px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), var(--mm-glow-panel); } /* Import */ .mm-scene-panel-2, .mm-surface.mm-scene-panel-2 { background: radial-gradient(60% 40% at 0% 0%, var(--mm-glow-b-panel), transparent 60%), var(--color-bg); border-radius: 28px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), var(--mm-glow-panel-2); } /* Security */ .mm-scene-panel-both, .card.mm-scene-panel-both { background: radial-gradient(60% 40% at 100% 0%, var(--mm-glow-a), transparent 60%), radial-gradient(50% 40% at 0% 100%, var(--mm-glow-b-panel), transparent 60%), var(--color-bg); border-radius: 28px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), var(--mm-glow-panel); } /* Apps */ /* ---- glass surfaces (README: blur(22px) saturate(1.3)) ---- */ .mm-glass { background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); } .mm-glass-strong { background: var(--glass-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); } .mm-card { padding: 12px 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; box-sizing: border-box; } /* a Security setting card */ .mm-card-row { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; } .mm-inset { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 12px; background: var(--mm-inset); border: 1px solid var(--glass-border); font-size: 12.5px; min-width: 0; } /* an app-password / passkey row */ .mm-inset > .mm-nm { font-weight: 600; overflow-wrap: anywhere; } /* the pack's spans: content-sized, wrapping (no ellipsis); an unbroken name breaks inside the row instead of pushing Revoke out of it */ .mm-inset > .mm-meta { color: var(--color-neutral-600); flex-shrink: 0; } /* the date keeps its line; the name yields */ @media (max-width: 760px) { .mm-inset > .mm-meta { flex-shrink: 1; } } /* the narrow row: a long name keeps most of the width and the date may fall to two words */ /* ---- text buttons: every pack text button is Figtree 700 (the base .btn is Caprasimo) ---- */ .btn.mm-txt { font-family: var(--font-body); font-weight: 700; } .btn.mm-glassy { font-family: var(--font-body); font-weight: 700; background: var(--glass); border-color: var(--glass-border); color: var(--color-text); } .btn.mm-glassy:hover { background: var(--glass-active); } .btn.mm-quiet:hover { background: var(--glass-hover); } .btn.mm-danger:hover, .mm-pill .btn-icon.mm-danger:hover { background: var(--mm-danger-bg); color: var(--mm-danger-fg); } .btn.mm-danger-text { color: var(--mm-danger-fg); font-size: 12px; padding: 3px 10px; } /* Revoke / Remove keep the base .btn face (the pack's Revoke is a bare .btn-ghost: Caprasimo 400) */ .btn.mm-danger-text:hover { background: var(--mm-danger-bg-soft); } /* ---- pills of grouped icon buttons (toolbars), the pager pill, the select-all pill ---- */ .mm-pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); flex: none; } .mm-pill > .btn-icon, .mm-pill > div > .btn-icon { width: 34px; height: 34px; color: var(--color-neutral-700); } .mm-pill-sm { padding: 3px; } .mm-pill-sm > .btn-icon, .mm-pill-sm > div > .btn-icon { width: 32px; height: 32px; } .mm-pill .btn-icon:hover { background: var(--color-accent-100); color: var(--color-accent-800); } .mm-pill .btn-icon.mm-quiet:hover { background: var(--glass-hover); color: var(--color-neutral-700); } .mm-bare { display: inline-flex; align-items: center; gap: 2px; flex: none; } /* the phone bar keeps its 40 px controls in a row, no pill */ .mm-pager { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); font-size: 12.5px; color: var(--color-neutral-600); flex: none; } .mm-pager > .mm-pos { font-variant-numeric: tabular-nums; margin-right: 6px; } .mm-pager > .mm-pos > strong { color: var(--color-text); font-weight: 700; } .mm-pager > .btn-icon { width: 28px; height: 28px; color: var(--color-neutral-700); } .mm-pager > .btn-icon:hover { background: var(--glass-hover); } .mm-selall { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 8px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--color-neutral-700); flex: none; } /* the select-all box + caret */ .mm-selall:hover { background: var(--glass-active); } /* ---- gradient border (Summarize, Advanced search, the composer) ---- */ .mm-gb { border: 1.5px solid transparent; background: linear-gradient(var(--mm-panel), var(--mm-panel)) padding-box, var(--mm-gradient-border) border-box; color: var(--color-text); } .mm-gb-soft { border: 1.5px solid transparent; background: linear-gradient(var(--mm-panel), var(--mm-panel)) padding-box, var(--mm-gradient-border-soft) border-box; color: var(--color-text); } .mm-summarize { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--mm-glow-soft); } .mm-summarize > .mm-spark { display: inline-flex; color: var(--color-accent); } .mm-summarize:hover { box-shadow: 0 0 36px -4px var(--neon-glow), 0 0 20px -6px var(--neon-glow-2); } .mm-adv { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 7px 14px 7px 11px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; } .mm-adv > .mm-spark { display: inline-flex; color: var(--color-accent); } .mm-adv:hover { box-shadow: 0 0 24px -8px var(--neon-glow); } .mm-tag-ai { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--color-accent-2-100); color: var(--color-accent-2-800); } /* ---- gradient fills, the orb, the send button, the online dot ---- */ .mm-grad { background: var(--mm-gradient); color: var(--mm-on-grad); } .mm-grad-2 { background: var(--mm-gradient-2); color: var(--mm-on-grad); } .mm-grad-ink { background: var(--mm-gradient); color: var(--mm-on-accent); } /* the pack's dark ink on the gradient: my avatar, the Account tile */ .mm-orb { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--mm-gradient); color: var(--mm-on-grad); animation: mm-orb 3.2s ease-in-out infinite; flex: none; } .mm-send { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 1px 6px; gap: normal; cursor: pointer; display: grid; place-items: center; background: var(--mm-gradient); color: var(--mm-on-grad); box-shadow: 0 0 22px -4px var(--neon-glow); transition: transform 0.15s ease; } .mm-send:hover:not(:disabled) { transform: scale(1.06); } .mm-send:disabled { opacity: 0.45; cursor: not-allowed; } .mm-online { position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--mm-ok); border: 2px solid var(--mm-panel); box-sizing: border-box; } /* ---- icon tiles ---- */ .mm-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--color-accent-100); color: var(--color-accent); } /* a Security card's tile */ .mm-tile-p { width: 34px; height: 34px; border-radius: 11px; } /* a provider tile's icon square */ .mm-tile-s { width: 32px; height: 32px; border-radius: 10px; } /* a suggestion card's icon square */ .mm-tile-hd { width: 42px; height: 42px; border-radius: 14px; } /* a dialog header's tile (gradient + glow) */ .mm-tile-lg { width: 46px; height: 46px; border-radius: 15px; font-weight: 800; font-size: 15px; } /* an app tile's square (the pack's 800; Figtree 800 is not loaded, so the 700 face draws it) */ .mm-tile-2 { background: var(--color-accent-2-100); color: var(--color-accent-2); } .mm-tile-2-deep { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .mm-tile-muted { background: var(--glass-active); color: var(--color-neutral-800); } .mm-tile-gold { background: var(--mm-gold-bg); color: var(--mm-gold-fg); } #mmsec .mm-tile-gold { background: var(--mm-gold-bg-tile); } .mm-tile-danger { background: var(--mm-danger-bg); color: var(--mm-danger-fg); } .mm-tile-accent { background: var(--mm-accent-strong); color: var(--mm-on-accent); box-shadow: 0 0 22px -4px var(--neon-glow); } /* the Mail tile */ .mm-tile-hd.mm-grad { box-shadow: 0 0 22px -6px var(--neon-glow); } .mm-tile-hd.mm-grad-2 { box-shadow: 0 0 22px -6px var(--neon-glow-2); } /* ---- rd9 2e: the status menu (redesign pack 2, screen 2e). The presence menu under the top bar's status pill is a 360 px opaque panel (the deep ground with the pack's accent-2 corner glow and halo, radius 26, padding 12) holding an account header (the gradient-ringed avatar with the online dot in the presence colour, the name, a sub line with a glowing 8 px dot, the mode badge AUTO / DND / AWAY) and two inset groups of 36 px-tile rows: Automatic (green dot), Do not disturb (ban, the "1h" chip), Set as away (clock), Add a status (pen, chevron); Vacation responder (calendar, the ON / OFF badge) and Notification settings (bell, external link). The checked row is the README active recipe, every hover the glass-active fill with the glass border. The pack's literals map to tokens: the inset oklch(0.12 0.018 290 / 0.7) is --mm-inset-deep (the 2d groups' token), the avatar's disc oklch(0.15 0.03 290) is --mm-avatar-core (the 2a avatar's), the corner glow oklch(0.36 0.09 200 / 0.45) is --mm-glow-menu; the light theme keeps the app's light inset. ---- */ :root { --mm-inset-deep: oklch(0.94 calc(0.012 * var(--chroma-ground)) var(--hue-ground) / 0.55); /* the field groups sunk into the panel (light: a shade under the near-white fill, so the two groups read) */ --mm-avatar-core: #fff; /* the disc under my initials inside the gradient ring (the pack's oklch(0.15 0.03 290): the ground's lightness at a touch more chroma than --color-bg) */ --mm-glow-menu: var(--mm-glow-b); /* the menu's accent-2 corner glow */ --mm-glow-panel-menu: 0 0 70px -28px var(--neon-glow-2); /* the menu's halo (the dialogs' --mm-glow-panel-2 is 80 px) */ --mm-gold-bg-tile: var(--mm-gold-bg); /* the Set as away tile's tint (the pack's 0.16 on dark; --mm-gold-bg is the pack-1 chip's 0.14) */ } html[data-theme="dark"] { --mm-inset-deep: oklch(0.12 calc(0.013 * var(--chroma-ground)) var(--hue-ground) / 0.7); --mm-avatar-core: oklch(0.15 calc(0.021 * var(--chroma-ground)) var(--hue-ground)); --mm-glow-menu: oklch(0.36 calc(0.09 * var(--sat-2)) var(--hue-accent-2) / 0.45); --mm-gold-bg-tile: oklch(0.82 0.16 80 / 0.16); } .mm-smenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(360px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 2px; border-radius: 26px; border: 1px solid var(--glass-border); background: radial-gradient(70% 40% at 0% 0%, var(--mm-glow-menu), transparent 60%), var(--color-bg); box-shadow: var(--shadow-lg), var(--mm-glow-panel-menu); color: var(--color-text); animation: mm-menu 0.16s ease-out; } /* the account header: the 42 px gradient ring (2 px) around the 38 px disc, the 13 px online dot at the corner in the presence colour, the name, the sub line, the mode badge */ .mm-shead { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; } .mm-savatar { position: relative; display: block; width: 42px; height: 42px; border-radius: 50%; padding: 2px; box-sizing: border-box; flex: none; background: var(--mm-gradient); box-shadow: 0 0 18px -4px var(--neon-glow); } .mm-savatar > .mm-savatar-core { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--mm-avatar-core); font-weight: 800; font-size: 13px; color: var(--color-text); } .mm-savatar > .mm-savatar-core > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .mm-savatar > .mm-sonline { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--mm-pdot, var(--mm-ok)); border: 2px solid var(--color-bg); box-sizing: border-box; } .mm-shead-text { flex: 1; min-width: 0; } .mm-shead-name { display: block; font-weight: 700; font-size: 14.5px; } .mm-shead-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-neutral-600); } .mm-shead-sub > .mm-sdot8 { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mm-pdot, var(--mm-ok)); box-shadow: 0 0 8px var(--mm-pdot, var(--mm-ok)); } .mm-sbadge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--color-accent-2-800); background: var(--color-accent-2-100); flex: none; } /* the two inset groups and their rows */ .mm-sgroup { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 20px; background: var(--mm-inset-deep); border: 1px solid var(--glass-border); } .mm-sgroup + .mm-sgroup { margin-top: 6px; } .mm-srow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 9px 10px 9px 8px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--color-text); font-family: var(--font-body); text-align: left; cursor: pointer; box-sizing: border-box; } .mm-srow[aria-checked="true"] { background: var(--color-accent-100); border-color: var(--mm-accent-ring); } .mm-srow:hover, .mm-srow-wrap:hover > .mm-srow { background: var(--glass-active); border-color: var(--glass-border); } .mm-srow-wrap { position: relative; } .mm-tile.mm-stile { width: 36px; height: 36px; border-radius: 12px; } .mm-tile-ok { background: var(--mm-ok-bg); color: var(--mm-ok); } .mm-tile.mm-stile.mm-tile-gold { background: var(--mm-gold-bg-tile); } .mm-stile > .mm-sdot { width: 12px; height: 12px; border-radius: 50%; background: var(--mm-ok); box-shadow: 0 0 12px var(--mm-ok); } /* the status menu's presence glyph only: the footer's live dot and the import dialog's status dot are .mm-status > .mm-sdot below, idle without a glow */ .mm-sname { display: block; font-size: 14px; font-weight: 700; } .mm-ssub { display: block; font-size: 12.5px; color: var(--color-neutral-600); margin-top: 1px; text-wrap: pretty; } .mm-scheck { display: inline-flex; color: var(--color-accent); } .mm-strail { display: inline-flex; color: var(--color-neutral-600); } .mm-schip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--color-neutral-600); background: var(--glass); border: 1px solid var(--glass-border); } .mm-sb { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; color: var(--color-neutral-700); background: var(--glass-active); } /* the "1h" control: a button cannot nest a button, so the real control (a menuitem, the row's Tab stop after Do not disturb) sits over the chip as an invisible twin of the same content and metrics; hovering it lights the row (as the pack's chip inside the row does) and the chip */ .mm-s1h { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: transparent; font-family: var(--font-body); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; } .mm-srow-wrap:has(> .mm-s1h:hover) .mm-schip { background: var(--glass-active); color: var(--color-text); } /* the pill that opens the menu shows the README active recipe while it is open (the top bar's own recipe restates the same values on .mm-hopen) */ [data-screen-label="Status pill"][aria-expanded="true"] { background: var(--color-accent-100) !important; border-color: var(--mm-accent-ring) !important; box-shadow: 0 0 24px -8px var(--neon-glow); color: var(--color-accent-800); } /* ---- status badges (OFF · NONE YET · 1 ACTIVE · CHANGED …), the BETA tag, the RECOMMENDED ribbon, kickers, headings ---- */ .mm-badge { display: inline; font-size: 10.5px; font-weight: 800; line-height: 1.55; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 999px; color: var(--mm-badge-muted-fg); background: var(--glass-active); font-family: var(--font-body); } /* the pack's badge: an inline span with its text written in capitals, declared 800 (the 700 face renders it; no heavier face is loaded) */ .mm-badge-ok { color: var(--color-accent-2-800); background: var(--color-accent-2-100); } .mm-badge-accent { color: var(--color-accent-800); background: var(--color-accent-100); } .mm-beta { display: inline-flex; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 999px; color: var(--color-accent-800); background: var(--color-accent-100); border: 1px solid var(--mm-accent-ring-40); } /* the markup writes BETA; Figtree 800 renders the 700 face, as in the pack */ .mm-ribbon { position: absolute; right: 12px; top: -9px; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; background: var(--mm-accent-2-strong); color: var(--mm-on-accent-2); text-transform: uppercase; } /* the pack's RECOMMENDED: weight 800 (the 700 cut renders it: no heavier one is served) in the accent-2-tinted ink */ .mm-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); font-family: var(--font-body); } .mm-kicker-brand { text-transform: none; } /* the product's name reads exactly as written (T-93: "UAE.com Email"), never in the kicker's capitals */ .mm-h2 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; color: var(--color-text); text-wrap: pretty; min-width: 0; overflow-wrap: anywhere; } .mm-h3 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; color: var(--color-text); } /* ---- chips: External (gold), the removable folder / label chip, the message-count pill, labels in a row, the marker, the neon dot, the tick ---- */ .mm-chip-gold { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--mm-gold-fg); background: var(--mm-gold-bg); border: 1px solid var(--mm-gold-border); position: relative; } .mm-label-x { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; position: relative; } .mm-label-x.mm-nox { padding: 4px 11px; } .mm-lx { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 1px 6px; box-sizing: border-box; flex: none; } /* the pack's bare