/* ============================================================ VK RADIO TRADER — dark.css Dark theme — overrides CSS variables from style.css Applied via [data-theme="dark"] on element ============================================================ */ [data-theme="dark"] { /* ── CORE COLOURS ─────────────────────────────────────── */ --white: #1e2128; --grey-100: #13151a; --grey-200: #1e2128; --grey-300: #2d3139; --grey-400: #3d4148; --grey-500: #8b949e; --grey-700: #c9d1d9; --grey-800: #e6edf3; --grey-900: #f0f6fc; /* ── BLUE ─────────────────────────────────────────────── */ --blue: #4d9fff; --blue-dark: #79b8ff; --blue-light: #1a2535; --blue-pale: #111827; /* ── GREEN ────────────────────────────────────────────── */ --green: #3fb950; --green-light: #0d2818; /* ── RED ──────────────────────────────────────────────── */ --red: #f85149; --red-light: #2d1117; /* ── GOLD ─────────────────────────────────────────────── */ --gold: #d29922; } /* ── BODY & BACKGROUND ────────────────────────────────────── */ [data-theme="dark"] body { background: #0d1117; color: #c9d1d9; } /* ── NAV ──────────────────────────────────────────────────── */ [data-theme="dark"] nav { background: #161b22; border-bottom-color: #30363d; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } [data-theme="dark"] .nav-search { border-color: #30363d; background: #0d1117; } [data-theme="dark"] .nav-search select { background: #161b22; border-right-color: #30363d; color: #c9d1d9; } [data-theme="dark"] .nav-search input { background: #0d1117; color: #c9d1d9; } [data-theme="dark"] .nav-icon-btn { color: #8b949e; } [data-theme="dark"] .nav-icon-btn:hover { background: #21262d; color: #4d9fff; } /* ── TOPBAR ───────────────────────────────────────────────── */ [data-theme="dark"] .topbar { background: #010409; } /* ── CATEGORY NAV ─────────────────────────────────────────── */ [data-theme="dark"] .cat-nav { background: #161b22; border-bottom-color: #30363d; } [data-theme="dark"] .cat-nav-item { color: #8b949e; } [data-theme="dark"] .cat-nav-item:hover, [data-theme="dark"] .cat-nav-item.active { color: #4d9fff; border-bottom-color: #4d9fff; } /* ── CARDS ────────────────────────────────────────────────── */ [data-theme="dark"] .listing-card, [data-theme="dark"] .sidebar-card, [data-theme="dark"] .admin-card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .listing-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.4); } [data-theme="dark"] .listing-title { color: #e6edf3; } [data-theme="dark"] .listing-price { color: #4d9fff; } [data-theme="dark"] .listing-cat { color: #4d9fff; } /* ── SIDEBAR ──────────────────────────────────────────────── */ [data-theme="dark"] .sidebar-card-header { background: #21262d; border-bottom-color: #30363d; color: #e6edf3; } [data-theme="dark"] .sidebar-item { color: #8b949e; border-bottom-color: #21262d; } [data-theme="dark"] .sidebar-item:hover { color: #4d9fff; } /* ── FORMS ────────────────────────────────────────────────── */ [data-theme="dark"] .form-control { background: #0d1117; border-color: #30363d; color: #c9d1d9; } [data-theme="dark"] .form-control:focus { border-color: #4d9fff; box-shadow: 0 0 0 3px rgba(77,159,255,0.15); } [data-theme="dark"] .form-control::placeholder { color: #484f58; } [data-theme="dark"] select.form-control option { background: #161b22; } /* ── BUTTONS ──────────────────────────────────────────────── */ [data-theme="dark"] .btn-grey { background: #21262d; color: #c9d1d9; border-color: #30363d; } [data-theme="dark"] .btn-grey:hover { background: #2d3139; } [data-theme="dark"] .btn-outline { color: #4d9fff; border-color: #4d9fff; } [data-theme="dark"] .btn-outline:hover { background: #1a2535; } /* ── ALERTS ───────────────────────────────────────────────── */ [data-theme="dark"] .alert-success { background: #0d2818; color: #3fb950; border-color: rgba(63,185,80,0.2); } [data-theme="dark"] .alert-danger { background: #2d1117; color: #f85149; border-color: rgba(248,81,73,0.2); } [data-theme="dark"] .alert-warning { background: #2b1d0e; color: #d29922; border-color: rgba(210,153,34,0.3); } [data-theme="dark"] .alert-info { background: #1a2535; color: #4d9fff; border-color: rgba(77,159,255,0.2); } /* ── TABLES ───────────────────────────────────────────────── */ [data-theme="dark"] .table-header { background: #21262d; border-bottom-color: #30363d; } [data-theme="dark"] .table-row { border-bottom-color: #21262d; color: #c9d1d9; } [data-theme="dark"] .table-row:hover { background: #1a2535; } [data-theme="dark"] .th { color: #8b949e; } /* ── FOOTER ───────────────────────────────────────────────── */ [data-theme="dark"] footer { background: #010409; } /* ── STATS STRIP ──────────────────────────────────────────── */ [data-theme="dark"] .stats-strip { background: #161b22; border-bottom-color: #30363d; } [data-theme="dark"] .stat-item { border-right-color: #21262d; } [data-theme="dark"] .stat-num { color: #4d9fff; } /* ── ACCOUNT BAR ──────────────────────────────────────────── */ [data-theme="dark"] .account-bar { background: #111827; border-color: rgba(77,159,255,0.15); } [data-theme="dark"] .acct-stat { background: #161b22; border-color: #30363d; } [data-theme="dark"] .acct-stat:hover { border-color: #4d9fff; } [data-theme="dark"] .acct-stat-num { color: #e6edf3; } /* ── LISTING IMG PLACEHOLDER ──────────────────────────────── */ [data-theme="dark"] .listing-img { background: #0d1117; } /* ── HOW IT WORKS ─────────────────────────────────────────── */ [data-theme="dark"] .how-it-works { background: #161b22; border-color: #30363d; } [data-theme="dark"] .how-icon { background: #1a2535; } /* ── PAGINATION ───────────────────────────────────────────── */ [data-theme="dark"] .page-btn { background: #161b22; border-color: #30363d; color: #8b949e; } [data-theme="dark"] .page-btn:hover { border-color: #4d9fff; color: #4d9fff; } [data-theme="dark"] .page-btn.active { background: #4d9fff; border-color: #4d9fff; color: #fff; } /* ── BREADCRUMB ───────────────────────────────────────────── */ [data-theme="dark"] .breadcrumb { background: #161b22; border-bottom-color: #30363d; } /* ── FLASH WRAP ───────────────────────────────────────────── */ [data-theme="dark"] .flash-wrap { background: #161b22; border-bottom-color: #30363d; } /* ── DARK TOGGLE BUTTON ───────────────────────────────────── */ .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.25rem 0.4rem; border-radius: 6px; transition: background 0.2s; line-height: 1; } .theme-toggle:hover { background: rgba(255,255,255,0.1); } /* ── SCROLLBAR (dark mode) ────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }