/* ============================================================================ * holders.vote — illustrative community custom CSS * * A deliberately loud, kitchen-sink stylesheet that exercises every documented * `hv-*` styling hook so you can confirm the custom-CSS pipeline end to end. * Serve it over HTTPS (e.g. from this app at /example-custom.css) and set it as * a community's custom CSS URL. * * Everything is scoped to `[data-hv-community]`, so it applies to whichever * community loads it — no need to hard-code an ENS name while testing. To pin it * to one community, replace `[data-hv-community]` with * `[data-hv-community="your-name.eth"]`. * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. Design tokens — retheme the whole surface by overriding the app's vars. * The app already consumes these everywhere, so this alone recolors most UI. * ------------------------------------------------------------------------- */ [data-hv-community] { --hv-accent: #ff2d78; --hv-accent-strong: #d1155c; --hv-accent-soft: #2a0a18; --hv-up: #ffd000; --hv-down: #00e0ff; --hv-bg: #0a0612; --hv-surface: #160c22; --hv-surface-2: #201033; --hv-border: #3a1f57; --hv-border-strong: #58318a; --hv-text: #f4ecff; --hv-text-muted: #b9a7d6; --hv-text-faint: #7d6aa0; --hv-radius: 2px; --hv-radius-sm: 2px; --hv-radius-lg: 4px; --hv-shadow: 0 0 0 1px #3a1f57, 6px 6px 0 0 #ff2d78; --hv-shadow-lg: 12px 12px 0 0 #ff2d78; --hv-font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --hv-mono: ui-monospace, "SF Mono", Menlo, monospace; /* local tokens this sheet reuses */ --demo-glow: 0 0 18px rgba(255, 45, 120, 0.55); --demo-grid: linear-gradient(135deg, #160c22 0%, #1c0e2e 100%); /* Overriding --hv-bg above themes the whole viewport: the app paints a * full-bleed background layer on community pages that reads this token. No * need to touch or the page background directly. * * We still set `color` here, though. The app sets `color` up on , an * ANCESTOR of this wrapper, so it's computed from the :root tokens before our * overrides apply. Elements like .hv-post-title set no color of their own and * just inherit — so without this line they'd keep the root theme's text color * (dark, in light mode) over our dark cards, giving dark-on-dark titles. * Setting color here recomputes it from our tokens for the whole subtree. */ color: var(--hv-text); } /* A faint scanline backdrop so the page itself clearly changed, not just cards. */ [data-hv-community] { background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 3px, rgba(255, 45, 120, 0.035) 3px, rgba(255, 45, 120, 0.035) 4px ); } /* --------------------------------------------------------------------------- * 2. Community header — masthead, name, byline * ------------------------------------------------------------------------- */ [data-hv-community] .hv-community-header { position: relative; overflow: hidden; border: 2px solid var(--hv-accent); background: var(--demo-grid); box-shadow: var(--hv-shadow-lg); } /* Animated sheen sweeping across the masthead. */ [data-hv-community] .hv-community-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255, 45, 120, 0.18) 50%, transparent 70% ); transform: translateX(-100%); animation: hv-demo-sheen 4.5s ease-in-out infinite; pointer-events: none; } @keyframes hv-demo-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } [data-hv-community] .hv-community-name { font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(90deg, #ff2d78, #ffd000, #00e0ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } [data-hv-community] .hv-community-byline { font-style: italic; color: var(--hv-text-muted); border-left: 3px solid var(--hv-accent); padding-left: 10px; margin-top: 6px; } /* --------------------------------------------------------------------------- * 3. Feed layout * ------------------------------------------------------------------------- */ [data-hv-community] .hv-feed { gap: 18px; padding: 6px 0; } /* Demonstrate layout control: turn the feed into a masonry-ish 2-col grid on * wide screens, collapsing back to a single column when space is tight. */ @media (min-width: 900px) { [data-hv-community][data-hv-community-page="feed"] .hv-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } /* --------------------------------------------------------------------------- * 4. Cards — generic surface + the post card specifically * ------------------------------------------------------------------------- */ [data-hv-community] .hv-card { border: 1px solid var(--hv-border-strong); transition: transform 0.15s ease, box-shadow 0.15s ease; } [data-hv-community] .hv-post-card { position: relative; border-left: 4px solid var(--hv-accent); background: linear-gradient(var(--hv-surface), var(--hv-surface)) padding-box, linear-gradient(160deg, var(--hv-accent), transparent 60%) border-box; } [data-hv-community] .hv-post-card:hover { transform: translateY(-2px); box-shadow: var(--hv-shadow-lg); } /* Corner index tick — purely decorative, shows ::before/::after work. */ [data-hv-community] .hv-post-card::after { content: "▹"; position: absolute; top: 8px; right: 10px; color: var(--hv-accent); opacity: 0.6; } /* --------------------------------------------------------------------------- * 5. Post title / content / meta * ------------------------------------------------------------------------- */ [data-hv-community] .hv-post-title { font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; font-size: 1.05rem; } /* Underline that grows on hover of the title link. */ [data-hv-community] .hv-post-title-link { text-decoration: none; } [data-hv-community] .hv-post-title-link:hover .hv-post-title { color: var(--hv-accent); } [data-hv-community] .hv-post-meta { font-family: var(--hv-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; } /* `.hv-post-content` is the full post body (Markdown) on the post page. */ [data-hv-community] .hv-post-content { font-size: 1.02rem; line-height: 1.75; } [data-hv-community] .hv-post-content h1, [data-hv-community] .hv-post-content h2, [data-hv-community] .hv-post-content h3 { color: var(--hv-accent); border-bottom: 1px dashed var(--hv-border-strong); padding-bottom: 0.2em; } [data-hv-community] .hv-post-content a { color: var(--hv-down); text-underline-offset: 3px; } [data-hv-community] .hv-post-content blockquote { border-left: 3px solid var(--hv-accent); background: var(--hv-surface-2); margin: 1em 0; padding: 0.5em 1em; } [data-hv-community] .hv-post-content code { background: #000; color: var(--hv-up); padding: 0.1em 0.35em; border-radius: 3px; } [data-hv-community] .hv-post-content pre { background: #000; border: 1px solid var(--hv-border-strong); box-shadow: var(--demo-glow); } /* --------------------------------------------------------------------------- * 6. Vote control — arrows + score, including live pending state * ------------------------------------------------------------------------- */ [data-hv-community] .hv-vote { background: var(--hv-surface-2); border-radius: var(--hv-radius-lg); padding: 4px; } [data-hv-community] .hv-vote-btn { transition: transform 0.1s ease; } [data-hv-community] .hv-vote-btn:hover { transform: scale(1.25); color: var(--hv-accent); } [data-hv-community] .hv-vote-btn.is-up { color: var(--hv-up); filter: drop-shadow(0 0 6px var(--hv-up)); } [data-hv-community] .hv-vote-btn.is-down { color: var(--hv-down); filter: drop-shadow(0 0 6px var(--hv-down)); } [data-hv-community] .hv-vote-score { font-family: var(--hv-mono); font-weight: 700; } [data-hv-community] .hv-vote-score.is-up { color: var(--hv-up); } [data-hv-community] .hv-vote-score.is-down { color: var(--hv-down); } /* The control sets data-pending while a vote is in flight — pulse it. */ [data-hv-community] .hv-vote[data-pending="1"] { animation: hv-demo-pulse 0.7s ease-in-out infinite; } @keyframes hv-demo-pulse { 50% { opacity: 0.45; } } /* --------------------------------------------------------------------------- * 7. Buttons — base, primary, ghost, icon, and dimmed states * ------------------------------------------------------------------------- */ [data-hv-community] .hv-btn { border-radius: var(--hv-radius-lg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; transition: transform 0.1s ease, box-shadow 0.1s ease; } [data-hv-community] .hv-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--hv-accent); } [data-hv-community] .hv-btn:active { transform: translate(0, 0); box-shadow: none; } [data-hv-community] .hv-btn-primary { background: var(--hv-accent); color: #0a0612; border-color: var(--hv-accent-strong); } [data-hv-community] .hv-btn-ghost { border: 1px dashed var(--hv-border-strong); } [data-hv-community] .hv-btn-icon.is-dimmed { opacity: 0.4; } /* --------------------------------------------------------------------------- * 8. Comments — thread rail, body, actions, and nesting depth * ------------------------------------------------------------------------- */ [data-hv-community] .hv-comment { border-radius: var(--hv-radius); } /* The clickable collapse rail becomes a bright accent spine. */ [data-hv-community] .hv-comment-rail { background: var(--hv-border-strong); transition: background 0.15s ease; } [data-hv-community] .hv-comment:hover > .hv-comment-rail { background: var(--hv-accent); box-shadow: var(--demo-glow); } /* Tint alternating nesting depths so threads read as a gradient. */ [data-hv-community] .hv-comment[data-depth="1"] > .hv-comment-main { border-left: 2px solid rgba(255, 45, 120, 0.35); padding-left: 8px; } [data-hv-community] .hv-comment[data-depth="2"] > .hv-comment-main { border-left: 2px solid rgba(255, 208, 0, 0.35); padding-left: 8px; } [data-hv-community] .hv-comment[data-depth="3"] > .hv-comment-main { border-left: 2px solid rgba(0, 224, 255, 0.35); padding-left: 8px; } [data-hv-community] .hv-comment-body { line-height: 1.6; } [data-hv-community] .hv-comment-action:hover { color: var(--hv-accent); text-decoration: underline; } /* --------------------------------------------------------------------------- * 9. Responsive flourish — prove media queries reach community pages. * ------------------------------------------------------------------------- */ @media (max-width: 560px) { [data-hv-community] .hv-community-name { font-size: 1.4rem; } [data-hv-community] .hv-post-title { text-transform: none; } } /* Respect users who don't want motion — disable the sheen/pulse. */ @media (prefers-reduced-motion: reduce) { [data-hv-community] .hv-community-header::before, [data-hv-community] .hv-vote[data-pending="1"] { animation: none; } }