/* ============================================================= 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; } /* Force explicit ON/OFF colors so the toggle never looks "on" while off (iOS WKWebView sometimes keeps the checked track color in both states). */ body[data-sp-route="settings"] button[role="switch"]:not([data-state="checked"]):not([aria-checked="true"]) { background-color: rgb(226,232,240) !important; } body[data-sp-route="settings"] button[role="switch"][data-state="checked"], body[data-sp-route="settings"] button[role="switch"][aria-checked="true"] { background-color: rgb(5,150,105) !important; } /* #4 — hide the "Volume Control" heading in the Adhan section */ body[data-sp-route="settings"] .sp-hide-volume-heading { display: none !important; } /* ---------- Sliders (Radix) — premium volume control ---------- */ body[data-sp-route="settings"] .sp-volume-slider, body[data-sp-route="settings"] [class*="slider"] [data-radix-slider-track] { position: relative; } body[data-sp-route="settings"] [data-radix-slider-track], body[data-sp-route="settings"] [data-orientation="horizontal"][class*="bg-secondary"] { height: 12px !important; border-radius: 999px !important; background: linear-gradient(180deg, #E5EBE9 0%, #D4DBD9 100%) !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(15, 23, 42, 0.04) !important; } body[data-sp-route="settings"] [data-radix-slider-range], body[data-sp-route="settings"] .absolute.h-full.bg-primary { background: linear-gradient(90deg, #10B981 0%, #14B8A6 50%, #047857 100%) !important; border-radius: 999px !important; box-shadow: 0 0 12px rgba(16,185,129,0.35), inset 0 1px 1px rgba(255,255,255,0.30) !important; } body[data-sp-route="settings"] [role="slider"] { width: 28px !important; height: 28px !important; background: #FFFFFF !important; border: 3px solid #10B981 !important; box-shadow: 0 6px 14px -3px rgba(6, 95, 70, 0.45), 0 2px 4px rgba(15, 23, 42, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.65) !important; transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease !important; outline: none !important; } body[data-sp-route="settings"] [role="slider"]:hover { transform: scale(1.08); box-shadow: 0 8px 18px -3px rgba(6, 95, 70, 0.50), 0 2px 4px rgba(15, 23, 42, 0.10) !important; } body[data-sp-route="settings"] [role="slider"]:active, body[data-sp-route="settings"] [role="slider"][data-state="active"] { transform: scale(1.18); border-color: #047857 !important; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.15), 0 10px 22px -3px rgba(6, 95, 70, 0.55) !important; } body[data-sp-route="settings"] [role="slider"]:focus-visible { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25), 0 6px 14px -3px rgba(6, 95, 70, 0.45) !important; } /* Dark-mode adjustments */ html.dark body[data-sp-route="settings"] [data-radix-slider-track], .dark body[data-sp-route="settings"] [data-radix-slider-track] { background: linear-gradient(180deg, #1F2937 0%, #111827 100%) !important; } html.dark body[data-sp-route="settings"] [role="slider"], .dark body[data-sp-route="settings"] [role="slider"] { background: #0F172A !important; border-color: #34D399 !important; } /* Volume row a touch more breathing room */ body[data-sp-route="settings"] .sp-volume-row { gap: 1rem !important; padding: 0.5rem 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; } /* ---------- Location / coord tidy-up (tagged from settings-enhance.js) ---------- - .sp-hide-coord — applied to lat/lng spans and "Coordinates:" lines on the Settings AND Qibla pages. Class is only ever added by our JS, so keeping the rule global is safe — no other code uses this class. - .sp-location-card — applied to the Settings Location card so we can tighten spacing now that a row of coords is gone. ----------------------------------------------------------------------------- */ .sp-hide-coord { display: none !important; } /* When the coords line is gone, the parent flex row loses its only child; keep the row's vertical rhythm so the buttons below don't jump up. */ body[data-sp-route="settings"] .sp-location-card .opacity-80:empty, body[data-sp-route="settings"] .sp-location-card .text-ui-xs:empty { display: none; } /* Subtle grouping: the "Refresh now" + "Manual Search" buttons read as a single action row distinct from the city label above. */ body[data-sp-route="settings"] .sp-location-card .mt-1.flex.space-x-1 { gap: 0.5rem; margin-top: 0.5rem !important; } /* Slightly larger touch targets for the GPS buttons on mobile. */ body[data-sp-route="settings"] .sp-location-card .mt-1.flex.space-x-1 > button { min-height: 32px; padding-left: 0.625rem !important; padding-right: 0.625rem !important; } /* ============================================================= 2026-06-01 fixes (1, 3, 6) ============================================================= */ /* Fix 1 — remove the volume slider/control row from the Adhan section. The bundle already tags that row .sp-volume-row. */ body[data-sp-route="settings"] .sp-volume-row { display: none !important; } /* Fix 6 — the removed one-shot "Get Fresh GPS" re-detect button. */ .sp-hide-gps-btn { display: none !important; } /* 2026-06-02 — GPS coordinates removed entirely (per request). The raw lat/long mono line + its "•" separator are always hidden now (was: shown when auto on). */ .sp-coord { display: none !important; } /* unscoped: hides the instant settings-enhance tags it (no flash) */ /* Fix 6 — the auto-detect toggle reads clearly green when ON. */ .sp-location-card button[role="switch"][data-state="checked"], .sp-location-card button[role="switch"][aria-checked="true"] { background-color: #059669 !important; border-color: #059669 !important; } /* Always hide the duplicated "Coordinates: x,y" line (the bare mono line above already shows them when auto-detect is on). */ .sp-coord-dup { display: none !important; } /* 2026-06-02 — SINGLE-TOGGLE LOCATION. Auto-detect is the one control: while it's ON, hide every manual-entry affordance (the "Manual Search" button, its text field and its results wrap). Turning Auto OFF reveals them so the user can pick a location manually. JS tags .sp-manual-* + sets data-sp-auto. */ .sp-location-card[data-sp-auto="on"] .sp-manual-trigger, .sp-location-card[data-sp-auto="on"] .sp-manual-input, .sp-location-card[data-sp-auto="on"] .sp-manual-wrap { display: none !important; } /* When auto is OFF, make sure the manual button is clearly visible/tappable. */ .sp-location-card[data-sp-auto="off"] .sp-manual-trigger { display: inline-flex !important; } /* ============================================================= 2026-06-01 — iOS-native settings refresh (fix 4) Scoped to the settings route. Makes the select rows, fields, buttons and section rhythm read like a native iOS grouped list while keeping the existing brand palette. ============================================================= */ /* Comfortable, momentum-friendly rhythm between section cards. */ body[data-sp-route="settings"] .max-w-2xl > .space-y-6 > *, body[data-sp-route="settings"] .space-y-6 > * + * { } body[data-sp-route="settings"] .elevated-card { margin-bottom: 0.95rem !important; } /* Card headers: a touch more breathing room, crisp hairline. */ body[data-sp-route="settings"] .elevated-card > div:first-child { padding-top: 1rem !important; padding-bottom: 0.7rem !important; } /* Field labels read as iOS grouped-list captions. */ body[data-sp-route="settings"] label[for], body[data-sp-route="settings"] .font-ui.text-ui-sm.font-semibold { font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: -0.005em; opacity: 0.92; } /* Select rows (calculation method, asr, high-latitude, language, adhan) styled as tappable iOS list rows: full-height target, soft fill, clear chevron. */ body[data-sp-route="settings"] button[role="combobox"] { min-height: 46px !important; border-radius: 13px !important; background: rgba(248, 250, 249, 0.9) !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; font-size: 0.95rem !important; font-weight: 500 !important; padding-left: 0.9rem !important; padding-right: 0.85rem !important; box-shadow: 0 1px 1.5px rgba(15, 23, 42, 0.04) !important; transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease !important; } body[data-sp-route="settings"] button[role="combobox"]:active { background: rgba(236, 241, 239, 0.95) !important; transform: scale(0.992); } body[data-sp-route="settings"] button[role="combobox"] > svg.lucide-chevron-down { opacity: 0.45 !important; } html.dark body[data-sp-route="settings"] button[role="combobox"] { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; } /* The Radix Select popover: iOS sheet-like rounded card. */ [role="listbox"], [data-radix-select-viewport], [data-radix-popper-content-wrapper] [role="listbox"] { border-radius: 14px !important; } [role="option"] { min-height: 42px !important; border-radius: 9px !important; font-size: 0.95rem !important; } /* Text fields (Manual Search) — native rounded field. */ body[data-sp-route="settings"] input[type="text"], body[data-sp-route="settings"] input:not([type]) { min-height: 44px !important; border-radius: 13px !important; background: rgba(248, 250, 249, 0.9) !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; font-size: 0.95rem !important; padding-left: 0.9rem !important; } body[data-sp-route="settings"] input[type="text"]:focus { border-color: #10B981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.16) !important; outline: none !important; } /* Secondary/outline buttons (Manual Search, Install) → iOS tinted pill. */ body[data-sp-route="settings"] .sp-location-card button:not([role="switch"]):not(.sp-hide-gps-btn) { min-height: 38px !important; border-radius: 11px !important; font-weight: 600 !important; } /* App theme-color swatches: even grid, comfy tap targets. */ body[data-sp-route="settings"] .grid button[style*="background"] { border-radius: 50% !important; } /* Segmented controls (Qibla method, etc.) keep their look but align radius. */ body[data-sp-route="settings"] .sp-qm-seg { border-radius: 13px !important; } /* ============================================================= 2026-06-02 — Settings overhaul batch #1 toggle off-state · #2 native location field · #4 adhan player · #5 About removal. (Paired with settings-enhance.js tags.) ============================================================= */ /* #5 — fully removed cards (About) + their group label. */ body[data-sp-route="settings"] .sp-hide-card { display: none !important; } /* 2026-06-02 — remove the small-caps section header labels entirely (LOCATION / PRAYER CALCULATION / APPEARANCE / ADHAN / …). Enhancer no longer injects them; this also hides any left by a cached older enhancer build. */ body[data-sp-route="settings"] .sp-grp-label { display: none !important; } /* #4 — hide the bundle's own adhan sub-cards (selector chrome, the yellow hint, the "Volume Control" card and the raw player with "Quality: high"). The