/* LyricLab Theme System - Dark (default) + Light override */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s ease, color 0.3s ease; } /* ======================================== DARK THEME (default) ======================================== */ .liquid-glass { background: rgba(255, 255, 255, 0.05); background-blend-mode: luminosity; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 80%, rgba(255,255,255,0.15) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .glass-card { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 90%, rgba(255,255,255,0.08) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .glass-input { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: white; transition: all 0.2s ease; } .glass-input::placeholder { color: rgba(255, 255, 255, 0.35); } .glass-input:focus { outline: none; border-color: #69A481; box-shadow: 0 0 0 2px rgba(105, 164, 129, 0.3); background: rgba(255, 255, 255, 0.08); } .glass-select { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: white; transition: all 0.2s ease; } .glass-select:focus { outline: none; border-color: #69A481; box-shadow: 0 0 0 2px rgba(105, 164, 129, 0.3); } .glass-select option { background: #1a1a1a; color: white; } .btn-primary { background: #69A481; color: white; transition: all 0.2s ease; } .btn-primary:hover { background: #528769; } .btn-primary:active { transform: scale(0.97); } .btn-ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); color: white; transition: all 0.2s ease; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } .btn-ghost:active { transform: scale(0.97); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* ======================================== LIGHT THEME OVERRIDES When , everything flips. ======================================== */ .light-theme body, .light-theme { background-color: #f5f5f5 !important; color: #1a1a1a !important; } /* Header */ .light-theme header { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } .light-theme header span, .light-theme header a { color: #333 !important; } .light-theme header nav a { color: #666 !important; } .light-theme header nav a:hover { color: #111 !important; } /* Keep active nav link styled */ .light-theme header nav a[class*="border-primary"] { color: #69A481 !important; } /* Glass card -> solid white card */ .light-theme .glass-card { background: white !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #e2e2e2 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } .light-theme .glass-card::before { display: none !important; } /* Liquid glass -> light frosted */ .light-theme .liquid-glass { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid #e2e2e2 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } .light-theme .liquid-glass::before { display: none !important; } /* Inputs */ .light-theme .glass-input { background: white !important; border: 1px solid #d1d5db !important; color: #1a1a1a !important; } .light-theme .glass-input::placeholder { color: #9ca3af !important; } .light-theme .glass-input:focus { border-color: #69A481 !important; box-shadow: 0 0 0 2px rgba(105, 164, 129, 0.2) !important; background: white !important; } /* Selects */ .light-theme .glass-select { background: white !important; border: 1px solid #d1d5db !important; color: #1a1a1a !important; } .light-theme .glass-select:focus { border-color: #69A481 !important; box-shadow: 0 0 0 2px rgba(105, 164, 129, 0.2) !important; } .light-theme .glass-select option { background: white !important; color: #1a1a1a !important; } /* Ghost button */ .light-theme .btn-ghost { background: white !important; border: 1px solid #d1d5db !important; color: #333 !important; } .light-theme .btn-ghost:hover { background: #f3f4f6 !important; } /* Text colors */ .light-theme h1, .light-theme h2, .light-theme h3, .light-theme [class*="text-white"] { color: #1a1a1a !important; } .light-theme [class*="text-gray-300"], .light-theme [class*="text-gray-400"] { color: #6b7280 !important; } .light-theme [class*="text-gray-500"], .light-theme [class*="text-gray-600"] { color: #9ca3af !important; } /* Borders */ .light-theme [class*="border-white/"] { border-color: #e5e7eb !important; } /* Footer */ .light-theme footer { background-color: #fafafa !important; border-top-color: #e5e7eb !important; } /* Backgrounds for sections */ .light-theme section[class*="bg-[#0a0a0a]"], .light-theme main { background-color: #f5f5f5 !important; } /* Avatar ring */ .light-theme [class*="ring-white/"] { --tw-ring-color: rgba(0, 0, 0, 0.1) !important; } /* Dividers */ .light-theme [class*="divide-white/"] > * + * { border-color: #e5e7eb !important; } /* Scrollbar for light */ .light-theme ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); } .light-theme ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* Keep primary button the same in both themes */ .light-theme .btn-primary { background: #69A481 !important; color: white !important; } .light-theme .btn-primary:hover { background: #528769 !important; } /* Keep primary text green */ .light-theme [class*="text-primary"] { color: #69A481 !important; } /* Lyrics output text */ .lyrics-content { color: #e5e5e5; } .light-theme .lyrics-content { color: #1a1a1a !important; }