/* ========================================================================== Ndore skin — signed-in dashboard -------------------------------------------------------------------------- The dashboard's identity lives almost entirely in the --eg-* custom properties on body.dark-theme (117 token references against 33 hardcoded values), so a different look does not need a second copy of the 101 blade views — it needs a different set of tokens. This file redefines them in the ndoretv palette and patches the handful of places that hardcode a colour. Loaded after dashboard-theme.css and only when Settings > Global > Dashboard Skin is "ndore", which also adds .nd-skin to . Palette: #071018 ground · #10212b surface · #15303d raised · #284554 line #f3f7fa ink · #9cb2bf muted · #ffbf69 amber · #73f8df mint ========================================================================== */ body.dark-theme.nd-skin { /* Ground and surfaces */ --eg-ground: #071018; --eg-scrim-rgb: 7, 16, 24; --eg-glass-rgb: 16, 33, 43; --eg-panel: rgba(16, 33, 43, 0.92); --eg-panel-edge: #284554; --eg-row: rgba(255, 255, 255, 0.04); --eg-row-edge: rgba(40, 69, 84, 0.9); --eg-rule: rgba(40, 69, 84, 0.8); /* Header and bar */ --eg-header: rgba(7, 16, 24, 0.94); --eg-header-edge: rgba(255, 191, 105, 0.24); --eg-bar: rgba(16, 33, 43, 0.9); --eg-bar-edge: rgba(40, 69, 84, 0.95); /* Accents — amber leads, mint supports, mirroring the landing theme */ --eg-gold: #ffbf69; --eg-gold-hi: #ffd6a0; --eg-gold-fill: rgba(255, 191, 105, 0.14); --eg-gold-edge: rgba(255, 191, 105, 0.38); --eg-teal: #73f8df; --eg-teal-fill: rgba(115, 248, 223, 0.12); --eg-teal-edge: rgba(115, 248, 223, 0.32); /* Ledger states. The eagle's pink reads as a foreign hue beside amber, so debits take a warm coral; the waiting state is the skin's own amber, which is already the "attention, not yet settled" colour here. */ --eg-rose: #ff9d8a; --eg-rose-fill: rgba(255, 157, 138, 0.14); --eg-rose-edge: rgba(255, 157, 138, 0.36); --eg-warn: #ffbf69; --eg-warn-fill: rgba(255, 191, 105, 0.14); --eg-warn-edge: rgba(255, 191, 105, 0.38); /* Type */ --eg-ink: #f3f7fa; --eg-ink-2: #dbe6ee; --eg-ink-dim: #9cb2bf; --eg-ink-mute: rgba(243, 247, 250, 0.74); --eg-on-bright: #071018; --eg-font: Geist, Helvetica, Arial, sans-serif; } /* The page background is set on , outside the token block. */ html:has(body.nd-skin) { background-color: #071018; } /* -------------------------------------------------------------------------- Hardcoded leftovers. Each of these writes the navy literal rather than a token, so they need restating against the new ground. -------------------------------------------------------------------------- */ .nd-skin .eg-bar-chat-inner, .nd-skin .eg-auth-mark, .nd-skin .eg-auth-cta, .nd-skin .eg-switch input:checked + .eg-switch-track .eg-switch-knob { color: #071018; } .nd-skin .eg-switch input:checked + .eg-switch-track .eg-switch-knob { background: #071018; } /* Gold gradients: amber, not the eagle's brass. */ .nd-skin .eg-auth-cta, .nd-skin .eg-bar-chat-inner { background: linear-gradient(145deg, #ffd6a0, #ffbf69); } /* Photo scrims fade to the ndore ground rather than the navy. */ .nd-skin .eg-photo-band::after { background: linear-gradient(180deg, rgba(7, 16, 24, 0) 0%, #071018 100%); } /* Phone only. Unscoped, this rule (0,2,1) also outranked the desktop scrim in dashboard-theme.css (0,1,1 inside a media query -- media queries carry no specificity), so the wide-screen auth layout never got its own treatment under this skin. The bound keeps it to the layout it was written for. */ @media (max-width: 899.98px) { .nd-skin .eg-auth-photo::after { background: linear-gradient(180deg, rgba(7, 16, 24, 0) 0%, #071018 82%); } } /* Form autofill and native select popups. Scoped to the sheet theme specifically, not .eg-auth generally: the card theme's fields are translucent black (rgba(0,0,0,0.28)) rather than this skin's navy-teal, and #10212b would otherwise win there too -- this selector (0,3,0) outranks the base card-theme autofill rule in dashboard-theme.css (0,2,0) regardless of file order, so without the bound it would silently override that rule's own colour instead of losing to it as intended. The card theme gets its own rule below. :has() extends the fix to the wrapper, not just the : the inset box-shadow trick only paints the input's own box, leaving the icon and the pill's own padding on the old background, so the fill visibly stopped partway across the field instead of covering it whole. */ .nd-skin .eg-auth--sheet .eg-input:has(input:-webkit-autofill) { background: #10212b; border-color: #10212b; } .nd-skin .eg-auth--sheet .eg-input input:-webkit-autofill, .nd-skin .eg-auth--sheet .eg-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #10212b inset; -webkit-text-fill-color: #f3f7fa; border-radius: 0; } .nd-skin .eg-auth--card .eg-input:has(input:-webkit-autofill) { background: #10141f; border-color: #10141f; } .nd-skin .eg-auth--card .eg-input input:-webkit-autofill, .nd-skin .eg-auth--card .eg-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #10141f inset; -webkit-text-fill-color: #f3f7fa; border-radius: 0; } .nd-skin .eg-auth .eg-input select option { background: #10212b; } /* -------------------------------------------------------------------------- Shape. The reference design is rounder than the eagle dashboard — pills for actions, 20px for panels — so the skin nudges radii as well as colour. -------------------------------------------------------------------------- */ .nd-skin .eg-card, .nd-skin .eg-panel, .nd-skin .eg-stat { border-radius: 20px; } .nd-skin .eg-bar-inner { border-radius: 26px; } .nd-skin .eg-btn, .nd-skin .eg-cta, .nd-skin .eg-auth-cta { border-radius: 999px; }