/* static/css/theme-base.css Theme infrastructure for non-classic themes only. When Classic is selected, this file effectively does nothing. */ /* 1) Tokens for non-classic themes (put variables on so they are scoped) */ html[data-theme!="classic"] { --bg: #0b0f14; --bg-elev: #121821; --text: #e6edf3; --muted: #9fb0c2; --card: #0f141b; --border: #223040; --accent: #2f6cab; --accent-contrast: #ffffff; --accent-soft: rgba(47,108,171,.14); --success: #38b87c; --warning: #e6ac3b; --danger: #e05d6f; --shadow: 0 8px 24px rgba(0,0,0,.25); --radius: 14px; } /* 2) Global page surfaces — only when NOT classic */ html[data-theme!="classic"], html[data-theme!="classic"] body { background: var(--bg); color: var(--text); } /* Preserve optional class if non-classic themes want a flat bg */ html[data-theme!="classic"] body.themed-bg { background: var(--bg); } /* 3) Cards / panels */ html[data-theme!="classic"] .result-wrap .result-toolbar, html[data-theme!="classic"] .card, html[data-theme!="classic"] .panel, html[data-theme!="classic"] .box, html[data-theme!="classic"] .well, html[data-theme!="classic"] .modal-content { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* 4) Inputs */ html[data-theme!="classic"] input[type="text"], html[data-theme!="classic"] input[type="search"], html[data-theme!="classic"] input[type="number"], html[data-theme!="classic"] select, html[data-theme!="classic"] textarea, html[data-theme!="classic"] .form-control { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; } html[data-theme!="classic"] input::placeholder, html[data-theme!="classic"] textarea::placeholder { color: var(--muted); } /* 5) Pills/filters */ html[data-theme!="classic"] .pill, html[data-theme!="classic"] .subject-pill, html[data-theme!="classic"] .badge, html[data-theme!="classic"] .tag { background: var(--accent-soft); color: var(--text); border: 1px solid var(--border); border-radius: 999px; } html[data-theme!="classic"] .pill.is-active, html[data-theme!="classic"] .subject-pill.is-active { background: var(--accent); color: var(--accent-contrast); } /* 6) Buttons */ html[data-theme!="classic"] .btn, html[data-theme!="classic"] .button { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; } html[data-theme!="classic"] .btn-primary, html[data-theme!="classic"] .button.primary, html[data-theme!="classic"] .btn.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; } html[data-theme!="classic"] .btn-secondary { background: var(--bg-elev); color: var(--text); } html[data-theme!="classic"] .btn:hover { filter: brightness(1.06); } /* 7) Links & focus */ html[data-theme!="classic"] a { color: var(--accent); } html[data-theme!="classic"] a:hover { text-decoration: underline; } html[data-theme!="classic"] :focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* 8) Tables */ html[data-theme!="classic"] table { border-color: var(--border); } html[data-theme!="classic"] th, html[data-theme!="classic"] td { border-color: var(--border); } html[data-theme!="classic"] thead th { background: var(--bg-elev); } /* 9) Alerts */ html[data-theme!="classic"] .alert-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text); } html[data-theme!="classic"] .alert-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); } html[data-theme!="classic"] .alert-danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--text); } /* 10) Utilities */ html[data-theme!="classic"] .text-muted { color: var(--muted); } html[data-theme!="classic"] .border { border: 1px solid var(--border); } html[data-theme!="classic"] .card-round { border-radius: var(--radius); }