/* ============================================================================ Subtle Skin Engine (v2 — safe). Keeps the ORIGINAL header + grid 100% intact. Varies ONLY cosmetic details per site so sites don't look identical: • card title treatment (oh-card-*) • section heading style (oh-home-*) • badge + thumbnail feel (oh-ft-*) • spacing / title size (oh-d-*) NOTHING here changes header structure, grid display, or element positions (except the self-contained "overlay" title, which stays inside the card box). ============================================================================ */ /* ---- density: gentle spacing + title size (grid columns unchanged) --------- */ body.oh-d-compact { --ohx-gap: 14px; --ohx-pad: 30px; --ohx-title: .92rem; } body.oh-d-normal { --ohx-gap: 18px; --ohx-pad: 40px; --ohx-title: .96rem; } body.oh-d-spacious { --ohx-gap: 24px; --ohx-pad: 52px; --ohx-title: 1rem; } .ohsec { margin-bottom: var(--ohx-pad, 40px); } .ohgrid { gap: calc(var(--ohx-gap,18px) + 4px) var(--ohx-gap,18px); } .ohc-title { font-size: var(--ohx-title, .96rem); } /* baseline polish for every site: title turns accent on hover */ .ohc-title a { transition: color .15s ease; } .ohc:hover .ohc-title a { color: var(--c-accent, #e60000); } /* ============================ CARD STRUCTURAL VARIANTS ===================== These match the per-site DOM emitted by vbase_card() (different markup, not just CSS). Each renders cleanly inside the standard grid. */ /* default (.ohc) — theme baseline (avatar-left + full sub). */ /* overlay: caption is a child of the thumb anchor → sits over the image. */ .ohc-v-overlay .ohc-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 12px 12px; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.9) 18%, rgba(0,0,0,.35) 62%, transparent); } .ohc-v-overlay .ohc-over .ohc-title { margin: 0 0 3px; } .ohc-v-overlay .ohc-title a, .ohc-v-overlay:hover .ohc-title a { color: #fff; } .ohc-v-overlay .ohc-sub { color: rgba(255,255,255,.82); } /* minimal: no avatar node at all; clean title + stats. */ .ohc-v-min .ohc-meta { width: 100%; } /* accent: a channel chip row above the title, accent left-bar on the meta. */ .ohc-v-accent .ohc-meta { border-left: 3px solid var(--c-accent,#e60000); padding-left: 10px; } .ohc-v-accent .ohc-title { font-weight: 800; } .ohc-v-accent .ohc-chip { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: .76rem; color: var(--c-muted,#aaa); font-weight: 600; } .ohc-v-accent .ohc-chip .ohc-av { width: 22px; height: 22px; font-size: .72rem; } /* ============================ SECTION HEADINGS ============================ Restyle only the section

. Grid is untouched. */ /* grid — plain (default). */ body.oh-home-hero .ohsec-head h2 { border-left: 4px solid var(--c-accent,#e60000); padding-left: 11px; font-weight: 800; } body.oh-home-rows .ohsec-head h2 { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--c-accent,#e60000); } body.oh-home-masonry .ohsec-head h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent,#e60000); margin-right: 9px; vertical-align: middle; } body.oh-home-sidebar .ohsec-head h2 { text-transform: uppercase; letter-spacing: .07em; } body.oh-home-list .ohsec-head h2 { color: var(--c-accent,#e60000); } /* ============================ BADGE / THUMBNAIL FEEL ====================== Tie thumbnail corners + duration/quality badge to the footer axis. */ /* rich — default rounded thumb + dark badge. */ body.oh-ft-slim .ohc-thumb { border-radius: 6px; } body.oh-ft-slim .ohc-q { background: var(--c-accent,#e60000); color: #fff; } body.oh-ft-columns .ohc-thumb { border-radius: 16px; } body.oh-ft-columns .ohc-dur { background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.45); } /* ============================ HEADER STRUCTURAL VARIANTS =================== Match the per-site header DOM from header.php (different element order + grouping wrappers). All keep a clean single/two-row bar. Mobile falls back to the theme's stacked behavior so the nav drawer keeps working. */ /* classic — theme default (no override). */ /* search: search field grows in the middle. */ .ohh-v-search .ohhead-search { flex: 1; } /* centered: two rows — brand+actions, then centered nav+search. */ .ohh-v-centered .ohhead-in { flex-direction: column; align-items: stretch; gap: 10px; } .ohh-v-centered .ohhead-row { display: flex; align-items: center; gap: 14px; width: 100%; } .ohh-v-centered .ohhead-r1 { justify-content: space-between; } .ohh-v-centered .ohhead-r2 { justify-content: center; } .ohh-v-centered .ohhead-r2 .ohhead-search { flex: 0 1 480px; } /* split: logo left, everything else grouped to the right. */ .ohh-v-split .ohhead-grp { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* stack: brand group + tools group on row 1, full-width nav on row 2. */ .ohh-v-stack .ohhead-in { flex-direction: column; align-items: stretch; gap: 8px; } .ohh-v-stack .ohhead-row { display: flex; align-items: center; gap: 14px; } .ohh-v-stack .ohhead-r1 { justify-content: space-between; } .ohh-v-stack .ohhead-grp { display: flex; align-items: center; gap: 12px; } .ohh-v-stack .ohhead-r1 .ohhead-search { flex: 1; max-width: 440px; } .ohh-v-stack .ohhead-r2 { border-top: 1px solid var(--c-line,#272727); padding-top: 6px; overflow-x: auto; } /* mobile: unified, robust header for EVERY variant — [burger][logo][actions] on one row, full-width search below, nav in the burger dropdown. Uses !important because the desktop per-variant rules (.ohh-v-* .ohhead-r2 .ohhead-search, specificity 0,3,0) are MORE specific than these overrides and would otherwise leak into mobile and hide the burger + actions (Upload/avatar/dark-mode). Keeping this predictable > a fancy per-variant mobile layout that silently drops the menu. */ @media (max-width: 900px) { .ohhead-in { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .ohhead-row, .ohhead-grp { display: contents !important; } .ohhead-burger { display: grid !important; order: 1 !important; } .ohhead-logo { order: 2 !important; flex: 0 1 auto !important; justify-content: flex-start !important; } .ohhead-actions{ order: 3 !important; margin-left: auto !important; } .ohhead-search { order: 4 !important; flex: 1 1 100% !important; margin: 0 !important; max-width: none !important; } /* Mobile burger menu = clean floating dropdown panel (was rendering in-flow, unstyled). Anchor to the header + force the absolute panel. */ .ohhead { position: relative; } body.ohnav-open .ohhead-nav { position: absolute !important; left: 10px; right: 10px; top: calc(100% + 6px); flex-direction: column; align-items: stretch; gap: 2px; background: var(--c-surface, #1a1a1a); border: 1px solid var(--c-line, #272727); border-radius: 14px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 1100; max-height: 72vh; overflow-y: auto; } body.ohnav-open .ohhead-nav ul, body.ohnav-open .ohhead-nav .menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; } body.ohnav-open .ohhead-nav a { padding: 11px 14px; border-radius: 9px; } } /* ============================ PER-CARD CHROME (watch-later + play) ========== The watch-later button + play overlay repeat on every card → vary them per site so they're not identical. Position by card variant, shape/size by footer axis; the WL ICON itself also varies (set in vbase_card by the footer axis). */ .oh-card-overlay .ohwl { left: 8px; right: auto; } /* top-left */ .oh-card-minimal .ohwl { top: auto; bottom: 8px; } /* bottom-right */ .oh-card-accent .ohwl { left: 8px; right: auto; top: auto; bottom: 8px; } /* bottom-left */ .oh-ft-slim .ohwl { border-radius: 7px; } /* rounded-square */ .oh-ft-columns .ohwl { width: 34px; height: 34px; } /* larger circle */ /* centered play circle (always visible, like the references) */ .ohc-play { opacity: .92; background: transparent; } .ohc-thumb:hover .ohc-play { opacity: 1; } .ohc-play svg { width: 46px; height: 46px; fill: #fff; background: rgba(0,0,0,.5); border-radius: 50%; padding: 13px; box-sizing: border-box; filter: none; } .ohc-thumb:hover .ohc-play svg { background: var(--c-accent, #e60000); } .oh-card-minimal .ohc-play svg { width: 40px; height: 40px; } .oh-card-accent .ohc-play svg { width: 52px; height: 52px; } .oh-card-overlay .ohc-play { background: transparent; } /* ============================ APP POLISH (reference-grade) ================= Mobile bottom tab bar + icon pills + verified badge — app-style, like the user's reference designs. */ /* search bar — subtle neutral pill that reads well on BOTH light + dark themes */ .ohhead-search input { background: rgba(127,127,127,.1); } .ohhead-search button { background: rgba(127,127,127,.16); } /* pill icons */ .ohpill-i { display: inline-flex; vertical-align: middle; margin-right: 6px; } .ohpill-i svg { width: 14px; height: 14px; } /* verified check next to channel names */ .ohverified { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--c-accent, #e60000); } .ohverified svg { width: 13px; height: 13px; } /* mobile bottom tab bar */ .ohtab { display: none; } @media (max-width: 900px) { .ohtab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 58px; background: var(--c-surface, #1a1a1a); border-top: 1px solid var(--c-line, #272727); padding: 0 4px calc(0px + env(safe-area-inset-bottom, 0px)); align-items: center; } .ohtab-i { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .62rem; font-weight: 600; text-decoration: none; height: 100%; /* reset native