/** * Scrobb.com Theme & Utility Styles * Complete CSS replacement for Tailwind CSS CDN * Light & Dark theme support with comprehensive utility classes * * ============================================================================ * SCROBB.COM COLOR PALETTE GUIDE * ============================================================================ * * LIGHT THEME USAGE: * * Page Background: bg-gray-50 (#f9fafb) - Body default, subtle off-white * Content Cards: bg-gray-100 (#f3f4f6) - Main sections (album info, track listing, stats) * Nested Cards: bg-white (#ffffff) - Stat cards, individual items inside gray-100 sections * Card Borders: border-gray-200 (#e5e7eb) - Subtle separation * Stronger Borders: border-gray-300 (#d1d5db) - When more definition needed * * Text Colors: * - Headings: text-gray-900 (#111827) - Maximum contrast * - Body Text: text-gray-700 (#374151) - Good readability * - Secondary Text: text-gray-600 (#4b5563) - Labels, less important info * - Muted Text: text-gray-500 (#6b7280) - Timestamps, helper text * * Accent Colors: * - Primary Action: bg-red-600 (#dc2626) - Buttons, CTAs * - Primary Hover: bg-red-700 (#b91c1c) - Button hover states * - Links: text-red-600 (#dc2626) - Clickable text * - Success: bg-green-600 (#16a34a) - Success states * - Warning: bg-yellow-600 (#d97706) - Warning states * - Info: bg-blue-600 (#2563eb) - Info states * * DARK THEME USAGE: * * Page Background: bg-slate-900 (#0f172a) - Dark body * Content Cards: bg-slate-800 (#1e293b) - Main sections * Nested Cards: bg-slate-700 (#334155) - Individual items * Card Borders: border-slate-600 (#475569) - Visible separation * * Text Colors: * - Headings: text-slate-100 (#f1f5f9) - Bright, readable * - Body Text: text-slate-200 (#e2e8f0) - Good contrast * - Secondary Text: text-slate-300 (#cbd5e1) - Labels * - Muted Text: text-slate-400 (#94a3b8) - Helper text * * USAGE PATTERN: * * *

Title

Content

* *

* * * ============================================================================ */ /* ============================================================================ GLOBAL BASE STYLES ============================================================================ */ * { box-sizing: border-box; } html { font-size: 16px; line-height: 1.5; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f9fafb; /* gray-50 - subtle background instead of pure white */ color: #111827; margin: 0; padding: 0; } /* ============================================================================ LIGHT THEME - DEFAULT ============================================================================ */ /* Background Colors - Light Theme */ .bg-white { background-color: #ffffff; } .bg-gray-25 { background-color: #fcfcfc; } .bg-gray-50 { background-color: #f9fafb; } .bg-gray-100 { background-color: #f3f4f6; } .bg-gray-200 { background-color: #e5e7eb; } .bg-gray-300 { background-color: #d1d5db; } .bg-gray-400 { background-color: #9ca3af; } .bg-gray-500 { background-color: #6b7280; } .bg-gray-600 { background-color: #4b5563; } .bg-gray-700 { background-color: #374151; } .bg-gray-800 { background-color: #1f2937; } .bg-gray-900 { background-color: #111827; } .bg-red-50 { background-color: #fef2f2; } .bg-red-100 { background-color: #fee2e2; } .bg-red-200 { background-color: #fecaca; } .bg-red-300 { background-color: #fca5a5; } .bg-red-400 { background-color: #f87171; } .bg-red-500 { background-color: #ef4444; } .bg-red-600 { background-color: #dc2626; } .bg-red-700 { background-color: #b91c1c; } .bg-red-800 { background-color: #991b1b; } .bg-red-900 { background-color: #7f1d1d; } .bg-green-50 { background-color: #f0fdf4; } .bg-green-100 { background-color: #dcfce7; } .bg-green-200 { background-color: #bbf7d0; } .bg-green-300 { background-color: #86efac; } .bg-green-400 { background-color: #4ade80; } .bg-green-500 { background-color: #22c55e; } .bg-green-600 { background-color: #16a34a; } .bg-green-700 { background-color: #15803d; } .bg-green-800 { background-color: #166534; } .bg-green-900 { background-color: #145231; } .bg-blue-50 { background-color: #eff6ff; } .bg-blue-100 { background-color: #dbeafe; } .bg-blue-200 { background-color: #bfdbfe; } .bg-blue-300 { background-color: #93c5fd; } .bg-blue-400 { background-color: #60a5fa; } .bg-blue-500 { background-color: #3b82f6; } .bg-blue-600 { background-color: #2563eb; } .bg-blue-700 { background-color: #1d4ed8; } .bg-blue-800 { background-color: #1e40af; } .bg-blue-900 { background-color: #1e3a8a; } .bg-yellow-50 { background-color: #fffbeb; } .bg-yellow-100 { background-color: #fef3c7; } .bg-yellow-200 { background-color: #fde68a; } .bg-yellow-300 { background-color: #fcd34d; } .bg-yellow-400 { background-color: #fbbf24; } .bg-yellow-500 { background-color: #f59e0b; } .bg-yellow-600 { background-color: #d97706; } .bg-yellow-700 { background-color: #b45309; } .bg-yellow-800 { background-color: #92400e; } .bg-yellow-900 { background-color: #78350f; } .bg-purple-50 { background-color: #faf5ff; } .bg-purple-100 { background-color: #f3e8ff; } .bg-purple-200 { background-color: #e9d5ff; } .bg-purple-300 { background-color: #d8b4fe; } .bg-purple-400 { background-color: #c084fc; } .bg-purple-500 { background-color: #a855f7; } .bg-purple-600 { background-color: #9333ea; } .bg-purple-700 { background-color: #7e22ce; } .bg-purple-800 { background-color: #6b21a8; } .bg-purple-900 { background-color: #581c87; } .bg-orange-50 { background-color: #fff7ed; } .bg-orange-100 { background-color: #ffedd5; } .bg-orange-200 { background-color: #fed7aa; } .bg-orange-300 { background-color: #fdba74; } .bg-orange-400 { background-color: #fb923c; } .bg-orange-500 { background-color: #f97316; } .bg-orange-600 { background-color: #ea580c; } .bg-orange-700 { background-color: #c2410c; } .bg-orange-800 { background-color: #9a3412; } .bg-orange-900 { background-color: #7c2d12; } .bg-black { background-color: #000000; } .bg-transparent { background-color: transparent; } /* Text Colors - Light Theme */ .text-white { color: #ffffff; } .text-black { color: #000000; } .text-gray-50 { color: #f9fafb; } .text-gray-100 { color: #f3f4f6; } .text-gray-200 { color: #e5e7eb; } .text-gray-300 { color: #d1d5db; } .text-gray-400 { color: #9ca3af; } .text-gray-500 { color: #6b7280; } .text-gray-600 { color: #4b5563; } .text-gray-700 { color: #374151; } .text-gray-800 { color: #1f2937; } .text-gray-900 { color: #111827; } .text-red-50 { color: #fef2f2; } .text-red-100 { color: #fee2e2; } .text-red-200 { color: #fecaca; } .text-red-300 { color: #fca5a5; } .text-red-400 { color: #f87171; } .text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } .text-red-700 { color: #b91c1c; } .text-red-800 { color: #991b1b; } .text-red-900 { color: #7f1d1d; } .text-green-50 { color: #f0fdf4; } .text-green-100 { color: #dcfce7; } .text-green-200 { color: #bbf7d0; } .text-green-300 { color: #86efac; } .text-green-400 { color: #4ade80; } .text-green-500 { color: #22c55e; } .text-green-600 { color: #16a34a; } .text-green-700 { color: #15803d; } .text-green-800 { color: #166534; } .text-green-900 { color: #145231; } .text-blue-50 { color: #eff6ff; } .text-blue-100 { color: #dbeafe; } .text-blue-200 { color: #bfdbfe; } .text-blue-300 { color: #93c5fd; } .text-blue-400 { color: #60a5fa; } .text-blue-500 { color: #3b82f6; } .text-blue-600 { color: #2563eb; } .text-blue-700 { color: #1d4ed8; } .text-blue-800 { color: #1e40af; } .text-blue-900 { color: #1e3a8a; } .text-yellow-50 { color: #fffbeb; } .text-yellow-100 { color: #fef3c7; } .text-yellow-200 { color: #fde68a; } .text-yellow-300 { color: #fcd34d; } .text-yellow-400 { color: #fbbf24; } .text-yellow-500 { color: #f59e0b; } .text-yellow-600 { color: #d97706; } .text-yellow-700 { color: #b45309; } .text-yellow-800 { color: #92400e; } .text-yellow-900 { color: #78350f; } .text-purple-50 { color: #faf5ff; } .text-purple-100 { color: #f3e8ff; } .text-purple-200 { color: #e9d5ff; } .text-purple-300 { color: #d8b4fe; } .text-purple-400 { color: #c084fc; } .text-purple-500 { color: #a855f7; } .text-purple-600 { color: #9333ea; } .text-purple-700 { color: #7e22ce; } .text-purple-800 { color: #6b21a8; } .text-purple-900 { color: #581c87; } .text-orange-50 { color: #fff7ed; } .text-orange-100 { color: #ffedd5; } .text-orange-200 { color: #fed7aa; } .text-orange-300 { color: #fdba74; } .text-orange-400 { color: #fb923c; } .text-orange-500 { color: #f97316; } .text-orange-600 { color: #ea580c; } .text-orange-700 { color: #c2410c; } .text-orange-800 { color: #9a3412; } .text-orange-900 { color: #7c2d12; } .text-transparent { color: transparent; } /* Border Colors - Light Theme */ .border-white { border-color: #ffffff !important; } .border-gray-50 { border-color: #f9fafb !important; } .border-gray-100 { border-color: #f3f4f6 !important; } .border-gray-200 { border-color: #e5e7eb !important; } .border-gray-300 { border-color: #e5e7eb !important; } /* Lightened from #d1d5db to match gray-200 */ .border-gray-400 { border-color: #e5e7eb !important; } /* Lightened for consistency */ .border-gray-500 { border-color: #d1d5db !important; } /* Lightened */ .border-gray-600 { border-color: #d1d5db !important; } /* Lightened */ .border-gray-700 { border-color: #d1d5db !important; } /* Lightened */ .border-gray-800 { border-color: #e5e7eb !important; } /* Lightened */ .border-gray-900 { border-color: #e5e7eb !important; } /* Lightened */ .border-red-200 { border-color: #fecaca; } .border-red-300 { border-color: #fca5a5; } .border-red-400 { border-color: #f87171; } .border-red-500 { border-color: #ef4444; } .border-red-600 { border-color: #dc2626; } .border-green-200 { border-color: #bbf7d0; } .border-green-300 { border-color: #86efac; } .border-green-400 { border-color: #4ade80; } .border-green-500 { border-color: #22c55e; } .border-blue-200 { border-color: #bfdbfe; } .border-blue-300 { border-color: #93c5fd; } .border-blue-400 { border-color: #60a5fa; } .border-blue-500 { border-color: #3b82f6; } .border-yellow-300 { border-color: #fcd34d; } .border-yellow-400 { border-color: #fbbf24; } .border-purple-300 { border-color: #d8b4fe; } .border-purple-600 { border-color: #9333ea; } .border-orange-300 { border-color: #fdba74; } .border-orange-600 { border-color: #ea580c; } /* Border Width */ .border { border-width: 1px; border-style: solid; border-color: #e5e7eb !important; } /* Default to light gray-200 */ .border-0 { border-width: 0; } .border-2 { border-width: 2px; border-style: solid; } .border-4 { border-width: 4px; border-style: solid; } .border-b { border-bottom-width: 1px; border-bottom-style: solid; } .border-t { border-top-width: 1px; border-top-style: solid; } .border-l { border-left-width: 1px; border-left-style: solid; } .border-r { border-right-width: 1px; border-right-style: solid; } .border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; } .border-t-2 { border-top-width: 2px; border-top-style: solid; } .border-l-2 { border-left-width: 2px; border-left-style: solid; } .border-l-4 { border-left-width: 4px; border-left-style: solid; } /* Border Radius */ .rounded-none { border-radius: 0; } .rounded-sm { border-radius: 0.125rem; } .rounded { border-radius: 0.25rem; } .rounded-md { border-radius: 0.375rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .rounded-t { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } .rounded-b { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } .rounded-l { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .rounded-r { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* Shadows */ .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* Active Filter Button Styles */ .filter-btn-active { background-color: #dc2626 !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.7), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; transform: scale(1.05) !important; } .letter-btn-active { background-color: #dc2626 !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.7), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; transform: scale(1.1) !important; } /* ============================================================================ FLEXBOX UTILITIES ============================================================================ */ .flex { display: flex; } .inline-flex { display: inline-flex; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-initial { flex: 0 1 auto; } .flex-none { flex: none; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .gap-0 { gap: 0; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .space-x-2 > * + * { margin-left: 0.5rem; } .space-x-4 > * + * { margin-left: 1rem; } .space-x-6 > * + * { margin-left: 1.5rem; } .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } /* ============================================================================ GRID UTILITIES ============================================================================ */ .grid { display: grid; } .inline-grid { display: inline-grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .auto-cols-auto { grid-auto-columns: auto; } .auto-rows-auto { grid-auto-rows: auto; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-12 { grid-column: span 12 / span 12; } .row-span-1 { grid-row: span 1 / span 1; } .row-span-2 { grid-row: span 2 / span 2; } .row-span-3 { grid-row: span 3 / span 3; } .row-span-4 { grid-row: span 4 / span 4; } .row-span-6 { grid-row: span 6 / span 6; } /* ============================================================================ SPACING UTILITIES (Padding & Margin) ============================================================================ */ /* Padding */ .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; } .p-12 { padding: 3rem; } .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .pt-0 { padding-top: 0; } .pt-2 { padding-top: 0.5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pb-0 { padding-bottom: 0; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pl-0 { padding-left: 0; } .pl-2 { padding-left: 0.5rem; } .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; } .pr-0 { padding-right: 0; } .pr-2 { padding-right: 0.5rem; } .pr-4 { padding-right: 1rem; } .pr-6 { padding-right: 1.5rem; } /* Margin */ .m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-auto { margin: auto; } .mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-top: 0; margin-bottom: 0; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .ml-0 { margin-left: 0; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .ml-auto { margin-left: auto; } .mr-0 { margin-right: 0; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mr-auto { margin-right: auto; } /* ============================================================================ SIZING UTILITIES ============================================================================ */ .w-full { width: 100%; } .w-auto { width: auto; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333%; } .w-2\/3 { width: 66.666%; } .w-1\/4 { width: 25%; } .w-3\/4 { width: 75%; } .w-1\/5 { width: 20%; } .w-2\/5 { width: 40%; } .w-3\/5 { width: 60%; } .w-4\/5 { width: 80%; } .w-screen { width: 100vw; } .w-min { width: min-content; } .w-max { width: max-content; } .w-fit { width: fit-content; } .h-full { height: 100%; } .h-auto { height: auto; } .h-screen { height: 100vh; } .h-min { height: min-content; } .h-max { height: max-content; } .h-fit { height: fit-content; } .min-h-screen { min-height: 100vh; } .min-h-full { min-height: 100%; } .min-h-0 { min-height: 0; } .max-w-full { max-width: 100%; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } /* ============================================================================ TYPOGRAPHY UTILITIES ============================================================================ */ .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; } .font-thin { font-weight: 100; } .font-extralight { font-weight: 200; } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-black { font-weight: 900; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .italic { font-style: italic; } .not-italic { font-style: normal; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .line-through { text-decoration: line-through; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-pre-line { white-space: pre-line; } .break-words { word-break: break-word; } .break-all { word-break: break-all; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-snug { line-height: 1.375; } .leading-normal { line-height: 1.5; } .leading-relaxed { line-height: 1.625; } .leading-loose { line-height: 2; } .tracking-tight { letter-spacing: -0.015em; } .tracking-normal { letter-spacing: 0em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } /* ============================================================================ DISPLAY & VISIBILITY ============================================================================ */ .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .hidden { display: none !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-scroll { overflow: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } /* ============================================================================ TRANSFORMS & TRANSITIONS ============================================================================ */ .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-none { transition-property: none; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-75 { transition-duration: 75ms; } .duration-100 { transition-duration: 100ms; } .duration-150 { transition-duration: 150ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; } .duration-1000 { transition-duration: 1000ms; } .ease-linear { transition-timing-function: linear; } .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .scale-75 { transform: scale(0.75); } .scale-90 { transform: scale(0.9); } .scale-95 { transform: scale(0.95); } .scale-100 { transform: scale(1); } .scale-105 { transform: scale(1.05); } .scale-110 { transform: scale(1.1); } .scale-125 { transform: scale(1.25); } .scale-150 { transform: scale(1.5); } .translate-x-0 { transform: translateX(0); } .translate-y-0 { transform: translateY(0); } .rotate-0 { transform: rotate(0deg); } .rotate-45 { transform: rotate(45deg); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } /* ============================================================================ POSITIONING ============================================================================ */ .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-auto { top: auto; right: auto; bottom: auto; left: auto; } .top-0 { top: 0; } .top-4 { top: 1rem; } .right-0 { right: 0; } .right-4 { right: 1rem; } .bottom-0 { bottom: 0; } .bottom-4 { bottom: 1rem; } .left-0 { left: 0; } .left-4 { left: 1rem; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-auto { z-index: auto; } /* ============================================================================ HOVER & INTERACTION STATES ============================================================================ */ .hover\:bg-gray-50:hover { background-color: #f9fafb; } .hover\:bg-gray-100:hover { background-color: #f3f4f6; } .hover\:bg-gray-200:hover { background-color: #e5e7eb; } .hover\:bg-red-50:hover { background-color: #fef2f2; } .hover\:bg-red-600:hover { background-color: #dc2626; } .hover\:bg-red-700:hover { background-color: #b91c1c; } .hover\:bg-red-800:hover { background-color: #991b1b; } .hover\:bg-green-50:hover { background-color: #f0fdf4; } .hover\:bg-green-100:hover { background-color: #dcfce7; } .hover\:bg-blue-50:hover { background-color: #eff6ff; } .hover\:bg-blue-100:hover { background-color: #dbeafe; } .hover\:text-gray-600:hover { color: #4b5563; } .hover\:text-gray-700:hover { color: #374151; } .hover\:text-gray-900:hover { color: #111827; } .hover\:text-white:hover { color: #ffffff; } .hover\:text-red-600:hover { color: #dc2626; } .hover\:text-blue-600:hover { color: #2563eb; } .hover\:border-gray-300:hover { border-color: #d1d5db; } .hover\:border-red-600:hover { border-color: #dc2626; } .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .hover\:scale-105:hover { transform: scale(1.05); } .hover\:scale-110:hover { transform: scale(1.1); } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); } .focus\:ring-red-500:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5); } .active\:scale-95:active { transform: scale(0.95); } .disabled\:opacity-50:disabled { opacity: 0.5; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } /* ============================================================================ CURSOR & POINTER ============================================================================ */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .cursor-auto { cursor: auto; } .cursor-text { cursor: text; } /* ============================================================================ CONTAINER & LAYOUT ============================================================================ */ .container { width: 100%; margin-left: auto; margin-right: auto; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } /* ============================================================================ RESPONSIVE BREAKPOINTS ============================================================================ */ @media (min-width: 640px) { .sm\:block { display: block !important; } .sm\:flex { display: flex !important; } .sm\:grid { display: grid !important; } .sm\:hidden { display: none !important; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .sm\:text-sm { font-size: 0.875rem; } .sm\:text-base { font-size: 1rem; } .sm\:flex-1 { flex: 1 1 0% !important; } .sm\:items-center { align-items: center !important; } .sm\:justify-between { justify-content: space-between !important; } } @media (min-width: 768px) { .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:flex-row { flex-direction: row; } .md\:flex-col { flex-direction: column; } .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .md\:w-full { width: 100%; } .md\:w-1\/2 { width: 50%; } .md\:w-1\/3 { width: 33.333%; } .md\:w-2\/3 { width: 66.666%; } .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } .md\:text-sm { font-size: 0.875rem; } .md\:text-base { font-size: 1rem; } .md\:text-lg { font-size: 1.125rem; } .md\:text-2xl { font-size: 1.5rem; } } @media (min-width: 1024px) { .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:flex-row { flex-direction: row; } .lg\:flex-col { flex-direction: column; } .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:w-full { width: 100%; } .lg\:w-1\/2 { width: 50%; } .lg\:w-1\/3 { width: 33.333%; } .lg\:w-2\/3 { width: 66.666%; } .lg\:w-3\/4 { width: 75%; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } .lg\:text-lg { font-size: 1.125rem; } .lg\:text-2xl { font-size: 1.5rem; } .lg\:text-3xl { font-size: 1.875rem; } } @media (min-width: 1280px) { .xl\:block { display: block; } .xl\:flex { display: flex; } .xl\:grid { display: grid; } .xl\:hidden { display: none; } .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .xl\:px-8 { padding-left: 2rem; padding-right: 2rem; } .xl\:text-lg { font-size: 1.125rem; } .xl\:text-2xl { font-size: 1.5rem; } } /* Dark Theme - Industry Standard (Tailwind Slate Palette) */ body.dark-theme { background-color: #0f172a !important; /* slate-900 */ color: #f1f5f9 !important; /* slate-100 */ } /* Background Colors - EXCLUDE HEADER */ .dark-theme main .bg-white, .dark-theme div:not(header):not(header *).bg-white { background-color: #1e293b !important; } /* slate-800 */ .dark-theme main .bg-gray-50, .dark-theme div:not(header):not(header *).bg-gray-50 { background-color: #334155 !important; } /* slate-700 */ .dark-theme main .bg-gray-100, .dark-theme div:not(header):not(header *).bg-gray-100 { background-color: #475569 !important; } /* slate-600 */ .dark-theme main .bg-gray-200, .dark-theme div:not(header):not(header *).bg-gray-200 { background-color: #64748b !important; } /* slate-500 */ .dark-theme main .bg-gray-800, .dark-theme div:not(header):not(header *).bg-gray-800 { background-color: #475569 !important; } /* slate-600 - for darker sections */ /* Text Colors - High Contrast for Readability - EXCLUDE HEADER */ .dark-theme main .text-gray-900, .dark-theme div:not(header):not(header *).text-gray-900 { color: #f1f5f9 !important; } /* slate-100 */ .dark-theme main .text-gray-800, .dark-theme div:not(header):not(header *).text-gray-800 { color: #e2e8f0 !important; } /* slate-200 */ .dark-theme main .text-gray-700, .dark-theme div:not(header):not(header *).text-gray-700 { color: #cbd5e1 !important; } /* slate-300 */ .dark-theme main .text-gray-600, .dark-theme div:not(header):not(header *).text-gray-600 { color: #94a3b8 !important; } /* slate-400 */ .dark-theme main .text-gray-500, .dark-theme div:not(header):not(header *).text-gray-500 { color: #94a3b8 !important; } /* slate-400 */ .dark-theme main .text-gray-400, .dark-theme div:not(header):not(header *).text-gray-400 { color: #94a3b8 !important; } /* slate-400 */ /* Border Colors */ .dark-theme .border-gray-200 { border-color: #475569 !important; } /* slate-600 */ .dark-theme .border-gray-300 { border-color: #64748b !important; } /* slate-500 */ .dark-theme .border-gray-700 { border-color: #334155 !important; } /* slate-700 */ .dark-theme .border-b { border-bottom-color: #475569 !important; } .dark-theme .border-t { border-top-color: #475569 !important; } .dark-theme .border-t-2 { border-top-color: #64748b !important; } .dark-theme .border-l-4 { border-left-color: inherit !important; } /* Keep accent colors */ /* Shadows - Darker for depth */ .dark-theme .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } .dark-theme .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important; } .dark-theme .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important; } .dark-theme .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important; } .dark-theme .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important; } .dark-theme .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; } /* Alert/Badge Adjustments for Dark Theme */ .dark-theme .bg-green-50 { background-color: #064e3b !important; } /* green-900 */ .dark-theme .text-green-800 { color: #86efac !important; } /* green-300 */ .dark-theme .text-green-700 { color: #86efac !important; } /* green-300 */ .dark-theme .border-green-400 { border-color: #4ade80 !important; } /* green-400 */ .dark-theme .bg-yellow-50 { background-color: #78350f !important; } /* yellow-950 */ .dark-theme .bg-yellow-100 { background-color: #854d0e !important; } /* yellow-900 */ .dark-theme .text-yellow-800 { color: #fde047 !important; } /* yellow-300 */ .dark-theme .text-yellow-600 { color: #fde047 !important; } /* yellow-300 */ .dark-theme .bg-red-50 { background-color: #450a0a !important; } /* red-950 */ .dark-theme .bg-red-100 { background-color: #7f1d1d !important; } /* red-900 */ .dark-theme .text-red-800 { color: #fca5a5 !important; } /* red-300 */ .dark-theme .text-red-600 { color: #f87171 !important; } /* red-400 */ .dark-theme .text-red-700 { color: #fca5a5 !important; } /* red-300 */ .dark-theme .bg-blue-50 { background-color: #172554 !important; } /* blue-950 */ .dark-theme .bg-blue-100 { background-color: #1e3a8a !important; } /* blue-900 */ .dark-theme .text-blue-800 { color: #93c5fd !important; } /* blue-300 */ .dark-theme .text-blue-600 { color: #60a5fa !important; } /* blue-400 */ .dark-theme .text-blue-400 { color: #60a5fa !important; } /* blue-400 */ .dark-theme .bg-purple-600 { background-color: #7c3aed !important; } /* purple-600 stays */ .dark-theme .bg-orange-600 { background-color: #ea580c !important; } /* orange-600 stays */ /* NAVIGATION OVERRIDES - Keep navigation visible in dark theme */ /* Tables */ /* Light theme - lighter borders */ table { border-color: #e5e7eb !important; /* gray-200 */ } table tbody tr { border-color: #e5e7eb !important; /* gray-200 */ } .dark-theme table { border-color: #475569 !important; } .dark-theme table th { color: #cbd5e1 !important; background-color: #1e293b !important; } .dark-theme table td { color: #94a3b8 !important; } .dark-theme table tbody tr { border-color: #475569 !important; } /* Forms & Inputs */ /* Light theme defaults - lighter borders for cleaner look */ input, select, textarea { border-color: #e5e7eb !important; /* gray-200 - lighter default */ color: #111827 !important; /* gray-900 - ensure dark text in light theme */ } select option { color: #111827 !important; /* gray-900 - ensure option text is dark in light theme */ background-color: #ffffff !important; } .dark-theme select option { color: #f1f5f9 !important; background-color: #334155 !important; } .dark-theme input, .dark-theme select, .dark-theme textarea { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } .dark-theme input:focus, .dark-theme select:focus, .dark-theme textarea:focus { border-color: #ef4444 !important; outline: none !important; } .dark-theme input::placeholder, .dark-theme textarea::placeholder { color: #64748b !important; } /* Buttons - Keep vibrant colors */ .dark-theme .bg-red-600 { background-color: #dc2626 !important; } .dark-theme .bg-red-700 { background-color: #b91c1c !important; } .dark-theme .hover\:bg-red-700:hover { background-color: #b91c1c !important; } .dark-theme .hover\:bg-red-800:hover { background-color: #991b1b !important; } /* Links */ .dark-theme a:not([class*="bg-"]):not([class*="text-red"]):not([class*="text-blue"]) { color: #60a5fa !important; } /* Modals */ .dark-theme .fixed.inset-0.bg-gray-600, .dark-theme .fixed.inset-0.bg-black { background-color: rgba(0, 0, 0, 0.85) !important; } /* Theme Toggle Button */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 1000; background: #ef4444; color: white; border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); transition: all 0.3s; border: none; } .theme-toggle:hover { background: #dc2626; transform: scale(1.1); } .theme-toggle i { font-size: 1.25rem; } /* Ensure z-index hierarchy */ .dark-theme [style*="z-index"] { position: relative; } /* Hover Fixes - Ensure text stays visible on hover in dark mode */ /* Fix for hover:bg-gray-50 (used in search results, pagination, buttons) */ .dark-theme .hover\:bg-gray-50:hover { background-color: #334155 !important; /* slate-700 */ } .dark-theme .hover\:bg-gray-50:hover .text-gray-500, .dark-theme .hover\:bg-gray-50:hover .text-gray-400, .dark-theme .hover\:bg-gray-50:hover .text-gray-600, .dark-theme .hover\:bg-gray-50:hover .text-gray-700 { color: #cbd5e1 !important; /* slate-300 - lighter for contrast */ } .dark-theme .hover\:bg-gray-50:hover .text-gray-900, .dark-theme .hover\:bg-gray-50:hover .font-medium, .dark-theme .hover\:bg-gray-50:hover .font-semibold { color: #ffffff !important; /* Pure white for maximum contrast */ } /* Fix for hover:bg-gray-100 */ .dark-theme .hover\:bg-gray-100:hover { background-color: #334155 !important; /* slate-700 */ } .dark-theme .hover\:bg-gray-100:hover .text-gray-500, .dark-theme .hover\:bg-gray-100:hover .text-gray-400, .dark-theme .hover\:bg-gray-100:hover .text-gray-600, .dark-theme .hover\:bg-gray-100:hover .text-gray-700 { color: #cbd5e1 !important; /* slate-300 - lighter for contrast */ } .dark-theme .hover\:bg-gray-100:hover .text-gray-900, .dark-theme .hover\:bg-gray-100:hover .font-medium, .dark-theme .hover\:bg-gray-100:hover .font-semibold { color: #ffffff !important; /* Pure white for maximum contrast */ } /* Fix for dark:hover:bg-gray-700 (used in album page tracks) */ .dark-theme .dark\:hover\:bg-gray-700:hover { background-color: #334155 !important; /* slate-700 */ } .dark-theme .dark\:hover\:bg-gray-700:hover .text-gray-500, .dark-theme .dark\:hover\:bg-gray-700:hover .text-gray-400, .dark-theme .dark\:hover\:bg-gray-700:hover .dark\:text-gray-400 { color: #cbd5e1 !important; /* slate-300 - lighter for contrast */ } .dark-theme .dark\:hover\:bg-gray-700:hover .text-gray-900, .dark-theme .dark\:hover\:bg-gray-700:hover .dark\:text-white, .dark-theme .dark\:hover\:bg-gray-700:hover .font-medium { color: #ffffff !important; /* Pure white for maximum contrast */ } /* Group hover variants */ .dark-theme .dark\:group-hover\:text-gray-300 { color: #cbd5e1 !important; } .dark-theme .dark\:group-hover\:text-white { color: #ffffff !important; } /* Scrobble Button Styling - Album Page */ /* Light Theme */ button.scrobble-btn { padding: 1rem 1rem; margin: 0; border: 2px solid #e5e7eb; border-radius: 0.5rem; background-color: #ffffff; color: #111827; cursor: pointer; transition: all 0.2s ease; text-align: center; width: 100%; font-family: inherit; font-size: inherit; } button.scrobble-btn:hover { border-color: #dc2626; background-color: #dc2626; color: #ffffff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transform: scale(1.05); } button.scrobble-btn:hover .btn-title { color: #ffffff !important; } button.scrobble-btn:hover .btn-description { color: #ffffff !important; opacity: 0.9 !important; } button.scrobble-btn:active { transform: scale(0.98); } .btn-title { display: block; font-weight: 500; margin: 0.5rem 0 0.25rem 0; padding: 0; color: #111827; font-size: 1rem; } .btn-description { display: block; margin: 0.25rem 0 0 0; padding: 0; font-size: 0.875rem; opacity: 0.75; color: #111827; } /* Dark Theme */ .dark-theme button.scrobble-btn { background-color: #1e293b; border-color: #334155; color: #cbd5e1; } .dark-theme button.scrobble-btn:hover { background-color: #dc2626; border-color: #dc2626; color: #ffffff; } .dark-theme button.scrobble-btn:hover .btn-title { color: #ffffff !important; } .dark-theme button.scrobble-btn:hover .btn-description { color: #ffffff !important; } .dark-theme .btn-title { color: #f1f5f9 !important; } .dark-theme .btn-description { color: #cbd5e1 !important; } /* ============================================================================ NAVIGATION DARK THEME OVERRIDES - MUST BE LAST TO HAVE HIGHEST PRIORITY ============================================================================ */ /* Keep navigation RED and visible in dark theme */ body.dark-theme header.bg-red-600 { background-color: #dc2626 !important; } body.dark-theme header .bg-red-700 { background-color: #b91c1c !important; } body.dark-theme header.text-white, body.dark-theme header .text-white, body.dark-theme header a, body.dark-theme header button, body.dark-theme header h1, body.dark-theme header p, body.dark-theme header svg, body.dark-theme header svg path { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } body.dark-theme header .text-red-200 { color: #fecaca !important; } /* Keep dropdown white with dark text */ body.dark-theme header .bg-white { background-color: #ffffff !important; } body.dark-theme header .bg-white a, body.dark-theme header .bg-white i, body.dark-theme header .bg-white span { color: #111827 !important; } /* ============================================================================ TAILWIND DARK MODE CLASSES - FOR TAILWIND CDN COMPATIBILITY ============================================================================ */ /* These rules support Tailwind CDN's dark: prefix classes */ .dark\:bg-gray-800 { background-color: inherit; } .dark\:bg-gray-700 { background-color: inherit; } .dark\:text-gray-100 { color: inherit; } .dark\:text-gray-200 { color: inherit; } .dark\:text-gray-300 { color: inherit; } .dark\:text-gray-400 { color: inherit; } .dark\:hover\:bg-gray-700:hover { background-color: inherit; } /* Override for dark theme - these take effect when body has dark-theme class */ body.dark-theme .dark\:bg-gray-800, body.dark-theme .dark\:bg-gray-700 { background-color: #1e293b !important; /* slate-800 */ } body.dark-theme .dark\:text-gray-100 { color: #f1f5f9 !important; /* slate-100 */ } body.dark-theme .dark\:text-gray-200 { color: #e2e8f0 !important; /* slate-200 */ } body.dark-theme .dark\:text-gray-300 { color: #cbd5e1 !important; /* slate-300 */ } body.dark-theme .dark\:text-gray-400 { color: #94a3b8 !important; /* slate-400 */ } body.dark-theme .dark\:text-white { color: #ffffff !important; /* Pure white for maximum contrast */ } body.dark-theme .dark\:bg-gray-900 { background-color: #0f172a !important; /* slate-900 - dark background */ } /* Very specific rule for elements with both text-gray-900 and dark:text-white */ body.dark-theme .text-gray-900.dark\:text-white, body.dark-theme h1.text-gray-900.dark\:text-white, body.dark-theme h2.text-gray-900.dark\:text-white, body.dark-theme h3.text-gray-900.dark\:text-white, body.dark-theme .font-medium.text-gray-900.dark\:text-white, body.dark-theme .font-semibold.text-gray-900.dark\:text-white { color: #ffffff !important; /* Force white for headings and important text */ } /* Fix regular text-gray classes to be visible in dark mode - but NOT for elements with dark: variants */ body.dark-theme .text-gray-900:not([class*="dark:text-"]) { color: #f1f5f9 !important; /* slate-100 - light text */ } body.dark-theme .text-gray-800:not([class*="dark:text-"]) { color: #e2e8f0 !important; /* slate-200 */ } body.dark-theme .text-gray-700:not([class*="dark:text-"]) { color: #cbd5e1 !important; /* slate-300 */ } body.dark-theme .text-gray-600:not([class*="dark:text-"]) { color: #94a3b8 !important; /* slate-400 */ } body.dark-theme .text-gray-500:not([class*="dark:text-"]) { color: #94a3b8 !important; /* slate-400 */ } body.dark-theme .text-blue-700:not([class*="dark:text-"]) { color: #93c5fd !important; /* blue-300 - lighter for visibility */ } body.dark-theme .dark\:hover\:bg-gray-700:hover { background-color: #334155 !important; /* slate-700 */ } body.dark-theme .dark\:text-red-400 { color: #f87171 !important; /* red-400 */ } body.dark-theme .dark\:text-red-500 { color: #ef4444 !important; /* red-500 */ } body.dark-theme .dark\:text-blue-400 { color: #60a5fa !important; /* blue-400 */ } body.dark-theme .dark\:text-green-400 { color: #4ade80 !important; /* green-400 */ } body.dark-theme .dark\:border-gray-600 { border-color: #475569 !important; /* slate-600 */ } body.dark-theme .dark\:bg-gray-600 { background-color: #475569 !important; /* slate-600 */ } body.dark-theme .dark\:bg-blue-900 { background-color: #1e3a8a !important; /* blue-900 */ } body.dark-theme .dark\:text-blue-200 { color: #bfdbfe !important; /* blue-200 */ } /* Notification Dropdown Text Colors in Header (Dark Theme) */ body.dark-theme header #notificationDropdown .dark\:text-gray-100 { color: #f3f4f6 !important; /* gray-100 */ } body.dark-theme header #notificationDropdown .dark\:text-gray-300 { color: #d1d5db !important; /* gray-300 */ } body.dark-theme header #notificationDropdown .dark\:text-gray-400 { color: #9ca3af !important; /* gray-400 */ } body.dark-theme header #notificationDropdown .text-gray-900 { color: #111827 !important; /* Maintain in light mode */ } body.dark-theme header #notificationDropdown .dark\:text-gray-900 { color: #f3f4f6 !important; /* Override for dark mode */ } body.dark-theme .dark\:hover\:bg-gray-500:hover { background-color: #64748b !important; /* slate-500 */ } body.dark-theme .dark\:hover\:bg-blue-800:hover { background-color: #1e40af !important; /* blue-800 */ } /* Ensure button text with dark backgrounds stays visible */ body.dark-theme button.dark\:bg-gray-600 .text-gray-700, body.dark-theme button.dark\:bg-blue-900 .text-blue-700, body.dark-theme .dark\:bg-gray-600 .text-gray-700, body.dark-theme .dark\:bg-blue-900 .text-blue-700 { color: inherit !important; /* Use the dark: class color instead */ } /* ============================================================================ LIGHT THEME OVERRIDES - Must be last to override Tailwind CDN ============================================================================ */ /* FIXED: Don't force dark: classes to render in light mode */ /* dark: prefixed classes should only apply in dark mode, not in light mode */ /* Let Tailwind handle this naturally - dark: classes are ignored in light mode */ /* Only override if Tailwind CDN is incorrectly applying dark: classes in light mode */ body:not(.dark-theme) .dark\:bg-gray-800, html:not(.dark) .dark\:bg-gray-800 { background-color: inherit; /* Don't force to white - inherit from base class */ } body:not(.dark-theme) .dark\:bg-gray-700, html:not(.dark) .dark\:bg-gray-700 { background-color: inherit; } body:not(.dark-theme) .dark\:bg-gray-600, html:not(.dark) .dark\:bg-gray-600 { background-color: inherit; } body:not(.dark-theme) .dark\:text-gray-100, html:not(.dark) .dark\:text-gray-100 { color: inherit; } body:not(.dark-theme) .dark\:text-gray-200, html:not(.dark) .dark\:text-gray-200 { color: inherit; } body:not(.dark-theme) .dark\:text-gray-300, html:not(.dark) .dark\:text-gray-300 { color: inherit; } /* Enforce correct text colors in light theme when OS is in dark mode */ /* Prevents Tailwind CDN dark: prefixed classes from overriding via prefers-color-scheme */ body:not(.dark-theme) .text-blue-700 { color: #1d4ed8 !important; } body:not(.dark-theme) .text-green-700 { color: #15803d !important; } body:not(.dark-theme) .text-purple-700 { color: #7e22ce !important; } body:not(.dark-theme) .text-gray-700 { color: #374151 !important; } body:not(.dark-theme) .dark\:text-gray-400, html:not(.dark) .dark\:text-gray-400 { color: inherit; } body:not(.dark-theme) .dark\:text-blue-300, html:not(.dark) .dark\:text-blue-300 { color: inherit; } body:not(.dark-theme) .dark\:text-green-300, html:not(.dark) .dark\:text-green-300 { color: inherit; } body:not(.dark-theme) .dark\:text-purple-300, html:not(.dark) .dark\:text-purple-300 { color: inherit; } body:not(.dark-theme) .dark\:border-gray-600, html:not(.dark) .dark\:border-gray-600 { border-color: inherit; } body:not(.dark-theme) .dark\:border-gray-700, html:not(.dark) .dark\:border-gray-700 { border-color: inherit; } /* ============================================================================ LIGHT THEME BORDER OVERRIDES ============================================================================ */ /* Override Tailwind CDN border colors for lighter, more uniform appearance in light theme */ /* Use multiple selectors to increase specificity and override Tailwind CDN */ .border-gray-300, body .border-gray-300, html body .border-gray-300 { border-color: #e5e7eb !important; /* Unified light gray-200 */ } .border-gray-400, body .border-gray-400, html body .border-gray-400 { border-color: #e5e7eb !important; } .border-gray-500, body .border-gray-500, html body .border-gray-500 { border-color: #d1d5db !important; } .border-gray-600, body .border-gray-600, html body .border-gray-600 { border-color: #d1d5db !important; } .border-gray-700, body .border-gray-700, html body .border-gray-700 { border-color: #d1d5db !important; } .border-gray-200, body .border-gray-200, html body .border-gray-200 { border-color: #e5e7eb !important; } /* Divide colors for lists and grids */ .divide-gray-300 > * + *, body .divide-gray-300 > * + * { border-color: #e5e7eb !important; } .divide-gray-200 > * + *, body .divide-gray-200 > * + * { border-color: #e5e7eb !important; } /* Ring colors for focus states */ .ring-gray-300, body .ring-gray-300 { --tw-ring-color: #e5e7eb !important; } /* Keep dark theme borders as they are */ body.dark-theme .border-gray-300, body.dark-theme .border-gray-400, body.dark-theme .border-gray-500 { border-color: #64748b !important; /* slate-500 for dark theme */ } body.dark-theme .border-gray-600 { border-color: #475569 !important; /* slate-600 for dark theme */ } body.dark-theme .border-gray-700 { border-color: #334155 !important; /* slate-700 for dark theme */ } /* ============================================================================ FINAL OVERRIDE - WINS AGAINST TAILWIND CDN Must be last in file - Maximum specificity for light theme ============================================================================ */ /* Body background - subtle grey instead of white */ body:not(.dark-theme), html:not(.dark) body { background-color: #f9fafb !important; /* gray-50 */ } /* Light theme background colors - Force proper greys */ body:not(.dark-theme) .bg-gray-100, html:not(.dark) .bg-gray-100, body:not(.dark-theme) main .bg-gray-100, html:not(.dark) main .bg-gray-100 { background-color: #f3f4f6 !important; /* gray-100 - actual grey */ } body:not(.dark-theme) .bg-gray-50, html:not(.dark) .bg-gray-50, body:not(.dark-theme) main .bg-gray-50, html:not(.dark) main .bg-gray-50 { background-color: #f9fafb !important; /* gray-50 */ } body:not(.dark-theme) .bg-white, html:not(.dark) .bg-white { background-color: #ffffff !important; } /* Text colors - Ensure readability in light theme */ body:not(.dark-theme) .text-gray-900, html:not(.dark) .text-gray-900 { color: #111827 !important; /* Almost black - maximum contrast */ } body:not(.dark-theme) .text-gray-800, html:not(.dark) .text-gray-800 { color: #1f2937 !important; } body:not(.dark-theme) .text-gray-700, html:not(.dark) .text-gray-700 { color: #374151 !important; /* Dark grey - good readability */ } body:not(.dark-theme) .text-gray-600, html:not(.dark) .text-gray-600 { color: #4b5563 !important; /* Medium grey */ } body:not(.dark-theme) .text-gray-500, html:not(.dark) .text-gray-500 { color: #6b7280 !important; } body:not(.dark-theme) .text-gray-400, html:not(.dark) .text-gray-400 { color: #9ca3af !important; } /* Border colors - Visible in light theme */ body:not(.dark-theme) .border-gray-300, html:not(.dark) .border-gray-300 { border-color: #d1d5db !important; /* Actual gray-300 */ } body:not(.dark-theme) .border-gray-200, html:not(.dark) .border-gray-200 { border-color: #e5e7eb !important; /* gray-200 */ } body:not(.dark-theme) .border-gray-700, html:not(.dark) .border-gray-700 { border-color: #d1d5db !important; /* Make visible in light mode */ } /* Hover states - Visible backgrounds */ body:not(.dark-theme) .hover\:bg-gray-50:hover, html:not(.dark) .hover\:bg-gray-50:hover { background-color: #f9fafb !important; } body:not(.dark-theme) .hover\:bg-gray-100:hover, html:not(.dark) .hover\:bg-gray-100:hover { background-color: #f3f4f6 !important; } body:not(.dark-theme) .hover\:bg-blue-50:hover, html:not(.dark) .hover\:bg-blue-50:hover { background-color: #eff6ff !important; } /* Focus states */ body:not(.dark-theme) .focus\:ring-2:focus, html:not(.dark) .focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5) !important; /* Red focus ring */ } body:not(.dark-theme) .focus\:border-red-500:focus, html:not(.dark) .focus\:border-red-500:focus { border-color: #ef4444 !important; } /* Ensure dark: classes don't apply in light mode */ body:not(.dark-theme) [class*="dark:"], html:not(.dark) [class*="dark:"] { /* Dark classes are handled by their base classes in light mode */ } /* ============================================================================ FIX FOR DARK PARAGRAPH TEXT - Ensure readable contrast ============================================================================ */ /* Ensure all paragraph text is visible in dark theme - match theme-init.php pattern */ html.dark p, html.dark-theme p, body.dark-theme p { color: #cbd5e1 !important; /* slate-300 - good readability */ } /* Specific fix for nested div paragraphs that may inherit dark colors */ html.dark div div div p, html.dark-theme div div div p, body.dark-theme div div div p { color: #cbd5e1 !important; /* slate-300 */ } /* Override any text-gray classes on paragraphs in dark theme */ html.dark p.text-gray-900, html.dark-theme p.text-gray-900, body.dark-theme p.text-gray-900, html.dark p.text-gray-800, html.dark-theme p.text-gray-800, body.dark-theme p.text-gray-800, html.dark p.text-gray-700, html.dark-theme p.text-gray-700, body.dark-theme p.text-gray-700, html.dark p.text-gray-600, html.dark-theme p.text-gray-600, body.dark-theme p.text-gray-600, html.dark p.text-gray-500, html.dark-theme p.text-gray-500, body.dark-theme p.text-gray-500 { color: #cbd5e1 !important; /* slate-300 */ } /* Ensure paragraphs with specific dark: classes use appropriate colors */ html.dark p.dark\:text-gray-400, html.dark-theme p.dark\:text-gray-400, body.dark-theme p.dark\:text-gray-400 { color: #94a3b8 !important; /* slate-400 */ } html.dark p.dark\:text-gray-300, html.dark-theme p.dark\:text-gray-300, body.dark-theme p.dark\:text-gray-300 { color: #cbd5e1 !important; /* slate-300 */ } html.dark p.dark\:text-gray-200, html.dark-theme p.dark\:text-gray-200, body.dark-theme p.dark\:text-gray-200 { color: #e2e8f0 !important; /* slate-200 */ } /* ============================================================================ END FINAL OVERRIDE ============================================================================ */