/* ============================================================================= KARAOKE SUBTITLE PLAYER STYLES Features: - Scrollable subtitle list with tap-to-seek - Desktop sidebar with artwork and info - Mobile drawer for chapters/speakers - Word-level karaoke highlighting ============================================================================= */ /* ============================================================================= CSS CUSTOM PROPERTIES Default: Dark theme (matches user preference or can be toggled) All colors meet WCAG AA contrast requirements (4.5:1 for text, 3:1 for UI) ============================================================================= */ .player-layout { /* ===== DARK THEME (default) ===== */ /* Colors - Apple-inspired dark theme */ --player-bg: #000000; --player-surface: #1c1c1e; --player-surface-elevated: #2c2c2e; --player-glass: rgba(255, 255, 255, 0.06); --player-glass-border: rgba(255, 255, 255, 0.1); /* Accent - Apple Music pink (meets WCAG AA on dark bg) */ --player-accent: #ff375f; --player-accent-subtle: rgba(255, 55, 95, 0.15); /* Typography - WCAG AA compliant Primary: #ffffff on #000000 = 21:1 ✓ Secondary: #a1a1a6 on #000000 = 7.4:1 ✓ (AA) Tertiary: #8e8e93 on #000000 = 5.3:1 ✓ (AA) */ --player-text-primary: #ffffff; --player-text-secondary: #a1a1a6; --player-text-tertiary: #8e8e93; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Border radius - Apple uses subtle rounding */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 9999px; /* Shadows - Subtle for dark theme */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4); /* Timing */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --duration-fast: 200ms; /* Sidebar width for desktop */ --sidebar-width: 280px; /* Theme transition */ color-scheme: dark; } /* ===== LIGHT THEME ===== */ /* Applied via data-theme on .player-layout OR early data-player-theme on */ .player-layout[data-theme="light"], html[data-player-theme="light"] .player-layout:not([data-theme]) { /* Colors - Apple-inspired light theme */ --player-bg: #ffffff; --player-surface: #f2f2f7; --player-surface-elevated: #ffffff; --player-glass: rgba(0, 0, 0, 0.04); --player-glass-border: rgba(0, 0, 0, 0.1); /* Accent - Darker for light theme (meets WCAG AA) #d62d4a on #ffffff = 5.2:1 ✓ (AA) */ --player-accent: #d62d4a; --player-accent-subtle: rgba(214, 45, 74, 0.1); /* Typography - WCAG AA compliant Primary: #1c1c1e on #ffffff = 17.4:1 ✓ Secondary: #636366 on #ffffff = 5.9:1 ✓ (AA) Tertiary: #8e8e93 on #ffffff = 3.5:1 ✓ (AA for large text, used sparingly) */ --player-text-primary: #1c1c1e; --player-text-secondary: #636366; --player-text-tertiary: #6e6e73; /* Shadows - More visible on light */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15); color-scheme: light; } /* Explicit dark theme (for when user toggles from light to dark on light-preference system) */ /* Also applied via early data-player-theme on to prevent flash */ .player-layout[data-theme="dark"], html[data-player-theme="dark"] .player-layout:not([data-theme]) { --player-bg: #000000; --player-surface: #1c1c1e; --player-surface-elevated: #2c2c2e; --player-glass: rgba(255, 255, 255, 0.06); --player-glass-border: rgba(255, 255, 255, 0.1); --player-accent: #ff375f; --player-accent-subtle: rgba(255, 55, 95, 0.15); --player-text-primary: #ffffff; --player-text-secondary: #a1a1a6; --player-text-tertiary: #8e8e93; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4); color-scheme: dark; } /* System preference: auto-switch if no explicit theme set Excludes when early theme detection set data-player-theme on */ @media (prefers-color-scheme: light) { html:not([data-player-theme]) .player-layout:not([data-theme]) { --player-bg: #ffffff; --player-surface: #f2f2f7; --player-surface-elevated: #ffffff; --player-glass: rgba(0, 0, 0, 0.04); --player-glass-border: rgba(0, 0, 0, 0.1); --player-accent: #d62d4a; --player-accent-subtle: rgba(214, 45, 74, 0.1); --player-text-primary: #1c1c1e; --player-text-secondary: #636366; --player-text-tertiary: #6e6e73; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15); color-scheme: light; } } /* ============================================================================= MAIN LAYOUT ============================================================================= */ .player-layout { display: flex; height: 100vh; height: 100dvh; background: var(--player-bg); overflow: hidden; } .app-container:has(.player-layout) { max-width: none; padding: 0; } /* ============================================================================= DESKTOP SIDEBAR (hidden on mobile) ============================================================================= */ .player-sidebar { display: none; flex-direction: column; width: var(--sidebar-width); background: var(--player-surface); border-right: 1px solid var(--player-glass-border); overflow-y: auto; flex-shrink: 0; } .sidebar-back { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); color: var(--player-accent); text-decoration: none; font-size: 14px; font-weight: 500; transition: opacity var(--duration-fast); } .sidebar-back:hover { opacity: 0.8; } .sidebar-artwork { padding: var(--space-4); padding-top: 0; } .sidebar-artwork .artwork-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); } .sidebar-artwork .artwork-placeholder { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--player-accent), #ff6b6b); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; opacity: 0.8; } .sidebar-info { padding: 0 var(--space-4) var(--space-4); } .sidebar-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-1); color: var(--player-text-primary); } .sidebar-show { font-size: 14px; color: var(--player-accent); margin-bottom: var(--space-1); } .sidebar-date { font-size: 12px; color: var(--player-text-tertiary); } .sidebar-stats { display: flex; justify-content: space-around; padding: var(--space-4); margin: 0 var(--space-4); background: var(--player-glass); border-radius: var(--radius-md); } .sidebar-stats .stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .sidebar-stats .stat-value { font-size: 20px; font-weight: 700; color: var(--player-text-primary); } .sidebar-stats .stat-label { font-size: 10px; font-weight: 600; color: var(--player-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; } .sidebar-section-title { font-size: 11px; font-weight: 600; color: var(--player-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-2); } .sidebar-chapters, .sidebar-speakers { padding: var(--space-4); border-top: 1px solid var(--player-glass-border); } .sidebar-chapters .chapters-list { display: flex; flex-direction: column; gap: var(--space-1); } /* Unified chapter item styling (used in both sidebar and drawer) */ .chapter-item { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-3); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left; position: relative; overflow: hidden; transition: background-color var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom on chapter selection */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .chapter-item:hover { background: var(--player-glass); } /* Chapter progress indicator - subtle bar at bottom of active chapter */ .chapter-item.active { background: var(--player-glass); } .chapter-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: var(--chapter-progress, 0%); background: var(--player-accent); transition: width 100ms linear; } .chapter-item.active .chapter-time { color: var(--player-accent); } .chapter-item.active .chapter-title { color: var(--player-text-primary); font-weight: 600; } .chapter-time { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--player-accent); min-width: 38px; flex-shrink: 0; } .chapter-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .chapter-title { font-size: 13px; font-weight: 500; color: var(--player-text-primary); line-height: 1.3; } .chapter-desc { font-size: 11px; color: var(--player-text-tertiary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-speakers .speakers-list { display: flex; flex-direction: column; gap: var(--space-2); } .sidebar-speakers .speaker-item { display: flex; align-items: center; gap: var(--space-3); } .sidebar-speakers .speaker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sidebar-speakers .speaker-name { font-size: 13px; color: var(--player-text-primary); } /* ============================================================================= MAIN CONTENT AREA ============================================================================= */ .player-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ============================================================================= MOBILE HEADER - Apple Podcasts style ============================================================================= */ .player-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); /* Add top safe area for iOS status bar in native app */ padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px)); background: var(--player-surface); border-bottom: 1px solid var(--player-glass-border); flex-shrink: 0; min-height: 56px; box-sizing: border-box; } .back-btn, .drawer-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-full); color: var(--player-text-secondary); cursor: pointer; flex-shrink: 0; transition: background-color var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .back-btn:hover, .drawer-btn:hover { background: var(--player-glass); } .back-btn svg, .drawer-btn svg { width: 22px; height: 22px; } .header-spacer { width: 40px; flex-shrink: 0; } /* Episode info with artwork */ .header-episode-info { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; overflow: hidden; } .header-artwork { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--player-glass); } .header-artwork img { width: 100%; height: 100%; object-fit: cover; } .header-artwork-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--player-accent), #ff6b6b); } .header-artwork-placeholder svg { width: 24px; height: 24px; color: white; opacity: 0.8; } .header-text { flex: 1; min-width: 0; overflow: hidden; } .header-title-wrapper { overflow: hidden; mask-image: linear-gradient(to right, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%); } .episode-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--player-text-primary); white-space: nowrap; margin: 0; animation: marquee 12s linear infinite; display: inline-block; padding-right: 50px; } /* Only animate if title overflows */ .header-title-wrapper:not(:hover) .episode-title { animation-play-state: running; } .header-title-wrapper:hover .episode-title { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .header-show-name { font-size: 12px; color: var(--player-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 2px 0 0 0; } /* ============================================================================= SCROLLABLE SUBTITLE LIST ============================================================================= */ .subtitle-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-4); scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .subtitle-list.no-transcript { display: flex; align-items: center; justify-content: center; } .no-transcript-message { text-align: center; color: var(--player-text-tertiary); } .no-transcript-message svg { opacity: 0.5; margin-bottom: var(--space-4); } .no-transcript-message h3 { font-size: 18px; font-weight: 600; margin-bottom: var(--space-2); } .no-transcript-message p { font-size: 14px; } /* Subtitle item */ .subtitle-item { padding: var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-fast); } .subtitle-item:hover { background: var(--player-glass); } .subtitle-item.active { background: var(--player-accent-subtle); } .subtitle-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .subtitle-speaker { font-size: 12px; font-weight: 600; color: var(--speaker-color, var(--player-accent)); } .subtitle-speaker::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--speaker-color, var(--player-accent)); margin-right: var(--space-2); vertical-align: middle; } .subtitle-time { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--player-text-tertiary); } .subtitle-original { font-size: 18px; line-height: 1.5; margin: 0 0 var(--space-2) 0; color: var(--player-text-tertiary); } .subtitle-item.active .subtitle-original { color: var(--player-text-primary); } .subtitle-translation { font-size: 15px; line-height: 1.5; margin: 0; color: var(--player-text-secondary); opacity: 0.7; } /* Word-level karaoke highlighting */ .word { color: inherit; /* Faster transition for more responsive highlighting sync */ transition: color 50ms linear; /* Prevent subpixel rendering changes during color transitions */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subtitle-item.active .word { color: var(--player-text-tertiary); } .subtitle-item.active .word.spoken { color: var(--player-text-primary); } /* Auto-scroll toggle - styled like other option buttons */ .auto-scroll-toggle { background: none; border: none; color: var(--player-text-secondary); padding: var(--space-2); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; transition: all var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .auto-scroll-toggle svg { width: 20px; height: 20px; opacity: 1; } .auto-scroll-toggle:hover { color: var(--player-text-primary); } .auto-scroll-toggle.active { color: var(--player-accent); background: none; } .auto-scroll-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; } /* ============================================================================= PLAYER CONTROLS - Apple Podcasts inspired ============================================================================= */ .player-controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--player-surface); border-top: 1px solid var(--player-glass-border); flex-shrink: 0; } /* Progress bar - Apple Podcasts style with filled track */ .progress-container { width: 100%; max-width: 600px; } .progress-bar { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: transparent; border-radius: 2px; cursor: pointer; outline: none; position: relative; } /* Webkit (Chrome, Safari) - filled progress */ .progress-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient( to right, var(--player-accent) 0%, var(--player-accent) var(--progress, 0%), var(--player-glass-border) var(--progress, 0%), var(--player-glass-border) 100% ); } .progress-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; background: transparent; cursor: pointer; } /* Show thumb on interaction */ .progress-bar:hover::-webkit-slider-thumb, .progress-bar:active::-webkit-slider-thumb { width: 12px; height: 12px; background: var(--player-accent); border-radius: 50%; margin-top: -4px; box-shadow: var(--shadow-md); } /* Firefox */ .progress-bar::-moz-range-track { height: 4px; border-radius: 2px; background: var(--player-glass-border); } .progress-bar::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--player-accent); } .progress-bar::-moz-range-thumb { width: 0; height: 0; background: transparent; border: none; cursor: pointer; } .progress-bar:hover::-moz-range-thumb, .progress-bar:active::-moz-range-thumb { width: 12px; height: 12px; background: var(--player-accent); border-radius: 50%; box-shadow: var(--shadow-md); } .progress-times { display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: var(--player-text-tertiary); margin-top: var(--space-2); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; } /* Control buttons - simple, no backgrounds */ .control-buttons { display: flex; align-items: center; justify-content: center; gap: var(--space-8); } .control-btn { background: none; border: none; color: var(--player-text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; padding: var(--space-2); border-radius: var(--radius-full); transition: opacity var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .control-btn:hover { opacity: 0.7; } .control-btn:active { transform: scale(0.92); } .control-btn svg { width: 32px; height: 32px; } /* Play button - simple, no fill */ .control-btn.play-btn { width: 56px; height: 56px; background: none; color: var(--player-text-primary); box-shadow: none; } .control-btn.play-btn svg { width: 56px; height: 56px; margin-left: 0; } .control-btn.play-btn:hover { opacity: 0.7; transform: none; } /* Skip label - inside the icon like Apple */ .skip-label { position: absolute; font-size: 9px; font-weight: 600; color: var(--player-text-primary); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Utterance navigation buttons - slightly smaller than skip buttons */ .control-btn.utterance-nav { opacity: 0.7; } .control-btn.utterance-nav svg { width: 24px; height: 24px; } .control-btn.utterance-nav:hover { opacity: 1; } /* Playback options - minimal */ .playback-options { display: flex; justify-content: center; gap: var(--space-6); } .option-btn { background: none; border: none; color: var(--player-text-secondary); padding: var(--space-2); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; transition: all var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .option-btn svg { width: 22px; height: 22px; opacity: 1; } .option-btn:hover { color: var(--player-text-primary); } .option-btn.active { color: var(--player-accent); background: none; } .option-btn.active svg { opacity: 1; } /* ============================================================================= MOBILE DRAWER ============================================================================= */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out); z-index: 100; } .drawer-overlay.visible { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; background: var(--player-surface); transform: translateX(-100%); transition: transform var(--duration-fast) var(--ease-out); z-index: 101; display: flex; flex-direction: column; border-right: 1px solid var(--player-glass-border); } .drawer.open { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--player-glass-border); flex-shrink: 0; height: 56px; /* Match main player header height exactly */ box-sizing: border-box; } .drawer-header h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--player-text-primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-header-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } .drawer-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-full); color: var(--player-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .drawer-close:hover { background: var(--player-glass); color: var(--player-text-primary); } /* Theme toggle button */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-full); color: var(--player-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--player-glass); color: var(--player-text-primary); } .theme-toggle svg { width: 20px; height: 20px; } /* Show sun icon in dark mode, moon in light mode */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } /* Explicit light theme: show moon */ .player-layout[data-theme="light"] .theme-toggle .icon-sun { display: none; } .player-layout[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Explicit dark theme: show sun */ .player-layout[data-theme="dark"] .theme-toggle .icon-sun { display: block; } .player-layout[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* System light preference (no explicit theme): show moon Excludes when early theme detection set data-player-theme on */ @media (prefers-color-scheme: light) { html:not([data-player-theme]) .player-layout:not([data-theme]) .theme-toggle .icon-sun { display: none; } html:not([data-player-theme]) .player-layout:not([data-theme]) .theme-toggle .icon-moon { display: block; } } /* Early theme detection: show correct icon before JS loads */ html[data-player-theme="light"] .player-layout:not([data-theme]) .theme-toggle .icon-sun { display: none; } html[data-player-theme="light"] .player-layout:not([data-theme]) .theme-toggle .icon-moon { display: block; } html[data-player-theme="dark"] .player-layout:not([data-theme]) .theme-toggle .icon-sun { display: block; } html[data-player-theme="dark"] .player-layout:not([data-theme]) .theme-toggle .icon-moon { display: none; } .drawer-nav { display: flex; flex-direction: column; padding: var(--space-2); gap: var(--space-1); border-bottom: 1px solid var(--player-glass-border); flex-shrink: 0; } .drawer-nav-btn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: none; border: none; border-radius: var(--radius-sm); color: var(--player-text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; transition: all var(--duration-fast) var(--ease-out); /* iOS Safari: Prevent double-tap zoom */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .drawer-nav-btn svg { opacity: 0.6; flex-shrink: 0; } .drawer-nav-btn:hover { background: var(--player-glass); color: var(--player-text-primary); } .drawer-nav-btn.active { background: var(--player-accent-subtle); color: var(--player-accent); } .drawer-nav-btn.active svg { opacity: 1; color: var(--player-accent); } .drawer-content { flex: 1; overflow-y: auto; padding: var(--space-4); -webkit-overflow-scrolling: touch; } /* Drawer content items */ .drawer-empty { color: var(--player-text-tertiary); text-align: center; padding: var(--space-6); } /* Drawer chapter items - add margin between items */ .drawer-content .chapter-item { margin-bottom: var(--space-1); } /* Speaker items in drawer */ .drawer-content .speaker-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--player-glass); border-radius: var(--radius-sm); margin-bottom: var(--space-2); } .drawer-content .speaker-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .drawer-content .speaker-info { display: flex; flex-direction: column; gap: 2px; } .drawer-content .speaker-name { font-size: 14px; font-weight: 500; color: var(--player-text-primary); } .drawer-content .speaker-role { font-size: 12px; color: var(--player-text-tertiary); } /* Info panel in drawer */ .info-panel { display: flex; justify-content: space-around; padding: var(--space-4); background: var(--player-glass); border-radius: var(--radius-md); } .info-stat { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .info-value { font-size: 24px; font-weight: 700; color: var(--player-text-primary); letter-spacing: -0.5px; } .info-label { font-size: 10px; font-weight: 600; color: var(--player-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; } /* Shortcuts in drawer */ .shortcuts-list { display: flex; flex-direction: column; gap: var(--space-2); } .shortcut { display: flex; align-items: center; gap: var(--space-3); } .shortcut kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 var(--space-2); background: var(--player-glass); border: 1px solid var(--player-glass-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--player-text-primary); } .shortcut span { font-size: 13px; color: var(--player-text-secondary); } /* ============================================================================= TABLET RESPONSIVE (768px - 1023px) ============================================================================= */ @media (min-width: 768px) { .subtitle-list { padding: var(--space-6); } .subtitle-item { padding: var(--space-5); max-width: 700px; margin-left: auto; margin-right: auto; } .subtitle-original { font-size: 22px; } .subtitle-translation { font-size: 17px; } .player-controls { padding: var(--space-5) var(--space-8); } } /* ============================================================================= DESKTOP RESPONSIVE (1024px+) Apple-style: Left sidebar with toggle capability ============================================================================= */ @media (min-width: 1024px) { /* Hide old sidebar - use unified drawer as source list */ .player-sidebar { display: none; } /* Drawer becomes left source list - visible by default but can be toggled */ .drawer { position: fixed; left: 0; width: var(--sidebar-width); transform: translateX(0); border-right: 1px solid var(--player-glass-border); box-shadow: none; transition: transform var(--duration-fast) var(--ease-out); } /* When sidebar is collapsed on desktop */ .drawer:not(.open) { transform: translateX(-100%); } /* Desktop drawer defaults to open - controlled by JS */ .drawer.desktop-open { transform: translateX(0); } /* Hide overlay on desktop - sidebar toggle is in-place */ .drawer-overlay { display: none; } /* Keep drawer toggle button visible on desktop for collapsing sidebar */ .drawer-btn { display: flex; } /* Adjust main content to account for left sidebar - animate with sidebar */ .player-main { margin-left: var(--sidebar-width); margin-right: 0; transition: margin-left var(--duration-fast) var(--ease-out); } /* When sidebar is collapsed, main content takes full width */ .player-layout.sidebar-collapsed .player-main { margin-left: 0; } /* Wider subtitle area */ .subtitle-list { padding: var(--space-8); } .subtitle-item { max-width: 800px; } .subtitle-original { font-size: 24px; } .subtitle-translation { font-size: 18px; } } /* ============================================================================= LARGE DESKTOP (1440px+) ============================================================================= */ @media (min-width: 1440px) { /* Slightly wider source list on large screens */ .drawer { width: 320px; } /* Adjust main content for wider sidebar */ .player-main { margin-left: 320px; margin-right: 0; } /* When sidebar is collapsed, main content takes full width */ .player-layout.sidebar-collapsed .player-main { margin-left: 0; } .subtitle-item { max-width: 900px; } .subtitle-original { font-size: 26px; } .subtitle-translation { font-size: 19px; } } /* ============================================================================= MOBILE RESPONSIVE (below 768px) ============================================================================= */ @media (max-width: 767px) { .subtitle-list { padding: var(--space-3); } .subtitle-item { padding: var(--space-3); } .subtitle-original { font-size: 16px; } .subtitle-translation { font-size: 14px; } /* Mobile controls - Apple style */ .player-controls { gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); } .progress-times { font-size: 10px; margin-top: var(--space-1); } .control-buttons { gap: var(--space-10); } .control-btn svg { width: 28px; height: 28px; } .control-btn.play-btn { width: 48px; height: 48px; } .control-btn.play-btn svg { width: 48px; height: 48px; } .playback-options { gap: var(--space-4); } .option-btn { min-width: 40px; min-height: 40px; } .option-btn svg { width: 20px; height: 20px; } } /* Small phones */ @media (max-width: 380px) { .episode-title { font-size: 15px; } .subtitle-original { font-size: 15px; } .subtitle-translation { font-size: 13px; } .control-buttons { gap: var(--space-8); } .control-btn.play-btn { width: 44px; height: 44px; } .control-btn.play-btn svg { width: 44px; height: 44px; } } /* ============================================================================= ADMIN PLAYER (COMPACT MODE) Contained within its parent container rather than full viewport. Uses container-relative sizing so the player adapts to available space. ============================================================================= */ .player-layout.admin-player { /* Don't use viewport height - stay within container */ height: auto; min-height: 500px; max-height: 80vh; /* Ensure the player respects its container boundaries */ position: relative; contain: layout style; } .player-layout.admin-player .subtitle-list { min-height: 250px; /* Use container-relative height, capped at a reasonable max */ max-height: min(400px, calc(80vh - 200px)); flex: 1; } .player-layout.admin-player .player-sidebar { display: none; } /* Ensure the main content area fills available space */ .player-layout.admin-player .player-main { height: 100%; display: flex; flex-direction: column; } /* ============================================================================= SCROLLBAR - Apple-style minimal (theme-aware) ============================================================================= */ .subtitle-list::-webkit-scrollbar, .drawer-content::-webkit-scrollbar, .player-sidebar::-webkit-scrollbar { width: 8px; } .subtitle-list::-webkit-scrollbar-track, .drawer-content::-webkit-scrollbar-track, .player-sidebar::-webkit-scrollbar-track { background: transparent; } /* Dark theme scrollbar (default) */ .subtitle-list::-webkit-scrollbar-thumb, .drawer-content::-webkit-scrollbar-thumb, .player-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } .subtitle-list::-webkit-scrollbar-thumb:hover, .drawer-content::-webkit-scrollbar-thumb:hover, .player-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); background-clip: content-box; } /* Light theme scrollbar */ .player-layout[data-theme="light"] .subtitle-list::-webkit-scrollbar-thumb, .player-layout[data-theme="light"] .drawer-content::-webkit-scrollbar-thumb, .player-layout[data-theme="light"] .player-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); background-clip: content-box; } .player-layout[data-theme="light"] .subtitle-list::-webkit-scrollbar-thumb:hover, .player-layout[data-theme="light"] .drawer-content::-webkit-scrollbar-thumb:hover, .player-layout[data-theme="light"] .player-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); background-clip: content-box; } /* System light preference scrollbar Excludes when early theme detection set data-player-theme on */ @media (prefers-color-scheme: light) { html:not([data-player-theme]) .player-layout:not([data-theme]) .subtitle-list::-webkit-scrollbar-thumb, html:not([data-player-theme]) .player-layout:not([data-theme]) .drawer-content::-webkit-scrollbar-thumb, html:not([data-player-theme]) .player-layout:not([data-theme]) .player-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); background-clip: content-box; } html:not([data-player-theme]) .player-layout:not([data-theme]) .subtitle-list::-webkit-scrollbar-thumb:hover, html:not([data-player-theme]) .player-layout:not([data-theme]) .drawer-content::-webkit-scrollbar-thumb:hover, html:not([data-player-theme]) .player-layout:not([data-theme]) .player-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); background-clip: content-box; } } /* Early theme detection: scrollbar for light theme before JS loads */ html[data-player-theme="light"] .player-layout:not([data-theme]) .subtitle-list::-webkit-scrollbar-thumb, html[data-player-theme="light"] .player-layout:not([data-theme]) .drawer-content::-webkit-scrollbar-thumb, html[data-player-theme="light"] .player-layout:not([data-theme]) .player-sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); background-clip: content-box; } html[data-player-theme="light"] .player-layout:not([data-theme]) .subtitle-list::-webkit-scrollbar-thumb:hover, html[data-player-theme="light"] .player-layout:not([data-theme]) .drawer-content::-webkit-scrollbar-thumb:hover, html[data-player-theme="light"] .player-layout:not([data-theme]) .player-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); background-clip: content-box; } /* ============================================================================= REDUCED MOTION ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } .drawer { transition: none; } .subtitle-list { scroll-behavior: auto; } } /* ============================================================================= HIGH CONTRAST - Theme aware ============================================================================= */ @media (prefers-contrast: high) { /* Dark theme high contrast */ .player-layout { --player-glass-border: rgba(255, 255, 255, 0.25); --player-text-tertiary: #b0b0b5; } /* Light theme high contrast (explicit or early detected) */ .player-layout[data-theme="light"], html[data-player-theme="light"] .player-layout:not([data-theme]) { --player-glass-border: rgba(0, 0, 0, 0.25); --player-text-tertiary: #4a4a4f; } } /* ============================================================================= TRANSCRIPT EDITING (Admin only) ============================================================================= */ /* Edit button in subtitle meta */ .edit-utterance-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--player-text-tertiary); cursor: pointer; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .subtitle-item:hover .edit-utterance-btn { opacity: 1; } .edit-utterance-btn:hover { color: var(--player-accent); background: var(--player-accent-subtle); } .edit-utterance-btn:focus-visible { opacity: 1; outline: 2px solid var(--player-accent); outline-offset: 2px; } /* Editing state */ .subtitle-item.editing { background: var(--player-surface-elevated); border-color: var(--player-accent); box-shadow: 0 0 0 2px var(--player-accent-subtle); } /* Edit form */ .edit-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0; } .edit-field { display: flex; flex-direction: column; gap: var(--space-1); } .edit-field label { font-size: 12px; font-weight: 500; color: var(--player-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .edit-field textarea { width: 100%; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--player-text-primary); background: var(--player-bg); border: 1px solid var(--player-glass-border); border-radius: var(--radius-sm); resize: vertical; min-height: 60px; } .edit-field textarea:focus { outline: none; border-color: var(--player-accent); box-shadow: 0 0 0 3px var(--player-accent-subtle); } /* Edit actions */ .edit-actions { display: flex; gap: var(--space-2); padding-top: var(--space-2); } .edit-save-btn, .edit-cancel-btn { flex: 1; padding: var(--space-2) var(--space-4); font-size: 14px; font-weight: 500; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform 0.1s ease; } .edit-save-btn { background: var(--player-accent); color: white; } .edit-save-btn:hover { filter: brightness(1.1); } .edit-save-btn:active { transform: scale(0.98); } .edit-cancel-btn { background: var(--player-glass); color: var(--player-text-primary); border: 1px solid var(--player-glass-border); } .edit-cancel-btn:hover { background: var(--player-surface); } /* Edit note */ .edit-note { font-size: 12px; color: var(--player-text-tertiary); margin: 0; padding-top: var(--space-1); } /* Edited indicator */ .edited-badge { display: inline-block; margin-left: var(--space-2); padding: 2px 6px; font-size: 10px; font-weight: 500; color: var(--player-accent); background: var(--player-accent-subtle); border-radius: var(--radius-sm); vertical-align: middle; } .subtitle-item.has-edits { border-left: 2px solid var(--player-accent); } /* Toast notification for edit feedback */ #edit-toast { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }