mirror of
https://github.com/ancsemi/Haven.git
synced 2026-11-04 21:12:50 +00:00
ancsemi
1aed4c50ab
A group leader indents its text by (row padding + avatar + gap). The messages that follow it have no avatar, so they pad by that same total to line up. Both numbers were written out by hand in five places, and two of them disagreed: the spacious density set the leader side to 70px but never got a matching compact rule, so follow-ups sat 14px to its left, and the Braid themes resized the row and avatar with !important while leaving the compact side alone, for 8px. Two separate reports, one defect. One side is now derived from the other through --msg-gutter, and density tiers, breakpoints and themes set only the parts. The two cannot drift apart again, and a theme that follows the same convention gets it right for free. The ~480px breakpoint was 4px out for the same reason and is fixed too. Measured against a live server: leader and follow-up left edges are identical across cozy/compact/spacious at 1280/760/350px, and under both Braid themes.
191 lines
17 KiB
CSS
191 lines
17 KiB
CSS
/**
|
||
* @name Braid Light
|
||
* @description Braid's airy light look — white surfaces, deep green accent, soft rounded corners. Pairs with the Braid Layout plugin.
|
||
* @author Amnibro
|
||
* @version 1.0
|
||
* @icon 🍃
|
||
*/
|
||
|
||
/*
|
||
Braid — light. Palette is 1:1 with Haven-Mobile's BRAID_LIGHT preset
|
||
(deep green #00875a on white, radius scale 1.6). File themes load on
|
||
the stable "haven" layout base, so tokens live on :root and win over
|
||
style.css by cascade order. Sizes are rem so the interface Zoom
|
||
slider scales Braid chrome together with everything else.
|
||
*/
|
||
|
||
:root {
|
||
/* ── Backgrounds ───────────────────────────────── */
|
||
--bg-primary: #f7f7f8;
|
||
--bg-secondary: #ffffff;
|
||
--bg-tertiary: #efeff1;
|
||
--bg-hover: #eaeaed;
|
||
--bg-active: #e0e0e4;
|
||
--bg-input: #ffffff;
|
||
--bg-card: #ffffff;
|
||
|
||
/* ── Accent ────────────────────────────────────── */
|
||
--accent: #00875a;
|
||
--accent-hover: #0a8f63;
|
||
--accent-dim: #00694a;
|
||
--accent-glow: rgba(0, 135, 90, .22);
|
||
|
||
/* ── Text ──────────────────────────────────────── */
|
||
--text-primary: #09090b;
|
||
--text-secondary:#3f3f46;
|
||
--text-muted: #71717a;
|
||
--text-link: #00875a;
|
||
|
||
/* ── Borders ───────────────────────────────────── */
|
||
--border: #e4e4e7;
|
||
--border-light: #d4d4d8;
|
||
|
||
/* ── Status ────────────────────────────────────── */
|
||
--success: #15803d;
|
||
--danger: #dc2626;
|
||
--warning: #b45309;
|
||
--led-on: #15803d;
|
||
--led-off: #d4d4d8;
|
||
--led-glow: rgba(21, 128, 61, .3);
|
||
|
||
/* ── Typography ────────────────────────────────── */
|
||
--font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Inter, sans-serif;
|
||
--font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
|
||
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||
|
||
/* ── Shape (the Braid signature: 1.6× rounder) ─── */
|
||
--radius: .875rem;
|
||
--radius-sm: .75rem;
|
||
--braid-r: .875rem;
|
||
--braid-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .1);
|
||
|
||
--theme-logo: "⬡";
|
||
--msg-glow: none;
|
||
--scanline: none;
|
||
}
|
||
|
||
|
||
/* == Type & color enforcement == make the Braid type stack and palette
|
||
land everywhere, over style.css's own per-element declarations. */
|
||
body, button, input, textarea, select { font-family: var(--font-main) !important; }
|
||
h1, h2, h3, h4, h5, h6, .brand-text, .auth-header h1 { font-family: var(--font-heading) !important; }
|
||
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text-primary); }
|
||
::placeholder { color: var(--text-muted) !important; opacity: 1; }
|
||
a, .text-link { color: var(--text-link); }
|
||
.message-time, .msg-time, .message-header .msg-time, .timestamp { color: var(--text-muted) !important; }
|
||
.message-text, .message-content { color: var(--text-primary) !important; }
|
||
.message-text a, .message-content a { color: var(--text-link) !important; }
|
||
.section-label, .settings-nav-group-label, .braid-menu-label { color: var(--text-muted) !important; }
|
||
.channel-name, .current-user, #channel-header-name { color: var(--text-primary) !important; }
|
||
.channel-topic-bar { color: var(--text-muted) !important; }
|
||
|
||
/* ── Base type & chrome ──────────────────────────── */
|
||
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg-primary); }
|
||
body { background: var(--bg-primary) !important; color: var(--text-primary) !important; font: 400 .9375rem/1.5 var(--font-main); letter-spacing: -.011em; }
|
||
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: .5rem; }
|
||
::-webkit-scrollbar { width: .5rem; height: .5rem; }
|
||
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; border: 2px solid transparent; }
|
||
|
||
/* ── Server rail ─────────────────────────────────── */
|
||
.server-bar { background: var(--bg-tertiary) !important; border-right: 1px solid var(--border) !important; padding: 1rem 0; gap: .625rem; }
|
||
.server-icon { width: 2.75rem !important; height: 2.75rem !important; border-radius: var(--braid-r) !important; background: var(--bg-tertiary); box-shadow: none !important; transition: background .15s, border-radius .15s, transform .12s; border: 0; }
|
||
.server-icon:hover { border-radius: var(--braid-r) !important; background: var(--bg-hover) !important; transform: none; }
|
||
.server-icon.home { background: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important; border: 0 !important; }
|
||
.server-icon.home:hover { background: var(--accent-hover) !important; }
|
||
.server-icon.add-server, .server-icon.manage-servers, .server-icon.sync-servers { border: 1px solid var(--border-light) !important; background: transparent !important; }
|
||
.server-icon.add-server:hover, .server-icon.manage-servers:hover, .server-icon.sync-servers:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)) !important; background: var(--bg-hover) !important; }
|
||
.server-separator { width: 1.75rem; height: 1px; background: var(--border); margin: .25rem 0; border-radius: 1px; }
|
||
|
||
/* ── Sidebar ─────────────────────────────────────── */
|
||
.sidebar { background: var(--bg-secondary) !important; border-right: 1px solid var(--border) !important; box-shadow: none !important; }
|
||
.sidebar-header { padding: 1rem .875rem .875rem !important; border-bottom: 1px solid var(--border) !important; background: color-mix(in srgb, var(--bg-secondary) 90%, transparent) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
|
||
.brand { gap: .5rem; margin-bottom: .625rem; }
|
||
.brand-text { font-size: 1rem !important; font-weight: 650 !important; letter-spacing: -.03em !important; text-transform: none !important; text-shadow: none !important; -webkit-text-fill-color: unset !important; background: none !important; color: var(--text-primary) !important; }
|
||
.user-bar { padding: .625rem .75rem; background: var(--bg-tertiary) !important; border: 1px solid var(--border) !important; border-radius: var(--braid-r) !important; }
|
||
.current-user { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
|
||
.icon-btn { width: 2.125rem; height: 2.125rem; padding: 0; border-radius: .625rem; color: var(--text-muted); }
|
||
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
|
||
.section-label { font-size: .625rem; font-weight: 650; letter-spacing: .13em; margin: .875rem .625rem .5rem; color: var(--text-muted); }
|
||
.channel-item { margin: 2px .625rem !important; padding: .625rem .75rem !important; border-radius: var(--radius-sm) !important; gap: .5rem; }
|
||
.channel-item:hover { background: var(--bg-hover); }
|
||
.channel-item.active { background: var(--bg-active); }
|
||
.channel-item.active::before { display: none !important; }
|
||
.channel-name { font-size: .875rem !important; font-weight: 550 !important; letter-spacing: -.015em !important; }
|
||
.channel-voice-user { margin: 0 .5rem 0 1.75rem; padding: .25rem .5rem; border-radius: .5rem; }
|
||
.input-row input { padding: .5rem .75rem; border-radius: .625rem; background: var(--bg-input); border: 1px solid var(--border); font-size: .8125rem; }
|
||
.input-row input:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
|
||
.btn-sm { border-radius: .625rem; padding: .5rem .75rem; font-weight: 550; }
|
||
|
||
/* ── Chat area ───────────────────────────────────── */
|
||
.main, .main-content, .chat-area, #chat-area, .center-panel { background: var(--bg-primary) !important; }
|
||
.chat-header, .channel-header, #channel-header { min-height: 3.25rem !important; border-bottom: 1px solid var(--border) !important; background: color-mix(in srgb, var(--bg-secondary) 90%, transparent) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: none !important; }
|
||
.channel-header h2, .chat-header h2, .channel-title, #channel-header-name { font-size: .9375rem !important; font-weight: 650 !important; letter-spacing: -.02em !important; }
|
||
.header-actions-box { border: 1px solid var(--border) !important; border-radius: .75rem !important; background: var(--bg-tertiary) !important; padding: .25rem .5rem !important; }
|
||
.messages { padding: 1.5rem 1.75rem .75rem !important; gap: .25rem; width: 100%; box-sizing: border-box; }
|
||
.message { border-radius: var(--braid-r) !important; }
|
||
.message:hover { background: rgba(0, 0, 0, .03) !important; box-shadow: none !important; }
|
||
/* Message gutter — drive the shared variables instead of restyling
|
||
.message-row / .message-avatar directly. A compact follow-up has no avatar
|
||
and indents by (padding + avatar + gap); sizing only the leader's half left
|
||
follow-ups 8px to its left. See --msg-gutter in style.css. */
|
||
:root { --msg-pad-x: .75rem; --msg-pad-y: .5rem; --msg-avatar: 2.375rem; --msg-gap: .875rem; }
|
||
.message-avatar, .message-avatar-img { border-radius: .75rem !important; border: 0 !important; box-shadow: none !important; }
|
||
.message-author, .message-username { font-weight: 650; letter-spacing: -.01em; }
|
||
.message-text, .message-content { font-size: .9375rem !important; line-height: 1.58 !important; letter-spacing: -.01em; color: var(--text-primary); text-shadow: none !important; }
|
||
.message-input-area, .message-input-container { padding: .875rem 1.375rem 1.125rem !important; background: color-mix(in srgb, var(--bg-secondary) 92%, transparent) !important; border-top: 1px solid var(--border) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); gap: .5rem; border-radius: 0 !important; }
|
||
.message-input-area textarea, .message-input-container textarea { padding: .875rem 1rem !important; border-radius: 1.25rem !important; background: var(--bg-card) !important; border: 1px solid var(--border-light) !important; font-size: .96875rem !important; line-height: 1.45 !important; box-shadow: var(--braid-shadow) !important; transition: border-color .15s, box-shadow .15s; }
|
||
.message-input-area textarea:focus, .message-input-container textarea:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; box-shadow: var(--braid-shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
|
||
.btn-send, .thread-send-btn { width: 2.5rem !important; height: 2.5rem !important; border-radius: var(--braid-r) !important; background: var(--accent) !important; color: #ffffff !important; box-shadow: none !important; border: 0 !important; }
|
||
.btn-send:hover, .thread-send-btn:hover { background: var(--accent-hover) !important; transform: scale(.98); filter: none !important; }
|
||
|
||
/* ── Right sidebar / members ─────────────────────── */
|
||
.right-sidebar { background: var(--bg-secondary) !important; border-left: 1px solid var(--border) !important; }
|
||
.user-item, .member-item { margin: 2px .625rem; padding: .625rem .75rem; border-radius: var(--radius-sm); }
|
||
.user-item:hover, .member-item:hover { background: var(--bg-hover); }
|
||
|
||
/* ── Modals, menus, popups ───────────────────────── */
|
||
.modal, .modal-content, .settings-modal, .dialog, .settings-panel { border-radius: 1.125rem !important; border: 1px solid var(--border) !important; box-shadow: 0 16px 48px -12px rgba(0, 0, 0, .18), var(--braid-shadow) !important; background: var(--bg-card) !important; }
|
||
.modal-header, .settings-header { border-bottom: 1px solid var(--border) !important; background: transparent !important; }
|
||
.settings-tab, .settings-nav-item, .sound-tab { border-radius: .625rem !important; }
|
||
.settings-tab.active, .settings-nav-item.active, .sound-tab.active { background: color-mix(in srgb, var(--accent) 16%, var(--bg-tertiary)) !important; color: var(--accent) !important; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; }
|
||
.btn-primary, .btn-accent, .profile-dm-btn, .btn-admin-save { border-radius: .75rem !important; font-weight: 600 !important; letter-spacing: -.01em; box-shadow: none !important; }
|
||
.btn-secondary, .btn.secondary { border-radius: .75rem !important; border: 1px solid var(--border-light) !important; background: var(--bg-tertiary) !important; }
|
||
.context-menu, .dropdown-menu, .msg-toolbar { border-radius: var(--braid-r) !important; border: 1px solid var(--border) !important; box-shadow: var(--braid-shadow) !important; background: var(--bg-card) !important; }
|
||
.profile-popup, .profile-card { border-radius: 1rem !important; border: 1px solid var(--border) !important; box-shadow: var(--braid-shadow) !important; }
|
||
.theme-btn { border-radius: .75rem !important; }
|
||
.reaction, .reaction-chip, .reaction-badge { border-radius: 999px !important; }
|
||
.toast, .notification-toast, .chip-toast { border-radius: 999px !important; backdrop-filter: blur(10px); }
|
||
.jump-to-bottom { border-radius: 999px !important; border: 1px solid var(--border-light) !important; box-shadow: var(--braid-shadow) !important; }
|
||
.inline-code, code { border-radius: .375rem !important; background: var(--bg-tertiary) !important; border: 1px solid var(--border) !important; }
|
||
.mention { border-radius: .375rem !important; }
|
||
|
||
/* ── Voice ───────────────────────────────────────── */
|
||
.voice-bar, .voice-panel, .vc-bar, .voice-status-bar { border-top: 1px solid var(--border) !important; background: var(--bg-secondary) !important; box-shadow: none !important; }
|
||
.btn-voice, .voice-panel-btn, .voice-header-btn { border-radius: .75rem !important; border: 1px solid var(--border) !important; background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
|
||
.btn-voice:hover, .voice-panel-btn:hover, .voice-header-btn:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
|
||
.btn-voice.active, .voice-panel-btn.active, .voice-header-btn.active { background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary)) !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important; }
|
||
.btn-voice.btn-danger, .voice-panel-leave, .voice-header-leave { border-radius: .75rem !important; background: color-mix(in srgb, var(--danger) 12%, var(--bg-tertiary)) !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)) !important; }
|
||
.channel-voice-indicator { color: var(--success); }
|
||
.music-panel { border-bottom: 1px solid var(--border) !important; background: var(--bg-secondary) !important; border-radius: 0; }
|
||
.music-panel-controls button, .music-btn { border-radius: .625rem !important; }
|
||
|
||
/* ── Login page ──────────────────────────────────── */
|
||
.auth-page { background: var(--bg-primary) !important; background-image: none !important; }
|
||
.auth-card { border-radius: 1.25rem !important; border: 1px solid var(--border) !important; box-shadow: var(--braid-shadow) !important; background: var(--bg-card) !important; padding: 2.5rem 2.25rem !important; }
|
||
.auth-header .logo { font-size: 2.5rem; width: 4rem; height: 4rem; margin: 0 auto .5rem; display: grid; place-items: center; border-radius: 1.125rem; background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); color: var(--accent); }
|
||
.auth-header h1 { font-size: 1.375rem !important; font-weight: 680 !important; letter-spacing: -.04em !important; text-transform: none; }
|
||
.auth-header .tagline { font-size: .84375rem !important; color: var(--text-muted) !important; margin-top: .375rem !important; }
|
||
.auth-tabs { background: var(--bg-tertiary) !important; border: 1px solid var(--border); border-radius: .75rem !important; padding: .25rem !important; }
|
||
.auth-tab { border-radius: .625rem !important; font-weight: 550; }
|
||
.auth-tab.active { background: var(--accent) !important; color: #ffffff !important; }
|
||
.form-group label { font-size: .6875rem !important; letter-spacing: .06em !important; color: var(--text-muted) !important; }
|
||
.form-group input, .form-select { border-radius: .75rem !important; padding: .75rem .875rem !important; border: 1px solid var(--border) !important; background: var(--bg-input) !important; }
|
||
.form-group input:focus, .form-select:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
|
||
|
||
@media (max-width: 56.25rem) {
|
||
.messages { padding: 1rem .875rem .625rem !important; max-width: none; }
|
||
.message-input-area, .message-input-container { padding: .625rem .75rem .875rem !important; }
|
||
.auth-card { padding: 1.75rem 1.25rem !important; }
|
||
}
|