/* ============================================================= SalatiPal — Settings page polish (scoped, no global theme) Activated only when . Keeps existing color palette; refines typography, spacing, sliders, switches, and the adhan-player section. ============================================================= */ body[data-sp-route="settings"] { --sp2-radius: 18px; --sp2-radius-sm: 12px; --sp2-line: rgba(15, 23, 42, 0.08); --sp2-line-strong: rgba(15, 23, 42, 0.14); --sp2-shadow-1: 0 1px 2px rgba(6, 78, 59, 0.04), 0 2px 6px -2px rgba(6, 78, 59, 0.05); --sp2-shadow-2: 0 8px 22px -8px rgba(6, 78, 59, 0.12), 0 3px 8px -4px rgba(6, 78, 59, 0.06); --sp2-font: 'Outfit', 'Plus Jakarta Sans', 'Poppins', 'Inter', system-ui, sans-serif; } /* ---------- Typography ---------- */ body[data-sp-route="settings"] .page-container, body[data-sp-route="settings"] [class*="page-container"] { font-family: var(--sp2-font); } body[data-sp-route="settings"] .font-heading, body[data-sp-route="settings"] h1, body[data-sp-route="settings"] h2, body[data-sp-route="settings"] h3 { font-family: var(--sp2-font) !important; letter-spacing: -0.012em !important; font-weight: 700 !important; } body[data-sp-route="settings"] .text-heading-md { font-size: 1.05rem !important; line-height: 1.35 !important; } body[data-sp-route="settings"] .text-heading-sm { font-size: 0.95rem !important; line-height: 1.3 !important; } /* ---------- Cards ---------- */ body[data-sp-route="settings"] [class*="backdrop-blur"][class*="bg-white"], body[data-sp-route="settings"] .elevated-card { border-radius: var(--sp2-radius) !important; box-shadow: var(--sp2-shadow-2) !important; border-color: var(--sp2-line) !important; } body[data-sp-route="settings"] [class*="backdrop-blur"] [class*="CardHeader"], body[data-sp-route="settings"] .CardHeader, body[data-sp-route="settings"] [class*="card-header"] { padding-bottom: 0.5rem !important; } /* Tighten spacing between cards */ body[data-sp-route="settings"] .mb-6 { margin-bottom: 1rem !important; } body[data-sp-route="settings"] .space-y-2 > * + * { margin-top: 0.625rem !important; } /* ---------- Switches (Radix) — keep colors, refine shape ---------- */ body[data-sp-route="settings"] button[role="switch"] { transform: scale(1.06); transition: background-color .18s ease, box-shadow .18s ease !important; } body[data-sp-route="settings"] button[role="switch"][data-state="checked"] { box-shadow: 0 4px 12px -4px rgba(16,185,129,0.45) !important; } /* ---------- Sliders (Radix) ---------- */ body[data-sp-route="settings"] [data-radix-slider-track], body[data-sp-route="settings"] [data-orientation="horizontal"][class*="bg-secondary"] { height: 8px !important; border-radius: 999px !important; } body[data-sp-route="settings"] [data-radix-slider-range], body[data-sp-route="settings"] .absolute.h-full.bg-primary { border-radius: 999px !important; } body[data-sp-route="settings"] [role="slider"] { width: 22px !important; height: 22px !important; box-shadow: 0 4px 10px -2px rgba(6,95,70,0.30), 0 1px 2px rgba(0,0,0,0.08) !important; transition: transform .15s ease, box-shadow .2s ease !important; } body[data-sp-route="settings"] [role="slider"]:active { transform: scale(1.1); } /* Volume row a touch more breathing room */ body[data-sp-route="settings"] .sp-volume-row { gap: 0.875rem !important; padding: 0.25rem 0 !important; } body[data-sp-route="settings"] .sp-volume-row > span { font-feature-settings: "tnum" 1; font-weight: 700 !important; } /* ---------- Radix Select trigger ---------- */ body[data-sp-route="settings"] [data-radix-select-trigger] { border-radius: var(--sp2-radius-sm) !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body[data-sp-route="settings"] [data-radix-select-trigger][data-state="open"] { box-shadow: 0 0 0 4px rgba(16,185,129,0.14) !important; } /* ---------- Adhan player cleanup (hide noise) ---------- */ /* Yellow "Click any audio button below to enable playback" prompt — hidden */ body[data-sp-route="settings"] [class*="bg-yellow-50"][class*="border-yellow-200"], body[data-sp-route="settings"] [class*="bg-yellow-50"][class*="dark:bg-yellow-900"] { display: none !important; } /* JS-tagged duration cells that contain "Unknown" — see settings-enhance.js */ body[data-sp-route="settings"] .sp-hide-unknown { display: none !important; } /* ---------- Custom inline adhan list ---------- */ body[data-sp-route="settings"] .sp-adhan-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } body[data-sp-route="settings"] .sp-adhan-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--sp2-line); background: rgba(255, 255, 255, 0.85); border-radius: var(--sp2-radius-sm); transition: border-color .18s ease, transform .15s ease, box-shadow .2s ease; } body[data-sp-route="settings"] .sp-adhan-row:hover { border-color: rgba(16, 185, 129, 0.30); box-shadow: var(--sp2-shadow-1); } body[data-sp-route="settings"] .sp-adhan-row.is-selected { border-color: rgba(16, 185, 129, 0.55); background: rgba(236, 253, 245, 0.85); box-shadow: 0 6px 14px -8px rgba(16,185,129,0.35); } body[data-sp-route="settings"] .sp-adhan-row.is-playing { border-color: rgba(16, 185, 129, 0.55); } html.dark body[data-sp-route="settings"] .sp-adhan-row, .dark body[data-sp-route="settings"] .sp-adhan-row { background: rgba(17, 24, 39, 0.55); border-color: rgba(148, 163, 184, 0.18); } html.dark body[data-sp-route="settings"] .sp-adhan-row.is-selected, .dark body[data-sp-route="settings"] .sp-adhan-row.is-selected { background: rgba(6, 78, 59, 0.30); border-color: rgba(16, 185, 129, 0.55); } body[data-sp-route="settings"] .sp-adhan-meta { flex: 1 1 auto; min-width: 0; } body[data-sp-route="settings"] .sp-adhan-name { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; color: #0f172a; font-family: var(--sp2-font); } html.dark body[data-sp-route="settings"] .sp-adhan-name, .dark body[data-sp-route="settings"] .sp-adhan-name { color: #e5e7eb; } body[data-sp-route="settings"] .sp-adhan-sub { font-size: 0.75rem; color: rgba(15, 23, 42, 0.55); margin-top: 1px; } html.dark body[data-sp-route="settings"] .sp-adhan-sub, .dark body[data-sp-route="settings"] .sp-adhan-sub { color: rgba(229, 231, 235, 0.55); } body[data-sp-route="settings"] .sp-adhan-default-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: linear-gradient(135deg, #10B981, #047857); color: #fff; letter-spacing: 0.02em; } body[data-sp-route="settings"] .sp-adhan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 34px; padding: 0 0.75rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; font-family: var(--sp2-font); cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; -webkit-tap-highlight-color: transparent; white-space: nowrap; flex-shrink: 0; } body[data-sp-route="settings"] .sp-adhan-btn:active { transform: translateY(1px) scale(0.98); } body[data-sp-route="settings"] .sp-adhan-btn-play { background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.30); } body[data-sp-route="settings"] .sp-adhan-btn-play:hover { background: rgba(16, 185, 129, 0.18); } body[data-sp-route="settings"] .sp-adhan-btn-play.is-playing { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-color: rgba(185,28,28,0.45); box-shadow: 0 4px 12px -4px rgba(239,68,68,0.45); } body[data-sp-route="settings"] .sp-adhan-btn-select { background: linear-gradient(135deg, #10B981, #047857); color: #fff; border-color: rgba(6, 95, 70, 0.35); box-shadow: 0 4px 12px -4px rgba(16,185,129,0.40); } body[data-sp-route="settings"] .sp-adhan-btn-select:hover { filter: brightness(1.04); } body[data-sp-route="settings"] .sp-adhan-btn-select.is-selected { background: rgba(16, 185, 129, 0.10); color: #047857; border-color: rgba(16, 185, 129, 0.40); box-shadow: none; cursor: default; } html.dark body[data-sp-route="settings"] .sp-adhan-btn-play, .dark body[data-sp-route="settings"] .sp-adhan-btn-play { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; } html.dark body[data-sp-route="settings"] .sp-adhan-btn-select.is-selected, .dark body[data-sp-route="settings"] .sp-adhan-btn-select.is-selected { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } /* Empty state */ body[data-sp-route="settings"] .sp-adhan-list-empty { padding: 1rem; text-align: center; color: rgba(15, 23, 42, 0.55); font-size: 0.875rem; }