/* Polis stream-shape stylesheet. Three concerns bundled into one file: 1. Topbar chrome (.polis-topbar* / .polis-wordmark / .pinned-dot / .sentence-filter) — palette flows from the tenant's active theme. Earlier conventions (SOLS-hardcoded for logged-out, viewer-theme for logged-in) are superseded — nav and content read as one page in the tenant's theme. 2. Two-column layout (.layout / .layout-left / .layout-right) + year-marker + entry grammar (.stream / .entry / state classes) — sticky bio card on the left, scrolling content on the right, vertical timeline bar centered in the gap, pinned-dot in the topbar visually anchors the bar to the chrome. Mobile collapses to single-column at ≤900px. 3. Entry sub-type layouts (.entry--post / --comment / --profile / --mention / --dm) — palette-referencing rules use --color-* variables from the active theme. Posts ship the new entry-meta-line markup; the other sub-types still use the legacy .entry-meta block — they only render in the owner SPA and will get the same line treatment then. DIRECTION-HOOK convention: any rule whose semantic flips under stream-direction reversal (newest-on-top vs newest-on-bottom) carries a DIRECTION-HOOK comment immediately above the rule. `grep -r "DIRECTION-HOOK"` is the audit tool. A cheap reversibility lever. */ /* ========================================================================== 0. LAYOUT VARS — single source of truth Tune these to adjust page proportions; bar/dot/filter-anchor derive automatically via calc(). Use 100% (NOT 100vw) inside the absolute- positioning calcs so scrollbar width doesn't push elements off the bar. ========================================================================== */ :root { /* Body font-size for stream content — single tuning knob shared across the SPA + every public per-post page. Applied at the shape-bundle level (instead of per-surface) so the two never drift: changing this one declaration retunes excerpts, full bodies, DM bubbles, conversation previews, dashboard post-list excerpts, and inline comment previews all at once. Themes may override per-theme by redeclaring this variable in their own CSS. Explicitly NOT applied to titles, meta lines, or chrome — those are styled individually. Callers in this file: .entry-excerpt, .focus-content .content-body / .entry--post .entry-content / .entry--comment- thread .entry-content. Callers in webapp/style.css: .item-excerpt, .comment-detail-text, .mc-excerpt, .conv-preview, .msg-bubble. */ --stream-body-font-size: 17px; /* Body line-height — single source of truth, consumed by the prose rule (.entry-content / .content-body) AND by the timeline-dot first-line-center calc below, so the two can never drift. */ --stream-body-line-height: 1.7; /* The post body's top padding (.entry-body--excerpt / --expanded). It's deliberate hover-area inset, and it sits between the rail's top and the first text line — so the dot anchor has to clear it. Named here so the padding and the dot anchor share one constant and can't drift. */ --entry-body-pad-y: 10px; /* Cap-height optical lift. The geometric center of the first LINE BOX sits low relative to where the eye reads the line's middle: with the generous 1.7 line-height the box carries a lot of leading, and the eye anchors on the CAPITAL at the line start, whose mass (baseline → cap-height) lives in the upper part of the box. Lifting the dot by this amount lands it on the capital's optical midline instead of the line-box center. One named knob, shared by the dot AND the avatar-top so they stay locked. */ --dot-cap-lift: 4px; /* Avatar chip size (matches buildAvatar(…, 28) in stream.js) + how far down the chip the dot's horizontal line should intersect. The avatar is a CIRCLE, so anchoring its TOP edge to the dot line reads as too low — the visual mass sits below the top curve. Lifting the chip so the dot line crosses it at 25% of its height lands the line through the chip's upper body instead of skimming its top edge. Shared by every avatar-top anchor below so post + comment chips lift consistently. */ --entry-avatar-size: 28px; --entry-avatar-dot-inset: calc(var(--entry-avatar-size) / 4); /* Reserved avatar column. The post chip is absolutely positioned top-right (not floated), --entry-avatar-inset from the content column's right edge; the body reserves --entry-avatar-gutter on the right so EVERY line stops at the chip's edge and the column under it stays clear (no float-wrap). Gutter = inset + chip + a 16px text gap (matches the old float's left margin, so the text ends where the wrapped lines used to). */ --entry-avatar-inset: 8px; --entry-avatar-gutter: calc(var(--entry-avatar-inset) + var(--entry-avatar-size) + 16px); /* Comment-card chips share the post chip's reserved-column vars: the card has no right padding, so its rail right edge IS the column edge — same --entry-avatar-inset / --entry-avatar-gutter as the post, landing the comment chip + handle + body at the post's right edge. */ /* Timeline-dot vertical anchor. The dot aligns to the midline of the body's FIRST text line, not the date row. The .entry-rail wrapper's top is the body's border-box top, and the first text line sits below it by the body's top padding (--entry-body-pad-y) + half the first line (font-size * line-height / 2). The - 1px is a small optical nudge (body text rides slightly high in its line box; the excerpt's 1.55 line-height vs the expanded body's 1.7 also splits the difference here). Every term is a shared layout constant — change the font or the padding and this re-derives, no per-context magic. The entry-content's 6px top margin is zeroed when the title is hidden (rule below) so excerpt and expanded agree on the first-line position. Comment bodies are smaller; see --stream-comment-line-center. */ --stream-post-line-center: calc(var(--entry-body-pad-y) + var(--stream-body-font-size) * var(--stream-body-line-height) / 2 - var(--dot-cap-lift)); /* Comment-body first-line center (body 15px / 1.65). Same shape as the post anchor minus the post body padding — the comment rail wraps the comment body directly, so there's no body padding to clear; the comment-attached card padding is OUTSIDE the rail. Shares --dot-cap-lift. */ --stream-comment-line-center: calc(15px * 1.65 / 2 - var(--dot-cap-lift)); /* Layout dimensions. The two-column stream layout drives most of these; topbar geometry derives from the same set so the timeline-cap dot lines up with the bar below. */ --layout-padding-x: 16px; /* page edge → content */ --layout-padding-bottom: 96px; /* Halve the timeline gutter and hand the reclaimed width to the bio column. The content column's left edge is padding-x + col1 + gap = 16 + 368 + 48 = 432 — exactly what it was at the old 320/96 split, so the stream doesn't move. What changes: the gap narrows 96→48 (the timeline bar now sits 24px to the right, centered in the tighter gutter), and the bio column grows 320→368 (+48px), giving the bio blurb more room. The bar, the topbar cap-dot (.pinned-dot), and the sentence filter all derive their x from col1+gap via --timeline-bar-x / the filter anchor calc, so they shift right in lockstep and stay aligned. */ --layout-col1: 368px; /* left bio-card column width */ --layout-gap: 48px; /* col1 → right content column */ --layout-max-width: 1140px; /* Visual-balance shift. The grid is bio (320) + gap (96) + content (1fr). Mathematically centering the container leaves the visually-heavier content column right-of-center as the eye reads it; the bio is lighter (avatar + small bio + thin counts row), so the composition's perceptual center sits inside the content column rather than at the container midline. Pulling the whole layout slightly left compensates: bio approaches the optical center, content backs off the right edge, both feel balanced. Pinned-dot + topbar filter pick up the same shift so the timeline cap stays aligned with the bar below. Default 0; the wide-viewport @media block at the bottom of this file bumps it to 60px once there's enough side margin to absorb the shift (viewport ≥ max-width + 2*shift = 1260px). On narrower windows the shift would push content past the right edge or clip it on the left. */ --layout-shift-left: 0px; --nav-content-gap: 48px; /* topbar bottom → first content row */ /* sticky-position offset for left col — must equal the column's natural in-flow top (topbar height + nav-content-gap) so position:sticky activation doesn't visually "snap" the column closer to the topbar on first scroll. Empirical: column's getBoundingClientRect().y at scrollY=0 reads 98px on a default theme; calc resolves to 50+48=98, matching exactly. */ --layout-sticky-top: calc(var(--topbar-height) + var(--nav-content-gap)); --topbar-height: 50px; --filter-bar-inset: 20px; /* filter "all" → past the timeline-cap dot */ /* Topbar palette tokens. Themes set --topbar-bg / --topbar-border directly; if a theme doesn't, the fallbacks below cover it. The owner SPA loads stream.css (for shape layout) but does NOT load the per-theme stream.css (where --color-bg-light / --color-bg get set). Without a fallback through the SPA's nav-theme contract, the topbar would render against the hardcoded #1a1525 (sols-ish purple) regardless of the user's selected theme. Falling through to --nav-bg / --nav-border (which the SPA's nav-themes.css sets per data-site-theme) makes the SPA topbar inherit the user's theme. Public canonical pages are unaffected — their per-theme stream.css sets --color-bg-light first, which wins the chain. */ --topbar-bg: var(--color-bg-light, var(--color-bg, var(--nav-bg, #1a1525))); --topbar-border: var(--color-border, var(--nav-border, rgba(255, 255, 255, 0.08))); /* Compose-"+" disc — the dark node behind the write-anchor "+", shared by the ghost-compose row's dot AND the post editor's rail-"+" (.editor-card-plus, the editor-open state) so they read as one affordance across views/states. Rest: nav bg lifted ~30% toward the muted text color (a quiet dark node that lets the accent "+" pop). Active/hover: nav bg lifted ~42% toward --color-accent (a dark accent tint, not white). All theme-derived, so every theme gets its own coherent result. */ --compose-disc-bg: color-mix(in srgb, var(--topbar-bg) 70%, var(--color-text-muted)); --compose-disc-bg-active: color-mix(in srgb, var(--topbar-bg) 58%, var(--color-accent, var(--accent, #d8a060))); /* Text tokens. Same cascade pattern as --topbar-bg: defaults assume a dark theme (peachy light text), but chain through the webapp's --text-primary / --text-soft / --text-muted so the owner SPA (which loads stream.css for layout but does NOT load a per-theme stream.css) picks up the theme-correct text colors that nav-themes.css sets for each tenant. Without this, especial-light's light beige text-token defaults (#f0e8dc / #d4c8b8) painted on top of the light beige body bg and rendered as near-invisible text. */ --color-text: var(--text-primary, #f0e8dc); --color-text-soft: var(--text-soft, var(--text-secondary, #d4c8b8)); --color-text-muted: var(--text-muted, var(--text-tertiary, rgba(255, 255, 255, 0.55))); /* Filter underline tokens — drive the interactive-slot underline color. Derive from --color-accent at ~55% alpha so the resting-state underline is always visibly present (not just on hover). Earlier shape used --color-accent-soft which is themed at very low alpha (0.08–0.10) on the owner SPA palette and read as no underline at all. The hover color stays full --color-accent for the strengthen-on-hover transition. */ --filter-underline: color-mix(in srgb, var(--color-accent, var(--accent, #d8a060)) 55%, transparent); --filter-underline-hover: var(--color-accent, var(--accent, #d8a060)); /* Timeline tokens — vertical bar between columns + per-entry dot. Always derive from --color-accent via color-mix so each theme gets a muted, complementary timeline color. Earlier the default preferred --color-accent-soft, but most themes set that to a *-soft palette token (still a solid, lightly-tinted color) — not an alpha-mixed muted version — so the bar/dot rendered heavy and saturated. Going through accent + color-mix gives uniform muting independent of how each theme's *-soft tokens happen to be defined. Themes can still override --color-timeline-bar / --color-timeline-dot directly if they want a different look (see sols.css). Bar at ~25%, dot at ~50%: dot needs to read as a marker, bar as a continuous- but-quiet thread. .has-unread overrides --color-timeline-dot to full --color-accent so unread items pop. */ --color-timeline-bar: color-mix(in srgb, var(--color-accent, var(--accent, #c8a878)) 25%, transparent); --color-timeline-dot: color-mix(in srgb, var(--color-accent, var(--accent, #c8a878)) 50%, transparent); /* Single source of truth for the timeline bar's left edge inside .layout's coordinate space. The bar (.layout::before), the topbar cap-dot (.pinned-dot), and entry dots all derive their x from this one calc — guaranteeing the cap, the bar, and every dot beneath sit on the same vertical line. -1px is the optical- midline nudge: a 1px bar centered geometrically reads as right-of-center on an 8px anti-aliased dot; -1px paints the bar column immediately left of the dot's true center, which the eye reads as bisecting. Change here, change everywhere. */ --timeline-bar-x: calc(var(--layout-padding-x) + var(--layout-col1) + var(--layout-gap) / 2 - 1px); /* Entry hover token — dedicated for entry-card hover background so themes can dial it independently of --color-surface (which doubles as the surface fill for bio cards, dropdown panels, etc., and is often more saturated than a hover wants to be). Default is a white-alpha overlay tuned for dark themes; light themes that need a dark overlay should override this to e.g. rgba(0, 0, 0, 0.04). */ --color-entry-hover-bg: rgba(255, 255, 255, 0.025); } * { box-sizing: border-box; } /* The body has tabindex="-1" + an init-time document.body.focus() call so keyboard shortcuts (j/k entry nav, c/Enter for the comment panel) work immediately on page load instead of requiring a click first. The programmatic focus would otherwise paint the browser's default focus ring on the body — suppress it. (User-driven focus via Tab still surfaces focus rings on individual interactive elements; that path uses :focus-visible at the link/button level.) */ body:focus { outline: none; } /* ========================================================================== 1. TOPBAR CHROME — tenant theme; flex with absolute-positioned filter ========================================================================== */ .polis-topbar { position: sticky; top: 0; z-index: 50; min-height: var(--topbar-height); display: flex; align-items: center; padding: 0 16px; background: var(--topbar-bg); /* Softened nav→content separator. Themes set --topbar-border (or --color-border via the fallback) at full theme-accent alpha; halve it via color-mix so the line reads as a hint rather than a hard edge. color-mix(in srgb) is Baseline 2023 — all modern browsers; on the rare unsupported browser the property is simply ignored and the border falls back to nothing, which is an acceptable graceful-degrade. */ border-bottom: 1px solid color-mix(in srgb, var(--topbar-border) 35%, transparent); font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: 14px; box-sizing: border-box; } /* Wordmark — left-edge of the topbar (the .polis-topbar's padding-x gives the breathing room). */ .polis-wordmark { font-family: var(--font-content, 'Newsreader', Georgia, serif); font-style: italic; font-size: 24px; font-weight: 550; letter-spacing: 0.06em; color: var(--color-text, #f0e8dc); opacity: 0.9; text-decoration: none; line-height: 1; padding: 0 4px; flex: 0 0 auto; transition: opacity 0.2s ease; } .polis-wordmark:hover { opacity: 1; } /* When the nav widget populates #polis-nav-root, hide the static wordmark so the icon-row chrome can take its place. */ .polis-topbar:has(#polis-nav-root:not(:empty)) .polis-wordmark { display: none; } /* Sign-in link — right-edge of the topbar. Subtle (low opacity) so it doesn't compete with content, but always present. Pushed right via margin-left: auto on the flex axis (absolute-positioned filter and pinned-dot are out of flow, so this lands cleanly at the right edge). Themed via the same --color-text-soft / --color-text vars the wordmark uses, so it adopts whatever palette the active theme is in. */ .polis-signin { margin-left: auto; color: var(--color-text-soft, #d4c8b8); opacity: 0.6; text-decoration: none; font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: 13px; letter-spacing: 0.04em; line-height: 1; padding: 0 4px; flex: 0 0 auto; transition: opacity 0.2s ease, color 0.2s ease; } .polis-signin:hover { opacity: 1; color: var(--color-text, #f0e8dc); } /* Owner-side handle label at the right edge of the topbar. Same anchor position the .polis-signin uses on the public surface, but the typography matches .byline-domain (JetBrains Mono, muted) so the handle reads consistently with how it appears in the stream's per-entry attribution. owner-extras populates the text + href from /api/status; until the fetch lands the element is empty and visually absent. */ .polis-handle-label { margin-left: auto; flex: 0 0 auto; padding: 0 4px; font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace); /* The handle reads comfortably as a sibling label to the wordmark / nav icons at typical viewing distance. Keeps the muted-monospace attribution treatment that matches the stream byline. */ font-size: 14px; letter-spacing: 0.02em; color: var(--color-text-muted, rgba(255, 255, 255, 0.55)); text-decoration: none; transition: color 0.2s ease; } .polis-handle-label:empty { display: none; } .polis-handle-label:hover { color: var(--color-text, #f0e8dc); } /* Hide the static sign-in once the nav widget hydrates (the rendered .pn-nav inserts itself as a flex child of the topbar — for logged-in visitors the widget provides its own auth-aware nav). */ .polis-topbar:has(.pn-nav) .polis-signin, .polis-topbar:has(.pn-fallback) .polis-signin { display: none; } /* Layer-2 owner gate. body.is-owner is set ONLY by the owner SPA's app.js bootstrap (webapp/internal/webui/www/app.js); canonical pages never have it. owner-extras.js (which loads alongside app.js in the SPA only — by design) reads this class but does not set it. The convention is therefore a precise SPA-vs-canonical signal — see also the stream.js pagination's surface=spa query param, the .entry-actions reveal below, and the handlers_stream.go count gate. On canonical pages the comment/follow widget (webapp/internal/hosted/widget/widget.js) handles owner/visitor state inside its Shadow DOM and does NOT touch body classes. The static sign-in is redundant once the visitor IS the owner; hide it. The :has() rule above already covers the hosted-nav-widget case; this rule covers the SPA. */ body.is-owner .polis-signin { display: none; } /* Activity render mode. Earlier pass projected each entry into a custom .activity-signal pill — replaced here with a heterogenous union of natural per-type renderings (post, comment-thread, follow). The only adjustment relative to a normal stream is a SHORTER body preview: the natural 50vh cap on .entry-content is too generous for a mixed-content scan, so activity mode tightens it to ~22vh. The existing post-body-toggle "show more" flow handles uncapping for entries the user wants to read in full. .activity-signal CSS below is left intact in case we revisit the projection model later; the JS hook that injected the elements is gone, so nothing renders into these classes today. */ body.is-activity-mode .entry--post .entry-content, body.is-activity-mode .entry--comment-thread .entry-content { max-height: 22vh; } /* Always hide stale .activity-signal nodes — the JS no longer emits them, but if the activity-mode CSS is ever re-engaged the layer below catches any residue. */ .activity-signal { display: none; } /* Inline post editor as first stream item. Editor card is mounted by owner-extras when the user clicks the edit icon. Marked with data-polis-pinned="editor" so the filter- change clear logic in stream.js doesn't tear it down. Acts as a "giant editable content card" — same DOM grammar as a regular .entry (timeline-dot + content) but with editor-specific chrome. Behavior spec: - Fixed height (50-60vh max), inner scrollbar on body. - Sticky across filter changes only; dismissed by Cancel. - Tiered Esc: in focus mode → exit focus; out of focus → close. - Ctrl+Shift+F → full-screen takeover via body.is-editor-focus. */ .entry.entry--editor { /* Light-touch treatment: the editor reads like a post being authored in place — no card frame, no border ring, no surface fill. Pin sticky-top right against the topbar and move the nav-content-gap into top padding so the card's solid bg extends from the topbar's bottom edge through the title (was: gap strip above editor showed posts scrolling behind). Negative top margin pulls the editor up into .layout's top padding so flow position = sticky lock position — without this, scrolling the page moved the editor by nav-content-gap before it locked. Footer stays clipped to the card naturally via flex layout (body min-height:0 + flex:1 1 auto shrinks to fit), so we can skip overflow:hidden and let the ::after fade pseudo extend beyond the card boundary. */ position: sticky; top: var(--topbar-height); margin-top: calc(-1 * var(--nav-content-gap)); background: var(--color-bg, var(--bg, #1a1525)); /* Extend the editor's solid bg into the layout's column gap so the bar + indicator dots in that gutter are covered while the editor is open at their y range. Box-shadow with no blur, no spread, offset only by -(gap/2 + 20px) draws an identical-size copy of the box shifted left; the visible portion is the left- of-editor strip outside the editor's own bounds. Paint-only — doesn't affect layout or hit-testing of children (verified after rolling back the prior z-index:-1 ::after approach which turned out to be innocent of the body-click bug — that was the Milkdown init silent-failure overriding the textarea fallback; fixed in owner-extras.js promoteToMilkdown). The bottom-fade ::after takes over below the editor to continue masking through the 60px fade region. */ box-shadow: calc(-1 * (var(--layout-gap) / 2 + 20px)) 0 0 var(--color-bg, var(--bg, #1a1525)); z-index: 5; border: none; border-radius: 0; padding: var(--nav-content-gap) 0 2.5em; margin-bottom: 1.2em; /* Fixed height (not max-height) so the body claims the full vertical room regardless of content — with min-heights dropped from the textarea + milkdown-mount, max-height alone let the card collapse to ~content size on empty editors. */ height: 46vh; display: flex; flex-direction: column; } /* + glyph on the timeline rail next to the Title input — now a real