/** * Vibe web theme — aligned with Flutter AppColors (lib/constants/colors.dart) */ :root { --vibe-bg: #0b0d13; --vibe-nav: #12151e; --vibe-primary: #1877f2; --vibe-primary-rgb: 24, 119, 242; --vibe-secondary: #ef512c; --vibe-secondary-rgb: 239, 81, 44; --vibe-accent-mint: #2eb193; --vibe-accent-purple: #4601be; --vibe-surface: #16181f; --vibe-border: #2a2d38; --vibe-border-focus: #3b4554; --vibe-text: #f0f1f3; --vibe-hint: #727275; --vibe-muted-icon: #9ca3af; --vibe-chart-1: #1877f2; --vibe-chart-2: #2eb193; --vibe-chart-3: #ef512c; --vibe-chart-4: #4601be; --vibe-chart-5: #ffc107; /* Always defined — Streamit’s IQSetting overwrites data-bs-theme from storage (hulu/hotstar/etc.), which made our old dark-only tokens undefined and dropped body background to Bootstrap light. */ --site-bg-color: var(--vibe-bg); --footer-bg-color: var(--vibe-nav); --vibe-cta-gradient: linear-gradient(135deg, #128dfb 0%, #0864ca 38%, #4544ab 68%, #d9056b 100%); } /* Default Streamit :root uses Netflix red primary; theme presets override --bs-primary but .btn-primary still hardcodes yellow/red --bs-btn-* in streamit.css */ html { --bs-primary: var(--vibe-primary) !important; --bs-primary-rgb: var(--vibe-primary-rgb) !important; } /* Carousel "Play Now" and any .btn-primary — Streamit sets fixed --bs-btn-bg / hover reds on .btn-primary */ .btn.btn-primary { --bs-btn-color: #fff !important; --bs-btn-bg: transparent !important; --bs-btn-border-color: transparent !important; --bs-btn-hover-color: #fff !important; --bs-btn-hover-bg: transparent !important; --bs-btn-hover-border-color: transparent !important; --bs-btn-active-color: #fff !important; --bs-btn-active-bg: transparent !important; --bs-btn-active-border-color: transparent !important; --bs-btn-disabled-color: rgba(255, 255, 255, 0.9) !important; --bs-btn-disabled-bg: rgba(24, 119, 242, 0.35) !important; --bs-btn-disabled-border-color: transparent !important; --bs-btn-focus-shadow-rgb: 24, 119, 242 !important; background: var(--vibe-cta-gradient) !important; border: none !important; color: #fff !important; } .btn.btn-primary:hover, .btn.btn-primary:focus-visible { filter: brightness(1.07); color: #fff !important; } .btn.btn-primary:active { filter: brightness(0.94); } /* Streamit + any page using data-bs-theme="dark" on */ :root[data-bs-theme="dark"], html[data-bs-theme="dark"] { --bs-primary: var(--vibe-primary); --bs-primary-rgb: var(--vibe-primary-rgb); --bs-secondary: var(--vibe-secondary); --bs-secondary-rgb: var(--vibe-secondary-rgb); --bs-body-bg: var(--vibe-bg); --bs-body-bg-rgb: 11, 13, 19; --bs-body-color: var(--vibe-text); --bs-body-color-rgb: 240, 241, 243; --bs-secondary-bg: var(--vibe-surface); --bs-secondary-bg-rgb: 22, 24, 31; --bs-tertiary-bg: #1e2129; --bs-tertiary-bg-rgb: 30, 33, 41; --bs-border-color: var(--vibe-border); --bs-link-color: #5a9ef5; --bs-link-hover-color: #8bb8f8; --bs-link-color-rgb: 90, 158, 245; --bs-link-hover-color-rgb: 139, 184, 248; --bs-focus-ring-color: rgba(24, 119, 242, 0.35); --bs-primary-text-emphasis: #7eb3f7; --bs-primary-bg-subtle: rgba(24, 119, 242, 0.12); --bs-primary-border-subtle: rgba(24, 119, 242, 0.45); } /* Page shell: keep dark regardless of Streamit theme preset on */ html body { background-color: var(--vibe-bg) !important; } html .main-content { background-color: var(--vibe-bg) !important; } /* Header / footer bars (Streamit base) */ html header.header-default { background-color: var(--vibe-nav) !important; } html footer.footer-default { background-color: var(--vibe-nav) !important; } /* App auth / hero gradient (same stops as Flutter login_screen) */ .vibe-auth-gradient { background: var(--vibe-cta-gradient) !important; color: #fff !important; border: none !important; } .btn-vibe-gradient { background: var(--vibe-cta-gradient) !important; color: #fff !important; border: none !important; font-weight: 500; } .btn-vibe-gradient:hover { filter: brightness(1.06); color: #fff !important; } html[data-bs-theme="dark"] .dropdown-menu.vibe-dropdown { background: var(--vibe-surface) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } html[data-bs-theme="dark"] .border-vibe-subtle { border-color: rgba(255, 255, 255, 0.1) !important; } /* ─── Bootstrap dashboards (analytics, legacy stats) in dark mode ─── */ html[data-bs-theme="dark"] .text-dark { color: var(--vibe-text) !important; } html[data-bs-theme="dark"] .text-gray-300 { color: var(--vibe-muted-icon) !important; } html[data-bs-theme="dark"] .card { background-color: var(--vibe-surface); border-color: var(--vibe-border); color: var(--vibe-text); } html[data-bs-theme="dark"] .card.shadow { box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.45) !important; } html[data-bs-theme="dark"] .card-header { background-color: rgba(0, 0, 0, 0.25); border-bottom-color: var(--vibe-border); color: var(--vibe-text); } html[data-bs-theme="dark"] .table { --bs-table-color: var(--vibe-text); --bs-table-bg: transparent; --bs-table-border-color: var(--vibe-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(24, 119, 242, 0.08); } html[data-bs-theme="dark"] .table > :not(caption) > * > * { color: inherit; } html[data-bs-theme="dark"] .border-start-primary { border-left-color: var(--vibe-primary) !important; } html[data-bs-theme="dark"] .border-start-success { border-left-color: var(--vibe-accent-mint) !important; } html[data-bs-theme="dark"] .border-start-warning { border-left-color: var(--vibe-chart-5) !important; } html[data-bs-theme="dark"] .scroll-to-top { background: var(--vibe-surface) !important; color: var(--vibe-primary) !important; border-color: var(--vibe-border) !important; } /* ─── Play controls & back-to-top (Streamit uses --bs-primary → theme orange on hulu) ─── */ /* Hero / card circular play (custom .play-button) */ .play-button { background: var(--vibe-cta-gradient) !important; color: #fff !important; } .play-button::before { background: var(--vibe-cta-gradient) !important; } /* SVG trailer play control (.playbtn) */ .playbtn:hover .triangle { stroke: var(--vibe-primary) !important; } .playbtn:hover .circle { stroke: var(--vibe-primary) !important; } .playbtn:hover span { color: var(--vibe-primary) !important; } /* Detail pages .btn-play */ .btn.btn-play { background: var(--vibe-cta-gradient) !important; border: none !important; color: #fff !important; } .btn.btn-play:hover { filter: brightness(1.06); color: #fff !important; } /* Back to top — beat .bg-primary !important (uses old --bs-primary-rgb) + [data-bs-theme=hulu] icon color */ #back-to-top a#top.btn.bg-primary, #back-to-top a#top, #back-to-top a.btn.position-fixed.bg-primary, #back-to-top .top.btn { background: var(--vibe-cta-gradient) !important; color: #fff !important; border: none !important; box-shadow: none !important; } /* templates/base.html — same floating control */ a#top.btn.position-fixed.rounded-circle.bg-primary { background: var(--vibe-cta-gradient) !important; color: #fff !important; border: none !important; } a#top.btn.position-fixed.rounded-circle.bg-primary i { color: #fff !important; } #back-to-top a#top i, #back-to-top .top.btn i, #back-to-top a.btn.bg-primary i { color: #fff !important; } #back-to-top a#top:hover, #back-to-top a.btn.bg-primary:hover, #back-to-top .top.btn:hover { filter: brightness(1.08); color: #fff !important; } /* Video.js center play */ .video-js .vjs-big-play-button { background-color: rgba(24, 119, 242, 0.88) !important; border-color: rgba(255, 255, 255, 0.95) !important; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus { background-color: rgba(24, 119, 242, 1) !important; border-color: #fff !important; }