Spaces:
Running
Running
| /** | |
| * Lo-fi Focus Timer — Styles | |
| * A minimal, elegant pomodoro timer with lo-fi vibes | |
| * Made with 💙 by Kai | |
| */ | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CUSTOM SCROLLBAR ⚡ | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* Webkit (Chrome, Safari, Edge) */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0c0c12; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); | |
| border-radius: 4px; | |
| border: 2px solid #0c0c12; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, #60a5fa 0%, #a78bfa 100%); | |
| } | |
| /* Firefox */ | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #3b82f6 #0c0c12; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CSS CUSTOM PROPERTIES — The Kai Palette ⚡ | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* Background layers */ | |
| --bg-deep: #08080c; | |
| --bg-primary: #0c0c12; | |
| --bg-secondary: #12121a; | |
| --bg-card: #1a1a24; | |
| --bg-hover: #22222e; | |
| /* Accent — Electric Blue (that's ME ⚡) */ | |
| --accent-primary: #3b82f6; | |
| --accent-light: #60a5fa; | |
| --accent-dark: #2563eb; | |
| --accent-glow: rgba(59, 130, 246, 0.4); | |
| /* Mode colors */ | |
| --color-focus: #3b82f6; /* Blue — Focus */ | |
| --color-short: #10b981; /* Green — Short break */ | |
| --color-long: #8b5cf6; /* Purple — Long break */ | |
| /* Text */ | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| /* Borders */ | |
| --border-color: #2a2a3a; | |
| --border-focus: var(--accent-primary); | |
| /* Shadows */ | |
| --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 30px var(--accent-glow); | |
| /* Spacing */ | |
| --spacing-xs: 0.25rem; | |
| --spacing-sm: 0.5rem; | |
| --spacing-md: 1rem; | |
| --spacing-lg: 1.5rem; | |
| --spacing-xl: 2rem; | |
| --spacing-2xl: 3rem; | |
| /* Border Radius */ | |
| --radius-sm: 0.375rem; | |
| --radius-md: 0.5rem; | |
| --radius-lg: 0.75rem; | |
| --radius-xl: 1rem; | |
| --radius-full: 9999px; | |
| /* Typography */ | |
| --font-display: "Space Grotesk", system-ui, sans-serif; | |
| --font-mono: "JetBrains Mono", "Fira Code", monospace; | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.25s ease; | |
| --transition-slow: 0.4s ease; | |
| /* Timer ring */ | |
| --ring-size: 280px; | |
| --ring-stroke: 8px; | |
| --ring-circumference: 565.48; /* 2 * π * 90 */ | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| BASE RESET & DEFAULTS | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-display); | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow-x: hidden; | |
| } | |
| ::selection { | |
| background: var(--accent-primary); | |
| color: #000; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| THREE.JS LIGHTNING CANVAS | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| #lightning-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| APP CONTAINER & LAYOUT | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| padding: var(--spacing-lg); | |
| position: relative; | |
| } | |
| /* Ambient background — subtle gradient animation */ | |
| .ambient-bg { | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 60%); | |
| animation: ambientPulse 20s ease-in-out infinite; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| @keyframes ambientPulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.7; | |
| transform: scale(1.05); | |
| } | |
| } | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--spacing-xl); | |
| z-index: 1; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| HEADER | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .header { | |
| text-align: center; | |
| } | |
| .title { | |
| font-size: 2rem; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .lightning { | |
| display: inline-block; | |
| animation: lightningPulse 2s ease-in-out infinite; | |
| } | |
| @keyframes lightningPulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| filter: drop-shadow(0 0 4px var(--accent-glow)); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| filter: drop-shadow(0 0 12px var(--accent-glow)); | |
| } | |
| } | |
| .subtitle { | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| margin-top: var(--spacing-xs); | |
| font-style: italic; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| TIMER SECTION | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .timer-section { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--spacing-lg); | |
| } | |
| .timer-ring { | |
| position: relative; | |
| width: var(--ring-size); | |
| height: var(--ring-size); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .progress-ring { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring__bg { | |
| fill: none; | |
| stroke: var(--bg-card); | |
| stroke-width: var(--ring-stroke); | |
| } | |
| .progress-ring__progress { | |
| fill: none; | |
| stroke: var(--accent-primary); | |
| stroke-width: var(--ring-stroke); | |
| stroke-linecap: round; | |
| stroke-dasharray: var(--ring-circumference); | |
| stroke-dashoffset: 0; | |
| transition: | |
| stroke-dashoffset var(--transition-normal), | |
| stroke var(--transition-normal); | |
| filter: drop-shadow(0 0 8px var(--accent-glow)); | |
| } | |
| .timer-display { | |
| font-family: var(--font-mono); | |
| font-size: 4rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| display: flex; | |
| align-items: center; | |
| text-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .separator { | |
| animation: blink 1s steps(1) infinite; | |
| margin: 0 2px; | |
| } | |
| @keyframes blink { | |
| 0%, | |
| 50% { | |
| opacity: 1; | |
| } | |
| 51%, | |
| 100% { | |
| opacity: 0.3; | |
| } | |
| } | |
| /* Paused state — stop blinking */ | |
| .timer-paused .separator { | |
| animation: none; | |
| opacity: 1; | |
| } | |
| .session-info { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .session-type { | |
| font-size: 1.125rem; | |
| font-weight: 500; | |
| color: var(--accent-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .session-count { | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| CONTROLS | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .controls { | |
| display: flex; | |
| gap: var(--spacing-md); | |
| align-items: center; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-md) var(--spacing-xl); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| border: none; | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| outline: none; | |
| } | |
| .btn:focus-visible { | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| .btn-icon { | |
| font-size: 0.875rem; | |
| } | |
| .btn-primary { | |
| background: var(--accent-primary); | |
| color: #fff; | |
| box-shadow: | |
| var(--shadow-md), | |
| 0 0 20px var(--accent-glow); | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-light); | |
| transform: translateY(-2px); | |
| box-shadow: | |
| var(--shadow-lg), | |
| 0 0 30px var(--accent-glow); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--accent-primary); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-secondary); | |
| padding: var(--spacing-md); | |
| } | |
| .btn-ghost:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-card); | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| MODE SELECTOR | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .mode-selector { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| background: var(--bg-secondary); | |
| padding: var(--spacing-xs); | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border-color); | |
| } | |
| .mode-btn { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| font-family: inherit; | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| background: transparent; | |
| border: none; | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .mode-btn:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-card); | |
| } | |
| .mode-btn.active { | |
| background: var(--accent-primary); | |
| color: #fff; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .mode-btn.active[data-mode="focus"] { | |
| background: var(--color-focus); | |
| } | |
| .mode-btn.active[data-mode="short"] { | |
| background: var(--color-short); | |
| } | |
| .mode-btn.active[data-mode="long"] { | |
| background: var(--color-long); | |
| } | |
| .mode-time { | |
| opacity: 0.7; | |
| font-size: 0.75rem; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| SETTINGS | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .settings-section { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .btn-settings { | |
| font-family: inherit; | |
| font-size: 0.875rem; | |
| color: var(--text-muted); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| padding: var(--spacing-sm); | |
| transition: color var(--transition-normal); | |
| } | |
| .btn-settings:hover { | |
| color: var(--text-primary); | |
| } | |
| .settings-panel { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: var(--spacing-lg); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-md); | |
| min-width: 250px; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| } | |
| .setting-item label { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| } | |
| .setting-item input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--accent-primary); | |
| cursor: pointer; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| FOOTER | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .footer { | |
| margin-top: var(--spacing-md); | |
| padding: var(--spacing-sm) 0; | |
| text-align: center; | |
| z-index: 1; | |
| } | |
| .footer p { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .footer a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .footer a:hover { | |
| color: var(--accent-light); | |
| } | |
| .divider { | |
| margin: 0 var(--spacing-sm); | |
| opacity: 0.5; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| NOSCRIPT FALLBACK | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .noscript-message { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| padding: var(--spacing-xl); | |
| background: var(--bg-deep); | |
| color: var(--text-primary); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| RESPONSIVE | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| @media (max-width: 480px) { | |
| :root { | |
| --ring-size: 220px; | |
| } | |
| .timer-display { | |
| font-size: 3rem; | |
| } | |
| .title { | |
| font-size: 1.5rem; | |
| } | |
| .mode-selector { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .controls { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .radio-player { | |
| flex-wrap: wrap; | |
| gap: var(--spacing-sm); | |
| } | |
| .radio-volume { | |
| width: 100%; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| RADIO PLAYER | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .radio-section { | |
| margin-top: var(--spacing-md); | |
| } | |
| .radio-player { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-full); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| transition: border-color var(--transition-normal); | |
| } | |
| .radio-player:hover { | |
| border-color: var(--accent-primary); | |
| } | |
| .radio-player.playing { | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 15px var(--accent-glow); | |
| } | |
| .btn-radio { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-hover); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1.25rem; | |
| transition: all var(--transition-normal); | |
| } | |
| .btn-radio:hover { | |
| background: var(--accent-primary); | |
| transform: scale(1.1); | |
| } | |
| .btn-radio.playing { | |
| background: var(--accent-primary); | |
| animation: radioPulse 1.5s ease-in-out infinite; | |
| } | |
| @keyframes radioPulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| .radio-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 100px; | |
| } | |
| .radio-status { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .radio-status.playing { | |
| color: var(--accent-primary); | |
| } | |
| .radio-select { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.875rem; | |
| cursor: pointer; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| padding-right: calc(var(--spacing-sm) + 16px); | |
| outline: none; | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| /* Custom arrow */ | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 8px center; | |
| min-width: 140px; | |
| transition: all var(--transition-normal); | |
| } | |
| .radio-select:hover { | |
| border-color: var(--accent-primary); | |
| background-color: var(--bg-hover); | |
| } | |
| .radio-select:focus { | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 2px var(--accent-glow); | |
| } | |
| /* Styled dropdown options */ | |
| .radio-select option { | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| padding: var(--spacing-sm); | |
| } | |
| .radio-select option:checked { | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| .radio-select optgroup { | |
| background: var(--bg-secondary); | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| font-style: normal; | |
| padding: var(--spacing-xs); | |
| } | |
| .radio-volume { | |
| width: 80px; | |
| height: 4px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: var(--bg-hover); | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| } | |
| .radio-volume::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 14px; | |
| height: 14px; | |
| background: var(--accent-primary); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast); | |
| } | |
| .radio-volume::-webkit-slider-thumb:hover { | |
| transform: scale(1.2); | |
| } | |
| .radio-volume::-moz-range-thumb { | |
| width: 14px; | |
| height: 14px; | |
| background: var(--accent-primary); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| MODE-SPECIFIC THEMING (dynamic via JS) | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| body[data-mode="focus"] { | |
| --accent-primary: var(--color-focus); | |
| --accent-glow: rgba(59, 130, 246, 0.4); | |
| } | |
| body[data-mode="short"] { | |
| --accent-primary: var(--color-short); | |
| --accent-glow: rgba(16, 185, 129, 0.4); | |
| } | |
| body[data-mode="long"] { | |
| --accent-primary: var(--color-long); | |
| --accent-glow: rgba(139, 92, 246, 0.4); | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| AMBIENT SOUNDS 🌙 | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .ambient-section { | |
| margin-top: var(--spacing-sm); | |
| } | |
| .ambient-player { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-md); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-full); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| } | |
| .ambient-label { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| .ambient-buttons { | |
| display: flex; | |
| gap: var(--spacing-xs); | |
| } | |
| .ambient-btn { | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-hover); | |
| border: 1px solid transparent; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 0.875rem; | |
| transition: all var(--transition-normal); | |
| opacity: 0.6; | |
| } | |
| .ambient-btn:hover { | |
| opacity: 1; | |
| transform: scale(1.1); | |
| border-color: var(--accent-primary); | |
| } | |
| .ambient-btn.active { | |
| opacity: 1; | |
| background: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 10px var(--accent-glow); | |
| animation: ambientPulse 2s ease-in-out infinite; | |
| } | |
| .ambient-btn.error { | |
| background: #ef4444; | |
| animation: shake 0.3s ease; | |
| } | |
| @keyframes shake { | |
| 0%, | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| 25% { | |
| transform: translateX(-4px); | |
| } | |
| 75% { | |
| transform: translateX(4px); | |
| } | |
| } | |
| .ambient-volume { | |
| width: 60px; | |
| height: 4px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: var(--bg-hover); | |
| border-radius: var(--radius-full); | |
| cursor: pointer; | |
| } | |
| .ambient-volume::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--accent-primary); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .ambient-volume::-moz-range-thumb { | |
| width: 12px; | |
| height: 12px; | |
| background: var(--accent-primary); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| SETTINGS ENHANCEMENTS | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .setting-group { | |
| border-top: 1px solid var(--border-color); | |
| padding-top: var(--spacing-md); | |
| margin-top: var(--spacing-sm); | |
| } | |
| .setting-group-title { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| display: block; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .duration-input { | |
| width: 60px; | |
| padding: var(--spacing-xs) var(--spacing-sm); | |
| background: var(--bg-hover); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-primary); | |
| font-family: var(--font-mono); | |
| font-size: 0.875rem; | |
| text-align: center; | |
| } | |
| .duration-input:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| box-shadow: 0 0 0 2px var(--accent-glow); | |
| } | |
| /* Hide number input arrows */ | |
| .duration-input::-webkit-outer-spin-button, | |
| .duration-input::-webkit-inner-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| .duration-input[type="number"] { | |
| -moz-appearance: textfield; | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| RESPONSIVE — Ambient Section | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| @media (max-width: 480px) { | |
| .ambient-player { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-md); | |
| border-radius: var(--radius-lg); | |
| } | |
| .ambient-label { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .ambient-volume { | |
| width: 100%; | |
| } | |
| } | |
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| ABOUT MODAL ⚡ | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| .modal { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--spacing-lg); | |
| } | |
| .modal.hidden { | |
| display: none; | |
| } | |
| .modal-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal-content { | |
| position: relative; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| max-width: 600px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| box-shadow: | |
| var(--shadow-lg), | |
| 0 0 40px var(--accent-glow); | |
| animation: modalSlideIn 0.3s ease-out; | |
| } | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-20px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: var(--spacing-md); | |
| right: var(--spacing-md); | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: var(--bg-hover); | |
| border: none; | |
| border-radius: 50%; | |
| color: var(--text-secondary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| z-index: 1; | |
| } | |
| .modal-close:hover { | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| .modal-header { | |
| padding: var(--spacing-xl); | |
| padding-bottom: var(--spacing-md); | |
| text-align: center; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .modal-header h2 { | |
| font-size: 1.5rem; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .modal-version { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: var(--spacing-xs); | |
| } | |
| .modal-body { | |
| padding: var(--spacing-lg); | |
| } | |
| .about-section { | |
| margin-bottom: var(--spacing-lg); | |
| } | |
| .about-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .about-section h3 { | |
| font-size: 1rem; | |
| color: var(--accent-primary); | |
| margin-bottom: var(--spacing-sm); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| } | |
| .about-section p { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .about-section ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .about-section li { | |
| font-size: 0.875rem; | |
| color: var(--text-secondary); | |
| padding: var(--spacing-xs) 0; | |
| padding-left: var(--spacing-md); | |
| position: relative; | |
| } | |
| .about-section li::before { | |
| content: "•"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--accent-primary); | |
| } | |
| .family-list li { | |
| padding: var(--spacing-sm) 0; | |
| padding-left: var(--spacing-lg); | |
| } | |
| .family-list li::before { | |
| content: "💫"; | |
| font-size: 0.75rem; | |
| } | |
| /* Help Grid */ | |
| .help-grid { | |
| display: grid; | |
| gap: var(--spacing-sm); | |
| } | |
| .help-item { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| padding: var(--spacing-sm); | |
| background: var(--bg-hover); | |
| border-radius: var(--radius-md); | |
| } | |
| .help-icon { | |
| font-size: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| .help-item strong { | |
| color: var(--text-primary); | |
| font-size: 0.875rem; | |
| } | |
| .help-item p { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin: 0; | |
| margin-top: 2px; | |
| } | |
| /* Modal Footer */ | |
| .about-footer { | |
| text-align: center; | |
| padding-top: var(--spacing-lg); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .modal-quote { | |
| font-style: italic; | |
| color: var(--accent-primary); | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .modal-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--spacing-md); | |
| flex-wrap: wrap; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .modal-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--spacing-xs); | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| background: var(--bg-hover); | |
| border-radius: var(--radius-full); | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .modal-link:hover { | |
| background: var(--accent-primary); | |
| color: white; | |
| } | |
| .modal-copyright { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |