/* === tokens.css === */
/* ══════════════════════════════════════════════════════════════════
Token Scales — theme-level design tokens selectable via body attrs.
Themes opt into a preset by setting `data-tokens-{kind}="preset"` on
. Core components read the resulting CSS variables; switching
preset changes the entire visual language without rewriting CSS.
Attributes (all optional, defaults apply when absent):
data-tokens-radius = sharp | default | aggressive | pill
data-tokens-spacing = compact | default | spacious
data-tokens-shadow = none | subtle | default | strong
data-tokens-motion = none | gentle | default | snappy
data-tokens-typography = sans | serif | mono | display
══════════════════════════════════════════════════════════════════ */
/* ── Radius ──────────────────────────────────────────────────────── */
body[data-tokens-radius="sharp"] {
--rb-token-radius-xs: 0px;
--rb-token-radius-sm: 2px;
--rb-token-radius-md: 4px;
--rb-token-radius-lg: 6px;
--rb-token-radius-xl: 8px;
--rb-token-radius-full: 12px;
}
body[data-tokens-radius="aggressive"] {
--rb-token-radius-xs: 8px;
--rb-token-radius-sm: 12px;
--rb-token-radius-md: 20px;
--rb-token-radius-lg: 32px;
--rb-token-radius-xl: 48px;
--rb-token-radius-full: 9999px;
}
body[data-tokens-radius="pill"] {
--rb-token-radius-xs: 9999px;
--rb-token-radius-sm: 9999px;
--rb-token-radius-md: 9999px;
--rb-token-radius-lg: 9999px;
--rb-token-radius-xl: 9999px;
--rb-token-radius-full: 9999px;
}
/* ── Spacing (scale multiplier on base 4px unit) ─────────────────── */
body[data-tokens-spacing="compact"] { --rb-token-spacing-scale: 0.75; }
body[data-tokens-spacing="spacious"] { --rb-token-spacing-scale: 1.25; }
body[data-tokens-spacing="roomy"] { --rb-token-spacing-scale: 1.5; }
/* ── Shadow (elevation) ──────────────────────────────────────────── */
body[data-tokens-shadow="none"] {
--rb-token-shadow-xs: none;
--rb-token-shadow-sm: none;
--rb-token-shadow-md: none;
--rb-token-shadow-lg: none;
--rb-token-shadow-xl: none;
}
body[data-tokens-shadow="subtle"] {
--rb-token-shadow-xs: 0 1px 1px rgba(0,0,0,.02);
--rb-token-shadow-sm: 0 1px 2px rgba(0,0,0,.03);
--rb-token-shadow-md: 0 2px 4px rgba(0,0,0,.04);
--rb-token-shadow-lg: 0 4px 8px rgba(0,0,0,.05);
--rb-token-shadow-xl: 0 8px 16px rgba(0,0,0,.06);
}
body[data-tokens-shadow="strong"] {
--rb-token-shadow-xs: 0 2px 4px rgba(0,0,0,.10);
--rb-token-shadow-sm: 0 4px 8px rgba(0,0,0,.14);
--rb-token-shadow-md: 0 8px 16px rgba(0,0,0,.18);
--rb-token-shadow-lg: 0 16px 32px rgba(0,0,0,.22);
--rb-token-shadow-xl: 0 32px 64px rgba(0,0,0,.28);
}
/* ── Motion (duration + easing) ──────────────────────────────────── */
body[data-tokens-motion="none"] {
--rb-token-duration-fast: 0ms;
--rb-token-duration-base: 0ms;
--rb-token-duration-slow: 0ms;
}
body[data-tokens-motion="gentle"] {
--rb-token-duration-fast: 250ms;
--rb-token-duration-base: 400ms;
--rb-token-duration-slow: 600ms;
--rb-token-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
}
body[data-tokens-motion="snappy"] {
--rb-token-duration-fast: 80ms;
--rb-token-duration-base: 140ms;
--rb-token-duration-slow: 220ms;
--rb-token-ease-default: cubic-bezier(0.4, 0, 0.6, 1);
}
/* ── Typography (font stack + scale multiplier) ──────────────────── */
:root {
--rb-token-radius-xs: 4px;
--rb-token-radius-sm: 6px;
--rb-token-radius-md: 10px;
--rb-token-radius-lg: 16px;
--rb-token-radius-xl: 24px;
--rb-token-radius-full: 9999px;
--rb-token-spacing-unit: 4px;
--rb-token-spacing-scale: 1;
--rb-token-space-1: calc(var(--rb-token-spacing-unit) * 1 * var(--rb-token-spacing-scale));
/* 4px */ --rb-token-space-2: calc(var(--rb-token-spacing-unit) * 2 * var(--rb-token-spacing-scale));
/* 8 */ --rb-token-space-3: calc(var(--rb-token-spacing-unit) * 3 * var(--rb-token-spacing-scale));
/* 12 */ --rb-token-space-4: calc(var(--rb-token-spacing-unit) * 4 * var(--rb-token-spacing-scale));
/* 16 */ --rb-token-space-6: calc(var(--rb-token-spacing-unit) * 6 * var(--rb-token-spacing-scale));
/* 24 */ --rb-token-space-8: calc(var(--rb-token-spacing-unit) * 8 * var(--rb-token-spacing-scale));
/* 32 */ --rb-token-space-12: calc(var(--rb-token-spacing-unit) * 12 * var(--rb-token-spacing-scale));
/* 48 */ --rb-token-space-16: calc(var(--rb-token-spacing-unit) * 16 * var(--rb-token-spacing-scale));
/* 64 */;
--rb-token-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
--rb-token-shadow-sm: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--rb-token-shadow-md: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
--rb-token-shadow-lg: 0 12px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
--rb-token-shadow-xl: 0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);
--rb-token-duration-fast: 150ms;
--rb-token-duration-base: 250ms;
--rb-token-duration-slow: 400ms;
--rb-token-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--rb-token-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--rb-token-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--rb-token-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--rb-token-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
--rb-token-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--rb-token-font-display: 'Space Grotesk', 'Inter', sans-serif;
--rb-token-font-body: var(--rb-token-font-sans);
--rb-token-font-heading: var(--rb-token-font-sans);
--rb-token-type-scale: 1;
}
body[data-tokens-typography="serif"] {
--rb-token-font-body: var(--rb-token-font-serif);
--rb-token-font-heading: var(--rb-token-font-serif);
}
body[data-tokens-typography="mono"] {
--rb-token-font-body: var(--rb-token-font-mono);
--rb-token-font-heading: var(--rb-token-font-mono);
}
body[data-tokens-typography="display"] {
--rb-token-font-body: var(--rb-token-font-sans);
--rb-token-font-heading: var(--rb-token-font-display);
}
body[data-tokens-type-scale="sm"] { --rb-token-type-scale: 0.92; }
body[data-tokens-type-scale="lg"] { --rb-token-type-scale: 1.08; }
body[data-tokens-type-scale="xl"] { --rb-token-type-scale: 1.18; }
/* Apply type scale to body (cascades to rem-based sizes) */
body { font-size: calc(16px * var(--rb-token-type-scale, 1)); }
/* ══════════════════════════════════════════════════════════════════
UNIFIED RB-* TOKEN LAYER (Phase 1 — token consolidation)
Single source of truth. Maps legacy namespaces (--rf-*, --rbc-*,
--bg, --primary, etc.) → --rb-* unified vars with fallback chain.
New code: use --rb-* exclusively.
Legacy code: keeps working — old vars resolve via cascade.
══════════════════════════════════════════════════════════════════ */
:root {
/* ── Surfaces / Backgrounds ────────────────────────────── */
--rb-bg: var(--bg, var(--rf-bg, var(--rbc-bg, var(--background, #f4f5f8))));
--rb-bg-alt: var(--bg-alt, var(--rf-bg-soft, var(--rbc-surface-2, var(--muted, #eef0f4))));
--rb-bg-elev: var(--bg-elev, var(--surface, var(--rbc-surface, var(--rf-surface, #ffffff))));
--rb-surface: var(--surface, var(--rf-surface, var(--rbc-surface, #ffffff)));
--rb-surface-2: var(--surface-2, var(--rf-surface-alt, var(--rbc-surface-2, #fafbfd)));
--rb-surface-raised: var(--surface-raised, var(--rbc-surface-3, var(--rf-surface, #ffffff)));
/* ── Text ──────────────────────────────────────────────── */
--rb-text: var(--text, var(--foreground, var(--rf-text, var(--rbc-fg, #1f2330))));
--rb-text-muted: var(--text-muted, var(--muted-foreground, var(--rf-text-mute, var(--rbc-fg-mute, #686878))));
--rb-text-faint: var(--text-faint, var(--rf-text-mute, var(--rbc-fg-faint, #94a3b8)));
/* ── Brand ─────────────────────────────────────────────── */
--rb-primary: var(--primary, var(--rf-primary, var(--rbc-primary, #ff5722)));
--rb-primary-fg: var(--primary-foreground, var(--rbc-primary-deep, #ffffff));
--rb-primary-soft: var(--accent-soft, var(--rbc-primary-soft, var(--rf-bg-soft, color-mix(in srgb, var(--rb-primary) 12%, transparent))));
--rb-accent: var(--accent, var(--rf-accent, var(--rbc-accent, var(--rb-primary))));
--rb-accent-fg: var(--accent-fg, var(--rbc-primary-deep, #ffffff));
/* ── Semantic ──────────────────────────────────────────── */
--rb-success: var(--success, var(--rf-success, var(--rbc-success, #22c55e)));
--rb-warning: var(--warning, var(--rf-warning, var(--rbc-warning, var(--warn, #f59e0b))));
--rb-danger: var(--danger, var(--rf-danger, var(--rbc-danger, #ef4444)));
--rb-info: var(--rf-info, var(--rbc-info, #3b82f6));
/* ── Borders ───────────────────────────────────────────── */
--rb-border: var(--border, var(--rf-border, var(--rbc-border, #e4e4ea)));
--rb-border-strong: var(--border-strong, var(--rbc-border-strong, var(--rb-border)));
--rb-border-soft: var(--rf-border-soft, var(--rb-border));
/* ── Layout ────────────────────────────────────────────── */
--rb-header-h: var(--header-h, var(--rb-header-height, 56px));
--rb-rail-w: var(--rail-w, 64px);
--rb-max-page-width: var(--rb-max-page-width, 1280px);
/* ── Radius ────────────────────────────────────────────── */
--rb-radius: var(--radius, var(--rf-radius, var(--rbc-radius, 10px)));
--rb-radius-sm: var(--radius-sm, var(--rf-radius-sm, var(--rbc-radius-sm, 6px)));
--rb-radius-lg: var(--radius-lg, var(--rbc-radius-lg, 16px));
--rb-radius-full: var(--rb-token-radius-full, 9999px);
/* ── Shadows ───────────────────────────────────────────── */
--rb-shadow-sm: var(--shadow-sm, var(--rbc-shadow-sm, var(--rb-token-shadow-sm, 0 1px 2px rgba(0,0,0,.05))));
--rb-shadow: var(--shadow, var(--rf-shadow, var(--rbc-shadow, var(--rb-token-shadow-md, 0 4px 6px rgba(0,0,0,.06)))));
--rb-shadow-lg: var(--shadow-lg, var(--rf-shadow-md, var(--rbc-shadow-lg, var(--rb-token-shadow-lg, 0 12px 24px rgba(0,0,0,.10)))));
/* ── Motion ────────────────────────────────────────────── */
--rb-duration-fast: var(--rbc-fast, var(--rb-token-duration-fast, 150ms));
--rb-duration: var(--rb-token-duration-base, 250ms);
--rb-ease: var(--rbc-easing, var(--rb-token-ease-default, cubic-bezier(.4,0,.2,1)));
/* ── Typography ────────────────────────────────────────── */
--rb-font-sans: var(--font-sans, var(--rb-token-font-sans, 'Inter', system-ui, sans-serif));
--rb-font-mono: var(--font-mono, var(--rb-token-font-mono, 'JetBrains Mono', ui-monospace, monospace));
/* ── Reverse aliases — make legacy vars resolvable for any consumer ── */
/* If a theme/template uses --bg, --text, --header-h directly, point them at unified vars. */
--bg: var(--rb-bg);
--text: var(--rb-text);
--text-muted: var(--rb-text-muted);
--bg-alt: var(--rb-bg-alt);
--bg-elev: var(--rb-bg-elev);
--surface-2: var(--rb-surface-2);
--header-h: var(--rb-header-h);
--rail-w: var(--rb-rail-w);
--shadow-sm: var(--rb-shadow-sm);
--shadow-md: var(--rb-shadow);
--shadow-lg: var(--rb-shadow-lg);
--border-strong: var(--rb-border-strong);
--warn: var(--rb-warning);
--accent-fg: var(--rb-accent-fg);
--accent-soft: var(--rb-primary-soft);
}
/* Dark-mode flip — both selectors used in codebase (html[data-theme=dark] + body.rf-dark) */
html[data-theme="dark"],
body.rf-dark,
body.rb-dark {
--rb-bg: var(--rf-dark-bg, #1a2031);
--rb-bg-alt: var(--rf-dark-surface-2, #22222c);
--rb-bg-elev: var(--rf-dark-surface, #232a3c);
--rb-surface: var(--rf-dark-surface, #232a3c);
--rb-surface-2: var(--rf-dark-surface-2, #2a3247);
--rb-text: var(--rf-dark-text, #e5e7eb);
--rb-text-muted: var(--rf-dark-text-2, #a3abbe);
--rb-text-faint: var(--rf-dark-text-mute, #7a839a);
--rb-border: var(--rf-dark-border, #353d52);
--rb-border-soft: rgba(255,255,255,0.06);
}
/* ══════════════════════════════════════════════════════════════════
RTL — Right-to-Left support (Phase 12 Tier E)
Themes opt in via theme.json `features: ["rtl"]` (currently classic has it).
Templates set based on user language; CSS below flips
directional spacing, borders, and shadows automatically.
Default: LTR. Activate by adding dir="rtl" to .
══════════════════════════════════════════════════════════════════ */
:root {
/* Logical properties — these resolve correctly in both LTR and RTL.
Templates should prefer these over physical (left/right) when possible. */
--rb-start: left;
--rb-end: right;
--rb-text-align-start: left;
--rb-text-align-end: right;
}
[dir="rtl"] {
--rb-start: right;
--rb-end: left;
--rb-text-align-start: right;
--rb-text-align-end: left;
}
/* Auto-flip common directional patterns for RTL. */
[dir="rtl"] .rb-list-row--active {
border-left: 0;
border-right: 3px solid var(--rb-primary);
padding-left: 14px;
padding-right: 11px;
}
[dir="rtl"] .rb-card__head svg,
[dir="rtl"] .rb-card__head i.fa-chevron-right { transform: scaleX(-1); }
[dir="rtl"] .rb-dropdown { left: auto; right: 0; }
[dir="rtl"] .rb-btn i { margin-left: 0; margin-right: 4px; }
/* HTML logical-properties — modern browsers (margin-inline-start etc.)
These work in both directions automatically. Themes can use:
margin-inline-start: 8px; → respects dir attribute
padding-inline-end: 12px; → same
border-inline-start: ... → flips on RTL
*/
/* Body class for RTL state (when JS detects it) */
body.rb-rtl { direction: rtl; text-align: right; }
/* === utilities.css === */
/* ═══════════════════════════════════════════════════════════════════
RaxBoard UI utilities
-------------------------------------------------------------------
Replaces the most-repeated inline style="…" patterns across the
templates. Keep this file intentionally tiny — every class here
represents >10 repetitions in the template tree.
Naming follows the existing var() contract (no new token names).
Classes are NOT Tailwind-atomic; they express intent, not shape.
=================================================================== */
/* ── Text color shortcuts (ranked by repetition count) ────────── */
.text-fg { color: var(--foreground); }
.text-muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
/* ── Surface patterns ─────────────────────────────────────────── */
/* 92 occurrences of "background: var(--surface); border: 1px solid var(--border);" */
.surface-card {
background: var(--surface);
border: 1px solid var(--border);
}
/* 39 occurrences of the same + foreground color */
.surface-card-fg {
background: var(--background);
border: 1px solid var(--border);
color: var(--foreground);
}
/* ── Divider helpers ──────────────────────────────────────────── */
/* 20 occurrences of "border-bottom: 1px solid var(--border);" */
.divider-y { border-bottom: 1px solid var(--border); }
/* 16 occurrences of "border-top: 1px solid var(--border);" */
.divider-y-top { border-top: 1px solid var(--border); }
/* ── Layout primitives ────────────────────────────────────────── */
.w-full { width: 100%; }
.hidden { display: none; }
/* ── Hover background ─────────────────────────────────────────── */
/* Replaces hundreds of onmouseover/onmouseout inline JS handlers */
.hover-muted {
transition: background-color .12s ease;
}
.hover-muted:hover {
background-color: var(--muted);
}
/* Primary-tinted hover (used in nav lists, list rows, menu items) */
.hover-primary-soft {
transition: background-color .12s ease;
}
.hover-primary-soft:hover {
background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* === banner.css === */
/* ─── User Group Banners ───────────────────────────────────── */
.userBanner {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 12px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--banner-fg, #fff);
line-height: 1.6;
white-space: nowrap;
}
.userBanner i {
font-size: 0.65rem;
}
.userBanner--hidden {
display: none;
}
/* ─── Solid Gradient Banners ──────────────────────────────── */
/* Gradient = rgba white overlay stacked on top of custom property bg */
.userBanner--primary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #ff5722);
border-radius: 3px;
}
.userBanner--accent {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #a855f7);
border-radius: 3px;
}
.userBanner--red {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #ef4444);
border-radius: 3px;
}
.userBanner--green {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #22c55e);
border-radius: 3px;
}
.userBanner--olive {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #84cc16);
color: var(--banner-fg, #1a2e00);
border-radius: 3px;
}
.userBanner--lightGreen {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #34d399);
color: var(--banner-fg, #064e3b);
border-radius: 3px;
}
.userBanner--blue {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #3b82f6);
border-radius: 3px;
}
.userBanner--royalBlue {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #f24b18);
border-radius: 3px;
}
.userBanner--skyBlue {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #0ea5e9);
border-radius: 3px;
}
.userBanner--gray {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #6b7280);
border-radius: 3px;
}
.userBanner--silver {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #94a3b8);
color: var(--banner-fg, #1e293b);
border-radius: 3px;
}
.userBanner--yellow {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #eab308);
color: var(--banner-fg, #422006);
border-radius: 3px;
}
.userBanner--orange {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #f97316);
border-radius: 3px;
}
/* ─── Outlined / Pill Banners ─────────────────────────────── */
.userBanner--crimsonOutline {
background: transparent;
border: 2px solid var(--banner-bg, #8b2252);
color: var(--banner-fg, #8b2252);
border-radius: 20px;
padding: 2px 14px;
}
.userBanner--crimsonSolid {
background: var(--banner-bg, #7b2d3b);
border-radius: 4px;
}
.userBanner--violetOutline {
background: transparent;
border: 2px solid var(--banner-bg, #6d28d9);
color: var(--banner-fg, #6d28d9);
border-radius: 20px;
padding: 2px 14px;
}
.userBanner--violetSolid {
background: var(--banner-bg, #5b21b6);
border-radius: 4px;
}
.userBanner--aquaOutline {
background: transparent;
border: 2px solid var(--banner-bg, #0891b2);
color: var(--banner-fg, #0891b2);
border-radius: 20px;
padding: 2px 14px;
}
/* ─── Deep Solid Banners ──────────────────────────────────── */
.userBanner--steelBlue {
background: var(--banner-bg, #2563eb);
border-radius: 4px;
}
.userBanner--navyBlue {
background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.12)), var(--banner-bg, #1e3a5f);
border-radius: 4px;
}
.userBanner--deepTeal {
background: var(--banner-bg, #0f766e);
border-radius: 4px;
}
/* ─── Diagonal Stripe Banners ─────────────────────────────── */
/* Stripe = semi-transparent black overlay pattern on top of custom bg */
.userBanner--emeraldStripe {
background:
repeating-linear-gradient(-55deg,
transparent,
transparent 8px,
rgba(0, 0, 0, 0.18) 8px,
rgba(0, 0, 0, 0.18) 16px),
var(--banner-bg, #059669);
border-radius: 4px;
}
.userBanner--tealStripe {
background:
repeating-linear-gradient(-55deg,
transparent,
transparent 8px,
rgba(0, 0, 0, 0.18) 8px,
rgba(0, 0, 0, 0.18) 16px),
var(--banner-bg, #0d9488);
border-radius: 4px;
}
/* ─── Warm & Dark Solids ──────────────────────────────────── */
.userBanner--amber {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)), var(--banner-bg, #b45309);
border-radius: 4px;
}
.userBanner--orangeOutline {
background: transparent;
border: 2px solid var(--banner-bg, #ea580c);
color: var(--banner-fg, #ea580c);
border-radius: 20px;
padding: 2px 14px;
}
.userBanner--tealSolid {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)), var(--banner-bg, #0d9488);
border-radius: 4px;
}
.userBanner--charcoal {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08)), var(--banner-bg, #1e293b);
border-radius: 4px;
}
/* ─── Custom banner colors ─────────────────────────────────── */
.userBanner--custom {
background: var(--banner-bg, #ff5722);
border-radius: 3px;
}
/* === bbcode.css === */
/* ═══════════════════════════════════════
BBCode Rendered Content Styles
Used in post bodies, profile about/signature
═══════════════════════════════════════ */
/* Quote */
.bbcode-quote {
border-left: 3px solid var(--color-primary-500);
background: var(--color-surface-raised, rgba(255, 87, 34, 0.04));
padding: 0.5rem 0.75rem;
margin: 0.35rem 0;
border-radius: 0 0.375rem 0.375rem 0;
font-style: normal;
font-size: 0.875rem;
line-height: 1.5;
}
/* Hide stray
after quote blocks */
.bbcode-quote+br {
display: none;
}
.bbcode-quote+br+br {
display: none;
}
.dark .bbcode-quote {
background: var(--color-dark-elevated, rgba(255, 87, 34, 0.06));
}
.bbcode-quote .bbcode-quote-author {
font-size: 0.75rem;
font-weight: 600;
font-style: normal;
color: var(--color-primary-500);
margin-bottom: 0.2rem;
}
.bbcode-quote cite {
display: block;
font-size: 0.75rem;
font-weight: 600;
font-style: normal;
color: var(--color-primary-500);
margin-bottom: 0.2rem;
}
/* Collapsible quotes — long text OR media/embed quotes clamp to a light
preview with a "Click to expand" toggle (wired by quote-expand.js, which
adds .bbcode-quote__expand and toggles .is-expanded). */
.bbcode-quote[data-collapsible] .bbcode-quote-content {
position: relative;
max-height: 150px;
overflow: hidden;
transition: max-height 0.25s ease;
}
.bbcode-quote[data-collapsible]:not(.is-expanded) .bbcode-quote-content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60px;
background: linear-gradient(to bottom, rgba(255, 87, 34, 0), var(--color-surface-raised, rgba(255, 87, 34, 0.04)));
pointer-events: none;
}
.bbcode-quote.is-expanded .bbcode-quote-content {
max-height: none;
}
.bbcode-quote__expand {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 0.4rem;
padding: 4px 10px;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary-500);
background: transparent;
border: 1px solid var(--color-border, rgba(127, 127, 127, 0.25));
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.bbcode-quote__expand:hover {
background: var(--color-surface-raised, rgba(255, 87, 34, 0.08));
}
.dark .bbcode-quote[data-collapsible]:not(.is-expanded) .bbcode-quote-content::after {
background: linear-gradient(to bottom, rgba(255, 87, 34, 0), var(--color-dark-elevated, rgba(255, 87, 34, 0.06)));
}
/* ── Internal content preview cards ([urlpreview]) ──────────────────────── */
.rb-embed {
display: flex;
align-items: stretch;
gap: 12px;
max-width: 560px;
margin: 10px 0;
padding: 12px 14px 12px 16px;
border: 1px solid var(--color-border, rgba(127, 127, 127, 0.18));
border-radius: 14px;
background: var(--color-surface, #ffffff);
text-decoration: none;
color: var(--color-text-primary, #0f172a);
position: relative;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rb-embed::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--color-primary-500, #ff5722);
}
.rb-embed--user::before { background: #8b5cf6; }
.rb-embed--post::before { background: #0ea5e9; }
.rb-embed--forum::before { background: #10b981; }
.rb-embed:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
border-color: var(--color-primary-500, #ff5722);
}
.rb-embed__avatar {
width: 42px;
height: 42px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.rb-embed__avatar--lg { width: 54px; height: 54px; border-radius: 12px; }
.rb-embed__icon {
width: 42px;
height: 42px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 185, 129, 0.12);
color: #10b981;
font-size: 1.05rem;
}
.rb-embed__body {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.rb-embed__head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rb-embed__title {
font-weight: 700;
font-size: 0.92rem;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.rb-embed__prefix {
font-size: 0.66rem;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 4px 8px;
white-space: nowrap;
}
.rb-embed__kind {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted, #94a3b8);
border: 1px solid var(--color-border, rgba(127, 127, 127, 0.25));
border-radius: 4px;
padding: 2px 6px;
}
.rb-embed__rank { font-size: 0.72rem; color: var(--color-text-muted, #94a3b8); }
.rb-embed__byline {
font-size: 0.74rem;
color: var(--color-text-muted, #94a3b8);
display: flex;
gap: 6px;
align-items: center;
}
.rb-embed__by { font-weight: 600; }
.rb-embed__dot { opacity: 0.5; }
.rb-embed__excerpt {
font-size: 0.8rem;
line-height: 1.45;
color: var(--color-text-muted, #94a3b8);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rb-embed__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 2px;
font-size: 0.74rem;
color: var(--color-text-muted, #94a3b8);
}
.rb-embed__m { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rb-embed__m i { font-size: 0.78em; opacity: 0.8; }
.rb-embed__chev {
display: flex;
align-items: center;
color: var(--color-text-muted, #94a3b8);
opacity: 0.45;
font-size: 0.8rem;
}
.rb-embed:hover .rb-embed__chev { opacity: 1; color: var(--color-primary-500, #ff5722); }
/* Editor placeholder chip while composing (round-trips to [urlpreview]) */
.bbcode-embed-internal {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
margin: 8px 0;
border: 1px dashed var(--color-border, rgba(127, 127, 127, 0.35));
border-radius: 10px;
background: var(--color-surface, #ffffff);
font-size: 0.82rem;
color: var(--color-text-muted, #94a3b8);
}
/* Code Block Wrapper */
.bbcode-code-wrap {
margin: 0.5rem 0;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--color-border-dark, rgba(255, 255, 255, 0.08));
background: #0d1117;
}
/* Code Header (language + copy) */
.bbcode-code-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.75rem;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bbcode-code-lang {
display: inline-block;
font-size: 0.65rem;
font-weight: 600;
color: var(--color-primary-400, #ff8a5c);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bbcode-code-copy {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.4);
background: none;
border: none;
cursor: pointer;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
transition: all 0.2s;
}
.bbcode-code-copy:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.08);
}
.bbcode-code-copy.copied {
color: #22c55e;
}
/* Code Block */
.bbcode-code {
background: #0d1117;
color: #e0e0e0;
padding: 0.75rem;
margin: 0;
overflow-x: auto;
font-size: 0.8rem;
line-height: 1.6;
display: flex;
gap: 0.75rem;
}
.bbcode-code code {
background: transparent;
color: inherit;
font-size: inherit;
padding: 0;
flex: 1;
white-space: pre-wrap;
word-break: break-word;
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}
/* Line Numbers */
.bbcode-code-lines {
display: flex;
flex-direction: column;
text-align: right;
user-select: none;
min-width: 2rem;
border-right: 1px solid rgba(255, 255, 255, 0.06);
padding-right: 0.75rem;
}
.bbcode-code-ln {
font-size: 0.7rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.2);
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
/* ── Light Mode: Code Blocks ── */
[data-theme="light"] .bbcode-code-wrap {
background: #f8f9fc !important;
border-color: #e2e8f0 !important;
}
[data-theme="light"] .bbcode-code-header {
background: #f1f5f9 !important;
border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .bbcode-code-lang {
color: var(--color-primary-600, #f24b18) !important;
}
[data-theme="light"] .bbcode-code-copy {
color: #64748b !important;
}
[data-theme="light"] .bbcode-code-copy:hover {
color: #1e293b !important;
background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .bbcode-code {
background: #f8f9fc !important;
color: #334155 !important;
}
[data-theme="light"] .bbcode-code code {
color: #334155 !important;
background: transparent !important;
}
[data-theme="light"] .bbcode-code-lines {
border-right-color: #e2e8f0 !important;
}
[data-theme="light"] .bbcode-code-ln {
color: #94a3b8 !important;
}
/* Inline code */
.bbcode-icode {
background: var(--color-surface-raised, rgba(255, 87, 34, 0.08));
color: var(--color-primary-600, #ff5722);
padding: 0.15em 0.4em;
border-radius: 0.25rem;
font-size: 0.85em;
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.dark .bbcode-icode {
background: rgba(255, 87, 34, 0.12);
color: var(--color-primary-400);
}
/* Spoiler */
.bbcode-spoiler {
margin: 0.5rem 0;
border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
border-radius: 0.5rem;
overflow: hidden;
}
.dark .bbcode-spoiler {
border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}
.bbcode-spoiler>summary {
cursor: pointer;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
background: var(--color-surface-raised, rgba(0, 0, 0, 0.02));
user-select: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dark .bbcode-spoiler>summary {
background: var(--color-dark-elevated, rgba(255, 255, 255, 0.03));
}
.bbcode-spoiler>summary::before {
content: '▶';
font-size: 0.6rem;
transition: transform 0.2s;
}
.bbcode-spoiler[open]>summary::before {
transform: rotate(90deg);
}
.bbcode-spoiler> :not(summary) {
padding: 0.75rem;
}
/* Inline spoiler */
.bbcode-ispoiler:hover,
.bbcode-ispoiler:focus,
.bbcode-ispoiler.revealed {
color: inherit;
background: var(--color-surface-raised, rgba(0, 0, 0, 0.06));
}
.dark .bbcode-ispoiler {
background: rgba(255, 255, 255, 0.15);
}
.dark .bbcode-ispoiler:hover,
.dark .bbcode-ispoiler.revealed {
background: rgba(255, 255, 255, 0.06);
}
/* List */
.bbcode-list {
padding-left: 1.5rem;
margin: 0.25rem 0;
list-style-type: disc;
}
/* WYSIWYG editor list styles — !important to override CSS resets */
.wysiwyg-editor ul,
.wysiwyg-editor ol {
padding-left: 1.5rem !important;
margin: 0.25rem 0 !important;
display: block !important;
}
.wysiwyg-editor ul {
list-style-type: disc !important;
}
.wysiwyg-editor ol {
list-style-type: decimal !important;
}
.wysiwyg-editor li {
margin: 0.15rem 0;
display: list-item !important;
}
/* Table */
.bbcode-table {
width: 100%;
border-collapse: collapse;
margin: 0.5rem 0;
font-size: 0.85rem;
}
.bbcode-th,
.bbcode-td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
text-align: left;
}
.dark .bbcode-th,
.dark .bbcode-td {
border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}
.bbcode-th {
font-weight: 600;
background: var(--color-surface-raised, rgba(0, 0, 0, 0.03));
}
.dark .bbcode-th {
background: var(--color-dark-elevated, rgba(255, 255, 255, 0.04));
}
/* Indent */
.bbcode-indent {
margin: 0.25rem 0;
}
/* Heading */
.bbcode-heading {
margin: 0.5rem 0 0.25rem;
font-weight: 700;
}
/* Horizontal Rule */
.bbcode-hr {
border: none;
border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
margin: 0.75rem 0;
}
.dark .bbcode-hr {
border-color: var(--color-border-dark, rgba(255, 255, 255, 0.08));
}
/* PHP/HTML code blocks */
.bbcode-php,
.bbcode-html {
background: #0d1117;
color: #e0e0e0;
padding: 1rem;
margin: 0.5rem 0;
border-radius: 0.5rem;
overflow-x: auto;
font-size: 0.8rem;
border: 1px solid var(--color-border-dark, rgba(255, 255, 255, 0.08));
}
/* ── Light Mode: PHP/HTML blocks ── */
[data-theme="light"] .bbcode-php,
[data-theme="light"] .bbcode-html {
background: #f8f9fc;
color: #334155;
border-color: #e2e8f0;
}
/* Mention */
.bbcode-mention {
font-weight: 600;
color: var(--color-primary-500);
cursor: pointer;
}
.bbcode-mention:hover {
text-decoration: underline;
}
/* Discord-style group mention chip — inert (no click), distinct background
so @everyone / @admin / @staff / @mods / @users are visually obvious. */
.bbcode-mention--group {
cursor: default;
padding: 0 0.4em;
border-radius: 0.35em;
background: color-mix(in srgb, var(--color-primary-500, #ff5722) 18%, transparent);
color: var(--color-primary-700, var(--color-primary-500, #d2410f));
text-decoration: none !important;
font-weight: 700;
}
.bbcode-mention--group:hover {
background: color-mix(in srgb, var(--color-primary-500, #ff5722) 28%, transparent);
}
.bbcode-mention--everyone,
.bbcode-mention--users {
background: color-mix(in srgb, var(--color-warn, #f59e0b) 22%, transparent);
color: var(--color-warn, #b45309);
}
.bbcode-mention--admin {
background: color-mix(in srgb, var(--color-danger, #ef4444) 22%, transparent);
color: var(--color-danger, #b91c1c);
}
.bbcode-mention--staff,
.bbcode-mention--mods {
background: color-mix(in srgb, var(--color-success, #10b981) 22%, transparent);
color: var(--color-success, #047857);
}
/* Embed */
.bbcode-embed {
max-width: 100%;
margin: 0.5rem 0;
}
.bbcode-embed iframe {
max-width: 100%;
border-radius: 0.5rem;
}
/* Attachment placeholder */
.bbcode-attach {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
background: var(--color-surface-raised, rgba(255, 87, 34, 0.06));
border-radius: 0.25rem;
font-size: 0.8rem;
color: var(--color-primary-500);
text-decoration: none;
}
.bbcode-attach:hover {
text-decoration: underline;
}
/* [hide] family — conditional visibility blocks. */
.bbcode-hide {
margin: 0.5rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid var(--color-primary-500, #4a90e2);
border-radius: 0.25rem;
background: var(--color-surface-variant, rgba(0, 0, 0, 0.03));
}
.bbcode-hide-visible {
border-left-color: var(--color-success, #2e7d32);
}
.bbcode-hide-locked {
border-left-color: var(--color-warning, #f59e0b);
color: var(--color-on-surface-muted, #b45309);
font-style: italic;
display: flex;
align-items: center;
gap: 0.5rem;
}
.bbcode-hide-icon {
flex-shrink: 0;
opacity: 0.75;
}
.bbcode-hide-message {
font-size: 0.9em;
}
.bbcode-hide-menu button {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.4rem 0.75rem;
text-align: left;
background: transparent;
border: none;
cursor: pointer;
font-size: 0.85rem;
}
/* Inline spoiler click handler */
.bbcode-ispoiler {
background: var(--color-on-surface, #333);
color: transparent;
padding: 0.1em 0.3em;
border-radius: 0.2rem;
cursor: pointer;
transition: color 0.2s;
user-select: none;
}
/* ── Multi-language [lang] tab widget (built by lang-tabs.js) ── */
.bbcode-lang-tabs {
/* Integrated into the post body (post-prose): no surrounding card box —
just a tab strip + flush content, so it reads as part of the message. */
margin: 14px 0;
}
.bbcode-lang-tabbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0;
border-bottom: 1px solid var(--border, #e4e4ea);
background: transparent;
}
.bbcode-lang-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 0;
background: transparent;
color: var(--muted-foreground, #6b7280);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
border-radius: 8px 8px 0 0;
border-bottom: 2px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
line-height: 1.4;
}
.bbcode-lang-tab:hover {
background: var(--muted, rgba(0,0,0,0.04));
color: var(--foreground, #18181b);
}
.bbcode-lang-tab.is-active {
color: var(--primary, #2563eb);
border-bottom-color: var(--primary, #2563eb);
background: var(--surface, #fff);
}
.bbcode-lang-tab .bbcode-lang-flag {
width: 20px;
height: 15px;
flex-shrink: 0;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
display: inline-block;
vertical-align: middle;
}
/* ── Multi-language composer modal ── */
.rb-langc-overlay {
position: fixed; inset: 0; z-index: 10060;
display: flex; align-items: flex-start; justify-content: center;
padding: 5vh 16px; background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
}
.rb-langc-dialog {
width: 100%; max-width: 860px; max-height: 90vh;
display: flex; flex-direction: column;
background: var(--surface, #18181b);
border: 1px solid var(--border, #2a2a2e);
border-radius: 14px; overflow: hidden;
box-shadow: 0 24px 64px -12px rgba(0,0,0,0.5);
}
.rb-langc-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--border, #2a2a2e);
}
.rb-langc-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rb-langc-head h3 i { color: var(--primary, #f24b18); }
.rb-langc-x { border: 0; background: none; cursor: pointer; color: var(--muted-foreground, #999); font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.rb-langc-x:hover { background: var(--muted, rgba(0,0,0,0.05)); color: var(--foreground, #fff); }
.rb-langc-add { padding: 12px 18px 0; }
.rb-langc-search { position: relative; }
.rb-langc-search .rb-input { width: 100%; padding: 8px 12px; font-size: 14px; }
.rb-langc-suggest {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
max-height: 260px; overflow-y: auto;
background: var(--surface, #18181b);
border: 1px solid var(--border, #2a2a2e); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 4px;
}
.rb-langc-suggest-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 7px 10px; border: 0; background: none; cursor: pointer;
border-radius: 6px; font-size: 14px; color: var(--foreground, #fff); text-align: left;
}
.rb-langc-suggest-item:hover { background: var(--muted, rgba(0,0,0,0.06)); }
.rb-langc-code { margin-left: auto; opacity: .5; font-size: 11px; text-transform: uppercase; }
.rb-langc-flag { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size: 1.1em; line-height: 1; flex-shrink: 0; }
.rb-langc-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 18px 0; }
.rb-langc-tab {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 10px 6px 12px; border: 1px solid var(--border, #2a2a2e);
background: var(--surface-2, #202024); color: var(--muted-foreground, #999);
border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.rb-langc-tab.is-active { color: var(--foreground, #fff); border-color: var(--primary, #f24b18); box-shadow: inset 0 -2px 0 var(--primary, #f24b18); }
.rb-langc-tab-x { font-size: 11px; opacity: .5; padding: 2px; border-radius: 4px; }
.rb-langc-tab-x:hover { opacity: 1; color: #ef4444; }
.rb-langc-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.rb-langc-empty { padding: 40px 18px; text-align: center; color: var(--muted-foreground, #999); }
.rb-langc-empty i { font-size: 30px; opacity: .4; display: block; margin-bottom: 10px; }
.rb-langc-empty p { margin: 0; font-size: 13.5px; }
.rb-langc-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--border, #2a2a2e);
}
.bbcode-lang-panels {
padding: 14px 2px 0;
}
.bbcode-lang-panel {
display: none;
}
.bbcode-lang-panel.is-active {
display: block;
animation: bbcodeLangFade 0.15s ease;
}
@keyframes bbcodeLangFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Pre-JS fallback: show every block stacked, labelled, so content is never
hidden if lang-tabs.js fails to run. */
.bbcode-lang-block + .bbcode-lang-block {
margin-top: 8px;
}
.bbcode-lang-block[data-lang]::before {
content: attr(data-lang-name);
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted-foreground, #6b7280);
margin-bottom: 4px;
}
/* ── Image gallery slider ([gallery] BBCode) ── */
.bbcode-gallery {
/* Fill the post body width (block), regardless of [center] wrapping —
no fixed 640px cap so it sits flush inside .post-prose / .bbcode-content. */
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 12px 0;
border: 1px solid var(--border, #2a2a2e);
border-radius: 12px;
overflow: hidden;
background: var(--surface-2, #16161a);
outline: none;
}
.bbcode-gallery * { box-sizing: border-box; }
.bbcode-gallery__viewport {
position: relative;
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
cursor: pointer;
}
.bbcode-gallery__track { width: 100%; display: block; }
.bbcode-gallery__slide { display: none; text-align: center; }
.bbcode-gallery__slide.is-active { display: block; }
.bbcode-gallery__img {
display: block;
max-width: 100%;
max-height: 70vh;
margin: 0 auto;
object-fit: contain;
}
.bbcode-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
border: 0; border-radius: 50%;
background: rgba(0,0,0,0.45);
color: #fff; font-size: 16px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
z-index: 2;
}
.bbcode-gallery__nav:hover { background: rgba(0,0,0,0.7); }
.bbcode-gallery__nav--prev { left: 8px; }
.bbcode-gallery__nav--next { right: 8px; }
.bbcode-gallery__counter {
position: absolute;
bottom: 8px; right: 10px;
background: rgba(0,0,0,0.55);
color: #fff; font-size: 11px;
padding: 2px 8px; border-radius: 10px;
font-variant-numeric: tabular-nums;
z-index: 2;
}
.bbcode-gallery__dots {
display: flex; flex-wrap: wrap; gap: 6px;
justify-content: center;
padding: 8px;
}
.bbcode-gallery__dot {
width: 8px; height: 8px; border-radius: 50%;
border: 0; padding: 0; cursor: pointer;
background: var(--border, #3a3a3e);
transition: background .15s, transform .15s;
}
.bbcode-gallery__dot.is-active {
background: var(--primary, #f24b18);
transform: scale(1.25);
}
/* ── Gallery edit-block (inside the WYSIWYG editor) ── */
.bbcode-gallery-edit {
display: flex; gap: 6px; flex-wrap: wrap;
padding: 8px; margin: 6px 0;
border: 1px dashed var(--border, #2a2a2e);
border-radius: 8px;
position: relative;
}
.bbcode-gallery-edit::before {
content: "🖼 Gallery";
position: absolute; top: -9px; left: 8px;
font-size: 10px; font-weight: 700; letter-spacing: .04em;
background: var(--surface, #18181b); padding: 0 6px;
color: var(--muted-foreground, #888);
}
.bbcode-gallery-edit img {
width: 64px !important; height: 64px !important;
object-fit: cover; border-radius: 6px; margin: 0 !important;
}
/* ── Gallery builder UI (image dialog) ── */
.rb-gallery-build {
margin: 12px 0 4px; padding: 10px;
border: 1px solid var(--border, #2a2a2e); border-radius: 10px;
}
.rb-gallery-build__head {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; font-weight: 600; margin-bottom: 8px;
color: var(--foreground, #fff);
}
.rb-gallery-build__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-gallery-build__item { position: relative; width: 64px; height: 64px; }
.rb-gallery-build__item img {
width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
border: 1px solid var(--border, #2a2a2e);
}
.rb-gallery-build__rm {
position: absolute; top: -6px; right: -6px;
width: 20px; height: 20px; border-radius: 50%;
border: 0; cursor: pointer;
background: #ef4444; color: #fff; font-size: 10px;
display: flex; align-items: center; justify-content: center;
}
.rb-gallery-build__hint { font-size: 12px; color: var(--muted-foreground, #888); margin: 0; }
/* === banned.css === */
/* ═══ Banned User Visual Indicators ═══ */
/* Username strikethrough for banned users */
.username--banned {
text-decoration: line-through;
text-decoration-color: var(--danger, #dc2626);
text-decoration-thickness: 2px;
opacity: 0.7;
}
/* Avatar ban overlay container */
.avatar--banned {
position: relative;
display: inline-block;
border-radius: 9999px;
overflow: hidden;
}
/* Semi-transparent dark overlay on avatar (round) */
.avatar--banned>div:last-of-type,
.avatar--banned::after {
border-radius: 9999px;
}
/* Ban icon overlay on avatar */
.avatar--banned .avatar-ban-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: #ef4444;
font-size: 1.25em;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
pointer-events: none;
}
/* Ban badge next to username */
.ban-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.25);
vertical-align: middle;
margin-left: 0.35rem;
white-space: nowrap;
}
.ban-badge i {
font-size: 0.6rem;
}
/* === skeleton.css === */
/* ══════════════════════════════════════════════
Skeleton Loader System
Manifesto: "While data is loading, show an animated placeholder instead of blank space"
══════════════════════════════════════════════ */
/* ─── Base Skeleton Element ─── */
.skeleton {
position: relative;
overflow: hidden;
background: var(--skeleton-bg, rgba(128, 128, 128, 0.12));
border-radius: var(--radius-sm, 0.375rem);
}
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 40%,
rgba(255, 255, 255, 0.14) 50%,
rgba(255, 255, 255, 0.08) 60%,
transparent 100%);
animation: skeleton-shimmer 1.8s infinite ease-in-out;
transform: translateX(-100%);
}
[data-theme="light"] .skeleton::after {
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 0.04) 40%,
rgba(0, 0, 0, 0.07) 50%,
rgba(0, 0, 0, 0.04) 60%,
transparent 100%);
}
@keyframes skeleton-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* ─── Shape Variants ─── */
.skeleton--circle {
border-radius: 50%;
}
.skeleton--text {
height: 0.875rem;
border-radius: 0.25rem;
}
.skeleton--text-sm {
height: 0.625rem;
border-radius: 0.25rem;
}
.skeleton--text-lg {
height: 1.125rem;
border-radius: 0.25rem;
}
.skeleton--block {
border-radius: var(--radius, 0.75rem);
}
/* ─── Thread List Skeleton ─── */
.skeleton-thread-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skeleton-thread-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--card-bg, rgba(255, 255, 255, 0.03));
border-radius: var(--radius, 0.75rem);
border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.skeleton-thread-item__avatar {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
}
.skeleton-thread-item__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skeleton-thread-item__title {
width: 65%;
}
.skeleton-thread-item__meta {
display: flex;
gap: 1rem;
}
.skeleton-thread-item__meta-item {
width: 4rem;
}
.skeleton-thread-item__stats {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.375rem;
flex-shrink: 0;
}
.skeleton-thread-item__stat {
width: 2.5rem;
height: 0.75rem;
}
/* Vary widths for natural look */
.skeleton-thread-item:nth-child(2) .skeleton-thread-item__title {
width: 80%;
}
.skeleton-thread-item:nth-child(3) .skeleton-thread-item__title {
width: 50%;
}
.skeleton-thread-item:nth-child(4) .skeleton-thread-item__title {
width: 72%;
}
.skeleton-thread-item:nth-child(5) .skeleton-thread-item__title {
width: 60%;
}
/* ─── Widget Sidebar Skeleton ─── */
.skeleton-widget {
padding: 1rem;
background: var(--card-bg, rgba(255, 255, 255, 0.03));
border-radius: var(--radius, 0.75rem);
border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
margin-bottom: 1rem;
}
.skeleton-widget__title {
width: 40%;
height: 1rem;
margin-bottom: 1rem;
}
.skeleton-widget__item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
}
.skeleton-widget__item+.skeleton-widget__item {
border-top: 1px solid var(--border, rgba(255, 255, 255, 0.04));
}
.skeleton-widget__item-avatar {
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.skeleton-widget__item-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.skeleton-widget__item-line1 {
width: 70%;
}
.skeleton-widget__item-line2 {
width: 45%;
}
/* Vary widget item widths */
.skeleton-widget__item:nth-child(2) .skeleton-widget__item-line1 {
width: 55%;
}
.skeleton-widget__item:nth-child(3) .skeleton-widget__item-line1 {
width: 80%;
}
/* ─── Forum Card Skeleton ─── */
.skeleton-forum-card {
padding: 1.25rem;
background: var(--card-bg, rgba(255, 255, 255, 0.03));
border-radius: var(--radius, 0.75rem);
border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.skeleton-forum-card__icon {
width: 3rem;
height: 3rem;
flex-shrink: 0;
}
.skeleton-forum-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.skeleton-forum-card__title {
width: 45%;
height: 1rem;
}
.skeleton-forum-card__desc {
width: 70%;
}
.skeleton-forum-card__stats {
display: flex;
gap: 1.5rem;
flex-shrink: 0;
}
.skeleton-forum-card__stat {
width: 3rem;
height: 2rem;
}
/* ─── htmx Loading State ─── */
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
opacity: 1;
}
/* Top progress bar enhancement */
#rb-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 150ms ease;
}
#rb-progress.htmx-request {
opacity: 1;
background: linear-gradient(90deg,
var(--primary, #ff5722) 0%,
var(--primary-light, #ff8a5c) 50%,
var(--primary, #ff5722) 100%);
background-size: 200% 100%;
animation: progress-slide 1.2s linear infinite;
}
@keyframes progress-slide {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Page content fade during htmx swap */
[hx-boost] .htmx-swapping {
opacity: 0.6;
transition: opacity 200ms ease-out;
}
/* ─── Utility: Pulse alternative ─── */
.skeleton--pulse {
animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes skeleton-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
/* ─── Responsive: stack skeleton items on mobile ─── */
@media (max-width: 640px) {
.skeleton-thread-item {
padding: 0.75rem;
}
.skeleton-thread-item__stats {
display: none;
}
.skeleton-forum-card__stats {
display: none;
}
}
/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
.skeleton::after {
animation: none;
}
.skeleton--pulse {
animation: none;
}
#rb-progress.htmx-request {
animation: none;
background: var(--primary, #ff5722);
}
}
/* === core.css === */
/* ══════════════════════════════════════════════════════════
RaxBoard Core Styles — Extracted from layouts/main.php
This file is served as a static asset for browser caching.
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
Typography Scale — Design Tokens (1.25 Modular Scale)
══════════════════════════════════════════════════════════ */
/* ── Semantic Element Mappings ── */
h1 {
font-size: var(--rb-text-2xl);
font-weight: var(--rb-weight-bold);
line-height: var(--rb-leading-tight);
letter-spacing: var(--rb-tracking-tight);
}
h2 {
font-size: var(--rb-text-xl);
font-weight: var(--rb-weight-semibold);
line-height: var(--rb-leading-tight);
}
h3 {
font-size: var(--rb-text-lg);
font-weight: var(--rb-weight-semibold);
line-height: var(--rb-leading-snug);
}
h4 {
font-size: var(--rb-text-md);
font-weight: var(--rb-weight-semibold);
line-height: var(--rb-leading-snug);
}
h5 {
font-size: var(--rb-text-base);
font-weight: var(--rb-weight-semibold);
line-height: var(--rb-leading-normal);
}
h6 {
font-size: var(--rb-text-sm);
font-weight: var(--rb-weight-semibold);
line-height: var(--rb-leading-normal);
text-transform: uppercase;
letter-spacing: var(--rb-tracking-wide);
}
small,
.text-sm {
font-size: var(--rb-text-sm);
}
.text-xs {
font-size: var(--rb-text-xs);
}
.text-2xs {
font-size: var(--rb-text-2xs);
}
.text-base {
font-size: var(--rb-text-base);
}
.text-lg {
font-size: var(--rb-text-lg);
}
.text-xl {
font-size: var(--rb-text-xl);
}
.text-2xl {
font-size: var(--rb-text-2xl);
}
.text-3xl {
font-size: var(--rb-text-3xl);
}
code,
pre,
.font-mono {
font-family: var(--rb-font-mono);
font-size: 0.9em;
}
/* ── Responsive Scale (Mobile) ── */
@media (max-width: 640px) {
:root {
--rb-text-2xl: 1.375rem;
--rb-text-3xl: 1.625rem;
--rb-text-4xl: 1.875rem;
}
}
/* ── View Transitions (Chrome 126+) ── */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: rb-fade-out 0.15s ease-out;
}
::view-transition-new(root) {
animation: rb-fade-in 0.15s ease-in;
}
@keyframes rb-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
@keyframes rb-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Top Loading Bar ── */
#rb-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
z-index: 99999;
background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff));
transition: width 0.2s ease;
box-shadow: 0 0 8px var(--primary);
pointer-events: none;
display: none;
}
/* ── htmx Swap Fade (fallback) ── */
.htmx-swapping {
opacity: 0;
transition: opacity 0.1s ease-out;
}
/* ── Accessibility: Skip to Content ── */
.skip-to-content {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
z-index: 100000;
padding: 0.75rem 1.5rem;
background: var(--primary);
color: #fff;
border-radius: 0 0 0.5rem 0.5rem;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-to-content:focus {
top: 0;
outline: none;
}
/* ── Accessibility: Focus Ring ── */
*:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
@view-transition {
navigation: none;
}
.htmx-swapping {
transition: none;
}
}
/* ══════════════════════════════════════════════════════════
Component Bridge — connects --rb-* CSS variables to elements
══════════════════════════════════════════════════════════ */
/* ── Footer ── */
footer {
color: var(--rb-footer-text-color, var(--muted-foreground));
}
footer h4 {
color: var(--rb-footer-text-color, var(--foreground)) !important;
}
footer a:not(.no-underline-override) {
color: var(--rb-footer-link-color, var(--muted-foreground)) !important;
}
footer a:hover {
color: var(--rb-footer-link-color, var(--primary)) !important;
opacity: 0.85;
}
/* ── Links ── */
a:not([class*="btn"]):not([class*="badge"]):not(.no-underline):not(nav a):not(footer a):not(header a):not([class*="-card"]):not([class*="-row"]):not([class*="-tile"]):not([class*="-link"]):not([class*="-item"]):not([class*="-chip"]):not(.chip):not(.tag) {
color: var(--rb-link-color, inherit);
}
a:not([class*="btn"]):not([class*="badge"]):not(.no-underline):not(nav a):not(footer a):not(header a):not([class*="-card"]):not([class*="-row"]):not([class*="-tile"]):not([class*="-link"]):not([class*="-item"]):not([class*="-chip"]):not(.chip):not(.tag):hover {
color: var(--rb-link-hover-color, var(--rb-link-color, inherit));
}
/* ── Buttons ── */
.btn-primary,
button[class*="primary"],
[class*="btn-primary"] {
background: var(--rb-btn-primary-bg, var(--primary)) !important;
color: var(--rb-btn-primary-text, #fff) !important;
border-radius: var(--rb-btn-border-radius, var(--radius-sm, 6px));
font-size: var(--rb-btn-font-size, inherit);
}
.btn-primary:hover,
button[class*="primary"]:hover,
[class*="btn-primary"]:hover {
background: var(--rb-btn-primary-hover, var(--rb-btn-primary-bg, var(--primary))) !important;
}
.btn-secondary,
[class*="btn-secondary"] {
background: var(--rb-btn-secondary-bg, var(--secondary)) !important;
color: var(--rb-btn-secondary-text, inherit) !important;
}
.btn-danger,
[class*="btn-danger"] {
background: var(--rb-btn-danger-bg, var(--destructive)) !important;
}
/* ── Color Picker ── */
input[type="color"] {
cursor: pointer;
}
/* ── Inputs & Forms ── */
input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
border-radius: var(--rb-input-border-radius, var(--radius-sm, 4px));
font-size: var(--rb-input-font-size, inherit);
}
/* ── Cards ── */
.card,
[class*="rounded-xl"][class*="border"],
.thread-card {
border-radius: var(--rb-card-border-radius, var(--radius-lg, 8px));
}
/* ── Badges ── */
.badge,
[class*="badge"] {
border-radius: var(--rb-badge-border-radius, 9999px);
font-size: var(--rb-badge-font-size, 0.65rem);
}
/* ── Message / Post ──
.post-body padding owned by theme (main.css) and post-wrapper override (rds.css).
Keep token-driven default for .message-content only to avoid cascade duplicates. */
.message-content {
padding: var(--rb-message-padding, 1.25rem);
}
/* ── Code Blocks ── */
pre,
code:not([class]) {
border-radius: var(--rb-card-border-radius, 6px);
}
/* ── Max Page Width ── */
/* Resolve through the same --container var as main.css so the cascade stays
consistent whether this bundle loads before or after the theme stylesheet
(htmx hx-boost swaps can change load order, causing header jitter). */
.max-w-screen-2xl {
max-width: var(--container, var(--container-max, var(--rb-max-page-width, 1280px)));
}
/* ── Font ── */
body {
font-family: var(--font-sans, var(--rb-font-sans, inherit));
font-size: var(--font-size, var(--rb-font-size-normal, 1rem));
}
/* ── Sub Navigation Bar ── */
.rb-sub-bar,
[data-component="sub-bar"] {
background: var(--rb-sub-bar-bg, color-mix(in srgb, var(--muted) 30%, transparent));
height: var(--rb-sub-bar-height, 44px);
}
.rb-sub-bar a,
[data-component="sub-bar"] a {
color: var(--rb-sub-bar-text-color, var(--muted-foreground));
}
.rb-sub-bar a:hover,
[data-component="sub-bar"] a:hover {
color: var(--rb-sub-bar-text-color, var(--foreground));
}
/* ── Breadcrumb ── */
.breadcrumb,
nav.breadcrumb,
[data-component="breadcrumb"] {
color: var(--rb-breadcrumb-color, var(--muted-foreground));
}
.breadcrumb .active,
.breadcrumb [aria-current],
.breadcrumb span:last-child {
color: var(--rb-breadcrumb-active-color, var(--foreground));
}
/* ── Forum Node List ── */
.forum-node,
[data-component="forum-node"] {
background: var(--rb-forum-node-bg, var(--surface));
border-color: var(--rb-forum-node-border, var(--border));
}
.forum-node:hover,
[data-component="forum-node"]:hover {
background: var(--rb-forum-node-hover-bg, color-mix(in srgb, var(--muted) 50%, transparent));
}
.forum-node .forum-icon,
.forum-node i.fas {
color: var(--rb-forum-node-icon-color, var(--primary));
}
/* ── Thread List ── */
.thread-item,
[data-component="thread-item"] {
background: var(--rb-thread-list-bg, var(--surface));
border-color: var(--rb-thread-list-border, var(--border));
}
.thread-item:hover,
[data-component="thread-item"]:hover {
background: var(--rb-thread-list-hover-bg, var(--muted));
}
.thread-item .thread-title,
.thread-item h4 a {
color: var(--rb-thread-list-title-color, var(--foreground));
}
/* ── Profile Page ── */
.profile-banner,
[data-component="profile-banner"] {
height: var(--rb-profile-banner-height, 200px);
background: var(--rb-profile-banner-gradient, linear-gradient(135deg, var(--primary), var(--accent)));
}
.profile-avatar,
[data-component="profile-avatar"] {
width: var(--rb-profile-avatar-size, 120px);
height: var(--rb-profile-avatar-size, 120px);
border-color: var(--rb-profile-avatar-border, var(--surface));
}
/* ── Auth Forms ── */
.auth-form,
[data-component="auth-form"] {
background: var(--rb-auth-form-bg, var(--surface));
border-color: var(--rb-auth-form-border, var(--border));
max-width: var(--rb-auth-form-max-width, 420px);
}
/* ── Content Typography ── */
.content-body a,
.post-content a,
.message-body a {
color: var(--rb-content-link-color, var(--primary));
}
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
color: var(--rb-content-heading-color, var(--foreground));
}
.content-body,
.post-content,
.message-body {
line-height: var(--rb-content-line-height, 1.7);
}
.thread-title-main,
h1.thread-title {
font-size: var(--rb-thread-title-size, 1.5rem);
}
.section-title {
font-size: var(--rb-section-title-size, 1.25rem);
}
/* ── Mobile Navigation ── */
.mobile-nav,
[data-component="mobile-nav"] {
background: var(--rb-mobile-nav-bg, var(--surface));
color: var(--rb-mobile-nav-text-color, var(--foreground));
}
/* ── Avatars ── */
/* .rb-avatar is the canonical class for all avatar elements.
border-radius comes from inline style: var(--rb-avatar-border-radius)
CSS class here is a FALLBACK only — no !important so inline style wins. */
.rb-avatar,
.avatar,
img.avatar,
[data-component="avatar"] {
border-radius: var(--rb-avatar-border-radius);
overflow: hidden;
}
/* Prevent underline hover on avatar links */
a:has(> .rb-avatar),
a:has(> .avatar),
a:has(> img.avatar),
a .rb-avatar,
a .avatar,
.rb-avatar,
.avatar {
text-decoration: none !important;
}
/* ══════════════════════════════════════════════════════════
Border Radius — Style Property Bridge
All rounded utilities & inline elements should pull from
--rb-border-radius-* CSS variables set by style properties.
══════════════════════════════════════════════════════════ */
/* ── Utility class overrides ── */
.rounded-sm {
border-radius: var(--rb-border-radius-small, 2px) !important;
}
.rounded,
.rounded-md {
border-radius: var(--rb-border-radius, 4px) !important;
}
.rounded-lg {
border-radius: var(--rb-border-radius-large, 6px) !important;
}
.rounded-xl {
border-radius: var(--rb-border-radius-medium, 0.75rem) !important;
}
.rounded-2xl {
border-radius: var(--rb-border-radius-medium, 0.75rem) !important;
}
.rounded-full {
border-radius: var(--rb-border-radius-full, 9999px) !important;
}
/* ── Avatar overrides for remaining template elements using .rounded-full ── */
img.rounded-full[class*="w-"],
img.rounded-full[class*="h-"],
div.rounded-full[class*="w-"][class*="items-center"][class*="justify-center"],
img[class*="avatar"],
div[class*="avatar"],
[data-avatar],
img.rounded-full.object-cover {
border-radius: var(--rb-avatar-border-radius);
}
/* Widget avatar images — controlled via style property */
.widget-no-card img[style*="border-radius"],
.widget-no-card div[style*="border-radius"] {
border-radius: var(--rb-avatar-border-radius);
}
/* Member list avatars */
.member-avatar,
.member-list img[style*="border-radius: 50%"],
.member-list img[style*="border-radius:50%"] {
border-radius: var(--rb-avatar-border-radius);
}
/* ── Tooltips ── */
[data-tooltip],
.tooltip-content {
background: var(--rb-tooltip-bg, var(--popover));
}
/* ══════════════════════════════════════════════════════════
Style Property Bridge — Layout & Chrome Components
These rules connect admin style properties to the public UI.
Each rule uses --rb-* as primary and old-format as fallback.
══════════════════════════════════════════════════════════ */
/* ── Header ── */
/* Scoped to top-level site header (direct child of body) + explicit data-component,
so nested elements like .rb-pp-head don't inherit min-height/bg. */
body > header,
[data-component="header"] {
background: var(--rb-header-bg, var(--surface));
color: var(--rb-header-text-color, var(--foreground));
min-height: var(--rb-header-height, 4rem);
border-bottom-color: var(--rb-header-border-color, var(--border));
}
body > header a:not(.rb-nav-active),
[data-component="header"] a:not(.rb-nav-active) {
color: var(--rb-header-text-color, var(--foreground));
}
/* ── Sticky Header ── */
body > header.sticky {
position: sticky;
top: 0;
}
/* ── Footer ── */
footer,
.rax-footer,
[data-component="footer"] {
background: var(--rb-footer-bg, var(--surface));
color: var(--rb-footer-text-color, var(--muted-foreground));
border-top-color: var(--rb-header-border-color, var(--border));
}
footer a,
.rax-footer a,
[data-component="footer"] a {
color: var(--rb-footer-link-color, var(--primary));
}
/* ── Navigation ── */
.rb-nav-item {
color: var(--rb-nav-text-color, var(--muted-foreground));
}
.rb-nav-item:hover {
background: var(--rb-nav-hover-bg, var(--muted));
}
.rb-nav-active,
.rb-nav-item.rb-nav-active {
color: var(--rb-nav-active-color, var(--primary)) !important;
}
/* ── Sub Navigation Bar ── */
.rax-sub-bar,
[data-component="sub-bar"],
nav[aria-label*="sub"] {
background: var(--rb-sub-bar-bg, color-mix(in srgb, var(--muted) 30%, transparent));
min-height: var(--rb-sub-bar-height, 44px);
color: var(--rb-sub-bar-text-color, var(--muted-foreground));
}
/* ── Breadcrumb ── */
.breadcrumb,
nav[aria-label="breadcrumb"],
[data-component="breadcrumb"] {
color: var(--rb-breadcrumb-color, var(--muted-foreground));
}
.breadcrumb .active,
.breadcrumb [aria-current],
[data-component="breadcrumb"] .active {
color: var(--rb-breadcrumb-active-color, var(--foreground));
}
.breadcrumb li + li::before,
.breadcrumb .separator {
content: var(--rb-breadcrumb-separator, '›');
}
/* ── Popover Background ── */
.popover,
[data-component="popover"],
[x-show][role="menu"],
[x-show][role="listbox"] {
background: var(--rb-popover-bg, var(--popover));
}
/* ── Secondary Foreground ── */
.btn-secondary,
[data-variant="secondary"] {
color: var(--rb-secondary-fg, var(--secondary-foreground, var(--foreground)));
}
/* ── Input Styling Bridge ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
background: var(--rb-input-bg, var(--input-background, var(--surface)));
border-color: var(--rb-input-border, var(--input, var(--border)));
}
/* ── Soft input with focus ring (P1: L2) ── */
.rb-input {
border: 1px solid var(--border);
background: var(--input-background, var(--surface, var(--background)));
color: var(--foreground);
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.rb-input::placeholder {
color: var(--muted-foreground);
opacity: 0.7;
}
.rb-input:focus,
.rb-input:focus-visible {
outline: 0;
border-color: var(--ring);
box-shadow: 0 0 0 3px var(--ring-alpha);
}
.rb-input[aria-invalid="true"],
.rb-input.is-invalid {
border-color: var(--danger, #dc2626);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #dc2626) 18%, transparent);
}
.rb-field-error {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.375rem;
font-size: 0.8125rem;
color: var(--danger, #dc2626);
animation: rb-field-err-in 180ms ease-out;
}
@keyframes rb-field-err-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rb-input { transition: none; }
.rb-field-error { animation: none; }
}
/* Mobile bottom navigation removed — kept blank to preserve line numbers in
refs but no rules emit any styles. */
/* ── Card & Popover Foreground ── */
.card,
[data-component="card"] {
color: var(--rb-card-fg, var(--card-foreground, var(--foreground)));
}
.popover,
[data-component="popover"],
[x-show][x-cloak][role="dialog"] {
color: var(--rb-popover-fg, var(--popover-foreground, var(--foreground)));
}
.btn-destructive,
.btn-danger,
[data-variant="destructive"] {
color: var(--rb-destructive-fg, #ffffff);
}
/* ── Durations & Animations ── */
/* ── Font Weight Bridge ── */
/* ══════════════════════════════════════════════════════════
Flash Messages & Toast Notifications
══════════════════════════════════════════════════════════ */
.flash-banner {
display: flex;
align-items: center;
gap: .75rem;
padding: .875rem 1.25rem;
border-radius: .5rem;
margin-bottom: 1rem;
font-size: .9rem;
font-weight: 500;
animation: flashSlideIn .3s ease-out;
cursor: pointer;
transition: opacity .2s;
}
.flash-success {
background: rgba(34, 197, 94, .12);
color: #16a34a;
border: 1px solid rgba(34, 197, 94, .25);
}
.flash-error {
background: rgba(239, 68, 68, .12);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, .25);
}
@keyframes flashSlideIn {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flash-banner.fade-out {
opacity: 0;
transform: translateY(-12px);
}
/* ── HTMX Error Toast ── */
.htmx-error-toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 99999;
max-width: 420px;
padding: 14px 20px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
color: #fff;
background: linear-gradient(135deg, #dc2626, #b91c1c);
border: 1px solid rgba(255, 255, 255, .15);
box-shadow: 0 8px 32px rgba(220, 38, 38, .35), 0 2px 8px rgba(0, 0, 0, .2);
transform: translateY(100px);
opacity: 0;
transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
cursor: pointer;
}
.htmx-error-toast.show {
transform: translateY(0);
opacity: 1;
}
.htmx-error-toast i {
margin-right: 8px;
}
/* ══════════════════════════════════════════════════════════
Thread Heat Indicators
══════════════════════════════════════════════════════════ */
.thread-heat {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
}
.thread-heat--trending {
background: rgba(239, 68, 68, 0.12);
animation: heatPulse 1.5s ease-in-out infinite;
}
.thread-heat--hot {
background: rgba(249, 115, 22, 0.12);
animation: heatPulse 2s ease-in-out infinite;
}
.thread-heat--warm {
background: rgba(234, 179, 8, 0.1);
}
@keyframes heatPulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.8;
}
}
/* ══════════════════════════════════════════════════════════
Floating Reply FAB (Mobile)
══════════════════════════════════════════════════════════ */
.floating-reply-fab {
display: none;
}
@media (max-width: 767px) {
.floating-reply-fab {
display: flex;
align-items: center;
gap: 8px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
padding: 12px 20px;
background: var(--primary);
color: #fff;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 var(--primary);
transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.2s ease;
animation: fabSlideUp 0.4s ease-out;
}
.floating-reply-fab:active {
transform: scale(0.95) !important;
}
.floating-reply-fab i {
font-size: 0.8rem;
}
}
@keyframes fabSlideUp {
from {
transform: translateY(80px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ══════════════════════════════════════════════════════════
Reaction Button Animation
══════════════════════════════════════════════════════════ */
.reaction-btn {
position: relative;
overflow: visible;
}
.reaction-btn.reaction-animate {
animation: reactionPop 0.4s cubic-bezier(.17, .89, .32, 1.28);
}
@keyframes reactionPop {
0% {
transform: scale(1);
}
30% {
transform: scale(1.25);
}
50% {
transform: scale(0.92);
}
75% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
.reaction-btn.reaction-animate::after {
content: '👍';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
font-size: 0.9rem;
animation: reactionFloat 0.7s ease-out forwards;
pointer-events: none;
}
@keyframes reactionFloat {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(-30px) scale(1.3);
}
}
/* ── Multi-Reaction Emoji Picker ────────────────────── */
.reaction-picker {
animation: pickerSlideUp 0.15s ease-out;
}
@keyframes pickerSlideUp {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reaction-emoji-btn:hover {
transform: scale(1.35) !important;
background: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
.reaction-emoji-active {
background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
border-radius: 50%;
transform: scale(1.15);
}
.reaction-btn.reaction-animate::after {
content: '';
}
@media (max-width: 767px) {
.reaction-picker {
border-radius: 16px !important;
padding: 3px 4px !important;
}
.reaction-emoji-btn {
font-size: 1.1rem !important;
padding: 3px 4px !important;
}
}
/* ══════════════════════════════════════════════════════════
Touch Target Enhancement (Mobile 44x44px minimum)
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Post action buttons */
.btn-icon,
.btn.btn-sm.btn-ghost.btn-icon,
.btn.btn-sm.btn-ghost {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Thread header tool buttons */
.w-8.h-8.rounded-lg {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
}
}
/* Mobile bottom navigation removed — header already carries the same
shortcuts and the fixed bar duplicated them while stealing 56px of
vertical space. The class rules below were the full styling block. */
@media (max-width: 768px) {
/* Back-to-top kept at its default bottom now that the bar is gone. */
}
/* ══════════════════════════════════════════════════════════
Widget Container — CSS Classes for WidgetRenderer
Replaces all inline style attributes in WidgetRenderer.php
══════════════════════════════════════════════════════════ */
.rb-widget-container {
background: var(--rb-widget-bg, var(--surface));
border: var(--rb-widget-border, 1px solid var(--border));
border-radius: var(--rb-widget-radius, 0.75rem);
margin-bottom: 0.75rem;
overflow: hidden;
}
.rb-widget-header {
padding: 10px 14px 6px 14px;
display: flex;
align-items: center;
gap: 8px;
}
.rb-widget-icon {
font-size: 0.8rem;
color: var(--rb-widget-icon-color, var(--primary));
}
.rb-widget-title {
font-weight: 600;
font-size: 0.875rem;
color: var(--rb-widget-title-color, var(--foreground));
}
.rb-widget-body {
padding: 6px 14px 14px 14px;
}
/* ── Avatar CSS Classes ── */
.rb-avatar-img {
object-fit: cover;
flex-shrink: 0;
}
.rb-avatar-letter {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
font-weight: 700;
letter-spacing: -0.02em;
}
/* ══════════════════════════════════════════════════════════
Notification Items (themable color tokens, soft hover)
══════════════════════════════════════════════════════════ */
:root {
/* ── Font Families ── */ --rb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--rb-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
/* ── Type Scale (1.25 ratio — Major Third) ── */ --rb-text-2xs: 0.625rem;
/* 10px — badges, micro labels */ --rb-text-xs: 0.6875rem;
/* 11px — meta, timestamps */ --rb-text-sm: 0.8125rem;
/* 13px — secondary text */ --rb-text-base: 0.875rem;
/* 14px — body text */ --rb-text-md: 0.9375rem;
/* 15px — emphasized body */ --rb-text-lg: 1.0625rem;
/* 17px — large body */ --rb-text-xl: 1.25rem;
/* 20px — section titles */ --rb-text-2xl: 1.5rem;
/* 24px — page titles */ --rb-text-3xl: 1.875rem;
/* 30px — hero titles */ --rb-text-4xl: 2.25rem;
/* 36px — display */ /* ── Line Heights ── */ --rb-leading-none: 1;
--rb-leading-tight: 1.25;
--rb-leading-snug: 1.375;
--rb-leading-normal: 1.5;
--rb-leading-relaxed: 1.625;
--rb-leading-loose: 1.75;
/* ── Font Weights ── */ --rb-weight-normal: 400;
--rb-weight-medium: 500;
--rb-weight-semibold: 600;
--rb-weight-bold: 700;
--rb-weight-extrabold: 800;
/* ── Letter Spacing ── */ --rb-tracking-tighter: -0.03em;
--rb-tracking-tight: -0.015em;
--rb-tracking-normal: 0;
--rb-tracking-wide: 0.025em;
--rb-tracking-wider: 0.05em;
--rb-tracking-widest: 0.1em;
--ring: var(--primary);
--ring-alpha: color-mix(in srgb, var(--primary) 22%, transparent);
--transition-fast: var(--rb-duration-fast, 100ms);
--transition-normal: var(--rb-duration-normal, 200ms);
--transition-slow: var(--rb-duration-slow, 300ms);
--ease-spring: var(--rb-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
--font-weight-normal: var(--rb-font-weight-normal, 400);
--font-weight-semibold: var(--rb-font-weight-semibold, 600);
--notif-reply: var(--primary, #3b82f6);
--notif-reaction: #ec4899;
--notif-mention: #ff8a5c;
--notif-quote: #14b8a6;
--notif-conversation: #22c55e;
--notif-warning: #f59e0b;
--notif-follow: #06b6d4;
--notif-default: var(--muted-foreground, #9ca3af);
--notif-unread-bg: color-mix(in srgb, var(--primary) 5%, transparent);
--notif-hover-bg: color-mix(in srgb, var(--muted) 50%, transparent);
--notif-accent-w: 3px;
}
.notification-item-wrap {
position: relative;
border-bottom: 1px solid var(--border);
transition: opacity 220ms ease;
}
.notification-item-wrap[data-read="0"]::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--notif-accent-w);
background: var(--primary);
pointer-events: none;
}
.notification-item-wrap.is-fading {
opacity: 0.4;
}
.notification-item {
display: block;
padding: 1rem;
text-decoration: none;
background: transparent;
transition: background 180ms ease, opacity 220ms ease;
position: relative;
}
.notification-item[data-read="0"],
.notification-item-wrap[data-read="0"] .notification-item {
background: var(--notif-unread-bg);
}
.notification-item:hover {
background: var(--notif-hover-bg);
}
.notification-item[data-read="0"]:hover,
.notification-item-wrap[data-read="0"] .notification-item:hover {
background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.notification-item.is-fading {
opacity: 0.55;
}
.notification-item__icon-badge {
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: -0.125rem;
right: -0.125rem;
background: var(--surface, var(--background));
border: 1px solid var(--border);
}
.notification-item__icon-badge i {
font-size: 0.55rem;
}
.notification-item__icon--reply { color: var(--notif-reply); }
.notification-item__icon--reaction { color: var(--notif-reaction); }
.notification-item__icon--mention { color: var(--notif-mention); }
.notification-item__icon--quote { color: var(--notif-quote); }
.notification-item__icon--conversation_reply { color: var(--notif-conversation); }
.notification-item__icon--warning,
.notification-item__icon--warning_issued { color: var(--notif-warning); }
.notification-item__icon--follow { color: var(--notif-follow); }
.notification-item__icon--default { color: var(--notif-default); }
@media (prefers-reduced-motion: reduce) {
.notification-item { transition: none; }
}
/* ══════════════════════════════════════════════════════════
Recipient Picker (chips + autocomplete)
══════════════════════════════════════════════════════════ */
.rb-recipient-picker {
position: relative;
}
.rb-recipient-picker__field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
width: 100%;
min-height: 2.75rem;
padding: 0.375rem 0.625rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface, var(--background));
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rb-recipient-picker__field:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.rb-recipient-picker__chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.25rem 0.25rem 0.625rem;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
animation: rb-chip-in 160ms ease-out;
}
.rb-recipient-picker__chip--invalid {
background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
color: var(--danger, #dc2626);
}
.rb-recipient-picker__chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 9999px;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
opacity: 0.7;
transition: background 120ms ease, opacity 120ms ease;
padding: 0;
font-size: 0.625rem;
}
.rb-recipient-picker__chip-x:hover {
background: color-mix(in srgb, currentColor 18%, transparent);
opacity: 1;
}
.rb-recipient-picker__input {
flex: 1;
min-width: 8rem;
border: 0;
outline: 0;
padding: 0.25rem 0.25rem;
background: transparent;
color: var(--foreground);
font-size: 0.875rem;
}
.rb-recipient-picker__menu {
position: absolute;
z-index: 50;
top: calc(100% + 0.25rem);
left: 0;
right: 0;
max-height: 18rem;
overflow-y: auto;
background: var(--surface, var(--background));
border: 1px solid var(--border);
border-radius: 0.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
padding: 0.25rem;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 140ms ease, transform 140ms ease;
}
.rb-recipient-picker__menu[data-open="1"] {
opacity: 1;
transform: none;
pointer-events: auto;
}
.rb-recipient-picker__option {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
border-radius: 0.375rem;
cursor: pointer;
color: var(--foreground);
transition: background 120ms ease;
}
.rb-recipient-picker__option:hover,
.rb-recipient-picker__option[aria-selected="true"] {
background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.rb-recipient-picker__option-avatar {
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
object-fit: cover;
background: var(--muted);
flex-shrink: 0;
}
.rb-recipient-picker__option-name {
font-size: 0.875rem;
font-weight: 500;
}
.rb-recipient-picker__hint {
padding: 0.625rem;
font-size: 0.8125rem;
color: var(--muted-foreground);
text-align: center;
}
@keyframes rb-chip-in {
from { opacity: 0; transform: translateY(2px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rb-recipient-picker__field,
.rb-recipient-picker__menu,
.rb-recipient-picker__option,
.rb-recipient-picker__chip { transition: none; animation: none; }
}
/* ══════════════════════════════════════════════════════════
Form Error Aggregate Card (P1: T1)
══════════════════════════════════════════════════════════ */
.rb-form-errors {
margin-bottom: 1rem;
padding: 1rem 1.125rem;
background: color-mix(in srgb, var(--danger, #dc2626) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 25%, transparent);
border-radius: 0.75rem;
color: var(--danger, #dc2626);
animation: rb-form-errors-in 220ms ease-out;
}
.rb-form-errors__head {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
margin-bottom: 0.5rem;
}
.rb-form-errors__head i {
font-size: 1rem;
}
.rb-form-errors__list {
margin: 0;
padding-left: 1.5rem;
font-size: 0.875rem;
line-height: 1.55;
color: var(--foreground);
}
.rb-form-errors__list li {
list-style: disc;
}
.rb-form-errors__list li + li {
margin-top: 0.125rem;
}
@keyframes rb-form-errors-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ══════════════════════════════════════════════════════════
BBCode Editor Skeleton (P1: T2)
══════════════════════════════════════════════════════════ */
.rb-editor-skeleton {
min-height: 220px;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--muted) 18%, transparent) 0%,
color-mix(in srgb, var(--muted) 30%, transparent) 50%,
color-mix(in srgb, var(--muted) 18%, transparent) 100%
);
background-size: 200% 100%;
animation: rb-skel-shimmer 1.4s ease-in-out infinite;
}
.rb-editor-skeleton[data-ready="1"] {
display: none;
}
@keyframes rb-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.rb-editor-skeleton { animation: none; }
.rb-form-errors { animation: none; }
}
/* ══════════════════════════════════════════════════════════
Notification Tabs ARIA + Soft Mark-Read (P1: N3, N4)
══════════════════════════════════════════════════════════ */
[role="tablist"].rb-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1rem;
}
.rb-tabs [role="tab"] {
appearance: none;
background: transparent;
border: 0;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted-foreground);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color 140ms ease, border-color 140ms ease;
}
.rb-tabs [role="tab"]:hover {
color: var(--foreground);
}
.rb-tabs [role="tab"][aria-selected="true"] {
color: var(--primary);
border-bottom-color: var(--primary);
}
.rb-tabs [role="tab"]:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px var(--ring-alpha);
border-radius: 0.375rem 0.375rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
.rb-tabs [role="tab"] { transition: none; }
}
/* ══════════════════════════════════════════════════════════
Auth Card Mount Animation (P2: L7)
══════════════════════════════════════════════════════════ */
.rb-auth-mount {
animation: rb-auth-card-in 320ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rb-auth-card-in {
from { opacity: 0; transform: translateY(8px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rb-auth-mount { animation: none; }
}
/* ══════════════════════════════════════════════════════════
Auth Chips: caps lock, password match (P3: L3, L8)
══════════════════════════════════════════════════════════ */
.rb-auth-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.5rem;
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
border-radius: 0.5rem;
border: 1px solid transparent;
animation: rb-auth-chip-in 180ms ease-out;
}
.rb-auth-chip i { font-size: 0.875rem; }
.rb-auth-chip--info {
background: color-mix(in srgb, var(--muted) 30%, transparent);
color: var(--muted-foreground);
border-color: var(--border);
}
.rb-auth-chip--warning {
background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
color: var(--warning, #f59e0b);
border-color: color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent);
}
.rb-auth-chip--success {
background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
color: var(--success, #22c55e);
border-color: color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
}
.rb-auth-chip--danger {
background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
color: var(--danger, #dc2626);
border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
}
@keyframes rb-auth-chip-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: none; }
}
/* ══════════════════════════════════════════════════════════
Browser Autofill Override (P3: L5)
══════════════════════════════════════════════════════════ */
.rb-input:-webkit-autofill,
.rb-input:-webkit-autofill:hover,
.rb-input:-webkit-autofill:focus,
.rb-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--foreground) !important;
-webkit-box-shadow: 0 0 0 1000px var(--surface, var(--background)) inset !important;
box-shadow: 0 0 0 1000px var(--surface, var(--background)) inset !important;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--foreground);
}
@media (prefers-reduced-motion: reduce) {
.rb-auth-chip { animation: none; }
}
/* ══════════════════════════════════════════════════════════
Header Dropdown Panel + Conversation Row
══════════════════════════════════════════════════════════ */
.rb-dropdown-panel {
background: var(--popover, var(--surface));
border: 1px solid var(--border);
overflow: hidden;
}
.rb-dropdown-panel__head,
.rb-dropdown-panel__foot {
background: color-mix(in srgb, var(--muted) 25%, transparent);
}
.rb-dropdown-panel__head {
border-bottom-color: var(--border) !important;
}
.rb-dropdown-panel__foot {
border-top-color: var(--border) !important;
}
.rb-dropdown-panel__action {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
transition: background 140ms ease, color 140ms ease;
}
.rb-dropdown-panel__action:hover,
.rb-dropdown-panel__action:focus-visible {
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.rb-dropdown-panel__empty {
color: var(--muted-foreground);
}
.rb-dropdown-panel__empty-icon {
font-size: 2rem;
opacity: 0.45;
color: var(--muted-foreground);
}
/* Conversation row */
.rb-conv-row {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
background: transparent;
color: var(--foreground);
transition: background 160ms ease, box-shadow 160ms ease;
position: relative;
}
.rb-conv-row:last-child { border-bottom: 0; }
.rb-conv-row[data-unread="1"] {
background: color-mix(in srgb, var(--primary) 6%, transparent);
box-shadow: inset 3px 0 0 var(--primary);
}
.rb-conv-row:hover,
.rb-conv-row:focus-visible {
background: color-mix(in srgb, var(--muted) 50%, transparent);
}
.rb-conv-row[data-unread="1"]:hover {
background: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* Dark mode: surface and muted have similar lightness so the default hover
blends with the dropdown panel. Give every row a faint base bg + a brighter
hover so rows stay visible against the panel. */
html[data-theme="dark"] .rb-conv-row {
background: color-mix(in srgb, var(--surface) 92%, white 8%);
}
html[data-theme="dark"] .rb-conv-row[data-unread="1"] {
background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
html[data-theme="dark"] .rb-conv-row:hover,
html[data-theme="dark"] .rb-conv-row:focus-visible {
background: color-mix(in srgb, var(--surface) 80%, white 20%);
}
html[data-theme="dark"] .rb-conv-row[data-unread="1"]:hover {
background: color-mix(in srgb, var(--primary) 22%, var(--surface));
}
.rb-conv-row__avatar {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
border-radius: 9999px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rb-conv-row__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rb-conv-row__avatar-letter {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: -0.02em;
}
.rb-conv-row__body {
flex: 1;
min-width: 0;
}
.rb-conv-row__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.rb-conv-row__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.rb-conv-row[data-unread="1"] .rb-conv-row__title {
color: var(--foreground);
font-weight: 700;
}
.rb-conv-row__time {
flex-shrink: 0;
font-size: 0.7rem;
color: var(--muted-foreground);
font-variant-numeric: tabular-nums;
}
.rb-conv-row[data-unread="1"] .rb-conv-row__time {
color: var(--primary);
font-weight: 600;
}
.rb-conv-row__preview {
margin-top: 0.125rem;
font-size: 0.8125rem;
color: var(--muted-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.rb-conv-row__author {
color: var(--foreground);
font-weight: 600;
}
.rb-conv-row__pip {
position: absolute;
top: 50%;
right: 0.875rem;
transform: translateY(-50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Skeleton row while loading */
.rb-conv-row__skel {
display: flex;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
}
.rb-conv-row__skel-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--muted) 18%, transparent) 0%,
color-mix(in srgb, var(--muted) 30%, transparent) 50%,
color-mix(in srgb, var(--muted) 18%, transparent) 100%);
background-size: 200% 100%;
animation: rb-skel-shimmer 1.4s ease-in-out infinite;
flex-shrink: 0;
}
.rb-conv-row__skel-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
}
.rb-conv-row__skel-text > div {
height: 0.625rem;
border-radius: 4px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--muted) 18%, transparent) 0%,
color-mix(in srgb, var(--muted) 30%, transparent) 50%,
color-mix(in srgb, var(--muted) 18%, transparent) 100%);
background-size: 200% 100%;
animation: rb-skel-shimmer 1.4s ease-in-out infinite;
}
.rb-conv-row__skel-text > div:first-child { width: 70%; }
.rb-conv-row__skel-text > div:last-child { width: 90%; }
@media (prefers-reduced-motion: reduce) {
.rb-conv-row, .rb-dropdown-panel__action { transition: none; }
.rb-conv-row__skel-avatar, .rb-conv-row__skel-text > div { animation: none; }
}
/* ══════════════════════════════════════════════════════════
Profile Cover Background (banner)
──────────────────────────────────────────────────────────
Theme controls .profile-cover layout (XF7 grid with avatar
overlap). We only paint the bg image inside .cover-bg via
inline style, and pin the "Change cover" upload button.
══════════════════════════════════════════════════════════ */
.profile-cover.has-cover .cover-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cover-bg-edit {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 5;
}
/* Profile page should match the main content wrapper width
instead of theme's narrower 1180px .page rule. */
main > .page,
#main-content > .page {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.cover-bg-edit__btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.4rem 0.75rem;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 9999px;
font-size: 0.8125rem;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background 160ms ease;
}
.cover-bg-edit__btn:hover { background: rgba(0, 0, 0, 0.7); }
.cover-bg-edit__btn .hidden { display: none !important; }
/* ══════════════════════════════════════════════════════════
Profile Wall Posts (rich card)
══════════════════════════════════════════════════════════ */
.rb-pp-list { display: flex; flex-direction: column; gap: 0.875rem; }
.rb-pp-card {
display: flex;
gap: 0.75rem;
padding: 0.75rem 0.875rem;
background: var(--surface, var(--background));
border: 1px solid var(--border);
border-radius: 0.625rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rb-pp-card:hover {
border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 5%, transparent);
}
.rb-pp-avatar,
.rb-pp-comment__avatar,
.rb-pp-reply__avatar,
.rb-pp-composer__avatar {
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: 9999px;
overflow: hidden;
background: var(--muted);
display: flex;
align-items: center;
justify-content: center;
}
.rb-pp-avatar { width: 2.5rem; height: 2.5rem; }
.rb-pp-avatar img,
.rb-pp-comment__avatar img,
.rb-pp-reply__avatar img,
.rb-pp-composer__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.rb-pp-avatar-letter {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: -0.02em;
}
.rb-pp-body { flex: 1; min-width: 0; }
.rb-pp-head {
display: flex;
align-items: baseline;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 0.125rem;
line-height: 1.25;
}
.rb-pp-author {
color: var(--primary);
font-weight: 700;
text-decoration: none;
font-size: 0.95rem;
}
.rb-pp-author:hover { text-decoration: underline; }
.rb-pp-sep { color: var(--muted-foreground); font-weight: 400; }
.rb-pp-time {
color: var(--muted-foreground);
font-size: 0.825rem;
}
.rb-pp-msg {
color: var(--foreground);
font-size: 0.925rem;
line-height: 1.55;
word-wrap: break-word;
white-space: pre-wrap;
}
.rb-pp-msg a { color: var(--primary); text-decoration: underline; }
.rb-pp-actions {
display: flex;
align-items: center;
gap: 0.875rem;
margin-top: 0.625rem;
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
flex-wrap: wrap;
}
.rb-pp-action,
.rb-pp-like {
appearance: none;
background: transparent;
border: 0;
padding: 0.25rem 0;
color: var(--muted-foreground);
font-size: 0.825rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color 140ms ease;
}
.rb-pp-action:hover,
.rb-pp-like:hover { color: var(--primary); }
.rb-pp-action--danger:hover { color: var(--danger, #dc2626); }
.rb-pp-action--meta { cursor: default; }
.rb-pp-action--meta:hover { color: var(--muted-foreground); }
.rb-pp-action i,
.rb-pp-like i { font-size: 0.85rem; }
.rb-pp-spacer { flex: 1; }
/* Reaction bar inside profile wall card footer — sits on right side of actions row */
.rb-pp-react-bar {
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
.rb-pp-react-bar .react-picker {
bottom: calc(100% + 6px);
top: auto;
}
/* Compact reaction bar under a comment */
.rb-pp-react-bar--comment {
margin-top: 0.375rem;
gap: 3px;
}
.rb-pp-react-bar--comment .react-chip {
padding: 0.1rem 0.4rem;
font-size: 0.75rem;
}
.rb-pp-react-bar--comment .react-chip__emoji { font-size: 0.85rem; }
/* Reply form Post button — stays on the row, doesn't shrink */
.rb-pp-reply__submit {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
}
.rb-pp-reply__submit i { font-size: 0.8rem; }
.rb-pp-like.is-liked { color: var(--primary); font-weight: 600; }
.rb-pp-like__count {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
padding: 0.05rem 0.4rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 700;
margin-left: 0.15rem;
}
.rb-pp-comments {
margin-top: 0.625rem;
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rb-pp-comment {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.rb-pp-comment__body {
flex: 1;
background: color-mix(in srgb, var(--muted) 25%, transparent);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
min-width: 0;
}
.rb-pp-comment__msg {
color: var(--foreground);
font-size: 0.875rem;
margin-top: 0.125rem;
word-wrap: break-word;
}
/* Reply input + composer (top of list) — pill style */
.rb-pp-composer,
.rb-pp-reply {
display: none; /* collapsed by default; js adds .is-open */
gap: 0.625rem;
align-items: center;
padding: 0.625rem;
background: var(--surface, var(--background));
border: 1px solid var(--border);
border-radius: 0.625rem;
}
.rb-pp-reply.is-open { display: flex; }
.rb-pp-composer { margin-bottom: 0.875rem; }
.rb-pp-reply { margin-top: 0.625rem; padding: 0.5rem; }
.rb-pp-composer__field,
.rb-pp-reply__field {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
background: color-mix(in srgb, var(--muted) 35%, var(--surface, var(--background)));
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 0.4rem 0.75rem;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.rb-pp-composer__field:focus-within,
.rb-pp-reply__field:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring-alpha);
background: var(--surface, var(--background));
}
.rb-pp-composer__icon { color: var(--muted-foreground); font-size: 0.8rem; }
.rb-pp-composer__input,
input.rb-pp-composer__input {
flex: 1;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
font-size: 0.875rem;
color: var(--foreground) !important;
box-shadow: none !important;
}
.rb-pp-composer__input::placeholder {
color: var(--muted-foreground);
opacity: 0.7;
}
/* Expandable composer: collapsed pill → full BBCode editor */
.rb-pp-composer-wrap { margin-bottom: 0.875rem; }
.rb-pp-composer--collapsed {
cursor: pointer;
margin-bottom: 0;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rb-pp-composer--collapsed:hover,
.rb-pp-composer--collapsed:focus-visible {
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 8%, transparent);
}
.rb-pp-composer__placeholder {
color: var(--muted-foreground);
font-size: 0.875rem;
user-select: none;
}
.rb-pp-composer-expanded {
background: var(--surface, var(--background));
border: 1px solid var(--border);
border-radius: 0.625rem;
padding: 0.625rem;
animation: rb-pp-composer-in 220ms ease-out;
}
.rb-pp-composer-expanded__foot {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 0.625rem;
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
@keyframes rb-pp-composer-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.rb-pp-composer--collapsed { transition: none; }
.rb-pp-composer-expanded { animation: none; }
}
.rb-pp-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--muted-foreground);
background: var(--surface, var(--background));
border: 1px dashed var(--border);
border-radius: 0.625rem;
}
.rb-pp-empty__icon {
font-size: 2rem;
opacity: 0.45;
margin-bottom: 0.5rem;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.rb-pp-card, .rb-pp-composer__field, .rb-pp-reply__field, .cover-bg-edit__btn { transition: none; }
}
/* ══════════════════════════════════════════════════════════
Account/General Hover Card + Soft Danger Button
══════════════════════════════════════════════════════════ */
.rb-hover-card {
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
border: 1px solid var(--border);
}
.rb-hover-card:hover,
.rb-hover-card:focus-within {
border-color: var(--primary);
box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 10%, transparent);
transform: translateY(-1px);
}
.rb-btn-danger-soft {
background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
color: var(--danger, #dc2626);
border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 20%, transparent);
transition: background 140ms ease, border-color 140ms ease;
cursor: pointer;
}
.rb-btn-danger-soft:hover,
.rb-btn-danger-soft:focus-visible {
background: color-mix(in srgb, var(--danger, #dc2626) 15%, transparent);
border-color: color-mix(in srgb, var(--danger, #dc2626) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.rb-hover-card, .rb-btn-danger-soft { transition: none; }
}
/* ══════════════════════════════════════════════════════════
Screen-reader only utility (R7)
══════════════════════════════════════════════════════════ */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ══════════════════════════════════════════════════════════
Title Character Counter Color Ramp (T3)
══════════════════════════════════════════════════════════ */
.rb-char-counter {
transition: color 160ms ease;
}
.rb-char-counter--warn {
color: var(--warning, #f59e0b);
font-weight: 600;
}
.rb-char-counter--danger {
color: var(--danger, #dc2626);
font-weight: 700;
}
/* ══════════════════════════════════════════════════════════
Tag Picker (T4)
══════════════════════════════════════════════════════════ */
.rb-tag-picker {
position: relative;
}
.rb-tag-picker__field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
width: 100%;
min-height: 2.75rem;
padding: 0.375rem 0.625rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface, var(--background));
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rb-tag-picker__field:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring-alpha);
}
.rb-tag-picker__chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.25rem 0.25rem 0.625rem;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
animation: rb-chip-in 160ms ease-out;
}
.rb-tag-picker__chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
border-radius: 9999px;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
opacity: 0.7;
padding: 0;
font-size: 0.625rem;
transition: background 120ms ease, opacity 120ms ease;
}
.rb-tag-picker__chip-x:hover {
background: color-mix(in srgb, currentColor 18%, transparent);
opacity: 1;
}
.rb-tag-picker__input {
flex: 1;
min-width: 8rem;
border: 0;
outline: 0;
padding: 0.25rem;
background: transparent;
color: var(--foreground);
font-size: 0.875rem;
}
.rb-tag-picker__input:disabled {
opacity: 0.6;
}
.rb-tag-picker__counter {
margin-top: 0.375rem;
font-size: 0.75rem;
color: var(--muted-foreground);
font-family: var(--rb-font-mono);
}
.rb-tag-picker__counter.is-full {
color: var(--warning, #f59e0b);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.rb-tag-picker__field,
.rb-tag-picker__chip { transition: none; animation: none; }
}
/* ══════════════════════════════════════════════════════════
Forum/Prefix Picker Overflow Truncate (T5)
══════════════════════════════════════════════════════════ */
.node-select {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.node-select .node-pick,
.prefix-row .prefix-pill {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) {
.node-select .node-pick,
.prefix-row .prefix-pill {
max-width: 14rem;
}
}
/* ══════════════════════════════════════════════════════════
Reader Mode Progress Bar Reposition (R6)
══════════════════════════════════════════════════════════ */
body[data-reader-mode="1"] #rb-progress,
body[data-reader-mode="2"] #rb-progress {
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px;
z-index: 99999;
display: block;
opacity: 0.85;
}
/* ══════════════════════════════════════════════════════════
Notification Item Action Menu (P2: N8)
══════════════════════════════════════════════════════════ */
.notification-item {
/* keep room for action menu on hover */
}
.notification-item__actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
gap: 0.25rem;
opacity: 0;
transform: translateX(4px);
transition: opacity 140ms ease, transform 140ms ease;
pointer-events: none;
z-index: 2;
}
.notification-item-wrap:hover .notification-item__actions,
.notification-item-wrap:focus-within .notification-item__actions {
opacity: 1;
transform: none;
pointer-events: auto;
}
.notification-item__action {
appearance: none;
background: var(--surface, var(--background));
border: 1px solid var(--border);
color: var(--muted-foreground);
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.75rem;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.notification-item__action:hover,
.notification-item__action:focus-visible {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
@media (prefers-reduced-motion: reduce) {
.notification-item__actions,
.notification-item__action { transition: none; }
}
/* ══════════════════════════════════════════════════════════
Reader Mode Sepia (P2: R5)
══════════════════════════════════════════════════════════ */
body[data-reader-mode="2"] {
background: #f4ecd8 !important;
color: #5b4636 !important;
}
body[data-reader-mode="2"] header,
body[data-reader-mode="2"] aside,
body[data-reader-mode="2"] footer,
body[data-reader-mode="2"] .rb-lt-sidebar,
body[data-reader-mode="2"] .rh-sidebar-card,
body[data-reader-mode="2"] [data-region="sidebar"],
body[data-reader-mode="2"] [role="banner"],
body[data-reader-mode="2"] nav[role="navigation"],
body[data-reader-mode="2"] .flash-banner,
body[data-reader-mode="2"] [data-notifications-endpoint],
body[data-reader-mode="2"] .rb-post__sidebar {
display: none !important;
}
body[data-reader-mode="2"] main {
max-width: 760px !important;
margin: 40px auto !important;
padding: 0 1rem !important;
font-size: 1.08rem;
line-height: 1.8;
font-family: 'Charter', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}
body[data-reader-mode="2"] .rb-post,
body[data-reader-mode="2"] .rb-post__body,
body[data-reader-mode="2"] h1,
body[data-reader-mode="2"] h2,
body[data-reader-mode="2"] h3,
body[data-reader-mode="2"] h4,
body[data-reader-mode="2"] p,
body[data-reader-mode="2"] li,
body[data-reader-mode="2"] blockquote {
color: #5b4636 !important;
background: transparent !important;
border-color: rgba(91, 70, 54, 0.18) !important;
}
body[data-reader-mode="2"] .rb-post {
flex-direction: column !important;
gap: 0.5rem !important;
border: 0 !important;
box-shadow: none !important;
padding: 1rem 0 !important;
border-bottom: 1px solid rgba(91, 70, 54, 0.18) !important;
margin: 0 !important;
border-radius: 0 !important;
}
body[data-reader-mode="2"] a {
color: #8b5a2b !important;
}
body[data-reader-mode="2"] .rb-reader-toggle {
background: #8b5a2b !important;
color: #f4ecd8 !important;
border-color: #8b5a2b !important;
opacity: 1;
}
/* ─── Unfurl preview cards (rich link previews in post bodies) ───── */
.rb-unfurl-card {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0;
max-width: 540px;
margin: 10px 0;
border: 1px solid var(--border, rgba(0,0,0,.1));
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: var(--surface, var(--card, #fff));
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rb-unfurl-card:hover {
border-color: var(--primary, #4f7aff);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.rb-unfurl-card__media {
width: 120px;
height: 100%;
min-height: 100px;
background: var(--muted, #f3f4f6);
overflow: hidden;
}
.rb-unfurl-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rb-unfurl-card:has(.rb-unfurl-card__media:empty),
.rb-unfurl-card:not(:has(.rb-unfurl-card__media)) {
grid-template-columns: 1fr;
}
.rb-unfurl-card__body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.rb-unfurl-card__site {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted-foreground, #6b7280);
text-transform: lowercase;
letter-spacing: .01em;
}
.rb-unfurl-card__favicon {
width: 14px;
height: 14px;
border-radius: 2px;
}
.rb-unfurl-card__title {
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--foreground, inherit);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.rb-unfurl-card__desc {
font-size: 12.5px;
line-height: 1.5;
color: var(--muted-foreground, #6b7280);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 480px) {
.rb-unfurl-card { grid-template-columns: 1fr; }
.rb-unfurl-card__media { width: 100%; max-height: 180px; }
}
/* ══════════════════════════════════════════════════════════
Mobile profile cover (2026-06): stack to a single column so the
rank/banner under the cover is fully visible. The desktop 3-col
grid + -48px overlap + .profile-cover overflow:hidden clipped the
rank on narrow screens.
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* body-prefixed so it outranks the theme's `.profile-cover{overflow:hidden}`
(equal class specificity would otherwise lose on source order) — defense
against any banner/rank overlap escaping the cover box. */
body .profile-cover { overflow: visible; }
body .profile-cover .cover-bg { border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
.profile-cover .cover-content {
grid-template-columns: 1fr;
gap: 12px;
margin-top: -36px;
padding: 0 16px 18px;
}
.profile-cover .cover-info { padding-bottom: 0; }
}
/* Align the secondary sub-bar's first item with the header logo
(2026-06). The header container (.max-w-screen-2xl.flex in )
has its side padding zeroed by an inline rule, so the logo sits flush
at the container edge. The sub-bar inner, by contrast, was full-width
with a 1.5rem padding-inline — pushing its first item 24px in (and
diverging further past 1280px because it wasn't constrained to the
--container box). Constrain the inner to the SAME container geometry
as the header and zero its padding; then pull the nav back by the
item's 0.7rem left padding so the first icon lands on the logo edge.
Higher specificity (.rb-submenu .rb-submenu__inner) beats the inline
template rule regardless of source order. */
.rb-submenu .rb-submenu__inner {
max-width: var(--container, var(--container-max, var(--rb-max-page-width, 1280px)));
margin-inline: auto;
padding-inline: 0;
}
.rb-submenu__nav { margin-left: -0.7rem; }
/* Mobile (≤767px): give the logo and the sub-bar a small 4px left gutter so
they don't sit flush against the screen edge. Both shift by the same 4px so
they stay aligned with each other (preserves the logo/sub-bar alignment fix
above). The header container's side padding is zeroed by an inline rule, so
body-prefix the selector to outrank it. */
@media (max-width: 767px) {
/* the inline rbs7 rule zeroes this with !important, so match it */
body header .max-w-screen-2xl.flex.items-center { padding-left: 4px !important; }
.rb-submenu .rb-submenu__inner { padding-inline: 4px; }
}
/* === rds.css === */
/* ────────────────────────────────────────────────────────────────
* RaxBoard Design System (RDS) — v1
* ────────────────────────────────────────────────────────────────
* Canonical component primitives. Addons and templates should reach
* for `rb-*` classes instead of Tailwind utility soup so themes stay
* cohesive and component behavior stays consistent.
*
* Naming: BEM. `rb-` block, `__element`, `--modifier`.
* All sizing + color routes through the existing `--*` token set so
* customizer changes flow through without edits here.
*
* Any addon that needs a variant should prefer modifier (--primary)
* or wrap the primitive in its own scope instead of redefining the
* primitive's base rules.
* ──────────────────────────────────────────────────────────────── */
:root {
/* Fallback info color — other role colors are already defined in main.css */
--rb-info: var(--info, #3b82f6);
--rb-info-soft: color-mix(in srgb, var(--rb-info) 14%, transparent);
/* Spacing scale (works with Tailwind's 4px rhythm) */
--rb-space-1: 4px;
--rb-space-2: 8px;
--rb-space-3: 12px;
--rb-space-4: 16px;
--rb-space-5: 20px;
--rb-space-6: 24px;
--rb-space-8: 32px;
/* Typography scale */
--rb-fs-xs: 0.72rem;
--rb-fs-sm: 0.82rem;
--rb-fs-md: 0.92rem;
--rb-fs-lg: 1.05rem;
--rb-fs-xl: 1.25rem;
/* Elevation (cards, blocks, modals) */
--rb-elev-1: var(--shadow-sm);
--rb-elev-2: var(--shadow-md);
--rb-elev-3: var(--shadow-lg);
}
/* ─────────────────────────── BLOCK ───────────────────────────
* `block-container` equivalent. Header + body + footer.
* Use for any boxed piece of content that needs a title row. */
.rb-block {
background: var(--surface-2, var(--card, #fff));
border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
border-radius: var(--radius, 10px);
overflow: hidden;
box-shadow: var(--rb-elev-1);
}
.rb-block__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rb-space-3);
padding: var(--rb-space-3) var(--rb-space-4);
border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%),
var(--surface-2)
);
}
.rb-block__title {
font-size: var(--rb-fs-md);
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: var(--rb-space-2);
}
.rb-block__title > i {
color: var(--accent);
font-size: 0.9em;
}
.rb-block__actions {
display: flex;
align-items: center;
gap: var(--rb-space-2);
}
.rb-block__body {
padding: var(--rb-space-4);
}
.rb-block__body--flush {
padding: 0;
}
.rb-block__footer {
padding: var(--rb-space-3) var(--rb-space-4);
border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
background: var(--bg-alt, transparent);
font-size: var(--rb-fs-sm);
color: var(--text-muted);
}
.rb-block--compact .rb-block__header {
padding: var(--rb-space-2) var(--rb-space-3);
}
.rb-block--compact .rb-block__body {
padding: var(--rb-space-3);
}
.rb-block--accent {
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent) inset,
var(--rb-elev-1);
}
/* ─────────────────────────── CARD ────────────────────────────
* Thinner, title-less alternative to rb-block. */
.rb-card {
background: var(--surface-2, var(--card, #fff));
border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
border-radius: var(--radius, 10px);
padding: var(--rb-space-4);
}
.rb-card--elevated {
box-shadow: var(--rb-elev-2);
}
.rb-card--interactive {
cursor: pointer;
transition:
transform 150ms ease,
border-color 150ms ease,
box-shadow 150ms ease;
}
.rb-card--interactive:hover {
border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
box-shadow: var(--rb-elev-2);
transform: translateY(-1px);
}
.rb-card--compact {
padding: var(--rb-space-3);
}
/* ─────────────────────────── BUTTON ──────────────────────────
* Canonical button. Variants via --primary/--danger/--ghost/--link. */
.rb-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rb-space-2);
padding: 8px 14px;
border-radius: var(--radius-sm, 6px);
font-family: var(--font-sans);
font-size: var(--rb-fs-sm);
font-weight: 500;
line-height: 1.2;
border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
background: var(--surface-2, transparent);
color: var(--text);
cursor: pointer;
user-select: none;
transition:
background 120ms ease,
border-color 120ms ease,
color 120ms ease;
white-space: nowrap;
}
.rb-button:hover {
background: var(--bg-alt);
border-color: var(--border-strong, var(--border));
color: var(--text);
text-decoration: none;
}
.rb-button:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.rb-button[disabled],
.rb-button--disabled {
opacity: 0.55;
pointer-events: none;
}
/* Variants */
.rb-button--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg, #fff);
}
.rb-button--primary:hover {
background: color-mix(in srgb, var(--accent) 88%, #000);
border-color: color-mix(in srgb, var(--accent) 88%, #000);
color: var(--accent-fg, #fff);
}
.rb-button--danger {
background: var(--danger, #ef4444);
border-color: var(--danger, #ef4444);
color: #fff;
}
.rb-button--danger:hover {
background: color-mix(in srgb, var(--danger, #ef4444) 88%, #000);
border-color: color-mix(in srgb, var(--danger, #ef4444) 88%, #000);
color: #fff;
}
.rb-button--ghost {
background: transparent;
border-color: transparent;
color: var(--text-muted);
}
.rb-button--ghost:hover {
background: var(--bg-alt);
color: var(--text);
border-color: transparent;
}
.rb-button--link {
background: transparent;
border-color: transparent;
color: var(--accent);
padding: 0;
}
.rb-button--link:hover {
background: transparent;
text-decoration: underline;
}
/* Sizes */
.rb-button--sm {
padding: 5px 10px;
font-size: var(--rb-fs-xs);
}
.rb-button--lg {
padding: 10px 18px;
font-size: var(--rb-fs-md);
}
.rb-button--block {
width: 100%;
}
/* ─────────────────────────── PILL ────────────────────────────
* Status/counter badge. */
.rb-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: 999px;
font-size: var(--rb-fs-xs);
font-weight: 500;
line-height: 1.4;
background: var(--bg-alt);
color: var(--text-muted);
border: 1px solid transparent;
}
.rb-pill--success {
background: color-mix(in srgb, var(--success, #10b981) 12%, transparent);
color: var(--success, #10b981);
}
.rb-pill--warning {
background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
color: var(--warning, #f59e0b);
}
.rb-pill--danger {
background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
color: var(--danger, #ef4444);
}
.rb-pill--info {
background: var(--rb-info-soft);
color: var(--rb-info);
}
.rb-pill--accent {
background: var(--accent-soft);
color: var(--accent);
}
.rb-pill--solid {
color: #fff;
background: var(--text);
border-color: var(--text);
}
/* ─────────────────────────── STAT ────────────────────────────
* Numeric counter + label (dashboard / widget). */
.rb-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--rb-space-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius, 10px);
min-width: 0;
}
.rb-stat__value {
font-size: var(--rb-fs-xl);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.1;
}
.rb-stat__label {
font-size: var(--rb-fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.rb-stat__trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--rb-fs-xs);
font-weight: 600;
}
.rb-stat__trend--up {
color: var(--success, #10b981);
}
.rb-stat__trend--down {
color: var(--danger, #ef4444);
}
/* ─────────────────────────── MEDIA ───────────────────────────
* Avatar + body row. Use for any author row / comment header. */
.rb-media {
display: flex;
align-items: flex-start;
gap: var(--rb-space-3);
}
.rb-media__avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text);
overflow: hidden;
}
.rb-media__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rb-media__avatar--sm {
width: 28px;
height: 28px;
font-size: 0.7rem;
}
.rb-media__avatar--lg {
width: 56px;
height: 56px;
font-size: 1.1rem;
}
.rb-media__body {
flex: 1;
min-width: 0;
}
.rb-media__title {
font-weight: 600;
font-size: var(--rb-fs-sm);
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.rb-media__meta {
font-size: var(--rb-fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
/* ─────────────────────────── FORM ────────────────────────────
* Form primitives. All components share a single visual language. */
.rb-form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--rb-space-4);
}
.rb-form-label {
font-size: var(--rb-fs-sm);
font-weight: 500;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 5px;
}
.rb-form-label--required::after {
content: "*";
color: var(--danger);
margin-left: 2px;
}
.rb-form-control {
display: block;
width: 100%;
padding: 8px 12px;
font-family: inherit;
font-size: var(--rb-fs-sm);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 6px);
transition:
border-color 120ms ease,
box-shadow 120ms ease;
box-sizing: border-box;
}
.rb-form-control:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--ring);
}
.rb-form-control--error {
border-color: var(--danger);
}
.rb-form-control--error:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}
.rb-form-hint {
font-size: var(--rb-fs-xs);
color: var(--text-muted);
}
.rb-form-error {
font-size: var(--rb-fs-xs);
color: var(--danger);
display: inline-flex;
align-items: center;
gap: 4px;
}
textarea.rb-form-control {
resize: vertical;
min-height: 80px;
}
/* ─────────────────────────── LIST ────────────────────────────
* Generic ordered/unordered content list with divider rows. */
.rb-list {
display: flex;
flex-direction: column;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius, 10px);
overflow: hidden;
}
.rb-list__item {
display: flex;
align-items: center;
gap: var(--rb-space-3);
padding: var(--rb-space-3) var(--rb-space-4);
border-bottom: 1px solid var(--border);
background: var(--surface-2);
transition: background 120ms ease;
}
.rb-list__item:last-child {
border-bottom: 0;
}
.rb-list__item:hover {
background: var(--bg-alt);
}
.rb-list--striped .rb-list__item:nth-child(even) {
background: var(--bg-alt);
}
.rb-list--flush {
border: 0;
border-radius: 0;
background: transparent;
}
.rb-list--flush .rb-list__item {
background: transparent;
}
/* ─────────────────────────── TABS ────────────────────────────
* Horizontal tab bar. */
.rb-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: var(--rb-space-4);
}
.rb-tabs__tab {
padding: 8px 14px;
font-size: var(--rb-fs-sm);
font-weight: 500;
color: var(--text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
background: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
transition:
color 120ms ease,
border-color 120ms ease;
}
.rb-tabs__tab:hover {
color: var(--text);
}
.rb-tabs__tab--active {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* ─────────────────────────── ALERT ───────────────────────────
* Standard message banner. */
.rb-alert {
display: flex;
align-items: flex-start;
gap: var(--rb-space-2);
padding: var(--rb-space-3) var(--rb-space-4);
border-radius: var(--radius-sm, 6px);
border: 1px solid var(--border);
background: var(--bg-alt);
color: var(--text);
font-size: var(--rb-fs-sm);
}
.rb-alert__icon {
flex-shrink: 0;
margin-top: 2px;
}
.rb-alert__body {
flex: 1;
}
.rb-alert__close {
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
padding: 2px 6px;
}
.rb-alert--success {
border-color: color-mix(in srgb, var(--success) 40%, transparent);
background: color-mix(in srgb, var(--success) 10%, var(--bg-alt));
}
.rb-alert--warning {
border-color: color-mix(in srgb, var(--warning) 40%, transparent);
background: color-mix(in srgb, var(--warning) 10%, var(--bg-alt));
}
.rb-alert--danger {
border-color: color-mix(in srgb, var(--danger) 40%, transparent);
background: color-mix(in srgb, var(--danger) 10%, var(--bg-alt));
}
.rb-alert--info {
border-color: color-mix(in srgb, var(--rb-info) 40%, transparent);
background: color-mix(in srgb, var(--rb-info) 10%, var(--bg-alt));
}
/* ───────────────────── EMPTY-STATE / SKELETON ─────────────── */
.rb-empty-state {
padding: var(--rb-space-8) var(--rb-space-4);
text-align: center;
color: var(--text-muted);
}
.rb-empty-state__icon {
font-size: 2.5rem;
opacity: 0.25;
margin-bottom: var(--rb-space-3);
color: var(--text-faint);
}
.rb-empty-state__title {
font-size: var(--rb-fs-md);
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.rb-empty-state__hint {
font-size: var(--rb-fs-sm);
color: var(--text-muted);
}
.rb-skeleton {
display: block;
height: 14px;
border-radius: var(--radius-sm, 6px);
background: linear-gradient(
90deg,
var(--bg-alt) 0%,
color-mix(in srgb, var(--bg-alt) 55%, var(--text-faint)) 50%,
var(--bg-alt) 100%
);
background-size: 200% 100%;
animation: rb-skel 1.4s ease-in-out infinite;
}
.rb-skeleton + .rb-skeleton {
margin-top: 8px;
}
.rb-skeleton--sm {
height: 10px;
width: 40%;
}
.rb-skeleton--lg {
height: 20px;
}
.rb-skeleton--circle {
border-radius: 50%;
width: 40px;
height: 40px;
}
@keyframes rb-skel {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ─────────────────────── LAYOUT PRIMITIVES ──────────────────
* rb-stack = vertical flow w/ consistent gap
* rb-cluster = horizontal wrapping row
* rb-grid = auto-fit responsive grid
* Inline style for gap avoids class explosion.
*/
.rb-stack {
display: flex;
flex-direction: column;
gap: var(--rb-stack-gap, var(--rb-space-4));
}
.rb-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rb-cluster-gap, var(--rb-space-3));
}
.rb-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(var(--rb-grid-min, 220px), 1fr)
);
gap: var(--rb-grid-gap, var(--rb-space-4));
}
/* ─────────────────────── DOMAIN PRIMITIVES ──────────────────
* Thread/post building blocks. Thin — domain styling stays in
* specific templates; these just normalize structure.
*/
.rb-thread-item {
display: flex;
align-items: flex-start;
gap: var(--rb-space-3);
padding: var(--rb-space-3) var(--rb-space-4);
border-bottom: 1px solid var(--border);
background: var(--surface-2);
transition: background 120ms ease;
}
.rb-thread-item:hover {
background: var(--bg-alt);
}
.rb-thread-item__title {
font-weight: 600;
font-size: var(--rb-fs-md);
color: var(--text);
}
.rb-thread-item__title a {
color: inherit;
}
.rb-thread-item__meta {
font-size: var(--rb-fs-xs);
color: var(--text-muted);
margin-top: 2px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.rb-thread-item__counters {
display: flex;
gap: var(--rb-space-4);
color: var(--text-muted);
font-size: var(--rb-fs-xs);
}
.rb-post {
display: flex;
gap: var(--rb-space-4);
padding: var(--rb-space-4);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius, 10px);
margin-bottom: var(--rb-space-3);
}
.rb-post__sidebar {
flex-shrink: 0;
width: var(--rb-postbit-width, 180px);
display: flex;
flex-direction: column;
gap: 6px;
}
.rb-post__body {
flex: 1;
min-width: 0;
color: var(--text);
font-size: var(--rb-fs-md);
line-height: 1.65;
}
/* ════════════════════════════════════════════════════════════════
THREAD POST LAYOUT — postbit / body / foot separation
Admin editable through /admin/styles/7/templates CSS tokens.
════════════════════════════════════════════════════════════════ */
/* Zero outer post-body padding — content pads itself via.post-prose. */
.post-wrapper .post-body {
padding: 0 !important;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Postbit | Body divider — clear visual split between author sidebar
and message content. Side varies because raxboard_main_theme places
postbit on the LEFT via flex order. */
.post-wrapper .rb-postbit {
border-right: 1px solid var(--border, rgba(245, 244, 242, 0.08));
}
[dir="rtl"] .post-wrapper .rb-postbit {
border-right: none;
border-left: 1px solid var(--border, rgba(245, 244, 242, 0.08));
}
/* Post head — meta line with post-number + permalink. */
.post-wrapper .post-head {
padding: 0.6rem 1.1rem;
border-bottom: 1px solid var(--border, rgba(245, 244, 242, 0.06));
background: color-mix(in srgb, var(--muted, rgba(245, 244, 242, 0.04)) 25%, transparent);
font-size: 0.8125rem;
}
/* Post content — the actual message. Remove stale `p-4` Tailwind utility
from.post-prose (overridden below), then set explicit comfortable padding. */
.post-wrapper .post-prose {
padding: var(--rb-post-prose-padding, 1.25rem) !important;
line-height: var(--rb-post-prose-line-height, 1.65);
}
/* Pin post-foot to the bottom even when content is short. */
.post-wrapper .post-body > .post-foot,
.post-wrapper .post-body > .react-bar,
.post-wrapper .post-body > footer.post-foot {
margin-top: auto;
border-top: 1px solid var(--border, rgba(245, 244, 242, 0.06));
background: color-mix(in srgb, var(--muted, rgba(245, 244, 242, 0.04)) 20%, transparent);
padding: 0.55rem 1rem;
}
/* Reaction bar inside.post-foot — zero the outer padding because the
wrapper now supplies it. */
.post-wrapper .post-foot .react-bar {
border: 0;
background: transparent;
padding: 0;
margin: 0;
}
/* Signature block gets its own breathing room, not inherited from prose. */
.post-wrapper .post-body .signature,
.post-wrapper .post-body .post-signature {
margin: 0;
padding: 0.9rem 1.25rem;
border-top: 1px dashed var(--border, rgba(245, 244, 242, 0.08));
color: var(--muted-foreground, #8a8680);
font-size: 0.8125rem;
}
/* Edit notice — compact inline strip, no vertical padding cascade. */
.post-wrapper .post-body .edit-notice,
.post-wrapper .post-body [data-post-edit-notice] {
padding: 0.35rem 1.1rem;
border-top: 1px solid var(--border, rgba(245, 244, 242, 0.05));
font-size: 0.72rem;
color: var(--muted-foreground, #8a8680);
}
/* Mobile — postbit stacks above body, swap border side. */
@media (max-width: 768px) {
.post-wrapper .rb-postbit {
border-right: 0;
border-bottom: 1px solid var(--border, rgba(245, 244, 242, 0.08));
}
.post-wrapper .post-body {
border-left: 0;
}
}
/* ──────────────────── DARK MODE SAFE-GUARD ──────────────────
* Every rule above already uses tokens that flip automatically via
* the existing `[data-theme="dark"]` ruleset in main.css. Nothing
* to override — the token indirection handles it.
*/
/* ══════════════════════════════════════════════════════════════════
POSTBIT — modern card layout (extracted from inline styles)
Applies to `.rb-postbit.rb-postbit-modern`.
Dynamic bits (username color, online state, banner) stay inline or
use data-* attribute hooks; everything else lives here.
══════════════════════════════════════════════════════════════════ */
.rb-postbit-modern {
display: flex;
flex-direction: column;
padding: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-right: 1px solid var(--border);
border-radius: var(--radius, 12px);
width: var(--rb-postbit-width, 230px);
text-align: left;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}
.rb-postbit-modern.rb-postbit--compact {
width: var(--rb-postbit-width, 200px);
}
/* Avatar wrapper */
.rb-postbit-modern .rb-pb-avatar-link {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: calc(var(--radius, 12px) + 2px);
overflow: hidden;
background: var(--muted);
margin-bottom: 10px;
}
.rb-postbit-modern .rb-pb-online-dot {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--muted-foreground);
border: 3px solid var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.7rem;
}
.rb-postbit-modern .rb-pb-online-dot[data-online="1"] {
background: #22c55e;
}
/* Username */
.rb-postbit-modern .rb-pb-username {
font-weight: 800;
font-size: 1rem;
text-align: center;
display: block;
margin-bottom: 2px;
color: var(--foreground);
text-decoration: none;
}
.rb-postbit-modern .rb-pb-title {
text-align: center;
font-size: 0.75rem;
color: var(--muted-foreground);
margin-bottom: 6px;
font-weight: 500;
}
.rb-postbit-modern .rb-pb-badges {
margin-bottom: 10px;
}
/* Text-fallback (initial) avatar inside the postbit link must fill the
aspect-ratio square wrapper — without this the .rb-avatar div sizes itself
to font-size and renders as a small chip glued to the top-left of the
wrapper, which is the "kayık" misalignment users see on Q&A threads where
the vote rail makes the empty space obvious. */
.rb-postbit-modern .rb-pb-avatar-link > .rb-avatar,
.rb-postbit-modern .rb-pb-avatar-link > .avatar {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(2rem, 5vw, 3.25rem);
border-radius: inherit;
}
/* The postbit ships `hidden sm:flex` (Tailwind) so it should vanish below the
640px breakpoint — but `.rb-postbit-modern{display:flex}` above (equal
specificity, loaded later) defeats `.hidden`, leaving the full sidebar
visible on phones ON TOP of the compact .rb-pbm post-head → duplicate author
block. Force it hidden < 640 (matches the `sm:` breakpoint of `sm:flex` and
our `.rb-pbm.sm:hidden`). ≥640 the `sm:flex` rule restores it, untouched. */
/* Mobile author head visibility is driven HERE (not via Tailwind flex/sm:hidden
utilities) because this stylesheet is concatenated into a single bundle where
utility source-order isn't guaranteed — relying on it let .rb-pbm and the
postbit BOTH show at ~640–768px (the duplicate-author bug). Deterministic:
.rb-pbm hidden by default (desktop/tablet keep the postbit sidebar); shown
only below 640px, where the postbit is force-hidden. */
.rb-pbm { display: none; }
@media (max-width: 639px) {
.rb-postbit.hidden,
.rb-postbit-modern.hidden {
display: none !important;
}
.rb-pbm {
display: flex !important;
align-items: center;
}
}
/* Mobile / narrow-viewport postbit: keep only avatar + username + title.
Badges, trophies, hero stats, row-stats, custom fields, hooks all hide so
the postbit doesn't crowd Discussion / Q&A / Article threads on phones and
tablets. Desktop sidebar layout untouched. */
@media (max-width: 768px) {
/* ── Mobile post head (.rb-pbm) — avatar | [name · rank] / title ──
The desktop postbit is hidden < sm, so this inline head IS the mobile
author block. Keep avatar small, rank badge compact, title muted. */
/* style7 post-head holds the mobile author head + date/#; let it wrap. */
.post-head { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
.rb-pbm .rb-avatar,
.rb-pbm .avatar {
width: 38px !important;
height: 38px !important;
font-size: 0.95rem !important;
}
.rb-pbm__name { font-size: 0.9rem; }
.rb-pbm__top .rb-banner,
.rb-pbm__top [class*="banner"],
.rb-pbm__top [class*="badge"],
.rb-pbm__top .pill,
.rb-pbm-badges .rb-banner,
.rb-pbm-badges [class*="banner"],
.rb-pbm-badges [class*="badge"] {
font-size: 0.56rem !important;
padding: 1px 6px !important;
line-height: 1.3 !important;
}
/* ── Article OP author bar (.rbs7-8d5b0ae2) — compact on mobile.
Desktop keeps the 2xl avatar + stats row + post#; mobile shrinks the
avatar, tightens padding, and (via the template) shows the rank badge
inline while the stats row / post# stay hidden. */
.rbs7-8d5b0ae2 {
padding: 12px 14px !important;
gap: 10px !important;
}
.rbs7-8d5b0ae2 .rb-avatar,
.rbs7-8d5b0ae2 .avatar {
width: 48px !important;
height: 48px !important;
font-size: 1.15rem !important;
}
.rbs7-8d5b0ae2 [class*="banner"],
.rbs7-8d5b0ae2 [class*="badge"],
.rbs7-8d5b0ae2 .pill {
font-size: 0.58rem !important;
padding: 1px 6px !important;
}
.rb-postbit-modern.rb-postbit--compact {
width: var(--rb-postbit-width-mobile, 140px);
padding: 12px 10px;
}
.rb-postbit-modern .rb-pb-username {
font-size: 0.85rem;
line-height: 1.15;
word-break: break-word;
overflow-wrap: anywhere;
}
.rb-postbit-modern .rb-pb-title {
font-size: 0.68rem;
line-height: 1.2;
margin-bottom: 0;
}
/* Hide everything except avatar / username / title on mobile postbit. */
.rb-postbit-modern .rb-pb-badges,
.rb-postbit-modern .rb-pb-trophies,
.rb-postbit-modern .rb-pb-hero,
.rb-postbit-modern .rb-pb-rows,
.rb-postbit-modern .rb-pb-customfields,
.rb-postbit-modern [data-rb-postbit-cf],
.rb-postbit-modern .rb-pb-actions {
display: none !important;
}
}
/* Hero stats row (Points · heart · Solutions) */
.rb-postbit-modern .rb-pb-hero {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--muted) 35%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rb-postbit-modern .rb-pb-hero-cell {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 6px;
text-align: center;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.rb-postbit-modern .rb-pb-hero-cell:hover {
border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.rb-postbit-modern .rb-pb-hero-cell--icon {
display: flex;
align-items: center;
justify-content: center;
}
.rb-postbit-modern .rb-pb-hero-cell i {
color: var(--muted-foreground);
font-size: 1.1rem;
}
.rb-postbit-modern .rb-pb-hero-cell__label {
font-size: 0.65rem;
color: var(--muted-foreground);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rb-postbit-modern .rb-pb-hero-cell__value {
font-size: 1rem;
font-weight: 800;
color: var(--primary);
margin-top: 2px;
}
/* Row stats list */
.rb-postbit-modern .rb-pb-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.rb-postbit-modern .rb-pb-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--muted) 40%, transparent);
font-size: 0.78rem;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.rb-postbit-modern .rb-pb-row:hover {
background: color-mix(in srgb, var(--muted) 70%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
transform: translateX(2px);
}
.rb-postbit-modern .rb-pb-row__icon {
color: var(--muted-foreground);
width: 14px;
text-align: center;
font-size: 0.8rem;
}
.rb-postbit-modern .rb-pb-row__label {
flex: 1;
color: var(--muted-foreground);
}
.rb-postbit-modern .rb-pb-row__value {
color: var(--foreground);
font-weight: 700;
}
.rb-postbit-modern .rb-pb-row__value--link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
max-width: 55%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rb-postbit-modern .rb-pb-row--warn .rb-pb-row__icon,
.rb-postbit-modern .rb-pb-row--warn .rb-pb-row__value {
color: #ef4444;
}
/* Custom fields block */
.rb-postbit-modern .rb-pb-custom {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* Profile CTA */
.rb-postbit-modern .rb-pb-profile-btn {
display: block;
text-align: center;
margin-top: 10px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.75rem;
font-weight: 600;
color: var(--foreground);
background: transparent;
transition: background 0.15s;
text-decoration: none;
}
.rb-postbit-modern .rb-pb-profile-btn:hover {
background: var(--muted);
}
/* === components.css === */
/* ══════════════════════════════════════════════════════════════════
RaxBoard Components — Semantic Class Library (Phase 6)
Theme-agnostic semantic class library that consumes ONLY the unified
--rb-* token layer (defined in tokens.css). Themes override tokens,
never these class definitions.
Convention:
.rb- — base component
.rb---variant — modifier
.rb-__part — sub-element
USE IN CORE TEMPLATES. Themes should NOT redefine these classes;
they should override --rb-* tokens.
══════════════════════════════════════════════════════════════════ */
/* ── Layout primitives ──────────────────────────────────────────── */
.rb-stack { display: flex; flex-direction: column; gap: 8px; }
.rb-row { display: flex; align-items: center; gap: 8px; }
.rb-row--between { justify-content: space-between; }
.rb-row--wrap { flex-wrap: wrap; }
.rb-grid { display: grid; gap: 16px; }
.rb-container {
max-width: var(--rb-max-page-width, 1280px);
margin: 0 auto;
padding: 0 16px;
}
/* ── Card ───────────────────────────────────────────────────────── */
.rb-card {
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-radius);
overflow: hidden;
}
.rb-card__head {
padding: 12px 16px;
border-bottom: 1px solid var(--rb-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-weight: 600;
color: var(--rb-text);
}
.rb-card__head--brand {
background: linear-gradient(180deg, var(--rb-primary) 0%, var(--rb-accent) 100%);
color: var(--rb-primary-fg, #fff);
border-bottom-color: transparent;
}
.rb-card__body { padding: 16px; color: var(--rb-text); }
.rb-card__foot {
padding: 10px 16px;
border-top: 1px solid var(--rb-border-soft, var(--rb-border));
background: var(--rb-bg-alt);
font-size: 0.875rem;
}
/* ── Button ─────────────────────────────────────────────────────── */
.rb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
border: 1px solid var(--rb-border);
border-radius: var(--rb-radius-sm);
background: var(--rb-surface);
color: var(--rb-text);
cursor: pointer;
text-decoration: none;
transition: background var(--rb-duration-fast, 150ms), color var(--rb-duration-fast, 150ms), border-color var(--rb-duration-fast, 150ms);
}
.rb-btn:hover { background: var(--rb-bg-alt); }
.rb-btn:focus-visible { outline: 2px solid var(--rb-primary); outline-offset: 2px; }
.rb-btn--primary {
background: var(--rb-primary);
color: var(--rb-primary-fg, #fff);
border-color: var(--rb-primary);
}
.rb-btn--primary:hover { background: var(--rb-primary); filter: brightness(1.08); }
.rb-btn--ghost {
background: transparent;
border-color: transparent;
}
.rb-btn--ghost:hover { background: var(--rb-bg-alt); }
.rb-btn--danger {
background: var(--rb-danger);
color: #fff;
border-color: var(--rb-danger);
}
.rb-btn--sm { padding: 5px 10px; font-size: 12.5px; }
.rb-btn--lg { padding: 11px 18px; font-size: 15px; }
.rb-btn--icon {
width: 34px;
height: 34px;
padding: 0;
border-radius: var(--rb-radius-sm);
}
.rb-btn[disabled],
.rb-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Input ──────────────────────────────────────────────────────── */
.rb-input,
.rb-select,
.rb-textarea {
width: 100%;
padding: 9px 12px;
font-size: 14px;
font-family: inherit;
color: var(--rb-text);
background: var(--rb-bg-elev);
border: 1px solid var(--rb-border);
border-radius: var(--rb-radius-sm);
outline: 0;
box-sizing: border-box;
}
.rb-input:focus,
.rb-select:focus,
.rb-textarea:focus {
border-color: var(--rb-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-primary) 16%, transparent);
}
.rb-input--sm { padding: 6px 10px; font-size: 13px; }
.rb-textarea { resize: vertical; min-height: 80px; }
.rb-label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
color: var(--rb-text);
}
/* ── Tabs (underline pattern) ───────────────────────────────────── */
.rb-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--rb-border);
background: var(--rb-surface);
border-radius: var(--rb-radius) var(--rb-radius) 0 0;
padding: 0 6px;
}
.rb-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: var(--rb-text-muted);
border-bottom: 2px solid transparent;
background: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: color var(--rb-duration-fast, 150ms), border-color var(--rb-duration-fast, 150ms);
}
.rb-tab:hover { color: var(--rb-primary); }
.rb-tab[aria-selected="true"],
.rb-tab.is-active {
color: var(--rb-primary);
border-bottom-color: var(--rb-primary);
}
/* ── Badge / Pill ───────────────────────────────────────────────── */
.rb-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
border-radius: 9999px;
background: var(--rb-bg-alt);
color: var(--rb-text-muted);
}
.rb-badge--primary { background: var(--rb-primary); color: var(--rb-primary-fg, #fff); }
.rb-badge--success { background: var(--rb-success); color: #fff; }
.rb-badge--warning { background: var(--rb-warning); color: #fff; }
.rb-badge--danger { background: var(--rb-danger); color: #fff; }
.rb-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 12.5px;
font-weight: 600;
border-radius: 9999px;
background: var(--rb-bg-alt);
border: 1px solid var(--rb-border);
color: var(--rb-text-muted);
text-decoration: none;
transition: background var(--rb-duration-fast, 150ms);
}
.rb-pill:hover {
background: var(--rb-primary);
color: var(--rb-primary-fg, #fff);
border-color: var(--rb-primary);
}
/* ── List rows ──────────────────────────────────────────────────── */
.rb-list-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--rb-border-soft, var(--rb-border));
color: var(--rb-text);
text-decoration: none;
transition: background var(--rb-duration-fast, 150ms);
}
.rb-list-row:hover { background: var(--rb-bg-alt); }
.rb-list-row:last-child { border-bottom: 0; }
.rb-list-row--active {
background: color-mix(in srgb, var(--rb-primary) 6%, transparent);
border-left: 3px solid var(--rb-primary);
padding-left: 11px;
}
/* ── Avatar ─────────────────────────────────────────────────────── */
.rb-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--rb-radius-full);
background: var(--rb-bg-alt);
color: var(--rb-text);
font-weight: 700;
overflow: hidden;
flex-shrink: 0;
}
.rb-avatar--xs { width: 18px; height: 18px; font-size: 9px; border-radius: 50%; }
.rb-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.rb-avatar--md { width: 36px; height: 36px; font-size: 14px; }
.rb-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.rb-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ── Empty state ────────────────────────────────────────────────── */
.rb-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 24px;
color: var(--rb-text-muted);
text-align: center;
}
.rb-empty__icon {
font-size: 40px;
color: var(--rb-border);
}
/* ── Dropdown ───────────────────────────────────────────────────── */
.rb-dropdown {
position: absolute;
min-width: 220px;
padding: 6px;
background: var(--rb-surface);
border: 1px solid var(--rb-border);
border-radius: var(--rb-radius-sm);
box-shadow: var(--rb-shadow-lg);
z-index: 200;
}
.rb-dropdown__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
color: var(--rb-text);
text-decoration: none;
background: transparent;
border: 0;
width: 100%;
font-family: inherit;
cursor: pointer;
}
.rb-dropdown__item:hover {
background: var(--rb-bg-alt);
color: var(--rb-primary);
}
.rb-dropdown__divider {
height: 1px;
background: var(--rb-border);
margin: 6px 0;
}
/* ── Helpers ────────────────────────────────────────────────────── */
.rb-text-muted { color: var(--rb-text-muted); }
.rb-text-faint { color: var(--rb-text-faint); }
.rb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-hidden { display: none !important; }
.rb-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Tailwind responsive utility shim */
/* Templates ship with .hidden + .sm:flex / .md:flex pairs. */
/* Without these rules, hidden wins on every viewport and */
/* Topics/Messages/Last-Post columns vanish from forum rows. */
/* ═══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
.sm\:flex { display: flex !important; }
.sm\:grid { display: grid !important; }
.sm\:block { display: block !important; }
.sm\:inline { display: inline !important; }
.sm\:inline-flex { display: inline-flex !important; }
.sm\:inline-block { display: inline-block !important; }
.sm\:table-cell { display: table-cell !important; }
.sm\:hidden { display: none !important; }
.sm\:flex-row { flex-direction: row !important; }
.sm\:items-center { align-items: center !important; }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) {
.md\:flex { display: flex !important; }
.md\:grid { display: grid !important; }
.md\:block { display: block !important; }
.md\:inline { display: inline !important; }
.md\:inline-flex { display: inline-flex !important; }
.md\:inline-block { display: inline-block !important; }
.md\:table-cell { display: table-cell !important; }
.md\:hidden { display: none !important; }
.md\:flex-row { flex-direction: row !important; }
.md\:items-center { align-items: center !important; }
.md\:border-r { border-right-width: 1px !important; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex !important; }
.lg\:grid { display: grid !important; }
.lg\:block { display: block !important; }
.lg\:inline { display: inline !important; }
.lg\:inline-flex { display: inline-flex !important; }
.lg\:table-cell { display: table-cell !important; }
.lg\:hidden { display: none !important; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1280px) {
.xl\:flex { display: flex !important; }
.xl\:grid { display: grid !important; }
.xl\:block { display: block !important; }
.xl\:hidden { display: none !important; }
}
/* === customizer-hooks.css === */
/* ══════════════════════════════════════════════════════════════════
Customizer Hooks — bridge CSS variables to actual selectors.
These rules exist so customizer properties produce visible changes
in the public theme. Without them the variable is set but nothing
reads it. Defaults via var() second argument so the theme still
renders if the customizer hasn't been touched.
When adding a customizer property whose --var name lives in
CssPropertyMapping.php, add a consumer here unless an existing
stylesheet already references it.
══════════════════════════════════════════════════════════════════ */
/* ── Body / surfaces ─────────────────────────────────────────────── */
/* secondaryBg is an *optional* tint for sectioned layouts — opt in via class. */
.rb-secondary-surface {
background-color: var(--rb-secondary-bg, var(--background, transparent));
}
/* ── Typography fallbacks ────────────────────────────────────────── */
:root {
--rb-font-size-small: var(--rb-font-size-small, 0.875rem);
--rb-font-size-smaller: var(--rb-font-size-smaller, 0.75rem);
--font-weight-bold: var(--font-weight-bold, 700);
}
.rb-text-small { font-size: var(--rb-font-size-small); }
.rb-text-smaller { font-size: var(--rb-font-size-smaller); }
.rb-text-bold { font-weight: var(--font-weight-bold); }
/* ── Generic spacing alias ───────────────────────────────────────── */
/* Tailwind v4 utilities (gap-*, p-*, m-*, w-*, h-*) compile to
calc(var(--spacing) * N). The Vite bundle declares `--spacing:.25rem`
inside an `@theme {}` directive which browsers do NOT parse, so the
variable ends up unset and every utility resolves to `calc( * N)` →
invalid → ignored. Define a real `:root` default here so the utilities
work without the build step. Themes / customizer can still override. */
:root { --spacing: 0.25rem; }
/* ── Feature border (highlight / focus / accent edges) ───────────── */
:root { --rb-border-size-feature: var(--rb-border-size-feature, 2px); }
.rb-feature-border, .rb-card--feature, .rb-callout {
border-width: var(--rb-border-size-feature);
border-style: solid;
}
/* ── Header / Navigation ─────────────────────────────────────────── */
.rb-nav, .site-nav, nav.primary-nav {
background: var(--rb-nav-bg, var(--rb-header-bg, transparent));
}
.rb-layout, .with-sidebar {
--rb-sidebar-width: var(--rb-sidebar-width, 240px);
}
.rb-sidebar, aside.app-sidebar {
width: var(--rb-sidebar-width);
flex: 0 0 var(--rb-sidebar-width);
}
/* ── Forms — switch component background ─────────────────────────── */
.rb-switch, .switch, [role="switch"] {
background: var(--rb-switch-bg, var(--switch-background, var(--muted, #e2e2e2)));
}
/* ── Message / Post — signature separator + quote/code blocks ────── */
.rb-message__signature, .post-signature {
border-top: 1px solid var(--rb-message-signature-border, var(--border, rgba(255,255,255,0.08)));
}
.bbWrapper blockquote, .rb-quote, .bbcode-quote, .rb-message__body blockquote {
background: var(--rb-quote-block-bg, rgba(255,255,255,0.04));
border-left: 3px solid var(--rb-quote-block-border, var(--rb-link-color, currentColor));
}
.rb-code-block, .bbWrapper pre, .bbWrapper code,
.rb-message__body pre, .rb-message__body > code {
background: var(--rb-code-block-bg, rgba(0,0,0,0.25));
border: 1px solid var(--rb-code-block-border, var(--border, transparent));
}
/* ── Animations / Easing ─────────────────────────────────────────── */
:root {
--ease-in: var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
--ease-out: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}
/* ── Widgets ─────────────────────────────────────────────────────── */
.rb-widget, .widget {
background: var(--rb-widget-card-bg, var(--rb-card-bg, transparent));
}
.rb-widget__header, .widget-header {
background: var(--rb-widget-header-bg, transparent);
}
/* ── Dark-mode logo swap (uses customizer logoDarkUrl) ───────────── */
[data-theme="dark"] .rb-logo--dark,
html.dark .rb-logo--dark {
content: var(--rb-logo-dark-url, none);
}
/* === rb-dialog.css === */
/* ─────────────────────────────────────────────────────────
RaxBoard Native Dialog System
Replaces window.alert / window.confirm / window.prompt
─────────────────────────────────────────────────────── */
/* ── Native