/* ========================================================= THEME TOKENS (light / dark) Toggle via: … ========================================================= */ /* Light */ :root { /* Base palette */ --background-color: #FAF7F3; --text-color: #131516; --header-bg-color: #0ABAB5; --header-text-color: #131516; --button-bg-color: #0ABAB5; --button-text-color: #e8ebee; --footer-bg-color: #f1f1f1; --footer-text-color: #131516; --link-color: #0b5ed7; --list-bg: #ffffff; --list-text: #131516; --list-hover-bg: #e8ebee; --muted-color: #373D3F; --border-color: #d0d0d0; --panel-shadow: 0 2px 4px rgba(0,0,0,0.1); --yin-yang-color: #000000; --yin-yang-bg-color: #ffffff; --highlight-bg-color: #093145; --highlight-text-color: #EFD469; /* Bootstrap bridges */ --bs-primary: #181a19; --bs-link-color: var(--link-color); --bs-body-bg: var(--background-color); --bs-body-color: var(--text-color); /* Component tokens */ --focus-outline: var(--link-color); /* Section/card */ --section-bg: #e8e8e8; --section-border: var(--border-color); /* Language selector */ --lang-btn-bg: #0ABAB5; --lang-btn-text: #131516; --lang-option-text: #131516; --lang-hover-bg: var(--list-hover-bg); /* Profile menu */ --profile-btn-bg: var(--lang-btn-bg); --profile-btn-text: var(--lang-btn-text); --profile-border: #7C7D7D; --profile-hover-bg: var(--lang-hover-bg); /* Icon filters (optional) */ --favicon-filter: none; /* Hover overlays */ --hover-overlay: rgba(0, 0, 0, 0.05); --accent: #9929EA; /* softer primary for light mode */ --accent-contrast: #e3e6e8; /* button text on accent */ --accent-hover: color-mix(in srgb, var(--accent) 90%, black 10%); --accent-active: color-mix(in srgb, var(--accent) 80%, black 20%); /* toggles (checkbox/radio) */ --control-accent: var(--accent); --control-focus-ring: color-mix(in srgb, var(--accent) 25%, transparent); /* chips (light) */ --chip-bg: #093145; --chip-text: #EFD469; --chip-border: color-mix(in srgb, var(--chip-bg) 85%, black 15%); /* rating stars (light) */ --star-inactive: #131516; --star-active: #9929EA; /* default top color if JS hasn’t set one yet */ --hero-top: #29214d; } /* Dark */ :root[data-theme="dark"] { --background-color: #1c1e21; --text-color: #e3e6e8; --header-bg-color: #093145; --header-text-color: #ffffff; --button-bg-color: #0889ca; --button-text-color: #e8ebee; --footer-bg-color: #2f3337; --footer-text-color: #e3e6e8; --link-color: #83a7ff; --list-bg: #2f3337; --list-text: #e3e6e8; --list-hover-bg: #3a3d41; --muted-color: #b3b3b3; --border-color: #3a3d41; --panel-shadow: none; --yin-yang-color: #ffffff; --yin-yang-bg-color: #000000; --highlight-bg-color: #EFD469; --highlight-text-color: #093145; --bs-primary: #EFD469; --bs-link-color: var(--link-color); --bs-body-bg: var(--background-color); --bs-body-color: var(--text-color); --focus-outline: var(--link-color); --section-bg: #2f3337; --section-border: #3a3d41; --lang-btn-bg: #093145; --lang-btn-text: #e3e6e8; --lang-option-text: #e3e6e8; --lang-hover-bg: #3a3d41; --profile-btn-bg: var(--lang-btn-bg); --profile-btn-text: var(--lang-btn-text); --profile-border: #b3b3b3; --profile-hover-bg: var(--lang-hover-bg); --favicon-filter: none; --hover-overlay: rgba(255,255,255,0.1); --accent: #EFD469; /* your highlight */ --accent-contrast: #093145; /* readable text on gold */ --accent-hover: color-mix(in srgb, var(--accent) 88%, black 12%); --accent-active: color-mix(in srgb, var(--accent) 80%, black 20%); --control-accent: var(--accent); --control-focus-ring: color-mix(in srgb, var(--accent) 25%, transparent); /* chips (dark) */ --chip-bg: #EFD469; --chip-text: #093145; --chip-border: color-mix(in srgb, var(--chip-bg) 75%, black 25%); /* rating stars (dark) */ --star-inactive: #e3e6e8; --star-active: #EFD469; /* an optional different default for dark */ --hero-top: #093145; } /* ========================================================= GLOBAL ELEMENTS ========================================================= */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: var(--background-color); color: var(--text-color); transition: background-color .3s ease, color .3s ease; } header { background-color: var(--header-bg-color); color: var(--header-text-color); transition: background-color .3s ease, color .3s ease; } header .site-title { color: var(--header-text-color); } header nav a { color: var(--header-text-color); text-decoration: none; font-weight: 500; } header nav a:hover { text-decoration: underline; color: var(--link-color); } footer { background-color: var(--footer-bg-color); color: var(--footer-text-color); transition: background-color .3s ease, color .3s ease; } footer a { color: var(--footer-text-color); text-decoration: none; } footer a:hover { color: var(--link-color); text-decoration: underline; } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; filter: brightness(80%); } .text-muted { color: var(--muted-color) !important; } /* Lists / inputs */ .list-group-item { background-color: var(--list-bg); color: var(--list-text); border: none; transition: background-color .3s ease, color .3s ease; } .list-group-item:hover { background-color: var(--list-hover-bg); } input[type="text"], .form-control { background-color: var(--list-bg); color: var(--text-color); border: 1px solid var(--border-color); } input[type="text"]::placeholder { color: var(--muted-color); } .form-check-label { color: var(--text-color); } #themeToggleBtn i { color: var(--list-text); transition: color .2s ease; } #themeToggleBtn i.sunny { color: #f1c40f; /* golden */ } /* Logo / favicon in title */ .site-title::before { content: ""; display: inline-block; width: 1.75rem; height: 1.75rem; margin-right: .5rem; background-image: url("images/favicon.png"); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 50%; vertical-align: middle; filter: var(--favicon-filter); } /* ========================================================= EPISODE ASSISTANT ========================================================= */ #episode-assistant-root { --assistant-launcher-bottom: 68px; --assistant-panel-bottom: 154px; --assistant-launcher-bg: linear-gradient(135deg, #1f6feb, #0ab8a2); --assistant-header-bg: linear-gradient(135deg, #1558a6, #0e9e8e); --assistant-panel-bg: linear-gradient(180deg, rgba(232, 247, 247, 0.96), rgba(245, 251, 255, 0.98)); --assistant-panel-border: rgba(22, 88, 166, 0.14); --assistant-panel-shadow: 0 20px 50px rgba(22, 58, 92, 0.18); --assistant-body-bg: radial-gradient(circle at top right, rgba(10, 184, 162, 0.14), transparent 34%), linear-gradient(180deg, rgba(31, 111, 235, 0.07), rgba(255, 255, 255, 0.22) 24%, transparent 48%); --assistant-body-text: #143047; --assistant-muted-text: #33556d; --assistant-assistant-bubble-bg: rgba(10, 184, 162, 0.18); --assistant-user-bubble-bg: rgba(31, 111, 235, 0.16); --assistant-bubble-text: #10283d; --assistant-input-bg: rgba(255, 255, 255, 0.88); --assistant-input-border: rgba(21, 88, 166, 0.18); --assistant-input-placeholder: #557086; } :root[data-theme="dark"] #episode-assistant-root { --assistant-launcher-bg: linear-gradient(135deg, #0d5bd3, #0f9f8f); --assistant-header-bg: linear-gradient(135deg, #0a3768, #0a7468); --assistant-panel-bg: linear-gradient(180deg, rgba(13, 20, 30, 0.97), rgba(18, 29, 41, 0.98)); --assistant-panel-border: rgba(131, 167, 255, 0.16); --assistant-panel-shadow: 0 22px 54px rgba(0, 0, 0, 0.42); --assistant-body-bg: radial-gradient(circle at top right, rgba(6, 214, 160, 0.12), transparent 32%), linear-gradient(180deg, rgba(131, 167, 255, 0.08), transparent 24%); --assistant-body-text: #e8f1f8; --assistant-muted-text: #b7cadd; --assistant-assistant-bubble-bg: rgba(6, 214, 160, 0.16); --assistant-user-bubble-bg: rgba(131, 167, 255, 0.16); --assistant-bubble-text: #edf6ff; --assistant-input-bg: rgba(255, 255, 255, 0.04); --assistant-input-border: rgba(131, 167, 255, 0.16); --assistant-input-placeholder: #9db5c8; } #episode-assistant-launcher { position: fixed; right: 20px; bottom: var(--assistant-launcher-bottom); width: 58px; height: 58px; border: 0; border-radius: 999px; z-index: 1400; color: #fff; background: var(--assistant-launcher-bg); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } #episode-assistant-panel { position: fixed; right: 20px; bottom: var(--assistant-panel-bottom); width: min(380px, calc(100vw - 24px)); height: min(520px, calc(100vh - 120px)); z-index: 1400; display: flex; flex-direction: column; overflow: hidden; color: var(--assistant-body-text); border: 1px solid var(--assistant-panel-border); border-radius: 18px; background: var(--assistant-panel-bg); box-shadow: var(--assistant-panel-shadow); } .assistant-hidden { display: none !important; } .assistant-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #fff; background: var(--assistant-header-bg); } .assistant-subtitle { margin-top: 2px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.92); } .assistant-actions { display: flex; align-items: center; gap: 6px; } .assistant-icon-btn { width: 32px; height: 32px; border: 0; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, 0.14); } .assistant-messages { flex: 1; overflow-y: auto; padding: 14px; color: var(--assistant-body-text); background: var(--assistant-body-bg); } .assistant-message { max-width: 88%; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); } .assistant-message--assistant { color: var(--assistant-bubble-text); background: var(--assistant-assistant-bubble-bg); } .assistant-message--user { margin-left: auto; color: var(--assistant-bubble-text); background: var(--assistant-user-bubble-bg); } .assistant-source { margin-top: 6px; font-size: 0.78rem; color: var(--assistant-muted-text); opacity: 1; } .assistant-thinking { display: inline-flex; align-items: center; gap: 10px; } .assistant-thinking-label { font-size: 0.92rem; } .assistant-thinking-dots { display: inline-flex; align-items: center; gap: 5px; } .assistant-thinking-dots span { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.32; animation: assistant-thinking-pulse 1.2s infinite ease-in-out; } .assistant-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .assistant-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes assistant-thinking-pulse { 0%, 80%, 100% { opacity: 0.28; transform: translateY(0); } 40% { opacity: 0.95; transform: translateY(-1px); } } .assistant-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid rgba(127, 127, 127, 0.14); background: transparent; } #episode-assistant-input { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--assistant-input-border); border-radius: 12px; background: var(--assistant-input-bg); color: var(--assistant-body-text); resize: none; overflow-y: auto; } #episode-assistant-input::placeholder { color: var(--assistant-input-placeholder); opacity: 1; } #episode-assistant-send { width: 42px; height: 42px; border: 0; border-radius: 999px; color: #fff; background: var(--assistant-launcher-bg); } #episode-assistant-send:disabled, .assistant-icon-btn:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 640px) { #episode-assistant-root { --assistant-launcher-bottom: 64px; --assistant-panel-bottom: 146px; } #episode-assistant-launcher { right: 14px; bottom: var(--assistant-launcher-bottom); } #episode-assistant-panel { right: 12px; bottom: var(--assistant-panel-bottom); width: calc(100vw - 24px); height: min(72vh, 520px); } } .favicon-icon { width: 10px; height: 20px; border-radius: 50%; object-fit: cover; filter: var(--favicon-filter); } /* Images */ .uniform-image { width: 10px; height: 5px; object-fit: cover; border-radius: 6px; } .channel-image, .episode-image { max-width: 150px; height: auto; border-radius: 10px; } /* Readability helpers */ /* Base clamp for summaries (desktop) */ .summary-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; /* desktop lines */ overflow: hidden; text-overflow: ellipsis; } /* Expanded state: remove clamping */ .summary-expanded { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; } .highlight { background-color: var(--highlight-bg-color); color: var(--highlight-text-color); font-weight: bold; padding: .2em; border-radius: 3px; } /* ========================================================= Channel detail ========================================================= */ /* Base: Desktop (large screens) */ .channel-header-img { display: block; width: 325px; /* desktop size */ aspect-ratio: 1 / 1; /* keep it square */ height: auto; border-radius: 6px; object-fit: cover; } /* Small phones (very narrow, e.g. ≤400px wide) */ @media (max-width: 400px) { .channel-header-img { width: 150px; /* compact thumbnail */ } } /* Regular phones (401px–576px) – e.g. your 450px case */ @media (min-width: 401px) and (max-width: 576px) { .channel-header-img { width: 180px; /* still visible but not massive */ } } /* Tablets (577px–900px) */ @media (min-width: 577px) and (max-width: 900px) { .channel-header-img { width: 200px; /* mid-size on tablets */ } } /* Optional: explicitly re-affirm desktop (≥901px) */ /* Not strictly needed since base rule handles it, but clear: */ @media (min-width: 901px) { .channel-header-img { width: 325px; } } /* ========================================================= Sort Filter and Podcast Episodes or Channels ========================================================= */ @media (max-width: 768px) { main .d-flex.justify-content-between.align-items-center.mb-3 { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap; gap: .5rem; } /* Title on the left */ main .d-flex.justify-content-between.align-items-center.mb-3 h2, main .d-flex.justify-content-between.align-items-center.mb-3 .page-title { margin: 0; text-align: left; flex: 1 1 auto; min-width: 0; } /* Sort control on the right */ main .d-flex.justify-content-between.align-items-center.mb-3 .episode-sort, main .d-flex.justify-content-between.align-items-center.mb-3 .channel-sort, main .d-flex.justify-content-between.align-items-center.mb-3 .sort-wrap { margin-left: auto !important; flex: 0 0 auto; } } /* ========================================================= Social Media Icons ========================================================= */ /* ---------- Footer social icons (scoped) ---------- */ .social-links { position: relative; display: inline-flex; /* sit nicely on one line in footer */ gap: 0; /* spacing handled by li.mx-2 */ list-style: none; } .social-links li { position: relative; list-style: none; } .social-links li a { position: relative; display: inline-block; text-decoration: none; line-height: 1; } /* Base icon: large, dim neutral color that matches theme */ .social-links li a .fa-brands, .social-links li a .fas { font-size: 2rem; /* adjust size as you like */ color: var(--footer-text-color); /* integrate with your theme tokens */ opacity: .6; /* “unfilled” baseline */ transition: opacity .25s ease; } /* Overlay “fill” that reveals on hover */ .social-links li a::before { /* Using Font Awesome brands; envelope is in 'Free' but shows fine as overlay text */ font-family: "Font Awesome 6 Brands"; font-weight: 400; position: absolute; inset: 0; /* full overlay */ font-size: 2rem; line-height: 1; height: 0; /* collapsed until hover */ overflow: hidden; transition: height .45s ease-in-out, border-color .25s ease-in-out; color: transparent; /* we’ll use background-clip on some */ border-bottom: 3px solid transparent; } /* X / Twitter (blue) */ .social-links li:nth-child(1) a::before { /* If you prefer 'X' glyph, switch to "\e61b" and ensure you have latest FA build */ content: "\e61b"; /* legacy twitter bird - widely supported */ color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; background: #000000; border-bottom-color: #FFFFFF; } /* Email (envelope) */ .social-links li:nth-child(2) a::before { font-family: "Font Awesome 6 Free"; font-weight: 900; /* solid */ content: "\f0e0"; /* envelope */ color: var(--link-color); -webkit-text-fill-color: var(--link-color); border-bottom-color: var(--link-color); } /* GitHub (white) */ .social-links li:nth-child(3) a::before { content: "\f09b"; /* github */ background: #fff; color: #000000; -webkit-text-fill-color: #000000; border-bottom-color: #fff; } /* GitLab (orange) */ .social-links li:nth-child(4) a::before { content: "\f296"; /* gitlab */ color: #e24329; -webkit-text-fill-color: #e24329; border-bottom-color: #e24329; } /* YouTube (red) */ .social-links li:nth-child(5) a::before { content: "\f167"; /* youtube */ color: #ff0000; -webkit-text-fill-color: #ff0000; border-bottom-color: #ff0000; } /* Rumble (bigger, green circle-play) */ .social-links li:nth-child(6) a::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f144"; /* circle-play */ font-size: 2.4rem; /* bump size up */ color: #00e676; -webkit-text-fill-color: #00e676; border-bottom-color: #00e676; } /* Make the base icon larger too so it matches the overlay */ .social-links li:nth-child(6) a .fas { font-size: 2.4rem; } /* Patreon (orange/red) */ .social-links li:nth-child(7) a::before { content: "\f3d9"; /* patreon */ color: #FFFFFF; background: #000000; -webkit-text-fill-color: #FFFFFF; border-bottom-color: #FFFFFF; } /* Hover animation */ .social-links li a:hover::before, .social-links li a:focus-visible::before { height: 100%; } .social-links li a:hover .fa-brands, .social-links li a:hover .fas, .social-links li a:focus-visible .fa-brands, .social-links li a:focus-visible .fas { opacity: 1; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .social-links li a::before { transition: none; } .social-links li a .fa-brands, .social-links li a .fas { transition: none; } } /* ========================================================= PANELS / SECTIONS ========================================================= */ .section-container { background-color: var(--section-bg) !important; border: 1px solid var(--section-border) !important; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; box-shadow: var(--panel-shadow); } /* ========================================================= Create Account button uses theme tokens ========================================================= */ .btn-create-account { /* Base */ --bs-btn-bg: var(--button-bg-color); --bs-btn-border-color: var(--button-bg-color); --bs-btn-color: var(--list-hover-bg); /* Hover / active */ --bs-btn-hover-bg: color-mix(in srgb, var(--button-bg-color) 90%, black 10%); --bs-btn-hover-border-color: color-mix(in srgb, var(--button-bg-color) 90%, black 10%); --bs-btn-hover-color: var(--list-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--button-bg-color) 80%, black 20%); --bs-btn-active-border-color: color-mix(in srgb, var(--button-bg-color) 80%, black 20%); --bs-btn-active-color: var(--list-hover-bg); box-shadow: none; /* calmer focus */ } /* ========================================================= Guest Disabled ========================================================= */ /* Keep the disabled look, but allow clicks so the toast can trigger */ #episode-rating-container[aria-disabled="true"] .star-icon, #rating-container[aria-disabled="true"] .star-icon { cursor: not-allowed; opacity: .6; /* allow the click so JS can intercept and show toast */ pointer-events: auto !important; } /* Safety: ensure anything marked as .is-guest still receives clicks */ #episode-actions .is-guest, #episode-actions .is-guest * { pointer-events: auto !important; } /* Guest-disabled look & feel */ .is-guest { cursor: not-allowed !important; opacity: 0.6; } /* Disabled guest styling for buttons (if not already present) */ .btn-follow[disabled], .btn-notification[disabled] { cursor: not-allowed; opacity: .6; } .btn-bookmark[disabled], .btn-comment[disabled] { cursor: not-allowed; opacity: .6; } .guest-dim { opacity: .45; filter: grayscale(100%); cursor: not-allowed; } .guest-toast { position: fixed; left: 50%; top: 25%; transform: translateX(-50%); max-width: 90vw; background: var(--list-bg); color: var(--list-text); border: 1px solid var(--border-color); padding: 10px 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; z-index: 2000; font-size: .95rem; } .guest-toast a.guest-toast-link { color: var(--link-color); font-weight: 600; text-decoration: none; } .guest-toast a.guest-toast-link:hover { text-decoration: underline; } .guest-toast-show { display: flex !important; animation: toastFadeIn .18s ease; } @keyframes toastFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(6px);} to { opacity: 1; transform: translateX(-50%) translateY(0);} } /* ========================================================= LANGUAGE SELECTOR ========================================================= */ .lang-select-btn { --icon-size: 1.75rem; --icon-right-gap: .75rem; /* was .5rem */ --text-icon-gap: 1.25rem; /* was .75rem → more space */ background-color: var(--lang-btn-bg) !important; color: var(--lang-btn-text) !important; border: none !important; border-radius: .25rem; font-size: 1rem; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* reserve larger space on the right for the icon */ padding: .25rem calc(var(--icon-size) + var(--icon-right-gap) + var(--text-icon-gap)) .25rem .25rem; transition: background-color .3s ease, color .3s ease, outline-color .2s ease; background-image: url("images/language-planet.svg"); background-repeat: no-repeat; background-position: right var(--icon-right-gap) center; background-size: var(--icon-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* keep your existing overrides */ .lang-select-btn option { color: var(--lang-option-text) !important; background-color: var(--lang-btn-bg) !important; } .lang-select-btn.dropdown-toggle { color: var(--lang-option-text) !important; background-color: var(--lang-btn-bg) !important; background-image: none !important; padding-right: .5rem !important; } /* Hover highlight ring for the language button */ .lang-select-btn { --hover-ring: color-mix(in srgb, var(--focus-outline) 45%, transparent); transition: background-color .2s ease, color .2s ease, box-shadow .15s ease; } .lang-select-btn:hover, .lang-select-btn:focus-visible { outline: none; /* avoid double outlines */ box-shadow: 0 0 0 3px var(--hover-ring); } /* If it renders as a Bootstrap dropdown toggle, keep the same ring */ .lang-select-btn.dropdown-toggle:hover, .lang-select-btn.dropdown-toggle:focus-visible { box-shadow: 0 0 0 3px var(--hover-ring); } #languageSelect, .lang-select-btn { cursor: pointer !important; } /* Make top language dropdown items match your themed dropdown */ .lang-dropdown .dropdown-item { background-color: var(--lang-btn-bg) !important; color: var(--lang-option-text) !important; } .lang-dropdown .dropdown-item:hover, .lang-dropdown .dropdown-item:focus { background-color: var(--lang-hover-bg) !important; color: var(--lang-option-text) !important; } /* Re-enable planet icon for the top header language dropdown */ #languageSelectBtn.lang-select-btn.dropdown-toggle { background-image: url("images/language-planet.svg") !important; background-repeat: no-repeat !important; background-position: right var(--icon-right-gap) center !important; background-size: var(--icon-size) !important; /* keep the right padding space for the icon */ padding-right: calc(var(--icon-size) + var(--icon-right-gap) + var(--text-icon-gap)) !important; } /* ========================================================= PROFILE MENU (match Language dropdown) ========================================================= */ /* Button: NO permanent border, only a hover/focus ring */ .btn.profile-btn { background-image: none !important; background-color: var(--profile-btn-bg) !important; color: var(--profile-btn-text) !important; margin-left: .35rem; border: none !important; /* <- key: no gray box */ border-radius: .25rem; padding: .25rem .5rem; /* keep it consistent with language btn */ /* ring like lang-select-btn */ --ring-size: 3px; --hover-ring: color-mix(in srgb, var(--focus-outline) 45%, transparent); transition: background-color .2s ease, color .2s ease, box-shadow .15s ease; } /* hover + focus ring */ .btn.profile-btn:hover, .btn.profile-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 var(--ring-size) var(--hover-ring) !important; } /* keep ring when dropdown is open */ .show > .btn.profile-btn.dropdown-toggle { box-shadow: 0 0 0 var(--ring-size) var(--hover-ring) !important; } .profile-dropdown-menu { min-width: .25rem !important; width: auto !important; background-color: var(--profile-btn-bg) !important; /* match Bootstrap dropdown border + radius */ border: 1px solid var(--bs-border-color-translucent) !important; border-radius: .375rem !important; /* helps corners look “solid” */ background-clip: padding-box; overflow: hidden; box-shadow: none !important; padding: 0; text-align: center; } .profile-dropdown-menu .dropdown-item { background-color: var(--profile-btn-bg) !important; color: var(--profile-btn-text) !important; border: none !important; padding: .25rem .5rem; transition: background-color .2s ease, color .2s ease; } .profile-dropdown-menu .dropdown-item:hover, .profile-dropdown-menu .dropdown-item:focus { background-color: var(--profile-hover-bg) !important; color: var(--profile-btn-text) !important; } /* ========================================================= SUPPORT TICKET: file upload Browse button match "Guest" style ========================================================= */ /* The file input itself */ .support-ticket-page input[type="file"].form-control { background-color: var(--list-bg); color: var(--text-color); border: 1px solid var(--border-color); } /* The "Browse" button part (Bootstrap 5) */ .support-ticket-page input[type="file"].form-control::file-selector-button { /* mimic your .btn.btn-secondary tokens (Guest button) */ background: var(--accent-contrast); color: var(--accent); border: 1px solid var(--accent-contrast); border-right: 1px solid var(--border-color); padding: .375rem .75rem; margin-right: .75rem; border-radius: .25rem; cursor: pointer; transition: filter .15s ease; } .support-ticket-page input[type="file"].form-control::file-selector-button:hover { filter: brightness(.96); } /* Firefox prefix */ .support-ticket-page input[type="file"].form-control::-webkit-file-upload-button { background: var(--accent-contrast); color: var(--accent); border: 1px solid var(--accent-contrast); border-right: 1px solid var(--border-color); padding: .375rem .75rem; margin-right: .75rem; border-radius: .25rem; cursor: pointer; } /* ========================================================= SUPPORT TICKET: tooltips themed (background/text + native blue) ========================================================= */ .support-ticket-page .tooltip .tooltip-inner { background-color: var(--list-bg) !important; color: var(--list-text) !important; border: 1px solid var(--link-color) !important; /* native blue */ box-shadow: 0 8px 22px rgba(0,0,0,.25); max-width: min(520px, 90vw); text-align: left; } /* Arrow color depends on placement */ .support-ticket-page .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--link-color) !important; } .support-ticket-page .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--link-color) !important; } .support-ticket-page .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--link-color) !important; } .support-ticket-page .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--link-color) !important; } /* Make attachment help text match label color (same as Subject/Message label) */ .support-ticket-page .support-help { color: var(--text-color) !important; opacity: 1 !important; } .support-ticket-page table.support-table thead th { background-color: var(--header-bg-color) !important; color: var(--header-text-color) !important; border-bottom: 2px solid var(--link-color) !important; } .support-ticket-page .support-table tbody td { background-color: var(--list-bg) !important; color: var(--list-text) !important; } .support-ticket-page .support-table tbody tr { border-bottom: 1px solid var(--border-color) !important; } /* Keep the wrapper rounding */ .table-responsive.bubble { border-radius: 1rem !important; overflow: hidden !important; } /* Also round the table so its background respects corners */ .table-responsive.bubble table.support-table { border-collapse: separate !important; /* important for radius */ border-spacing: 0 !important; border-radius: 1rem !important; overflow: hidden; /* helps in some browsers */ } /* Round the actual corner cells (top + bottom) */ .table-responsive.bubble thead tr:first-child th:first-child { border-top-left-radius: 1rem !important; } .table-responsive.bubble thead tr:first-child th:last-child { border-top-right-radius: 1rem !important; } .table-responsive.bubble tbody tr:last-child td:first-child { border-bottom-left-radius: 1rem !important; } .table-responsive.bubble tbody tr:last-child td:last-child { border-bottom-right-radius: 1rem !important; } /* Ensure last row doesn't draw a border that "squares" the corner */ .table-responsive.bubble tbody tr:last-child { border-bottom: none !important; } /* ========================================================= BOOTSTRAP TOOLTIP THEME OVERRIDE (Support tickets) ========================================================= */ /* Tooltips are appended to , so page-scoped ancestors won't match. Use an attribute selector that only affects YOUR ticket tooltips. */ [data-bs-toggle="tooltip"] + .tooltip, .tooltip { /* nothing here; just ensuring selector compiles */ } /* Force tooltip panel colors (Bootstrap uses .tooltip-inner) */ .tooltip .tooltip-inner { background-color: var(--list-bg) !important; color: var(--list-text) !important; border: 1px solid var(--link-color) !important; /* native blue */ box-shadow: 0 8px 22px rgba(0,0,0,.25) !important; opacity: 1 !important; max-width: min(520px, 90vw) !important; text-align: left !important; } /* Arrow color (BS5 uses ::before on .tooltip-arrow) */ .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--link-color) !important; } .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--link-color) !important; } .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--link-color) !important; } .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--link-color) !important; } /* ========================================================= SUPPORT TICKET: lighten the message textarea + placeholder ========================================================= */ .support-ticket-page textarea, .support-ticket-page textarea.form-control { background-color: color-mix(in srgb, var(--list-bg) 85%, white 15%) !important; color: var(--text-color) !important; border: 1px solid var(--border-color) !important; } /* placeholder ("Describe your request") */ .support-ticket-page textarea::placeholder { color: var(--muted-color) !important; opacity: 1 !important; /* Firefox */ } /* nice focus ring consistent with your theme */ .support-ticket-page textarea:focus { border-color: var(--link-color) !important; box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--link-color) 25%, transparent) !important; outline: none; } /* ========================================================= SCROLLABLE DROPDOWN (channel multi-select) ========================================================= */ .scrollable-dropdown { max-height: 300px; overflow-y: auto; overflow-x: hidden; background-color: var(--list-bg) !important; /* Firefox */ scrollbar-width: thin; scrollbar-color: var(--lang-btn-bg) var(--background-color); } .scrollable-dropdown .form-check-label { color: var(--list-text) !important; } /* WebKit scrollbars */ .scrollable-dropdown::-webkit-scrollbar { width: 8px; } .scrollable-dropdown::-webkit-scrollbar-track { background: var(--background-color); } .scrollable-dropdown::-webkit-scrollbar-thumb { background-color: var(--lang-btn-bg); border-radius: 4px; } .scrollable-dropdown::-webkit-scrollbar-thumb:hover { background-color: var(--link-color); } /* ========================================================= TABLE (tech stack) ========================================================= */ .tech-table { --bs-table-bg: var(--list-bg); --bs-table-color: var(--list-text); --bs-table-striped-bg: var(--list-hover-bg); --bs-table-striped-color: var(--list-text); --bs-table-border-color: var(--list-hover-bg); --bs-table-hover-bg: var(--highlight-bg-color); --bs-table-hover-color: var(--highlight-text-color); } .tech-table thead th { background: var(--header-bg-color); color: var(--header-text-color); } /* ========================================================= THEME-AWARE GITHUB LINK BUTTON ========================================================= */ .github-link { color: var(--link-color); border-color: var(--link-color); } .github-link:hover { background-color: var(--link-color); color: #fff; } /* ========================================================= EPISODE SORT DROPDOWN (light + dark via theme tokens) ========================================================= */ .episode-sort .btn-outline-light, .channel-sort .btn-outline-light{ --bs-btn-color: var(--list-text); --bs-btn-border-color: var(--border-color); --bs-btn-hover-bg: var(--list-hover-bg); --bs-btn-hover-border-color: var(--border-color); --bs-btn-active-bg: var(--list-hover-bg); --bs-btn-active-border-color: var(--border-color); --bs-btn-disabled-color: var(--muted-color); --bs-btn-disabled-border-color: var(--border-color); box-shadow: none; } .episode-sort .dropdown-menu, .channel-sort .dropdown-menu { background-color: var(--list-bg); color: var(--list-text); border: 1px solid var(--border-color); max-height: 590px; /* fixed height */ overflow-y: auto; overscroll-behavior: contain; /* prevents body scroll on touchpads */ } /* Optional: use viewport-based height on small screens */ @media (max-width: 576px) { .episode-sort .dropdown-menu, .channel-sort .dropdown-menu { max-height: 47vh; /* breathe on phones */ } } .episode-sort .dropdown-item, .channel-sort .dropdown-item { color: var(--list-text); } .episode-sort .dropdown-item:hover, .episode-sort .dropdown-item:focus, .channel-sort .dropdown-item:hover, .channel-sort .dropdown-item:focus { background-color: var(--list-hover-bg); color: var(--list-text); } .episode-sort .dropdown-item.active, .episode-sort .dropdown-item:active, .channel-sort .dropdown-item.active, .channel-sort .dropdown-item:active { background-color: var(--highlight-bg-color); color: var(--highlight-text-color); } .episode-sort .dropdown-header, .channel-sort .dropdown-header { color: var(--muted-color); } .episode-sort .dropdown-divider, .channel-sort .dropdown-divider { border-top-color: var(--border-color); } /* ============================ Sort button: magnetic hover ============================ */ .sort-magnetic { position: relative; overflow: visible; /* allow particles to breathe */ transform: translateZ(0); /* promote to its own layer */ will-change: transform, box-shadow; transition: transform .18s ease, box-shadow .18s ease; z-index: 2; /* keep above dropdown menu border */ } /* Base look inherits from your .btn-outline-light tokens. We only add a subtle hover ring that matches your theme. */ .sort-magnetic:hover, .sort-magnetic:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-outline) 35%, transparent); } /* Particle field container (already in your theme as a pattern) */ .sort-magnetic .particles-field { position: absolute; inset: -80%; /* extend field around the button */ pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: -1; /* sits behind the button face */ } .sort-magnetic:hover .particles-field { opacity: 1; } /* Particle dots (theme aware) */ .sort-magnetic .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--list-text) 85%, transparent); opacity: .9; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--list-text) 45%, transparent)); } /* Float animation (uses per-particle CSS vars --x/--y) */ @keyframes sortParticleFloat { 0% { transform: translate(var(--x), var(--y)) scale(0); } 50% { transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(1); } 100% { transform: translate(var(--x), var(--y)) scale(0); } } /* Optional: reduce motion preference */ @media (prefers-reduced-motion: reduce) { .sort-magnetic { transition: none; } .sort-magnetic .particles-field { transition: none; } .sort-magnetic .particle { animation: none !important; } } /* ============================ Click ripple (subtle, themed) ============================ */ .sort-magnetic { --ripple-color: color-mix(in srgb, var(--link-color) 35%, transparent); } .sort-magnetic .ripple { position: absolute; border-radius: 999px; transform: translate(-50%, -50%); pointer-events: none; width: 12px; height: 12px; background: radial-gradient(circle, var(--ripple-color) 0%, transparent 60%); opacity: .35; animation: sortRipple .5s ease-out forwards; z-index: 3; } @keyframes sortRipple { to { opacity: 0; width: 220px; height: 220px; } } /* ================================ Header nav: animated underlines ================================ */ /* Theme colors for the underline gradient */ :root { --nav-underline-start: var(--accent); /* light theme start */ --nav-underline-end: var(--link-color); /* light theme end */ } :root[data-theme="dark"] { --nav-underline-start: var(--highlight-bg-color); --nav-underline-end: var(--bs-link-color); } /* Base nav link override: keep no built-in underline */ header nav a.nav-underline { position: relative; text-decoration: none !important; /* beat your header nav a:hover underline */ display: inline-block; } /* Make sure default hover rule doesn't add text-decoration */ header nav a.nav-underline:hover { text-decoration: none; } /* Underlines (top + bottom) using pseudo elements */ header nav a.nav-underline::after, header nav a.nav-underline::before { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--nav-underline-start), var(--nav-underline-end)); transform: scaleX(0); transform-origin: right; transition: transform .35s ease-out; will-change: transform; } /* Bottom line sits a touch below text baseline */ header nav a.nav-underline::after { bottom: -0.25em; } /* Top line sits a touch above cap height; grows from the left */ header nav a.nav-underline::before { top: -0.25em; transform-origin: left; } /* Hover/focus states: animate both lines in */ header nav a.nav-underline:hover::after, header nav a.nav-underline:hover::before, header nav a.nav-underline:focus-visible::after, header nav a.nav-underline:focus-visible::before { transform: scaleX(1); } /* Optional: color shift on hover for the text itself (keeps your theme look) */ header nav a.nav-underline:hover, header nav a.nav-underline:focus-visible { color: var(--bs-link-color); outline: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { header nav a.nav-underline::after, header nav a.nav-underline::before { transition: none; } } /* Pulse animation — only when hovered/focused */ .btn-pulse-hover { /* avoid layout thrash while animating */ will-change: transform; } .btn-pulse-hover:hover, .btn-pulse-hover:focus-visible { animation: pulse 1.2s ease-in-out infinite; } /* Slight press on click */ .btn-pulse-hover:active { transform: scale(0.97); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .btn-pulse-hover:hover, .btn-pulse-hover:focus-visible { animation: none; transform: none; } } /* Reuse your existing keyframes (or keep this if not already present) */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } } /* One-off wobble on hover/focus */ .btn-wobble-once:hover, .btn-wobble-once:focus-visible { animation: wobble 0.8s ease both 1; } /* Press feedback (optional) */ .btn-wobble-once:active { transform: translateX(0) scale(0.98); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .btn-wobble-once:hover, .btn-wobble-once:focus-visible { animation: none; transform: none; } } /* If you don't already have wobble keyframes in your CSS, include this: */ @keyframes wobble { 0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } } /* ============================ Click confetti (subtle, themed) ============================ */ .confetti-piece { position: fixed; /* placed at click point */ width: 7px; height: 10px; border-radius: 2px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(0deg); animation: confetti-pop var(--dur, 800ms) ease-out forwards; } @keyframes confetti-pop { 0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, -90px)) rotate(var(--rot, 180deg)); } } /* Respect user preference */ @media (prefers-reduced-motion: reduce) { .confetti-piece { animation: none; } } /* ========================================================= SEARCH BUTTON AND FILTER TOGGLES AND CHECKS ========================================================= */ .btn.btn-primary { --bs-btn-color: var(--accent-contrast); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-color: var(--accent-contrast); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-color: var(--accent-contrast); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); /* optional: calm the default bright focus ring */ box-shadow: none; } .btn.btn-primary:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; } .btn.btn-secondary { --bs-btn-color: var(--accent); --bs-btn-bg: var(--accent-contrast); --bs-btn-border-color: var(--accent-contrast); --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: var(--accent-contrast); --bs-btn-hover-border-color: var(--accent-contrast); --bs-btn-active-color: var(--accent); --bs-btn-active-bg: var(--accent-contrast); --bs-btn-active-border-color: var(--accent-contrast); /* optional: calm the default bright focus ring */ box-shadow: none; } .btn.btn-secondary:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; } /* Checkboxes / Radios (filter toggles) */ .form-check-input { background-color: var(--list-bg); border-color: var(--border-color); } .form-check-input:checked { background-color: var(--control-accent); border-color: var(--control-accent); } .form-check-input:focus { border-color: var(--control-accent); box-shadow: 0 0 0 .2rem var(--control-focus-ring); } /* Optional: tone down outline secondary buttons (▲ ▼ & “Hide search”) */ .btn-outline-secondary { --bs-btn-color: var(--list-text); --bs-btn-border-color: var(--border-color); --bs-btn-hover-bg: var(--list-hover-bg); --bs-btn-hover-color: var(--list-text); --bs-btn-active-bg: var(--list-hover-bg); --bs-btn-active-color: var(--list-text); --bs-btn-active-border-color: var(--border-color); } /* --- Safety: no accidental page-wide overflow --- */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } /* ========================================================= EPISODE/CHANNEL TEXT CLAMPS ========================================================= */ .description-clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } .episode-title-clamp, .channel-title-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; line-height:1.25; max-height:calc(1.25em * 2); overflow-wrap:anywhere; } .metadata-line{ font-size:.9rem; } .lang-select-btn { font-size: .9rem; max-width: 42vw; } .profile-btn { font-size: .9rem; padding: 1rem 1rem; max-width: 42vw; } /* ========================================================= EPISODE DETAIL PAGE ========================================================= */ /* ---------- Counters beside icons ---------- */ .comments-count, .total-views, .bookmarks-count, .episode-rating-info, .downloads-count, .shares-count { font-size: 1.15rem; font-weight: 600; color: var(--text-color) !important; margin-right: .5rem; } /* Channel link */ .channel-link { color: var(--link-color); font-weight: 600; text-decoration: none; } .channel-link:hover { text-decoration: underline; filter: brightness(90%); } /* Default icons (outside chips) follow theme text color */ .section-container i.fa-solid, .section-container i.fa-regular { color: var(--text-color); } /* ---------- Stars ---------- */ #episode-rating-container .star-icon { color: var(--star-inactive) !important; } #episode-rating-container .star-active { color: var(--star-active) !important; } /* ---------- Chips (bookmark/comment basic buttons) ---------- */ .btn-bookmark, .btn-bookmarked, .btn-comment { background-color: var(--chip-bg) !important; color: var(--chip-text) !important; border: 1px solid var(--chip-border) !important; border-radius: 999px !important; padding: 0.4em 0.8em; font-size: 0.9rem; line-height: 1; cursor: pointer; transition: filter .15s ease; } .btn-bookmark i, .btn-bookmarked i, .btn-comment i { color: currentColor !important; } .btn-bookmark:hover, .btn-bookmarked:hover, .btn-comment:hover { filter: brightness(.95); } /* Inline eye icon */ .d-flex.align-items-center.gap-2 > .fa-eye { color: var(--text-color) !important; } /* ---------- Comment modal ---------- */ .comment-modal { position: fixed; z-index: 1100; inset: 0; overflow: auto; background-color: rgba(0,0,0,0.4); } .comment-modal .modal-content { background-color: #093145; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; } .comment { border-bottom: 1px solid #444; padding: 8px 0; } .comment-meta { font-size: 0.85rem; } .comment-meta .username { font-size: 1rem; color: #e3e6e8; font-weight: bold; } .comment-meta .time { color: #b3b3b3; } .comment-text { font-size: 0.9rem; color: #e3e6e8; margin-top: 4px; } .comment-reactions button { background: none; border: none; cursor: pointer; color: #e3e6e8; margin-right: 10px; font-size: 1rem; } .comment-reactions span { color: #e3e6e8; font-size: 1rem; margin-left: 4px; } /* ---------- Jump menu ---------- */ #jump-menu { display:none; position:fixed; z-index:1200; pointer-events: auto; } #jump-menu .jump-menu-card { background: var(--background-color); color: var(--text-color); border: 1px solid color-mix(in srgb, var(--text-color) 20%, transparent); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.28); padding: .5rem; display: grid; gap: .5rem; min-width: 160px; } #jump-menu .jump-menu-btn { background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); border-radius: 8px; padding: .5rem .75rem; font-weight: 600; cursor: pointer; } #jump-menu .jump-menu-btn:hover { filter: brightness(.95); } /* Transcript highlight + clickable timestamps */ .segment--active { outline: 2px solid var(--chip-text); background: color-mix(in srgb, var(--chip-bg) 15%, transparent); border-radius: 8px; transition: background .25s ease; } .segment .time { cursor: pointer; text-decoration: underline dotted; } .segment .time:hover { text-decoration: underline; } /* Audio player highlight (scroll cue) */ .audio-highlight { outline: 2px solid var(--chip-text); border-radius: 8px; animation: audioPulse 1.2s ease 2; } @keyframes audioPulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--chip-bg) 35%, transparent); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); } } /* ---------- Generic chip button (used in audio controls too) ---------- */ .chip-btn { background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); border-radius: 999px; padding: .45em .75em; font-size: .95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: filter .15s ease, transform .03s ease; } .chip-btn i, .chip-btn svg { color: currentColor !important; fill: currentColor; stroke: currentColor; } .chip-btn .fa-solid, .chip-btn .fa-regular { color: currentColor !important; } .chip-btn:hover { filter: brightness(.95); } .chip-btn:active { transform: translateY(1px); } .chip-btn:focus-visible { outline: 2px solid var(--chip-text); outline-offset: 2px; border-radius: 12px; } .chip-btn i.fa-rotate-left { margin-right: .15rem; } .chip-btn i.fa-rotate-right { margin-left: .15rem; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .chip-btn { transition: none; } } /* ---------- Two-row audio layout ---------- */ /* Mini container */ .audio-mini { background: color-mix(in srgb, var(--background-color) 86%, white 14%); border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent); border-radius: 12px; padding: .6rem .8rem; width: 100%; overflow: hidden; } /* Screen-reader-only helper */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Two rows */ .audio-controls { display: grid; grid-template-rows: auto auto; gap: .55rem; width: 100%; } /* Row 1: seek fills, time fixed */ .ac-row--top { display: flex; align-items: center; gap: .6rem; width: 100%; } .seek-range { flex: 1 1 auto; min-width: 160px; max-width: 100%; accent-color: var(--chip-text); background: transparent; } .time-wrap { flex: 0 0 auto; display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .9; min-width: 8.5ch; /* fits up to 99:59:59 */ text-align: right; } .time-wrap .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .separator { opacity: .6; margin: 0 .25rem; } /* Row 2: centered control strip */ .ac-row--bottom { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: nowrap; text-align: center; } /* Chip buttons inside the mini (slightly smaller) */ .audio-mini .chip-btn { padding: .38em .65em; font-size: .92rem; } /* Playback rate badge */ .rate-badge { background: color-mix(in srgb, var(--chip-bg) 15%, transparent); color: var(--text-color); border: 1px dashed color-mix(in srgb, var(--chip-border) 70%, transparent); border-radius: 10px; padding: .35em .55em; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; } /* Volume slider + percentage */ .volume-range { flex: 0 1 120px; /* compact by default */ min-width: 90px; max-width: 140px; accent-color: var(--chip-text); background: transparent; } .vol-pct { flex: 0 0 auto; margin-left: .25rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; text-align: right; min-width: 4ch; /* fits '100%' */ } /* Buttons stay natural */ #back15, #fwd15, #playPause, #slower, #rateBadge, #faster, #muteBtn { flex: 0 0 auto; } /* Responsive tweaks */ @media (min-width: 900px) { .seek-range { min-width: 220px; } .volume-range { flex-basis: 130px; max-width: 150px; } } @media (max-width: 560px) { .ac-row--bottom { gap: .35rem; flex-wrap: nowrap; } .audio-mini .chip-btn { padding: .3em .5em; font-size: .9rem; } .rate-badge { font-size: .9rem; padding: .3em .45em; } .seek-range { min-width: 140px; } .time-wrap { font-size: .92rem; min-width: 8.5ch; } .volume-range { flex-basis: 90px; min-width: 72px; max-width: 96px; } .vol-pct { font-size: .9rem; } } @media (max-width: 420px) { .ac-row--bottom { flex-wrap: wrap; row-gap: .35rem; } } /* Let the text column shrink properly in flex rows */ .section-container .row > .col { min-width: 0; } /* Responsive square thumb that scales down below 1000px */ .episode-thumb { display: block; aspect-ratio: 1 / 1; width: clamp(88px, 14vw, 175px); height: auto; /* aspect-ratio handles height */ object-fit: cover; border-radius: 6px; } /* Nudge smaller sooner on tighter viewports */ @media (max-width: 1000px) { .episode-thumb { width: clamp(72px, 12vw, 150px); } } @media (max-width: 768px) { .episode-thumb { width: clamp(64px, 18vw, 120px); } } @media (max-width: 576px) { .episode-thumb { width: 64px; } } .episode-hero { background: linear-gradient(to bottom, var(--hero-top), var(--background-color)); padding: 2rem 0; text-align: center; } .episode-hero-img { display: block; margin: 0 auto; max-width: min(85%, 1100px); max-height: 40vh; width: auto; height: auto; border-radius: 10px; object-fit: contain; /* keeps full image visible without distortion */ } /* Optional: make the hero a bit tighter on very small screens */ @media (max-width: 576px) { .episode-hero { padding: 1.25rem 0; } .episode-hero-img { max-width: 90%; max-height: 35vh; } } /* Episode actions: tighter layout on small widths */ @media (max-width: 600px) { /* keep the whole strip on one line and reduce global gap */ #episode-actions { gap: .4rem !important; /* was gap-3 (~1rem) */ flex-wrap: nowrap !important; } /* pair counts tighter to the icon/button before them */ #episode-actions .comments-count, #episode-actions .total-views, #episode-actions .bookmarks-count, #episode-actions .episode-rating-info, #episode-actions .downloads-count, #episode-actions .shares-count { font-size: 1rem; /* was 1.15rem */ margin-right: .35rem; /* smaller space after the number */ margin-left: -.25rem; /* pull the count closer to its icon */ white-space: nowrap; } /* chips (bookmark/comment/download/share) a bit smaller */ #episode-actions .btn-bookmark, #episode-actions .btn-bookmarked, #episode-actions .btn-comment { padding: .28em .5em !important; font-size: .9rem !important; } /* star rating: slightly smaller + tighter spacing */ #episode-actions #episode-rating-container .star-icon { font-size: 1rem; margin: 0 .05rem; } /* the small "views" sub-row has its own gap — shrink it */ #episode-actions .d-flex.align-items-center.gap-2 { gap: .25rem !important; } /* icon sizes inside this bar */ #episode-actions i.fa-solid, #episode-actions i.fa-regular { font-size: 1rem; } /* keep download/share icons compact too */ #episode-actions .fa-file-arrow-down, #episode-actions .fa-share-nodes { font-size: 1rem; } } /* Optional: ultra-narrow fallback — allow wrap but keep it centered & tidy */ @media (max-width: 430px) { #episode-actions { flex-wrap: wrap !important; justify-content: center !important; row-gap: .35rem !important; } } /* ========================================================= RESPONSIVE THUMBNAILS (episodes + channels) Desktop first (160px), then step down on smaller screens. ========================================================= */ #episode-list .list-group-item .row, #channel-list .list-group-item .row, #favorites-list .list-group-item .row, #bookmarks-list .list-group-item .row, #notifications-list .list-group-item .row { display:grid; grid-template-columns:10rem 1fr; /* 160px + content */ gap:1rem; align-items:start; } #episode-list .col-auto img, #channel-list .col-auto img, #favorites-list .col-auto .favorite-channel-img, #bookmarks-list .col-auto .bookmark-episode-img, #notifications-list .col-auto .notification-episode-img { width:10rem; height:10rem; aspect-ratio:1/1; object-fit:cover; object-position:center; border-radius:6px; display:block; } /* Small tablets */ @media (min-width:577px) and (max-width:768px){ #episode-list .list-group-item .row, #channel-list .list-group-item .row, #favorites-list .list-group-item .row, #bookmarks-list .list-group-item .row, #notifications-list .list-group-item .row { grid-template-columns:10rem 1fr; /* 128px + content */ gap:.75rem; } #episode-list .col-auto img, #channel-list .col-auto img, #favorites-list .col-auto .favorite-channel-img, #bookmarks-list .col-auto .bookmark-episode-img, #notifications-list .col-auto .notification-episode-img { width:10rem !important; height:10rem !important; } } /* Phones */ @media (max-width:576px){ #episode-list .list-group-item .row, #channel-list .list-group-item .row, #favorites-list .list-group-item .row, #bookmarks-list .list-group-item .row, #notifications-list .list-group-item .row { grid-template-columns:10rem 1fr; /* 96px + content */ gap:.5rem; } #episode-list .col-auto img, #channel-list .col-auto img, #favorites-list .col-auto .favorite-channel-img, #bookmarks-list .col-auto .bookmark-episode-img, #notifications-list .col-auto .notification-episode-img { width:10rem !important; height:10rem !important; aspect-ratio:1/1; object-fit:cover; object-position:center; } } /* Ultra-small phones (≤360px) */ @media (max-width: 360px) { /* keep the header row wrapping */ header .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; } header nav { order: 3; /* below title/controls */ width: 100%; /* Switch from the scrollable flex row to a 2-row grid */ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .5rem; /* cancel the horizontal scroller used on larger phones */ overflow: visible; white-space: normal; padding-bottom: 0; } header nav a { display: block; /* fill grid cell */ text-align: left; margin: 0 !important; /* kill .me-3 from markup */ padding: .35rem .25rem; font-size: .95rem; /* tweak size for tiny screens */ } } /* Safety net for arbitrary content images */ @media (max-width:576px){ main img{ max-width:100%; height:auto; } .episode-hero img, .channel-hero img{ width:min(75vw,240px); height:auto; display:block; } } /* ========================================================= Bottom "Search this page" bar: layout + sizing ========================================================= */ /* In case .flex-1 isn't a Bootstrap utility in your build */ .flex-1 { flex: 1 1 auto !important; } /* Make the bar a proper flex row */ #globalSearchBar { display: flex !important; align-items: center; } /* Let the left cluster expand; allow the input to grow */ #searchControls { flex: 1 1 auto !important; min-width: 0 !important; /* critical so the input can expand */ gap: .5rem; /* modest spacing */ } /* Make the input dominate the row */ #globalSearchInput { flex: 1 1 70% !important; /* grows wider than the buttons */ min-width: 14rem; /* gives a decent floor on small phones */ } /* Park the toggle at the far right and keep it from shrinking */ #toggleBarBtn { margin-left: auto !important; /* pushes it to the right */ flex: 0 0 auto !important; } /* Make the input just a tad smaller */ #globalSearchInput { flex: 1 1 62% !important; /* was 70% */ min-width: 12rem; /* was 14rem */ } /* Tiny phones: give the input even more space, compress extras */ @media (max-width: 360px) { #searchControls { gap: .25rem !important; } #globalSearchInput { flex: 1 1 80% !important; min-width: 0 !important; /* allow full stretch */ } /* Optional: hide advanced options to free space */ #searchControls .form-check-inline { display: none !important; } #prevMatch, #nextMatch { padding: .25rem .35rem !important; font-size: .85rem !important; } #matchCounter { min-width: 2.2em; font-size: .85rem; } #toggleBarBtn { padding: .25rem .4rem !important; font-size: .85rem !important; } } /* ========================================================= TYPOGRAPHY & UI SCALE ON SMALL SCREENS ========================================================= */ @media (max-width:576px){ html{ font-size:10px; } body{ line-height:1.4; } h1{ font-size:1.5rem; margin-bottom:.5rem; } h2{ font-size:1.25rem; } h3{ font-size:1.1rem; } .btn { font-size:.95rem; } .lang-select-btn { font-size: .9rem; max-width: 42vw; } .profile-btn { font-size: .9rem; padding: 1rem 1rem; max-width: 42vw; } .form-control, .form-check-label, .dropdown-menu, .dropdown-item{ font-size:.95rem; } .episode-title-clamp, .channel-title-clamp{ font-size:1rem; } .metadata-line{ font-size:.85rem; } .description-clamp, .summary-clamp{ font-size:.95rem; -webkit-line-clamp:3; } #globalSearchBar{ font-size:.9rem; } .episode-sort .btn-outline-light, .channel-sort .btn-outline-light{ padding:.375rem .5rem; font-size:.9rem; } } /* Small tablets */ @media (min-width:577px) and (max-width:768px){ html{ font-size:15.5px; } .episode-title-clamp, .channel-title-clamp{ font-size:1.05rem; } .metadata-line{ font-size:.9rem; } } /* ========================================================= SMALL TABLETS (577–768px) - Header: brand left, controls right, nav on its own row - Filters: break after 3rd checkbox; Language/Date next row ========================================================= */ @media (min-width: 577px) and (max-width: 768px) { /* ----- Header layout (grid like phones) ----- */ header .d-flex.justify-content-between.align-items-center { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; /* brand grows, controls fit */ grid-template-rows: auto auto; /* row1: brand+controls, row2: nav */ grid-template-areas: "brand controls" "nav nav"; column-gap: .75rem; row-gap: .25rem; align-items: center; } /* Let the inner left wrapper’s children (H1 + NAV) become grid items */ header .d-flex.justify-content-between.align-items-center > div:first-child { display: contents; } /* Brand (Muse) — row 1, col 1 */ header .d-flex.justify-content-between.align-items-center > div:first-child h1 { grid-area: brand; margin: 0; } /* Nav — full width on row 2, left aligned, wrapped */ header .d-flex.justify-content-between.align-items-center > div:first-child nav { grid-area: nav !important; width: 100%; display: flex !important; flex-wrap: wrap; gap: .5rem .25rem; overflow: visible; white-space: normal; margin-top: .25rem; padding: 0; justify-content: flex-start; } header nav a { margin: 0 !important; padding: .4rem .35rem; } /* Controls (Language, Yin-Yang, Profile) — row 1, pinned right */ header .d-flex.justify-content-between.align-items-center > div:last-child { grid-area: controls; justify-self: end; display: flex; align-items: center; gap: .5rem; white-space: nowrap; } /* Slightly larger than phone icon, still compact */ .theme-toggle-icon { width: 25px; height: 25px; } /* compact icon on phones */ .lang-select-btn { font-size: .9rem; max-width: 42vw; } .profile-btn { font-size: .9rem; padding: 1rem 1rem; max-width: 42vw; } /* ensure the right-side icon gets space on small tablets */ .lang-select-btn { /* tune these */ --icon-size: 1.5rem; /* was 1.75rem; smaller = less chance of clipping */ --icon-right-gap: .5rem; --text-icon-gap: 1rem; --pad-y: .4rem; /* vertical padding */ line-height: 1.1; /* predictable height */ /* vertical padding + reserved space for icon on right */ padding-block: var(--pad-y) !important; padding-inline-start: .25rem !important; padding-inline-end: calc(var(--icon-size) + var(--icon-right-gap) + var(--text-icon-gap)) !important; /* guarantee the icon fits vertically */ min-height: calc(var(--icon-size) + 2 * var(--pad-y)) !important; background-image: url("images/language-planet.svg"); background-repeat: no-repeat; background-position: right var(--icon-right-gap) center !important; background-size: var(--icon-size) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* beat the earlier .lang-select-btn.dropdown-toggle rule */ .lang-select-btn.dropdown-toggle { padding-inline-end: calc(var(--icon-size) + var(--icon-right-gap) + var(--text-icon-gap)) !important; } /* ----- Filters: 3 items per row (3 then 3) ----- */ #filters-container { position: static; min-height: unset; } /* Keep JS control over visibility; when visible, wrap nicely */ #episode-filters, #channel-filters { position: static !important; display: flex; /* ensure flex in this range */ flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .25rem; width: 100%; } /* Every item (checkbox or dropdown) takes 1/3 of the row */ #episode-filters .form-check, #channel-filters .form-check, #episode-filters .dropdown, #channel-filters .dropdown { flex: 1 1 calc(33.333% - .75rem); min-width: 140px; /* small enough to fit 3 across in this range */ } /* Remove the earlier line-break trick so items line up 3/row */ #episode-filters .form-check:nth-of-type(3), #channel-filters .form-check:nth-of-type(3) { margin-right: 0; /* undo margin-right:auto from earlier rules */ } /* Kill left margin from .ms-3 so dropdowns don’t push off-screen */ #episode-filters .dropdown.ms-3, #channel-filters .dropdown.ms-3 { margin-left: 0 !important; } /* Keep dropdown panels inside the viewport */ .dropdown-menu.lang-dropdown { width: auto; max-width: calc(100vw - 2rem); max-height: 55vh; overflow: auto; } } /* ========================================================= PHONES (≤576px) — match small tablets (3 items per row) - Header: brand left, controls right, nav full-width below - Filters: ALWAYS 3 per row (3 then 3) ========================================================= */ @media (max-width: 576px) { /* ----- Header: grid like tablets ----- */ header .d-flex.justify-content-between.align-items-center { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; /* brand grows, controls fit */ grid-template-rows: auto auto; /* row1: brand+controls, row2: nav */ grid-template-areas: "brand controls" "nav nav"; column-gap: .5rem; row-gap: .25rem; align-items: center; } /* Let the inner left wrapper’s children (H1 + NAV) be grid items */ header .d-flex.justify-content-between.align-items-center > div:first-child { display: contents; } /* Brand (Muse) — row 1, col 1 */ header .d-flex.justify-content-between.align-items-center > div:first-child h1 { grid-area: brand; margin: 0; } /* Nav — row 2, full width, left-aligned, wraps */ header .d-flex.justify-content-between.align-items-center > div:first-child nav { grid-area: nav !important; width: 100%; display: flex !important; flex-wrap: wrap; gap: .5rem .25rem; overflow: visible; white-space: normal; margin-top: .25rem; padding: 0; justify-content: flex-start; } header nav a { margin: 0 !important; padding: .4rem .35rem; } /* Controls (Language, Yin-Yang, Profile) — row 1, pinned right */ header .d-flex.justify-content-between.align-items-center > div:last-child { grid-area: controls; justify-self: end; display: flex; align-items: center; gap: .5rem; white-space: nowrap; } .theme-toggle-icon { width: 19px; height: 19px; } /* compact icon on phones */ .lang-select-btn, .profile-btn { font-size: .9rem; padding: 1rem 2.5rem; max-width: 42vw; } /* ----- Filters: EXACTLY 3 items per row (3 then 3) ----- */ #filters-container { position: static; min-height: unset; } /* Keep JS control over visibility; when visible, wrap nicely */ #episode-filters, #channel-filters { position: static !important; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .25rem; width: 100%; } /* Ordering: all checkboxes (order 1), then dropdowns (order 2) */ #episode-filters .form-check, #channel-filters .form-check { order: 1; } #episode-filters .dropdown, #channel-filters .dropdown { order: 2; } /* THREE PER ROW for every item (checkbox or dropdown) */ #episode-filters .form-check, #channel-filters .form-check, #episode-filters .dropdown, #channel-filters .dropdown { flex: 1 1 calc(33.333% - .75rem); min-width: 100px; /* allows 3-up on ~360–576 widths */ } /* Cancel any earlier “force wrap after 3rd” rules */ #episode-filters .form-check:nth-of-type(3), #channel-filters .form-check:nth-of-type(3) { margin-right: 0 !important; } /* Kill Bootstrap .ms-3 so dropdowns don’t push off-screen */ #episode-filters .dropdown.ms-3, #channel-filters .dropdown.ms-3 { margin-left: 0 !important; } /* Keep dropdown panels inside the viewport */ .dropdown-menu.lang-dropdown { width: auto; max-width: calc(100vw - 2rem); overflow: auto; } } /* ========================================================= TINY PHONES (≤360px) — keep nav in one row (scrollable) ========================================================= */ @media (max-width: 360px) { /* Make everything a bit tighter; adjust 8.25–9 as you like */ html { font-size: 8.75px; } /* Force the nav into a single horizontal row that can scroll */ header .d-flex.justify-content-between.align-items-center > div:first-child nav { display: flex !important; /* override any grid/flex from above */ flex-wrap: nowrap !important; /* do NOT wrap to a second line */ overflow-x: auto; /* allow horizontal scroll in nav only */ -webkit-overflow-scrolling: touch; white-space: nowrap; gap: .25rem; /* tighten spacing between links */ padding-bottom: .25rem; /* finger space while scrolling */ } /* Compact the links so all six fit more easily */ header nav a { flex: 0 0 auto; /* stay side-by-side */ margin: 0 !important; /* kill .me-3 from markup */ padding: .25rem .35rem; font-size: .85rem; /* smaller text for tiny screens */ line-height: 1.15; } /* Slightly smaller brand to free some horizontal room */ header h1 { font-size: 1.25rem; } /* tighter bar padding */ #globalSearchBar { padding: .25rem .5rem !important; } /* shrink gaps and let this row take the space */ #searchControls { flex: 1 1 auto !important; gap: .25rem !important; /* was gap-2 via Bootstrap */ } /* make the input dominate the row */ #globalSearchInput { flex: 1 1 auto !important; min-width: 0 !important; /* allow flexbox to stretch it */ font-size: .95rem; padding: .35rem .5rem; } /* compact prev/next buttons */ #prevMatch, #nextMatch { padding: .25rem .35rem !important; font-size: .85rem !important; line-height: 1.1; } /* shrink the counter or hide it if you prefer */ #matchCounter { min-width: 2.2em; font-size: .85rem; } /* OR to hide it entirely, uncomment: #matchCounter { display: none !important; } */ /* hide advanced options to free space */ #searchControls .form-check-inline { display: none !important; /* hides: All, Match case, Whole word */ } /* compact the "Hide search" button */ #toggleBarBtn { padding: .25rem .4rem !important; font-size: .85rem !important; white-space: nowrap; } .profile-btn { font-size: .9rem; padding: 1rem 1rem; max-width: 42vw; } .lang-select-btn { font-size: .9rem; max-width: 42vw; } .theme-toggle-icon { width: 16px; height: 16px; } /* compact icon on phones */ }