.root-header .publish-button { display: none; } .show-publish-button .root-header .publish-button { display: inline-block; } /* Ported from Greyhive Design/greyhive-homepage-mockup.html Transforms applied: 1. App-shell rules deleted (header, sidebar, brand, nav, viewas/mocknote controls, topbar/catnav) — the plugin renders only its own content inside #gh-home. 2. Every remaining content selector prefixed with `ghh-` and nested under #gh-home; :root custom properties scoped to #gh-home. 3. Rail/hero layout replaced with the feed grid + shelf layout (task 9) — the old hero, value band, greeting and conversion-band rules are gone. */ #gh-home{ /* Colour comes from peertube-theme-greyhive (stage 5). Only layout locals live here. */ --ease:cubic-bezier(0.16,1,0.3,1); --pad:26px; --card-w:288px; --header:56px; position:relative; background:var(--bg); color:var(--fg); font-family:'DM Sans',system-ui,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; padding:26px 0 10px; } /* The reset stops at the edge of a card core renders. `#gh-home *` carries id specificity, so it beat the miniature component's own `.video-miniature:not(.display-as-row) my-video-thumbnail` block-ratio rule and flattened the 16:9 padding box to nothing — measured on staging: padding-top 0px on Home against 145.969px on Trending, so the card drew its text and no thumbnail at all. It took the component's internal spacing with it (the 0.35rem under the thumbnail, the 1rem under the card, the 0.75rem beside the avatar). Do not "fix" this by restating those values here: the whole point of rendering core's component is that its measurements are not ours to keep in sync. The exclusion is wrapped in :where() because :where() contributes NO specificity. Written as `*:not(.ghh-native-card):not(.ghh-native-card *)` the reset climbs from (1,0,0) to (1,2,0) and starts beating this file's OWN section rules at (1,1,0) — measured on staging: the CTA collapsed 204px to 88px, shelf headers lost their 12px, tracks lost their padding, and the page flattened into one undifferentiated strip of videos. Adding an exclusion must not change what the rule already outranked. */ /* ⚠️ .gh-exclusive-badge joins the exemption because this reset was ZEROING ITS PADDING: measured against production, every other property matched and the padding came out 0px against its own 4.25px 9.35px. The badge is another plugin's element borrowed whole, so the fix is to stop overriding it rather than to restate its padding here and drift. Added INSIDE the existing :where(), which contributes no specificity — see the note above about what happens when this selector's weight changes. */ #gh-home *:not(:where(.ghh-native-card,.ghh-native-card *,.gh-exclusive-badge,.gh-exclusive-badge *)){box-sizing:border-box;margin:0;padding:0} #gh-home a{color:inherit;text-decoration:none} #gh-home button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} #gh-home img{max-width:100%;display:block} #gh-home :focus-visible{outline:2px solid var(--gh-blue);outline-offset:2px;border-radius:4px} #gh-home ::-webkit-scrollbar{width:10px;height:0} #gh-home ::-webkit-scrollbar-thumb{background:#26262e;border-radius:100px;border:3px solid var(--bg)} /* state visibility — logged-in vs logged-out content, toggled via #gh-home[data-state] */ #gh-home [data-when]{display:none} #gh-home[data-state="out"] [data-when="out"]{display:var(--d,revert)} #gh-home[data-state="in"] [data-when="in"]{display:var(--d,revert)} /* ============ CHIP BAR ============ */ /* Just a mount point now: the carousel it hosts brings its own layout, and the sticky blurred bar this used to be belonged to the chip row that no longer exists. */ /* The anchor sits outside .ghh-feed, so it carries the feed's own horizontal padding or the carousel runs edge to edge: measured, the first pill was clipped at x<0 and the last ran under the scroll arrow. Matching --pad lines the pill row up with the grid beneath it, which is the whole reason it sits there. */ /* ⚠️ Reserve what custom-menu is about to draw here. The pill row belongs to that plugin and arrives after this page has painted; 64px of it landing on top of the feed was 0.06 of the phone's CLS. The row measures 40px (52 with the desktop padding) plus its own 24px bottom margin, which collapses with the margin below rather than adding to it. */ #gh-home .ghh-chipbar{min-height:40px;margin-bottom:24px} #gh-home .ghh-menu-anchor{display:block;padding:12px var(--pad) 0} #gh-home .ghh-chipbar::-webkit-scrollbar{display:none} /* ============ SHELVES ============ */ #gh-home .ghh-shelf-head .ghh-rule{flex:1;height:1px;background:var(--gh-line);margin-bottom:6px} #gh-home .ghh-shelf-head .ghh-viewall{font-size:13px;color:var(--gh-mid);font-weight:500;white-space:nowrap;transition:.2s var(--ease);align-self:center} #gh-home .ghh-shelf-head .ghh-viewall:hover{color:var(--primary)} #gh-home .ghh-track{display:flex;gap:16px;overflow-x:auto;padding:2px var(--pad) 6px;scroll-snap-type:x proximity;scroll-padding-left:var(--pad)} /* video card */ #gh-home .ghh-card{flex:none;width:var(--card-w);scroll-snap-align:start;transition:transform .3s var(--ease)} #gh-home .ghh-card:hover{transform:translateY(-4px)} #gh-home .ghh-thumb{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:radial-gradient(120% 120% at 30% 0,#1b1b22,#0e0e12);border:1px solid rgba(255,255,255,.04)} #gh-home .ghh-thumb .ghh-reticle{position:absolute;inset:0;margin:auto;width:44%;opacity:.09;stroke:var(--fg);fill:none} #gh-home .ghh-thumb .ghh-badge{position:absolute;bottom:0;right:0;background:rgba(17,17,17,.8);color:var(--fg);font-size:12px;padding:2px 8px;border-radius:4px 0 0 0} #gh-home .ghh-thumb .ghh-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.5)} #gh-home .ghh-thumb .ghh-progress i{display:block;height:100%;background:var(--primary)} /* The avatar is content-box on purpose: core's is 34px of image inside a 2px ring, 38px overall, and this file's reset makes everything border-box, which shrank the whole mark to 34px and left the channel name starting exactly at the avatar's right edge — no gap, which is what Dan caught in Continue Watching. 12px (meta) + 42px = 54px puts the name 6px past a 48px avatar edge, the same gap core leaves. Card metrics are core's my-video-miniature, read off a live Trending card at 1440px rather than guessed: thumbnail radius 4px, duration flush to the bottom-right corner with only its top-left rounded, text column inset 12px, avatar 34px at radius 5px in a 2px black ring overlapping the thumbnail's bottom-left by 14px, channel 14px beside it, title 16px/700/24px in gold, meta 12px. Trending and Latest render the Angular component; this is the same card by measurement, because a plugin cannot instantiate a view-encapsulated component. If core's card changes, re-measure — do not eyeball. */ #gh-home .ghh-card-meta{position:relative;padding:6px 0 0 12px;font-family:'Lato',sans-serif} #gh-home .ghh-card-meta .ghh-ch-av{position:absolute;left:10px;top:-14px;z-index:2;box-sizing:content-box;width:34px;height:34px;border-radius:5px;border:2px solid #000;background:linear-gradient(135deg,var(--gh-line),var(--input-bg));display:grid;place-items:center;font-family:'Space Mono';font-weight:700;font-size:12px;color:var(--primary);object-fit:cover} #gh-home .ghh-card-ch{min-height:21px;padding-left:42px;font-size:14px;line-height:21px;color:var(--gh-mid);display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #gh-home .ghh-card-ch .ghh-verif{color:var(--gh-blue);flex:none} #gh-home .ghh-card-title{margin-top:2px;font-size:16px;font-weight:700;line-height:24px;color:var(--primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #gh-home .ghh-card-stats{margin-top:5px;font-size:12px;line-height:18px;color:var(--gh-mid)} /* shop card (VAPR™) */ #gh-home .ghh-shop-card{flex:none;width:210px;scroll-snap-align:start;background:var(--bg-secondary);border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;transition:.3s var(--ease)} #gh-home .ghh-shop-card:hover{border-color:rgba(187,167,119,.35)} /* overflow:hidden on the card already clips this, so the image grows INTO the frame rather than spilling over the name and price below it. */ #gh-home .ghh-shop-thumb .ghh-thumb-img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)} #gh-home .ghh-shop-card:hover .ghh-shop-thumb .ghh-thumb-img{transform:scale(1.12)} @media (prefers-reduced-motion:reduce){ #gh-home .ghh-shop-card:hover .ghh-shop-thumb .ghh-thumb-img{transform:none} } #gh-home .ghh-shop-thumb{position:relative;aspect-ratio:1/1;background:radial-gradient(120% 120% at 30% 10%,#20202a,#0f0f13);display:grid;place-items:center} #gh-home .ghh-shop-thumb .ghh-reticle{width:44%;opacity:.1;stroke:var(--fg);fill:none} #gh-home .ghh-shop-info{padding:12px} #gh-home .ghh-shop-info .ghh-sh-name{font-size:13.5px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} #gh-home .ghh-shop-info .ghh-sh-seen{font-family:'Space Mono';font-size:10px;color:var(--gh-dim);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gh-home .ghh-shop-buy{display:flex;align-items:center;justify-content:space-between;margin-top:10px} #gh-home .ghh-shop-buy .ghh-price{font-family:'Space Mono';font-weight:700;font-size:15px;color:var(--primary)} #gh-home .ghh-shop-buy .ghh-shopbtn{display:inline-block;background:var(--gh-blue);color:#04121a;font-weight:700;font-size:12px;padding:6px 12px;border-radius:6px;transition:.2s var(--ease);text-decoration:none;cursor:pointer} #gh-home .ghh-shop-buy .ghh-shopbtn:hover{background:var(--gh-blue-hi)} /* real thumbnail images (task 4: render.js emits when vm.thumbnailUrl is set) */ #gh-home .ghh-thumb-img{width:100%;height:100%;object-fit:cover} /* skeleton loading state */ #gh-home .ghh-skel{background:#17171D;aspect-ratio:16/9;border-radius:10px} /* responsive */ @media(max-width:760px){ #gh-home{--pad:16px;--card-w:250px} } @media(prefers-reduced-motion:reduce){#gh-home *{transition:none!important;scroll-behavior:auto!important;animation:none!important}} /* ---- feed grid ---- */ #gh-home .ghh-feed { display: flex; flex-direction: column; gap: 28px; padding-left: var(--pad); padding-right: var(--pad); } #gh-home .ghh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px 16px; } @media (max-width: 599px) { #gh-home .ghh-grid { grid-template-columns: 1fr; } } @media (min-width: 600px) and (max-width: 899px) { #gh-home .ghh-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) and (max-width: 1299px) { #gh-home .ghh-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1300px) { #gh-home .ghh-grid { grid-template-columns: repeat(4, 1fr); } } /* grid cards stretch to fill their column instead of pinning to the shelf card's fixed width */ #gh-home .ghh-grid .ghh-card { width: auto; } /* ---- shelves ---- */ #gh-home .ghh-shelf { position: relative; } #gh-home .ghh-shelf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } #gh-home .ghh-shelf-head h2 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 0.03em; margin: 0; } #gh-home .ghh-shelf-scroller { position: relative; } #gh-home .ghh-shelf .ghh-track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* .ghh-feed already gutters the shelf; zero out the base .ghh-track rule's own padding/scroll-padding here so the gutter isn't applied twice. */ padding-left: 0; padding-right: 0; scroll-padding-left: 0; } #gh-home .ghh-shelf .ghh-track::-webkit-scrollbar { display: none; } /* shelf cards keep the file's one card width (var(--card-w)) via the base .ghh-card rule — no override needed */ #gh-home .ghh-shelf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 100px; border: 1px solid var(--gh-line); background: rgba(11, 11, 13, 0.85); color: var(--fg); cursor: pointer; display: grid; place-items: center; } #gh-home .ghh-shelf-arrow.ghh-prev { left: -8px; } #gh-home .ghh-shelf-arrow.ghh-next { right: -8px; } /* Arrows are a pointer affordance; touch users scroll the track directly. */ @media (hover: none) { #gh-home .ghh-shelf-arrow { display: none; } } /* shorts shelf: portrait cards, tighter gap than the 16:9 shelves */ /* Six across, filling the row, rather than ten at a fixed 160px in a scroller nobody scrolled. 1fr columns mean the card grows with the content width instead of being pinned to a number that only looked right at one viewport — the shelf reads like YouTube's, where the cards are the shelf rather than a filmstrip inside it. The feed sends exactly six (feed.js shortsShelfSize), so this never wraps. */ #gh-home .ghh-shorts-shelf .ghh-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; overflow-x: visible; } /* Nothing to scroll once the row holds everything it was sent. */ #gh-home .ghh-shorts-shelf .ghh-shelf-arrow { display: none; } /* On a phone the shelf is a 2x2 block, the way YouTube's mobile web shorts row reads — Dan's call. It used to fall back to a horizontal filmstrip here, which put four of the six shorts off-screen behind a swipe most people never make. Two columns at 390px give each card a real thumbnail instead of six slivers. ⚠️ The feed sends SIX (feed.js shortsShelfSize); the last two would make a lopsided third row, so they are dropped on this breakpoint only. Anyone wanting the rest has "View all", which is the same promise the row made before. */ @media (max-width: 900px) { #gh-home .ghh-shorts-shelf .ghh-track { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; } #gh-home .ghh-shorts-shelf .ghh-short-card:nth-child(n + 5) { display: none; } /* nothing to scroll any more */ #gh-home .ghh-shorts-shelf .ghh-shelf-arrow { display: none; } } /* Featured products, two columns on a phone for the same reason: the rail's cards are a fixed 210px, which at 390px shows one and a sliver. `width:auto` lets the grid size them; the fixed width is a filmstrip measurement and means nothing inside a grid. */ @media (max-width: 900px) { #gh-home .ghh-shop-rail .ghh-track { display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; } #gh-home .ghh-shop-rail .ghh-shop-card { width: auto; } #gh-home .ghh-shop-rail .ghh-shelf-arrow { display: none; } } /* ---- shorts ---- */ /* min-width:0 so a long title cannot push a grid column wider than its share. The 160px basis is for the filmstrip fallback only — a grid container ignores `flex` on its items, so it needs no undoing here. Undoing it anyway (`flex: initial`) collapsed the cards to 50px in the mobile fallback, where the flex basis is what sizes them. */ #gh-home .ghh-short-card { flex: 0 0 160px; min-width: 0; display: block; text-decoration: none; color: inherit; } #gh-home .ghh-short-thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--bg-secondary); } #gh-home .ghh-short-thumb .ghh-thumb-img { width: 100%; height: 100%; object-fit: cover; } #gh-home .ghh-short-title { margin-top: 8px; font-family: 'Lato', sans-serif; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Whose short it is. Smaller than the video card's owner row because the card is 160px wide — the same 34px mark would leave the name about six characters. No overlap onto the thumbnail either: a 9:16 thumbnail's bottom-left is where the subject usually is. */ #gh-home .ghh-short-owner { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; } #gh-home .ghh-short-owner .ghh-short-av { width: 20px; height: 20px; border-radius: 4px; flex: none; object-fit: cover; background: linear-gradient(135deg, var(--gh-line), var(--input-bg)); display: grid; place-items: center; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 9px; color: var(--primary); } #gh-home .ghh-short-ch { font-family: 'Lato', sans-serif; font-size: 12px; line-height: 18px; color: var(--gh-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- signup CTA ---- */ #gh-home .ghh-cta { position: relative; border: 1px solid var(--primary); border-radius: 12px; background: var(--bg); padding: 32px 24px; text-align: center; } #gh-home .ghh-cta h2 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; margin: 0 0 8px; color: var(--fg); } #gh-home .ghh-cta p { font-family: 'DM Sans', sans-serif; color: var(--gh-mid); margin: 0 0 20px; } #gh-home .ghh-cta-btn { display: inline-block; background: var(--primary); color: var(--bg); text-decoration: none; font-weight: 700; padding: 12px 28px; border-radius: 6px; } #gh-home .ghh-cta-btn:hover { background: var(--gh-gold-hi); } #gh-home .ghh-cta-dismiss { /* In the corner, not floating near it — the 44px tap target is centred on the glyph, so the box is pulled out to the card's edge rather than inset by its own padding. */ position: absolute; top: 0; right: 0; background: none; border: 0; color: var(--gh-dim); font-size: 22px; line-height: 1; cursor: pointer; /* 44px minimum touch target, per the community app's tab-bar fix. */ min-width: 44px; min-height: 44px; display: grid; place-items: center; } #gh-home .ghh-sentinel { height: 1px; } /* Shown when page 1 comes back failed or genuinely empty — the feed container already gutters horizontally, so this only needs vertical breathing room. */ #gh-home .ghh-empty { padding: 48px var(--pad); color: var(--gh-mid); text-align: center; } /* --------------------------------------------------------------------------------- Native cards The box core's my-video-miniature is rendered into (peertubeHelpers.renderVideoMiniature). The component brings its own card styling — that is the entire point of using it — so nothing here touches its insides. These rules only give the box the same footprint the plugin's own card had, in the grid and along a shelf, so swapping one for the other does not move the layout. ------------------------------------------------------------------------------- */ #gh-home .ghh-grid .ghh-native-card { min-width: 0; } #gh-home .ghh-shelf-scroller .ghh-native-card { flex: none; width: var(--card-w); scroll-snap-align: start; } /* Until the component mounts the box is empty and zero-height, which would let the grid collapse and then jump. Reserve a card's worth of height for one frame. */ #gh-home .ghh-native-card:empty { aspect-ratio: 16 / 9; border-radius: 4px; background: var(--bg-secondary); } /* Greyhive Exclusives: one video per row on a phone, so the badge and the title are legible rather than four thumbnails wide. The shelf's cards are sized for a filmstrip, so they take width:auto and the grid decides. Desktop keeps the filmstrip. */ /* The phone starts where every other page starts. Core's broadcast banner already leaves 32px below itself; this page was adding 26px of its own plus 12px under the chip row, so the first thing a reader saw was 70px of empty screen. Measured on production: chips at 208px here against 170px on Trending. Desktop keeps the breathing room. */ @media (max-width: 900px) { #gh-home { padding-top: 0; } #gh-home .ghh-menu-anchor { padding-top: 0; } /* Dan: halve the vertical space around the 16:9 cards on a phone. Measured per card, the empty space below one was 41px (core's miniature carries 16px of padding and 25px of margin) on top of the grid's own 24px row gap — 65px between one card's text and the next card's thumbnail, against YouTube's ~16. Halved here, and only here: Latest and Trending are core's own pages and keep core's spacing. */ #gh-home .ghh-grid { row-gap: 12px; } #gh-home .ghh-native-card .video-miniature { padding-bottom: 8px; margin-bottom: 12px; } /* ⚠️ Hold the taller height. The heading is Bebas Neue, and until it arrives the fallback font wraps it to two lines — measured on staging, the card was 267px and then snapped to 226px the moment the font loaded, taking the whole feed up 41px with it (0.024 of the phone's CLS). The content is centred, so the held height reads as air rather than a gap. Desktop needs none of this: the heading fits one line in both fonts there (204px, flat). */ #gh-home .ghh-cta { min-height: 267px; } } @media (max-width: 900px) { #gh-home .ghh-exclusives-shelf .ghh-track { display: grid; grid-template-columns: 1fr; overflow-x: visible; } #gh-home .ghh-exclusives-shelf .ghh-card { width: auto; } #gh-home .ghh-exclusives-shelf .ghh-shelf-arrow { display: none; } /* Four here, as before. The feed sends six for the desktop scroller and one payload serves both widths, so the last two are hidden rather than re-fetched. */ #gh-home .ghh-exclusives-shelf .ghh-card:nth-child(n + 5) { display: none; } } /* Desktop: three across, the other three a scroll away. The track is a flex scroller with a 16px gap, so a third of the row less its two gaps puts exactly three in view and leaves the arrows something to scroll to. */ @media (min-width: 901px) { #gh-home .ghh-exclusives-shelf .ghh-card { width: calc((100% - 32px) / 3); } /* The row is 12px taller here — the anchor's own top padding. */ #gh-home .ghh-chipbar { min-height: 52px; } } /* /p/exclusives — the listing behind the shelf's "View all". Everything else it needs is already scoped to #gh-home, which is why the page mounts under that id. */ #gh-home .ghx-foot { display: flex; justify-content: center; padding: 28px 0 48px; } #gh-home .ghx-more { padding: 11px 22px; border: 1px solid var(--gh-line); border-radius: var(--input-border-radius, 6px); background: transparent; color: var(--primary); font-weight: 700; font-size: 14px; cursor: pointer; } #gh-home .ghx-more:hover { background: var(--bg-secondary); } #gh-home .ghh-note { color: var(--gh-mid); text-align: center; padding: 20px 0; } /** * Video watch page action bar tweaks (Greyhive). * Active when body has class gh-video-page (set by client plugin on /w/* and /videos/watch/* routes). */ body.gh-video-page .video-actions .action-dropdown.gh-save-in-menu { position: fixed; width: 1px; height: 1px; opacity: 0; overflow: visible; pointer-events: none; z-index: -1; } body.gh-video-page .video-actions .action-dropdown.gh-save-in-menu .dropdown-menu { pointer-events: auto; } body.gh-video-page my-subscribe-button .dropdown-toggle-split, body.gh-video-page my-subscribe-button button[aria-label="Open subscription dropdown"] { display: none !important; } body.gh-video-page my-subscribe-button .btn-group > .btn.peertube-button.primary-button:not(.dropdown-toggle-split) { border-radius: var(--input-border-radius); } @media screen and (max-width: 800px) { body.gh-video-page .video-actions .action-button { padding: 4px 6px; } } /* Hide My Library menu by default */ .is-logged-in .top-menu .logged-in-menu a[href="/my-library"] { display: none; } /* Hide My Library menu by default */ .is-logged-in .top-menu .logged-in-menu a[href="/my-library"] { display: none; } /* Show My Library menu when `show-my-library` class is added */ .show-my-library .is-logged-in .top-menu .logged-in-menu a[href="/my-library"] { display: flex !important; } /* Hide video channels, videos, and playlists by default */ .in-my-library a[href="/my-library/video-channels"], .in-my-library a[href="/my-library/videos"], .in-my-library a[href="/my-library/video-playlists"] { display: none; } /* Show specific sections when respective classes are added */ .show-channels-in-my-library a[href="/my-library/video-channels"] { display: flex; } .show-videos-in-my-library a[href="/my-library/videos"] { display: flex; } .show-playlists-in-my-library a[href="/my-library/video-playlists"] { display: flex; } /* Hide sub-menu by default */ .root .sub-menu a[href="/my-library/video-channels"], .root .sub-menu a[href="/my-library/videos"], .root .sub-menu a[href="/my-library/video-playlists"] { display: none; } /* Show sub-menu when `show-root` class is added */ .show-root .sub-menu a[href="/my-library/video-channels"], .show-root .sub-menu a[href="/my-library/videos"], .show-root .sub-menu a[href="/my-library/video-playlists"] { display: flex; } /* Plugin Scoped Styles */ /* Match PeerTube core's collapsed menu-link behavior for our injected menu item */ .menu-container.collapsed #plugin-all-channels-menu-item .label { display: none; } .peertube-plugin-page-all-channels-container { width: 100%; background: var(--mainBackgroundColor); padding: 2rem 1rem; } .peertube-plugin-page-all-channels-content { width: 100%; max-width: 95%; margin: 0 auto; transition: max-width 0.3s ease; } /* Header */ .peertube-plugin-page-all-channels-header { margin-bottom: 2rem; text-align: center; } .peertube-plugin-page-all-channels-header h1 { color: var(--mainForegroundColor); font-size: 2.5rem; margin: 0; font-weight: 700; } /* Grid Layout */ .peertube-plugin-page-all-channels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; width: 100%; justify-content: center; } /* Channel Card */ .peertube-plugin-page-all-channels-card { display: flex; flex-direction: column; background: var(--menuBackgroundColor); border: 1px solid var(--inputBorderColor); border-radius: 8px; overflow: hidden; padding: 10px; height: auto; box-sizing: border-box; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .peertube-plugin-page-all-channels-card-content { display: flex; margin-top: 10px; } .peertube-plugin-page-all-channels-card:hover { transform: translateY(-4px); border-color: var(--mainColor); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Card Image */ .peertube-plugin-page-all-channels-card-image { flex: 0 0 120px; margin-right: 10px; display: flex; align-items: center; justify-content: center; } .peertube-plugin-page-all-channels-avatar { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--inputBorderColor); transition: transform 0.3s ease; } .peertube-plugin-page-all-channels-card:hover .peertube-plugin-page-all-channels-avatar { transform: scale(1.05); } /* Card Info */ .peertube-plugin-page-all-channels-card-content { display: flex; margin-top: 10px; } .peertube-plugin-page-all-channels-section-label { display: none; } .peertube-plugin-page-all-channels-card-info { display: flex; flex-direction: column; justify-content: center; flex: 1; } .peertube-plugin-page-all-channels-actor-display-name { width: 100%; text-align: center; margin: 0; padding: 0; position: relative; z-index: 1; } .peertube-plugin-page-all-channels-actor-handle { display: none; } /* Only target links within our plugin's cards */ .peertube-plugin-page-all-channels-card .peertube-plugin-page-all-channels-name-link { color: var(--mainForegroundColor); text-decoration: none; transition: color 0.2s ease; display: block; } .peertube-plugin-page-all-channels-card .peertube-plugin-page-all-channels-name-link:hover { color: var(--mainHoverColor); } /* Stats */ .peertube-plugin-page-all-channels-actor-counters { display: flex; gap: 15px; font-size: 13px; color: var(--mainForegroundColor); margin-bottom: 5px; justify-content: flex-start; } .peertube-plugin-page-all-channels-channel-buttons { display: flex; justify-content: flex-start; } /* Subscribe Button */ .peertube-plugin-page-all-channels-subscribe-btn { padding: 5px 10px; border-radius: 4px; border: 1px solid var(--mainColor); background-color: var(--mainColor); color: white; cursor: pointer; font-size: 13px; transition: all 0.2s ease; max-width: 120px; } .peertube-plugin-page-all-channels-subscribe-btn:hover { background-color: transparent; color: var(--mainColor); } .peertube-plugin-page-all-channels-subscribe-btn.subscribed { background-color: transparent; color: var(--mainColor); } .peertube-plugin-page-all-channels-subscribe-btn.subscribed:hover { background-color: var(--mainColor); color: white; } /* Bold Header Template Styles */ .peertube-plugin-page-all-channels-card.bold-header { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--mainColor); } .peertube-plugin-page-all-channels-card.bold-header:hover { transform: translateY(-4px); border-color: var(--mainColor); border-width: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .peertube-plugin-page-all-channels-card.bold-header .card-header { background: var(--menuBackgroundColor); padding: 10px 15px; width: 100%; border-bottom: 1px solid var(--mainColor); } .peertube-plugin-page-all-channels-card.bold-header .card-header h3 { color: var(--bs-heading-color); text-align: center; width: 100%; margin: 0; font-size: 17px; font-weight: 600; } .peertube-plugin-page-all-channels-card.bold-header .card-header a { color: var(--bs-heading-color); text-decoration: none; } .peertube-plugin-page-all-channels-card.bold-header .card-body { padding: 5px; padding-bottom: 5px; display: flex; flex-direction: column; flex: 1; } .peertube-plugin-page-all-channels-card.bold-header .card-layout { display: flex; margin-bottom: 0; padding: 10px; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-card-image { flex: 0 0 120px; margin-right: 15px; display: flex; align-items: center; justify-content: center; } .peertube-plugin-page-all-channels-card.bold-header .card-details { flex: 1; margin-left: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 5px 0; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 3px; padding-left: 0; height: 100%; justify-content: space-between; } .peertube-plugin-page-all-channels-card.bold-header .stat-line { display: flex; align-items: center; width: 100%; position: relative; margin-bottom: 0; padding-left: 10%; } .peertube-plugin-page-all-channels-card.bold-header .stat-value { font-weight: 600; font-size: 15px; color: var(--mainForegroundColor); display: inline-block; min-width: 30px; width: 30px; text-align: right; margin-left: 10%; margin-right: 0; } .peertube-plugin-page-all-channels-card.bold-header .stat-label { font-size: 14px; color: var(--mainForegroundColor); text-align: left; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-channel-buttons { display: flex; justify-content: flex-start; margin-top: 0; width: 100%; padding-left: 10%; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-subscribe-btn { width: 80%; max-width: none; display: block; text-align: center; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-avatar { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 8px; transition: transform 0.3s ease; } /* Processing state for subscription button */ .peertube-plugin-page-all-channels-subscribe-btn.processing { position: relative; overflow: hidden; } .peertube-plugin-page-all-channels-subscribe-btn.processing::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: processing-animation 1.5s infinite; } @keyframes processing-animation { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* Responsive Design */ @media screen and (min-width: 1800px) { .peertube-plugin-page-all-channels-content { max-width: 98%; } .peertube-plugin-page-all-channels-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } } @media screen and (max-width: 1800px) and (min-width: 1400px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } @media screen and (max-width: 1400px) and (min-width: 1200px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } @media screen and (max-width: 1200px) and (min-width: 800px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } } @media screen and (max-width: 800px) { .peertube-plugin-page-all-channels-container { padding: 1.5rem var(--horizontalMarginContent); } .peertube-plugin-page-all-channels-grid { grid-template-columns: 1fr; gap: 1rem; } .peertube-plugin-page-all-channels-card { flex-direction: column; height: auto !important; max-height: none !important; min-height: auto !important; padding: 10px; } .peertube-plugin-page-all-channels-card-image { margin-right: 0; margin-bottom: 10px; justify-content: center; } .peertube-plugin-page-all-channels-card-info { height: auto; max-height: none; } .peertube-plugin-page-all-channels-header h1 { font-size: 2rem; } /* Bold Header mobile styles */ .peertube-plugin-page-all-channels-card.bold-header { padding: 0; } .peertube-plugin-page-all-channels-card.bold-header .card-layout { flex-direction: column; align-items: center; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-card-image { margin-right: 0; margin-bottom: 10px; } .peertube-plugin-page-all-channels-card.bold-header .card-details { margin-left: 0; width: 100%; padding: 5px; } /* Reduced spacing in card details for mobile only */ .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { width: 100%; margin-bottom: 0; flex-direction: column; gap: 6px; padding-left: 0; align-items: center; } .peertube-plugin-page-all-channels-card.bold-header .stat-line, .peertube-plugin-page-all-channels-card.bold-header .date-line, .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-channel-buttons { width: 80%; padding-left: 0; justify-content: center; margin: 0; } .peertube-plugin-page-all-channels-card.bold-header .date-label { font-size: 13px; text-align: center; } } @media screen and (max-width: 500px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: 1fr; } .peertube-plugin-page-all-channels-card { flex-direction: column; height: auto !important; max-height: none !important; min-height: auto !important; } .peertube-plugin-page-all-channels-card-image { margin-right: 0; margin-bottom: 10px; justify-content: center; } .peertube-plugin-page-all-channels-card-info { height: auto; max-height: none; } } /* Add new styles for pagination, loading, search, and responsive layout */ /* Loading state */ .loading-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; width: 100%; } .loader { border: 5px solid var(--inputBorderColor); border-top: 5px solid var(--mainColor); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text { font-size: 18px; color: var(--mainForegroundColor); } /* Error state */ .error-page { text-align: center; padding: 50px 20px; } .retry-button { background-color: var(--mainColor); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; margin-top: 20px; } .retry-button:hover { background-color: var(--mainHoverColor); } /* Filters and search */ .peertube-plugin-page-all-channels-filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; background: var(--submenuBackgroundColor); padding: 15px; border-radius: 8px; } .peertube-plugin-page-all-channels-search { flex: 1; min-width: 200px; } .peertube-plugin-page-all-channels-search input { padding: 8px 12px; border: 1px solid var(--inputBorderColor); border-radius: 4px; font-size: 14px; width: 100%; max-width: 300px; background-color: var(--inputBackgroundColor); color: var(--inputForegroundColor); } .peertube-plugin-page-all-channels-sort { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .peertube-plugin-page-all-channels-sort label { font-size: 14px; color: var(--mainForegroundColor); font-weight: 500; } .peertube-plugin-page-all-channels-sort select { padding: 8px 12px; border: 1px solid var(--inputBorderColor); border-radius: 4px; font-size: 14px; background-color: var(--inputBackgroundColor); color: var(--inputForegroundColor); min-width: 150px; } /* Enhanced sorting UI */ .sort-options-container { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; } .sort-option { display: flex; align-items: center; gap: 5px; } .sort-direction { margin-left: 10px; } /* Pagination */ .peertube-plugin-page-all-channels-pagination { display: flex; align-items: center; justify-content: center; margin: 30px 0; gap: 10px; } .pagination-pages { display: flex; align-items: center; gap: 5px; } .pagination-button { background-color: var(--mainBackgroundColor); color: var(--mainForegroundColor); border: 1px solid var(--inputBorderColor); border-radius: 4px; padding: 6px 12px; font-size: 14px; cursor: pointer; min-width: 40px; text-align: center; } .pagination-button.page-number.active { background-color: var(--mainColor); color: white; border-color: var(--mainColor); } .pagination-button:hover:not(.disabled):not(.active) { background-color: var(--inputBorderColor); } .pagination-button.disabled { opacity: 0.5; cursor: not-allowed; } .pagination-ellipsis { padding: 0 5px; } .channels-count { margin-bottom: 15px; font-size: 14px; color: var(--greyForegroundColor); } /* Improved responsive layout */ @media (max-width: 1200px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } @media (max-width: 768px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: 1fr; } .peertube-plugin-page-all-channels-filters { flex-direction: column; align-items: flex-start; } .peertube-plugin-page-all-channels-search input { width: 100%; max-width: none; } .peertube-plugin-page-all-channels-sort { width: 100%; } .sort-options-container { width: 100%; flex-direction: column; align-items: flex-start; } .sort-option { width: 100%; } } /* Empty state */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 20px; text-align: center; } /* Existing style improvements */ .peertube-plugin-page-all-channels-container { width: 100%; max-width: none; margin: 0 auto; padding: 20px 1rem; } .peertube-plugin-page-all-channels-title { font-size: 24px; margin-bottom: 25px; color: var(--mainForegroundColor); } /* Fix for the channel card stats with the new styles */ .peertube-plugin-page-all-channels-card.bold-header .stat-line { display: flex; align-items: center; width: 100%; position: relative; padding-left: 0; gap: 2px; } .peertube-plugin-page-all-channels-card.bold-header .stat-value { font-weight: 600; font-size: 15px; color: var(--mainForegroundColor); display: inline-block; min-width: 30px; width: 30px; text-align: right; margin-left: 10%; margin-right: 0; } .peertube-plugin-page-all-channels-card.bold-header .stat-label { font-size: 14px; color: var(--mainForegroundColor); text-align: left; padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; margin: 0; gap: 6px; } /* Mobile view adjustments */ @media screen and (max-width: 800px) { .peertube-plugin-page-all-channels-grid { grid-template-columns: 1fr; gap: 1rem; } .peertube-plugin-page-all-channels-card.bold-header { max-width: 100%; } .peertube-plugin-page-all-channels-card.bold-header .card-layout { flex-direction: column; align-items: center; padding: 10px; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-card-image { margin-right: 0; margin-bottom: 10px; width: 120px; } .peertube-plugin-page-all-channels-card.bold-header .card-details { width: 100%; align-items: center; padding: 0; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { align-items: flex-start; width: 100%; padding: 0; gap: 6px; } .peertube-plugin-page-all-channels-card.bold-header .stat-line, .peertube-plugin-page-all-channels-card.bold-header .date-line, .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-channel-buttons { width: 80%; padding-left: 0; justify-content: center; margin: 0; } .peertube-plugin-page-all-channels-card.bold-header .date-label { font-size: 13px; } } /* Add styles for button and RSS icon */ .peertube-plugin-page-all-channels-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.2s ease; } .peertube-plugin-page-all-channels-button.primary { background-color: var(--mainColor); color: white; border: 1px solid var(--mainColor); min-width: 100px; } .peertube-plugin-page-all-channels-button.primary:hover { background-color: var(--mainHoverColor); border-color: var(--mainHoverColor); } .peertube-plugin-page-all-channels-button.secondary { background-color: transparent; color: var(--mainForegroundColor); border: 1px solid var(--inputBorderColor); margin-left: 8px; padding: 8px; } .peertube-plugin-page-all-channels-button.secondary:hover { background-color: var(--inputBorderColor); } /* Add styles for date statistics */ .peertube-plugin-page-all-channels-card.bold-header .date-line { margin-top: 0; margin-bottom: 0; width: 100%; justify-content: flex-start; padding-left: 10%; } .peertube-plugin-page-all-channels-card.bold-header .date-label { font-size: 14px; color: var(--mainForegroundColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 0; padding-left: 8px; } /* Mobile view adjustments for date elements */ @media screen and (max-width: 800px) { .peertube-plugin-page-all-channels-card.bold-header .date-line { margin-top: 1px; margin-bottom: 0; padding-left: 0; justify-content: center; width: 80%; } .peertube-plugin-page-all-channels-card.bold-header .date-label { font-size: 13px; } } /* Go To Channel button - similar styling to subscribe button */ .peertube-plugin-page-all-channels-goto-btn { padding: 5px 10px; border-radius: 4px; border: 1px solid var(--mainColor); background-color: transparent; color: var(--mainColor); cursor: pointer; font-size: 13px; transition: all 0.2s ease; display: block; text-align: center; text-decoration: none; width: 80%; max-width: none; } .peertube-plugin-page-all-channels-goto-btn:hover { background-color: var(--mainColor); color: white; } /* Bold Header Template Styles - Actor counters */ .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 10px; /* Slightly increased gap for better spacing */ padding-left: 0; height: 100%; justify-content: center; /* Center vertically */ align-items: center; /* Center horizontally */ } .peertube-plugin-page-all-channels-card.bold-header .stat-line { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; margin-bottom: 0; padding-left: 0; } .peertube-plugin-page-all-channels-card.bold-header .stat-value { font-weight: 600; font-size: 15px; color: var(--mainForegroundColor); display: inline-block; min-width: 30px; width: 30px; text-align: right; margin-right: 8px; } .peertube-plugin-page-all-channels-card.bold-header .stat-label { font-size: 14px; color: var(--mainForegroundColor); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Standardize spacing for buttons */ .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-channel-buttons { display: flex; justify-content: center; margin: 0; width: 100%; padding: 0; } .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-subscribe-btn { width: 80%; max-width: none; display: block; text-align: center; } /* Mobile view adjustments */ @media screen and (max-width: 800px) { .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-actor-counters { gap: 8px; align-items: center; justify-content: center; } .peertube-plugin-page-all-channels-card.bold-header .stat-line, .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-channel-buttons { width: 80%; justify-content: center; align-items: center; margin: 0 auto; } .peertube-plugin-page-all-channels-card.bold-header .card-details { display: flex; justify-content: center; align-items: center; text-align: center; } .peertube-plugin-page-all-channels-goto-btn, .peertube-plugin-page-all-channels-card.bold-header .peertube-plugin-page-all-channels-subscribe-btn { width: 100%; } } /* Centered videos stat */ .peertube-plugin-page-all-channels-card.bold-header .centered-stat { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 5px; } .peertube-plugin-page-all-channels-card.bold-header .centered-stat .stat-value { font-weight: 600; font-size: 16px; color: var(--mainForegroundColor); display: inline-block; margin: 0; margin-right: 4px; /* Reduced space between number and text */ } .peertube-plugin-page-all-channels-card.bold-header .centered-stat .stat-label { font-size: 14px; color: var(--mainForegroundColor); white-space: nowrap; margin-left: 0px; padding-left: 0px; } /* Left menu: match native icons' collapsed non-selected color for the All Channels link */ .menu-container.collapsed .menu-link.ghv-all-channels-menu-link:not(.active) my-global-icon { color: var(--menu-fg-400, #e0e0e0); } .shop-button { display: inline-flex !important; align-items: center !important; gap: 4px !important; cursor: pointer !important; color: var(--mainColor, #bba777) !important; font-weight: 500 !important; padding: 0 6px !important; border-radius: 4px !important; transition: opacity 0.2s ease !important; vertical-align: middle !important; line-height: 1 !important; } .shop-button:hover { opacity: 0.8 !important; } .shop-button svg { width: 14px !important; height: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; top: -1px !important; } .shop-button .shop-text { position: relative !important; top: -1px !important; } .mobile-products-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0,0,0,0.7) !important; z-index: 19000 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding-top: 60px !important; } .mobile-products-container { width: 95% !important; max-width: 600px !important; max-height: 80vh !important; background-color: var(--mainBackgroundColor, #121212) !important; border-radius: 8px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; margin-top: 10px !important; } /* Desktop shop modal: fixed position from top (doesn't shift with content) */ .desktop-shop-modal { align-items: flex-start !important; justify-content: center !important; padding-top: 4vh !important; } .desktop-shop-modal .mobile-products-container { width: 50vw !important; max-width: 600px !important; max-height: 80vh !important; margin-top: 0 !important; overflow: hidden !important; } .desktop-shop-modal .mobile-products-body { overflow-y: auto !important; overflow-x: hidden !important; max-height: calc(80vh - 60px) !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 16px !important; } .desktop-shop-modal .mobile-product-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Desktop shop button - match action button hover */ .desktop-shop-button:hover { opacity: 0.7 !important; } .mobile-products-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 16px !important; border-bottom: 1px solid var(--mainColorLighter, #52525b) !important; } .mobile-products-title { margin: 0 !important; font-size: 18px !important; } .mobile-products-close { border: none !important; background: none !important; font-size: 24px !important; cursor: pointer !important; color: var(--mainForegroundColor, #ffffff) !important; } @media screen and (max-width: 768px) { .mobile-products-modal { z-index: 2147483647 !important; } } .mobile-products-body { padding: 16px !important; overflow-y: auto !important; max-height: calc(90vh - 60px) !important; display: flex !important; flex-wrap: wrap !important; gap: 16px !important; } .mobile-product-card { display: flex !important; width: 100% !important; border: 1px solid var(--mainColorLighter, #52525b) !important; border-radius: 8px !important; padding: 8px !important; text-decoration: none !important; color: inherit !important; background-color: var(--mainBackgroundColor, #121212) !important; transition: transform 0.2s !important; } .mobile-product-card:hover { transform: translateY(-2px) !important; } .mobile-product-image { width: 80px !important; height: 80px !important; object-fit: cover !important; border-radius: 4px !important; margin-right: 12px !important; } .mobile-product-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .mobile-product-title { font-weight: 500 !important; font-size: 15px !important; margin-bottom: 4px !important; line-height: 1.2 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .mobile-product-price { font-weight: bold !important; color: var(--mainColor, #bba777) !important; font-size: 16px !important; } .mobile-product-site { font-size: 12px !important; color: var(--greyForegroundColor, #52525b) !important; } .mobile-auto-ads-container { width: 100% !important; padding: 0 !important; margin: 0 !important; background-color: var(--mainBackgroundColor, #121212) !important; margin-top: 10px !important; margin-bottom: 30px !important; border-radius: 4px !important; padding-top: 10px !important; box-sizing: border-box !important; display: block !important; position: relative !important; z-index: 10 !important; height: auto !important; min-height: 190px !important; overflow: visible !important; } .rotating-product-card { display: flex !important; align-items: center !important; width: 100% !important; max-width: 600px !important; border: 1px solid var(--mainColorLighter, #52525b) !important; border-radius: 8px !important; padding: 0 !important; text-decoration: none !important; color: inherit !important; background-color: var(--mainBackgroundColor, #121212) !important; position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; height: 110px !important; box-sizing: border-box !important; overflow: hidden !important; will-change: transform, opacity !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } .rotating-product-container { position: relative !important; height: 110px !important; overflow: visible !important; width: 100% !important; display: block !important; } .product-indicator-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; margin-top: 15px !important; padding: 5px 0 !important; position: relative !important; bottom: 0 !important; width: 100% !important; box-sizing: border-box !important; z-index: 9999 !important; } .carousel-pagination { display: flex !important; justify-content: center !important; gap: 12px !important; margin: 0 auto !important; margin-top: 0 !important; margin-bottom: 10px !important; width: 90% !important; z-index: 99999 !important; position: relative !important; padding: 5px 0 !important; pointer-events: auto !important; background-color: rgba(0, 0, 0, 0.2) !important; border-radius: 10px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important; opacity: 1 !important; visibility: visible !important; } /* Make pagination dots extremely visible */ .pagination-dot { width: 12px !important; height: 12px !important; min-width: 12px !important; min-height: 12px !important; border-radius: 50% !important; background-color: #888 !important; transition: all 0.3s ease !important; display: block !important; border: 2px solid white !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important; pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; margin: 0 4px !important; } .pagination-dot.active { background-color: #bba777 !important; /* Changed to gold theme color */ transform: scale(1.3) !important; opacity: 1 !important; border-color: white !important; box-shadow: 0 0 8px rgba(187, 167, 119, 0.8) !important; /* Updated glow to match gold color */ } /* Keyframe animations for modal */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideIn { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(50px); opacity: 0; } } /* Mobile button styles */ .mobile-shop-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #bba777 !important; color: white !important; border: none !important; border-radius: 20px !important; padding: 6px 12px !important; margin-left: 10px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; z-index: 99999 !important; font-family: 'Lato', sans-serif !important; line-height: 1.2 !important; height: auto !important; max-height: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: auto !important; min-width: 70px !important; position: relative !important; } /* Auto-ads indicator dots */ .rotating-product-indicator-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; margin-top: 110px !important; margin-bottom: 10px !important; padding: 10px 0 !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 9999 !important; background-color: transparent !important; } .rotating-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: var(--greyForegroundColor, #52525b) !important; opacity: 0.5 !important; transition: all 0.2s ease !important; min-width: 10px !important; min-height: 10px !important; border: 1px solid rgba(255,255,255,0.2) !important; } .rotating-dot.active { background-color: var(--mainColor, #bba777) !important; opacity: 1 !important; transform: scale(1.2) !important; } /* Desktop carousel styles based on desktop plugin */ .product-carousel-container { position: relative; width: 100%; max-width: 100%; padding: 0 40px; overflow: hidden; box-sizing: border-box; margin-bottom: 20px; margin-right: 0; margin-left: 0; } .product-carousel { display: flex; gap: 15px; width: 100%; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 0; margin: 0; position: relative; z-index: 1; } .product-carousel::-webkit-scrollbar { display: none; } .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: var(--mainBackgroundColor); border: 1px solid var(--mainForegroundColor); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 2; font-size: 24px; line-height: 1; padding: 0; color: var(--mainForegroundColor); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .nav-arrow.prev { left: 0px; } .nav-arrow.next { right: 0px; } .nav-arrow:hover { background-color: var(--submenuBackgroundColor); color: var(--mainColor); } .nav-arrow:focus { outline: 2px solid var(--mainColor); outline-offset: 2px; } .nav-arrow:disabled { cursor: not-allowed; opacity: 0.5; } .product-card { flex: 0 0 225px; width: 225px; min-width: 225px; max-width: 225px; height: 110px; display: flex; align-items: center; border: 1px solid var(--mainForegroundColor); border-radius: 8px; padding: 10px; transition: transform 0.3s ease; text-decoration: none; color: inherit; background: var(--mainBackgroundColor); position: relative; z-index: 1; } .product-card:hover { border-color: var(--mainColor); } .product-image { width: 90px; height: 90px; object-fit: cover; border-radius: 4px 0 0 4px; } .product-info { padding: 8px; display: flex; flex-direction: column; gap: 4px; width: calc(100% - 90px); } .product-title { font-size: 12px; line-height: 1.2; margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .product-price { font-size: 12px; font-weight: bold; color: var(--mainColor); margin: 0; } .product-site { font-size: 11px; color: var(--greyForegroundColor); margin: 0; } @media screen and (max-width: 1100px) { .product-carousel-container { padding: 0 70px; } } @media screen and (max-width: 600px) { .product-carousel-container { padding: 0 60px; } .product-carousel { gap: 10px; } .nav-arrow.prev { left: 0px; } .nav-arrow.next { right: 0px; } } /** * Channel page layout — YouTube-style compact spacing (Greyhive). * Active when body has class gh-channel-page-layout (set by client plugin on /c/* routes). */ body.gh-channel-page-layout .root:has(.channel-info) { --co-channel-img-margin: 20px; --x-margin-content: 1rem; overflow-x: clip; max-width: 100%; } /* Banner: ~10% shorter than default 1:6 ratio (16.67% → 15% padding-top) */ body.gh-channel-page-layout .root:has(.channel-info) .banner { padding-top: 15% !important; } body.gh-channel-page-layout .root:has(.channel-info) .banner.mb-4 { margin-bottom: 25px !important; } body.gh-channel-page-layout { overflow-x: clip; } body.gh-channel-page-layout .channel-info { margin-bottom: 0px !important; min-width: 0; width: 100%; max-width: 100%; overflow-x: clip; box-sizing: border-box; } body.gh-channel-page-layout .margin-content { max-width: 100%; box-sizing: border-box; } body.gh-channel-page-layout .channel-avatar-row { margin-bottom: 25px !important; } body.gh-channel-page-layout .channel-description { margin-bottom: 15px !important; max-height: none !important; min-width: 0 !important; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } /* Single line + ... More overlaid on the right (no extra flex/grid width) */ body.gh-channel-page-layout .gh-channel-desc-row { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; } body.gh-channel-page-layout .gh-channel-desc-row .description-html { display: block !important; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; box-sizing: border-box; contain: inline-size; -webkit-line-clamp: unset !important; -webkit-box-orient: unset !important; word-break: normal; } body.gh-channel-page-layout .bottom-owner { display: none !important; } /* Desktop grid: minmax(0,1fr) lets column 1 shrink; width:0 was hiding all text */ @media screen and (min-width: 1101px) { body.gh-channel-page-layout .channel-info { grid-template-columns: minmax(0, 1fr) auto !important; } body.gh-channel-page-layout .channel-avatar-row, body.gh-channel-page-layout .channel-description, body.gh-channel-page-layout .channel-info .channel-buttons.bottom { grid-column: 1; min-width: 0; max-width: 100%; } } body.gh-channel-page-layout .gh-channel-desc-row .description-html > * { display: inline; white-space: nowrap; } body.gh-channel-page-layout .gh-channel-desc-row .description-html p { display: inline; margin: 0; } body.gh-channel-page-layout .gh-channel-desc-row .description-html p::after { content: ' '; } body.gh-channel-page-layout .gh-channel-desc-row .description-html br { display: none; } /* Hide PeerTube inline expand; plugin uses modal instead */ body.gh-channel-page-layout .channel-info .show-more { display: none !important; } body.gh-channel-page-layout .gh-channel-desc-more { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; margin: 0; padding: 0 0 0 0.75rem; border: 0; background: black; color: var(--fg-300, var(--mainForegroundColor, #000)); font-size: inherit; font-family: inherit; line-height: 1.4; white-space: nowrap; cursor: pointer; } body.gh-channel-page-layout .gh-channel-desc-more:hover, body.gh-channel-page-layout .gh-channel-desc-more:focus { color: var(--fg, var(--mainForegroundColor, #000)); text-decoration: underline; outline: none; } body.gh-channel-page-layout .gh-channel-desc-more.is-visible { display: inline-block; } body.gh-channel-page-layout .root:has(.channel-info) .margin-content.mb-3 { margin-bottom: 25px !important; } body.gh-channel-page-layout my-video-channel-videos my-video-filters-header .root { margin-top: 25px !important; margin-bottom: 25px !important; min-height: 0 !important; } body.gh-channel-page-layout my-video-channel-videos .videos { margin-top: 0 !important; } /* Sort dropdown: hide stale PrimeNG focus ring after programmatic sort sync on load */ body.gh-channel-page-layout my-video-channel-videos my-select-videos-sort p-select:not(:focus-within) .p-select.p-focus { outline: none !important; box-shadow: none !important; } body.gh-channel-page-layout my-video-channel-videos my-select-videos-sort p-select:not(:focus-within) .p-select.p-focus .p-select-label { outline: none !important; } /* Single-click subscribe only — hide RSS/ActivityPub dropdown chevron (matches video watch page) */ body.gh-channel-page-layout my-subscribe-button .dropdown-toggle-split, body.gh-channel-page-layout my-subscribe-button button[aria-label="Open subscription dropdown"] { display: none !important; } body.gh-channel-page-layout my-subscribe-button .btn-group > .btn.peertube-button.primary-button:not(.dropdown-toggle-split) { border-radius: var(--input-border-radius); } /* Description modal */ .gh-channel-desc-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 1rem; } .gh-channel-desc-modal.is-open { display: flex; } .gh-channel-desc-modal-backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.55); } .gh-channel-desc-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: min(80vh, 640px); display: flex; flex-direction: column; background: var(--bg, var(--mainBackgroundColor, #fff)); color: var(--fg, var(--mainForegroundColor, #000)); border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); overflow: hidden; } .gh-channel-desc-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-secondary, rgba(128, 128, 128, 0.25)); } .gh-channel-desc-modal-title { margin: 0; font-size: 1.25rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gh-channel-desc-modal-close { flex-shrink: 0; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0.25rem; line-height: 1; opacity: 0.75; } .gh-channel-desc-modal-close:hover { opacity: 1; } .gh-channel-desc-modal-body { padding: 1rem 1.25rem; overflow-y: auto; word-break: break-word; } .gh-channel-desc-modal-body .description-html { display: block !important; white-space: normal !important; overflow: visible !important; } .gh-channel-desc-modal-footer { padding: 0.75rem 1.25rem 1rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--border-secondary, rgba(128, 128, 128, 0.25)); } @media screen and (max-width: 1100px) { body.gh-channel-page-layout .margin-content.channel-info { overflow-x: clip; max-width: 100%; box-sizing: border-box; } body.gh-channel-page-layout .channel-description:not(.expanded) { max-height: none !important; } body.gh-channel-page-layout .gh-channel-desc-more { right: 0.65rem; font-size: 0.9375rem; padding-left: 0.5rem; } } @media screen and (max-width: 500px) { body.gh-channel-page-layout .root:has(.channel-info) { --x-margin-content: 0.75rem; } body.gh-channel-page-layout .gh-channel-desc-more { right: 0.75rem; } } /** * Account setup / welcome modal custom plugin * Targets the modal whose body was replaced by this plugin (data-account-setup-modal-custom) * and centers the footer action buttons. */ [data-account-setup-modal-custom] .modal-footer.inputs { justify-content: center; padding: 2px !important; margin-bottom: 15px !important; } [data-account-setup-modal-custom] .modal-body { display: grid !important; text-align: center !important; padding: 15px !important; } /** * Plugin settings: larger, resizable textarea for "Custom modal body HTML" */ textarea#customModalBodyHtml { resize: both; min-height: 280px; min-width: 80%; box-sizing: border-box; } /* Greyhive Select2 + controls for Discover admin panel */ #gh-discover-admin-panel .card-body { position: relative; } #gh-discover-admin-panel .gh-discover-admin-header { position: relative; } #gh-discover-admin-panel .gh-discover-memoize-wrap { flex-shrink: 0; margin-left: auto; text-align: right; max-width: 30rem; } #gh-discover-admin-panel .gh-discover-memoize-input { max-width: 100%; margin-left: auto; text-align: center; padding-left: 0.35rem; padding-right: 0.35rem; } #gh-discover-admin-panel .gh-discover-memoize-wrap .form-text { font-size: 0.75rem; line-height: 1.2; margin-top: 0.2rem; } /* Keep hidden admin inputs in DOM for saves */ #gh-discover-admin-panel .gh-discover-admin-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.gh-discover-row-drag-active { cursor: grabbing !important; user-select: none; } #gh-discover-admin-panel .gh-drag-handle { cursor: grab; user-select: none; touch-action: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; border-radius: 2px; background-color: #e4e4e7; border: 1px solid #d4d4d8; color: #27272a; font-size: 1.25rem; line-height: 1; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } #gh-discover-admin-panel .gh-drag-handle:hover { background-color: #d4d4d8; border-color: #a1a1aa; color: #09090b; } #gh-discover-admin-panel .gh-drag-handle:active { cursor: grabbing; background-color: #d4d4d8; } #gh-discover-admin-panel .gh-discover-row.gh-row-dragging { opacity: 0.65; } #gh-discover-admin-panel .gh-drop-marker { display: block; width: 100%; height: 18px; min-height: 18px; margin: 2px 0; border-radius: 4px; box-sizing: border-box; pointer-events: none; flex-shrink: 0; background: linear-gradient( 180deg, rgba(187, 167, 119, 0.2) 0%, rgba(187, 167, 119, 0.45) 100% ); border: 2px solid #bba777; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 10px rgba(187, 167, 119, 0.35); } #gh-discover-admin-panel .select2-container--default .select2-selection--single, #gh-discover-admin-panel .select2-container--default .select2-selection--multiple { background-color: #2a2a2e; border: 1px solid #52525b; border-radius: 6px; min-height: 42px; } #gh-discover-admin-panel .select2-container--default .select2-selection--single { height: 38px; } #gh-discover-admin-panel .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f4f4f5; line-height: 36px; padding-left: 8px; } #gh-discover-admin-panel .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } #gh-discover-admin-panel .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #a1a1aa; } #gh-discover-admin-panel .select2-container--default.select2-container--focus .select2-selection--single, #gh-discover-admin-panel .select2-container--default.select2-container--open .select2-selection--single { border-color: #bba777; box-shadow: 0 0 0 0.15rem rgba(187, 167, 119, 0.25); } #gh-discover-admin-panel .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #3a3a40; border: 1px solid #bba777; color: #f4f4f5; } #gh-discover-admin-panel .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #bba777; } #gh-discover-admin-panel .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #bba777; box-shadow: 0 0 0 0.15rem rgba(187, 167, 119, 0.25); } #gh-discover-admin-panel .select2-container--default .select2-search--inline .select2-search__field, #gh-discover-admin-panel .select2-container--default .select2-search--dropdown .select2-search__field { color: #f4f4f5; background-color: #1e1e22; border: 1px solid #52525b; border-radius: 4px; } #gh-discover-admin-panel .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #bba777; outline: none; box-shadow: 0 0 0 0.15rem rgba(187, 167, 119, 0.25); } #gh-discover-admin-panel .select2-container--default .select2-selection__clear { color: #bba777; margin-right: 4px; } /* Dropdown is often rendered under the panel (dropdownParent); scope by panel id */ #gh-discover-admin-panel .select2-dropdown { background-color: #2a2a2e !important; border: 1px solid #52525b !important; } #gh-discover-admin-panel .select2-container--default .select2-results > .select2-results__options { background-color: #2a2a2e; } #gh-discover-admin-panel .select2-container--default .select2-results__option { background-color: #2a2a2e; color: #f4f4f5; } #gh-discover-admin-panel .select2-container--default .select2-results__option--selectable { color: #f4f4f5; } #gh-discover-admin-panel .select2-container--default .select2-results__option--highlighted, #gh-discover-admin-panel .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #bba777 !important; color: #121212 !important; } #gh-discover-admin-panel .select2-container--default .select2-results__option--selected, #gh-discover-admin-panel .select2-container--default .select2-results__option[aria-selected='true'] { background-color: #3a3a40 !important; color: #f4f4f5 !important; } /* Search filter checkbox: clearer on dark admin UI */ #gh-discover-admin-panel .gh-discover-apply-search-wrap .form-check-input { width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; border: 2px solid #bba777; background-color: #2a2a2e; cursor: pointer; } #gh-discover-admin-panel .gh-discover-apply-search-wrap .form-check-input:checked { background-color: #bba777; border-color: #bba777; } #gh-discover-admin-panel .gh-discover-apply-search-wrap .form-check-input:focus { border-color: #bba777; box-shadow: 0 0 0 0.2rem rgba(187, 167, 119, 0.35); } #gh-discover-admin-panel .gh-discover-apply-search-wrap .form-check-label { padding-left: 0.35rem; cursor: pointer; } /* Hide language selection elements */ my-select-languages, div[formcontrolname="language"], div.form-group:has(label[for="languageOneOf"]), div.form-group:has(label[for="language"]) { display: none !important; } /* Hide language settings link */ .update-your-settings { display: none !important; } /* Reorder main tabs - pure CSS, no JS, no API calls */ /* Edit order values below to customize. Paths: /home, /videos/overview, /videos/subscriptions, /videos/browse */ /* Scope to home menu tabs only */ my-home-menu my-list-overflow .root { overflow: visible; max-width: none; } my-home-menu my-list-overflow .list-overflow-parent { overflow: visible; } /* Show all tabs always - no visibility:hidden, no overflow dropdown/modal */ my-home-menu my-list-overflow .list-overflow-parent li { visibility: visible !important; } my-home-menu my-list-overflow .list-overflow-parent ul.d-flex { flex-wrap: wrap; } /* Hide overflow button - all tabs visible so no need for dropdown/modal */ my-home-menu my-list-overflow .list-overflow-menu { display: none !important; } /* Ensure modal/dropdown uls are flex so order works (main ul has d-flex) */ ul.ul-unstyle:has(> li:has(a[href^="/videos/browse"])):not(.d-flex) { display: flex; flex-direction: column; } /* Tab order: 1=first, 2=second, etc. */ ul.ul-unstyle > li:has(a[href^="/videos/browse"]) { order: 1; } ul.ul-unstyle > li:has(a[href^="/home"]) { order: 2; } ul.ul-unstyle > li:has(a[href^="/videos/overview"]) { order: 3; } ul.ul-unstyle > li:has(a[href^="/videos/subscriptions"]) { order: 4; } /* Dan's note on the Option D mockup: "These need spaced out more than I have them." Starting values, to be tuned against a staging render. These rules deliberately set NO display property. peertube-plugin-reorder-main-tabs ships unscoped rules of the form ul.ul-unstyle > li:has(a[href^="/videos/browse"]) { order: 1 } which the rail's lists also match. They are inert only while those lists are not flex containers. Introducing flex here would silently reorder Latest and Trending. */ #left-menu .menu-block + .menu-block { margin-top: 1.75rem; } #left-menu .menu-block .block-title { margin-bottom: 0.75rem; } /* Hive's .dnav is a flex column with gap:2px. The rows are pills now (theme 0.5.0), and 8px of air between pills reads as a list of buttons rather than a nav. */ #left-menu .menu-block li + li { margin-top: 2px; } /* Community badges. The rail's icon box is 20x20 (theme 0.5.1 sets it to Hive's size; core's own `.menu-link my-global-icon { width: 22px; height: 22px }`), so the badge is sized to fill that box exactly rather than to a number of its own — a badge that disagrees with the box shifts the label beside it and only that row's label. Scoped to #left-menu because these class names are injected into innerHTML by the svg-icons hook, which core also uses everywhere else in the app; nothing outside the rail should be able to match. Still no display property on the lists themselves — see the note at the top of this file. */ #left-menu my-global-icon .gh-cbadge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; /* Dark ink on the palette's mid-tone fills — the same pairing Hive's own rail uses, and readable on all six. */ color: var(--on-primary); font-family: 'Bebas Neue', 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } /* An avatar is almost never square. Cropping to fill keeps every badge the same shape as the monogram next to it; letterboxing would make the rail's icon column ragged. */ #left-menu my-global-icon .gh-cbadge-img { display: block; object-fit: cover; background: var(--bg-secondary); } /* --------------------------------------------------------------------------------- Mobile floating bottom nav (phase 3) Values ported from Hive's own TabBar (app/apps/web/src/components/shell/globals.css) so a member with Hive open in one tab and PeerTube in another sees one product and not two. Keep them agreeing. Hidden by DEFAULT and shown only under the breakpoint, rather than the other way around: if the media query is ever edited wrongly the failure is a bar nobody sees on a phone, not a bar sitting across the bottom of a 27" desktop. ------------------------------------------------------------------------------- */ #gh-bottom-nav { display: none; } /* $small-view from core's _variables.scss — phones and portrait tablets, where there is no pinned rail and touch is the only input. Deliberately NOT $menu-overlay-view (1200px): a bottom bar on a 1100px laptop reads as a mistake. */ @media (max-width: 800px) { #gh-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end; /* The safe-area inset is not decoration. Without it the bar sits under the iOS home indicator and the labels are unreadable on every notched iPhone. */ padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(232, 230, 225, 0.08); background: rgba(11, 11, 13, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* 10050 is chosen against the two scales actually in play on this site, not picked to win. PeerTube core (client/src/sass/include/_variables.scss $zindex): overlay 12550 the full-screen menu menu 12600 modal 19000 notification 20000 peertube-plugin-shorts: .gh-shorts-root 10000 (fixed, full viewport) At 20 the bar was PAINTED OVER by the Shorts feed and looked deleted: it kept display:flex, visibility:visible, opacity:1 and its correct rect, but elementFromPoint at its own centre returned BUTTON.gh-shorts-tap. Reported as "the bottom nav disappears on Shorts"; it had not moved at all. So: above the Shorts root, and deliberately BELOW core's overlay at 12550, so the full-screen menu still covers the bar (it is a nav — two navs stacked is noise) and every modal, dropdown, tooltip and notification keeps its place above it. The 50 of headroom is for the shorts plugin adding a layer of its own. */ z-index: 10050; } #gh-bottom-nav .gh-bnav-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 2px 4px; color: var(--gh-mid); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; line-height: 1.1; text-decoration: none; /* A tap must not paint a grey box over a translucent bar, and a double-tap must not select the label. */ -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } #gh-bottom-nav .gh-bnav-tab:hover, #gh-bottom-nav .gh-bnav-tab:focus-visible { color: var(--fg); text-decoration: none; } /* Gold, the same accent the rail marks its current row with. */ #gh-bottom-nav .gh-bnav-tab-active, #gh-bottom-nav .gh-bnav-tab-active:hover { color: var(--primary); } #gh-bottom-nav .gh-bnav-icon { display: block; width: 23px; height: 23px; flex: 0 0 auto; } /* The glyphs are inline SVGs (see icons.js) drawn in currentColor, so the active state costs nothing but the colour above. Sized on the element rather than in the markup so one rule moves all five. */ #gh-bottom-nav .gh-bnav-icon svg { display: block; width: 100%; height: 100%; } #gh-bottom-nav .gh-bnav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; } /* One number for the space the bar occupies, so the two clearances below cannot drift apart from each other or from the bar itself. */ :root { --gh-bnav-h: calc(64px + env(safe-area-inset-bottom)); } /* Content clearance. The document is the scrolling element here (body computes to `overflow: auto scroll`), so without this the bar covers the last ~64px of every page — the footer, the last comment, the final row of a grid. Scoped inside the breakpoint so desktop keeps its own spacing exactly. */ body { padding-bottom: var(--gh-bnav-h); } /* The Shorts feed does not scroll — it is a fixed full-viewport layer, so the body padding above does nothing for it and its caption block is pinned to bottom:0. Measured with the bar at 10050: .gh-shorts-crow (the channel row, carrying Subscribe) ended at y=795 and .gh-shorts-meta at y=820, against a bar starting at y=783. Raising the bar over the feed therefore hid the creator's name and the Subscribe button — trading an invisible nav for a buried call to action. SPECIFICITY, and why these selectors are this long. Plugin stylesheets are concatenated into one global.css; ours lands at line ~202 and peertube-plugin-shorts at ~6397. A first attempt at a plain `.gh-shorts-bottom` rule changed NOTHING on a real render: equal specificity, theirs later, theirs wins. Their two rules are `.gh-shorts-bottom` (0,1,0) and `.gh-shorts-root[data-layout="mobile"] .gh-shorts-bottom` (0,3,0), so each needs a selector that outranks it rather than ties one. Extending their padding-bottom instead of fighting their `bottom: 0`, because padding is the mechanism they already use to clear the iOS safe area — the same idea, one more obstacle. --gh-bnav-h already carries env(safe-area-inset-bottom), so adding it to their 24px leaves 24px of breathing room above the bar without counting the inset twice. The coupling is real and worth naming: if that plugin renames .gh-shorts-bottom these rules silently stop applying. They degrade to the overlap we have today, not to a broken page — and raising the bar is what caused that overlap, so the fix belongs on this side. */ body .gh-shorts-root .gh-shorts-bottom { padding-bottom: calc(24px + var(--gh-bnav-h)); } body .gh-shorts-root[data-layout="mobile"] .gh-shorts-bottom { padding-bottom: calc(24px + var(--gh-bnav-h)); } } /* --------------------------------------------------------------------------------- Rail small print (gh-legal) Core renders every section as `