/* ═══════════════════════════════════════════════════════════════════ theme-light.css — Light Mode Override Applied via [data-theme="light"] on the element. All rules are prefixed with [data-theme="light"] to avoid leaking into the default dark theme. ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. CSS Variable Overrides ─── */ [data-theme="light"] { /* Backgrounds */ --bg-deep: #f0f2f8; --bg-mid: #e4e8f0; --bg-card: rgba(255, 255, 255, 0.75); --bg-card-hover: rgba(255, 255, 255, 0.92); /* Borders */ --border-card: rgba(0, 0, 0, 0.08); --border-card-hover: rgba(0, 0, 0, 0.16); /* Text */ --text-primary: #1a1a2e; --text-secondary: rgba(26, 26, 46, 0.68); --text-muted: rgba(26, 26, 46, 0.38); /* Accent — keep same hues, slightly bolder glows for light bg */ --gold: #d4a017; --gold-light: #f4c430; --gold-glow: rgba(212, 160, 23, 0.30); --purple: #6c5ce7; --purple-glow: rgba(108, 92, 231, 0.25); --blue: #3a5cf0; --blue-glow: rgba(58, 92, 240, 0.25); --cyan: #0ea5c8; --fajr: #e07830; --fajr-glow: rgba(224, 120, 48, 0.28); --sunrise: #e08a50; --success: #2eada6; --danger: #e05555; } /* ─── 2. Smooth transition on theme switch ─── */ [data-theme="light"] body, [data-theme="light"] .card, [data-theme="light"] .nav-link, [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] button { transition: background-color 0.35s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* ─── 3. Body Background ─── */ [data-theme="light"] body { background: linear-gradient(160deg, #edf0f8 0%, #e2e8f2 40%, #d8e0ef 100%); color: var(--text-primary); } /* ─── 4. Hide Stars ─── */ [data-theme="light"] #stars-container { display: none; } /* ─── 5. Scrollbar ─── */ [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); } /* ─── 6. Cards — add depth via shadow instead of glow ─── */ [data-theme="light"] .card { background: var(--bg-card); border-color: var(--border-card); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05); } [data-theme="light"] .card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06); } /* ─── 7. Page Navigation ─── */ [data-theme="light"] .nav-link { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 0, 0, 0.10); color: var(--text-secondary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .nav-link:hover { background: rgba(255, 255, 255, 0.95); color: var(--text-primary); } [data-theme="light"] .nav-link.active { background: rgba(108, 92, 231, 0.12); border-color: rgba(108, 92, 231, 0.35); color: var(--purple); box-shadow: 0 2px 10px rgba(108, 92, 231, 0.15); } /* ─── 8. Inputs, Selects, Textareas ─── */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .af-input, [data-theme="light"] .ctrl-input { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.14) !important; color: var(--text-primary) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus, [data-theme="light"] .af-input:focus { border-color: var(--purple) !important; box-shadow: 0 0 0 3px var(--purple-glow) !important; } /* Date/time picker icon — make it dark for light bg */ [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0) brightness(0.5); } /* ─── 9. Date Navigation (#schedule-date) ─── */ [data-theme="light"] #schedule-date { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.14) !important; } /* ─── 10. Day Nav Buttons ─── */ [data-theme="light"] .btn-nav-day { background: rgba(108, 92, 231, 0.08) !important; border-color: rgba(108, 92, 231, 0.25) !important; } [data-theme="light"] .btn-nav-day:hover { background: rgba(108, 92, 231, 0.16) !important; box-shadow: 0 0 12px var(--purple-glow); } /* ─── 11. Controls Row ─── */ [data-theme="light"] .controls-row { background: rgba(255, 255, 255, 0.55) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .ctrl-sep { background: rgba(0, 0, 0, 0.10) !important; } [data-theme="light"] .ctrl-btn { background: rgba(108, 92, 231, 0.09) !important; border-color: rgba(108, 92, 231, 0.20) !important; } [data-theme="light"] .ctrl-btn:hover { background: rgba(108, 92, 231, 0.18) !important; } /* ─── 12. Prayer Time Cards ─── */ [data-theme="light"] .prayer-time-card { background: rgba(255, 255, 255, 0.65) !important; border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); } [data-theme="light"] .prayer-card { background: rgba(255, 255, 255, 0.65) !important; border-color: rgba(0, 0, 0, 0.07) !important; } [data-theme="light"] .prayer-card.isha-card { border-color: rgba(108, 92, 231, 0.20) !important; } [data-theme="light"] .prayer-card.fajr-card { border-color: rgba(224, 120, 48, 0.20) !important; } /* ─── 13. Work Segments / Timeline ─── */ [data-theme="light"] .timeline-bar { background: rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .seg-awake { background: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .seg-isha { background: rgba(108, 92, 231, 0.10) !important; } [data-theme="light"] .summary-divider { background: rgba(0, 0, 0, 0.10) !important; } /* ─── 14. Option Cards ─── */ [data-theme="light"] .option-card { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(0, 0, 0, 0.09) !important; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); } [data-theme="light"] .option-card:hover { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10); } [data-theme="light"] .option-selected { background: rgba(108, 92, 231, 0.12) !important; box-shadow: 0 0 16px var(--purple-glow), inset 0 0 12px rgba(108, 92, 231, 0.06) !important; } /* ─── 15. Settings Toggle ─── */ [data-theme="light"] .settings-toggle { background: rgba(255, 255, 255, 0.80); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); } [data-theme="light"] .settings-toggle:hover { box-shadow: 0 4px 18px rgba(108, 92, 231, 0.20); } /* ─── 16. Settings Overlay & Modal ─── */ [data-theme="light"] .settings-overlay { background: rgba(0, 0, 0, 0.30) !important; } [data-theme="light"] .settings-modal { background: #f5f7fc; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18); } /* Range sliders — now handled by tick-slider.css light theme rule */ /* Toggle group buttons */ [data-theme="light"] .toggle-group { border-color: rgba(108, 92, 231, 0.25) !important; } [data-theme="light"] .toggle-btn { background: rgba(255, 255, 255, 0.60) !important; color: var(--text-muted) !important; } [data-theme="light"] .toggle-btn:not(:last-child) { border-left-color: rgba(108, 92, 231, 0.15) !important; } [data-theme="light"] .toggle-btn.active { background: rgba(108, 92, 231, 0.15) !important; color: var(--purple) !important; } [data-theme="light"] .toggle-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.85) !important; color: var(--text-secondary) !important; } /* Checkbox */ [data-theme="light"] .checkbox-custom { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(224, 120, 48, 0.40) !important; } /* ─── 17. Planner Modal ─── */ [data-theme="light"] .planner-overlay { background: rgba(0, 0, 0, 0.30) !important; } [data-theme="light"] .planner-modal { background: #f5f7fc; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12); } [data-theme="light"] .planner-header { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .planner-footer { border-top-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .planner-close { background: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .planner-close:hover { background: rgba(224, 85, 85, 0.14) !important; } /* Work period blocks */ [data-theme="light"] .pl-period { background: rgba(255, 255, 255, 0.60) !important; border-color: rgba(46, 173, 166, 0.15) !important; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); } [data-theme="light"] .pl-period-header { background: rgba(46, 173, 166, 0.06) !important; border-bottom-color: rgba(46, 173, 166, 0.08) !important; } [data-theme="light"] .pl-check-box { background: rgba(255, 255, 255, 0.80) !important; } [data-theme="light"] .pl-period-disabled { opacity: 0.5; } [data-theme="light"] .pl-period-disabled .pl-period-header { background: rgba(0, 0, 0, 0.02) !important; } [data-theme="light"] .pl-bar { background: rgba(46, 173, 166, 0.08) !important; border-color: rgba(46, 173, 166, 0.14) !important; } [data-theme="light"] .pl-add-btn { border-top-color: rgba(46, 173, 166, 0.18) !important; } [data-theme="light"] .pl-add-btn:hover { background: rgba(46, 173, 166, 0.05) !important; } [data-theme="light"] .pl-header-bedtime { background: rgba(108, 92, 231, 0.07) !important; border-bottom-color: rgba(108, 92, 231, 0.10) !important; } [data-theme="light"] .pl-bar-bedtime { background: rgba(108, 92, 231, 0.07) !important; border-color: rgba(108, 92, 231, 0.12) !important; } [data-theme="light"] .pl-seg-bedtime { background: rgba(108, 92, 231, 0.09) !important; } [data-theme="light"] .pl-seg-work { background: rgba(46, 173, 166, 0.09) !important; } [data-theme="light"] .pl-seg-work:hover { background: rgba(46, 173, 166, 0.18) !important; } /* ─── 18. Activity Form Modals ─── */ [data-theme="light"] .activity-form-overlay, [data-theme="light"] .custom-preset-overlay, [data-theme="light"] .confirm-overlay { background: rgba(0, 0, 0, 0.30) !important; } [data-theme="light"] .activity-form-modal, [data-theme="light"] .custom-preset-modal { background: #f5f7fc; border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16); } [data-theme="light"] .af-header { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .af-preset { background: rgba(255, 255, 255, 0.70) !important; border-color: rgba(0, 0, 0, 0.10) !important; color: var(--text-secondary) !important; } [data-theme="light"] .af-preset:hover { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(0, 0, 0, 0.18) !important; } [data-theme="light"] .af-preset.af-preset-selected { border-color: var(--success) !important; background: rgba(46, 173, 166, 0.10) !important; color: var(--success) !important; } [data-theme="light"] .af-preset-add { border-color: rgba(0, 0, 0, 0.15) !important; color: var(--text-muted) !important; } [data-theme="light"] .af-preset-add:hover { border-color: var(--success) !important; color: var(--success) !important; } /* Custom preset icon/color pickers */ [data-theme="light"] .cp-icon-btn { background: rgba(255, 255, 255, 0.70) !important; border-color: rgba(0, 0, 0, 0.10) !important; } [data-theme="light"] .cp-icon-btn:hover { border-color: rgba(0, 0, 0, 0.22) !important; } [data-theme="light"] .cp-icon-btn.cp-selected { border-color: var(--success) !important; background: rgba(46, 173, 166, 0.10) !important; } [data-theme="light"] .cp-color-btn.cp-selected { border-color: #333 !important; } /* ─── 19. Mobile Timeline ─── */ [data-theme="light"] .mt-period-header { background: rgba(46, 173, 166, 0.06) !important; border-color: rgba(46, 173, 166, 0.14) !important; } [data-theme="light"] .mt-period-current .mt-period-header { background: rgba(46, 173, 166, 0.10) !important; border-color: rgba(46, 173, 166, 0.28) !important; } [data-theme="light"] .mt-period-disabled .mt-period-header { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .mt-edit-btn { background: rgba(46, 173, 166, 0.08) !important; border-color: rgba(46, 173, 166, 0.18) !important; } [data-theme="light"] .mt-label::after { background: rgba(0, 0, 0, 0.14) !important; border-color: rgba(0, 0, 0, 0.10) !important; } [data-theme="light"] .mt-period-sep::before { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.12) 0, rgba(0, 0, 0, 0.12) 3px, transparent 3px, transparent 7px ) !important; } [data-theme="light"] .mt-line { background: rgba(0, 0, 0, 0.10) !important; } [data-theme="light"] .mt-timer { background: var(--bg-mid) !important; border-color: rgba(212, 160, 23, 0.30) !important; } [data-theme="light"] .btn-view-toggle { background: rgba(108, 92, 231, 0.09) !important; border-color: rgba(108, 92, 231, 0.20) !important; } [data-theme="light"] .btn-view-toggle:hover { background: rgba(108, 92, 231, 0.18) !important; } /* ─── 20. Smart Table (Sleep Calculator) ─── */ [data-theme="light"] .smart-table th { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .smart-table td { border-bottom-color: rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .smart-table tbody tr:hover { background: rgba(108, 92, 231, 0.06) !important; } /* ─── 21. Smart Input Row (Sleep Calculator) ─── */ [data-theme="light"] .smart-input-row { background: rgba(108, 92, 231, 0.05) !important; border-color: rgba(108, 92, 231, 0.12) !important; } [data-theme="light"] .period2-start-row { background: rgba(224, 120, 48, 0.05) !important; border-color: rgba(224, 120, 48, 0.12) !important; } /* ─── 22. Info Items ─── */ [data-theme="light"] .info-item { background: rgba(255, 255, 255, 0.60) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } [data-theme="light"] .pp-pie-section { background: rgba(255, 255, 255, 0.50) !important; border-color: rgba(0, 0, 0, 0.07) !important; } [data-theme="light"] .pp-pie-inner { background: #eceff6 !important; } [data-theme="light"] .pp-countdown.pp-cd-done { background: rgba(108, 92, 231, 0.06) !important; border-color: rgba(108, 92, 231, 0.14) !important; } [data-theme="light"] .pp-pie-next .pp-pie-value { background: rgba(46, 173, 166, 0.10) !important; } [data-theme="light"] .pp-pie-prev .pp-pie-value { background: rgba(212, 160, 23, 0.10) !important; } /* ─── 22b. Day Stats (إحصائيات يومك) ─── */ [data-theme="light"] .ds-item { background: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .ds-bar { opacity: 0.12 !important; } [data-theme="light"] .ds-total { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* ─── 23. Analysis Page — Stat Cards ─── */ [data-theme="light"] .stat-card { background: rgba(255, 255, 255, 0.70) !important; border-color: rgba(0, 0, 0, 0.07) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); } [data-theme="light"] .stat-card:hover { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.09); } /* ─── 24. Fajr Note ─── */ [data-theme="light"] .fajr-note { background: rgba(224, 120, 48, 0.07) !important; border-color: rgba(224, 120, 48, 0.16) !important; } /* ─── 25. No-Period2 icon ─── */ [data-theme="light"] .no-period2-icon { background: rgba(0, 0, 0, 0.06) !important; } /* ─── 26. Focus Icon background ─── */ [data-theme="light"] .focus-icon { background: rgba(0, 0, 0, 0.08) !important; } /* ─── 27. Stat Card in planner period ─── */ [data-theme="light"] .ptc-next { background: rgba(46, 173, 166, 0.12) !important; } [data-theme="light"] .ptc-prev { background: rgba(212, 160, 23, 0.10) !important; } [data-theme="light"] .ptc-active-next { background: rgba(46, 173, 166, 0.07) !important; box-shadow: 0 0 10px rgba(46, 173, 166, 0.12) !important; } [data-theme="light"] .ptc-active-prev { background: rgba(212, 160, 23, 0.04) !important; } /* ─── 28. Btn-inline (inline action buttons) ─── */ [data-theme="light"] .btn-inline { background: rgba(108, 92, 231, 0.10) !important; border-color: rgba(108, 92, 231, 0.24) !important; } [data-theme="light"] .btn-inline:hover { background: rgba(108, 92, 231, 0.18) !important; } [data-theme="light"] .btn-pick { background: rgba(108, 92, 231, 0.10) !important; border-color: rgba(108, 92, 231, 0.24) !important; } [data-theme="light"] .btn-pick:hover { background: rgba(108, 92, 231, 0.20) !important; } /* ─── 29. Theme Toggle Button ─── */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 50px; height: 50px; background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-card); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; z-index: 99999; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.35s ease, border-color 0.35s ease; color: var(--text-primary); line-height: 1; } .theme-toggle:hover { transform: scale(1.12); box-shadow: 0 0 20px var(--gold-glow); } .theme-toggle:active { transform: scale(0.95); } /* Light mode variant of toggle — add warm shadow */ [data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.80); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); } [data-theme="light"] .theme-toggle:hover { box-shadow: 0 4px 18px rgba(212, 160, 23, 0.25); } @media (max-width: 600px) { .theme-toggle { bottom: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.1rem; } } /* ─── 30. Spin Animation for Theme Toggle ─── */ @keyframes theme-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } } .theme-toggle-spin { animation: theme-spin 0.5s ease; } /* ─── 31. Focus Mode Light Overrides ─── */ [data-theme="light"] .focus-overlay { background: linear-gradient(160deg, #eef1fa 0%, #e6e0f3 50%, #dde8f5 100%) !important; } /* Header */ [data-theme="light"] .focus-act-name { color: var(--purple) !important; } [data-theme="light"] .focus-icon { background: rgba(108, 92, 231, 0.12) !important; } [data-theme="light"] .focus-close { background: rgba(108, 92, 231, 0.08) !important; color: var(--purple) !important; } [data-theme="light"] .focus-close:hover { background: rgba(108, 92, 231, 0.16) !important; } /* Timer */ [data-theme="light"] .focus-elapsed-timer { color: var(--purple) !important; text-shadow: 0 2px 30px rgba(108, 92, 231, 0.2), 0 0 60px rgba(108, 92, 231, 0.08) !important; } [data-theme="light"] .focus-timer-label { color: rgba(108, 92, 231, 0.55) !important; } /* Stat cards */ [data-theme="light"] .focus-stat-card { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(108, 92, 231, 0.12) !important; box-shadow: 0 2px 8px rgba(108, 92, 231, 0.06); } [data-theme="light"] .focus-stat-value { color: var(--text-primary) !important; } [data-theme="light"] .focus-stat-label { color: rgba(108, 92, 231, 0.5) !important; } /* Pause button */ [data-theme="light"] .focus-btn-pause { border-color: rgba(108, 92, 231, 0.3) !important; background: rgba(108, 92, 231, 0.08) !important; } [data-theme="light"] .focus-btn-pause:hover { border-color: rgba(108, 92, 231, 0.5) !important; background: rgba(108, 92, 231, 0.14) !important; box-shadow: 0 0 24px rgba(108, 92, 231, 0.12) !important; } [data-theme="light"] .focus-pause-icon { color: var(--purple) !important; } /* Wave — more visible on light */ [data-theme="light"] .focus-wave { opacity: 0.22 !important; } /* Delete button */ [data-theme="light"] .focus-delete-btn { background: rgba(224, 85, 85, 0.08) !important; border-color: rgba(224, 85, 85, 0.18) !important; } /* ─── 32. Buttons (primary / secondary) ─── */ [data-theme="light"] .btn-primary { box-shadow: 0 2px 12px rgba(212, 160, 23, 0.25); } [data-theme="light"] .btn-secondary { background: rgba(108, 92, 231, 0.10) !important; border-color: rgba(108, 92, 231, 0.25) !important; color: var(--purple) !important; } [data-theme="light"] .btn-secondary:hover { background: rgba(108, 92, 231, 0.18) !important; } /* ─── 33. Footer ─── */ [data-theme="light"] footer { color: var(--text-muted); }