/* * Scoped YouTube-style overrides for the youplay theme. * Deliberately scoped to the new/rebuilt components only (home grid, * category pills, sidebar active state) rather than the whole site's * existing blue (#04abf2) brand color, to avoid touching the other 60+ * page templates that still rely on it. Loaded last in so plain * class-selector rules here win over style.css / night-mode.css without * needing !important. */ :root { --yt-red: #FF0000; --yt-red-dark: #CC0000; } /* category pills */ .pt_sec_nav_slide > div a.active { background: var(--yt-red); color: #fff; border-color: var(--yt-red); } .pt_sec_nav_slide > div a:hover { border-color: var(--yt-red); } /* sidebar active state */ .yp_side_drawer ul.sections li a:before { background: var(--yt-red); } .yp_side_drawer ul.sections li.active a, .yp_side_drawer ul.sections li a:hover { color: var(--yt-red); } /* home / grid pages video grid */ .yt-video-grid { display: flex; flex-wrap: wrap; } .yt-video-grid .video-latest-list { transition: transform .15s ease; } .yt-grid-sentinel { width: 100%; display: flex; align-items: center; justify-content: center; padding: 30px 0; clear: both; } .yt-grid-spinner { width: 32px; height: 32px; border: 3px solid rgba(128, 128, 128, 0.25); border-top-color: var(--yt-red); border-radius: 50%; display: none; animation: yt-spin .8s linear infinite; } .yt-grid-sentinel.pt-is-loading .yt-grid-spinner { display: block; } .yt-grid-done { display: none; color: #888; font-size: 13px; } .yt-grid-sentinel.pt-is-done .yt-grid-done { display: block; } @keyframes yt-spin { to { transform: rotate(360deg); } }