/* ════════════════════════════════════════════════════════════════════ Theme Tokens + Layout Variants Consumes `data-tokens-*` and `data-variant-*` attributes emitted on by layouts/main.php. Sources: DB style_properties OR theme.json "tokens"/"layout" sections. Token multipliers live as CSS custom properties on:root. Components that opt in (either in core or in theme assets) reference them via calc or var to scale their geometry without per-theme CSS forks. Layout variants are opt-in selectors on specific components — each component declares its own variants; this file provides the baseline skeletons + a few high-impact patterns. ════════════════════════════════════════════════════════════════════ */ /* ── Baseline multipliers (default = 1) ─────────────────────────── */ :root { --rb-token-radius-mult: 1; --rb-token-space-mult: 1; --rb-token-shadow-mult: 1; --rb-token-motion-mult: 1; --rb-token-type-mult: 1; } /* ── Radius scale ────────────────────────────────────────────────── */ body[data-tokens-radius="sharp"] { --rb-token-radius-mult: 0.2; } body[data-tokens-radius="default"] { --rb-token-radius-mult: 1.0; } body[data-tokens-radius="aggressive"] { --rb-token-radius-mult: 1.5; } body[data-tokens-radius="pill"] { --rb-token-radius-mult: 3.0; } /* Apply to common radius vars (overrides base:root values uniformly) */ body[data-tokens-radius] { --radius-sm: calc(6px * var(--rb-token-radius-mult)); --radius: calc(10px * var(--rb-token-radius-mult)); --radius-md: calc(12px * var(--rb-token-radius-mult)); --radius-lg: calc(16px * var(--rb-token-radius-mult)); --radius-xl: calc(20px * var(--rb-token-radius-mult)); --rb-avatar-border-radius: calc(50% * var(--rb-token-radius-mult) / 1); } /* ── Spacing scale (density-adjacent) ───────────────────────────── */ body[data-tokens-spacing="compact"] { --rb-token-space-mult: 0.75; } body[data-tokens-spacing="default"] { --rb-token-space-mult: 1.0; } body[data-tokens-spacing="spacious"] { --rb-token-space-mult: 1.25; } body[data-tokens-spacing="roomy"] { --rb-token-space-mult: 1.5; } /* ── Shadow intensity ───────────────────────────────────────────── */ body[data-tokens-shadow="none"] { --rb-token-shadow-mult: 0; } body[data-tokens-shadow="subtle"] { --rb-token-shadow-mult: 0.5; } body[data-tokens-shadow="default"] { --rb-token-shadow-mult: 1.0; } body[data-tokens-shadow="strong"] { --rb-token-shadow-mult: 1.5; } /* Override shadow base values when scaler is set */ body[data-tokens-shadow] { --shadow-sm: 0 1px calc(2px * var(--rb-token-shadow-mult)) rgba(0, 0, 0, calc(0.06 * var(--rb-token-shadow-mult))); --shadow: 0 2px calc(6px * var(--rb-token-shadow-mult)) rgba(0, 0, 0, calc(0.09 * var(--rb-token-shadow-mult))); --shadow-md: 0 4px calc(12px * var(--rb-token-shadow-mult)) rgba(0, 0, 0, calc(0.12 * var(--rb-token-shadow-mult))); --shadow-lg: 0 8px calc(24px * var(--rb-token-shadow-mult)) rgba(0, 0, 0, calc(0.16 * var(--rb-token-shadow-mult))); } /* ── Motion speed ───────────────────────────────────────────────── */ body[data-tokens-motion="none"] { --rb-token-motion-mult: 0; } body[data-tokens-motion="snappy"] { --rb-token-motion-mult: 0.5; } body[data-tokens-motion="default"] { --rb-token-motion-mult: 1.0; } body[data-tokens-motion="gentle"] { --rb-token-motion-mult: 1.5; } /* Disable animations entirely when motion=none, without breaking specificity */ body[data-tokens-motion="none"] *, body[data-tokens-motion="none"] *::before, body[data-tokens-motion="none"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* ── Typography scale (base + body font-size) ───────────────────── */ body[data-tokens-type-scale="sm"] { --rb-token-type-mult: 0.9; } body[data-tokens-type-scale="default"] { --rb-token-type-mult: 1.0; } body[data-tokens-type-scale="lg"] { --rb-token-type-mult: 1.125; } body[data-tokens-type-scale="xl"] { --rb-token-type-mult: 1.25; } body[data-tokens-type-scale] { font-size: calc(14px * var(--rb-token-type-mult)); } /* ── Typography family preset ───────────────────────────────────── */ body[data-tokens-typography="sans"] { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; } body[data-tokens-typography="serif"] { --font-sans: Georgia, 'Times New Roman', serif; } body[data-tokens-typography="mono"] { --font-sans: 'JetBrains Mono', ui-monospace, monospace; } body[data-tokens-typography="display"] { --font-sans: 'Space Grotesk', 'Inter', sans-serif; } /* ════════════════════════════════════════════════════════════════════ LAYOUT VARIANTS — fundamental component shape switches ════════════════════════════════════════════════════════════════════ */ /* ── Density (applies to content containers + common components) ── */ body[data-variant-density="compact"] { --rb-density-pad: 0.5rem; --rb-density-gap: 0.5rem; } body[data-variant-density="default"] { --rb-density-pad: 1rem; --rb-density-gap: 1rem; } body[data-variant-density="spacious"] { --rb-density-pad: 1.5rem; --rb-density-gap: 1.25rem; } body[data-variant-density] .rb-content .rb-card, body[data-variant-density] .rb-card-body, body[data-variant-density] .rb-pad { padding: var(--rb-density-pad); } body[data-variant-density] .rb-stack { gap: var(--rb-density-gap); } /* ── Postbit variant ────────────────────────────────────────────── */ /* Core default is left-avatar (side column). Other variants reshape. */ body[data-variant-postbit="top-avatar"] .rb-postbit { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } body[data-variant-postbit="inline"] .rb-postbit { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; width: auto; } body[data-variant-postbit="callout"] .rb-postbit { display: flex; flex-direction: row; align-items: flex-start; gap: 0.75rem; width: auto; } body[data-variant-postbit="callout"] .rb-postbit .rb-avatar { margin-top: 2px; } /* ── Thread-view variant ────────────────────────────────────────── */ body[data-variant-thread-view="card-feed"] .rb-thread-row { display: block; padding: 1rem; margin-bottom: 0.75rem; border-radius: var(--radius-lg, 16px); border: 1px solid var(--border); background: var(--surface); } body[data-variant-thread-view="magazine"] .rb-thread-row { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } body[data-variant-thread-view="chat"] .rb-thread-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: none; } /* ── compact-style thread listing ──────────────────────────────── Full-width rows, three activity columns (Replies · Views · Activity), avatar stack on the left, category pill + tags on the row. */ body[data-variant-thread-view="compact-thread"] .rb-thread-list { border-top: 1px solid var(--border-strong); } body[data-variant-thread-view="compact-thread"] .rb-thread-row { display: grid; grid-template-columns: 56px 1fr 72px 72px 92px; gap: 0.75rem; align-items: center; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border); background: transparent; transition: background 120ms ease; } body[data-variant-thread-view="compact-thread"] .rb-thread-row:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); } body[data-variant-thread-view="compact-thread"] .rb-thread-row__avatar { width: 40px; height: 40px; border-radius: 50%; outline: 2px solid var(--surface); } body[data-variant-thread-view="compact-thread"] .rb-thread-row__title { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--foreground); } body[data-variant-thread-view="compact-thread"] .rb-thread-row__stats { display: contents; } body[data-variant-thread-view="compact-thread"] .rb-thread-row__stats > span { text-align: center; font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } body[data-variant-thread-view="compact-thread"] .rb-prefix { display: inline-flex; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--prefix-bg, color-mix(in srgb, var(--primary) 14%, transparent)); color: var(--prefix-color, var(--primary)); margin-right: 0.5rem; letter-spacing: 0; text-transform: none; } /* ── -style thread listing ─────────────────────────────────── Single-column minimalist list, category hash mark on the left, large avatar, reply-count pill on the right, soft borders. */ body[data-variant-thread-view="minimal-thread"] .rb-thread-list { padding: 0; } body[data-variant-thread-view="minimal-thread"] .rb-thread-row { display: grid; grid-template-columns: 4px 48px 1fr auto; gap: 0.75rem; align-items: center; padding: 1rem 0.75rem; margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface); } body[data-variant-thread-view="minimal-thread"] .rb-thread-row:first-child { border-top-left-radius: var(--radius-lg, 12px); border-top-right-radius: var(--radius-lg, 12px); } body[data-variant-thread-view="minimal-thread"] .rb-thread-row:last-child { border-bottom-left-radius: var(--radius-lg, 12px); border-bottom-right-radius: var(--radius-lg, 12px); } body[data-variant-thread-view="minimal-thread"] .rb-thread-row::before { content: ""; display: block; height: 28px; background: var(--prefix-color, var(--primary)); border-radius: 2px; } body[data-variant-thread-view="minimal-thread"] .rb-thread-row__avatar { width: 44px; height: 44px; border-radius: 50%; } body[data-variant-thread-view="minimal-thread"] .rb-thread-row__title { font-weight: 600; font-size: 1rem; color: var(--foreground); } body[data-variant-thread-view="minimal-thread"] .rb-thread-row__meta { font-size: 0.78rem; color: var(--text-muted); } /* Reply count pill — trademark */ body[data-variant-thread-view="minimal-thread"] .rb-thread-row__stats { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.85rem; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border-radius: 999px; font-weight: 700; font-size: 0.8rem; font-variant-numeric: tabular-nums; } body[data-variant-thread-view="minimal-thread"] .rb-thread-row__stats > span:not(:first-child) { display: none; /* Only show reply count in the pill */ } /* ── Nav placement variant ──────────────────────────────────────── */ body[data-variant-nav="topbar"] .rb-sidebar { display: none; } body[data-variant-nav="topbar"] .rb-main { margin-left: 0 !important; } body[data-variant-nav="bottom-tabs"] .rb-sidebar { display: none; } body[data-variant-nav="bottom-tabs"] .rb-main { margin-left: 0 !important; padding-bottom: 4rem; } body[data-variant-nav="bottom-tabs"] .rb-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--border); padding: 0.5rem 0; z-index: 40; } /* ── Header shape variant ───────────────────────────────────────── */ body[data-variant-header-shape="sticky-shrink"] .rb-header { position: sticky; top: 0; transition: padding calc(200ms * var(--rb-token-motion-mult, 1)); } body[data-variant-header-shape="sticky-shrink"].rb-scrolled .rb-header { padding-block: 0.25rem; } /* ── Dark-mode property bindings ──────────────────────────────── * These admin-tunable properties previously had no consumer. * Wire them to the shadcn/framework variables actually used by * templates so changing them in /admin/styles has a visible effect. */ html[data-theme="dark"] { --border: var(--color-border-dark, #2d2f3a); --input: var(--color-border-dark, #2d2f3a); --card: var(--color-dark-card, var(--card)); --popover: var(--color-dark-card, var(--popover)); } /* ── destructiveFg ── * Applied to any element that paints a destructive/danger action * so the admin-chosen foreground color actually shows up. */ .btn-destructive, .btn-danger, button[data-variant="destructive"], .destructive { color: var(--destructive-foreground, #fff); } .btn-destructive *, .btn-danger *, button[data-variant="destructive"] *, .destructive * { color: inherit; } /* ── Admin-tunable header / sub-bar / footer bindings ─────────── */ /* Header border color (applied to floating + sticky header frames). */ .rb-header { border-color: var(--rb-header-border-color, var(--border)); } body[data-variant-header-shape="floating"] .rb-header { position: sticky; top: 0.75rem; margin: 0.75rem 0.75rem 0; border-radius: var(--radius-lg, 16px); border: 1px solid var(--border); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--surface) 80%, transparent); border-color: var(--rb-header-border-color, var(--border)); } /* Sticky header toggle — boot script sets body[data-sticky-header] from * the computed --rb-enable-sticky-header value (0|1). */ body[data-sticky-header="1"] .rb-header { position: sticky; top: 0; z-index: 50; } body[data-sticky-header="0"] .rb-header { position: static; } /* ── Widget sidebar position — admin value 'left'|'right' ─────── */ body[data-sidebar-position="left"] .rb-layout-main, body[data-sidebar-position="left"] .rb-with-sidebar, body[data-sidebar-position="left"] [data-layout="sidebar"] { flex-direction: row-reverse; } body[data-sidebar-position="right"] .rb-layout-main, body[data-sidebar-position="right"] .rb-with-sidebar, body[data-sidebar-position="right"] [data-layout="sidebar"] { flex-direction: row; } /* ── Modern postbit overrides (clears legacy Style 7 rules) ────── */ .rb-postbit-modern { text-align: left !important; padding: 16px !important; border-right: 1px solid var(--border) !important; } .rb-postbit-modern.post-author { background: var(--surface) !important; } .rb-postbit-modern .rb-pb-avatar-link, .rb-postbit-modern .rb-pb-avatar-link .rb-avatar, .rb-postbit-modern .rb-pb-avatar-link img, .rb-postbit-modern .rb-pb-avatar { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: calc(var(--radius, 12px) + 2px) !important; font-size: 3.5rem !important; object-fit: cover !important; } .rb-postbit-modern .rb-pb-username { font-size: 1rem !important; margin-top: 0 !important; line-height: 1.2 !important; } /* ── Flash banner placement for row-flex main layouts ── * When

is flex-direction:row (Style 7 raxboard_main_theme), a flash * banner inserted as a direct child becomes a third column and stretches * to 100% height. Float it to the top-center instead. */ body[data-theme-id="raxboard_main_theme"] > main#main-content > .flash-banner { position: fixed; top: calc(var(--header-h, 64px) + 12px); left: 50%; transform: translateX(-50%); width: min(90%, 520px); max-width: calc(100vw - 24px); z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.18); } /* ── Style 7 global search — fix for display:contents button ── * Header search