/* ================================================================ DARK THEME FOR ARCHITECTUI — "OBSIDIAN" ================================================================ This is the platform's DEFAULT skin. It is the same skeleton every other ArchitectUI skin uses (dark-blue.css, dracula.css and forest.css are the same 8100 lines with a different palette); what makes it the rich one is the palette below plus the RICH SURFACE SYSTEM section at the end of this file, which is Dark's alone. The palette is the PRODUCT's palette — the one the public site and the project workspace already wear (static/dokie/dokie-site.css): a near-black navy ground with the brand sweep #2f8fd6 -> #59c26a. Keeping the two in step is deliberate: a visitor who signs in should not feel handed over to a different piece of software. CONTRAST. Every ink/ground pair below clears WCAG 1.4.3 AA on the body ground #080e19: --foreground 16.7:1, --comment 7.0:1, --purple 5.5:1, --green 8.6:1, --red 5.3:1, --orange 8.7:1. That is why --comment is a full step brighter than the neutral grey it replaced: at #6a737d it was 3.5:1 and failed. FILLED ACCENTS. #2f8fd6 carries WHITE at only 3.5:1, so a filled primary does not use white ink — it uses the brand sweep with the dark ink #04121d — 5.4:1 against the blue end of the sweep and 8.4:1 against the green end — exactly as the product's own buttons do. See the BUTTONS block in the rich section; that is the one place this skin deliberately departs from the shared skeleton's colour logic. ================================================================ */ :root { /* ---- Obsidian palette ------------------------------------------------ Grounds carry a navy ink (H≈215) at a saturation that reads as black rather than as blue: it is what stops large dark areas going flat grey under a monitor's own gamma. Accents, not surfaces, carry the colour. */ --background: #080e19; /* the page ground */ --current-line: #101b2c; /* the card / panel ground, one step up */ --foreground: #e9eff7; /* primary ink */ --comment: #8a9db4; /* secondary ink, hairlines, placeholders */ --cyan: #46b6d9; /* info */ --green: #59c26a; /* success — and the far end of the brand sweep */ --orange: #e0a33c; /* warning */ --pink: #6fbdf0; /* hover accent (a lift of --purple, not a hue change) */ --purple: #2f8fd6; /* primary — the brand */ --red: #e05a52; /* danger */ --yellow: #d8c46a; --foreground-muted: rgba(233, 239, 247, 0.72); /* ---- The rich section's own tokens ---------------------------------- Declared here so the whole file can reach them, and so a plugin author writing per-theme CSS (NctThemeCss / the HTML Component Studio) can pick the same surfaces up instead of inventing near-misses. */ --surface-1: #0c1422; /* a well: sidebar, table head, inputs at rest */ --surface-2: #101b2c; /* a card, a dialog body (== --current-line) */ --surface-3: #16243a; /* raised: hover, a dialog's header strip */ --surface-4: #1c2f49; /* pressed / selected */ --hairline: rgba(150, 184, 219, 0.14); /* a card edge */ --hairline-2: rgba(150, 184, 219, 0.24); /* a divider that has to be seen */ --hairline-ui: rgba(168, 200, 232, 0.52);/* the edge of a CONTROL: 3.7:1 on a field, 3.5:1 on a card. WCAG 1.4.11 asks 3:1; 0.42 gave only 2.9:1. */ --tint: rgba(255, 255, 255, 0.04); /* the "raise" wash on a surface */ --tint-2: rgba(255, 255, 255, 0.08); --brand-sweep: linear-gradient(100deg, #2f8fd6 0%, #59c26a 100%); /* THE PRIMARY BUTTON'S RAMP — the same blue->green idea, but solved instead of interpolated. `--brand-sweep` above is decoration: it runs behind a 22px knob and a 4px progress bar, where nothing has to be read. The button is different, because a LABEL sits on it. Straight-line sRGB interpolation between the two brand tokens does two measurable things: - it ramps LUMINANCE 0.251 -> 0.418 (x1.66) left to right. The eye does not read that as "two colours"; it reads it as a light source off to the right, and nothing else in this product is lit from the side. That mismatch is what makes the button feel tilted. - it passes near the neutral axis in the middle, so chroma collapses to 0.092 at frac 0.42 — exactly where the label sits. The brand is weakest where the eye lands. These stops hold luminance constant at Y = 0.30 (measured 0.2984..0.3014, x1.010) and push the unavoidable gamut waist out to frac 0.69, past the label's trailing edge. Measured: ink contrast 6.28..6.33 across the WHOLE button (was 5.43..8.43), chroma under the label 0.124 (was 0.097), edge against a card 5.71:1 (WCAG 1.4.11 asks 3:1, and today's blue gives 4.91). BOTH ENDS ARE STILL THE BRAND. #3e9be3 is #2f8fd6's own hue (245.4) and its own chroma (0.138) lifted to Y = 0.30, and #3ea953 is #59c26a's hue (147.1) and chroma (0.158) lowered to it — the same two colours the logo and the public site use, lit evenly instead of re-picked. The middle stops ride the sRGB ceiling, which is why the waist here (0.110) is shallower than the endpoints-first version's (0.103). The waist cannot be removed, only moved: at this luminance sRGB's ceiling near hue 196 IS ~0.112, in any colour space. Anyone re-tuning these stops should move it, not chase it. */ --btn-ramp: #3e9be3 0%, #339ce1 36%, #08a3c2 58%, #09a6a0 74%, #08aa77 88%, #3ea953 100%; /* The ramp is an OBJECT of a fixed width, not a stretch. Stretched to `100%`, the same class spends 95 degrees of hue on a 363px login button and on a 96px toolbar button, so one token renders as two different colours and the small one comes out an anonymous teal. Pinned, the rate of travel is constant: the login CTA shows the whole pair, and a small button shows the blue head with the turn only beginning — which is the right answer at that size. `max()` so a full-width button still gets a complete sweep instead of a slab and then dead green. */ --btn-slab: 360px; /* HOW FAR HOVER ADVANCES THE RAMP — and it has to be a function of WIDTH, not a fixed number. The ramp's first 36% is a deliberately near-constant blue head (that is what parks the chroma waist past the label), so a fixed `-64px` moves the colour under a 110px button by dE76 = 1.7, which is below a just-noticeable difference: 2229 of the product's buttons are btn-sm and none of them had a hover state at all. Measured in-browser at 110 / 200 / 363px: -64px dE 1.7 / 12.0 / 22.3 <- no hover on small buttons calc(30% - 32px) dE 12.3 / 17.3 / 9.5 calc(30% - 48px) dE 16.9 / 21.8 / 15.6 <- this one, visible at every width A percentage in `background-position` resolves as p x (button width - image width), which is NEGATIVE while the 360px slab is wider than the button — so a positive 30% yields a leftward offset that grows as the button shrinks, and collapses to zero once the button is wider than the slab, leaving the flat -48px. Anything wider than the slab therefore exposes 48px of `background-color` at the right, and that is seamless by construction: the fallback colour IS the ramp's 100% stop, so the join is continuous in value and differs only in slope, by about 1.2 RGB units per pixel. */ --btn-shift: calc(30% - 48px); --brand-ink: #04121d; /* ink ON the sweep */ --brand-soft: rgba(47, 143, 214, 0.14); --brand-line: rgba(47, 143, 214, 0.34); --elev-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .55); --elev-2: 0 2px 6px rgba(0, 0, 0, .40), 0 32px 64px -24px rgba(0, 0, 0, .70); --glow: 0 0 0 1px var(--brand-line), 0 18px 60px -22px rgba(47, 143, 214, .65); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; /* Override Bootstrap Variables */ --bs-blue: var(--cyan); /* Or keep a blue tone if preferred */ --bs-indigo: #5b6fd6; /* Muted indigo */ --bs-purple: var(--purple); --bs-pink: var(--pink); --bs-red: var(--red); --bs-orange: var(--orange); --bs-yellow: var(--yellow); --bs-green: var(--green); --bs-teal: #3fb8c0; /* Custom teal derived from green/cyan */ --bs-cyan: var(--cyan); --bs-white: var(--foreground); /* White becomes foreground */ --bs-gray: var(--comment); --bs-gray-dark: var(--current-line); --bs-gray-100: #e9eff7; --bs-gray-200: #cbd8e6; /* Adjust grays based on foreground/background */ --bs-gray-300: #a8bacd; --bs-gray-400: #6d8299; --bs-gray-500: var(--comment); /* Mid gray */ --bs-gray-600: #335078; /* Darker comment */ --bs-gray-700: var(--current-line); /* Darker gray */ --bs-gray-800: #0f1a2a; --bs-gray-900: #0b1220; /* Darkest gray */ --bs-primary: var(--purple); --bs-primary-rgb: 47, 143, 214; --bs-secondary: var(--comment); --bs-success: var(--green); --bs-info: var(--cyan); --bs-warning: var(--orange); --bs-danger: var(--red); --bs-light: var(--current-line); /* Light becomes current-line */ --bs-dark: var(--background); /* Dark becomes background */ --bs-body-color: var(--foreground); --bs-body-bg: var(--background); --bs-link-color: var(--purple); --bs-link-hover-color: var(--pink); --bs-border-color: #22385a; /* Neutral border */ --bs-footer-border-color: var(--current-line); --bs-border-color-translucent: rgba(47, 143, 214, 0.15); /* Translucent blue border */ --bs-table-hover-bg: #16243a; /* Much darker shade of comment color for better contrast */ --bs-table-hover-color: var(--pink); /* Match sidebar menu hover text color */ /* The /settings rail and Bootstrap's own utilities read these; unbridged they fall back to a 5% black wash, which is invisible on a near-black ground. */ --bs-secondary-bg: var(--surface-3); --bs-tertiary-bg: var(--tint-2); --bs-secondary-color: var(--comment); /* ArchitectUI specific potentially using bs vars */ --bs-focus: var(--pink); --bs-alternate: #5aa9e2; /* Lighter blue */ /* The browser paints scrollbars, the keeps its chevron in exactly that property. Without this rule the field is a text box that silently opens a menu. A background-image cannot read a colour token, so the whole URL is the token: this is --comment, written into the SVG stroke. Repeat it if the palette ever moves. NOT ON `.form-control`, and that exclusion is load-bearing. `/common/css/common.css` line 271 — which PluginBasePage loads AFTER the skin — says `.form-control { appearance: auto !important }`. So every `select.form-control` in this product keeps the BROWSER's own arrow no matter what a skin does, and painting one here simply added a second chevron beside it. The native arrow is drawn in the element's `color`, which this skin already sets to --foreground, so it needs no help. Only the selects that genuinely lost their chevron get one back. */ .form-select:not(.form-control), select:not(.form-control) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a9db4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 14px 11px !important; padding-right: 2.25rem !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* A multiple/size select is a LIST, not a dropdown — a chevron on it points at nothing. */ select[multiple], select[size]:not([size="1"]) { background-image: none !important; padding-right: .75rem !important; } .form-label, label.form-label, .form-check-label { color: var(--foreground-muted); font-weight: 500; } /* Checkboxes and radios take the brand when checked and the same 3px halo on focus, so a form has one focus figure rather than three. */ .form-check-input { background-color: var(--surface-1); border: 1px solid var(--hairline-ui); } .form-check-input:checked { background-color: var(--purple); border-color: var(--purple); } .form-check-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(47, 143, 214, .30); } /* ------------------------------------------------------------------------------------------------ 6. BUTTONS ONE filled button per view — the primary action — and it wears the product's own blue->green. Every other button is a hairline outline or plain text, which is what lets the one filled button mean something. Ink on the ramp is #04121d, not white, and that is a contrast decision rather than a taste one: white on the ramp is 3.2:1 and fails WCAG 1.4.3 for the 14px label a button carries, while the dark ink is 6.3:1 at every point along it — see --btn-ramp for how "every point" was arrived at. THE BUTTON IS FLAT. No inner highlight, no inner shade, no drop shadow, no glow — nothing that models a surface or lifts the object off the page. An earlier revision had a 1px top highlight and a 1px bottom shade, which is how a physical button is drawn, and it read as 3D and dated on sight. What replaces it is not less craft, it is craft moved into the FILL: an even, correctly lit, full-chroma ramp needs no bevel to look like an object. Anything added back here has to justify itself as something other than depth. Hover is a HUE event, not a brightness one: the ramp advances 64px inside the button. Because the ramp is iso-luminant that changes the colour under the label by dY = 0.0007 and its contrast not at all, so the state can be as visible as it likes without touching legibility. That move is only available because the field was flattened first. ------------------------------------------------------------------------------------------------ */ /* WHAT LIVES HERE NOW, AND WHAT DOES NOT. The whole button system — every rung, every role, every state, every modifier — is in theme-common.css under "RUNG", written once and read by all five skins through the token block at the foot of this file. What was here before was a second, private copy of it: `btn-secondary` and `btn-light` painted by one shared selector list (they measured byte-identical), four semantic washes so faint that `btn-danger` came out at 1.17:1 with a 2.16:1 edge — quieter than the "Save draft" beside it — and a `btn-link` in the brand blue, which is why every form footer in the product had two blues in it. All of that is deleted, not overridden: it lost to the shared layer on specificity anyway, and leaving it would have meant the file said one thing and rendered another. ONE THING STAYS, and it is the reason this section still exists: the primary button's ramp. The shared W3 rule paints a flat `var(--w3-brand)`, which is correct for four skins. Dark is the skin the product's own blue->green identity lives in, so its primary is an iso-luminant sweep rather than a flat fill — see the derivation above --btn-ramp at the top of this file. `--w3-brand` is set to the ramp's own head (#3e9be3) so the token and the ramp agree wherever something reads the token instead of the ramp. The selectors below are (0,2,0)/(0,2,1) — one step above the shared W3 rule, which is exactly what "a skin departing from the system has to do so loudly" means. They no longer repeat `.mrjun-block-dialog .modal-footer` / `.rich-bootstrap-modal-panel .modal-footer` / `.toolbar-controls`: those three context overrides were deleted from all five skins in the same change, so there is nothing left in a modal footer or a toolbar for the ramp to fight. */ .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary { background-color: #3ea953 !important; background-image: linear-gradient(to right, var(--btn-ramp)) !important; background-size: var(--btn-slab) 100% !important; background-size: max(var(--btn-slab), 100%) 100% !important; background-position: 0 0 !important; background-repeat: no-repeat !important; /* `background-color` fills the BORDER box while a background-image starts at the PADDING edge, so without this the ramp's green tail showed as a hairline all the way round — on a small blue button, a green outline. */ background-origin: border-box !important; border-color: transparent !important; color: var(--brand-ink) !important; box-shadow: none !important; transition: background-position .18s ease-out, color .12s ease !important; } /* Hover advances the ramp instead of changing its brightness. Because the ramp is iso-luminant the colour under the label moves a long way and its contrast does not move at all — measured dE76 16.9 / 21.8 / 15.6 at 110 / 200 / 363px, ink contrast 6.28-6.33 throughout. The shift has to be width-aware: a fixed -64px moved a 110px button by dE 1.7, below a just-noticeable difference, so 2229 small buttons had no hover state. */ .btn.btn-primary:hover, a.btn.btn-primary:hover, button.btn.btn-primary:hover { background-color: #3ea953 !important; background-image: linear-gradient(to right, var(--btn-ramp)) !important; background-position: var(--btn-shift) 0 !important; border-color: transparent !important; color: var(--brand-ink) !important; } /* Pressed snaps the ramp home — the same colour move in reverse, at 60ms. */ .btn.btn-primary:active, a.btn.btn-primary:active, button.btn.btn-primary:active { background-color: #3ea953 !important; background-image: linear-gradient(to right, var(--btn-ramp)) !important; background-position: 0 0 !important; transition-duration: .06s !important; } /* With no hover to return FROM, a press would be a no-op on touch. There it advances instead. */ @media (hover: none) { .btn.btn-primary:active, a.btn.btn-primary:active, button.btn.btn-primary:active { background-position: var(--btn-shift) 0 !important; } } /* A disabled primary is a dead slab like every other disabled button: the ramp must not survive it, and this is (0,3,0)/(0,3,1) so it beats the rules above. */ .btn.btn-primary:disabled, .btn.btn-primary.disabled, button.btn.btn-primary:disabled, a.btn.btn-primary.disabled { background-color: var(--dis-fill) !important; background-image: none !important; border-color: var(--dis-fill) !important; color: var(--dis-ink) !important; } /* ------------------------------------------------------------------------------------------------ 7. BADGES AND CHIPS A status badge is a chip: a 14% wash of its own hue, a matching hairline, and the hue itself as ink. Solid saturated pills at 11px are the second loudest thing in an admin template after the accent rule, and a table of forty rows draws forty of them. ------------------------------------------------------------------------------------------------ */ .badge { border-radius: 999px !important; font-weight: 600; letter-spacing: .02em; } .badge.bg-primary, .badge.badge-primary { background: var(--brand-soft) !important; box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--pink) !important; } .badge.bg-success, .badge.badge-success { background: rgba(89, 194, 106, .16) !important; box-shadow: inset 0 0 0 1px rgba(89, 194, 106, .42); color: var(--green) !important; } .badge.bg-danger, .badge.badge-danger { background: rgba(224, 90, 82, .16) !important; box-shadow: inset 0 0 0 1px rgba(224, 90, 82, .42); color: var(--red) !important; } .badge.bg-warning, .badge.badge-warning { background: rgba(224, 163, 60, .16) !important; box-shadow: inset 0 0 0 1px rgba(224, 163, 60, .42); color: var(--orange) !important; } .badge.bg-info, .badge.badge-info { background: rgba(70, 182, 217, .16) !important; box-shadow: inset 0 0 0 1px rgba(70, 182, 217, .42); color: var(--cyan) !important; } .badge.bg-secondary, .badge.badge-secondary { background: var(--tint-2) !important; box-shadow: inset 0 0 0 1px var(--hairline-2); color: var(--foreground-muted) !important; } /* The notification count on the bell is the one badge that MUST be a solid dot — it is a count, it is 6px of text, and a wash at that size is unreadable. */ .badge.notification-badge, .header-dots .badge { background: var(--red) !important; box-shadow: 0 0 0 2px var(--background); color: #ffffff !important; } .dropdown-menu .dropdown-item, .dropdown-menu.show .dropdown-item { background: transparent !important; background-image: none !important; border-radius: var(--radius-sm) !important; color: var(--foreground) !important; transition: background-color .14s ease, color .14s ease; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu.show .dropdown-item:hover, .dropdown-menu.show .dropdown-item:focus { background: var(--tint-2) !important; background-image: none !important; color: var(--foreground) !important; } .dropdown-menu .dropdown-item.active, .dropdown-menu.show .dropdown-item.active { background: var(--brand-soft) !important; background-image: none !important; box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--foreground) !important; } .dropdown-menu .dropdown-header, .dropdown-menu.show .dropdown-header { color: var(--comment) !important; font-size: .6875rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; opacity: .86; /* 4.95:1 on the menu ground; .80 was 4.46:1, under AA */ } /* Dialogs. The header strip is one step up from the body so the title reads as a bar without a coloured band; the skeleton's accent-filled header made every dialog look like an alert. */ .modal-content, .rich-bootstrap-modal-panel .modal-content, .mrjun-block-dialog .modal-content { background: var(--surface-2) !important; background-image: none !important; border: 1px solid var(--hairline-2) !important; border-radius: var(--radius-lg) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .05), var(--elev-2) !important; color: var(--foreground) !important; } .modal-header, .modal-footer { background: var(--surface-3) !important; background-image: none !important; border-color: var(--hairline) !important; color: var(--foreground) !important; } .modal-title { color: var(--foreground) !important; font-weight: 600; letter-spacing: -.01em; } /* The veil: a deep, lightly frosted dim. A flat 50% black slab over a near-black page makes the page behind look switched off rather than behind. */ .modal-backdrop, .modal-backdrop.show { background-color: rgba(2, 4, 8, .62) !important; opacity: 1 !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .popover, .tooltip-inner { background: var(--surface-3) !important; border: 1px solid var(--hairline-2) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--elev-2) !important; color: var(--foreground) !important; } /* ------------------------------------------------------------------------------------------------ 9. THE ACCOUNT CLUSTER The header's right-hand end is the most looked-at 200px in the product and it was the least designed: a 42px photo sitting naked on the bar, a chevron that never moved, a menu banner in flat `bg-info`, and two hard #dee2e6 hairlines drawn by base.css that no skin ever overrode. SCOPED TO `.app-header`. The same TopUserProfilePanel is embedded by the PUBLIC SITE's own bar (SiteNavPlugin), which is not inside `.app-header` and dresses the account block from dokie-site.css — an unprefixed rule here would paint the app shell's chrome onto the site, and a box-shadow does not inherit, so the site's own reset could not undo it. ------------------------------------------------------------------------------------------------ */ .app-header .header-btn-lg .widget-content-left .btn-group > a.btn img.rounded-circle { box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--hairline-ui); transition: box-shadow .2s ease; } .app-header .header-btn-lg .widget-content-left .btn-group > a.btn:hover img.rounded-circle, .app-header .header-btn-lg .widget-content-left .btn-group.show > a.btn img.rounded-circle { box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--purple); } /* The trigger is an with no href, so it had no focus state at all — a real keyboard gap, not a nicety. */ .app-header .header-btn-lg .widget-content-left .btn-group > a.btn:focus-visible img.rounded-circle { box-shadow: 0 0 0 2px var(--background), 0 0 0 5px rgba(47, 143, 214, .55); outline: none; } /* The chevron: quiet, and it turns over when the menu is open, so the control says which state it is in instead of leaving the user to notice the menu. */ .app-header .header-btn-lg .widget-content-left .btn-group > a.btn .fa-angle-down { color: var(--comment); opacity: 1 !important; transition: transform .2s ease, color .16s ease; } .app-header .header-btn-lg .widget-content-left .btn-group > a.btn:hover .fa-angle-down, .app-header .header-btn-lg .widget-content-left .btn-group.show > a.btn .fa-angle-down { color: var(--foreground); } .app-header .header-btn-lg .widget-content-left .btn-group.show > a.btn .fa-angle-down { transform: rotate(180deg); } /* base.css:14712 dims the signed-in name to 80%. On a dark bar that is the one label the user looks for and it was the faintest thing on it. */ .app-header .header-user-info > .widget-heading { opacity: 1; color: var(--foreground); font-weight: 600; letter-spacing: .01em; } /* The account menu is the overlay treatment plus `overflow: hidden`, which is what finally lets the banner clip to the menu's own corners instead of squaring them off. */ .app-header .dropdown-menu.dropdown-menu-lg { overflow: hidden !important; border-radius: var(--radius) !important; padding: 0 !important; } .app-header .dropdown-menu.dropdown-menu-lg .dropdown-menu-header, .app-header .dropdown-menu.dropdown-menu-lg .dropdown-menu-header-inner { border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; } /* The banner. `bg-info` is written in the MARKUP, so the only way to reach it is to be more specific than a utility class — hence the two-class root. It becomes the brand sweep over the deep ground: the one place in the shell where the full gradient appears at size. */ .app-header .dropdown-menu.dropdown-menu-lg .dropdown-menu-header-inner.bg-info, .app-header .dropdown-menu.dropdown-menu-lg .dropdown-menu-header-inner { background: var(--w2-brand) !important; box-shadow: inset 0 -1px 0 0 var(--hairline-2); } .app-header .dropdown-menu.dropdown-menu-lg .menu-header-image { opacity: .18 !important; filter: grayscale(55%); } /* The second avatar sits ON the banner, so its ring is drawn in light, not in the accent. */ .app-header .dropdown-menu-lg .menu-header-content .widget-content-left img.rounded-circle { box-shadow: 0 0 0 2px rgba(255, 255, 255, .30); } .app-header .dropdown-menu-lg .menu-header-content .widget-heading { color: #ffffff; font-weight: 600; } /* base.css:12097 draws this divider as a solid #dee2e6 block — a bright bar across a dark menu. */ .app-header .dropdown-menu-lg .nav-item.nav-item-divider, .app-header .dropdown-menu .nav-item.nav-item-divider { background: var(--hairline) !important; } .app-header .dropdown-menu-lg .nav-item-header { color: var(--comment) !important; font-size: .6875rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; opacity: .8; } .app-header .dropdown-menu-lg .nav-item .nav-link { border-radius: var(--radius-sm); color: var(--foreground) !important; transition: background-color .14s ease; } .app-header .dropdown-menu-lg .nav-item .nav-link:hover { background: var(--tint-2) !important; } .app-header .dropdown-menu-lg .nav-item .nav-link i { color: var(--purple) !important; } /* base.css:2373 paints `.btn-focus` a hard-coded #444054 — an off-palette slab sitting on the banner in every skin. On a coloured ground the right treatment is glass, not another fill. */ .app-header .dropdown-menu-lg .dropdown-menu-header .btn.btn-focus, .app-header .dropdown-menu-lg .dropdown-menu-header .nct-logout-btn { background: rgba(255, 255, 255, .14) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, .30) !important; color: #ffffff !important; transition: background-color .18s ease, box-shadow .18s ease; } .app-header .dropdown-menu-lg .dropdown-menu-header .btn.btn-focus:hover, .app-header .dropdown-menu-lg .dropdown-menu-header .nct-logout-btn:hover { background: rgba(255, 255, 255, .24) !important; } /* ------------------------------------------------------------------------------------------------ 10. THE THEME SWITCH — colour Shape, size and the knob's travel live in themes/theme-common.css, because the control is the same object in every skin and only its palette changes. This block is Dark's palette for it. The knob is the ONE place in the header the brand sweep appears, which is what makes a 60px control read as part of the product rather than as a widget dropped into the bar. ------------------------------------------------------------------------------------------------ */ .nct-theme-switch__track { background: var(--surface-1); border-color: var(--hairline-ui); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); } .nct-theme-switch:hover .nct-theme-switch__track { background: var(--surface-2); border-color: var(--brand-line); } .nct-theme-switch:focus-visible .nct-theme-switch__track { outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 3px rgba(47, 143, 214, .40); } .nct-theme-switch__knob { background: var(--brand-sweep); box-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 0 12px rgba(47, 143, 214, .38); } .nct-theme-switch__ico { color: var(--comment); } /* The icon the knob is sitting on takes the ink that reads on the sweep; the other stays quiet. That pairing is the whole state indicator — no label, no colour change of the track. */ .nct-theme-switch.is-dark .nct-theme-switch__ico--moon, .nct-theme-switch.is-light .nct-theme-switch__ico--sun { color: var(--brand-ink); } /* ------------------------------------------------------------------------------------------------ 10b. THE QUERY BUILDER'S PANELS The filter / query / results / aggregation strips are the one large surface the sections above never touch, because they are built from their own classes rather than from `.card`. Left alone they kept the skeleton's grey plates and stood out as the only 2016 screen left in the product. Nothing structural here — the same plane, hairline and radius the rest of the file uses. The skeleton reaches some of these through `[id^="filter"] .card` at (0,2,0), so that ancestor is repeated rather than assumed away. ------------------------------------------------------------------------------------------------ */ .filter-panel, .query-panel, .results-panel, .aggregations-panel, .group-by-panel, .order-by-panel, .replacement-panel, .btn-actions-pane, [id^="filter"] .card, [id^="query"] .card { background: var(--surface-2) !important; background-image: none !important; border: 1px solid var(--hairline) !important; border-radius: var(--radius) !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .04) !important; color: var(--foreground); } .filter-panel .card-header, .query-panel .card-header, .results-panel .card-header, [id^="filter"] .card .card-header, [id^="query"] .card .card-header { background: transparent !important; background-image: none !important; border-bottom: 1px solid var(--hairline) !important; } /* ------------------------------------------------------------------------------------------------ 10c. THE AJAX WAIT Shape, size and behaviour are in themes/theme-common.css — the control is the same object in every skin. This is the one thing Dark does differently: the arc sweeps the product's own pair instead of a single accent, which is the same figure the primary button draws. `currentColor` in the shared rule becomes an explicit two-stop conic here. ------------------------------------------------------------------------------------------------ */ .ball-grid-pulse { filter: drop-shadow(0 0 16px rgba(47, 143, 214, .40)) drop-shadow(0 0 30px rgba(89, 194, 106, .16)); } .ball-grid-pulse::before { border-color: var(--hairline-ui); opacity: .55; } .ball-grid-pulse::after { background: conic-gradient(from 0turn, transparent 0turn 0.04turn, #2f8fd6 0.34turn, #59c26a 0.68turn, transparent 0.96turn); } /* The veil is TOKENS here, not a colour. The previous value was `rgba(2,4,8,.58)`, reasoned as "the ground is already near-black so the wash has to be deeper" — which is exactly backwards. Over the panel `#0c1422` that composites to `#060b13`, darker than the page ground itself, so the blocked region became the blackest rectangle on screen and everything inside it was crushed flat. There is no headroom below near-black; dimming has to come from `brightness()` on the backdrop, and what is left on top has to be a LIGHT film or the layer reads as an absence rather than as glass. Mechanism lives in theme-common.css; these are Dark's numbers. */ :root { --wait-veil: rgba(140, 178, 224, .055); --wait-veil-flat: rgba(6, 10, 18, .55); --wait-dim: .70; --wait-sat: 78%; --wait-sweep: rgba(160, 200, 240, .06); } @media (prefers-reduced-motion: reduce) { .ball-grid-pulse::after { background: none; border-color: var(--purple); } } /* ------------------------------------------------------------------------------------------------ 11. SCROLLBARS, SELECTION, FOCUS ------------------------------------------------------------------------------------------------ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(150, 184, 219, .18); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(150, 184, 219, .32); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-width: thin; scrollbar-color: rgba(150, 184, 219, .22) transparent; } ::selection { background: rgba(47, 143, 214, .35); color: var(--foreground); } /* base.css ends with `a, button, .btn { outline: none !important }`, so a keyboard user has no focus indicator anywhere in the product. Putting it back needs `!important` for the same reason it was lost. `:focus-visible` (not `:focus`) keeps it off mouse clicks. */ a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--purple) !important; outline-offset: 2px !important; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------------------------------------ 12. REDUCED MOTION Everything this section animates is decoration — a knob sliding, a chevron turning, a button lifting 1px. None of it carries meaning that the end state does not, so all of it goes. ------------------------------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .nct-theme-switch__knob, .nct-theme-switch__track, .nct-theme-switch__ico, .btn, .card, .nav-tabs .nav-link, .app-sidebar .vertical-nav-menu ul > li > a, .app-header .header-btn-lg .widget-content-left .btn-group > a.btn img.rounded-circle, .app-header .header-btn-lg .widget-content-left .btn-group > a.btn .fa-angle-down, .form-control, .dropdown-menu .dropdown-item { transition: none !important; } .btn:active { transform: none; } } /* ------------------------------------------------------------------------------------------------ 13. FORCED COLORS (Windows high contrast) In this mode the OS supplies every colour and our washes collapse to the same system ink, so the surfaces that were told apart by a 14% tint stop being told apart at all. Give the ones that MUST stay separable a real border, which forced-colors does honour. ------------------------------------------------------------------------------------------------ */ @media (forced-colors: active) { .card, .modal-content, .dropdown-menu, .dropdown-menu.show, .nct-theme-switch__track, .form-control, .form-select { border: 1px solid CanvasText !important; } .nct-theme-switch__knob { background: Highlight !important; forced-color-adjust: none; } /* The primary button is the one control this mode breaks outright: forced-colors drops background-image and forces the text to CanvasText, so a dark-ink-on-ramp button becomes dark text on the canvas — an invisible Save. Hand it back the system's own button colours and, again, a real border, which is the only thing that still separates it from the page. */ .btn-primary, button.btn-primary, a.btn-primary { forced-color-adjust: none; background: ButtonFace !important; background-image: none !important; color: ButtonText !important; border: 1px solid ButtonText !important; box-shadow: none !important; } .btn-primary:focus-visible, button.btn-primary:focus-visible, a.btn-primary:focus-visible { outline: 2px solid Highlight !important; } } /* ================================================================================================ RUNG TOKENS — dark The button system lives in theme-common.css ("RUNG"); this is the only thing that differs per skin. Twelve surface/state values plus six per role. Declared last so they win outright, and declared as BAKED opaque colours rather than runtime alphas — an alpha composites against whatever happens to be behind it, which is why `btn-secondary` used to render as four different colours on four different grounds. --w3-* all sit at ONE luminance inside this skin (L3 0.660), so a role can change hue and chroma but can never buy weight. Everything was solved against the BINDING SURFACE — the hardest ground a button lands on, the raised/modal panel --srf-2 — which is why nothing degrades inside a dialog. ================================================================================================ */ :root { --srf-0: #080e19; --srf-1: #101b2c; --srf-2: #16243a; --srf-3: #1c2f49; --edge-ui: #637891; --ink-1: #eaf1f8; --ink-2: #828e99; --dis-fill: #282f36; --dis-ink: #9098a0; --dis-edge: #33393f; --focus: #cfe6ff; --btn-radius: 8px; /* brand's W3 is the ramp's own head, so the token and --btn-ramp agree by construction */ --w3-brand: #3e9be3; --w3-brand-hv: #3e9be3; --ink-on-brand: #04121d; --w2-brand: #193450; --edge-brand: #477296; --ink-brand: #56aaef; --w3-negative: #ed5a52; --w3-negative-hv: #ec576f; --ink-on-negative: #120403; --w2-negative: #3c2834; --edge-negative: #975f59; --ink-negative: #e98177; --w3-positive: #47aa59; --w3-positive-hv: #08ad70; --ink-on-positive: #020b03; --w2-positive: #1b3835; --edge-positive: #4d7852; --ink-positive: #64b66f; --w3-caution: #c18500; --w3-caution-hv: #b48c00; --ink-on-caution: #0f0600; --w2-caution: #333023; --edge-caution: #87693a; --ink-caution: #cf9533; --w3-info: #00a6ad; --w3-info-hv: #12a4ba; --ink-on-info: #000b0d; --w2-info: #0d3746; --edge-info: #2a797d; --ink-info: #27b5bb; } /* REMOVED: the per-family icon-ink table. It painted the glyph inside a filled button with the light foreground while the label kept the dark ink — measured 1.6-2.6:1 for the icon beside 5.9-8.7:1 for its own text, i.e. the thinnest stroke in the button got the worst contrast in the button. Worse, it flattened the row-action glyphs to within 1 JND of each other, so a table's DELETE was not red. `.btn > i { color: currentColor }` in theme-common.css does the whole job: a glyph is part of the label and takes the label's colour. These rules had to be deleted rather than overridden — several are (0,1,1), which TIES the shared rule, and the skin loads later. */ /* REMOVED: this skin's private toastr rules. Every alert in the product is drawn by the shared TOASTS layer in theme-common.css now, off the same role tokens the buttons use. What stood here was a private copy per skin, and they had drifted into two different wrong answers: dark painted a muted panel but left the ink at `var(--background)` — near-black text on a dark green panel — while the other four painted a fully saturated 2013-style slab with white ink, several of which failed contrast outright (white on #f7b924 measures 1.9:1). */