/* aura-media custom styles (loaded after Tailwind CDN). */ /* Themed scrollbars — the OS default renders bright/white over the dark UI (e.g. the watch-page transcript panel). Dark is the default; a document with `data-theme="light"` on gets the light set. Firefox uses the standard `scrollbar-*` properties; Chromium/Safari use the ::-webkit-scrollbar pseudos. */ * { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; /* thumb track */ } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #3f3f46; /* neutral-700-ish */ border-radius: 9999px; border: 2px solid transparent; /* inset the thumb so it reads as a pill */ background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: #52525b; /* neutral-600 */ } ::-webkit-scrollbar-corner { background: transparent; } /* Light theme overrides. */ [data-theme="light"] { scrollbar-color: #c4c4cc transparent; } [data-theme="light"] * { scrollbar-color: #c4c4cc transparent; } [data-theme="light"] ::-webkit-scrollbar-thumb { background-color: #c4c4cc; /* neutral-300-ish */ } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: #a1a1aa; /* neutral-400 */ } /* ======================================================================= Custom video/audio player (aura-player-ui.js builds the controls). YouTube-style: on-bar chapter segments, storyboard hover thumbnail, and a "most replayed" heat curve behind the scrubber. ======================================================================= */ .aura-player { position: relative; background: #000; overflow: hidden; } .aura-player .aura-video { display: block; width: 100%; } .aura-player.aura-audio { background: #0a0a0f; } .aura-player:fullscreen { display: flex; align-items: center; justify-content: center; } .aura-player:fullscreen .aura-video { height: 100%; width: 100%; object-fit: contain; } .ap-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 8px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.25) 60%, transparent); opacity: 0; transition: opacity .18s ease; pointer-events: none; } .aura-player.ap-show .ap-controls { opacity: 1; pointer-events: auto; } .aura-audio .ap-controls { position: static; opacity: 1; pointer-events: auto; background: transparent; padding: 10px 2px 2px; } /* scrubber */ .ap-scrub { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; touch-action: none; } .ap-heat { position: absolute; left: 0; right: 0; bottom: 8px; height: 18px; pointer-events: none; opacity: .55; } .ap-heat svg { width: 100%; height: 100%; display: block; } .ap-bar { position: relative; display: flex; align-items: center; gap: 2px; width: 100%; height: 4px; transition: height .1s ease; } .ap-scrub:hover .ap-bar { height: 7px; } .ap-seg { position: relative; height: 100%; overflow: hidden; border-radius: 9999px; background: rgba(255,255,255,.30); flex-grow: 1; min-width: 1px; } .ap-buf { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: rgba(255,255,255,.45); } .ap-play { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #f43f5e; } .ap-knob { position: absolute; top: 50%; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 9999px; background: #f43f5e; transform: translateY(-50%) scale(0); transition: transform .1s ease; pointer-events: none; } .ap-scrub:hover .ap-knob { transform: translateY(-50%) scale(1); } /* hover thumbnail + tooltip */ .ap-thumb { position: absolute; bottom: 50px; width: 160px; height: 90px; border: 2px solid #fff; border-radius: 5px; background-repeat: no-repeat; box-shadow: 0 6px 18px rgba(0,0,0,.55); display: none; pointer-events: none; z-index: 2; } .ap-tip { position: absolute; bottom: 26px; background: rgba(0,0,0,.85); color: #fff; font: 600 9.5px/1.3 inherit; padding: 2px 6px; border-radius: 4px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: none; pointer-events: none; z-index: 3; } .ap-thumb.show, .ap-tip.show { display: block; } /* button row */ .ap-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: #fff; } .aura-audio .ap-row { color: #e5e5e5; } .ap-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; display: inline-flex; opacity: .9; } .ap-btn:hover { opacity: 1; } .ap-btn svg { width: 22px; height: 22px; } .ap-time { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #e5e5e5; } .ap-spacer { flex: 1; } .ap-chap { font-size: 12px; color: #e5e5e5; max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .85; } /* settings menu (YouTube-style: main panel -> playback speed / quality). Anchored to the .aura-player root so it grows to its content, capped just short of the player's top edge. */ .aura-player { position: relative; } .ap-menu { position: absolute; right: 10px; bottom: 64px; min-width: 15rem; max-height: calc(100% - 84px); overflow-y: auto; background: rgba(13,16,21,.96); border: 1px solid #2a3340; border-radius: 10px; padding: 8px; display: none; z-index: 4; font-size: 13px; color: #e7ecf3; } .ap-menu.show { display: block; } .aura-audio .ap-menu { bottom: 44px; } .ap-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; border-radius: 6px; cursor: pointer; } .ap-menu-item:hover { background: #1b222c; } .ap-menu-side { color: #8b95a3; font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .ap-menu-side .chev { font-size: 15px; line-height: 1; } .ap-menu-item .check { visibility: hidden; color: #f43f5e; font-size: 13px; } .ap-menu-item.active .check { visibility: visible; } .ap-menu-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px 8px; background: none; border: 0; border-bottom: 1px solid #1b222c; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; margin-bottom: 6px; } .ap-menu-head .chev { font-size: 17px; line-height: 1; color: #8b95a3; } .ap-menu-head:hover .chev { color: #e7ecf3; } .ap-menu-value { text-align: center; font-size: 15px; font-weight: 600; padding: 6px 0 2px; font-variant-numeric: tabular-nums; } .ap-speed-slider { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; } .ap-speed-slider input[type=range] { flex: 1; accent-color: #f43f5e; min-width: 0; } .ap-mini-btn { flex: none; width: 26px; height: 26px; border-radius: 9999px; border: 0; background: #1b222c; color: #e7ecf3; font-size: 15px; line-height: 1; cursor: pointer; } .ap-mini-btn:hover { background: #2a3340; } .ap-chips { display: flex; justify-content: center; gap: 6px; padding: 4px 8px 8px; flex-wrap: wrap; } .ap-chip { border: 0; border-radius: 9999px; background: #1b222c; color: #e7ecf3; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; } .ap-chip:hover { background: #2a3340; } .ap-chip.active { background: #f43f5e; color: #07090d; font-weight: 600; } .ap-search-wrap { padding: 8px 8px 6px; } .ap-search-field { display: flex; align-items: center; gap: 7px; padding: 6px 12px; background: #131920; border: 1px solid #2a3340; border-radius: 999px; transition: border-color .15s; } .ap-search-field:focus-within { border-color: #f43f5e; } .ap-search-mag { width: 15px; height: 15px; color: #8b95a3; flex: none; } .ap-search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; -webkit-appearance: none; appearance: none; box-shadow: none; color: #e7ecf3; font: inherit; font-size: 13px; } .ap-search-input::placeholder { color: #8b95a3; } .ap-search-results { max-height: 240px; overflow-y: auto; padding: 0 4px 4px; } .ap-search-item { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; color: #e7ecf3; padding: 7px 8px; border-radius: 6px; cursor: pointer; font: inherit; } .ap-search-item:hover { background: #1b222c; } .ap-search-ts { flex: none; color: #f43f5e; font-variant-numeric: tabular-nums; font-size: 12px; min-width: 44px; } .ap-search-text { flex: 1; font-size: 12.5px; line-height: 1.35; color: #cdd6e0; } .ap-search-item mark { background: #f43f5e; color: #07090d; border-radius: 2px; padding: 0 1px; } .ap-search-hint { padding: 8px 10px; color: #8b95a3; font-size: 12.5px; } /* ============================================================================ * AURA design system — recolour the neutral dark UI to gold (#c9a84c) on * near-black (#07090d). media is dark-first; surfaces map to the aura slate. */ .bg-neutral-950, .bg-black { background-color: #07090d !important; } .bg-neutral-950\/95 { background-color: rgba(7, 9, 13, 0.95) !important; } .bg-neutral-900 { background-color: #0d1117 !important; } .bg-neutral-800 { background-color: #131920 !important; } .border-neutral-800, .border-neutral-700 { border-color: #1b2430 !important; } .bg-indigo-600, .bg-indigo-500 { background-color: #c9a84c !important; color: #07090d !important; } .hover\:bg-indigo-500:hover, .hover\:bg-indigo-400:hover, .hover\:bg-indigo-700:hover { background-color: #d8b95e !important; } .text-indigo-400, .text-indigo-500, .text-indigo-300 { color: #c9a84c !important; } .ring-indigo-500, .focus\:ring-indigo-500:focus { --tw-ring-color: #c9a84c !important; } /* teal/green accents for media states stay on-brand */ .text-emerald-400, .text-green-400 { color: #2dd4bf !important; }