/* 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; }