/* ========================================================================== Design layer — M6.10 ========================================================================== Supersedes glass.css. That sheet restyled Bootstrap's classes and edited no templates, which got the *surface* right — radii, frost, bevel — and left the product looking like a Bootstrap form in a rounded box. Surface treatment is not design. What was missing is the part that actually carries quality: * a component vocabulary (stat, panel, dtable, pill, empty, toolbar) instead of `
` written out thirty times, * a real application shell — sidebar + topbar — instead of seventeen emoji links wrapped in a navbar, * typography: Tajawal for Arabic. An Arabic UI set in Segoe UI reads as unconsidered no matter what the boxes look like, * icons from one set, not emoji, * empty states, loading skeletons, and data visualisation. Ported from the owner's Dorak frontend — soul, not copy. Its own recipe is in DESIGN-SYSTEM.md; this sheet adds the structural half that document did not cover because M6.7 only extracted tokens. Per-tenant colour still arrives as `--dk-*` custom properties inlined by base.html, so everything below tints itself from the shop's own brand. ========================================================================== */ /* --------------------------------------------------------------- typography */ /* Three faces, matching the owner's Dorak frontend (M6.19): Tajawal is the Arabic identity, Inter is the Latin body and the numerals, and Cause is the display face headings are set in — the missing third is most of why Dorak's headings read as designed and these read as bold body text. Self-hosted, because these shops are on Syrian mobile connections and a blocked or slow font CDN means a page rendered in a fallback serif. Split by `unicode-range` the way @fontsource ships them, so an Arabic page never downloads Tajawal's Latin half to set `MTN` and an English one never downloads the Arabic half at all: 19 files on disk, a fraction of that per page. Ranges are @fontsource's verbatim. Weights are the ones Dorak loads (src/fonts.ts): Tajawal 300/400/500/700, Inter 300/400/500/600/700, Cause 400/600/700. Anything else is faux-bolded by the browser — which is what was happening to the 800s Dorak references and never loads. */ @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/tajawal-arabic-300.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/tajawal-latin-300.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tajawal-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/tajawal-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/tajawal-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/tajawal-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/tajawal-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/tajawal-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-latin-300.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cause'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cause-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cause'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cause-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cause'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cause-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* --------------------------------------------------------------- tokens */ :root { /* Brand. base.html overrides every one of these per tenant; the values here are the platform default (presentation.DEFAULT_PRIMARY) so the sheet stands alone. The *-rgb triplets are what let the tints below follow the tenant's hue — CSS cannot decompose a hex. See presentation.palette(). */ --dk-primary: #9B2C5E; --dk-primary-dark: #691E40; --dk-primary-darker: #46142A; --dk-primary-rgb: 155, 44, 94; --dk-grad-rgb: 105, 30, 64; --dk-accent-rgb: 105, 30, 64; --dk-wash-1: #f9f0f4; --dk-wash-2: #f2eaee; --dk-on-primary: #ffffff; /* Glass alpha ladder: the more "on top" a surface is, the more opaque. */ --dk-glass: rgba(255, 255, 255, .58); --dk-glass-hover: rgba(255, 255, 255, .78); --dk-glass-inner: rgba(255, 255, 255, .50); --dk-glass-strong: rgba(255, 255, 255, .90); --dk-rim: rgba(255, 255, 255, .85); --dk-rim-top: rgba(255, 255, 255, .95); /* A selected segment, as three values rather than as a rule (M14.17). Every switch in the product is the same component -- the `.seg` toolbars and the CSS-only `.swap` strips alike: a raised light card in a recessed track. It used to be written out four times, twice per theme, and that is how it broke. See `.seg > .is-active`. */ --dk-seg-on-bg: var(--dk-surface); --dk-seg-on-fg: var(--dk-primary-darker); --dk-seg-on-shadow: 0 2px 8px rgba(15, 23, 42, .08), inset 0 1px 0 var(--dk-rim-top); --dk-blur: blur(24px) saturate(140%); --dk-blur-bar: blur(16px) saturate(1.6); /* ~x1.45 progression. 14px as the default medium is the single biggest contributor to the perceived softness — Bootstrap's default is 6px. */ --dk-r-xs: 7px; --dk-r-sm: 10px; --dk-r-md: 14px; --dk-r-lg: 22px; --dk-r-xl: 32px; --dk-r-pill: 999px; /* Shadows are cool-tinted slate, never neutral black. */ --dk-sh-glass: 0 8px 32px rgba(15, 23, 42, .09); --dk-sh-lg: 0 20px 60px rgba(15, 23, 42, .14); --dk-bevel: inset 0 1px 0 rgba(255, 255, 255, .90); /* THE signature */ --dk-bevel-dim: inset 0 1px 0 rgba(255, 255, 255, .22); /* The rest of the reference's shadow ladder (M12). Three of these were being *used* by this sheet and had never been declared — `--dk-sh-sm` on the palette swatch, `--dk-t-pop` and `--dk-ease-spring` on its transition. An undefined custom property makes the whole declaration invalid at computed-value time, so the swatch had no shadow and no animation at all, and nothing said so. */ --dk-sh-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04); --dk-sh-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05); --dk-sh-subtle: 0 2px 8px rgba(15, 23, 42, .04); /* The app-bar islands. Softer and shorter than a panel's: a pill floating 12px from the top of the page reads as lifted, not as a card. */ --dk-sh-bubble: 0 4px 16px rgba(15, 23, 42, .06); /* Brand-tinted glows. The reference's `--shadow-primary-*`; a filled button's shadow is its own hue at ~30% rather than a neutral drop, which is most of why a primary button there reads as lit instead of stuck on. */ --dk-sh-brand-sm: 0 6px 16px rgba(var(--dk-primary-rgb), .30); --dk-sh-brand-md: 0 8px 24px rgba(var(--dk-primary-rgb), .28); --dk-sh-brand-lg: 0 14px 32px rgba(var(--dk-primary-rgb), .35); --dk-glow: 0 0 0 4px rgba(var(--dk-primary-rgb), .12); --dk-glow-ring: 0 0 0 3px rgba(var(--dk-primary-rgb), .26); /* One focus ring for every button, in the shop's own hue (M14.31). It sits on the page ground rather than on the control, which is what lets a single value serve a pale ghost button and a filled brand one. */ --dk-focus-ring: 0 0 0 3px rgba(var(--dk-primary-rgb), .45); --dk-glow-bad: 0 0 0 4px rgba(239, 68, 68, .12); /* The hover sweep on a button, and the skeleton's travelling highlight. Light variants get the dark sweep, or a white streak over a white fill is invisible. */ --dk-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent); --dk-shimmer-dark: linear-gradient(90deg, transparent, rgba(15, 23, 42, .07), transparent); --dk-skel-base: rgba(15, 23, 42, .06); --dk-skel-hi: rgba(255, 255, 255, .70); /* Text ramp. Inverts as a ramp in dark mode, not value by value. */ --dk-text-1: #0F172A; --dk-text-2: #64748B; --dk-text-3: #6B7280; /* darkened from the reference's #94A3B8, which failed AA */ /* Field labels, and the same argument one step further (M14.16, owner direction). 4.76:1 is what `--dk-text-2` gets against pure white, and that was the number that made this look like a pass. The card is not white: sampled off a render, the glass under a label runs #FDF8FA at the top of the card to #FBF6F9 at the bottom, where #64748B measures 4.53:1 and 4.45:1 - straddling AA rather than clearing it, at 12px, on the shortest and most-read text in any form. #475569 is 7.21:1 / 7.09:1 on the same two pixels. Both figures come from sampling the login PNG, not from reading the token: a glass card's colour is whatever the ladder above it composited to, and the first version of this comment quoted 4.44 / 7.07 off the tokens instead. Measure the picture. */ --dk-label: #475569; /* Semantic triad: saturated text + ~12% tint + ~20% border, same hue each. That consistency is what makes pills and alerts feel like one family. */ --tone-ok: #15803D; --tone-ok-bg: rgba(34, 197, 94, .12); --tone-ok-bd: rgba(34, 197, 94, .22); --tone-warn: #92400E; --tone-warn-bg: rgba(245, 158, 11, .12); --tone-warn-bd: rgba(245, 158, 11, .22); --tone-bad: #991B1B; --tone-bad-bg: rgba(239, 68, 68, .10); --tone-bad-bd: rgba(239, 68, 68, .20); --tone-info: #1E40AF; --tone-info-bg: rgba(59, 130, 246, .10); --tone-info-bd: rgba(59, 130, 246, .18); --tone-mute: #6B7280; --tone-mute-bg: rgba(100, 116, 139, .10); --tone-mute-bd: rgba(100, 116, 139, .15); --tone-brand: var(--dk-primary-darker); --tone-brand-bg: rgba(var(--dk-primary-rgb), .12); --tone-brand-bd: rgba(var(--dk-primary-rgb), .20); /* The brand hue as a *secondary* foreground: the icon, or the language code, that sits beside a `--tone-brand` label one step below it. It needs a token because `--dk-primary` is the one brand value base.html does not vary by theme -- the shop's mulberry is #9B2C5E in both -- and on dark it is darker than the ground it is being painted on. Every site that spent it as a colour rather than as a tint measured, with `dev.py`, somewhere nobody could read it (M14.22). */ --tone-brand-soft: var(--dk-primary); /* The carriers' own colours (M14.32, owner: "syriatel in red and mtn yellow their traditional color but change the color bit to fit dark mode"). They were `brand` and `info` — the shop's pink and a generic blue — which made Syriatel indistinguishable from every other branded thing on the page and gave MTN a colour it has never used. An operator scanning a queue of two hundred rows reads the carrier by colour long before the word, so these are the two colours the SIM cards themselves are printed in. The pill keeps the wash-and-ink shape of every other tone rather than going solid. `--net-*-solid` is the real brand hex, and it is used where a shape is large enough to carry it — the stock bars. In the ink slot it could not be: MTN's #FFCB05 on a pale wash is about 1.6:1, which is not a colour, it is a rumour. So the ink darkens to the same hue's shadow in light mode and becomes the true yellow in dark, which is exactly what `--tone-warn` already does with amber and why the pattern is reused. */ --net-syr: #B3000C; --net-syr-bg: rgba(227, 6, 19, .10); --net-syr-bd: rgba(227, 6, 19, .28); --net-syr-solid: #E30613; --net-mtn: #6B5200; --net-mtn-bg: rgba(255, 203, 5, .20); --net-mtn-bd: rgba(255, 203, 5, .48); --net-mtn-solid: #FFCB05; /* The ink a figure is written in *inside* a segment of that colour: the one each carrier uses itself. White on Syriatel's red measures 5.35:1; MTN prints black on its yellow and that is about 13:1. */ --net-syr-on: #ffffff; --net-mtn-on: #14181F; --dk-line: rgba(15, 23, 42, .08); --dk-line-glass: rgba(255, 255, 255, .40); /* Controls, as distinct from panels. `--dk-rim` is the near-white edge that makes a glass panel read as raised against the brand-tinted page mesh, and it was being used for inputs and secondary buttons too. Those sit INSIDE panels, which are near-white — so the edge vanished and the fill with it: the treasury page's "0" button rendered as bare text next to three real buttons, and every amount field was an invisible white gap. A control needs a hairline and a fill that is darker than its container, not lighter. */ --dk-ctl-bd: rgba(15, 23, 42, .14); --dk-ctl-bg: rgba(15, 23, 42, .035); --dk-ctl-bg-hover: rgba(15, 23, 42, .07); /* The zebra stripe (M14.34). Deliberately weak: it is a reading aid for tracking one row across seven columns, not a second kind of row. Strong enough to survive the de-nested fill inside a panel, which is where these tables mostly live. */ --dk-zebra: rgba(15, 23, 42, .032); /* The rows card's fill *inside a panel* (M14.34). De-nesting gave it `--dk-glass-inner`, a white at 50% — which over a panel that is already near-white composited to (254,253,254) against a (253,251,252) ground. A difference of 5 across three channels: the card's 22px corners were being drawn correctly and could not be seen, which is exactly what "the left body top border radius is not there" was describing. There is no headroom to make it brighter in the light theme, so it reads by being a shade darker instead; the dark theme still lifts. */ --dk-row-inner: rgba(15, 23, 42, .022); --dk-surface: rgba(255, 255, 255, .88); --dk-surface-2: rgba(255, 255, 255, .50); --dk-surface-hover: rgba(255, 255, 255, .82); /* One easing for nearly everything. Enter is longer than exit. */ --dk-ease: cubic-bezier(.22, 1, .36, 1); /* The overshoot, for the two controls whose whole job is to *travel*: the switch thumb and the checkbox tick. Everything else uses `--dk-ease`. */ --dk-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dk-t-exit: .18s; --dk-t-pop: .22s; --dk-t-base: .25s; --dk-t-enter: .28s; /* The theme sweep's origin and reach. `viewer.js` overwrites all three on the root for the length of one theme change -- the centre of the switch that was pressed, and the distance from it to the furthest corner of the viewport. Declared here, and not left to a `var()` fallback in the keyframes, so the sheet says out loud what those keyframes are reading; the values below are what a sweep would look like if the script never set them (down the middle from the top edge). */ --sweep-x: 50%; --sweep-y: 0%; --sweep-r: 150vmax; /* The modal's own measurements (M14.46, owner: "why i do not see white spaces between element like we compress the modal to preserve sapce wahil we only have few element"). Three numbers, because the spacing inside a dialog was nobody's: `.dlg-body` set an inset, `.field-row` set a gap, and everything between two blocks was a hand-written `mt-3` at four call sites and nothing at the fifth. */ --dk-dlg-pad: 1.5rem; /* the modal's inset */ --dk-dlg-gap: 1.25rem; /* between the blocks inside one */ --dk-dlg-gap-x: .75rem; /* between two fields on the same line */ --dk-field-h: 46px; /* the reference's control height; Bootstrap's is 38px */ --dk-ctl-h: 38px; /* a toolbar / table-row control, one step down */ /* The small step, and a token rather than three 30px literals (M14.36): `.btn-sm`, the square `.btn-sm.btn-icon` a row of actions is built from, and the carrier-reply icon in the status cell of the same row are one unit, and the reply icon was 22px until somebody looked at it. */ --dk-ctl-sm-h: 30px; --dk-appbar-h: 48px; /* every island in the app bar is this tall */ --dk-orb-1: rgba(var(--dk-primary-rgb), .22); /* The accent, not the gradient end-stop: the orbs are the one place a shop's second brand colour can be itself, because nothing is ever read on top of it. */ --dk-orb-2: rgba(var(--dk-accent-rgb), .20); --shell-sidebar: 252px; --shell-topbar: 64px; /* Dorak's three, name for name (M6.19), so the two codebases read side by side. `--dk-` stays because base.html inlines the tenant's palette into the same namespace. Arabic first: Tajawal is the identity, and it now carries its own Latin subset, so `MTN` inside an Arabic line is Tajawal's Latin rather than a jump into Inter. Inter stays the face of the numerals — `.money` asks for it explicitly, with tabular figures — and of the whole page in LTR. */ --dk-font-arabic: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; /* Tajawal is in both Latin stacks, one word more than Dorak, for a case Dorak does not have: an English page here still shows Arabic *data* — a customer's name in a table cell, a shop's name in a page title — and neither Inter nor Cause has an Arabic glyph. Without this the names fall through to Segoe UI, which is the exact "an Arabic UI set in Segoe UI reads as unconsidered" problem this design layer exists to fix, surviving in the one place nobody looks: the English rendering. A fallback stack, not a `:lang(ar)` rule — see the note by the heading rule. */ --dk-font-body-en: 'Inter', 'Tajawal', system-ui, sans-serif; --dk-font-heading-en: 'Cause', 'Tajawal', system-ui, sans-serif; /* The fourth face is the system's. Two rules want it — an audit log's field key and the USSD dial templates — and it was being asked for by a name nothing declared, each with its own inline fallback list. One token, one stack. */ --dk-font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace; /* Bootstrap bridge — the radius alone carries much of the aesthetic. */ --bs-border-radius: var(--dk-r-md); --bs-border-radius-sm: var(--dk-r-sm); --bs-border-radius-lg: var(--dk-r-lg); --bs-focus-ring-width: 3px; --bs-focus-ring-color: rgba(var(--dk-primary-rgb), .40); --bs-body-font-family: var(--dk-font-arabic); --bs-body-color: var(--dk-text-1); } html[dir="ltr"] { --bs-body-font-family: var(--dk-font-body-en); } /* Dark: derived, not inverted. Naive inversion gives milky panels with glaring white rims. Only the ~20 values that genuinely differ. */ :root[data-bs-theme="dark"] { --dk-glass: rgba(255, 255, 255, .06); --dk-glass-hover: rgba(255, 255, 255, .10); --dk-glass-inner: rgba(255, 255, 255, .04); --dk-glass-strong: rgba(255, 255, 255, .12); --dk-rim: rgba(255, 255, 255, .10); /* .85 here would be a glare */ --dk-rim-top: rgba(255, 255, 255, .16); /* The raised segment, on dark. `--dk-surface` is a 5% overlay here, and the segment has to be roughly double that to read as raised at all; the bevel that carries it in light is invisible, so the shadow does the work instead. */ --dk-seg-on-bg: rgba(255, 255, 255, .13); --dk-seg-on-fg: var(--dk-text-1); --dk-seg-on-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); --dk-blur: blur(24px) saturate(120%); /* 140% oversaturates on dark */ --dk-sh-glass: 0 8px 32px rgba(0, 0, 0, .45); --dk-sh-lg: 0 20px 60px rgba(0, 0, 0, .55); --dk-bevel: inset 0 1px 0 rgba(255, 255, 255, .10); /* A slate-tinted drop is invisible on a dark ground; the whole ladder has to get both darker and stronger, which is the same correction the panel shadow needed. */ --dk-sh-sm: 0 1px 3px rgba(0, 0, 0, .40), 0 1px 2px rgba(0, 0, 0, .30); --dk-sh-md: 0 4px 8px -1px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .35); --dk-sh-subtle: 0 2px 8px rgba(0, 0, 0, .30); --dk-sh-bubble: 0 4px 16px rgba(0, 0, 0, .38); /* A white streak over a 6%-white fill does nothing; on dark the sweep is the light one, and the "dark sweep" for light-variant controls inverts too. */ --dk-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent); --dk-shimmer-dark: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); --dk-skel-base: rgba(255, 255, 255, .06); --dk-skel-hi: rgba(255, 255, 255, .16); --dk-text-1: #F1F5F9; --dk-text-2: #94A3B8; --dk-text-3: #7C8A9C; /* Lighter, not darker: on the dark card's own #202228-#1F2026, `--dk-text-2` already measures 6.20:1 / 6.33:1, so the move is the other way. #A3B0C2 is 7.23:1 / 7.38:1 there - past AAA without a label shouting on a dark ground. Sampled, as above. */ --dk-label: #A3B0C2; /* Tints must roughly double — 10% is invisible on dark; text moves to the 400 shade of the same hue rather than the 800. */ --tone-ok: #4ADE80; --tone-ok-bg: rgba(34, 197, 94, .18); --tone-ok-bd: rgba(34, 197, 94, .28); --tone-warn: #FBBF24; --tone-warn-bg: rgba(245, 158, 11, .18); --tone-warn-bd: rgba(245, 158, 11, .28); --tone-bad: #FCA5A5; --tone-bad-bg: rgba(239, 68, 68, .18); --tone-bad-bd: rgba(239, 68, 68, .28); --tone-info: #93C5FD; --tone-info-bg: rgba(59, 130, 246, .18); --tone-info-bd: rgba(59, 130, 246, .28); --tone-mute: #94A3B8; --tone-mute-bg: rgba(148, 163, 184, .16); --tone-mute-bd: rgba(148, 163, 184, .22); --tone-brand-bg: rgba(var(--dk-primary-rgb), .20); --tone-brand-bd: rgba(var(--dk-primary-rgb), .32); /* The carriers, lifted off the dark ground (M14.32). Syriatel's #E30613 is a dark red — on a near-black panel it reads as a stain rather than a colour, so the ink and the bar both move up to a lighter tint of the same hue. MTN's yellow needs no help in the dark; it is the light theme that could not use it. */ --net-syr: #FF8A80; --net-syr-bg: rgba(255, 65, 54, .20); --net-syr-bd: rgba(255, 65, 54, .38); --net-syr-solid: #FF4136; --net-mtn: #FFCB05; --net-mtn-bg: rgba(255, 203, 5, .16); --net-mtn-bd: rgba(255, 203, 5, .36); --net-mtn-solid: #FFCB05; --net-syr-on: #2B0A0C; --net-mtn-on: #14181F; /* `--dk-primary-darker` is the *light* brand shade here -- presentation.palette() pushes the readable shade the other way per theme -- so on dark the secondary foreground and the label's own colour meet at one value. That compression is the same one the tints above take; what carries the step between them instead is the label lifting to `--dk-text-1`, which is what every brand-tinted face in this sheet already does. */ --tone-brand-soft: var(--dk-primary-darker); --dk-line: rgba(255, 255, 255, .08); --dk-line-glass: rgba(255, 255, 255, .10); --dk-ctl-bd: rgba(255, 255, 255, .16); --dk-ctl-bg: rgba(255, 255, 255, .06); --dk-ctl-bg-hover: rgba(255, 255, 255, .11); --dk-zebra: rgba(255, 255, 255, .035); --dk-row-inner: rgba(255, 255, 255, .055); --dk-surface: rgba(255, 255, 255, .05); --dk-focus-ring: 0 0 0 3px rgba(var(--dk-primary-rgb), .60); --dk-surface-2: rgba(255, 255, 255, .03); --dk-surface-hover: rgba(255, 255, 255, .09); } /* --------------------------------------------------------------- base */ /* ------------------------------------------ the scrollbar belongs on the leading edge */ /* An RTL page's scrollbar goes on the **left**, and Chromium will not put the *viewport's* there no matter what `direction` says (M14.27). Measured rather than assumed, by painting the bar a colour nothing else uses and reading the pixels back: plain rtl, viewport scroller left=0 right=1120 <- the bug plain ltr, viewport scroller left=0 right=1120 rtl, body as scroller left=624 right=0 <- honours direction rtl, div as scroller left=480 right=0 So Blink honours `direction` for an *element* scroller and pins the viewport's to the right in both directions. The only fix is to stop scrolling the viewport, which is what these two rules do. **Gated on `pointer: fine`, deliberately.** Making body the scroll container costs things that only matter on a phone: the URL bar stops collapsing on scroll, and momentum scrolling goes through a different path on cheap Android WebViews — which is the hardware these shops run. A touch device has no visible scrollbar to put on either side, so it has nothing to gain here and keeps the native viewport scroll. Two dependents, both updated with this: `ui.js` reads the scroll offset from whichever element is actually scrolling (an element scroller's `scroll` event does not reach `window`), and `tools/dev.py` measures page height off the same, or every full-page screenshot crops to one viewport. */ @media (pointer: fine) { html { height: 100%; overflow: hidden; } body { height: 100%; overflow-y: auto; overflow-x: hidden; } } body { font-family: var(--bs-body-font-family); color: var(--dk-text-1); -webkit-font-smoothing: antialiased; min-height: 100vh; /* Mesh on body itself, with --bs-body-bg unset, or Bootstrap paints over the orbs. */ background: radial-gradient(circle at 15% 10%, rgba(var(--dk-primary-rgb), .18), transparent 30%), radial-gradient(circle at 85% 15%, rgba(var(--dk-accent-rgb), .16), transparent 28%), linear-gradient(135deg, var(--dk-wash-1), var(--dk-wash-2)); background-attachment: fixed; } /* Arabic needs a touch more line height than Latin at the same size. */ :lang(ar), [dir="rtl"] { line-height: 1.7; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--dk-text-1); } /* The display face, in LTR only and on h1-h3 only — where Dorak puts it. Arabic keeps Tajawal throughout: Cause has no Arabic glyphs at all. Dorak also carries a `:lang(ar) { font-family: var(--font-arabic) }` catch-all, and porting it cost the entire icon set for one render. Font Awesome sets its family on `.fa-solid` — the same specificity as `:lang(ar)` — and ui.css loads second, so on an Arabic page every `` inside Arabic content was handed Tajawal and drew tofu. On the English page the same markup was perfect, which is why a sweep of one language would have shipped it. Arabic-inside-English is handled by the fallback stacks in the tokens above instead: fallback resolves per glyph, applies to unmarked text, and cannot lose a specificity fight with a component's own font rule. */ html[dir="ltr"] :is(h1, h2, h3) { font-family: var(--dk-font-heading-en); letter-spacing: -.02em; } /* Controls inherit rather than reverting to the UA's own stack — the one line that stops a ``, which stays in the form and stays what submits — so a browser that never runs the bundle gets the native control, which is what it had. `.pop` and `data-pop`, so the unfurl, the furl, the outside click and Escape are the ones M14.43 unified rather than a fourth set. */ .selpop { display: block; } .selpop > summary.selpop-face { display: flex; align-items: center; } .selpop-face::-webkit-details-marker { display: none; } .selpop-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selpop[open] > summary.selpop-face { border-color: var(--tone-brand); } /* The real control: reachable by the form, never by the eye. */ .selpop-native { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; } .selpop-menu { flex-direction: column; align-items: stretch; inline-size: 100%; min-inline-size: 0; max-block-size: 15rem; overflow-y: auto; } .selpop-opt { border: 0; background: none; inline-size: 100%; text-align: start; font: inherit; } .advanced[open] > summary { color: var(--dk-primary-darker); font-weight: 600; } /* A file input, brought into the design system. `::file-selector-button` is the only part of this control a page may style; its *label* is the browser's and localised by the browser, which is right — the file picker it opens is the browser's too. */ /* Flush and full-height (M14.44, owner: "choose file still not fully aligned with box"). It was a bordered pill floating inside the field's own padding, so it met none of the field's edges. `line-height` centres the filename now that the padding is gone. */ .form-control[type="file"] { padding: 0; line-height: calc(var(--dk-field-h) - 2px); } /* And the label inside the button, centred on the same line (M14.48, owner: "choose file is not horizen centerd"). Measured against the field's own "No file chosen", the button's word sat several pixels lower. M14.44 centred it by *inheritance* — the button takes the field's `line-height` through `font: inherit`, and a line box as tall as the box centres its text. That works only if the button's box is the one this rule thinks it is, and two things it never set decided that: `box-sizing`, because a `*, *::before, *::after` reset does not match `::file-selector-button` and it is therefore `content-box`, so the declared height is the *content* and anything else adds to it; and `padding-block`, which Chrome's own button styling supplies and which nothing here was overriding. Both are stated now, and the line-height is written rather than inherited, so the centring does not depend on a shorthand's ordering in this rule. */ .form-control[type="file"]::file-selector-button { /* A definite height, and off the baseline. `100%` had no definite box to resolve against and the button then hung below the line: measured 58px in a 46px row. */ box-sizing: border-box; block-size: calc(var(--dk-field-h) - 2px); line-height: calc(var(--dk-field-h) - 2px); vertical-align: top; margin: 0; margin-inline: 0 .75rem; padding-block: 0; padding-inline: 1rem; border: 0; border-inline-end: 1px solid var(--dk-ctl-bd); background: var(--dk-ctl-bg-hover); color: var(--dk-text-1); font: inherit; font-weight: 600; cursor: pointer; transition: background var(--dk-t-base); } .form-control[type="file"]::file-selector-button:hover { background: var(--dk-surface-hover); } /* Physical corners, per direction. A logical radius resolves against the *button's* own direction and this one is a shadow child with English in it, so `border-start-start` rounded the far corner and left the near one square inside the field's curve. */ [dir="rtl"] .form-control[type="file"]::file-selector-button { border-radius: 0 calc(var(--dk-r-md) - 1px) calc(var(--dk-r-md) - 1px) 0; } [dir="ltr"] .form-control[type="file"]::file-selector-button { border-radius: calc(var(--dk-r-md) - 1px) 0 0 calc(var(--dk-r-md) - 1px); } /* The uploaded mark, at the size it is actually used at in the nav. */ .logo-preview { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--dk-r-md); background: var(--dk-glass-inner); border: 1px solid var(--dk-rim); overflow: hidden; flex: 0 0 auto; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } /* The mark, then everything else about the look, side by side (M14.44). */ .brand-row { display: flex; gap: 1rem; align-items: flex-start; } .brand-facts { flex: 1 1 auto; min-inline-size: 0; } .logo-preview--empty { color: var(--dk-text-3); } /* A pop body that stacks its rows instead of laying them out inline. */ .pop-body--stack { flex-direction: column; align-items: stretch; min-inline-size: 21rem; } /* One wallet: what it is, what is in it, and the two ways to move it (M14.58). A grid and not a flex row so the figures line up down the card whatever their label's length — the whole reason this reads better than the six-row table it replaces is that a column of numbers can be *compared*. */ .stock { display: flex; flex-direction: column; gap: .25rem; } .stock-row { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr auto; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--dk-r-md); background: var(--dk-row-inner); } .stock-label { font-size: .8125rem; font-weight: 700; color: var(--dk-text-2); } /* The figure is what the card is for, so it gets the size and the tabular digits that let one line up against the next. */ .stock-val { font-size: 1.0625rem; font-weight: 800; color: var(--dk-text-1); text-align: end; } .stock-acts { display: flex; gap: .375rem; } /* A card whose title already names the wallet (M14.59): the label column would repeat the heading two lines below it, so the figure takes the room and the size that go with being the only thing on the row. */ .stock-row--lead { grid-template-columns: 1fr auto; padding: .25rem .25rem .25rem .5rem; background: none; } .stock-row--lead .stock-val { font-size: 1.375rem; text-align: start; } @media (max-width: 34rem) { /* The label keeps its line and the figure keeps the next one, rather than three columns fighting over 360px. */ .stock-row { grid-template-columns: 1fr auto; } .stock-val { grid-column: 1; text-align: start; } .stock-acts { grid-row: 1 / span 2; grid-column: 2; align-self: center; } } /* A rule inside a panel: two related forms in one panel, separated but not boxed. */ .panel-rule { border: 0; border-top: 1px solid var(--dk-line); margin: 1rem 0; opacity: 1; } /* --------------------------------------------------------------- pill */ /* The reference's `.badge`: 3px/12px, a 5px gap, .75rem at 700. Wider and a step up in size from what was here — a status is a label, and at .6875rem in a 12px-padded pill it was reading as a footnote next to the row it describes. */ .pill { display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .75rem; border-radius: var(--dk-r-pill); border: 1px solid var(--tone-mute-bd); background: var(--tone-mute-bg); color: var(--tone-mute); font-size: .75rem; font-weight: 700; white-space: nowrap; line-height: 1.5; } .pill > i { font-size: .6875rem; } .pill--ok { background: var(--tone-ok-bg); color: var(--tone-ok); border-color: var(--tone-ok-bd); } .pill--warn { background: var(--tone-warn-bg); color: var(--tone-warn); border-color: var(--tone-warn-bd); } .pill--bad { background: var(--tone-bad-bg); color: var(--tone-bad); border-color: var(--tone-bad-bd); } .pill--info { background: var(--tone-info-bg); color: var(--tone-info); border-color: var(--tone-info-bd); } .pill--brand { background: var(--tone-brand-bg); color: var(--tone-brand); border-color: var(--tone-brand-bd); } .pill--syriatel { background: var(--net-syr-bg); color: var(--net-syr); border-color: var(--net-syr-bd); } .pill--mtn { background: var(--net-mtn-bg); color: var(--net-mtn); border-color: var(--net-mtn-bd); } /* A card that belongs to one carrier wears its border (M14.71, owner: "color the border whith carier color"). The rim only — the fill stays the shared glass, because two tinted grounds side by side read as two *states* of one thing rather than as two carriers, and the pill in the heading already says which is which in solid colour. */ .panel--syriatel { border-color: var(--net-syr-bd); } .panel--mtn { border-color: var(--net-mtn-bd); } :root[data-bs-theme="dark"] .pill--brand { color: var(--dk-text-1); } .pill-dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; } .pill .money-val { margin-inline-start: .25rem; font-weight: 700; } /* --------------------------------------------------------------- empty state */ /* The old pages rendered a bare sentence in a table cell. An empty state is a real state and deserves composing. */ .empty { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 2.75rem 1.5rem; text-align: center; } /* A faded glyph, not a tinted chip (M12). The reference's empty states are a large icon at 35% and a sentence — nothing that could be mistaken for a control. The chip that was here read as a button with its label missing, which on the SMS inbox was the entire page. */ .empty-ico { font-size: 2rem; line-height: 1; color: var(--dk-text-3); opacity: .35; } .empty-title { font-weight: 700; font-size: .9375rem; color: var(--dk-text-1); } .empty-hint { font-size: .8125rem; color: var(--dk-text-2); max-width: 32ch; } /* --------------------------------------------------------------- toolbar */ .toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .875rem; /* Was the positioning context for `.reveal-body`, which dropped out of the flex row. That is a dialog since M14.81 and needs nothing; kept because `.searchbar`'s auto margin and any absolutely-positioned control a toolbar grows next would want it, and a bare `position: relative` on a flex row costs nothing. */ position: relative; } /* How many rows the table below holds (M14.81) — the figure that used to sit in the app bar. A wrapper rather than a class on the pill itself, because what this names is a *place* in the toolbar and not a new kind of chip: `ui.pill` already draws it, and the one thing a bare `` in a flex row would get wrong is stretching to the row's height, which would make the chip taller than the buttons beside it. */ .toolbar-count { display: inline-flex; align-items: center; } /* A toolbar is a row of controls above a table, and its controls are one step down from a form's — the reference's `.tbar` pins everything in it to 38px so the row reads as a strip rather than as a form that happens to be horizontal. */ .toolbar .form-control, .toolbar .form-select, .searchbar .form-control { min-height: var(--dk-ctl-h); padding-block: .25rem; font-size: .8125rem; } .toolbar-grow { flex: 1 1 12rem; min-width: 0; } .toolbar-end { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; } .search { position: relative; display: flex; align-items: center; } .search > i { position: absolute; inset-inline-start: .875rem; color: var(--dk-text-3); font-size: .8125rem; pointer-events: none; transition: color var(--dk-t-base); z-index: 1; } /* The magnifier takes the brand colour while the field is focused — the reference's `.inp-wrap:focus-within .inp-icon`, and the one detail that makes an icon inside a field read as part of the control rather than as decoration painted on top of it. */ .search:focus-within > i { color: var(--tone-brand-soft); } .search > .form-control { padding-inline-start: 2.375rem; } /* Field + submit as one group, pushed to the far end of a toolbar and capped in width. Without the cap the field stretched to fill the row and the button ended up the width of the page from it. */ .searchbar { display: flex; gap: .5rem; align-items: center; flex: 0 1 32rem; min-width: 0; margin-inline-start: auto; } .searchbar .search { flex: 1 1 auto; } /* --------------------------------------------------------------- segmented */ /* Replaces .nav-tabs for period/network switches: one control, not a row of browser tabs. Retuned to the reference's `.seg` (M12) — and the change is not cosmetic. It was a pill track with a **brand-filled** thumb, which made every tab strip on the page compete with the page's actual primary button for the same "this is the thing to press" reading. The reference inverts it: the track is a recessed dark tint and the selected segment is a *raised light card* — 14px track, 10px segments, a lifted white face with a bevel. Selection reads as position rather than as emphasis. */ .seg { display: inline-flex; gap: .1875rem; padding: .25rem; border-radius: var(--dk-r-md); /* The reference's track is a 6% dark tint — a groove the selected segment sits raised inside. At 3.5% the track disappeared and the control read as one floating white pill with three words next to it. */ background: var(--dk-ctl-bg-hover); border: 1px solid var(--dk-line-glass); } .seg > a, .seg > button { display: inline-flex; align-items: center; gap: .375rem; min-block-size: var(--dk-ctl-h); padding: .5rem .875rem; border: 0; background: transparent; border-radius: var(--dk-r-sm); font-size: .8125rem; font-weight: 700; color: var(--dk-text-2); transition: background var(--dk-t-pop) var(--dk-ease), color var(--dk-t-pop) var(--dk-ease), box-shadow var(--dk-t-pop) var(--dk-ease); white-space: nowrap; } .seg > a:hover, .seg > button:hover { color: var(--dk-primary-darker); background: var(--dk-surface-hover); } /* The selected segment, once -- both components, both themes (M14.17). Six positions written out by hand, because no selector can say "the label at the same index as the checked radio": `:has()` could come close but it is Chrome 105+, and this page is an installed PWA on phones older than that. What is *not* written out by hand any more is a second copy of the six per theme, which is where this went wrong. The light copy stopped at position 4, and positions 5 and 6 had been appended to the dark rule's selector list without its `:root[data-bs-theme="dark"]` prefix. Measured on the portal's two five-tab strips with `dev.py`: - light, tab 5 selected: `rgba(0, 0, 0, 0)` / `rgb(100, 116, 139)` / no shadow -- byte for byte an *unselected* tab. Nothing on screen said which pane was open, in the default theme, on the surface a shop's own customers use. - light, tab 6: the dark treatment, a 13% white wash under a 35%-black shadow, on a light ground. - dark, tab 4: the light treatment, so 5% instead of 13% -- precisely the failure the dark token's own comment describes. The tokens are the fix for the class rather than for the instance: a theme cannot own a partial copy of the position list when it does not own a copy at all. */ .seg > .is-active, .seg > .is-active:hover, .swap > .swap-radio:nth-of-type(1):checked ~ .swap-tabs > label:nth-child(1), .swap > .swap-radio:nth-of-type(2):checked ~ .swap-tabs > label:nth-child(2), .swap > .swap-radio:nth-of-type(3):checked ~ .swap-tabs > label:nth-child(3), .swap > .swap-radio:nth-of-type(4):checked ~ .swap-tabs > label:nth-child(4), .swap > .swap-radio:nth-of-type(5):checked ~ .swap-tabs > label:nth-child(5), .swap > .swap-radio:nth-of-type(6):checked ~ .swap-tabs > label:nth-child(6) { background: var(--dk-seg-on-bg); color: var(--dk-seg-on-fg); box-shadow: var(--dk-seg-on-shadow); } /* Pane switch, no JavaScript (M6.12). Hidden radios + `:checked ~`. The position rules are written out once per position rather than derived, because no CSS selector can say "the pane at the same index as the checked radio" - `:has()` could come close but it is Chrome 105+, and this page is an installed PWA on phones older than that. **Six**, since M14.2: the portal's records switch grew an account pane and its send switch split bills from games. A seventh pane needs a seventh entry in each of the **three** lists - panes, selected tabs, focused tabs - and will silently render as a dead tab without one. It was four until M14.17, where the fourth turned out to be a per-theme copy of the selected list that had drifted two positions short; the selected look is three tokens now, so the only list that can go short is one a viewer's theme has nothing to do with. `test_m14_portal.py` holds each list against the templates separately, which is the part it was not doing: it took the highest position mentioned anywhere in the sheet, so one complete list covered for two incomplete ones. `clip` rather than `display:none` on the radio: a hidden-by-display input is removed from the tab order, which would take the arrow-key navigation the whole pattern is chosen for. */ .swap-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .swap-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; } /* Breathing room between the switch and whatever it revealed. */ .swap-body { margin-top: 1rem; } /* A pane holding a table gives most of the body padding back, keeping the same .625rem inset a flush body leaves — the table is a floating bar over a rounded card now, and taking it all the way to the panel's edge crops both. */ .swap-pane > .dtable-wrap { margin: 0 -.625rem -.625rem; } .swap-tabs > label { min-block-size: var(--dk-ctl-h); padding: .5rem .875rem; border-radius: var(--dk-r-sm); font-size: .8125rem; font-weight: 700; color: var(--dk-text-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .375rem; transition: background var(--dk-t-pop) var(--dk-ease), color var(--dk-t-pop) var(--dk-ease), box-shadow var(--dk-t-pop) var(--dk-ease); } .swap-tabs > label:hover { color: var(--dk-primary-darker); background: var(--dk-surface-hover); } /* On a phone the strip is three or four Arabic phrases in one control, and it scrolls sideways with nothing to say so — the same unhinted overflow M6.17 measured on the tables. Tightening the segments is what makes it fit instead. */ @media (max-width: 34rem) { .seg { padding: .1875rem; } .seg > a, .seg > button, .swap-tabs > label { padding-inline: .5rem; font-size: .75rem; gap: .25rem; } } .swap-body > .swap-pane { display: none; } .swap-body > .swap-pane { animation: pane-in var(--dk-t-pop) var(--dk-ease); } @keyframes pane-in { from { opacity: 0; transform: translateY(4px); } } .swap > .swap-radio:nth-of-type(1):checked ~ .swap-body > .swap-pane:nth-child(1), .swap > .swap-radio:nth-of-type(2):checked ~ .swap-body > .swap-pane:nth-child(2), .swap > .swap-radio:nth-of-type(3):checked ~ .swap-body > .swap-pane:nth-child(3), .swap > .swap-radio:nth-of-type(4):checked ~ .swap-body > .swap-pane:nth-child(4), .swap > .swap-radio:nth-of-type(5):checked ~ .swap-body > .swap-pane:nth-child(5), .swap > .swap-radio:nth-of-type(6):checked ~ .swap-body > .swap-pane:nth-child(6) { display: block; } /* The focus ring has to be drawn on the label, since the input it belongs to is clipped out of sight. Without these four rules the pattern is unusable by keyboard — which is the defect DESIGN-SYSTEM.md flags in the reference. */ .swap > .swap-radio:nth-of-type(1):focus-visible ~ .swap-tabs > label:nth-child(1), .swap > .swap-radio:nth-of-type(2):focus-visible ~ .swap-tabs > label:nth-child(2), .swap > .swap-radio:nth-of-type(3):focus-visible ~ .swap-tabs > label:nth-child(3), .swap > .swap-radio:nth-of-type(4):focus-visible ~ .swap-tabs > label:nth-child(4), .swap > .swap-radio:nth-of-type(5):focus-visible ~ .swap-tabs > label:nth-child(5), .swap > .swap-radio:nth-of-type(6):focus-visible ~ .swap-tabs > label:nth-child(6) { outline: 3px solid rgba(var(--dk-primary-rgb), .45); outline-offset: 2px; } .no-fx .swap-body > .swap-pane { animation: none; } /* --------------------------------------------------------------- form field */ .field { display: flex; flex-direction: column; gap: .375rem; } .field-label { font-size: .8125rem; font-weight: 700; letter-spacing: .01em; color: var(--dk-label); } /* Arabic joins, and tracking of any size works against that. The same reason `.shell-group` zeroes it in RTL 1200 lines up; kept for Latin, where it is what the reference does. Both label classes, because they are the same component twice. */ [dir="rtl"] .field-label, [dir="rtl"] .form-label { letter-spacing: 0; } .field-hint { font-size: .6875rem; color: var(--dk-text-3); } /* **Tops, not bottoms** (M14.42, owner: "not aligned verticaly, look like the page has issue"). `flex-end` aligned the row on its *bottom* edge, so a field carrying a `.field-hint` sat its label and its input a hint's height above the field beside it — two controls on one line at two different heights, on every form with a hint in a row. The shop-creation wizard is where it finally showed, because its first row pairs a hinted field with an unhinted one. Tops line up instead: labels are one line, so the controls under them land level and a hint hangs below where it belongs. `flex-start` is also the safe direction — what it can misalign is a label wrapping to two lines, and what `flex-end` misaligned was a hint, which is far commoner. */ .field-row { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; } /* A button standing in a row of fields is one of them, so it takes the field height rather than the toolbar height — otherwise a form's submit sits 8px short of the input beside it and the row reads as two rows that happen to overlap. And it keeps the bottom edge it always had: a button has no label above it, so aligning its *top* with a labelled field's top would float it a label's height above the input it stands beside. Fourteen of the thirty-nine field rows in the product carry one, which is why the flip above had to arrive with this. **The bottom edge is the control's bottom only while nothing hangs below the control** (M14.81, owner on the password panel: "this need a few alignment for button"). A `.field-hint` does: `flex-end` pins the button to the *tallest item's* bottom, so a row holding one hinted field dropped its submit by the hint's height — measured on that panel, inputs 1326→1364, hint 1370→1388, button 25px low, and the same 25px on the employee's own password form. Offsetting the button was tried and reverted: it is right on a shared line and wrong the moment the row wraps, where the button is alone on its line and a phantom label's worth of margin is just a gap. The cause is that a submit was standing in a row of fields at all — every other commit in the product sits on a line of its own, which is what `.dlg-foot`, `.wiz-nav` and now `.form-foot` are. Three password forms did it, all three moved, and `test_m1481` holds the invariant: no `.field-row` carries both a hint and a button. */ .field-row > .btn, .field-row > form > .btn { min-block-size: var(--dk-field-h); align-self: flex-end; } /* A page form's commit line — `.dlg-foot` for a form that is not in a dialog. The button is at the start, where a panel's own controls are, rather than pushed to the end: a panel is not a modal and has no cancel to be kept away from. */ .form-commit { display: flex; align-items: center; gap: .5rem; margin-block-start: 1rem; } /* A colour input is 3rem of swatch under a label that is a phrase — five of them in a row let the labels collide into one line of run-on text and squeezed the last swatch to a sliver. The field is sized by its label, not by its control. */ /* A run of short fields that will not fit one line. A grid, not a wrapping flex row, so the inputs of a row sit level whatever their labels above them did (M14.44). */ .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .75rem .5rem; } .field-grid > .field { justify-content: flex-end; } /* The mark stands beside the control that replaces it, on the same bottom edge. */ .field-row > .logo-preview { align-self: flex-end; } .field--color { min-inline-size: 8.5rem; } .field--color .field-label { white-space: normal; line-height: 1.35; } .field--color .form-control { padding: .25rem; block-size: 2.75rem; cursor: pointer; } /* --------------------------------------------------------------- money */ /* `direction: ltr` + `unicode-bidi: isolate` is not cosmetic. A negative figure is `-2,375,000`, and inside RTL text the bidi algorithm moves the leading sign to the other end: the reconciliation panel was reporting a shortfall as `2,375,000-`. Isolating the figure keeps the sign where it belongs and stops a number adjacent to Arabic from being reordered against it. It goes on the FIGURE, not on `.money` as a whole: isolating the wrapper would take the currency suffix with it and put `ل.س` on the right of the digits, which is the wrong side in Arabic. `.num` (phone numbers, ids, usernames) has no trailing unit and is isolated outright. */ .money-val, .num { direction: ltr; unicode-bidi: isolate; } .money { font-family: var(--dk-font-body-en); font-variant-numeric: tabular-nums; font-weight: 600; } /* The unit must never compete with the figure. At .75em of a 2rem stat value the currency rendered at 1.5rem and read as part of the number — "0ل.س". */ .money-cur { font-size: .68em; font-weight: 500; color: var(--dk-text-2); margin-inline-start: .3em; } .stat-value .money-cur { font-size: .42em; } .money--pos { color: var(--tone-ok); } .money--neg { color: var(--tone-bad); } /* --------------------------------------------------------------- chart */ .chart { width: 100%; display: block; overflow: visible; } /* A chart has a measure, the way text does (M10.4). These are server-rendered SVGs with a fixed viewBox and `preserveAspectRatio: meet`, so `width: 100%` does not stretch them — it leaves them at their drawn size, anchored to one edge, with whatever the container has left over sitting empty beside them. That was invisible while every chart lived in a half-width card and became obvious the moment one did not. The cap is a little over the 520-unit viewBox `hbars` draws in; the block then sits at the panel's start edge, under its title, in either direction. */ .chart-wrap { max-inline-size: 36rem; } .chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; } .chart-legend-item { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--dk-text-2); } .chart-legend-swatch { width: .625rem; height: .625rem; border-radius: 3px; } /* --------------------------------------------- stock, as small multiples (M14.27) */ /* `chart.stock_split` (M14.33). CSS and not SVG, for the reason the rule it replaced gave: a fixed `viewBox` in a fluid panel draws in the leading half and leaves the rest empty. What changed is the shape. Six bars became three, each split between the two carriers who hold that stock, because they are parts of one total and two separate lengths asked the eye to subtract. The carrier names came out of the rows and went into one legend — printed twice now instead of twelve times, which is most of what made the panel look busy without saying anything. */ .stockbars { display: flex; flex-direction: column; gap: .875rem; } /* The legend, once, at the top. Right-aligned in both directions: it is a key to the bars below it, not a heading of its own, so it sits at the quiet end of the line. */ .stocklegend { display: flex; justify-content: flex-end; align-items: center; gap: .875rem; margin-block-end: .125rem; } .stocklegend-item { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 700; color: var(--dk-text-2); } .stocklegend-dot { inline-size: .625rem; block-size: .625rem; border-radius: 999px; flex: none; /* The same inner bevel the segments carry, so the key and the thing it keys look like one material rather than a swatch beside a chart. */ box-shadow: var(--dk-bevel-dim); } .stockbar { display: flex; flex-direction: column; gap: .375rem; } .stockbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .stockbar-name { font-size: .8125rem; font-weight: 800; color: var(--dk-text-1); } /* The kind's total. Tabular, because three of these sit under each other and a proportional comma makes a column of figures wobble. */ .stockbar-total { font-size: .8125rem; font-weight: 700; color: var(--dk-text-2); font-variant-numeric: tabular-nums; } /* The bar. Wider and taller than the pair it replaces — it has to hold type now. */ .stockbar-track { display: flex; gap: 2px; inline-size: 100%; block-size: 1.75rem; border-radius: var(--dk-r-sm); background: var(--dk-ctl-bg); overflow: hidden; } .stockbar-seg { display: flex; align-items: center; justify-content: center; min-inline-size: 0; padding-inline: .5rem; font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; /* Every segment rounds every corner. With a 2px gap between them the bar reads as two objects sharing a track rather than one object with a seam, which is what it is: these are two carriers' wallets, not one quantity cut in half. */ border-radius: var(--dk-r-sm); box-shadow: var(--dk-bevel-dim); white-space: nowrap; overflow: hidden; } /* Too narrow to hold its own figure. The segment stays — it is the share, and the share is the point — but the number moves to `.stockbar-aside`, because a stock level is something an operator acts on and must not be reachable only by hovering. */ .stockbar-seg.is-tight { padding-inline: 0; } .stockbar-seg.is-tight > .stockbar-fig { display: none; } .stockbar-aside { display: flex; justify-content: flex-end; gap: .75rem; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* A phone. The head's two halves stay on one line — they are short — but the bar loses the type inside it before it loses the bar, so the figures fall to the aside line. */ @media (max-width: 30rem) { .stockbar-track { block-size: 1.375rem; } .stockbar-seg { font-size: .6875rem; padding-inline: .3125rem; } } /* No motion, no fill animation: the panel is read, not watched. `.no-fx` has nothing to turn off here, which is the correct amount. */ /* ------------------------------------------------- is the dialer alive (M14.27) */ /* `ui.device_bar`, the dashboard's first block. Asymmetric by design: alive is a hairline strip, stopped is a tinted block with the consequence spelled out. A dashboard that shouts good news teaches people to ignore it. */ .devbar { display: flex; align-items: center; gap: .625rem; margin-block-end: 1rem; padding: .5rem .875rem; border-radius: var(--dk-r-md); border: 1px solid var(--tone-ok-bd); background: var(--tone-ok-bg); color: var(--dk-text-2); font-size: .8125rem; } .devbar-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 999px; background: var(--tone-ok); color: #fff; font-size: .75rem; flex: none; } .devbar-say { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; } .devbar-say b { color: var(--tone-ok); font-weight: 800; } .devbar-why { color: var(--dk-text-2); } /* Pushed to the trailing end — `margin-inline-start: auto` on the flex child, so it mirrors with the page instead of needing a `[dir]` rule. Without it the block was a 1,100px band with 300px of words at one end of it. */ .devbar-seen { margin-inline-start: auto; flex: none; font-size: .75rem; color: var(--dk-text-3); } .devbar-seen .num { font-family: var(--dk-font-body-en); font-weight: 700; } /* Stopped. Bigger mark, bigger type, and the sentence that says what it costs. */ .devbar--down { gap: .875rem; padding: .875rem 1rem; border-color: var(--tone-bad-bd); background: var(--tone-bad-bg); } .devbar--down .devbar-mark { inline-size: 2.25rem; block-size: 2.25rem; background: var(--tone-bad); font-size: 1.0625rem; } .devbar--down .devbar-say { gap: .125rem 0; flex-direction: column; align-items: flex-start; } .devbar--down .devbar-say b { color: var(--tone-bad); font-size: .9375rem; } /* Both secondary runs go to the darkest ink on the stopped band, and that is a measured correction rather than a preference. The greys are calibrated against a near-white panel; this band is `--tone-bad-bg` over the page wash, which sampled at (242,214,219) — dark enough that `--dk-text-2` came out at **3.49:1** and `--dk-text-3` at 3.55:1, both under AA's 4.5 for 13px and 12px text. `--dk-text-3`'s own token comment records the same class of defect being fixed once already. On this ground `--dk-text-1` is ~15:1, and the red bold title still leads the block. */ .devbar--down .devbar-why, .devbar--down .devbar-seen { color: var(--dk-text-1); } /* On a phone the trailing figure has nowhere to be: pushed to the end by `margin-inline- start: auto` it squeezed the sentence beside it, which then wrapped *around* it in two ragged lines. Below 700px it takes its own row under the message, indented to the copy — which is the reading order anyway. */ @media (max-width: 700px) { .devbar { flex-wrap: wrap; } .devbar-seen { margin-inline-start: 0; inline-size: 100%; padding-inline-start: calc(2.25rem + .875rem); } } /* --------------------------------------------------------------- skeleton */ .skel { border-radius: var(--dk-r-sm); background: linear-gradient(90deg, var(--dk-skel-base), var(--dk-skel-hi), var(--dk-skel-base)); background-size: 240% 100%; animation: skel 1.8s infinite; } @keyframes skel { to { background-position: -240% 0; } } .no-fx .skel { animation: none; background: var(--dk-skel-base); } /* --------------------------------------------------------------- spinner */ /* The reference's, at its size and its speed. A ring of the brand tint with one quadrant in the brand colour; nothing here spins as a page state, but a form that posts and a chart that is still drawing both want one. */ .spinner { inline-size: 32px; block-size: 32px; border: 3px solid rgba(var(--dk-primary-rgb), .18); border-top-color: var(--tone-brand-soft); border-radius: 50%; animation: spin .7s linear infinite; } .spinner--sm { inline-size: 15px; block-size: 15px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-center { display: grid; place-items: center; min-block-size: 200px; } /* --------------------------------------------------------------- avatar */ /* A brand-gradient disc with an initial in it — the reference's `.avatar`. Used by the app bar's identity island and by a customer row that has no logo. */ .avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--dk-primary), var(--dk-primary-dark)); color: var(--dk-on-primary); font-weight: 800; user-select: none; } .avatar--sm { inline-size: 30px; block-size: 30px; font-size: .75rem; } .avatar--md { inline-size: 38px; block-size: 38px; font-size: .9375rem; } .avatar--lg { inline-size: 56px; block-size: 56px; font-size: 1.5rem; } /* ========================================================================== BOOTSTRAP BRIDGE Thirty templates already use these classes; they get the design language so nothing has to be rewritten just to look right. ========================================================================== */ .card { border-radius: var(--dk-r-md); border: 1px solid var(--dk-rim); border-top-color: var(--dk-rim-top); background: var(--dk-surface); box-shadow: var(--dk-sh-glass), var(--dk-bevel); } @supports (backdrop-filter: blur(1px)) { .card { background: linear-gradient(145deg, var(--dk-glass), rgba(255, 255, 255, .38)); backdrop-filter: var(--dk-blur); -webkit-backdrop-filter: var(--dk-blur); } :root[data-bs-theme="dark"] .card { background: linear-gradient(145deg, var(--dk-glass), rgba(255, 255, 255, .03)); } } /* A button (M12). Four things the reference's has and this one did not, and together they are most of why its controls feel physical: * `border-radius: 14px` and weight 700, not 10px and 600 — the same one-step-up in softness that makes its cards read the way they do; * a **shimmer sweep**: a diagonal highlight parked off the trailing edge that crosses the face on hover over .6s. GPU-composited (`transform` only), gated by `no-fx`, and on `::before` rather than the reference's `::after` because Bootstrap owns `::after` for carets and chevrons (DESIGN-SYSTEM.md trap 1); * a press that **scales** rather than nudging down — `scale(.97)` reads as the control taking the touch, which a 1px translate does not; * a fixed control height, so a row of buttons is a row and not a set of boxes each sized by its own label. `min-block-size` and not `height`: a label that wraps has to grow the button, and these are Arabic phrases whose translations are not all short. */ .btn { position: relative; z-index: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: var(--dk-ctl-h); padding: .375rem 1rem; border-radius: var(--dk-r-md); font-weight: 700; font-size: .875rem; line-height: 1.35; white-space: nowrap; transition: transform var(--dk-t-exit) var(--dk-ease), box-shadow var(--dk-t-base) var(--dk-ease), background var(--dk-t-exit) var(--dk-ease), border-color var(--dk-t-exit) var(--dk-ease); } .btn::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--dk-shimmer); transform: translateX(110%); transition: transform .6s var(--dk-ease); } [dir="rtl"] .btn::before { transform: translateX(-110%); } .btn:hover:not(:disabled)::before { transform: translateX(-110%); } [dir="rtl"] .btn:hover:not(:disabled)::before { transform: translateX(110%); } .btn:active:not(:disabled) { transform: scale(.97); } .btn:disabled, .btn.disabled { opacity: .5; } /* The lift, for a button that is the page's one action rather than one of five. */ .btn--lift:hover:not(:disabled) { transform: translateY(-2px); } .btn-sm { min-block-size: var(--dk-ctl-sm-h); padding: .25rem .625rem; font-size: .8125rem; gap: .375rem; border-radius: var(--dk-r-sm); } .btn-lg { min-block-size: 48px; padding: .625rem 1.5rem; font-size: 1rem; border-radius: var(--dk-r-md); } /* Square, for an icon with no label: a table row's rescue actions. */ .btn-icon { inline-size: var(--dk-ctl-h); padding-inline: 0; } .btn-sm.btn-icon { inline-size: var(--dk-ctl-sm-h); } .btn-full { inline-size: 100%; } .btn-primary { background: linear-gradient(135deg, var(--dk-primary), var(--dk-primary-dark)); border: none; color: var(--dk-on-primary); box-shadow: var(--dk-sh-brand-md), var(--dk-bevel-dim); } .btn-primary:hover { background: linear-gradient(135deg, var(--dk-primary), var(--dk-primary-dark)); color: var(--dk-on-primary); box-shadow: var(--dk-sh-brand-lg), var(--dk-bevel-dim); } /* The glass variant. It keeps the *control* fill rather than the reference's white glass, and that difference is deliberate: a near-white button inside a near-white panel is the invisible-control defect M10 fixed — measured, on the treasury page, where the "0" button rendered as bare text beside three real buttons. What it takes from the reference is everything else: the bevel, the soft outer shadow, the sweep and the press. */ .btn-secondary, .btn-glass, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light { background: var(--dk-ctl-bg); border: 1px solid var(--dk-ctl-bd); color: var(--dk-text-1); box-shadow: var(--dk-sh-subtle), var(--dk-bevel-dim); } .btn-secondary:hover, .btn-glass:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-light:hover { background: var(--dk-ctl-bg-hover); border-color: var(--dk-ctl-bd); color: var(--dk-text-1); } /* Light fills get the dark sweep — a white streak over a white face is nothing. */ .btn-secondary::before, .btn-glass::before, .btn-light::before, .btn-outline-primary::before, .btn-outline-secondary::before, .btn-outline-danger::before, .btn-outline-warning::before, .btn-outline-success::before, .btn-outline-info::before, .btn-outline-dark::before, .btn-outline-light::before { background: var(--dk-shimmer-dark); } /* Bare: an action that is a word, not an object. The reference's `.btn-bare`. */ .btn-bare { background: transparent; border: 0; box-shadow: none; color: var(--dk-text-2); padding: 0; min-block-size: 0; } .btn-bare:hover { background: transparent; color: var(--dk-text-1); } .btn-bare::before { content: none; } .btn-success { background: linear-gradient(135deg, #22C55E, #15803D); border: none; box-shadow: 0 8px 24px rgba(34, 197, 94, .28), var(--dk-bevel-dim); } .btn-danger { background: linear-gradient(135deg, #EF4444, #B91C1C); border: none; box-shadow: 0 8px 24px rgba(239, 68, 68, .26), var(--dk-bevel-dim); } .btn-warning { background: linear-gradient(135deg, #F59E0B, #B45309); border: none; color: #fff; box-shadow: 0 8px 24px rgba(245, 158, 11, .26), var(--dk-bevel-dim); } .btn-info { background: linear-gradient(135deg, #3B82F6, #1D4ED8); border: none; color: #fff; box-shadow: 0 8px 24px rgba(59, 130, 246, .26), var(--dk-bevel-dim); } .btn-outline-primary { border-color: rgba(var(--dk-primary-rgb), .45); color: var(--dk-primary-darker); background: var(--dk-ctl-bg); } .btn-outline-primary:hover { background: rgba(var(--dk-primary-rgb), .12); border-color: var(--tone-brand-soft); color: var(--dk-primary-darker); } .btn-outline-danger { border-color: var(--tone-bad-bd); color: var(--tone-bad); background: var(--dk-ctl-bg); } .btn-outline-danger:hover { background: var(--tone-bad-bg); border-color: var(--tone-bad); color: var(--tone-bad); } .btn-outline-warning { border-color: var(--tone-warn-bd); color: var(--tone-warn); background: var(--dk-ctl-bg); } .btn-outline-warning:hover { background: var(--tone-warn-bg); color: var(--tone-warn); } .btn-outline-success { border-color: var(--tone-ok-bd); color: var(--tone-ok); background: var(--dk-ctl-bg); } .btn-outline-success:hover { background: var(--tone-ok-bg); color: var(--tone-ok); } /* Completing the set: the queue's watch-only rows use the ghost variant of all three rescue actions, and `info` was the one Bootstrap default still showing through. */ .btn-outline-info { border-color: var(--tone-info-bd); color: var(--tone-info); background: var(--dk-ctl-bg); } .btn-outline-info:hover { background: var(--tone-info-bg); color: var(--tone-info); } /* One bevel and one soft shadow across the whole ghost set, so a row of three of them sits on the same plane as the filled button beside it. */ .btn-outline-primary, .btn-outline-danger, .btn-outline-warning, .btn-outline-success, .btn-outline-info { box-shadow: var(--dk-sh-subtle), var(--dk-bevel-dim); } /* ------------------------------------------------- one state system per button (M14.31) */ /* Owner: "unify all button of same type to have same hover and active/focus effect", pointing at two `btn-sm btn-outline-primary` buttons rendering as a pale outline and a solid Bootstrap blue. They were the same button in two states. This file styled `:hover` for every variant and then stopped: `:focus-visible` existed only for `.btn-primary`, `:active` only as the shared `transform: scale(.97)`, and `:disabled` only as an opacity. Every state it did not claim fell through to Bootstrap, which is still loaded from the CDN and has opinions in its own palette. Measured on the page, not read off a changelog: .btn-outline-primary press -> #0d6efd focus -> white text on the resting near-white fill .btn-outline-danger press -> #dc3545 focus -> white text on the resting near-white fill .btn-secondary press -> #565e64 focus -> white text on the resting near-white fill .btn-primary press -> #0a58ca focus -> no ring at all .btn-warning/.btn-info focus -> black text where the rest state is white Two separate defects in that. The shop's palette disappears the moment anybody presses anything — a Syrian telecom brand turning Bootstrap blue under the finger. And four variants put white text on their own near-white fill while focused, which is not a colour clash, it is a button with no legible label for as long as it holds focus. **Written as `--bs-btn-*` rather than as more rules.** Bootstrap's press selectors are `.btn:first-child:active` and `:not(.btn-check) + .btn:active` — 0,3,0 — which no single-class rule here can outrank; the file would have to grow a matching pile of `.btn-outline-primary:first-child:active` selectors and keep them in step for ever. Its state rules read these variables, so setting them turns Bootstrap's own machinery into a renderer for these tokens, and `:active`, `:focus-visible`, `.active`, `.show` and `:disabled` all follow from one declaration each. The `:hover` rules above are left exactly as they were and still win the tie (this sheet loads after Bootstrap's). The hover variables here are set to the same values they declare, so **focus and hover are the same appearance** — deliberately: a button under the pointer and a button reached by keyboard are in the same state as far as the viewer is concerned, and the ring is what distinguishes them. Press is one step deeper than hover, and nothing else moves, because `scale(.97)` is already the press. */ .btn { --bs-btn-focus-box-shadow: var(--dk-focus-ring); /* Bootstrap's is `inset 0 3px 5px rgba(0,0,0,.125)`: a 2012 inset press under a design whose press is a scale. */ --bs-btn-active-shadow: none; } /* The ring is declared here as well as handed to Bootstrap through the variable above, and that is not belt-and-braces: `--bs-btn-focus-box-shadow` reaches only the paths Bootstrap's own selectors cover, while a variant's *resting* `box-shadow` in this file (`.btn-outline-*`, `.btn-primary`) is a plain 0,1,0 rule that a 0,2,0 focus rule has to outrank to be seen at all. Stated once, at the specificity that wins. `:focus-visible`, not `:focus`: a ring that survives a mouse click is the thing the owner photographed — a button left looking pressed after it had been used. Keyboard focus gets the ring; a click gets the button back. */ .btn:focus-visible { outline: 0; box-shadow: var(--dk-focus-ring); } /* The filled set. Their fill is a gradient — a `background-image` — so Bootstrap's state `background-color` was always painting behind an opaque layer and was never the visible half of the bug. The text colour was: `.btn-warning` and `.btn-info` went from white to black on focus, because Bootstrap picks its own contrast colour for those two. Pinned to what the rest state already says. */ .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info { --bs-btn-hover-color: var(--dk-on-primary); --bs-btn-active-color: var(--dk-on-primary); --bs-btn-disabled-color: var(--dk-on-primary); --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent; } /* The neutral set, which is one control fill wearing six class names. */ .btn-secondary, .btn-glass, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-light { --bs-btn-hover-color: var(--dk-text-1); --bs-btn-hover-bg: var(--dk-ctl-bg-hover); --bs-btn-hover-border-color: var(--dk-ctl-bd); --bs-btn-active-color: var(--dk-text-1); --bs-btn-active-bg: var(--dk-ctl-bd); --bs-btn-active-border-color: var(--dk-ctl-bd); --bs-btn-disabled-color: var(--dk-text-1); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: var(--dk-ctl-bd); } /* The ghost set. Each keeps its own ink through every state — that is the whole point of a ghost button — and deepens its wash by one step on press. The `-bg` and `-bd` tokens are already a pair at two strengths, and both are redefined for the dark theme, so this needs no second set of values for it. */ .btn-outline-primary { --bs-btn-hover-color: var(--dk-primary-darker); --bs-btn-hover-bg: rgba(var(--dk-primary-rgb), .12); --bs-btn-hover-border-color: var(--tone-brand-soft); --bs-btn-active-color: var(--dk-primary-darker); --bs-btn-active-bg: rgba(var(--dk-primary-rgb), .22); --bs-btn-active-border-color: var(--tone-brand-soft); --bs-btn-disabled-color: var(--dk-primary-darker); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: rgba(var(--dk-primary-rgb), .45); } .btn-outline-danger { --bs-btn-hover-color: var(--tone-bad); --bs-btn-hover-bg: var(--tone-bad-bg); --bs-btn-hover-border-color: var(--tone-bad); --bs-btn-active-color: var(--tone-bad); --bs-btn-active-bg: var(--tone-bad-bd); --bs-btn-active-border-color: var(--tone-bad); --bs-btn-disabled-color: var(--tone-bad); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: var(--tone-bad-bd); } .btn-outline-success { --bs-btn-hover-color: var(--tone-ok); --bs-btn-hover-bg: var(--tone-ok-bg); --bs-btn-hover-border-color: var(--tone-ok-bd); --bs-btn-active-color: var(--tone-ok); --bs-btn-active-bg: var(--tone-ok-bd); --bs-btn-active-border-color: var(--tone-ok); --bs-btn-disabled-color: var(--tone-ok); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: var(--tone-ok-bd); } .btn-outline-warning { --bs-btn-hover-color: var(--tone-warn); --bs-btn-hover-bg: var(--tone-warn-bg); --bs-btn-hover-border-color: var(--tone-warn-bd); --bs-btn-active-color: var(--tone-warn); --bs-btn-active-bg: var(--tone-warn-bd); --bs-btn-active-border-color: var(--tone-warn); --bs-btn-disabled-color: var(--tone-warn); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: var(--tone-warn-bd); } .btn-outline-info { --bs-btn-hover-color: var(--tone-info); --bs-btn-hover-bg: var(--tone-info-bg); --bs-btn-hover-border-color: var(--tone-info-bd); --bs-btn-active-color: var(--tone-info); --bs-btn-active-bg: var(--tone-info-bd); --bs-btn-active-border-color: var(--tone-info); --bs-btn-disabled-color: var(--tone-info); --bs-btn-disabled-bg: var(--dk-ctl-bg); --bs-btn-disabled-border-color: var(--tone-info-bd); } /* Bare is a word, not an object: no fill in any state, and no ring box to draw around nothing — it gets the ring on its text box, which is what it is. */ .btn-bare { --bs-btn-hover-color: var(--dk-text-1); --bs-btn-active-color: var(--dk-text-1); --bs-btn-disabled-color: var(--dk-text-2); --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-disabled-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent; } /* A field (M12). The reference's `.inp-wrap` anatomy, minus the one thing that would break here: it fills with white glass, and inside these near-white panels a white field is the invisible-control defect M10 measured. So the fill stays the control fill, and everything that gives the reference's fields their character comes over — the 14px radius, the bright hairline just inside the top edge, the soft outer shadow, and a focus that **lifts the field a pixel** while a 4px brand halo blooms around it. */ .form-control, .form-select { min-height: var(--dk-field-h); padding: .5rem .875rem; border-radius: var(--dk-r-md); border: 1px solid var(--dk-ctl-bd); background: var(--dk-ctl-bg); color: var(--dk-text-1); font-size: .875rem; box-shadow: var(--dk-bevel-dim), var(--dk-sh-subtle); transition: border-color var(--dk-t-base) var(--dk-ease), box-shadow var(--dk-t-base) var(--dk-ease), background var(--dk-t-base) var(--dk-ease), transform var(--dk-t-base) var(--dk-ease); } .form-control-sm, .form-select-sm { min-height: var(--dk-ctl-h); padding: .25rem .625rem; font-size: .8125rem; border-radius: var(--dk-r-sm); } .form-control::placeholder { color: var(--dk-text-3); } .form-control:focus, .form-select:focus { background: var(--dk-glass-strong); border-color: rgba(var(--dk-primary-rgb), .55); box-shadow: var(--dk-glow), var(--dk-bevel-dim), 0 4px 16px rgba(var(--dk-primary-rgb), .10); transform: translateY(-1px); } :root[data-bs-theme="dark"] .form-control:focus, :root[data-bs-theme="dark"] .form-select:focus { background: rgba(255, 255, 255, .09); } textarea.form-control { min-height: 5.5rem; } /* The chevron, in the design system's own grey rather than Bootstrap's slate, and pointing at the trailing edge in both directions. `background-position` cannot be logical, so it is written out per direction — the RTL build flips its own value and would otherwise fight this one. */ .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px 16px; padding-inline-end: 2.375rem; } [dir="ltr"] .form-select { background-position: right .875rem center; } [dir="rtl"] .form-select { background-position: left .875rem center; } :root[data-bs-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .form-label { font-size: .8125rem; font-weight: 700; letter-spacing: .01em; color: var(--dk-label); margin-bottom: .375rem; } /* The notched alert (M12) — the reference's single most distinctive small component, and the one this app had none of. Two pieces that read as one shape: a **solid** filled circle carrying the icon, and a tinted message block with a **concave bite** cut out of the edge facing it. The circle nests into the bite with a hairline gap, so the two share one continuous border line and the icon looks extracted from the block rather than dropped on top of it. The bite is a radial-gradient mask. Its centre is a physical edge — `at 100%` is the right edge whatever `dir` says — so the two directions are written out rather than left to a logical property that does not exist for gradient positions. Where the reference uses `color-mix()` for the border, this uses a plain rgba: the Android WebViews these shops run are older than `color-mix`, and a border that computes to nothing would take the shared line with it. Degrades honestly: a browser with no mask support draws a straight-edged block with a circle beside it, which is a normal alert. */ .alert { display: flex; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .875rem; font-weight: 600; --alert-circle: 2.75rem; --alert-bite: 1.65rem; /* slightly more than half the circle — that is the gap */ } .alert-icon { flex: 0 0 auto; inline-size: var(--alert-circle); block-size: var(--alert-circle); border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 2; margin-inline-end: calc(var(--alert-circle) / -2); /* nest into the bite */ background: var(--alert-c); color: var(--alert-on); border: 1px solid var(--alert-bd); font-size: 1rem; } .alert-msg { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; padding-block: .625rem; padding-inline-start: calc(var(--alert-circle) / 2 + .9rem); /* clear the bite */ padding-inline-end: 1rem; line-height: 1.5; background: var(--alert-bg); color: var(--alert-text); border: 1px solid var(--alert-bd); border-radius: var(--dk-r-md); -webkit-mask: var(--alert-mask); mask: var(--alert-mask); } [dir="rtl"] .alert-msg { --alert-mask: radial-gradient(circle var(--alert-bite) at 100% center, transparent calc(var(--alert-bite) - .5px), #000 var(--alert-bite)); } [dir="ltr"] .alert-msg { --alert-mask: radial-gradient(circle var(--alert-bite) at 0% center, transparent calc(var(--alert-bite) - .5px), #000 var(--alert-bite)); } .alert-text { flex: 1 1 auto; min-width: 0; } .alert-x { flex: 0 0 auto; margin-inline-start: auto; padding: .25rem; border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; border-radius: var(--dk-r-xs); transition: opacity var(--dk-t-exit); } .alert-x:hover { opacity: 1; } /* Per-tone: a solid circle in the saturated hue, a ~12% tinted block, and a border at ~45% shared by both. Bootstrap's own category names, so the templates keep theirs and only the markup inside changed. */ .alert-success { --alert-c: #16A34A; --alert-bg: var(--tone-ok-bg); --alert-text: var(--tone-ok); --alert-on: #fff; --alert-bd: rgba(34, 197, 94, .45); } .alert-danger { --alert-c: #DC2626; --alert-bg: var(--tone-bad-bg); --alert-text: var(--tone-bad); --alert-on: #fff; --alert-bd: rgba(239, 68, 68, .45); } .alert-warning { --alert-c: #D97706; --alert-bg: var(--tone-warn-bg); --alert-text: var(--tone-warn); --alert-on: #fff; --alert-bd: rgba(245, 158, 11, .45); } .alert-info { --alert-c: var(--dk-primary); --alert-bg: var(--tone-brand-bg); --alert-text: var(--dk-primary-darker); --alert-on: var(--dk-on-primary); --alert-bd: rgba(var(--dk-primary-rgb), .45); } :root[data-bs-theme="dark"] .alert-info { --alert-text: var(--dk-text-1); } /* The message text is the 800 shade in light and the 400 in dark, but the circle is a fill with a label on it and has to stay saturated in both. */ :root[data-bs-theme="dark"] .alert { --alert-on: #0B1220; } :root[data-bs-theme="dark"] .alert-info { --alert-on: var(--dk-on-primary); } /* The `.flashes` stack that used to live here is gone with the include that produced it (M14.13): nothing renders that class any more, so the rules and the `flash-in` keyframes were dead. `ui.alert` itself is untouched -- a page that wants a standing explanation in its own flow still renders one. */ /* ---------------------------------------------------------------- toasts */ /* Flashes, as a toast over the page rather than a block inside it (M14.13, owner direction). In the card layouts a flash was laid out *between* the step dots and the form, which put a refused login code in the one place that pushed everything below it down — the card grew, the field moved out from under the cursor, and the message competed with the brand for the top of the card. A message about what just happened is not part of the form's structure, and the reference does not treat it as one: its `Toaster` is fixed, narrow, and outside the layout entirely (`organisms/Toaster/Toaster.css`). Ported from that, with two departures. It is centred on the inline axis instead of pinned left, because this product has no fixed topbar on the auth pages to sit under and a centred strip reads the same in both directions. And there is no icon circle and no dismiss button: the reference's toast nests the same 44px filled circle the inline alert does, which on a 26rem strip is most of the height, and between that circle, the emoji the message text used to carry, and a close button, one sentence arrived wearing three marks. One small glyph in the tone colour, and the message. */ .toasts { position: fixed; inset-block-start: 1rem; inset-inline: 0; /* Above Bootstrap's modal (1055) and its backdrop: a flash that fires while a dialog is open is usually about the dialog. */ z-index: 1090; margin-inline: auto; inline-size: min(92vw, 26rem); display: flex; flex-direction: column; /* Each toast is as wide as its sentence and no wider, centred in the strip. `الكود خاطئ` is three words; in a fixed 26rem bar it is three words and a lot of tinted nothing. The strip keeps the 26rem as the point at which a long message wraps. */ align-items: center; gap: .5rem; /* The strip spans the viewport to centre itself, so it must not eat clicks across the whole width — only the toasts themselves are targets. */ pointer-events: none; } /* The tone tokens live on `.alert-success` / `.alert-danger` / … , which are pure custom-property carriers with no appearance of their own. Reused here rather than redeclared, so a tone stays one definition. */ .toast-item { pointer-events: auto; cursor: pointer; display: flex; align-items: center; max-inline-size: 100%; gap: .625rem; padding: .8125rem 1rem; border-radius: var(--dk-r-md); border: 1px solid var(--alert-bd); background: var(--alert-bg); color: var(--alert-text); font-size: .875rem; font-weight: 600; line-height: 1.5; box-shadow: var(--dk-sh-lg); /* In, hold, out — and the out is a *delayed* second animation rather than late keyframes in one. Two reasons, both about not needing a script. A fixed toast that nobody dismisses is not a block that scrolls away, it is an overlay that stays for the rest of the page view, so the hide cannot be JavaScript's job. And the a11y block near the end of this sheet clamps `animation-duration` to .001ms for a reduced-motion viewer but leaves `animation-delay` alone: a hold encoded as duration would collapse to nothing and the message would be gone before it was read, while a hold encoded as delay survives exactly as written. `ui.js` only adds click-to-dismiss on top. */ animation: toast-in var(--dk-t-pop) var(--dk-ease), toast-out var(--dk-t-exit) var(--dk-ease) 5s forwards; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .toast-item { -webkit-backdrop-filter: var(--dk-blur); backdrop-filter: var(--dk-blur); } } .toast-ico { flex: 0 0 auto; font-size: 1rem; color: var(--alert-c); } .toast-text { flex: 1 1 auto; min-width: 0; } /* `forwards`, and the element is removed by `ui.js` on animationend — the same shape as the language menu's exit, and for the same reason: there is no state between "here" and "gone" that CSS can hold on its own. */ /* Dismissed by hand: the same exit, now rather than at 5s. */ .toast-item.is-going { animation: toast-out var(--dk-t-exit) var(--dk-ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } } /* `visibility` is discrete but animatable, and with `forwards` it is what the ended state holds: without it the toast is a transparent 26rem strip still answering clicks across the top of the page. */ @keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(.97); visibility: hidden; } } .badge { border-radius: var(--dk-r-pill); font-weight: 700; padding: .1875rem .75rem; font-size: .75rem; } .nav-tabs { border-bottom: 1px solid var(--dk-line-glass); gap: .25rem; } .nav-tabs .nav-link { border: 0; border-radius: var(--dk-r-sm) var(--dk-r-sm) 0 0; color: var(--dk-text-2); font-size: .875rem; font-weight: 600; padding: .5rem .875rem; } .nav-tabs .nav-link:hover { background: var(--dk-surface-hover); color: var(--dk-text-1); } .nav-tabs .nav-link.active { background: var(--dk-glass-strong); color: var(--dk-primary-darker); box-shadow: inset 0 -2px 0 var(--tone-brand-soft); } :root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--dk-text-1); background: rgba(255,255,255,.07); } .table { --bs-table-bg: transparent; color: var(--dk-text-1); font-size: .8125rem; } .table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--dk-line); } .table thead th { font-size: .6875rem; font-weight: 700; color: var(--dk-primary-darker); /* `to bottom` for the same reason as `.dtable thead th` above: a per-cell diagonal seams at every column boundary. */ background: linear-gradient(to bottom, rgba(var(--dk-primary-rgb), .20), rgba(var(--dk-primary-rgb), .12)); border-bottom: 1px solid rgba(var(--dk-primary-rgb), .24); white-space: nowrap; } :root[data-bs-theme="dark"] .table thead th { color: var(--dk-text-1); } .table tbody tr:hover > * { background: var(--dk-surface-hover); } .modal-content { border-radius: var(--dk-r-lg); border: 1px solid var(--dk-rim); background: var(--dk-glass-strong); } .dropdown-menu { border-radius: var(--dk-r-md); border: 1px solid var(--dk-rim); background: var(--dk-glass-strong); box-shadow: var(--dk-sh-lg); padding: .375rem; } .dropdown-item { border-radius: var(--dk-r-xs); font-size: .875rem; padding: .5rem .75rem; } .dropdown-item:hover { background: rgba(var(--dk-primary-rgb), .10); color: var(--dk-primary-darker); } /* --------------------------------------------------------- viewer controls */ /* Language and theme (M14.10). Both change the page **in place** — `js/viewer.js` flips the theme with no network at all, and fetches the same URL in the other language and adopts the document rather than navigating to it. Everything below is what they look like while they do it. They were two segment strips (M14.9), and before that two icon links that each showed the state you would *get*: a moon meant "you are in light". Segments fixed the reading and kept the page reload; this fixes the reload and keeps the reading. One track holds both, with a hairline between them, because two adjacent bordered pills read as loose buttons and one track reads as one utility control — which is what it is. */ /* **Each control is its own `.island`** — the app bar's component, carried on the element rather than restated here (owner direction 2026-08-30: "use the same island styles used in the title bar", then "separated island for each"). It went one step at a time and the last step is the one that matters. It began as a recessed `--dk-ctl-bg-hover` groove holding both, which is the right ground for a segment strip and the wrong one here: in the CRM this cluster stands in a row with the burger, the page title and the dialer pill, and it was the only object in that row pressed *into* the bar while everything else floated above it. Making the groove an island fixed the ground. Splitting it fixed the grouping — the bar's other islands are one object each, and language and theme are two unrelated settings that were sharing a pill only because they had shared a strip before it. So there is nothing left here but the row, at the bar's own `.5rem`. Height, radius, rim, glass, bubble shadow and blur all come from `.island`; the hairline that used to separate the two is gone with the thing it was separating. */ .viewer-controls { display: inline-flex; align-items: center; gap: .5rem; } /* With no shell to hold them, they pin where a topbar would be — not floating over a bottom corner, which is the furthest point from anything they affect. */ .viewer-controls--float { position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 1030; } @media print { .viewer-controls--float { display: none; } } /* ------------------------------------------------------------ language menu */ /* A dropdown, on owner direction, and explicitly so a third language is a row in `presentation.LANGUAGES` and nothing else. A `
` and not a `` dropdowns of on/off, which made "is anything switched off right now" unanswerable without opening each one — the whole point of a kill switch is that its state is visible. The track is the control; the label is part of the hit area, so the whole row is clickable. */ .switch { display: flex; align-items: center; gap: .625rem; cursor: pointer; padding: .375rem 0; /* Hugs the control and its label. As a block it spanned the panel, so the empty half of the row was a live target and a click far from the switch flipped it (M14.102). */ inline-size: max-content; max-inline-size: 100%; } .switch > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Retuned to the reference's Toggle (M12): a 48x26 track with a 20px thumb, a recessed inset on the off state so the track reads as a groove rather than as a flat pill, and a thumb that travels on the **overshoot** easing. That last one is the whole character of the control — a switch is the one thing on the page whose entire job is to move, and a linear glide reads as a checkbox that happens to be pill-shaped. */ .switch-track { flex: 0 0 auto; position: relative; inline-size: 3rem; block-size: 1.625rem; border-radius: var(--dk-r-pill); background: var(--dk-ctl-bg-hover); border: 1px solid var(--dk-ctl-bd); box-shadow: inset 0 2px 4px rgba(15, 23, 42, .08); transition: background var(--dk-t-base) var(--dk-ease), border-color var(--dk-t-base), box-shadow var(--dk-t-base); } .switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .28); transition: transform .32s var(--dk-ease-spring); } .switch > input:checked + .switch-track { background: linear-gradient(135deg, var(--dk-primary), var(--dk-primary-dark)); border-color: transparent; box-shadow: var(--dk-glow-ring), inset 0 1px 0 rgba(255, 255, 255, .20); } /* `translateX` and not a logical property, because a transform has no logical form — so it is mirrored by hand for RTL, which is one of the four things DESIGN-SYSTEM.md warns cannot be done logically. (The reference animates `inset-inline-end` instead, which needs no flip but also cannot be composited; on the phones these shops run, a transform is the right trade.) */ .switch > input:checked + .switch-track::after { transform: translateX(1.375rem); } [dir="rtl"] .switch > input:checked + .switch-track::after { transform: translateX(-1.375rem); } .switch > input:focus-visible + .switch-track { outline: 3px solid rgba(var(--dk-primary-rgb), .45); outline-offset: 2px; } .switch-label { font-size: .875rem; font-weight: 700; } .switch-desc { font-size: .75rem; font-weight: 400; color: var(--dk-text-2); } .switch-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .switch--inline { padding: 0; } /* The card variant — the reference's default. A setting that is its own row in a bordered, tinted block, rather than a line of text with a control at the end. */ .switch--card { padding: .75rem .875rem; background: var(--dk-ctl-bg); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); transition: background var(--dk-t-base) var(--dk-ease); } .switch--card:hover { background: var(--dk-surface-hover); } /* A grid of settings, each one its own card — the reference's Toggle is a bordered, tinted row and not a bare label with a control at the end of it. Fifteen kill switches in a grid is exactly the case that needs the row: the card is what tells you where one setting stops and the next begins. */ .switch-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } /* The card. Three things were wrong with it at once and the owner's report — *"good stares syriatel ont top and mtn in down :)"*, on the denomination composer — is what the sum of them looks like. All three measured before the fix: both cards y=330 h=88 a grid item stretches to its row Syriatel track y=343 two lines: the switch, then its note MTN track y=361 one line, centred in the same 88px card fill 1.01:1 against the dialog's own ground card border 1.02:1 settings 267px card, 149px used, 118px of dead space after the label **The stagger is `align-content`, and `flex-wrap` is what makes it apply.** It is ignored on a `nowrap` container, so the card without a note had no way to say "top" and sat its single line in the middle of a height the card beside it had set. Wrapping costs the fifteen on the settings page nothing — measured, a 267px card holding an 82px label and a 48px track has no line to wrap onto — and where a label ever did overflow, wrapping it beats the overflow it has now. **The ground is ink, not a white overlay.** `--dk-glass-inner` is `rgba(255,255,255,.50)` and `--dk-line-glass` is white at .40: they *lighten*, which reads on the shell's tinted mesh and does nothing at all on a surface that is already near-white. The card was not faint inside a dialog, it was absent, and two toggles with no visible container read as two controls at arbitrary distances. This is M14.46's finding one token along ("`--dk-rim` is the *highlight* … drawn across a near-white dialog it is invisible"). `--dk-ctl-bg` and `--dk-line` are the ink pair the buttons and the panel hairlines already use, and both are redefined for the dark theme — where a white overlay *is* the right direction — so this needs no second set of values. Re-sampled after, and the point is that the two surfaces now agree: fill **1.07:1** and border **1.26:1** against the dialog's ground *and* against the settings panel's, where the overlay had measured 1.09 and 1.00. In dark, 1.19 and 1.50. A card boundary is a divider, not a surface — it does not want AA contrast, it wants to be findable, and 1.02:1 is not. */ .switch-grid > .switch { padding: .75rem .875rem; flex-wrap: wrap; align-content: flex-start; background: var(--dk-ctl-bg); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); transition: background var(--dk-t-base) var(--dk-ease); } .switch-grid > .switch:hover { background: var(--dk-surface-hover); } /* Name at the start of the card, control at its end — which is what the auto margin was written for and what it never did. The DOM order is track *then* label, so the free space landed after the label and the pair huddled against the start edge. `order` and not a template change, because the DOM order is the one that is right: the input has to precede the track for `+ .switch-track` and the note has to follow it for `~ .switch-note`, and those two selectors are the whole of what makes this control work with no script. Visual order is a presentation question and belongs here. Scoped to a card, like the padding above it. A bare `.switch` — the maintenance kill switch, the USSD form's `--inline` — is a checkbox in a sentence, and its label belongs next to the thing it labels. */ .switch-grid > .switch .switch-label { order: -1; margin-inline-end: auto; } /* A note belonging to one switch (M14.72). Syriatel's USSD value is a hundred times its denomination and MTN's is not, so the divisor is a property of *that* toggle rather than of the form around it — it wraps to its own line inside the row and is shown only while the switch is on. `~` from the input, which is its sibling inside the label, and not `:has()` on an ancestor: `.seg`'s comment records that this is an installed PWA on phones older than `:has()`, and a rule that silently stops applying there is worse than one that never applied. `--noted` rather than putting `flex-wrap` on every `.switch`, because the fifteen on the settings page have nothing to wrap. */ .switch--noted { flex-wrap: wrap; } .switch-note { flex-basis: 100%; display: none; margin-block-start: .375rem; font-size: .75rem; font-weight: 600; color: var(--dk-text-3); } .switch > input:checked ~ .switch-note { display: block; } /* --------------------------------------------------------------- act menu */ /* A menu of acts is a list of named rows (M14.103), not a strip of bare icon circles: the name says what it is, the state line says where the account stands, and the button carries the verb. Built on `.switch--card`'s box, because both are one setting in a row. */ .act-menu { display: flex; flex-direction: column; gap: .5rem; } .act-item { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .625rem .75rem; background: var(--dk-ctl-bg); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); } .act-item--danger { background: var(--tone-bad-bg); border-color: var(--tone-bad-bd); } /* The state at a glance: toned while the flag is set, grey while it is not. */ .act-ico { flex: none; display: grid; place-items: center; inline-size: 2.125rem; block-size: 2.125rem; border-radius: var(--dk-r-sm); background: var(--dk-ctl-bg-hover); color: var(--dk-text-2); } .act-ico--brand { background: var(--tone-brand-bg); color: var(--tone-brand); } .act-ico--warn { background: var(--tone-warn-bg); color: var(--tone-warn); } .act-ico--bad { background: var(--tone-bad-bg); color: var(--tone-bad); } .act-ico--info { background: var(--tone-info-bg); color: var(--tone-info); } .act-body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 9rem; min-inline-size: 0; } .act-name { font-size: .875rem; font-weight: 700; } .act-state { font-size: .75rem; color: var(--dk-text-2); } /* The control closes the row whatever the name beside it ran to. */ .act-item > .btn { flex: none; margin-inline-start: auto; } /* A pill that is also a submit: reading the state and changing it are one object, which is what a toggle is. Replaces a button whose whole content was a coloured circle. */ .pill--button { cursor: pointer; font-family: inherit; transition: filter var(--dk-t-base); } .pill--button:hover { filter: brightness(.96) saturate(1.15); } /* A monospace field, for the dial templates. The one place where every character matters and an `l` must not be readable as a `1`. */ .form-control.code { font-family: var(--dk-font-mono); font-size: .875rem; letter-spacing: .01em; } /* Numbered step marker, replacing 1️⃣/2️⃣ — an emoji digit renders at whatever size the system font decides and does not inherit the button's colour. The disc and the digit are a declared pair, and neither is `currentColor` or a surface token. Both of those painted the marker out, in different ways and in different themes, and neither shows up anywhere but on screen: * `background: currentColor` beside `color: …` — currentColor on an element resolves to *that element's own* computed colour, which the next line was setting. Both came out identical: a white digit on a white disc, in light mode. * `color: var(--dk-surface)` — right-sounding name, wrong ladder. In dark that token is `rgba(255,255,255,.05)`, a translucent overlay meant to sit *on* a ground, so the digit rendered at 5% alpha on a near-white disc. A numbered step that shows no number, on the control that changes the shop admin's password. The emoji digits it replaced at least had a glyph. */ .step { display: inline-grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; margin-inline-end: .25rem; border-radius: 50%; background: var(--step-disc, var(--dk-text-1)); color: var(--step-ink, #FFFFFF); font-family: var(--dk-font-body-en); font-size: .625rem; font-weight: 700; line-height: 1; } /* The default ink is a literal in each theme, and has to be: it is knocked out of a disc painted in `--dk-text-1`, so it must be that token's opposite, and the ladder has no "inverse of the text colour". `:where()` keeps the theme override at zero specificity, so it cannot out-specify the `.btn-primary` pair below and silently discard it. */ :where(:root[data-bs-theme="dark"]) .step { --step-ink: #0B1220; } /* On a filled button the pair is the button's own: the label colour for the disc and the fill for the digit. `presentation._label_for` already proves those two contrast — it picks the label by measuring it — so this holds for a pale gold shop as well as a dark mulberry one, which a fixed light-on-dark pair would not. */ .btn-primary .step { --step-disc: var(--dk-on-primary); --step-ink: var(--dk-primary); } /* The save bar for a long form: the button that commits fifteen settings should not be the fifteenth item in a grid. At the end, like a dialog's foot, because it closes a page. `.form-commit` is its sibling and deliberately not the same rule (M14.81): a commit inside a *panel* sits at the start, where that panel's own controls are, and takes its space above rather than below. The password panel has both — a numbered step 1 that is a bare button and a step 2 that is this — and a sequence whose two buttons sit at opposite ends of the card does not read as a sequence. See `.field-row > .btn` for why the button left the field row in the first place. */ .form-foot { display: flex; justify-content: flex-end; margin: 0 0 1.25rem; } /* A single-column page (the broadcast composer): a measure, not the full width. */ /* Centred (M14.69). It was `col-md-8` and centred before M6.15 and has not been since: a plain block with a max width sits at the inline-start, so measured at 1440 the broadcast card ran 456→1160 in a 28→1160 content region — 428px of dead space at one end and none at the other. Two pages use this, and a lone form card is centred on both. */ .narrow { max-inline-size: 44rem; margin-inline: auto; } /* A table cell holding prose rather than a value — an SMS body, a captured reply. */ .dtable .wrap { white-space: normal; line-height: 1.5; font-size: .75rem; max-width: 52ch; } /* The carrier's recent replies, as a reference list beside the keyword fields. */ /* The carrier-reply list was here (M6.15–M14.81): a `