/* Theme variables and light/dark styling - Defaults to system preference via @media (no JS) - JS toggle sets `data-theme` on and persists to localStorage */ /* Base light palette (will be overridden below when appropriate) */ :root { color-scheme: light dark; --bg: #ffffff; --text: #111111; --muted: #6b7280; /* gray-500 */ --surface: #ffffff; --border: #e5e7eb; /* gray-200 */ --navbar-bg: #ffffff; --navbar-text: #111111; --solved-header-bg: #48c78e; --solved-header-title: #ffffff; --solved-header-subtitle: rgba(255, 255, 255, 0.85); --solved-points-bg: #2aa772; --solved-points-title: #f6fffb; } /* If user prefers dark and no override exists */ @media (prefers-color-scheme: dark) { :root { --bg: #0b1020; --text: #e5e7eb; --muted: #9ca3af; --surface: #11162a; --border: #1f2937; --navbar-bg: #0b1020; --navbar-text: #e5e7eb; --solved-header-bg: #13795b; --solved-header-title: #f3fff9; --solved-header-subtitle: #c5f5e1; --solved-points-bg: #1f9d6a; --solved-points-title: #ffffff; } } /* Explicit overrides when JS sets data-theme */ :root[data-theme='light'] { --bg: #ffffff; --text: #111111; --muted: #6b7280; --surface: #ffffff; --border: #e5e7eb; --navbar-bg: #ffffff; --navbar-text: #111111; --solved-header-bg: #48c78e; --solved-header-title: #ffffff; --solved-header-subtitle: rgba(255, 255, 255, 0.85); --solved-points-bg: #2aa772; --solved-points-title: #f6fffb; } :root[data-theme='dark'] { --bg: #0b1020; --text: #e5e7eb; --muted: #9ca3af; --surface: #11162a; --border: #1f2937; --navbar-bg: #0b1020; --navbar-text: #e5e7eb; --solved-header-bg: #13795b; --solved-header-title: #f3fff9; --solved-header-subtitle: #c5f5e1; --solved-points-bg: #1f9d6a; --solved-points-title: #ffffff; } /* Apply variables */ html, body { background-color: var(--bg); color: var(--text); } /* Navbar */ .navbar { background-color: var(--navbar-bg); } .navbar .navbar-item, .navbar a.navbar-item { color: var(--navbar-text); } .navbar .navbar-item:hover, .navbar a.navbar-item:hover { background-color: transparent; opacity: 0.8; } /* Cards and containers */ .card { background-color: var(--surface); border: 1px solid var(--border); } .card .card-content, .card .content { color: var(--text); } /* Keep solved card header readable in both themes (especially dark). */ .card.solved .card-header { background-color: var(--solved-header-bg) !important; } .card.solved .card-header .card-header-title, .card.solved .card-header .title, .card.solved .card-header .tag, .card.solved .card-header i { color: var(--solved-header-title) !important; } .card.solved .card-header .subtitle { color: var(--solved-header-subtitle) !important; } .card.solved .card-header .task-card-tags .tag.is-success { background-color: var(--solved-points-bg) !important; color: var(--solved-points-title) !important; } /* Footer */ .footer { background-color: var(--surface); border-top: 1px solid var(--border); color: var(--muted); } /* Form controls */ .input, .textarea, .select select { background-color: var(--surface); color: var(--text); border-color: var(--border); } .input::placeholder, .textarea::placeholder { color: var(--muted); } /* Tables (e.g., scoreboard) */ table.table { background-color: var(--surface); color: var(--text); } table.table td, table.table th { border-color: var(--border) !important; } /* Links */ a { color: inherit; } /* Hidden tasks (visible to admins) */ .card.task-hidden { background-color: var(--border); background-image: none; } .card.task-hidden .card-content, .card.task-hidden .card-footer, .card.task-hidden .card-header .card-header-title { opacity: 0.7; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .app-toast-stack { position: fixed; top: 1rem; right: 1rem; width: min(28rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: 0.65rem; z-index: 2000; pointer-events: none; } .app-toast.notification { pointer-events: auto; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); margin: 0; opacity: 0; transform: translateY(-8px) scale(0.985); transition: opacity 180ms ease, transform 180ms ease; } .app-toast.notification.is-visible { opacity: 1; transform: translateY(0) scale(1); } .app-toast.notification.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.985); } .app-toast-message { font-size: 1rem; line-height: 1.3; word-break: break-word; } @media (max-width: 768px) { .app-toast-stack { top: 0.75rem; right: 0.75rem; left: 0.75rem; width: auto; } }