212 lines
6.6 KiB
CSS
212 lines
6.6 KiB
CSS
/* Minimal stylesheet to accompany Tailwind CDN styles */
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
|
|
"Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
|
|
background-color: #0f172a; /* slate-900 */
|
|
color: #e2e8f0; /* slate-200 */
|
|
}
|
|
|
|
/* Container helper to match Tailwind's container defaults a bit closer */
|
|
.container {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
/* --- Theme System ------------------------------------------------------- */
|
|
/* Define CSS variables per theme and override a few common Tailwind utils */
|
|
|
|
/* Defaults (used as fallback) */
|
|
:root {
|
|
--bg: #0f172a; /* dark slate */
|
|
--text: #e2e8f0; /* slate-200 */
|
|
--muted: #94a3b8; /* slate-400 */
|
|
--panel: #1f2937; /* slate-800 */
|
|
--panel-2: #334155; /* slate-700 */
|
|
--overlay: rgba(31,41,55,.5);
|
|
--accent: #ef4444; /* red-500/600 */
|
|
--accent-hover: #dc2626; /* red-600/700 */
|
|
--border: #334155;
|
|
--selection: rgba(255,255,255,.06); /* default subtle selection for dark */
|
|
}
|
|
|
|
/* Dark */
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
/* Dark gray palette (softer than deep slate) */
|
|
--bg: #14171b; /* base background */
|
|
--text: #e5e7eb; /* slightly brighter text */
|
|
--muted: #a1a7b3; /* softer secondary text */
|
|
--panel: #1d2126; /* cards/headers */
|
|
--panel-2: #262b31; /* inputs/secondary panels */
|
|
--overlay: rgba(29,33,38,.6);
|
|
--accent: #ef4444; /* unchanged accent */
|
|
--accent-hover: #dc2626;
|
|
--border: #2f3540; /* subtle border */
|
|
--selection: #2b3139; /* hover/selection on dark */
|
|
}
|
|
|
|
/* Pure Black */
|
|
[data-theme="black"] {
|
|
color-scheme: dark;
|
|
--bg: #000000;
|
|
--text: #e5e7eb;
|
|
--muted: #9ca3af;
|
|
--panel: #0a0a0a;
|
|
--panel-2: #111111;
|
|
--overlay: rgba(0,0,0,.6);
|
|
--accent: #ef4444;
|
|
--accent-hover: #dc2626;
|
|
--border: #1f2937;
|
|
--selection: #121416;
|
|
}
|
|
|
|
/* Light */
|
|
[data-theme="light"] {
|
|
color-scheme: light;
|
|
--bg: #f8fafc; /* slate-50 */
|
|
--text: #0f172a; /* slate-900 */
|
|
--muted: #64748b;/* slate-500 for secondary text */
|
|
--panel: #ffffff;
|
|
--panel-2: #f1f5f9; /* slate-100 */
|
|
--overlay: #ffffff; /* solid white for cards/headers using bg-slate-800/50 */
|
|
--accent: #ef4444;
|
|
--accent-hover: #dc2626;
|
|
--border: #e2e8f0;
|
|
--selection: #eef2f7; /* light mode selection (ref. YouTube style) */
|
|
}
|
|
|
|
/* Blue (navy) */
|
|
[data-theme="blue"] {
|
|
color-scheme: dark;
|
|
--bg: #0b1220;
|
|
--text: #dbeafe; /* blue-100 */
|
|
--muted: #93c5fd; /* blue-300 */
|
|
--panel: #111a2b;
|
|
--panel-2: #17223a;
|
|
--overlay: rgba(17,26,43,.6);
|
|
--accent: #3b82f6; /* blue-500 */
|
|
--accent-hover: #2563eb; /* blue-600 */
|
|
--border: #1e3a8a; /* blue-900 */
|
|
--selection: #1a2440;
|
|
}
|
|
|
|
/* System: default to light, override when OS is dark */
|
|
[data-theme="system"] {
|
|
color-scheme: light;
|
|
--bg: #f8fafc;
|
|
--text: #0f172a;
|
|
--muted: #334155;
|
|
--panel: #ffffff;
|
|
--panel-2: #f1f5f9;
|
|
--overlay: rgba(255,255,255,.8);
|
|
--accent: #ef4444;
|
|
--accent-hover: #dc2626;
|
|
--border: #e2e8f0;
|
|
--selection: #eef2f7;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-theme="system"] {
|
|
color-scheme: dark;
|
|
--bg: #0f172a;
|
|
--text: #e2e8f0;
|
|
--muted: #94a3b8;
|
|
--panel: #1f2937;
|
|
--panel-2: #334155;
|
|
--overlay: rgba(31,41,55,.5);
|
|
--accent: #ef4444;
|
|
--accent-hover: #dc2626;
|
|
--border: #334155;
|
|
--selection: #2b3139;
|
|
}
|
|
}
|
|
|
|
/* Apply variables */
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Mild overrides so Tailwind utilities adapt to themes without rebuild */
|
|
[data-theme] .bg-slate-900 { background-color: var(--bg) !important; }
|
|
[data-theme] .bg-gray-800,
|
|
[data-theme] .bg-slate-800 { background-color: var(--panel) !important; }
|
|
[data-theme] .bg-slate-700 { background-color: var(--panel-2) !important; }
|
|
[data-theme] .bg-slate-800\/50 { background-color: var(--overlay) !important; }
|
|
[data-theme] .text-slate-200 { color: var(--text) !important; }
|
|
[data-theme] .text-slate-100 { color: var(--text) !important; }
|
|
[data-theme] .text-slate-300 { color: color-mix(in srgb, var(--text) 80%, transparent) !important; }
|
|
[data-theme] .text-slate-400 { color: var(--muted) !important; }
|
|
[data-theme] .text-white { color: var(--text) !important; }
|
|
[data-theme] .border-slate-700 { border-color: var(--border) !important; }
|
|
|
|
/* Accent buttons */
|
|
[data-theme] .bg-red-600 { background-color: var(--accent) !important; }
|
|
[data-theme] .hover\:bg-red-500:hover { background-color: var(--accent-hover) !important; }
|
|
[data-theme] .bg-gray-600 { background-color: var(--panel-2) !important; }
|
|
[data-theme] .hover\:bg-gray-500:hover { background-color: var(--panel) !important; }
|
|
|
|
/* Light-specific refinements */
|
|
[data-theme="light"] header {
|
|
box-shadow: 0 2px 12px rgba(0,0,0,.06);
|
|
}
|
|
[data-theme="light"] .shadow-2xl {
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,.15) !important;
|
|
}
|
|
[data-theme="light"] .bg-black\/75 {
|
|
/* make duration pill less heavy on light */
|
|
background-color: rgba(0,0,0,.5) !important;
|
|
}
|
|
|
|
/* Cards and panels separation in Light */
|
|
[data-theme="light"] .bg-slate-800,
|
|
[data-theme="light"] .bg-gray-800,
|
|
[data-theme="light"] .bg-slate-800\/50 {
|
|
border: 1px solid var(--border) !important;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
|
}
|
|
|
|
/* Hover states for list/grid cards */
|
|
[data-theme="light"] .hover\:bg-slate-700\/50:hover,
|
|
[data-theme="light"] .hover\:bg-slate-800:hover,
|
|
[data-theme="light"] .hover\:bg-slate-800\/50:hover,
|
|
[data-theme="light"] .hover\:bg-slate-700:hover,
|
|
[data-theme="light"] .hover\:bg-gray-800:hover {
|
|
background-color: var(--selection) !important; /* subtle hover */
|
|
}
|
|
|
|
/* In light mode, also treat any active dark-slate background as selection */
|
|
[data-theme="light"] .bg-slate-800,
|
|
[data-theme="light"] .bg-slate-800\/50,
|
|
[data-theme="light"] .bg-gray-800 {
|
|
background-color: var(--panel) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
|
|
/* Inputs in light mode */
|
|
[data-theme="light"] input.bg-slate-700,
|
|
[data-theme="light"] input.bg-gray-800,
|
|
[data-theme="light"] select.bg-gray-800,
|
|
[data-theme="light"] select.bg-slate-800,
|
|
[data-theme="light"] textarea.bg-gray-800,
|
|
[data-theme="light"] textarea.bg-slate-800 {
|
|
background-color: var(--panel-2) !important;
|
|
color: var(--text) !important;
|
|
border: 1px solid var(--border) !important;
|
|
}
|
|
[data-theme="light"] input::placeholder,
|
|
[data-theme="light"] textarea::placeholder {
|
|
color: #94a3b8; /* slate-400 */
|
|
}
|
|
|
|
/* Hide scrollbars on horizontal lists where we still want scrolling */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|