/* PQ-NAS global theme tokens Applied via: set by /static/theme.js Tokens used across pages today: --bg, --fg, --fg-dim, --panel, --panel2, --border, --border2, --shadow, --radius, --radius2, --ok, --warn, --err or --fail, --info RGB helpers: --fg-rgb, --warn-rgb, --fail-rgb, --err-rgb, --info-rgb (so pages can do rgba(var(--fg-rgb),0.22)) */ /* ============================== Noto Sans webfont ============================== */ @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; src: url("/static/fonts/NotoSans-VariableFont_wdth-wght.woff2") format("woff2"); } @font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; src: url("/static/fonts/NotoSans-Italic-VariableFont_wdth-wght.woff2") format("woff2"); } :root{ /* default (dark) */ --bg:#050712; --fg:#00f0f8; --fg-dim: rgba(0,240,248,0.74); --ui_is_dark: 1; --panel: rgba(255,255,255,0.03); --panel2: rgba(0,0,0,0.28); --border: rgba(0,240,248,0.22); --border2: rgba(0,240,248,0.12); --shadow: 0 18px 70px rgba(0,0,0,0.55); --radius: 18px; --radius2: 22px; --ok: rgba(0,240,248,0.95); --warn: rgba(255,190,0,0.95); --err: rgba(255,90,90,0.95); --fail: rgba(255,90,90,0.95); --info: rgba(100,181,255,0.95); /* RGB helpers */ --fg-rgb: 0,240,248; --warn-rgb: 255,190,0; --fail-rgb: 255,90,90; --err-rgb: 255,90,90; --info-rgb: 100,181,255; /* form fields (defaults) */ --field-bg: rgba(255,255,255,0.10); --field-bg2: rgba(255,255,255,0.14); --field-fg: rgba(var(--fg-rgb),0.95); --field-ph: rgba(var(--fg-rgb),0.55); --field-border: rgba(var(--fg-rgb),0.22); --field-border2: rgba(var(--fg-rgb),0.35); --field-focus-ring: rgba(var(--fg-rgb),0.14); /* charts */ --chart_rx: var(--ok); --chart_tx: var(--warn); --chart_grid: var(--border2); /* toast / popups */ --toast-bg: rgba(0,0,0,0.78); --toast-border: var(--border); --toast-fg: var(--fg); --toast-shadow: var(--shadow); --sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* ----------------------- BRIGHT (noticeably brighter) ----------------------- */ html[data-theme="bright"]{ --bg:#f5f7ff; --fg:#0b1020; --fg-dim: rgba(11,16,32,0.72); --ui_is_dark: 0; --panel: rgba(0,0,0,0.03); --panel2: rgba(0,0,0,0.06); --border: rgba(0,0,0,0.16); --border2: rgba(0,0,0,0.10); --shadow: 0 14px 50px rgba(0,0,0,0.12); /* status colors can stay, but use rgb helpers for mixing */ --ok: rgba(0,120,140,0.95); --warn: rgba(190,120,0,0.95); --err: rgba(190,40,40,0.95); --fail: rgba(190,40,40,0.95); --info: rgba(40,110,200,0.95); --fg-rgb: 11,16,32; --warn-rgb: 190,120,0; --fail-rgb: 190,40,40; --err-rgb: 190,40,40; --info-rgb: 40,110,200; /* optional: fields in light mode */ --field-bg: rgba(0,0,0,0.03); --field-bg2: rgba(0,0,0,0.05); --field-fg: rgba(11,16,32,0.92); --field-ph: rgba(11,16,32,0.50); --field-border: rgba(0,0,0,0.18); --field-border2: rgba(0,0,0,0.26); --field-focus-ring: rgba(40,110,200,0.18); --toast-bg: rgba(255,255,255,0.92); --toast-border: rgba(0,0,0,0.18); --toast-fg: rgba(11,16,32,0.92); --toast-shadow: 0 14px 50px rgba(0,0,0,0.12); } /* ------------------------------------------------------- BRIGHT (lifted dark): keep CPUNK vibe, just lighter ------------------------------------------------------- */ html[data-theme="bright"] body{ /* override pages that hardcode #04050f in backgrounds */ background: radial-gradient(1200px 700px at 18% 8%, rgba(var(--fg-rgb),0.08), transparent 55%), radial-gradient(1000px 700px at 82% 12%, rgba(var(--fg-rgb),0.05), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.06), var(--bg)) !important; } /* make “glass” a bit more solid, but NOT win-classic opaque */ html[data-theme="bright"] .sidebar, html[data-theme="bright"] .workspace, html[data-theme="bright"] .pane, html[data-theme="bright"] .statusCard, html[data-theme="bright"] .tableWrap{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)) !important; border-color: rgba(var(--fg-rgb),0.18) !important; box-shadow: 0 18px 70px rgba(0,0,0,0.38) !important; } /* headers should lift slightly (still dark glass) */ html[data-theme="bright"] .topbar, html[data-theme="bright"] thead th{ background: rgba(0,0,0,0.16) !important; border-bottom-color: rgba(var(--fg-rgb),0.12) !important; } /* keep buttons glassy */ html[data-theme="bright"] .btn:not(.danger), html[data-theme="bright"] .navbtn{ background: rgba(0,0,0,0.16) !important; border-color: rgba(var(--fg-rgb),0.18) !important; } html[data-theme="bright"] .btn:not(.danger):hover, html[data-theme="bright"] .navbtn:hover{ background: rgba(var(--fg-rgb),0.08) !important; border-color: rgba(var(--fg-rgb),0.26) !important; } /* ----------------------- CPUNK ORANGE ----------------------- */ html[data-theme="cpunk_orange"]{ --bg:#120b06; --fg:#ff7a18; --fg-dim: rgba(255,122,24,0.72); --ui_is_dark: 1; --panel: rgba(255,255,255,0.05); --panel2: rgba(0,0,0,0.30); --border: rgba(255,122,24,0.32); --border2: rgba(255,122,24,0.18); --shadow: 0 18px 70px rgba(0,0,0,0.55); --ok: rgba(255,122,24,0.95); --warn: rgba(255,190,0,0.95); --err: rgba(255,90,90,0.95); --fail: rgba(255,90,90,0.95); --info: rgba(255,155,80,0.95); --fg-rgb: 255,122,24; --warn-rgb: 255,190,0; --fail-rgb: 255,90,90; --err-rgb: 255,90,90; --info-rgb: 255,155,80; --chart_rx: rgba(255,122,24,0.95); --chart_tx: rgba(255,190,0,0.95); --chart_grid: rgba(255,122,24,0.18); } /* ----------------------- WINDOWS CLASSIC (improved) Goal: - neutral gray window chrome - subtle bevel borders - restrained “system blue” accents - kill neon fog + cyan hardcoded text where possible ----------------------- */ html[data-theme="win_classic"]{ /* base */ --bg:#cfcfcf; /* page background */ --fg:#000000; /* text */ --fg-dim: rgba(0,0,0,0.70); --ui_is_dark: 0; /* surfaces */ --panel:#e6e6e6; /* main surface */ --panel2:#f2f2f2; /* raised surface */ /* bevel-ish borders */ --border: rgba(0,0,0,0.40); /* dark edge */ --border2: rgba(255,255,255,0.85); /* highlight edge */ --shadow: 0 8px 22px rgba(0,0,0,0.12); /* keep your rounded corners, but slightly tighter looks more “classic” */ --radius: 14px; --radius2: 18px; /* status colors (muted) */ --ok:#0a6b2b; --ok: rgba(10,107,43,0.95); --warn:#9a6b00; --err: #5f1515; --fail: #5f1515; --info:#0b4ea2; /* system-ish blue */ /* RGB helpers */ --fg-rgb: 0,0,0; --warn-rgb: 154,107,0; /* RGB used for translucent backgrounds */ --fail-rgb: 80,18,18; --err-rgb: 80,18,18; --info-rgb: 11,78,162; /* charts */ --chart_rx: #0b4ea2; --chart_tx: #9a6b00; --chart_grid: rgba(0,0,0,0.18); } /* Win classic: kill modern effects */ html[data-theme="win_classic"] *{ text-shadow:none !important; backdrop-filter:none !important; } /* -------------------------------------------------------------------------- Admin Audit: expanded JSON row is too dark in win_classic admin_audit.html uses inline dark rgba(0,0,0,...) surfaces; override them. -------------------------------------------------------------------------- */ html[data-theme="win_classic"] .detailRow td{ /* the whole expanded row background */ background: linear-gradient(180deg, var(--panel2), var(--panel)) !important; border-bottom: 1px solid rgba(0,0,0,0.14) !important; } html[data-theme="win_classic"] .detail pre{ /* the JSON box */ background: rgba(255,255,255,0.65) !important; color: rgba(0,0,0,0.88) !important; border: 1px solid rgba(0,0,0,0.18) !important; } /* Optional: make the right-side action area match (buttons already handled globally) */ html[data-theme="win_classic"] .detailActions .small{ color: rgba(0,0,0,0.70) !important; } /* Replace the “neon fog” page body backgrounds */ html[data-theme="win_classic"] body{ background: linear-gradient(180deg, #eeeeee, var(--bg)) !important; color: var(--fg) !important; } /* Common surfaces: make them look like windows panels */ html[data-theme="win_classic"] .sidebar, html[data-theme="win_classic"] .workspace, html[data-theme="win_classic"] .card, html[data-theme="win_classic"] .statusCard, html[data-theme="win_classic"] .tableWrap{ background: linear-gradient(180deg, var(--panel2), var(--panel)) !important; box-shadow: var(--shadow) !important; border: 1px solid var(--border) !important; } /* Top bars / headers */ html[data-theme="win_classic"] .topbar, html[data-theme="win_classic"] .card .hd{ background: linear-gradient(180deg, #f6f6f6, #dedede) !important; border-bottom: 1px solid var(--border) !important; } /* Bevel hint: add inner highlight line */ html[data-theme="win_classic"] .sidebar, html[data-theme="win_classic"] .workspace, html[data-theme="win_classic"] .card, html[data-theme="win_classic"] .statusCard, html[data-theme="win_classic"] .tableWrap{ outline: 1px solid var(--border2) !important; outline-offset: -2px !important; } /* Fix the “cyan labels” coming from page-local rgba(0,240,248,...) */ html[data-theme="win_classic"] .sectionLabel, html[data-theme="win_classic"] .small, html[data-theme="win_classic"] .card .hd .h, html[data-theme="win_classic"] .crumbs .sub, html[data-theme="win_classic"] .brand .sub, html[data-theme="win_classic"] .note, html[data-theme="win_classic"] .kbd{ color: rgba(0,0,0,0.72) !important; border-color: rgba(0,0,0,0.22) !important; } /* Links */ html[data-theme="win_classic"] a{ color: var(--info) !important; } html[data-theme="win_classic"] a:hover{ text-shadow:none !important; text-decoration: underline !important; } /* Buttons / inputs */ html[data-theme="win_classic"] .btn:not(.danger), html[data-theme="win_classic"] .navbtn, html[data-theme="win_classic"] .input, html[data-theme="win_classic"] .pill, html[data-theme="win_classic"] .toggle{ color: var(--fg) !important; background: linear-gradient(180deg, #f2f2f2, #d2d2d2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; } /* Win classic: form fields use field tokens (do NOT look like buttons) */ html[data-theme="win_classic"] input, html[data-theme="win_classic"] textarea, html[data-theme="win_classic"] select{ background: linear-gradient(180deg, var(--field-bg2), var(--field-bg)) !important; color: var(--field-fg) !important; border: 1px solid var(--field-border) !important; box-shadow: none !important; } html[data-theme="win_classic"] input::placeholder, html[data-theme="win_classic"] textarea::placeholder{ color: var(--field-ph) !important; } /* Slight pressed effect on active */ html[data-theme="win_classic"] .btn:active, html[data-theme="win_classic"] .navbtn:active{ background: linear-gradient(180deg, #cfcfcf, #e8e8e8) !important; } /* Active nav should be “system highlight” but not neon */ html[data-theme="win_classic"] .navbtn.active{ border-color: rgba(11,78,162,0.55) !important; background: linear-gradient(180deg, #e9f2ff, #d8e8ff) !important; } /* Hover: simple, not glowy */ html[data-theme="win_classic"] .navbtn:hover, html[data-theme="win_classic"] .btn:hover, html[data-theme="win_classic"] tbody tr:hover{ background: #e7e7e7 !important; } /* Pills should stop looking “teal neon” */ html[data-theme="win_classic"] .pill{ background: #e6e6e6 !important; } html[data-theme="win_classic"] .pill .k, html[data-theme="win_classic"] .pill .v{ color: rgba(0,0,0,0.80) !important; } html[data-theme="win_classic"] .pill.ok{ border-color: rgba(10,107,43,0.55) !important; background: #e9f6ee !important; } html[data-theme="win_classic"] .pill.warn{ border-color: rgba(154,107,0,0.55) !important; background: #f8f1e4 !important; } html[data-theme="win_classic"] .pill.fail{ border-color: rgba(138,29,29,0.55) !important; background: #f7e8e8 !important; } html[data-theme="win_classic"] .pill.info{ border-color: rgba(11,78,162,0.55) !important; background: #e9f2ff !important; } /* Tables */ html[data-theme="win_classic"] thead th{ color: rgba(0,0,0,0.75) !important; background: #e4e4e4 !important; border-bottom: 1px solid rgba(0,0,0,0.22) !important; } html[data-theme="win_classic"] tbody td{ border-bottom: 1px solid rgba(0,0,0,0.10) !important; } /* ============================================ Danger button — must look red in ALL themes ============================================ */ .btn.danger{ color: #fff !important; background: linear-gradient( 180deg, rgba(var(--fail-rgb),0.95), rgba(var(--fail-rgb),0.80) ) !important; border: 1px solid rgba(var(--fail-rgb),0.95) !important; box-shadow: 0 0 0 1px rgba(var(--fail-rgb),0.35), 0 6px 18px rgba(var(--fail-rgb),0.25); } .btn.danger:hover{ background: linear-gradient( 180deg, rgba(var(--fail-rgb),1.0), rgba(var(--fail-rgb),0.90) ) !important; border-color: rgba(var(--fail-rgb),1.0) !important; } .btn.danger:active{ background: linear-gradient( 180deg, rgba(var(--fail-rgb),0.85), rgba(var(--fail-rgb),1.0) ) !important; } /* -------------------------------------------------------------------------- File Manager (filemgr) app: fix modal + context menu surfaces in win_classic These elements are app-local (IDs), so global .card rules don't catch them. -------------------------------------------------------------------------- */ html[data-theme="win_classic"] #propsModal .card{ background: linear-gradient(180deg, var(--panel2), var(--panel)) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; outline: 1px solid var(--border2) !important; outline-offset: -2px !important; } html[data-theme="win_classic"] #propsModal .hdr{ background: linear-gradient(180deg, #f6f6f6, #dedede) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="win_classic"]{ --fm_modal_overlay: rgba(0,0,0,0.18); } html[data-theme="win_classic"] #propsBody .k{ color: rgba(0,0,0,0.72) !important; } html[data-theme="win_classic"] #propsBody .v{ color: rgba(0,0,0,0.92) !important; } /* Raw JSON details block */ html[data-theme="win_classic"] #propsBody details > summary{ color: rgba(0,0,0,0.92) !important; cursor: pointer; user-select: none; } html[data-theme="win_classic"] #propsBody pre.pre{ background: rgba(0,0,0,0.04) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 10px; padding: 10px 12px; } /* Right-click context menu */ html[data-theme="win_classic"] #ctxMenu{ background: linear-gradient(180deg, var(--panel2), var(--panel)) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; box-shadow: 0 14px 50px rgba(0,0,0,0.18) !important; outline: 1px solid var(--border2) !important; outline-offset: -2px !important; } html[data-theme="win_classic"] #ctxMenu .ctxItem{ color: rgba(0,0,0,0.92) !important; } html[data-theme="win_classic"] #ctxMenu .ctxItem:hover{ background: rgba(0,0,0,0.06) !important; } html[data-theme="win_classic"] #ctxMenu .ctxSep{ background: rgba(0,0,0,0.14) !important; } /* ========================================================= Elevated surfaces for dialogs / sheets / menus Used to stop bright/orange/dark themes from becoming too transparent in file manager modals and custom dialogs ========================================================= */ :root{ --overlay-bg: rgba(0,0,0,0.52); --elevated-bg: rgba(10,14,24,0.94); --elevated-bg2: rgba(14,20,32,0.98); --elevated-border: rgba(var(--fg-rgb),0.22); --elevated-border2: rgba(var(--fg-rgb),0.10); --elevated-shadow: 0 24px 80px rgba(0,0,0,0.58); --menu-bg: rgba(12,16,26,0.96); --menu-bg2: rgba(16,22,34,0.99); --menu-border: rgba(var(--fg-rgb),0.20); --menu-shadow: 0 18px 60px rgba(0,0,0,0.48); --elevated-soft: rgba(var(--fg-rgb),0.045); --elevated-soft-2: rgba(var(--fg-rgb),0.070); } html[data-theme="bright"]{ --overlay-bg: rgba(0,0,0,0.18); --elevated-bg: rgba(255,255,255,0.96); --elevated-bg2: rgba(248,250,255,0.995); --elevated-border: rgba(0,0,0,0.16); --elevated-border2: rgba(0,0,0,0.08); --elevated-shadow: 0 20px 60px rgba(0,0,0,0.16); --menu-bg: rgba(255,255,255,0.97); --menu-bg2: rgba(250,251,255,1); --menu-border: rgba(0,0,0,0.16); --menu-shadow: 0 16px 44px rgba(0,0,0,0.14); --elevated-soft: rgba(0,0,0,0.03); --elevated-soft-2: rgba(0,0,0,0.05); } html[data-theme="cpunk_orange"]{ --overlay-bg: rgba(0,0,0,0.48); --elevated-bg: rgba(24,14,8,0.95); --elevated-bg2: rgba(32,18,10,0.985); --elevated-border: rgba(255,122,24,0.28); --elevated-border2: rgba(255,122,24,0.14); --elevated-shadow: 0 24px 80px rgba(0,0,0,0.60); --menu-bg: rgba(26,15,8,0.97); --menu-bg2: rgba(34,20,11,0.99); --menu-border: rgba(255,122,24,0.24); --menu-shadow: 0 18px 60px rgba(0,0,0,0.52); --elevated-soft: rgba(255,122,24,0.05); --elevated-soft-2: rgba(255,122,24,0.08); } html[data-theme="win_classic"]{ --overlay-bg: rgba(0,0,0,0.18); --elevated-bg: #e6e6e6; --elevated-bg2: #f2f2f2; --elevated-border: rgba(0,0,0,0.40); --elevated-border2: rgba(255,255,255,0.85); --elevated-shadow: 0 8px 22px rgba(0,0,0,0.12); --menu-bg: #ececec; --menu-bg2: #f6f6f6; --menu-border: rgba(0,0,0,0.40); --menu-shadow: 0 10px 24px rgba(0,0,0,0.14); --elevated-soft: rgba(0,0,0,0.035); --elevated-soft-2: rgba(0,0,0,0.055); } /* ========================================================= File manager dialogs + custom versions dialog Use !important because file_versions_ui.css may define its own surfaces ========================================================= */ html[data-theme] .modal, html[data-theme] .pqfvRoot{ background: var(--overlay-bg) !important; } html[data-theme] .modalCard, html[data-theme] .pqfvPanel{ color: var(--fg) !important; background: linear-gradient(180deg, var(--elevated-bg2), var(--elevated-bg)) !important; border: 1px solid var(--elevated-border) !important; box-shadow: var(--elevated-shadow) !important; backdrop-filter: none !important; } html[data-theme] .modalHead, html[data-theme] .pqfvHead{ background: linear-gradient( 180deg, color-mix(in srgb, var(--elevated-bg2) 88%, white 12%), var(--elevated-bg) ) !important; border-bottom: 1px solid var(--elevated-border2) !important; backdrop-filter: none !important; } html[data-theme] .ctxMenu{ color: var(--fg) !important; background: linear-gradient(180deg, var(--menu-bg2), var(--menu-bg)) !important; border: 1px solid var(--menu-border) !important; box-shadow: var(--menu-shadow) !important; backdrop-filter: none !important; } /* File versions inner blocks */ html[data-theme] .pqfvStatus{ background: transparent !important; color: var(--fg) !important; } html[data-theme] .pqfvEmpty, html[data-theme] .pqfvRow{ color: var(--fg) !important; background: var(--elevated-soft) !important; border: 1px solid var(--elevated-border2) !important; } html[data-theme] .pqfvRow:hover{ background: var(--elevated-soft-2) !important; } html[data-theme] .pqfvRow.deleted{ background: rgba(var(--warn-rgb),0.08) !important; border-color: rgba(var(--warn-rgb),0.22) !important; } /* Keep classic crisp */ html[data-theme="win_classic"] .pqfvPanel, html[data-theme="win_classic"] .ctxMenu, html[data-theme="win_classic"] .modalCard{ outline: 1px solid var(--elevated-border2) !important; outline-offset: -2px !important; } /* ========================================================= Storage (RAID) manager dialogs + custom dialogs ========================================================= */ html[data-theme] .uiOverlay{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--overlay-bg) !important; z-index: 9999; backdrop-filter: none !important; } html[data-theme] .uiOverlay.show{ display: flex; } html[data-theme] .uiDialog{ color: var(--fg) !important; background: linear-gradient(180deg, var(--elevated-bg2), var(--elevated-bg)) !important; border: 1px solid var(--elevated-border) !important; box-shadow: var(--elevated-shadow) !important; backdrop-filter: none !important; } html[data-theme] .uiDialogHeader{ background: linear-gradient( 180deg, color-mix(in srgb, var(--elevated-bg2) 88%, white 12%), var(--elevated-bg) ) !important; border-bottom: 1px solid var(--elevated-border2) !important; } html[data-theme] .raidDialogShell{ width: min(980px, 96vw); max-height: 90vh; overflow: auto; border-radius: 18px; padding: 14px; } html[data-theme] .raidDialogShell.compact{ width: min(860px, 94vw); } html[data-theme] .raidDialogHeader{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } html[data-theme] .raidDialogInnerCard{ background: var(--elevated-soft) !important; border: 1px solid var(--elevated-border2) !important; border-radius: 16px; } html[data-theme] .uiToast{ border: 1px solid var(--toast-border) !important; background: var(--toast-bg) !important; box-shadow: var(--toast-shadow) !important; color: var(--toast-fg) !important; border-radius: 14px; } /* RAID dialog internals: stop page-local glass styles from showing through */ html[data-theme] .uiDialog .card, html[data-theme] .uiDialog .raidDialogInnerCard, html[data-theme] .uiDialog details{ background: var(--elevated-soft) !important; border: 1px solid var(--elevated-border2) !important; color: var(--fg) !important; backdrop-filter: none !important; } html[data-theme] .uiDialog pre{ background: linear-gradient(180deg, var(--elevated-bg2), var(--elevated-soft)) !important; border: 1px solid var(--elevated-border2) !important; color: var(--fg) !important; backdrop-filter: none !important; } html[data-theme] .uiDialog input, html[data-theme] .uiDialog select, html[data-theme] .uiDialog textarea{ background: linear-gradient(180deg, var(--field-bg2), var(--field-bg)) !important; color: var(--field-fg) !important; border: 1px solid var(--field-border) !important; box-shadow: none !important; } html[data-theme] .uiDialog input::placeholder, html[data-theme] .uiDialog textarea::placeholder{ color: var(--field-ph) !important; } html[data-theme] .uiDialog .pill, html[data-theme] .uiDialog .badge{ background: var(--elevated-soft) !important; border-color: var(--elevated-border2) !important; color: var(--fg) !important; } html[data-theme] .uiDialog .pbar{ background: var(--elevated-soft) !important; border: 1px solid var(--elevated-border2) !important; } html[data-theme] .uiDialog label{ color: var(--fg) !important; } /* ========================================================== FORCE .btn.danger to be red in ALL themes (must be AFTER theme-specific .btn { ... !important } rules) ========================================================== */ html[data-theme] button.btn.danger, html[data-theme] .btn.danger{ color: #fff !important; background: linear-gradient( 180deg, rgba(var(--fail-rgb), 0.98), rgba(var(--fail-rgb), 0.82) ) !important; border: 1px solid rgba(var(--fail-rgb), 0.95) !important; box-shadow: 0 8px 20px rgba(var(--fail-rgb), 0.22) !important; } html[data-theme] button.btn.danger:hover, html[data-theme] .btn.danger:hover{ background: linear-gradient( 180deg, rgba(var(--fail-rgb), 1.0), rgba(var(--fail-rgb), 0.90) ) !important; border-color: rgba(var(--fail-rgb), 1.0) !important; } html[data-theme] button.btn.danger:active, html[data-theme] .btn.danger:active{ background: linear-gradient( 180deg, rgba(var(--fail-rgb), 0.85), rgba(var(--fail-rgb), 1.0) ) !important; }