.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{
--bg:#0B0B0D; --bg2:#111115; --panel:#141418; --card:#17171D; --card-h:#1E1E26; --surface:#252530;
--gold:#BBA777; --gold-h:#D4C49A; --gold-m:#8A7C58;
--blue:#00A3E0; --blue-h:#33B8E8;
--tx:#E8E6E1; --tx-m:#A0A0AC; --tx-d:#6A6A78;
--green:#4ADE80; --red:#D40000;
--line:rgba(187,167,119,.18);
--ease:cubic-bezier(0.16,1,0.3,1);
--pad:26px; --card-w:288px; --header:56px;
position:relative;
background:var(--bg); color:var(--tx);
font-family:'DM Sans',system-ui,sans-serif; font-size:15px; line-height:1.5;
-webkit-font-smoothing:antialiased;
padding:26px 0 10px;
}
#gh-home *{box-sizing:border-box;margin:0;padding:0}
#gh-home::before{ /* grain */
content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#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(--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 ============ */
#gh-home .ghh-chipbar{position:sticky;top:var(--header);z-index:80;background:rgba(11,11,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:9px;padding:12px var(--pad);overflow-x:auto;scrollbar-width:none}
#gh-home .ghh-chipbar::-webkit-scrollbar{display:none}
#gh-home .ghh-chip{flex:none;padding:8px 15px;border-radius:100px;background:var(--card);border:1px solid rgba(255,255,255,.05);color:var(--tx-m);font-size:13px;font-weight:500;transition:.18s var(--ease);white-space:nowrap}
#gh-home .ghh-chip:hover{background:var(--card-h);color:var(--tx)}
/* ============ SHELVES ============ */
#gh-home .ghh-shelf-head .ghh-kick{font-family:'Space Mono';font-size:11px;color:var(--gold-m);letter-spacing:.13em;text-transform:uppercase;align-self:center}
#gh-home .ghh-shelf-head .ghh-rule{flex:1;height:1px;background:var(--line);margin-bottom:6px}
#gh-home .ghh-shelf-head .ghh-viewall{font-size:13px;color:var(--tx-m);font-weight:500;white-space:nowrap;transition:.2s var(--ease);align-self:center}
#gh-home .ghh-shelf-head .ghh-viewall:hover{color:var(--gold)}
#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:10px;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(--tx);fill:none}
#gh-home .ghh-thumb .ghh-badge{position:absolute;bottom:8px;right:8px;background:rgba(11,11,13,.85);color:#fff;font-family:'Space Mono';font-size:11px;padding:2px 6px;border-radius:4px}
#gh-home .ghh-thumb .ghh-exclusive{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;background:rgba(11,11,13,.78);color:var(--gold);font-family:'Space Mono';font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.06em;border:1px solid rgba(187,167,119,.4)}
#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(--gold)}
#gh-home .ghh-card-meta{display:flex;gap:11px;padding:11px 2px 0}
#gh-home .ghh-card-meta .ghh-ch-av{width:33px;height:33px;border-radius:100px;flex:none;background:linear-gradient(135deg,var(--surface),var(--card-h));display:grid;place-items:center;font-family:'Space Mono';font-weight:700;font-size:11px;color:var(--gold);border:1px solid rgba(255,255,255,.06)}
#gh-home .ghh-card-txt{min-width:0}
#gh-home .ghh-card-title{font-size:14px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#gh-home .ghh-card-ch{font-size:12.5px;color:var(--tx-m);margin-top:5px;display:flex;align-items:center;gap:5px}
#gh-home .ghh-card-ch .ghh-verif{color:var(--blue);flex:none}
#gh-home .ghh-card-stats{font-family:'Space Mono';font-size:11px;color:var(--tx-d);margin-top:3px}
#gh-home .ghh-card-reason{font-family:'Space Mono';font-size:10.5px;color:var(--gold-m);margin-top:5px}
/* shop card (VAPR™) */
#gh-home .ghh-shop-card{flex:none;width:210px;scroll-snap-align:start;background:var(--card);border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;transition:.3s var(--ease)}
#gh-home .ghh-shop-card:hover{transform:translateY(-4px);border-color:rgba(187,167,119,.35)}
#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(--tx);fill:none}
#gh-home .ghh-shop-thumb .ghh-vtag{position:absolute;top:9px;left:9px;font-family:'Space Mono';font-size:9px;font-weight:700;letter-spacing:.09em;color:var(--gold);border:1px solid var(--gold-m);border-radius:4px;padding:2px 6px}
#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(--tx-d);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(--gold)}
#gh-home .ghh-shop-buy .ghh-shopbtn{background:var(--blue);color:#04121a;font-weight:700;font-size:12px;padding:6px 12px;border-radius:6px;transition:.2s var(--ease)}
#gh-home .ghh-shop-buy .ghh-shopbtn:hover{background:var(--blue-h)}
/* 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(--surface);
background: rgba(11, 11, 13, 0.85); color: var(--tx); 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 */
#gh-home .ghh-shorts-shelf .ghh-track { gap: 12px; }
/* ---- shorts ---- */
#gh-home .ghh-short-card { flex: 0 0 160px; 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(--card);
}
#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: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---- signup CTA ---- */
#gh-home .ghh-cta {
position: relative; border: 1px solid var(--gold); 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(--tx); }
#gh-home .ghh-cta p { font-family: 'DM Sans', sans-serif; color: var(--tx-m); margin: 0 0 20px; }
#gh-home .ghh-cta-btn {
display: inline-block; background: var(--gold); color: var(--bg); text-decoration: none;
font-weight: 700; padding: 12px 28px; border-radius: 6px;
}
#gh-home .ghh-cta-btn:hover { background: var(--gold-h); }
#gh-home .ghh-cta-dismiss {
position: absolute; top: 8px; right: 12px; background: none; border: 0;
color: var(--tx-d); 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(--tx-m); text-align: center; }
/**
* 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;
}
#left-menu .menu-block li + li {
margin-top: 0.5rem;
}
/* Community badges. The rail's icon box is 22x22 (menu.component.scss sets
`.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: 22px;
height: 22px;
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: #12100a;
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: #17171D;
}
/* ---------------------------------------------------------------------------------
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: #A0A0AC;
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: #E8E6E1;
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: #BBA777;
}
#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));
}
}
/* Greyhive Select2 + controls for Recently Added Curation admin panel */
#gh-rac-admin-panel .card-body {
position: relative;
}
.gh-rac-admin-hidden {
display: none !important;
}
.gh-rac-admin-root {
margin-top: 0.5rem;
}
.gh-rac-header h4 {
font-weight: 600;
}
#gh-rac-admin-panel .select2-container {
width: 100% !important;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single,
#gh-rac-admin-panel .select2-container--default .select2-selection--multiple {
background-color: #2a2a2e;
border: 1px solid #52525b;
border-radius: 6px;
min-height: 42px;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single {
height: 38px;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #f4f4f5;
line-height: 36px;
padding-left: 8px;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #bba777 transparent transparent transparent;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #a1a1aa;
}
#gh-rac-admin-panel .select2-container--default.select2-container--focus .select2-selection--single,
#gh-rac-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-rac-admin-panel .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #3a3a40;
border: 1px solid #bba777;
color: #f4f4f5;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #bba777;
}
#gh-rac-admin-panel .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #f4f4f5;
}
#gh-rac-admin-panel .select2-container--default.select2-container--focus .select2-selection--multiple,
#gh-rac-admin-panel .select2-container--default.select2-container--open .select2-selection--multiple {
border-color: #bba777;
box-shadow: 0 0 0 0.15rem rgba(187, 167, 119, 0.25);
}
#gh-rac-admin-panel .select2-container--default .select2-search--inline .select2-search__field,
#gh-rac-admin-panel .select2-container--default .select2-search--dropdown .select2-search__field {
color: #f4f4f5;
background-color: #1e1e22;
border: 1px solid #52525b;
border-radius: 4px;
}
#gh-rac-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-rac-admin-panel .select2-container--default .select2-selection__clear {
color: #bba777;
margin-right: 4px;
}
#gh-rac-admin-panel .select2-dropdown {
background-color: #2a2a2e !important;
border: 1px solid #52525b !important;
}
#gh-rac-admin-panel .select2-container--default .select2-results > .select2-results__options {
background-color: #2a2a2e;
}
#gh-rac-admin-panel .select2-container--default .select2-results__option {
background-color: #2a2a2e;
color: #f4f4f5;
}
#gh-rac-admin-panel .select2-container--default .select2-results__option--selectable {
color: #f4f4f5;
}
#gh-rac-admin-panel .select2-container--default .select2-results__option--highlighted,
#gh-rac-admin-panel .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #bba777 !important;
color: #121212 !important;
}
#gh-rac-admin-panel .select2-container--default .select2-results__option--selected,
#gh-rac-admin-panel .select2-container--default .select2-results__option[aria-selected='true'] {
background-color: #3a3a40 !important;
color: #f4f4f5 !important;
}
/* Enable checkbox — match discover-page dark admin UI */
#gh-rac-admin-panel .form-check-input {
width: 1.35rem;
height: 1.35rem;
margin-top: 0.2rem;
border: 2px solid #bba777;
background-color: #2a2a2e;
cursor: pointer;
}
#gh-rac-admin-panel .form-check-input:checked {
background-color: #bba777;
border-color: #bba777;
}
#gh-rac-admin-panel .form-check-input:focus {
border-color: #bba777;
box-shadow: 0 0 0 0.2rem rgba(187, 167, 119, 0.35);
}
#gh-rac-admin-panel .form-check-label {
cursor: pointer;
}
#gh-rac-admin-panel .form-control[type='number'] {
background-color: #2a2a2e;
border: 1px solid #52525b;
color: #f4f4f5;
}
#gh-rac-admin-panel .form-control[type='number']:focus {
background-color: #2a2a2e;
border-color: #bba777;
color: #f4f4f5;
box-shadow: 0 0 0 0.15rem rgba(187, 167, 119, 0.25);
}
/* peertube-plugin-blog-management — Greyhive blog (reference: category / post / featured cards) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Mono:wght@400;700&family=Bebas+Neue&display=swap');
.gh-blog-root {
--gh-ease: cubic-bezier(0.16, 1, 0.3, 1);
--gh-c-bg: #0b0b0d;
--gh-c-bg-2: #111115;
--gh-c-bg-card: #17171d;
--gh-c-bg-card-hover: #1e1e26;
--gh-c-surface: #252530;
--gh-c-border: rgba(255, 255, 255, 0.06);
--gh-c-border-hover: rgba(255, 255, 255, 0.12);
--gh-c-border-gold: rgba(187, 167, 119, 0.3);
--gh-c-text: #e8e6e1;
--gh-c-text-mid: #a0a0ac;
--gh-c-text-dim: #b5b5cf;
--gh-c-gold: #bba777;
--gh-c-gold-light: #d4c49a;
--gh-c-gold-dark: #8a7c58;
--gh-font-display: 'Bebas Neue', sans-serif;
--gh-font-body: 'DM Sans', system-ui, sans-serif;
--gh-font-mono: 'Space Mono', ui-monospace, monospace;
min-height: 50vh;
padding-bottom: 5rem;
font-family: var(--gh-font-body);
color: var(--gh-c-text);
-webkit-font-smoothing: antialiased;
}
.gh-blog-inner {
/* max-width: 1200px; */
margin: 0 auto;
}
/* Main blog hero — matches reference .hero / .hero-sub */
.gh-blog-hero {
padding: 5px 0 35px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--gh-c-border);
margin-bottom: 0;
text-align: left;
}
.gh-blog-hero::before {
content: '';
position: absolute;
top: -200px;
right: -100px;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(187, 167, 119, 0.05) 0%, transparent 65%);
pointer-events: none;
}
.gh-blog-hero-title {
font-family: var(--gh-font-display);
font-size: clamp(52px, 7vw, 96px);
text-transform: uppercase;
line-height: 0.92;
font-weight: bold;
margin: 0 0 20px;
position: relative;
z-index: 1;
letter-spacing: 3px;
}
.gh-blog-hero-title span,
.gh-blog-hero-title em,
.gh-blog-hero-title strong,
.gh-blog-hero-title b,
.gh-blog-hero-title i {
font-style: normal;
font-weight: inherit;
color: var(--gh-c-gold);
}
.gh-blog-hero-sub {
font-family: var(--gh-font-body);
font-size: 16px;
color: var(--gh-c-text-mid);
line-height: 1.75;
max-width: 560px;
margin: 0 0 36px;
position: relative;
z-index: 1;
font-weight: normal;
}
/* Home page exact-style shell */
.gh-blog-home-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
}
.gh-blog-home-hero-eyebrow {
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
}
.gh-blog-home-hero-eyebrow::before {
content: '';
width: 20px;
height: 1px;
background: var(--gh-c-gold-dark);
}
.gh-blog-home-hero-meta {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.gh-blog-home-hero-meta-item {
font-family: var(--gh-font-mono);
font-size: 12px;
color: var(--gh-c-text-dim);
letter-spacing: 0.1em;
display: flex;
align-items: center;
gap: 8px;
}
.gh-blog-home-hero-meta-item::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gh-c-gold-dark);
}
.gh-blog-home-hero-meta-item:first-child::before {
display: none;
}
/* Home hero shares 1200px shell with filter + grid; tame vw-based title on ultrawide */
.gh-blog-home-hero-title {
font-size: clamp(36px, 4.2vw, 72px);
letter-spacing: 2px;
}
.gh-blog-home-hero-sub {
max-width: min(560px, 100%);
}
.gh-blog-home-filter-bar {
background: var(--gh-c-bg-2);
border-top: 1px solid var(--gh-c-border);
border-bottom: 1px solid var(--gh-c-border);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(12px);
}
.gh-blog-home-filter-inner {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.gh-blog-home-search-wrap {
position: relative;
flex: 1;
min-width: 220px;
}
.gh-blog-home-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--gh-c-text-dim);
font-size: 14px;
pointer-events: none;
}
.gh-blog-home-search-input {
width: 100%;
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
border-radius: 5px;
padding: 10px 16px 10px 38px;
font-family: var(--gh-font-body);
font-size: 13px;
color: var(--gh-c-text);
outline: none;
transition: border-color 0.2s;
}
.gh-blog-home-search-input::placeholder {
color: var(--gh-c-text-dim);
}
.gh-blog-home-search-input:focus {
border-color: var(--gh-c-gold);
}
.gh-blog-home-filter-cats {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.gh-blog-home-filter-cat {
font-family: var(--gh-font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 4px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text-dim);
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
text-decoration: none;
display: inline-block;
box-sizing: border-box;
}
.gh-blog-home-filter-cat:visited {
color: var(--gh-c-text-dim);
}
.gh-blog-home-filter-cat.active:visited {
color: var(--gh-c-gold);
}
.gh-blog-home-filter-cat:hover {
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-blog-home-filter-cat.active {
background: rgba(187, 167, 119, 0.1);
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-blog-home-featured {
padding: 46px 0 0;
}
/* Blog home — latest posts grid (6 recent), mirrors reference .posts-grid / .post-card */
.gh-blog-home-latest-section {
padding: 56px 0 24px;
}
.gh-blog-home-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.gh-blog-home-post-card {
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
display: block;
color: inherit;
transition: border-color 0.3s ease, background 0.3s ease;
}
.gh-blog-home-post-card:hover {
border-color: var(--gh-c-border-hover);
background: var(--gh-c-bg-card-hover);
}
.gh-blog-home-post-img {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--gh-c-surface);
position: relative;
overflow: hidden;
}
.gh-blog-home-post-img-el {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s var(--gh-ease);
}
.gh-blog-home-post-card:hover .gh-blog-home-post-img-el {
transform: scale(1.04);
}
.gh-blog-home-post-img-placeholder {
width: 100%;
height: 100%;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--gh-font-display);
font-size: 13px;
letter-spacing: 2px;
color: var(--gh-c-text-dim);
}
.gh-blog-home-post-body {
padding: 20px;
}
.gh-blog-home-post-cat {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin-bottom: 8px;
}
.gh-blog-home-post-title {
font-family: var(--gh-font-display);
font-size: clamp(18px, 2vw, 24px);
letter-spacing: 0.5px;
line-height: 1.1;
margin-bottom: 10px;
color: var(--gh-c-text);
font-weight: 400;
}
.gh-blog-home-post-title em {
font-style: normal;
color: var(--gh-c-gold);
}
.gh-blog-home-post-excerpt {
font-size: 13px;
color: var(--gh-c-text-mid);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1024px) {
.gh-blog-home-posts-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.gh-blog-home-posts-grid {
grid-template-columns: 1fr;
}
.gh-blog-home-latest-section {
padding: 40px 0 16px;
}
}
.gh-blog-home-categories-section {
padding: 10px 0;
}
.gh-blog-home-categories-head {
margin-bottom: 40px;
}
.gh-blog-home-sec-title {
font-family: var(--gh-font-display);
font-size: clamp(34px, 4.2vw, 54px);
letter-spacing: 2px;
line-height: 1;
margin-bottom: 16px;
}
.gh-blog-home-sec-title em {
font-style: normal;
color: var(--gh-c-gold);
}
.gh-blog-home-sec-sub {
font-size: 18px;
color: var(--gh-c-text-mid);
line-height: 1.75;
max-width: 600px;
margin-bottom: 0;
}
.gh-blog-home-cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gh-blog-home-cat-card {
padding: 28px;
border-radius: 10px;
}
.gh-blog-home-cat-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 14px;
}
.gh-blog-home-cat-count {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
background: var(--gh-c-surface);
padding: 4px 10px;
border-radius: 100px;
}
.gh-blog-home-cat-count.has-posts {
color: var(--gh-c-gold);
background: rgba(187, 167, 119, 0.1);
}
.gh-blog-home-cat-arrow {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--gh-font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
margin-top: auto;
padding-top: 16px;
transition: color 0.2s, gap 0.2s;
}
.gh-blog-home-cat-card:hover .gh-blog-home-cat-arrow {
color: var(--gh-c-gold);
gap: 10px;
}
.gh-blog-home-empty-state {
display: none;
text-align: center;
padding: 80px 20px;
}
.gh-blog-home-empty-kicker {
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin-bottom: 16px;
}
.gh-blog-home-empty-title {
font-family: var(--gh-font-display);
font-size: 36px;
letter-spacing: 1px;
margin-bottom: 12px;
text-transform: uppercase;
}
.gh-blog-home-empty-sub {
font-size: 16px;
color: var(--gh-c-text-mid);
max-width: 400px;
margin: 0 auto 32px;
}
.gh-blog-home-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
font-family: var(--gh-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
border-radius: 5px;
border: none;
cursor: pointer;
transition: all 0.3s var(--gh-ease);
white-space: nowrap;
line-height: 1.4;
}
.gh-blog-home-btn-gold {
background: var(--gh-c-gold);
color: #0b0b0d !important;
}
.gh-blog-home-btn-gold:hover {
background: var(--gh-c-gold-light);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(187, 167, 119, 0.35);
}
.gh-blog-home-btn-arrow::after {
content: '→';
margin-left: 4px;
transition: transform 0.2s;
}
.gh-blog-home-btn-arrow:hover::after {
transform: translateX(3px);
}
.gh-blog-kicker {
display: inline-block;
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin-bottom: 0.35rem;
}
.gh-blog-eyebrow {
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.gh-blog-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: var(--gh-c-gold-dark);
}
/* Category index: each tile max ~240px wide (no stretch on ultrawide); grid caps at 5 columns */
.gh-blog-cat-grid-fluid {
--gh-cat-col-max: 320px;
--gh-cat-col-min: 300px;
display: grid;
gap: 12px;
margin-top: 2rem;
justify-content: start;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(var(--gh-cat-col-min), var(--gh-cat-col-max)));
}
@media (max-width: 640px) {
.gh-blog-cat-grid-fluid {
grid-template-columns: 1fr;
max-width: none;
}
}
.gh-blog-cat-card {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 100%;
padding: 20px;
border-radius: 8px;
border: 1px solid var(--gh-c-border);
background: var(--gh-c-bg-card);
text-decoration: none;
color: inherit;
transition: border-color 0.3s ease, background 0.3s ease;
}
.gh-blog-cat-card:hover {
border-color: var(--gh-c-border-gold);
background: var(--gh-c-bg-card-hover);
}
.gh-blog-cat-card:hover .gh-blog-cat-name {
color: var(--gh-c-gold);
}
.gh-blog-cat-card--compact {
min-height: 0;
}
.gh-blog-cat-num {
font-family: var(--gh-font-mono);
font-size: 28px;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
color: rgb(187 167 119 / 30%);
}
.gh-blog-cat-name {
font-family: var(--gh-font-display);
font-size: 18px;
letter-spacing: 1px;
line-height: 1.15;
margin: 0;
color: var(--gh-c-text);
text-transform: uppercase;
transition: color 0.2s ease;
}
.gh-blog-root .gh-blog-cat-desc {
font-family: var(--gh-font-body);
font-size: 13px;
font-weight: normal;
color: var(--gh-c-text-mid);
line-height: 1.6;
margin: 0 0 0.5rem;
min-height: 0;
flex: 1;
}
.gh-blog-cat-count {
margin-top: auto;
padding-top: 4px;
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
font-weight: 400;
}
/* Featured block — .featured-post */
.gh-blog-featured {
margin: 1.5rem 0 2rem;
}
.gh-blog-featured-link {
text-decoration: none;
color: inherit;
display: block;
}
.gh-blog-featured-link:hover .gh-blog-feature-img {
transform: scale(1.04);
}
.gh-blog-featured-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--gh-c-border-gold);
background: var(--gh-c-bg-card);
transition: border-color 0.3s ease, background 0.3s ease;
}
.gh-blog-featured-link:hover .gh-blog-featured-grid {
background: var(--gh-c-bg-card-hover);
}
@media (max-width: 1024px) {
.gh-blog-featured-grid {
grid-template-columns: 1fr;
}
}
.gh-blog-featured-visual {
position: relative;
min-height: 280px;
background: var(--gh-c-surface);
overflow: hidden;
}
@media (max-width: 1024px) {
.gh-blog-featured-visual {
min-height: 220px;
}
}
.gh-blog-featured-visual--placeholder {
min-height: 200px;
}
.gh-blog-featured-visual--has-img .gh-blog-feature-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--gh-ease);
}
.gh-blog-featured-badge {
position: absolute;
top: 16px;
left: 16px;
background: rgba(11, 11, 13, 0.85);
border: 1px solid var(--gh-c-border-gold);
border-radius: 4px;
padding: 5px 12px;
font-family: var(--gh-font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gh-c-gold);
pointer-events: none;
}
.gh-blog-featured-text {
padding: 36px 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.gh-blog-featured-label {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin-bottom: 12px;
}
.gh-blog-featured-title {
font-family: var(--gh-font-display);
line-height: 1.05;
margin: 0 0 14px;
font-weight: bold;
color: var(--gh-c-text);
text-transform: uppercase;
}
.gh-blog-featured-excerpt {
font-size: 15px;
color: var(--gh-c-text-mid);
line-height: 1.7;
margin: 0 0 20px;
font-weight: normal;
}
.gh-blog-featured-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 16px;
padding-top: 16px;
border-top: 1px solid var(--gh-c-border);
}
.gh-blog-featured-author,
.gh-blog-featured-date {
font-size: 12px;
color: var(--gh-c-text-dim);
}
.gh-blog-featured-read {
font-family: var(--gh-font-mono);
font-size: 10px;
color: var(--gh-c-text-dim);
letter-spacing: 0.08em;
margin-left: auto;
}
@media (max-width: 540px) {
.gh-blog-featured-read {
margin-left: 0;
width: 100%;
}
}
.gh-blog-list-controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin: 1.5rem 0;
}
.gh-blog-search {
flex: 1 1 220px;
max-width: 360px;
}
.gh-blog-sort-btns {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.gh-blog-sort-btns .button-sort {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text-dim);
transition: all 0.2s ease;
}
.gh-blog-sort-btns .button-sort:hover {
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-blog-sort-btns .button-sort.is-active {
background: rgba(187, 167, 119, 0.1);
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
/* Post grid — .posts-grid / .post-card */
.gh-blog-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 1rem;
}
@media (max-width: 1024px) {
.gh-blog-card-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.gh-blog-card-grid {
grid-template-columns: 1fr;
}
}
.gh-blog-card {
display: flex;
flex-direction: column;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--gh-c-border);
background: var(--gh-c-bg-card);
text-decoration: none;
color: inherit;
transition: border-color 0.3s ease, background 0.3s ease;
}
.gh-blog-card:hover {
border-color: var(--gh-c-border-hover);
background: var(--gh-c-bg-card-hover);
}
.gh-blog-card:hover .gh-blog-card-img {
transform: scale(1.04);
}
.gh-blog-card-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--gh-c-surface);
transition: transform 0.5s var(--gh-ease);
}
.gh-blog-card-img--placeholder {
min-height: 160px;
background: linear-gradient(135deg, var(--gh-c-surface), var(--gh-c-bg-2));
}
.gh-blog-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.gh-blog-card-title {
font-family: var(--gh-font-display);
font-size: 22px;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 10px;
font-weight: 400;
color: var(--gh-c-text);
}
.gh-blog-card-excerpt {
font-size: 13px;
color: var(--gh-c-text-mid);
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gh-blog-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
padding-top: 14px;
border-top: 1px solid var(--gh-c-border);
margin-top: auto;
}
.gh-blog-card-author,
.gh-blog-card-date {
font-size: 11px;
color: var(--gh-c-text-dim);
}
.gh-blog-card-read {
font-family: var(--gh-font-mono);
font-size: 10px;
color: var(--gh-c-text-dim);
letter-spacing: 0.08em;
margin-left: auto;
}
@media (max-width: 480px) {
.gh-blog-card-read {
margin-left: 0;
width: 100%;
}
}
.gh-blog-empty {
text-align: center;
padding: 3rem 1rem;
border-radius: 8px;
border: 1px dashed var(--gh-c-border-hover);
color: var(--gh-c-text-mid);
}
/* Related categories — .related-cats-grid */
.gh-blog-related {
margin-top: 3rem;
padding-top: 3.75rem;
border-top: 1px solid var(--gh-c-border);
}
.gh-blog-related-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 24px;
}
.gh-blog-btn-all-cats {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
font-family: var(--gh-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
border-radius: 5px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text);
transition: border-color 0.2s ease, color 0.2s ease;
}
.gh-blog-btn-all-cats::after {
content: '→';
transition: transform 0.2s ease;
}
.gh-blog-btn-all-cats:hover {
border-color: #00a3e0;
color: #00a3e0;
}
.gh-blog-btn-all-cats:hover::after {
transform: translateX(3px);
}
.gh-blog-related-grid {
--gh-cat-col-max: 240px;
--gh-cat-col-min: 200px;
display: grid;
gap: 12px;
justify-content: start;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(var(--gh-cat-col-min), var(--gh-cat-col-max)));
}
.gh-blog-related-empty {
grid-column: 1 / -1;
text-align: center;
margin: 0;
}
@media (max-width: 640px) {
.gh-blog-related-grid {
grid-template-columns: 1fr;
max-width: none;
}
}
.gh-blog-cta-sentinel {
height: 1px;
margin: 0;
padding: 0;
pointer-events: none;
}
.gh-blog-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
background: rgba(11, 11, 13, 0.94);
backdrop-filter: blur(16px);
border-top: 1px solid var(--gh-c-border);
transform: translateY(100%);
transition: transform 0.5s var(--gh-ease);
}
.gh-blog-sticky-cta--visible {
transform: translateY(0);
}
.gh-blog-sticky-cta p {
margin: 0;
font-size: 13px;
color: var(--gh-c-text-mid);
}
.gh-blog-sticky-cta p strong {
color: #00a3e0;
font-weight: 600;
}
.gh-blog-sticky-cta-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 5px;
background: var(--gh-c-gold);
color: var(--gh-c-bg) !important;
font-family: var(--gh-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.3s var(--gh-ease), transform 0.3s var(--gh-ease), box-shadow 0.3s ease;
}
.gh-blog-sticky-cta-link:hover {
background: var(--gh-c-gold-light);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(187, 167, 119, 0.35);
color: var(--gh-c-bg) !important;
}
.gh-blog-sticky-cta-link::after {
content: '→';
transition: transform 0.2s ease;
}
.gh-blog-sticky-cta-link:hover::after {
transform: translateX(3px);
}
.gh-blog-article-title {
font-family: var(--gh-font-display);
font-size: clamp(52px,7vw,90px);
letter-spacing: 3px;
font-weight: bold;
margin: 0.5rem 0 1rem;
line-height: .92;
}
.gh-blog-article-title .gh-blog-title-gold {
color: var(--gh-c-gold);
font-style: normal;
}
.article-excerpt {
font-family: var(--gh-font-body);
font-size: 18px;
color: var(--gh-c-text-mid);
line-height: 1.75;
}
.gh-blog-breadcrumb a {
color: var(--gh-c-text-dim);
text-decoration: none;
transition: color 0.2s ease;
}
.gh-blog-breadcrumb a:hover {
color: var(--gh-c-gold);
}
.gh-blog-breadcrumb--bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 1rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--gh-c-border);
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
}
.gh-blog-bc-sep {
opacity: 0.4;
user-select: none;
}
.gh-blog-bc-current {
color: var(--gh-c-text-mid);
}
/* Category listing page shell */
.gh-blog-inner.gh-blog-category-page {
background: var(--gh-c-bg-2);
color: var(--gh-c-text);
padding: 1.5rem clamp(1rem, 3vw, 1.75rem) 2.25rem;
border-radius: 10px;
border: 1px solid var(--gh-c-border);
}
.gh-blog-category-page .gh-blog-card {
background: var(--gh-c-bg-card);
}
.gh-blog-category-page .gh-blog-featured-grid {
background: var(--gh-c-bg-card);
}
.gh-blog-category-page .gh-blog-empty {
background: rgba(0, 0, 0, 0.2);
border-style: solid;
border-color: var(--gh-c-border);
}
.gh-blog-cat-header .gh-blog-kicker {
margin-bottom: 8px;
}
.gh-blog-cat-headline {
font-family: var(--gh-font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: bold;
margin: 0 0 0.5rem;
text-transform: uppercase;
}
.gh-blog-cat-header .gh-blog-cat-desc {
font-size: 1rem;
max-width: 36rem;
}
.gh-blog-cat-total {
font-family: var(--gh-font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gh-c-gold);
margin: 0.75rem 0 0;
}
.gh-blog-article-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--gh-c-text-mid);
}
.gh-blog-author-av {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.gh-blog-article-hero img {
width: 100%;
max-height: 600px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.gh-blog-video-embed-wrap {
margin: 0 0 1.5rem;
border-radius: 8px;
overflow: hidden;
background: #000;
}
.gh-blog-article-body {
line-height: 1.65;
font-size: 1.05rem;
}
.gh-blog-article-body img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* Article category links — same card language as rel-cat */
.gh-blog-tags {
margin: 2rem 0 1rem;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.gh-blog-tag {
display: inline-flex;
align-items: center;
padding: 12px 18px;
border-radius: 8px;
border: 1px solid var(--gh-c-border);
background: var(--gh-c-bg-card);
font-family: var(--gh-font-display);
font-size: 15px;
letter-spacing: 0.5px;
text-decoration: none;
color: var(--gh-c-text);
transition: border-color 0.3s ease, background 0.3s ease, color 0.2s ease;
}
.gh-blog-tag:hover {
border-color: var(--gh-c-border-gold);
background: var(--gh-c-bg-card-hover);
color: var(--gh-c-gold);
}
.gh-blog-author-bio {
margin: 2rem 0;
padding: 1.25rem 1.35rem;
border-radius: 8px;
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
}
.gh-blog-author-bio h2 {
font-family: var(--gh-font-display);
font-size: 1.25rem;
letter-spacing: 0.04em;
font-weight: 400;
margin: 0 0 1rem;
color: var(--gh-c-text);
}
.gh-blog-author-bio-card {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.gh-blog-author-bio-av {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--gh-c-border-gold);
}
.gh-blog-author-bio-col {
flex: 1;
min-width: 0;
}
.gh-blog-author-bio-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--gh-c-text);
margin-bottom: 0.35rem;
line-height: 1.3;
}
.gh-blog-author-bio-body {
margin: 0;
font-size: 0.95rem;
color: var(--gh-c-text-mid);
line-height: 1.65;
}
.gh-blog-related-posts h2 {
font-family: var(--gh-font-display);
font-size: 1.25rem;
letter-spacing: 0.04em;
font-weight: 400;
margin-bottom: 1rem;
}
.gh-blog-channel-miniature .channel {
max-width: 100%;
}
.plugin-peertube-video-embed.gh-blog-peertube-iframe,
.gh-blog-peertube-iframe {
display: block;
max-width: 100%;
}
@media (max-width: 1024px) {
.gh-blog-home-cat-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.gh-blog-home-cat-grid {
grid-template-columns: 1fr;
}
.gh-blog-home-filter-cats {
display: none;
}
}
/* -------------------------------------------------------------------------- */
/* Category page (reference UI: hero, filter, featured, grid, empty, related) */
/* -------------------------------------------------------------------------- */
.gh-blog-sticky-cta-outline {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 5px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text) !important;
font-family: var(--gh-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none !important;
transition: border-color 0.2s ease, color 0.2s ease;
}
.gh-blog-sticky-cta-outline:hover {
border-color: #00a3e0;
color: #00a3e0 !important;
}
.gh-blog-cat-page .rv {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--gh-ease), transform 0.7s var(--gh-ease);
}
.gh-blog-cat-page .rv.vis {
opacity: 1;
transform: translateY(0);
}
.gh-cat-page-breadcrumb-bar {
padding: 18px 0;
border-bottom: 1px solid var(--gh-c-border);
}
.gh-cat-page-bc {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
}
.gh-cat-page-bc a {
color: var(--gh-c-text-dim);
text-decoration: none;
transition: color 0.2s ease;
}
.gh-cat-page-bc a:hover {
color: var(--gh-c-gold);
}
.gh-cat-page-bc-sep {
opacity: 0.4;
}
.gh-cat-page-bc-current {
color: var(--gh-c-text-mid);
}
.gh-cat-page-hero {
padding: 64px 0 56px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--gh-c-border);
}
.gh-cat-page-hero::before {
content: '';
position: absolute;
top: -200px;
right: -100px;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(187, 167, 119, 0.05) 0%, transparent 65%);
pointer-events: none;
}
.gh-cat-page-hero-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.gh-cat-page-hero-left {
flex: 1;
min-width: 280px;
}
.gh-cat-page-title {
font-family: var(--gh-font-display);
font-size: clamp(52px, 7vw, 90px);
line-height: 0.92;
letter-spacing: 3px;
margin: 0 0 16px;
text-transform: uppercase;
font-weight: bold;
}
.gh-cat-page-title em {
font-style: normal;
color: var(--gh-c-gold);
}
.gh-cat-page-desc {
font-size: 18px;
color: var(--gh-c-text-mid);
line-height: 1.75;
max-width: 580px;
margin: 0 0 24px;
}
.gh-cat-page-meta {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.gh-cat-page-meta-item {
font-family: var(--gh-font-mono);
font-size: 12px;
color: var(--gh-c-text-dim);
letter-spacing: 0.1em;
display: flex;
align-items: center;
gap: 8px;
}
.gh-cat-page-meta-item::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gh-c-gold-dark);
}
.gh-cat-page-meta-item--highlight {
color: var(--gh-c-gold);
}
.gh-cat-page-meta-item--highlight::before {
display: none;
}
.gh-cat-page-hero-right {
flex-shrink: 0;
}
.gh-cat-page-num-display {
font-family: var(--gh-font-display);
font-size: clamp(80px, 12vw, 160px);
color: rgba(187, 167, 119, 0.07);
line-height: 1;
letter-spacing: 4px;
user-select: none;
}
.gh-cat-filter-bar {
background: var(--gh-c-bg-2);
border-bottom: 1px solid var(--gh-c-border);
padding: 16px 0;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(12px);
}
.gh-cat-filter-inner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.gh-cat-search-wrap {
position: relative;
flex: 1;
min-width: 200px;
max-width: 320px;
}
.gh-cat-search-input {
width: 100%;
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
border-radius: 5px;
padding: 9px 14px 9px 36px;
font-family: var(--gh-font-body);
font-size: 13px;
color: var(--gh-c-text);
outline: none;
transition: border-color 0.2s ease;
}
.gh-cat-search-input::placeholder {
color: var(--gh-c-text-dim);
}
.gh-cat-search-input:focus {
border-color: var(--gh-c-gold);
}
.gh-cat-search-icon {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--gh-c-text-dim);
font-size: 14px;
pointer-events: none;
}
.gh-cat-filter-divider {
width: 1px;
height: 28px;
background: var(--gh-c-border);
flex-shrink: 0;
}
.gh-cat-sort-label {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
white-space: nowrap;
}
.gh-cat-sort-btns {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.gh-cat-sort-btn {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text-dim);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.gh-cat-sort-btn:hover {
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-cat-sort-btn.active {
background: rgba(187, 167, 119, 0.1);
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-cat-results-count {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
margin-left: auto;
white-space: nowrap;
}
.gh-cat-results-count span {
color: var(--gh-c-gold);
}
.gh-cat-posts-grid.gh-cat-grid-loading {
opacity: 0.45;
pointer-events: none;
transition: opacity 0.2s ease;
}
.gh-cat-grid-error {
grid-column: 1 / -1;
margin: 0;
padding: 24px;
text-align: center;
color: var(--gh-c-text-mid);
font-size: 14px;
}
.gh-cat-posts-section {
padding: 60px 0 80px;
}
.gh-cat-posts-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
gap: 16px;
}
.gh-cat-posts-heading {
font-family: var(--gh-font-display);
font-size: 28px;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
font-weight: bold;
line-height: 1.1;
}
.gh-cat-posts-heading-gold {
font-style: normal;
color: var(--gh-c-gold);
}
.gh-cat-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.gh-cat-post {
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, background 0.3s ease;
}
.gh-cat-post:hover {
border-color: var(--gh-c-border-hover);
background: var(--gh-c-bg-card-hover);
}
.gh-cat-post-img {
width: 100%;
aspect-ratio: 16 / 9;
background: var(--gh-c-surface);
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.gh-cat-post-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s var(--gh-ease);
}
.gh-cat-post:hover .gh-cat-post-img img {
transform: scale(1.04);
}
.gh-cat-post-img--ph {
background: var(--gh-c-surface);
}
.gh-cat-post-body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.gh-cat-post-title {
font-family: var(--gh-font-display);
font-size: 22px;
letter-spacing: 0.5px;
line-height: 1.1;
margin: 0 0 10px;
color: var(--gh-c-text);
text-transform: uppercase;
font-weight: bold;
}
.gh-cat-post-title .gh-blog-title-gold {
color: var(--gh-c-gold);
font-style: normal;
}
.gh-cat-post-excerpt {
font-size: 13px;
color: var(--gh-c-text-mid);
line-height: 1.6;
margin: 0 0 16px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gh-cat-post-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid var(--gh-c-border);
margin-top: auto;
}
.gh-cat-post-author,
.gh-cat-post-date {
font-size: 11px;
color: var(--gh-c-text-dim);
}
.gh-cat-post-read {
font-family: var(--gh-font-mono);
font-size: 10px;
color: var(--gh-c-text-dim);
letter-spacing: 0.08em;
margin-left: auto;
}
.gh-cat-no-results {
text-align: center;
padding: 48px 0;
}
.gh-cat-no-results p {
font-size: 16px;
color: var(--gh-c-text-dim);
}
.gh-cat-no-results strong {
color: var(--gh-c-text-mid);
}
.gh-cat-empty-state {
text-align: center;
padding: 80px 20px;
}
.gh-cat-empty-icon {
font-size: 48px;
margin-bottom: 20px;
opacity: 0.3;
}
.gh-cat-empty-state h3 {
font-family: var(--gh-font-display);
font-size: 36px;
letter-spacing: 1px;
margin: 0 0 12px;
color: var(--gh-c-text-mid);
}
.gh-cat-empty-state > p {
font-size: 16px;
color: var(--gh-c-text-dim);
line-height: 1.7;
max-width: 460px;
margin: 0 auto 28px;
}
.gh-cat-empty-notify {
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border-gold);
border-radius: 8px;
padding: 24px 28px;
max-width: 420px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.gh-cat-empty-notify p {
font-size: 13px;
color: var(--gh-c-text-mid);
margin: 0;
}
.gh-cat-empty-form {
display: flex;
gap: 8px;
width: 100%;
}
.gh-cat-empty-input {
flex: 1;
background: var(--gh-c-bg);
border: 1px solid var(--gh-c-border);
border-radius: 5px;
padding: 10px 14px;
font-family: var(--gh-font-body);
font-size: 13px;
color: var(--gh-c-text);
outline: none;
transition: border-color 0.2s ease;
}
.gh-cat-empty-input:focus {
border-color: var(--gh-c-gold);
}
.gh-cat-empty-btn {
padding: 10px 18px;
border-radius: 5px;
border: none;
background: var(--gh-c-gold);
color: var(--gh-c-bg);
font-family: var(--gh-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease;
}
.gh-cat-empty-btn:hover {
background: var(--gh-c-gold-light);
}
.gh-cat-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-top: 48px;
flex-wrap: wrap;
}
.gh-cat-pag-btn {
font-family: var(--gh-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text-dim);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.gh-cat-pag-btn:hover:not(:disabled) {
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-cat-pag-btn.active {
background: rgba(187, 167, 119, 0.1);
border-color: var(--gh-c-border-gold);
color: var(--gh-c-gold);
}
.gh-cat-pag-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.gh-cat-pag-wide {
width: auto;
padding: 0 16px;
}
.gh-cat-pag-ellipsis {
font-family: var(--gh-font-mono);
font-size: 11px;
color: var(--gh-c-text-dim);
padding: 0 4px;
}
.gh-cat-related {
padding: 60px 0;
border-top: 1px solid var(--gh-c-border);
}
.gh-cat-related-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
gap: 16px;
flex-wrap: wrap;
}
.gh-cat-related-eyebrow {
margin-bottom: 0 !important;
}
.gh-cat-btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
font-family: var(--gh-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 5px;
border: 1px solid var(--gh-c-border);
background: transparent;
color: var(--gh-c-text) !important;
transition: border-color 0.2s ease, color 0.2s ease;
}
.gh-cat-btn-outline::after {
content: '→';
transition: transform 0.2s ease;
}
.gh-cat-btn-outline:hover {
border-color: #00a3e0;
color: #00a3e0 !important;
}
.gh-cat-btn-outline:hover::after {
transform: translateX(3px);
}
.gh-cat-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.gh-cat-rel-card {
background: var(--gh-c-bg-card);
border: 1px solid var(--gh-c-border);
border-radius: 8px;
padding: 20px;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.3s ease, background 0.3s ease;
display: flex;
flex-direction: column;
gap: 6px;
}
.gh-cat-rel-card:hover {
border-color: var(--gh-c-border-gold);
background: var(--gh-c-bg-card-hover);
}
.gh-cat-rel-num {
font-family: var(--gh-font-display);
font-size: 28px;
color: rgba(187, 167, 119, 0.15);
line-height: 1;
}
.gh-cat-rel-name {
font-family: var(--gh-font-display);
font-size: 17px;
letter-spacing: 0.5px;
color: var(--gh-c-text);
text-transform: uppercase;
}
.gh-cat-rel-card:hover .gh-cat-rel-name {
color: var(--gh-c-gold);
}
.gh-cat-rel-count {
font-family: var(--gh-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gh-c-text-dim);
}
.gh-cat-related-empty {
grid-column: 1 / -1;
text-align: center;
margin: 0;
color: var(--gh-c-text-dim);
font-size: 14px;
}
@media (max-width: 1024px) {
.gh-cat-posts-grid {
grid-template-columns: 1fr 1fr;
}
.gh-cat-related-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.gh-cat-posts-grid {
grid-template-columns: 1fr;
}
.gh-cat-results-count {
margin-left: 0;
width: 100%;
}
.gh-cat-post-read {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 480px) {
.gh-cat-related-grid {
grid-template-columns: 1fr;
}
.gh-cat-empty-form {
flex-direction: column;
}
}
/* peertube-plugin-blog-management — admin plugin settings UI */
/*
* PeerTube always shows "Update plugin settings" when the server registers any setting.
* We register one display-only setting so the