/* dark-modern theme — CoinPulse-inspired dark mode with electric blue glow. Designed against the variables in app.css; only overrides what differs. */ [data-theme="dark-modern"] { /* Palette — neutrals from Zinc, accents from Blue / Lime / Amber / Red. */ --bg: #09090b; /* root canvas */ --panel: #18181b; /* cards, modals */ --panel-2: #27272a; /* elevated surfaces, hover states */ --text: #fafafa; --muted: #a1a1aa; --accent: #2563eb; /* electric blue */ --accent-hover: #3b82f6; --border: #27272a; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; color-scheme: dark; } /* Typography: DM Sans body, Space Mono mono. Loaded via in each chrome page ; we just reference the family names here. */ [data-theme="dark-modern"] body, [data-theme="dark-modern"] input, [data-theme="dark-modern"] button, [data-theme="dark-modern"] select, [data-theme="dark-modern"] textarea { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; } [data-theme="dark-modern"] h1, [data-theme="dark-modern"] h2, [data-theme="dark-modern"] h3, [data-theme="dark-modern"] .brand a, [data-theme="dark-modern"] .version-pill, [data-theme="dark-modern"] code, [data-theme="dark-modern"] pre, [data-theme="dark-modern"] .pub-url, [data-theme="dark-modern"] kbd { font-family: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: 0.01em; } [data-theme="dark-modern"] h1 { font-size: 2rem; letter-spacing: 0.02em; } [data-theme="dark-modern"] h2 { font-size: 1.5rem; letter-spacing: 0.01em; } [data-theme="dark-modern"] h3 { font-size: 1.25rem; letter-spacing: 0.01em; } /* Cards + panels: keep base radius (8px) but apply the spec's elevated surface treatment on hover. */ [data-theme="dark-modern"] .card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="dark-modern"] .card:hover { border-color: #3f3f46; } /* Buttons — electric blue primary with glow, ghost variants quieter. */ [data-theme="dark-modern"] .btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); transition: background .15s, border-color .15s, box-shadow .18s ease; } [data-theme="dark-modern"] .btn:hover { background: #3f3f46; border-color: #52525b; } [data-theme="dark-modern"] .btn.primary { background: var(--accent); border-color: var(--accent); color: #fafafa; } [data-theme="dark-modern"] .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: 0 0 16px 0 rgb(37 99 235 / 0.35); } [data-theme="dark-modern"] .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } [data-theme="dark-modern"] .btn.ghost:hover { background: var(--panel-2); color: var(--text); } [data-theme="dark-modern"] .btn.danger, [data-theme="dark-modern"] .btn:disabled.danger { background: var(--danger); border-color: var(--danger); color: #fafafa; } [data-theme="dark-modern"] .btn.danger:hover { background: #dc2626; border-color: #dc2626; box-shadow: 0 0 14px 0 rgb(239 68 68 / 0.35); } /* Inputs: focus ring is a soft blue glow, not a 2px ring. */ [data-theme="dark-modern"] input, [data-theme="dark-modern"] select, [data-theme="dark-modern"] textarea { background: var(--panel); border: 1px solid #3f3f46; border-radius: 8px; color: var(--text); transition: border-color .15s, box-shadow .18s ease; } [data-theme="dark-modern"] input:hover, [data-theme="dark-modern"] select:hover, [data-theme="dark-modern"] textarea:hover { border-color: #52525b; } [data-theme="dark-modern"] input:focus, [data-theme="dark-modern"] select:focus, [data-theme="dark-modern"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0 transparent, 0 0 8px 0 rgb(37 99 235 / 0.35); } /* Badges — flat with subtle backgrounds derived from each role's accent. */ [data-theme="dark-modern"] .badge { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-weight: 500; letter-spacing: 0.02em; } [data-theme="dark-modern"] .users-table .badge.admin { background: rgb(37 99 235 / 0.12); border-color: rgb(37 99 235 / 0.35); color: #93c5fd; } [data-theme="dark-modern"] .users-table .badge.member { background: rgb(132 204 22 / 0.12); border-color: rgb(132 204 22 / 0.35); color: #bef264; } [data-theme="dark-modern"] .users-table .badge.guest { background: rgb(161 161 170 / 0.12); border-color: rgb(63 63 70 / 0.55); color: #a1a1aa; } [data-theme="dark-modern"] .users-table .badge.active { background: rgb(34 197 94 / 0.12); border-color: rgb(34 197 94 / 0.35); color: #86efac; } [data-theme="dark-modern"] .users-table .badge.pending { background: rgb(245 158 11 / 0.12); border-color: rgb(245 158 11 / 0.35); color: #fcd34d; } [data-theme="dark-modern"] .users-table .badge.expired, [data-theme="dark-modern"] .users-table .badge.revoked { background: rgb(239 68 68 / 0.12); border-color: rgb(239 68 68 / 0.35); color: #fca5a5; } [data-theme="dark-modern"] .badge.danger { background: rgb(239 68 68 / 0.12); border-color: rgb(239 68 68 / 0.35); color: #fca5a5; } /* Page-row backgrounds in lists. */ [data-theme="dark-modern"] .page-row { background: var(--panel); border: 1px solid var(--border); } [data-theme="dark-modern"] .page-row.archived { opacity: 0.65; } /* Topbar */ [data-theme="dark-modern"] .topbar { background: var(--panel); border-bottom: 1px solid var(--border); } [data-theme="dark-modern"] .version-pill { background: var(--panel-2); border-color: var(--border); color: var(--muted); font-size: .72rem; } [data-theme="dark-modern"] .version-pill:hover { color: var(--text); border-color: var(--accent); } /* Avatar dropdown */ [data-theme="dark-modern"] .avatar-dropdown { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 0 24px 0 rgb(0 0 0 / 0.6); } [data-theme="dark-modern"] .avatar-dropdown a:hover { background: var(--panel-2); } /* Admin sidebar — active item gets the electric-blue glow signature. */ [data-theme="dark-modern"] .admin-sidebar { background: var(--panel); border: 1px solid var(--border); } [data-theme="dark-modern"] .admin-sidebar nav a:hover { background: var(--panel-2); } [data-theme="dark-modern"] .admin-sidebar nav a.active { background: var(--accent); color: #fafafa; box-shadow: 0 0 16px 0 rgb(37 99 235 / 0.3); } /* Modals — soft blue elevation, no traditional drop shadow. */ [data-theme="dark-modern"] .modal-content { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 0 24px 0 rgb(37 99 235 / 0.18), 0 8px 32px 0 rgb(0 0 0 / 0.55); } /* Icon buttons in rows */ [data-theme="dark-modern"] .icon-btn:hover, [data-theme="dark-modern"] .icon-btn:focus-visible { background: var(--panel-2); border-color: var(--border); color: var(--text); outline: none; } [data-theme="dark-modern"] .icon-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fafafa; box-shadow: 0 0 12px 0 rgb(239 68 68 / 0.3); } [data-theme="dark-modern"] .icon-btn.restore:hover { background: var(--success); border-color: var(--success); color: #09090b; box-shadow: 0 0 12px 0 rgb(34 197 94 / 0.3); } /* Version glow override — use the theme accent (blue) instead of the default --accent (which is the same here, but be explicit). */ [data-theme="dark-modern"] .version-pill.new { border-color: var(--accent); animation: version-glow 1.6s ease-in-out infinite; } /* Dropzone */ [data-theme="dark-modern"] .dropzone { background: var(--panel); border: 1.5px dashed #3f3f46; border-radius: 12px; color: var(--muted); } [data-theme="dark-modern"] .dropzone:hover, [data-theme="dark-modern"] .dropzone.dragging, [data-theme="dark-modern"] .dropzone.has-file { border-color: var(--accent); background: var(--panel); color: var(--text); box-shadow: 0 0 16px 0 rgb(37 99 235 / 0.25); } [data-theme="dark-modern"] .dropzone-title { color: var(--text); } [data-theme="dark-modern"] .dropzone-filename { color: var(--success); } /* Tables — flat dividers, no row background hover */ [data-theme="dark-modern"] .users-table th { color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-size: .72rem; } [data-theme="dark-modern"] .users-table td, [data-theme="dark-modern"] .users-table th { border-bottom: 1px solid var(--border); } /* Toast */ [data-theme="dark-modern"] .toast { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; } /* Long-retention badge — electric blue to match the theme's accent. */ [data-theme="dark-modern"] .badge.lr { background: #2563eb; color: #ffffff; border-color: rgba(37, 99, 235, .6); }