@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("/fonts/opendyslexic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("/fonts/opendyslexic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } /* ========================================================================== Themes. Every colour in the app comes from these names, so a theme only has to set them. Themes and light/dark are chosen in Settings → Appearance (app.js sets data-theme and data-scheme on ). ========================================================================== */ :root { /* Brand colours, taken from the Xefer fox */ --pink: #EC0F6E; --magenta: #BE0F5A; --amber: #FCAC01; --amber-ink: #2B1A00; --berry-950: #1A0613; --berry-900: #250A1D; --berry-800: #34102A; --cream: #FFF3EA; --bg: #F6F1F3; --surface: #FFFFFF; --raised: #FAF6F8; --ink: #25131D; --muted: #6F5B66; --line: #E7DCE1; --hover: rgba(37, 19, 29, 0.05); --accent: var(--magenta); /* filled buttons (white text stays readable) */ --accent-ink: #FFFFFF; --link: var(--magenta); /* links and highlighted text */ --tint: rgba(236, 15, 110, 0.1); --good: #1E8A57; --danger: #B3412C; --danger-ink: #FFFFFF; --ping: rgba(252, 172, 1, 0.14); --focus: var(--amber); --focus-halo: transparent; --badge: var(--amber); --badge-ink: var(--amber-ink); --send: var(--amber); --send-ink: var(--amber-ink); --new-ink: #9A6500; --rail-bg: var(--berry-900); --side-bg: var(--berry-800); --side-ink: #F7E9F0; --side-muted: #C9A1B8; --side-strong: #FFFFFF; --side-hover: rgba(255, 255, 255, 0.07); --side-active: rgba(255, 255, 255, 0.13); --side-accent: var(--amber); --side-accent-ink: var(--berry-900); --me-bar-bg: rgba(0, 0, 0, 0.2); --brand-tile: var(--pink); --wordmark: var(--cream); --online: #3DBE7A; --idle: var(--amber); --dnd: #E5484D; --offline: #9A8791; --avatar-sat: 40%; --r-btn: 10px; --r-card: 18px; --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --shadow: 0 10px 30px rgba(40, 8, 28, 0.18); } /* before the app has started, follow the device's dark setting */ @media (prefers-color-scheme: dark) { :root:not([data-scheme]) { --bg: #150E13; --surface: #1E151B; --raised: #271C24; --ink: #F4E9EF; --muted: #AA96A1; --line: #372931; --hover: rgba(244, 233, 239, 0.055); --accent: #D10F63; --link: #FF5C9E; --tint: rgba(255, 92, 158, 0.14); --good: #4FC08A; --danger: #F0806A; --danger-ink: #2A0F08; --ping: rgba(252, 172, 1, 0.1); --new-ink: var(--amber); --rail-bg: var(--berry-950); --side-bg: var(--berry-900); --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } } [data-scheme="dark"] { --bg: #150E13; --surface: #1E151B; --raised: #271C24; --ink: #F4E9EF; --muted: #AA96A1; --line: #372931; --hover: rgba(244, 233, 239, 0.055); --accent: #D10F63; --link: #FF5C9E; --tint: rgba(255, 92, 158, 0.14); --good: #4FC08A; --danger: #F0806A; --danger-ink: #2A0F08; --ping: rgba(252, 172, 1, 0.1); --new-ink: var(--amber); --rail-bg: var(--berry-950); --side-bg: var(--berry-900); --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* High contrast: strongest contrast, a black sidebar, a two-tone focus ring that shows on any background */ [data-theme="contrast"] { --bg: #FFFFFF; --surface: #FFFFFF; --raised: #F0F0F0; --ink: #000000; --muted: #262626; --line: #000000; --hover: rgba(0, 0, 0, 0.08); --accent: #0000C8; --accent-ink: #FFFFFF; --link: #0000C8; --tint: rgba(0, 0, 200, 0.12); --good: #006100; --danger: #B00000; --danger-ink: #FFFFFF; --ping: #FFF1A8; --focus: #000000; --focus-halo: #FFD400; --badge: #FFD400; --badge-ink: #000000; --send: #0000C8; --send-ink: #FFFFFF; --new-ink: #000000; --rail-bg: #000000; --side-bg: #000000; --side-ink: #FFFFFF; --side-muted: #E6E6E6; --side-strong: #FFFFFF; --side-hover: rgba(255, 255, 255, 0.18); --side-active: rgba(255, 255, 255, 0.3); --side-accent: #FFD400; --side-accent-ink: #000000; --me-bar-bg: #000000; --brand-tile: #FFD400; --wordmark: #FFFFFF; --online: #008A2E; --idle: #B35900; --dnd: #C00000; --offline: #595959; --avatar-sat: 55%; --r-btn: 6px; --r-card: 10px; --shadow: 0 0 0 2px #000000; } [data-theme="contrast"][data-scheme="dark"] { --bg: #000000; --surface: #000000; --raised: #141414; --ink: #FFFFFF; --muted: #E0E0E0; --line: #FFFFFF; --hover: rgba(255, 255, 255, 0.14); --accent: #FFD400; --accent-ink: #000000; --link: #FFE45C; --tint: rgba(255, 212, 0, 0.2); --good: #5CFF7A; --danger: #FF7373; --danger-ink: #000000; --ping: rgba(255, 212, 0, 0.22); --focus: #FFD400; --focus-halo: #000000; --badge: #FFD400; --badge-ink: #000000; --send: #FFD400; --send-ink: #000000; --new-ink: #FFD400; --online: #5CFF7A; --idle: #FFD400; --dnd: #FF7373; --offline: #BDBDBD; --shadow: 0 0 0 2px #FFFFFF; } /* Colour-blind friendly: the Okabe-Ito palette, which stays distinct for every kind of colour blindness */ [data-theme="colorblind"] { --bg: #F3F5F8; --surface: #FFFFFF; --raised: #F7F9FB; --ink: #0F1B2A; --muted: #4A5868; --line: #D3DBE4; --hover: rgba(15, 27, 42, 0.05); --accent: #0072B2; --accent-ink: #FFFFFF; --link: #005A8C; --tint: rgba(0, 114, 178, 0.12); --good: #007A5A; --danger: #B54300; --danger-ink: #FFFFFF; --ping: rgba(230, 159, 0, 0.16); --focus: #E69F00; --badge: #E69F00; --badge-ink: #1A1200; --send: #E69F00; --send-ink: #1A1200; --new-ink: #8A5F00; --rail-bg: #0B1E33; --side-bg: #12304F; --side-ink: #EAF2FA; --side-muted: #A9C0D6; --side-strong: #FFFFFF; --side-accent: #E69F00; --side-accent-ink: #0B1E33; --brand-tile: #0072B2; --wordmark: #FFFFFF; --online: #009E73; --idle: #E69F00; --dnd: #D55E00; --offline: #8A96A3; } [data-theme="colorblind"][data-scheme="dark"] { --bg: #0D1520; --surface: #142030; --raised: #1B2A3D; --ink: #EAF1F8; --muted: #A3B2C2; --line: #2A3B50; --hover: rgba(234, 241, 248, 0.06); --accent: #56B4E9; --accent-ink: #06121E; --link: #7CC7F0; --tint: rgba(86, 180, 233, 0.16); --good: #3CC79A; --danger: #FF8A4C; --danger-ink: #1A0A00; --new-ink: #E69F00; --rail-bg: #07101B; --side-bg: #0D1A2A; } /* Monochrome: shades of grey only. Status dots keep their shapes, so they still say who's around. */ [data-theme="mono"] { --bg: #F2F2F2; --surface: #FFFFFF; --raised: #F7F7F7; --ink: #111111; --muted: #555555; --line: #D6D6D6; --hover: rgba(0, 0, 0, 0.05); --accent: #1F1F1F; --accent-ink: #FFFFFF; --link: #111111; --tint: rgba(0, 0, 0, 0.08); --good: #2B2B2B; --danger: #3A3A3A; --danger-ink: #FFFFFF; --ping: rgba(0, 0, 0, 0.06); --focus: #000000; --focus-halo: #FFFFFF; --badge: #FFFFFF; --badge-ink: #111111; --send: #1F1F1F; --send-ink: #FFFFFF; --new-ink: #111111; --rail-bg: #161616; --side-bg: #222222; --side-ink: #EEEEEE; --side-muted: #AAAAAA; --side-strong: #FFFFFF; --side-accent: #FFFFFF; --side-accent-ink: #111111; --brand-tile: #FFFFFF; --wordmark: #FFFFFF; --online: #7A7A7A; --idle: #7A7A7A; --dnd: #7A7A7A; --offline: #7A7A7A; --avatar-sat: 0%; } [data-theme="mono"][data-scheme="dark"] { --bg: #111111; --surface: #1A1A1A; --raised: #222222; --ink: #EEEEEE; --muted: #A8A8A8; --line: #333333; --hover: rgba(255, 255, 255, 0.06); --accent: #EEEEEE; --accent-ink: #111111; --link: #FFFFFF; --danger: #CFCFCF; --danger-ink: #111111; --send: #EEEEEE; --send-ink: #111111; --new-ink: #EEEEEE; --rail-bg: #0A0A0A; --side-bg: #151515; } /* Material: rounder shapes; its colours are worked out in app.js from the accent you pick */ [data-theme="material"] { --r-btn: 20px; --r-card: 28px; --avatar-sat: 45%; } /* Fonts */ [data-font="system"] { --display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-font="atkinson"] { --display: "Atkinson Hyperlegible", system-ui, sans-serif; --body: "Atkinson Hyperlegible", system-ui, sans-serif; } [data-font="dyslexic"] { --display: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif; --body: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif; } [data-font="serif"] { --display: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; --body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; } [data-font="mono"] { --display: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; overscroll-behavior: none; } html { font-size: calc(100% * var(--scale, 1)); } /* text size setting */ body { background: var(--side-bg); color: var(--ink); font: 0.9375rem/1.45 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; opacity: 0.5; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo); } h1, h2, h3 { font-family: var(--display); line-height: 1.2; } p { margin: 0; } a { color: var(--link); } hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; } .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .muted { color: var(--muted); } .small { font-size: 0.82rem; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .app { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; /* exactly the visible area, following the browser's toolbars */ display: flex; flex-direction: column; overflow: hidden; } /* ---------- brand ---------- */ .logo { display: block; width: 32px; height: 32px; flex: none; user-select: none; -webkit-user-drag: none; } .wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: var(--wordmark); } .boot { flex: 1; display: grid; place-items: center; background: var(--side-bg); } .boot .logo { width: 88px; height: 88px; animation: breathe 1.6s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(0.9); opacity: 0.7; } } /* ---------- buttons and fields ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--raised); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; } .btn:hover:not(:disabled) { filter: brightness(0.97); } .btn .icon { width: 16px; height: 16px; } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn.danger { background: var(--danger); color: var(--danger-ink); border-color: transparent; } .btn.ghost { background: transparent; border-color: transparent; } .btn.small { min-height: 32px; padding: 0 12px; font-size: 0.85rem; } .btn.big { min-height: 48px; font-size: 1rem; } .danger-text { color: var(--danger); } label.btn { cursor: pointer; } .icon-btn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: inherit; text-decoration: none; } .icon-btn:hover { background: var(--hover); } .icon-btn.round { width: 38px; height: 38px; border-radius: 50%; background: var(--raised); color: var(--muted); } .icon-btn.round:hover { color: var(--ink); } .icon-btn.round.danger:hover, .icon-btn.danger:hover { color: var(--danger); } .icon-btn.round.good:hover { color: var(--good); } .link-btn { border: 0; background: none; padding: 0; color: var(--link); font-weight: 600; text-align: left; align-self: flex-start; } .stack { display: flex; flex-direction: column; gap: 18px; } .stack.tight { gap: 8px; } .field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.85rem; } .field small { font-weight: 400; color: var(--muted); font-size: 0.78rem; } .field-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; } input:not([type="checkbox"]):not([type="file"]), textarea { font-size: max(16px, 1rem); } /* 16px+ stops phones zooming in */ .field input, .inline-form input, .prefixed input, .field textarea, .browse > input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); font-weight: 400; } .field textarea { resize: vertical; min-height: 64px; line-height: 1.4; } .field input:focus, .inline-form input:focus, .prefixed input:focus, .field textarea:focus, .browse > input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .inline-form { display: flex; gap: 8px; } .inline-form input { flex: 1; min-width: 0; } .prefixed { position: relative; display: flex; } .prefixed .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); } .prefixed input { padding-left: 34px; } .form-error { color: var(--danger); min-height: 1.3em; font-size: 0.88rem; } .form-result { min-height: 1.3em; font-size: 0.9rem; color: var(--muted); } .form-result.good { color: var(--good); } .form-result.bad { color: var(--danger); } .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: var(--badge-ink); font: 700 0.72rem/1 var(--body); } /* ---------- avatars, server icons and status ---------- */ .avatar { --h: 170; --c: initial; --fg: initial; --fxc: var(--c, hsl(var(--h) 60% 55%)); /* effect colour follows the avatar colour */ position: relative; flex: none; isolation: isolate; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--fg, #FFFFFF); font: 700 1rem/1 var(--display); user-select: none; } /* the background sits on its own layer so effects like flames can go behind it */ .avatar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c, hsl(var(--h) var(--avatar-sat) var(--auto-l, 34%))); } .avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .avatar.xs { width: 18px; height: 18px; font-size: 0.55rem; } .avatar.sm { width: 32px; height: 32px; font-size: 0.85rem; } .avatar.lg { width: 56px; height: 56px; font-size: 1.35rem; } .avatar.xl { width: 80px; height: 80px; font-size: 2rem; } .avatar.group { border-radius: 32%; } .avatar.channel { border-radius: 32%; color: var(--muted); } .avatar.channel::before { background: var(--raised); } .avatar.group .icon, .avatar.channel .icon { width: 52%; height: 52%; } .avatar.xs .dot { display: none; } .avatar .dot { position: absolute; right: -3px; bottom: -3px; z-index: 3; width: 42%; height: 42%; min-width: 14px; min-height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--ring, var(--surface)); } .dot::before, .dot-inline::before { content: ""; width: 62%; height: 62%; border-radius: 50%; background: var(--offline); } .dot-inline { position: relative; display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; vertical-align: -2px; --ring: var(--surface); } .dot-inline::before { width: 100%; height: 100%; } .dot.online::before, .dot-inline.online::before { background: var(--online); } .dot.away::before, .dot-inline.away::before { background: var(--idle); -webkit-mask: radial-gradient(circle at 22% 22%, transparent 34%, #000 36%); mask: radial-gradient(circle at 22% 22%, transparent 34%, #000 36%); } .dot.dnd::before, .dot-inline.dnd::before { background: var(--dnd); -webkit-mask: linear-gradient(to bottom, #000 40%, transparent 40%, transparent 60%, #000 60%), linear-gradient(to right, #000 22%, transparent 22%, transparent 78%, #000 78%); mask: linear-gradient(to bottom, #000 40%, transparent 40%, transparent 60%, #000 60%), linear-gradient(to right, #000 22%, transparent 22%, transparent 78%, #000 78%); } .dot.mobile::before, .dot-inline.mobile::before { width: 44%; height: 72%; border-radius: 2px; background: var(--online); } .dot.offline::before, .dot.invisible::before, .dot-inline.offline::before, .dot-inline.invisible::before { background: transparent; border: 2.5px solid var(--offline); } .dot-inline.auto::before { background: conic-gradient(var(--online) 0 50%, var(--idle) 50% 100%); } .server-icon { --h: 170; --c: initial; --fg: initial; --fxc: var(--c, hsl(var(--h) 55% 55%)); position: relative; flex: none; isolation: isolate; width: 48px; height: 48px; border-radius: 30%; font: 700 0.95rem/1 var(--display); letter-spacing: -0.01em; user-select: none; } /* the picture or initials are clipped to the rounded shape; effects live outside it */ .server-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: inherit; background: var(--c, hsl(var(--h) var(--avatar-sat) var(--auto-l, 34%))); color: var(--fg, #FFFFFF); } .server-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .server-icon.lg { width: 64px; height: 64px; font-size: 1.25rem; } .server-icon.xl { width: 80px; height: 80px; font-size: 1.6rem; } /* ---------- log in / sign up ---------- */ .auth { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: calc(40px + env(safe-area-inset-top)) max(24px, 6vw) calc(40px + env(safe-area-inset-bottom)); background: var(--side-bg); color: var(--side-ink); } .auth-brand .logo { width: 104px; height: 104px; margin-left: -10px; } .auth-brand .wordmark { margin: 18px 0 10px; font-size: clamp(3.4rem, 10vw, 7rem); line-height: 0.9; } .tagline { font-size: 1.15rem; color: var(--side-muted); max-width: 28ch; } .auth-card { justify-self: center; width: min(100%, 420px); padding: 22px; border-radius: var(--r-card); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; border-radius: 12px; background: var(--raised); } .auth-tabs button { border: 0; padding: 10px 6px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; white-space: nowrap; } .auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); } .closed-note { padding: 12px; border-radius: 10px; background: var(--raised); color: var(--muted); } /* ---------- app layout ---------- */ .shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 72px 248px minmax(0, 1fr); } /* server rail */ .rail { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: calc(12px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)) env(safe-area-inset-left); background: var(--rail-bg); } .rail-list { display: contents; } .rail-btn { position: relative; flex: none; display: grid; place-items: center; width: 72px; height: 52px; padding: 0; border: 0; background: none; color: var(--side-ink); text-decoration: none; } .rail-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--side-bg); transition: border-radius 0.15s, background 0.15s; } .rail-icon .server-icon { width: 48px; height: 48px; } .rail-list .rail-icon { background: none; } /* server icons keep the shape their admins chose */ .rail-icon .logo { width: 36px; height: 36px; } .rail-icon .brand-white { display: none; } .rail-btn.home.active .brand-color, .rail-btn.home:hover .brand-color { display: none; } .rail-btn.home.active .brand-white, .rail-btn.home:hover .brand-white { display: block; } .rail-btn:hover .rail-icon, .rail-btn.active .rail-icon { border-radius: 16px; } .rail-btn.home.active .rail-icon, .rail-btn.home:hover .rail-icon { background: var(--brand-tile); } .rail-btn.add .rail-icon { color: var(--side-accent); background: var(--side-hover); } .rail-btn.add:hover .rail-icon { background: var(--side-accent); color: var(--side-accent-ink); } .rail-pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--side-strong); transform: translateY(-50%); transition: height 0.15s; } .rail-btn.unread .rail-pill { height: 8px; } .rail-btn:hover .rail-pill { height: 20px; } .rail-btn.active .rail-pill { height: 40px; } .rail-btn .badge { position: absolute; right: 10px; bottom: 0; box-shadow: 0 0 0 3px var(--rail-bg); } .rail-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--side-hover); margin: 2px 0; flex: none; } /* sidebar */ .sidebar { --ring: var(--side-bg); min-height: 0; display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-ink); } .side-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } #homePanel .side-nav { padding-top: calc(8px + env(safe-area-inset-top)); } /* no app name at the top: Friends comes first (clear of a phone's notch) */ .sidebar .icon-btn:hover { background: var(--side-hover); } .server-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: calc(58px + env(safe-area-inset-top)); padding: calc(8px + env(safe-area-inset-top)) 14px 8px 16px; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); background: transparent; color: var(--side-ink); text-align: left; font: 700 1.05rem var(--display); } .server-head:hover { background: var(--side-hover); } .server-head-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-nav { padding: 4px 8px 0; } .nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--side-ink); text-decoration: none; font: 600 1rem var(--display); } .nav-item .icon { width: 22px; height: 22px; } .nav-item:hover { background: var(--side-hover); } .nav-item.active { background: var(--side-active); } .nav-item .badge { margin-left: auto; } .side-section { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 2px 18px; } .side-section h2 { margin: 0; font: 600 0.8rem var(--body); color: var(--side-muted); } .side-section .icon-btn { width: 32px; height: 32px; color: var(--side-muted); } .side-section .icon-btn:hover { color: var(--side-ink); } .conv-list { list-style: none; margin: 0; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .conv-list li { position: relative; } .conv { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 10px; border-radius: 10px; color: var(--side-muted); text-decoration: none; } .conv:hover { background: var(--side-hover); } .conv.active { background: var(--side-active); } .conv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .conv-name, .conv-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-name { font: 600 0.97rem/1.3 var(--display); color: var(--side-ink); } .conv-preview { font-size: 0.8rem; } .conv.unread .conv-name { color: var(--side-strong); font-weight: 700; } .conv.unread .conv-preview { color: var(--side-ink); } .conv.muted { opacity: 0.6; } .conv.muted .badge { background: rgba(255, 255, 255, 0.25); color: var(--side-ink); } .conv.channel { min-height: 36px; gap: 8px; padding: 4px 10px; } .conv.channel .conv-name { flex: 1; color: var(--side-muted); font-weight: 500; } .conv.channel:hover .conv-name, .conv.channel.active .conv-name { color: var(--side-ink); } .conv.channel.unread .conv-name { color: var(--side-strong); font-weight: 700; } .channel-icon { display: inline-grid; color: var(--side-muted); } .channel-icon .icon { width: 18px; height: 18px; } .conv-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; color: var(--side-muted); opacity: 0; } .conv-close .icon { width: 16px; height: 16px; } .conv-list li:hover .conv-close, .conv-close:focus-visible { opacity: 1; } .conv-list li.has-close:hover .badge { visibility: hidden; } @media (hover: none) { .conv-close { display: none; } .conv-list li.has-close:hover .badge { visibility: visible; } } .conv-empty { padding: 10px 12px; font-size: 0.85rem; color: var(--side-muted); } .me-bar { display: flex; align-items: center; gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) 8px; background: var(--me-bar-bg); } .me-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; } .me-btn:hover { background: var(--side-hover); } .me-names { flex: 1; min-width: 0; display: flex; flex-direction: column; } .me-names strong, .me-names span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-names strong { font: 600 0.92rem/1.25 var(--display); } .me-names span { font-size: 0.75rem; color: var(--side-muted); } .me-bar .icon-btn { color: var(--side-muted); width: 36px; height: 36px; } .me-bar .icon-btn:hover { color: var(--side-ink); } #bellBtn.on { color: var(--side-accent); } /* main area */ .view { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); } .topbar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); font-size: 0.88rem; font-weight: 600; text-align: center; } .topbar.warn { background: var(--badge); color: var(--badge-ink); } .topbar.notify { background: var(--accent); color: var(--accent-ink); } .topbar.notify .btn { background: var(--accent-ink); color: var(--accent); border-color: transparent; } .topbar .icon-btn { width: 30px; height: 30px; } .topbar .icon-btn .icon { width: 16px; height: 16px; } .topbar:not([hidden]) ~ .pane .pane-head { padding-top: 8px; } .pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; } .pane-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 58px; padding: calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); } .pane-head h1 { margin: 0 8px 0 0; font-size: 1.15rem; } .pane-icon { color: var(--muted); display: inline-grid; margin-right: 4px; } .pane-head .icon-btn.on { color: var(--link); } #muteBtn.on { color: var(--muted); } .back { display: none; margin-left: -8px; } .pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px calc(12px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) 12px; } /* ---------- friends ---------- */ .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .tabs button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; } @media (hover: hover) { .tabs button:hover { background: var(--hover); color: var(--ink); } } .tabs button.active { background: var(--hover); color: var(--ink); } .tabs .tab-add { background: var(--accent); color: var(--accent-ink); } @media (hover: hover) { .tabs .tab-add:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); } } .tabs .tab-add.active { background: transparent; color: var(--link); } .list-heading { margin: 14px 12px 6px; font: 600 0.8rem var(--body); color: var(--muted); } .people { list-style: none; margin: 0; padding: 0; } .person { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); border-radius: 10px; } .person:hover { background: var(--hover); border-top-color: transparent; } .person:hover + .person { border-top-color: transparent; } .person-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; background: none; text-align: left; border-radius: 8px; } .person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .person-name { font: 600 0.97rem/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .handle { font: 400 0.85rem var(--body); color: var(--muted); } .person-sub { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-actions { display: flex; gap: 8px; } .people.compact .person { padding: 4px 2px; } .empty { padding: 56px 24px; text-align: center; color: var(--muted); } .empty p { max-width: 34ch; margin: 0 auto 16px; } .add-panel { max-width: 640px; padding: 20px 12px; } .add-panel h2 { margin: 0 0 6px; font-size: 1.25rem; } .add-panel > p { margin-bottom: 16px; } .add-friend { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .add-friend:focus-within { border-color: var(--accent); } .add-friend .at { color: var(--muted); font-weight: 600; } .add-friend input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 8px 0; } /* ---------- a conversation ---------- */ .chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; border-radius: 10px; background: transparent; text-align: left; } .chat-title:hover { background: var(--hover); } .chat-names { min-width: 0; display: flex; flex-direction: column; } .chat-name, .chat-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-name { font: 700 1.05rem/1.25 var(--display); } .chat-sub { font-size: 0.78rem; color: var(--muted); } .chat-body { flex: 1; min-height: 0; display: flex; } .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } .messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 0 env(safe-area-inset-right) 12px env(safe-area-inset-left); } .messages > :first-child { margin-top: auto; } .loading { padding: 18px; text-align: center; color: var(--muted); font-size: 0.85rem; } .chat-start { padding: 32px 18px 8px; } .chat-start h2 { margin: 12px 0 4px; font-size: 1.7rem; } .chat-start p { color: var(--muted); } .day, .new-line { display: flex; align-items: center; gap: 10px; margin: 20px 18px 4px; color: var(--muted); font-size: 0.75rem; font-weight: 600; } .day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); } .new-line { margin: 10px 18px 2px; color: var(--new-ink); } .new-line::before { content: ""; flex: 1; height: 1px; background: var(--badge); } .new-line span { padding: 1px 6px; border-radius: 4px; background: var(--badge); color: var(--badge-ink); font-size: 0.68rem; } .sys { margin: 10px 18px 0 72px; font-size: 0.85rem; color: var(--muted); } .sys time { margin-left: 8px; font-size: 0.72rem; } .msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; margin-top: 14px; padding: 3px 18px; border-left: 2px solid transparent; } .msg.grouped { margin-top: 0; padding-top: 1px; padding-bottom: 1px; } .msg:hover, .msg.selected { background: var(--hover); } .msg.pinged { background: var(--ping); border-left-color: var(--badge); } .msg.flash { animation: flash 1.6s ease-out; } @keyframes flash { 0%, 40% { background: rgba(252, 172, 1, 0.35); } 100% { background: transparent; } } .msg > .avatar-btn { grid-column: 1; grid-row: span 2; align-self: start; margin-top: 2px; padding: 0; border: 0; background: none; border-radius: 50%; } .msg-head { grid-column: 2; display: flex; align-items: baseline; gap: 6px; min-width: 0; } .msg-name { padding: 0; border: 0; background: none; font: 700 0.97rem/1.35 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-name:hover { text-decoration: underline; } .mine .msg-name { color: var(--link); } .owner-tag { display: inline-grid; color: #D99A00; } .owner-tag .icon { width: 14px; height: 14px; } .msg-time { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .msg-body { grid-column: 2; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; } .msg-body a { word-break: break-all; } .msg-body.jumbo { font-size: 2.4rem; line-height: 1.2; } .msg-body.blocked-msg { color: var(--muted); font-style: italic; } .side-time { grid-column: 1; justify-self: end; padding-top: 4px; font-size: 0.66rem; line-height: 1.3; white-space: nowrap; color: var(--muted); opacity: 0; } .msg:hover .side-time, .msg.selected .side-time { opacity: 1; } .edited { font-size: 0.72rem; color: var(--muted); } .msg.pending { opacity: 0.55; } .reply-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 2px 20px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 0.8rem; text-align: left; } .reply-line > .icon { width: 16px; height: 16px; transform: scaleX(-1); flex: none; } .reply-name { font-weight: 600; color: var(--ink); white-space: nowrap; } .reply-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-line:hover .reply-text { color: var(--ink); } /* formatting */ .inline-code { padding: 1px 5px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line); font: 0.88em var(--mono); } .code-block { margin: 4px 0; padding: 10px 12px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); overflow-x: auto; white-space: pre; } .code-block code { font: 0.86rem/1.5 var(--mono); } blockquote { margin: 2px 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); } .spoiler { border-radius: 4px; background: var(--ink); color: transparent; cursor: pointer; transition: background 0.15s; } .spoiler * { visibility: hidden; } .spoiler.shown { background: var(--hover); color: inherit; cursor: auto; } /* text spoilers in the cover the sender chose */ .spoiler:not(.shown)[class*="cover-"] { position: relative; } .spoiler:not(.shown).cover-blur { background: color-mix(in srgb, var(--ink) 7%, transparent); text-shadow: 0 0 9px var(--ink); } .spoiler:not(.shown).cover-blur * { visibility: visible; color: transparent !important; -webkit-text-fill-color: transparent; background: none !important; text-shadow: inherit; border-color: transparent; } .spoiler:not(.shown).cover-solid { background: var(--cover, #1a1a1a); } .spoiler:not(.shown).cover-pixel { background: repeating-conic-gradient(#5b5760 0 25%, #8a8490 0 50%) 0 0 / 8px 8px; } .spoiler:not(.shown).cover-void { background: radial-gradient(100% 140% at 20% 0%, rgba(142, 78, 198, 0.7), transparent 70%), #07040D; } .spoiler:not(.shown).cover-void::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-size: 23px 19px, 29px 37px, 37px 29px, 71px 43px, 61px 43px, 97px 53px; } .spoiler:not(.shown).cover-static { background: var(--noise) 0 0 / 120px 120px, #4a4a4a; animation: static 0.35s steps(1) infinite; } .spoiler.shown * { visibility: visible; } .mention { padding: 0 3px; border: 0; border-radius: 4px; background: var(--tint); color: var(--link); font-weight: 600; } .mention.me { background: rgba(252, 172, 1, 0.3); color: inherit; } .mention:hover { text-decoration: underline; } /* reactions */ .reactions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .reaction { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 0.85rem; line-height: 1; } .reaction:hover:not(:disabled) { border-color: var(--muted); } .reaction.mine { border-color: var(--link); background: var(--tint); } .reaction-emoji { font-size: 1.05rem; } .reaction-count { font-weight: 600; color: var(--muted); } .reaction.mine .reaction-count { color: var(--link); } .reaction.add { color: var(--muted); opacity: 0; } .reaction.add .icon { width: 16px; height: 16px; } .msg:hover .reaction.add, .msg.selected .reaction.add, .reaction.add:focus-visible { opacity: 1; } @media (hover: none) { .reaction.add { opacity: 1; } } /* read receipts */ .seen { display: flex; justify-content: flex-end; align-items: center; gap: 3px; padding: 2px 18px 0; color: var(--muted); font-size: 0.72rem; } .seen-text { margin-right: 3px; } .msg-actions { position: absolute; top: -16px; right: 16px; z-index: 2; display: none; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .msg-actions .icon-btn { width: 34px; height: 34px; } .msg-actions .icon { width: 17px; height: 17px; } .msg:hover .msg-actions, .msg.selected .msg-actions, .msg:focus-within .msg-actions { display: flex; } @media (hover: none) { .msg:hover:not(.selected):not(.pinged) { background: transparent; } .msg:hover:not(.selected) .msg-actions, .msg:hover:not(.selected) .side-time { display: none; opacity: 0; } } .typing { min-height: 22px; padding: 0 20px; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .composer { position: relative; padding: 0 calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); } .app.keyboard .composer { padding-bottom: 10px; } .composer-row { display: flex; align-items: flex-end; gap: 4px; padding: 5px 5px 5px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .composer-row:focus-within { border-color: var(--accent); } .composer textarea { flex: 1; min-width: 0; max-height: 180px; resize: none; padding: 8px 0; border: 0; outline: none; background: transparent; line-height: 1.4; } #emojiBtn, #attachBtn { color: var(--muted); } #emojiBtn:hover, #attachBtn:hover { color: var(--ink); } .send.waiting { opacity: 0.6; animation: breathe 1s ease-in-out infinite; } .send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--send); color: var(--send-ink); } .compose-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 0 4px 6px; font-size: 0.8rem; color: var(--muted); } .compose-bar .icon-btn { width: 26px; height: 26px; } .compose-bar .icon-btn .icon { width: 15px; height: 15px; } .send-notice { margin: 0 16px calc(14px + env(safe-area-inset-bottom)); padding: 12px 14px; border-radius: 12px; background: var(--raised); color: var(--muted); font-size: 0.9rem; text-align: center; } .mention-list { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 4px); z-index: 5; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .mention-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; } .mention-list li.active { background: var(--hover); } .mention-list .handle { margin-left: auto; } /* members panel */ .members { --ring: var(--surface); width: 240px; flex: none; overflow-y: auto; padding: 8px 8px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); border-left: 1px solid var(--line); } .members h3 { margin: 14px 8px 4px; font: 600 0.78rem var(--body); color: var(--muted); } .members ul { list-style: none; margin: 0; padding: 0; } .member { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: none; text-align: left; } .member:hover { background: var(--hover); } /* offline members: a dimmed picture and a quieter name, still readable (fading the whole row wasn't) */ .member.faded .avatar, .member.faded .role-tag { opacity: 0.5; } .member.faded .member-name { color: var(--muted); } .member-text { min-width: 0; display: flex; flex-direction: column; } .member-name { display: flex; align-items: center; gap: 4px; font: 600 0.92rem/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-sub { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .members.in-modal { width: auto; padding: 0; border: 0; background: none; } /* ---------- popovers and menus ---------- */ .popover { --ring: var(--surface); position: fixed; z-index: 60; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .popover.sheet { left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 75dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); } .sheet-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(26, 6, 19, 0.5); } .menu { display: flex; flex-direction: column; min-width: 220px; padding: 6px; } .menu-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; } .menu-item:hover { background: var(--hover); } .menu-item .icon { width: 18px; height: 18px; color: var(--muted); } .menu-item.danger, .menu-item.danger .icon { color: var(--danger); } .status-menu { width: 320px; max-width: 100%; } .status-item { align-items: flex-start; } .status-item .dot-inline { margin-top: 3px; } .status-label { flex: 1; display: flex; flex-direction: column; } .status-label small { color: var(--muted); font-size: 0.78rem; } .status-item > .icon { color: var(--link); } /* your card (2.23): compact, like Discord's */ .me-card { width: 300px; padding: 4px 0 6px; } .me-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 8px; --ring: var(--surface); } .me-who { display: flex; flex-direction: column; min-width: 0; } .me-name { font: 700 1.05rem/1.25 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me-who .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .custom-form { display: flex; align-items: center; gap: 6px; padding: 2px 12px 8px; } .custom-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); } .custom-box:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; } .custom-box > .icon { width: 17px; height: 17px; flex: none; color: var(--muted); } .custom-box input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; color: var(--ink); font-size: max(16px, 0.95rem); outline: none; } .custom-clear { width: 28px; height: 28px; flex: none; } .custom-clear .icon { width: 15px; height: 15px; } .custom-clear[hidden], .custom-form .btn[hidden] { display: none; } .me-card > .menu { border-top: 1px solid var(--line); padding-top: 4px; } .status-row .status-label strong { font-weight: 600; } .status-row > .icon:last-child { margin-left: auto; } .me-accounts { border-top: 1px solid var(--line); margin-top: 4px; padding: 6px 12px 4px; } .me-accounts .menu-label { padding: 2px 0 6px; } .me-accounts p { margin: 6px 0 0; } .account-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .account-pic { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; --ring: var(--surface); } button.account-pic { cursor: pointer; } button.account-pic:hover .avatar { filter: brightness(1.08); } button.account-pic:hover, button.account-pic:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } .account-pic.current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } .account-pic .badge { position: absolute; right: -4px; bottom: -3px; box-shadow: 0 0 0 2px var(--surface); } .account-pic.add { border: 2px dashed var(--line); color: var(--muted); } .account-pic.add:hover { color: var(--ink); border-color: var(--muted); } .account-pic.add .icon { width: 20px; height: 20px; } .emoji-picker { width: 340px; max-width: 100%; display: flex; flex-direction: column; } .emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; } .emoji-tab { width: 36px; height: 32px; border: 0; border-radius: 8px; background: none; font-size: 1.1rem; } .emoji-tab:hover { background: var(--hover); } .emoji-scroll { height: 280px; overflow-y: auto; padding: 0 6px 8px; } .emoji-scroll h3 { position: sticky; top: 0; margin: 0; padding: 8px 4px 4px; background: var(--surface); font: 600 0.75rem var(--body); color: var(--muted); } .emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); } .emoji { height: 38px; border: 0; border-radius: 8px; background: none; font-size: 1.4rem; line-height: 1; } .emoji:hover { background: var(--hover); } .emoji.big { font-size: 1.5rem; } .quick-row { display: flex; justify-content: space-between; padding: 6px; border-bottom: 1px solid var(--line); } .popover.sheet .emoji-picker, .popover.sheet .status-menu { width: 100%; } .popover.sheet .menu { min-width: 0; } /* ---------- dialogs ---------- */ .modal { width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; color: var(--ink); } .modal::backdrop { background: rgba(26, 6, 19, 0.6); } .modal-card { --ring: var(--surface); display: flex; flex-direction: column; max-height: calc(100dvh - 48px); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 6px 20px; } .modal-head h2 { margin: 0; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-body { padding: 4px 20px 20px; overflow-y: auto; } .modal-body h3 { margin: 4px 0 0; font-size: 0.95rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .modal-actions.wrap { flex-wrap: wrap; justify-content: flex-start; } .modal-actions.spread { justify-content: space-between; padding-top: 4px; } .section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .confirm-text { white-space: pre-wrap; overflow-wrap: anywhere; } .profile { display: flex; align-items: center; gap: 16px; } .profile-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .profile-name { font: 700 1.25rem var(--display); overflow-wrap: anywhere; } .profile-status { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; } .custom-status { margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--raised); font-size: 0.9rem; overflow-wrap: anywhere; } .choice { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; } .choice h3 { margin: 0; } .channel-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; } .channel-rows li { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; } .channel-rows li + li { border-top: 1px solid var(--line); } .channel-rows .channel-icon { color: var(--muted); } .channel-row-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .danger-zone { padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: 14px; } .danger-zone h3 { color: var(--danger); margin: 0; } .picker { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; } .pick { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; } .pick:hover { background: var(--hover); } .pick input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--raised); } .switch-text { display: flex; flex-direction: column; } .switch-text small { color: var(--muted); font-size: 0.78rem; } .switch-row input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--line); cursor: pointer; transition: background 0.15s; } .switch-row input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; } .switch-row input:checked { background: var(--accent); } .switch-row input:checked::before { transform: translateX(18px); } .code-row { display: flex; gap: 8px; align-items: center; } .code-row code { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; background: var(--raised); font: 600 0.95rem var(--mono); letter-spacing: 0.02em; user-select: all; overflow-wrap: anywhere; } /* ---------- server roles ---------- */ .role-tag { display: inline-grid; flex: none; } .role-tag .icon { width: 14px; height: 14px; } .role-tag.owner { color: #D99A00; } .role-tag.admin { color: var(--link); } .role-tag.moderator { color: var(--good); } .role-line { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; } /* ---------- attachments ---------- */ .attachments { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; min-width: 0; } .image-grid { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; max-width: 100%; } .image-grid:not(.n1) { width: min(100%, 360px); grid-template-columns: 1fr 1fr; } .image-grid.n3 .image-tile:first-child { grid-row: span 2; } .image-tile { position: relative; display: block; padding: 0; border: 0; background: var(--raised); cursor: zoom-in; } .image-grid:not(.n1) .image-tile { aspect-ratio: 1; } .image-grid.n3 .image-tile:first-child { aspect-ratio: auto; } .image-grid:not(.n1) img { display: block; width: 100%; height: 100%; object-fit: cover; } .image-grid.n1 img { display: block; max-width: 100%; height: auto; } .more-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #FFFFFF; font: 700 1.6rem var(--display); } .file-card { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; } .file-card:hover { border-color: var(--muted); } .file-card > .icon:first-child { width: 28px; height: 28px; color: var(--link); } .file-card > .icon:last-child { color: var(--muted); } .file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-size { font-size: 0.78rem; color: var(--muted); } .media-video { display: block; max-width: min(100%, 480px); max-height: 360px; border-radius: 12px; background: #000000; } .media-audio { display: flex; flex-direction: column; gap: 6px; width: min(100%, 360px); padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .media-audio audio { width: 100%; } .attach-tray { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 8px; padding: 0; list-style: none; scrollbar-width: thin; } .tray-item { flex: none; display: flex; align-items: center; gap: 8px; width: 220px; padding: 6px 2px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .tray-item.error { border-color: var(--danger); } .tray-item img, .tray-icon { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--raised); color: var(--muted); } .tray-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .tray-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tray-size { font-size: 0.75rem; color: var(--muted); } .tray-item.error .tray-size { color: var(--danger); } .tray-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .tray-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.2s; } .tray-item .icon-btn { width: 30px; height: 30px; } .tray-item .icon-btn .icon { width: 16px; height: 16px; } .drop-zone { position: absolute; inset: 10px; z-index: 5; display: grid; place-items: center; pointer-events: none; border: 3px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); } .drop-zone p { font: 700 1.2rem var(--display); color: var(--link); } .viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 4, 11, 0.94); color: #FFFFFF; } .viewer::backdrop { background: transparent; } .viewer[open] { display: flex; flex-direction: column; } .viewer-bar { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px 18px; } .viewer-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .viewer .icon-btn { color: #FFFFFF; } .viewer .icon-btn:hover { background: rgba(255, 255, 255, 0.14); } .viewer-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); } .viewer-stage img { max-width: 100%; max-height: calc(100dvh - 90px); object-fit: contain; border-radius: 6px; } .viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.45); } .viewer-nav.prev { left: 12px; } .viewer-nav.next { right: 12px; } /* ---------- wallpapers ---------- */ .wallpaper { --dim: 0.55; --blur: 0px; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .wallpaper-img { position: absolute; inset: calc(var(--blur) * -2); background: center / cover no-repeat; filter: blur(var(--blur)); } .wallpaper-dim { position: absolute; inset: 0; background: var(--bg); opacity: var(--dim); } .chat-main > .update-bar, .chat-main > .messages, .chat-main > .live-drafts, .chat-main > .typing, .chat-main > .composer, .chat-main > .send-notice, .chat-main > .present-bar { position: relative; z-index: 1; } .has-wallpaper .msg:hover, .has-wallpaper .msg.selected { background: color-mix(in srgb, var(--surface) 55%, transparent); } .has-wallpaper .day span, .has-wallpaper .sys > span, .has-wallpaper .typing:not(:empty) { background: color-mix(in srgb, var(--bg) 82%, transparent); border-radius: 999px; } .has-wallpaper .day span, .has-wallpaper .sys > span { padding: 1px 8px; } .has-wallpaper .typing:not(:empty) { display: table; margin-left: 12px; padding: 1px 10px; } .wp-preview { position: relative; height: 250px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .wp-sample { position: relative; z-index: 1; padding-top: 28px; pointer-events: none; } .wp-sample .msg { margin-top: 12px; } .wp-empty { position: absolute; left: 16px; top: 8px; z-index: 1; font-size: 0.8rem; color: var(--muted); } .wp-controls { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .wp-controls > .btn { align-self: flex-start; } .range-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-weight: 600; font-size: 0.88rem; } .range-row input { width: 100%; accent-color: var(--accent); } .range-row output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; } .wp-row { display: flex; gap: 14px; align-items: flex-start; } .wp-thumb { position: relative; flex: none; width: 120px; height: 80px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); } .wp-thumb.small { width: 72px; height: 48px; border-radius: 8px; } .wp-list, .sound-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; } .wp-list li + li, .sound-list li + li { border-top: 1px solid var(--line); } .wp-list-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; } .wp-list-row > .stack { flex: 1; min-width: 0; } .sound-row, .override-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; } .sound-name, .override-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .override-row .muted { flex: none; } select { flex: 1; min-width: 0; padding: 10px 12px; font-size: max(16px, 1rem); border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); } select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .settings-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: -4px -4px 0; border-bottom: 1px solid var(--line); } /* wraps, so no tab is ever hidden */ .settings-tabs button { flex: none; padding: 8px 8px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font-weight: 600; font-size: 0.93rem; } .settings-tabs button:hover { color: var(--ink); } .settings-tabs button.active { color: var(--ink); border-bottom-color: var(--accent); } /* ---------- overlay effects on avatars and server icons ---------- Pure CSS. In busy lists they hold still until you point at them (so phones don't run dozens of animations); they play in profiles, settings and previews; and they never move for people who asked their device to reduce motion. */ @property --fx-angle { syntax: ''; inherits: false; initial-value: 0deg; } .fx { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; } .fx::before, .fx::after { content: ""; position: absolute; pointer-events: none; } .avatar.xs .fx { display: none; } /* ring: a solid ring with a gap */ .fx-ring > .fx { inset: -0.3em; border: 0.14em solid var(--fx1, var(--fxc)); } /* glow: a soft pulsing halo */ .fx-glow > .fx { --g: var(--fx1, var(--fxc)); box-shadow: 0 0 0 0.1em var(--g), 0 0 0.6em 0.12em var(--g); animation: fx-pulse 2.4s ease-in-out infinite; } @keyframes fx-pulse { 50% { box-shadow: 0 0 0 0.14em var(--g), 0 0 1em 0.3em var(--g); } } /* rainbow: a turning rainbow ring */ .fx-rainbow > .fx, .fx-duo > .fx { inset: -0.3em; padding: 0.14em; background: conic-gradient(from var(--fx-angle), #ff3b3b, #ffb13b, #f7e53b, #4cd964, #3bb0ff, #8b5cf6, #ff3bd4, #ff3b3b); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: fx-turn 4s linear infinite; } /* two-tone: the same turning ring in two colours */ .fx-duo > .fx { background: conic-gradient(from var(--fx-angle), var(--fx1, #EC0F6E), var(--fx2, #3BB0FF), var(--fx1, #EC0F6E)); animation-duration: 3s; } @keyframes fx-turn { to { --fx-angle: 360deg; } } /* neon: a flickering pink and blue tube */ .fx-neon > .fx { inset: -0.22em; border: 0.08em solid color-mix(in srgb, var(--fx1, #ff2fa0) 12%, #FFFFFF); box-shadow: 0 0 0.2em 0.06em var(--fx1, #ff2fa0), 0 0 0.55em 0.15em var(--fx1, #ff2fa0), inset 0 0 0.3em 0.05em var(--fx2, #3be3ff); animation: fx-flicker 3.2s linear infinite; } @keyframes fx-flicker { 0%, 17%, 23%, 52%, 58%, 100% { opacity: 1; } 19%, 21%, 55% { opacity: 0.35; } } /* sparkles: two twinkling stars */ .fx-sparkles > .fx::before, .fx-sparkles > .fx::after { line-height: 1; text-shadow: 0 0 0.35em currentColor; } .fx-sparkles > .fx::before { content: "\2726"; top: -0.4em; right: -0.35em; font-size: 0.85em; color: var(--fx1, #FCAC01); animation: fx-twinkle 1.8s ease-in-out -0.5s infinite; } .fx-sparkles > .fx::after { content: "\2726"; bottom: -0.05em; left: -0.45em; font-size: 0.6em; color: var(--fx2, #FF5CA8); animation: fx-twinkle 1.8s ease-in-out -1.4s infinite; } @keyframes fx-twinkle { 0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.55; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } } /* flames: fire flickering up from behind (like the Xefer fox) */ .fx-flames > .fx { z-index: -2; inset: -0.42em -0.2em -0.08em; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse 34% 55% at 26% 62%, var(--fx2, #FCAC01) 0 38%, transparent 72%), radial-gradient(ellipse 34% 60% at 74% 60%, var(--fx-mid, #FF7A1F) 0 36%, transparent 72%), radial-gradient(ellipse 58% 78% at 50% 44%, var(--fx1, #EC0F6E) 0 34%, transparent 70%); filter: blur(0.06em); transform-origin: 50% 100%; animation: fx-burn 0.8s ease-in-out infinite alternate; } .fx-flames > .fx::before { inset: -22% 24% 46%; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 85%, var(--fx2, #FCAC01), transparent 70%); animation: fx-rise 1.2s ease-in-out -0.4s infinite alternate; } @keyframes fx-burn { from { transform: scale(1, 1); } to { transform: scale(1.04, 1.1); } } @keyframes fx-rise { from { transform: translateY(0) scaleY(0.85); opacity: 0.8; } to { transform: translateY(-0.12em) scaleY(1.12); opacity: 1; } } /* hearts: little hearts floating up */ .fx-hearts > .fx::before, .fx-hearts > .fx::after { content: "\2665"; line-height: 1; text-shadow: 0 0 0.15em rgba(255, 255, 255, 0.7); animation: fx-float 2.6s ease-in infinite; } .fx-hearts > .fx::before { right: -0.4em; bottom: 0.2em; font-size: 0.85em; color: var(--fx1, #EC0F6E); animation-delay: -1s; } .fx-hearts > .fx::after { left: -0.38em; bottom: 0.35em; font-size: 0.62em; color: var(--fx2, #FF6FA8); animation-delay: -2s; } @keyframes fx-float { 0% { transform: translateY(0.4em) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-1.8em) scale(1.1); opacity: 0; } } /* snow: flakes drifting down across the picture */ .fx-snow > .fx { overflow: hidden; } .fx-snow > .fx::before { inset: -100% 0 0; background-image: radial-gradient(circle, var(--fx1, #FFFFFF) 0 1.3px, transparent 1.8px), radial-gradient(circle, color-mix(in srgb, var(--fx1, #FFFFFF) 85%, transparent) 0 0.9px, transparent 1.4px); background-size: calc(100% / 3) calc(100% / 6), 25% 12.5%; /* tiles divide the distance travelled, so the loop is seamless */ background-position: 0 0, 12% 6%; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45)); animation: fx-fall 3.2s linear infinite; } @keyframes fx-fall { to { transform: translateY(50%); } } /* orbit: two little moons going round */ .fx-orbit > .fx { inset: -0.32em; animation: fx-spin 3.4s linear infinite; } .fx-orbit > .fx::before { width: 0.28em; height: 0.28em; top: -0.04em; left: calc(50% - 0.14em); border-radius: 50%; background: var(--fx1, #FCAC01); box-shadow: 0 0 0.3em var(--fx1, #FCAC01); } .fx-orbit > .fx::after { width: 0.18em; height: 0.18em; bottom: 0.02em; left: calc(50% - 0.09em); border-radius: 50%; background: var(--fx2, var(--fxc)); box-shadow: 0 0 0.25em var(--fx2, var(--fxc)); } @keyframes fx-spin { to { transform: rotate(360deg); } } /* ----- 2.19: more effects (each takes up to two colours: --fx1 and --fx2) ----- */ /* flames' middle colour is a blend when you choose your own */ .fx-custom.fx-flames > .fx { --fx-mid: color-mix(in srgb, var(--fx1, #EC0F6E) 40%, var(--fx2, #FCAC01)); } /* pulse: rings rippling outwards */ .fx-pulse > .fx::before, .fx-pulse > .fx::after { inset: 0; border-radius: inherit; border: 0.1em solid var(--fx1, var(--fxc)); animation: fx-ripple 2.4s ease-out infinite; } .fx-pulse > .fx::after { animation-delay: -1.2s; } @keyframes fx-ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } } /* electric: a crackling dashed ring */ .fx-electric > .fx { inset: -0.26em; border: 0.1em dashed var(--fx1, #7DF9FF); filter: drop-shadow(0 0 0.12em var(--fx1, #7DF9FF)) drop-shadow(0 0 0.25em var(--fx1, #7DF9FF)); animation: fx-spin 1.6s linear infinite, fx-flicker 1.3s linear infinite; } /* aurora: a soft two-colour glow turning behind the picture */ .fx-aurora > .fx { z-index: -2; inset: -0.34em; border-radius: 50%; background: conic-gradient(from var(--fx-angle), var(--fx1, #3BE3A0), var(--fx2, #8B5CF6), var(--fx1, #3BE3A0)); filter: blur(0.22em); animation: fx-turn 6s linear infinite; } /* fireflies: glowing dots drifting about */ .fx-fireflies > .fx::before, .fx-fireflies > .fx::after { width: 0.16em; height: 0.16em; border-radius: 50%; animation: fx-drift 5s ease-in-out infinite, fx-glowdot 1.7s ease-in-out infinite alternate; } .fx-fireflies > .fx::before { top: -0.2em; left: 0; background: var(--fx1, #E8FF7A); box-shadow: 0 0 0.3em 0.06em var(--fx1, #E8FF7A), 2.1em 1.5em 0 -0.02em var(--fx2, #FFD66B), 2.1em 1.5em 0.3em 0.02em var(--fx2, #FFD66B); } .fx-fireflies > .fx::after { bottom: 0; left: -0.25em; background: var(--fx2, #FFD66B); box-shadow: 0 0 0.3em 0.06em var(--fx2, #FFD66B), 2.2em -2em 0 -0.03em var(--fx1, #E8FF7A), 2.2em -2em 0.28em 0.01em var(--fx1, #E8FF7A); animation-delay: -2.5s, -0.8s; } @keyframes fx-drift { 25% { transform: translate(0.3em, -0.2em); } 50% { transform: translate(-0.1em, 0.3em); } 75% { transform: translate(-0.3em, -0.15em); } } @keyframes fx-glowdot { from { opacity: 0.45; } to { opacity: 1; } } /* music: notes floating up */ .fx-notes > .fx::before, .fx-notes > .fx::after { line-height: 1; font-weight: 700; text-shadow: 0 0 0.15em rgba(255, 255, 255, 0.7); animation: fx-float 2.8s ease-in infinite; } .fx-notes > .fx::before { content: "\266A"; right: -0.42em; bottom: 0.15em; font-size: 0.85em; color: var(--fx1, #8B5CF6); animation-delay: -0.6s; } .fx-notes > .fx::after { content: "\266B"; left: -0.45em; bottom: 0.3em; font-size: 0.7em; color: var(--fx2, #3BB0FF); animation-delay: -2s; } /* bubbles: bubbles rising past */ .fx-bubbles > .fx::before, .fx-bubbles > .fx::after { width: 0.4em; height: 0.4em; border-radius: 50%; border: 0.05em solid var(--fx1, #7FDBFF); background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.85) 0 14%, transparent 32%), color-mix(in srgb, var(--fx1, #7FDBFF) 22%, transparent); animation: fx-bubble 3s ease-in infinite; } .fx-bubbles > .fx::before { right: -0.3em; bottom: 0; } .fx-bubbles > .fx::after { left: -0.24em; bottom: 0.25em; width: 0.28em; height: 0.28em; animation-delay: -1.5s; } @keyframes fx-bubble { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(0.15em, -2.1em) scale(1); opacity: 0; } } /* petals: petals tumbling down */ .fx-petals > .fx::before, .fx-petals > .fx::after { top: -0.3em; width: 0.38em; height: 0.28em; border-radius: 0.3em 0; animation: fx-petal 3.4s linear infinite; } .fx-petals > .fx::before { left: 8%; background: var(--fx1, #FFB7D5); } .fx-petals > .fx::after { left: 66%; width: 0.3em; height: 0.22em; background: var(--fx2, #FF6FA8); animation-delay: -1.7s; } @keyframes fx-petal { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(0.6em, 2.9em) rotate(320deg); opacity: 0; } } /* confetti: bits of paper spinning down */ .fx-confetti > .fx::before, .fx-confetti > .fx::after { top: -0.3em; width: 0.2em; height: 0.11em; animation: fx-confetti 2.3s linear infinite; } .fx-confetti > .fx::before { left: 14%; background: var(--fx1, #3BB0FF); box-shadow: 0.9em 0.5em 0 var(--fx2, #FCAC01), 0.4em 1.1em 0 var(--fx1, #3BB0FF); } .fx-confetti > .fx::after { left: 70%; background: var(--fx2, #FCAC01); box-shadow: -0.7em 0.7em 0 var(--fx1, #3BB0FF), -0.2em 1.3em 0 var(--fx2, #FCAC01); animation-delay: -1.15s; } @keyframes fx-confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(2.4em) rotate(540deg); opacity: 0; } } /* halo: a glowing ring floating above */ .fx-halo > .fx::before { left: 18%; right: 18%; top: -0.55em; height: 0.34em; border-radius: 50%; border: 0.09em solid var(--fx1, #FCD34D); box-shadow: 0 0 0.3em var(--fx1, #FCD34D), inset 0 0 0.2em var(--fx1, #FCD34D); animation: fx-hover 2.6s ease-in-out infinite; } @keyframes fx-hover { 50% { transform: translateY(-0.12em); } } /* crown: a little crown, worn at an angle */ .fx-crown > .fx::before { top: -0.58em; left: -0.12em; width: 0.95em; height: 0.6em; background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.18) 70%), var(--fx1, #FCAC01); clip-path: polygon(0 100%, 4% 22%, 28% 58%, 50% 0, 72% 58%, 96% 22%, 100% 100%); transform: rotate(-16deg); transform-origin: 50% 100%; animation: fx-tilt 2.4s ease-in-out infinite; } @keyframes fx-tilt { 50% { transform: rotate(-10deg) translateY(-0.06em); } } /* ----- your own moving sprites ----- */ .fx-sprites { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .fx-sp { --delay: calc(var(--dur) * var(--i) / var(--n) * -1); position: absolute; inset: 0; animation: var(--anim) var(--dur) var(--ease, linear) var(--delay) infinite; } .fx-sp > img { position: absolute; width: var(--sz); height: var(--sz); object-fit: contain; left: calc(50% - var(--sz) / 2); top: calc(50% - var(--sz) / 2); } /* orbit: round and round, staying upright */ .fx-sprites.m-orbit .fx-sp { --anim: fx-spin; transform: rotate(calc(var(--i) / var(--n) * 360deg)); } .fx-sprites.m-orbit .fx-sp > img { top: calc(var(--sz) / -2 - 4%); animation: fx-spin var(--dur) linear var(--delay) infinite reverse; } /* float up and fade, spread across */ .fx-sprites.m-float .fx-sp { --anim: fx-sp-float; --ease: ease-in; } .fx-sprites.m-fall .fx-sp { --anim: fx-sp-fall; } .fx-sprites.m-float .fx-sp > img, .fx-sprites.m-fall .fx-sp > img, .fx-sprites.m-bounce .fx-sp > img { left: calc((var(--i) + 0.5) / var(--n) * 100% - var(--sz) / 2); } .fx-sprites.m-bounce .fx-sp > img { top: calc(100% - var(--sz) * 0.8); } .fx-sprites.m-bounce .fx-sp { --anim: fx-sp-bounce; --ease: ease-in-out; } .fx-sprites.m-wander .fx-sp { --anim: fx-sp-wander; --ease: ease-in-out; } @keyframes fx-sp-float { 0% { transform: translateY(55%); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-75%); opacity: 0; } } @keyframes fx-sp-fall { 0% { transform: translateY(-70%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(60%); opacity: 0; } } @keyframes fx-sp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-38%); } } @keyframes fx-sp-wander { 0%, 100% { transform: translate(-48%, -32%); } 25% { transform: translate(42%, -46%); } 50% { transform: translate(48%, 34%); } 75% { transform: translate(-40%, 46%); } } /* ----- your own overlay (a picture or GIF over, or behind, the avatar) ----- */ /* (as specific as ".avatar > img", the rule for the picture itself, so it can't squash this into the picture's box: centred on the avatar, its own size, nudged by --ox/--oy) */ :is(.avatar, .server-icon) > img.fx-overlay { position: absolute; z-index: 3; pointer-events: none; inset: auto; max-width: none; max-height: none; width: calc(var(--os) * 1%); height: auto; object-fit: contain; border-radius: 0; left: calc(50% + var(--ox) * 1%); top: calc(50% + var(--oy) * 1%); transform: translate(-50%, -50%); } /* behind: under the picture and its background, so only what sticks out around it shows */ :is(.avatar, .server-icon) > img.fx-overlay.fx-behind { z-index: -2; } /* (not ".back": that name hides the phone-only Back buttons) */ .avatar .dot { z-index: 4; } .avatar.xs :is(.fx-sprites, .fx-overlay), .server-icon.mini :is(.fx-sprites, .fx-overlay) { display: none; } .no-effects :is(.fx-sprites, .fx-overlay) { display: none; } /* when effects move */ .fx, .fx::before, .fx::after, .fx-sp, .fx-sp > img { animation-play-state: var(--fx-play, paused) !important; } .modal-card, .popover, .auth, .style-preview, .effect-tile { --fx-play: running; } :is(.msg, .member, .conv, .person, .rail-btn, .me-btn, .pick, .mention-list li, .chat-title, .chat-start):hover { --fx-play: running; } @media (prefers-reduced-motion: reduce) { .fx, .fx::before, .fx::after, .fx-sp, .fx-sp > img { animation: none !important; } } /* ---------- the style editor ---------- */ .style-editor { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: start; } /* the preview and Save stay in view while you scroll through the options */ .style-aside { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 10px; } .style-preview { --ring: var(--raised); display: grid; place-items: center; height: 168px; border-radius: 18px; background: var(--raised); overflow: hidden; touch-action: none; } .style-preview-small { --ring: var(--raised); display: flex; align-items: center; justify-content: space-around; min-height: 76px; padding: 8px 4px; border-radius: 14px; background: var(--raised); overflow: hidden; } .style-aside .modal-actions { margin: 0; } .style-aside .modal-actions .btn { flex: 1; } .style-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .style-section { display: flex; flex-direction: column; gap: 8px; } .style-heading { margin: 0; font: 700 0.95rem/1.3 var(--display); } .fx-colours { display: flex; flex-wrap: wrap; gap: 8px; } .fx-colours:empty { display: none; } .fx-colours p { margin: 0; } .fx-colour { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 12px; } .fx-colour-pick { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--line); } .fx-colour-chip { position: absolute; inset: 0; } .fx-colour-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } .fx-colour-pick:focus-within { outline: 2px solid var(--focus, var(--link)); outline-offset: 2px; } .fx-colour-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .fx-colour-text strong { font-size: 0.85rem; } .decor-box { display: flex; flex-direction: column; gap: 10px; } .decor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .decor-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; flex: none; border: 1px solid var(--line); border-radius: 10px; background: repeating-conic-gradient(#CCCCCC 0 25%, #FFFFFF 0 50%) 0 0 / 12px 12px; } .decor-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .decor-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .field-label.small { margin-bottom: -4px; font-size: 0.8rem; } .decor-box .range-row { grid-template-columns: 72px minmax(0, 1fr) 76px; } .decor-box .segmented button { padding: 7px 11px; } @media (max-width: 700px) { .style-editor { grid-template-columns: minmax(0, 1fr); gap: 16px; } .style-aside { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 10px; margin-top: -4px; padding: 4px 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); } .style-preview { grid-row: span 2; height: 112px; } .style-preview-small { min-height: 0; } .style-preview-small .avatar.lg, .style-preview-small .server-icon.lg { display: none; } } .swatches { display: flex; flex-wrap: wrap; gap: 7px; } .swatch { position: relative; width: 28px; height: 28px; padding: 0; flex: none; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--line); } .swatch.on { outline: 2px solid var(--link); outline-offset: 2px; } .swatch.auto { background: hsl(var(--h) var(--avatar-sat) var(--auto-l, 34%)); } /* no background at all: a checkerboard with a line through it */ .swatch.none { background: linear-gradient(135deg, transparent 44%, var(--danger) 44% 56%, transparent 56%), repeating-conic-gradient(#CCCCCC 0 25%, #FFFFFF 0 50%) 0 0 / 10px 10px; } .swatch.auto::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font: 700 0.72rem var(--display); } .swatch.custom { background: conic-gradient(#ff3b3b, #f7e53b, #4cd964, #3bb0ff, #8b5cf6, #ff3bd4, #ff3b3b); overflow: hidden; } .swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } .swatch.custom.on { outline: 2px solid var(--link); outline-offset: 2px; } .effect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; } .effect-tile { --ring: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 6px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 0.8rem; font-weight: 600; } .effect-tile:hover { border-color: var(--muted); } .effect-tile.on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); color: var(--ink); } /* ---------- avatar shapes ---------- */ .avatar.shape-rounded { border-radius: 30%; } .avatar.shape-square { border-radius: 10%; } .server-icon.shape-circle { border-radius: 50%; } .server-icon.shape-square { border-radius: 10%; } .shape-row { display: flex; flex-wrap: wrap; gap: 8px; } .shape-option { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-weight: 600; font-size: 0.85rem; } .shape-option:hover { border-color: var(--muted); } .shape-option.on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); color: var(--ink); } .shape-sample { width: 22px; height: 22px; background: var(--link); } .shape-sample.shape-circle { border-radius: 50%; } .shape-sample.shape-rounded { border-radius: 30%; } .shape-sample.shape-square { border-radius: 10%; } /* ---------- export ---------- */ .choice-list { display: flex; flex-direction: column; gap: 6px; } .choice-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .choice-option:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); } .choice-option input { margin-top: 3px; accent-color: var(--accent); } .choice-text { display: flex; flex-direction: column; } .choice-text small { color: var(--muted); font-size: 0.8rem; } .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; } .check-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--raised); cursor: pointer; } .check-row input { width: 18px; height: 18px; accent-color: var(--accent); } .date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .date-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); font-size: max(16px, 1rem); } .export-estimate { padding: 10px 12px; border-radius: 10px; background: var(--raised); font-weight: 600; font-size: 0.9rem; } /* ---------- no background (for see-through avatars and icons) ---------- */ .avatar.no-bg::before { background: transparent; } .avatar.no-bg { color: var(--ink); } .avatar.no-bg:not(.has-img)::before { box-shadow: inset 0 0 0 1.5px var(--line); } .sidebar .avatar.no-bg, .rail .avatar.no-bg { color: var(--side-ink); } .sidebar .avatar.no-bg:not(.has-img)::before { box-shadow: inset 0 0 0 1.5px var(--side-muted); } .server-icon.no-bg .server-face { background: transparent; color: var(--ink); } .server-icon.no-bg:not(.has-img) .server-face { box-shadow: inset 0 0 0 1.5px var(--line); } .rail .server-icon.no-bg .server-face { color: var(--side-ink); } .rail .server-icon.no-bg:not(.has-img) .server-face { box-shadow: inset 0 0 0 1.5px var(--side-muted); } /* ---------- wallpaper history ---------- */ .wp-history { display: flex; flex-wrap: wrap; gap: 10px; } .wp-history-item { position: relative; } .wp-history-pick { display: block; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; } .wp-history-item.on .wp-history-pick { border-color: var(--link); } .wp-forget { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .wp-forget .icon { width: 14px; height: 14px; } /* ---------- Settings → Appearance ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; color: var(--ink); } .theme-card:hover { border-color: var(--muted); } .theme-card.on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); } .theme-card small { color: var(--muted); font-size: 0.78rem; } .theme-dots { display: flex; gap: 4px; } .theme-dots span { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); } .segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--raised); align-self: flex-start; } .segmented button { padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; } .segmented button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); } .font-preview { padding: 12px 14px; border-radius: 12px; background: var(--raised); } .font-preview strong { font-family: var(--display); } /* ---------- theme details ---------- */ [data-theme="contrast"] .btn { border: 2px solid currentColor; } [data-theme="contrast"] .btn.primary, [data-theme="contrast"] .btn.danger { border-color: transparent; } [data-theme="contrast"] .sidebar, [data-theme="contrast"] .rail { border-right: 1px solid #FFFFFF; } [data-theme="contrast"] :is(.conv.active, .nav-item.active) { outline: 2px solid var(--side-strong); outline-offset: -2px; } [data-theme="contrast"] :is(.muted, .person-sub, .conv-preview, .msg-time, .chat-sub) { opacity: 1; } [data-theme="contrast"] a, [data-theme="colorblind"] a { text-decoration: underline; } [data-theme="mono"] :is(.logo, .avatar, .server-icon) { filter: grayscale(1); } [data-theme="mono"] .badge { box-shadow: inset 0 0 0 1.5px var(--badge-ink); } [data-theme="material"] .composer-row { border-radius: 26px; } [data-theme="material"] .send, [data-theme="material"] .icon-btn { border-radius: 50%; } [data-theme="material"] .auth-tabs, [data-theme="material"] .auth-tabs button { border-radius: 20px; } [data-theme="material"] .conv, [data-theme="material"] .nav-item { border-radius: 28px; } /* ---------- compact mode: more messages on screen ---------- */ .compact .msg { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 2px; padding-top: 1px; padding-bottom: 1px; } .compact .msg.grouped { margin-top: 0; } .compact .msg > .avatar-btn { display: none; } .compact .msg-head { flex: none; display: inline-flex; } .compact .msg-time { order: -1; } .compact .msg-body { flex: 1 1 0; min-width: 12ch; } .compact .side-time { flex: none; opacity: 0.8; padding-top: 0; } .compact :is(.reply-line, .attachments, .reactions) { flex-basis: 100%; } .compact .reply-line { margin-left: 0; } .compact .sys { margin: 3px 18px 0; } .compact .day { margin: 12px 18px 2px; } .compact .seen { padding-top: 0; } .compact .conv { min-height: 38px; padding: 3px 10px; gap: 10px; } .compact .conv .avatar.md { width: 28px; height: 28px; font-size: 0.75rem; } .compact .conv-preview { display: none; } .compact .person { padding: 2px 6px; } .compact .member { padding: 3px 8px; } .compact .pane-head { min-height: 48px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; } .compact .chat-start { padding-top: 14px; } .compact .chat-start .avatar.xl { width: 48px; height: 48px; font-size: 1.2rem; } /* ---------- motion and effects switches ---------- */ .no-effects .fx { display: none; } .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reduce-motion .fx, .reduce-motion .fx::before, .reduce-motion .fx::after, .reduce-motion .fx-sp, .reduce-motion .fx-sp > img { animation: none !important; } /* ---------- photo compression ---------- */ .tray-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; } .tray-savings { font-size: 0.8rem; font-weight: 600; color: color-mix(in srgb, var(--good) 65%, var(--ink)); } .tray-size.saved { color: color-mix(in srgb, var(--good) 65%, var(--ink)); font-weight: 600; } .tray-item.compressing .tray-size { color: var(--muted); font-style: italic; } .tray-item { width: 250px; } .quality-menu { width: 360px; max-width: 100%; padding: 14px; } .quality-menu h3 { margin: 0; } .popover.sheet .quality-menu { width: 100%; } .custom-photo { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--raised); } .size-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .size-row input { width: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: max(16px, 1rem); } .plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } /* ---------- crop editor ---------- */ .crop-stage { position: relative; width: 280px; height: 280px; max-width: 100%; margin: 0 auto; border-radius: 16px; overflow: hidden; background: repeating-conic-gradient(var(--raised) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; touch-action: none; } .crop-canvas { display: block; width: 280px; height: 280px; cursor: grab; } .crop-canvas:active { cursor: grabbing; } .crop-frame { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.55); outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: -2px; } .crop-frame.shape-circle { border-radius: 50%; } .crop-frame.shape-rounded { border-radius: 30%; } .crop-frame.shape-square { border-radius: 10%; } .back-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; } /* ---------- message menu, pins, forwarding ---------- */ .msg-menu { min-width: 220px; } .quick-reacts { display: flex; gap: 4px; padding: 8px 8px 6px; border-bottom: 1px solid var(--line); } .quick-react { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--raised); font-size: 1.2rem; } .quick-react:hover { background: var(--hover); } .quick-react.on { box-shadow: inset 0 0 0 2px var(--link); background: var(--tint); } .quick-react.more .icon { width: 18px; height: 18px; color: var(--muted); } .popover.sheet .quick-reacts { justify-content: space-between; } .popover.sheet .quick-react { width: 44px; height: 44px; } @media (pointer: coarse) { .messages .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } } .forwarded { grid-column: 2; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.78rem; font-style: italic; } .forwarded .icon { width: 14px; height: 14px; } .pin-mark { position: absolute; top: 6px; right: 14px; color: var(--muted); } .pin-mark .icon { width: 14px; height: 14px; } .msg:hover .pin-mark, .msg:focus-within .pin-mark { visibility: hidden; } .forward-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--raised); border-radius: 0 10px 10px 0; max-height: 140px; overflow: auto; } .forward-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .forward-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; } .forward-row:hover { background: var(--hover); } .forward-row .stack { flex: 1; min-width: 0; } .forward-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .server-icon.sm { width: 32px; height: 32px; font-size: 0.72rem; } .pins-panel { width: 380px; max-width: 100%; padding: 12px; } .pins-panel h3 { margin: 0 0 8px; } .popover.sheet .pins-panel { width: 100%; } .pin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; } .pin-item { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; } .pin-head { display: flex; align-items: center; gap: 8px; } .pin-text { overflow-wrap: anywhere; } /* ---------- link previews ---------- */ .embeds { grid-column: 2; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .embed { display: flex; flex-direction: column; gap: 4px; max-width: min(460px, 100%); padding: 10px 12px; border-left: 4px solid var(--line); border-radius: 4px 10px 10px 4px; background: var(--raised); } .embed.video { border-left-color: #D93025; } .embed.post { border-left-color: var(--ink); } .embed.audio { border-left-color: var(--good); } .embed-site { color: var(--muted); font-size: 0.75rem; font-weight: 600; } .embed-author { font-size: 0.82rem; font-weight: 600; } .embed-title { font-weight: 700; color: var(--link); overflow-wrap: anywhere; } .embed-desc { margin: 0; font-size: 0.86rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .embed-media { position: relative; display: block; margin-top: 4px; border-radius: 8px; overflow: hidden; background: var(--hover); } .embed-media img { display: block; width: 100%; max-height: 280px; object-fit: cover; } .play-badge { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #FFFFFF; } .play-badge .icon { width: 26px; height: 26px; margin-left: 3px; } .embed-media:hover .play-badge, .embed-media:focus-visible .play-badge { background: #D93025; } .compact .embeds, .compact .forwarded { flex-basis: 100%; } /* ---------- account switcher ---------- */ .accounts-section { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; } .menu-label { padding: 4px 10px; color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .account-item .badge { margin-left: auto; } #meBtn { position: relative; } #meBtn.other-pings::after { content: ""; position: absolute; top: 4px; left: 32px; width: 10px; height: 10px; border-radius: 50%; background: var(--dnd); box-shadow: 0 0 0 2px var(--side-bg); } .auth-adding { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 0.9rem; } .auth-cancel { display: block; margin: 14px auto 0; } /* ---------- board ---------- */ /* card colours are gentle tints of the theme's surface, so text contrast holds in every theme */ .board-card, .card-editor, .cal-chip, .upcoming-item, .card-colour { --tint-c: transparent; } .c-red { --tint-c: #E5484D; } .c-orange { --tint-c: #F76B15; } .c-yellow { --tint-c: #F5C400; } .c-green { --tint-c: #30A46C; } .c-teal { --tint-c: #12A594; } .c-blue { --tint-c: #3E63DD; } .c-purple { --tint-c: #8E4EC6; } .c-pink { --tint-c: #D6409F; } .c-brown { --tint-c: #A07553; } .c-grey { --tint-c: #8B8D98; } [data-theme="mono"] :is(.board-card, .cal-chip, .upcoming-item, .card-colour) { --tint-c: transparent; } .board-body { padding: 16px 18px 40px; } .board-new { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .board-label { margin: 18px 4px 8px; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .board-grid { columns: 250px; column-gap: 12px; } .board-card { break-inside: avoid; display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--tint-c) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--tint-c) 14%, var(--surface)); cursor: pointer; } .board-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .card-head { display: flex; align-items: flex-start; gap: 6px; } .card-heading { margin: 0; flex: 1; min-width: 0; font-size: 1rem; } .card-title { padding: 0; border: 0; background: none; color: var(--ink); font: 700 1rem/1.3 var(--display); text-align: left; overflow-wrap: anywhere; } .card-title.untitled { color: var(--muted); font-weight: 600; font-style: italic; } .card-pin { color: var(--muted); } .card-pin .icon { width: 15px; height: 15px; } .card-text { font-size: 0.9rem; overflow-wrap: anywhere; white-space: pre-wrap; } .card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .card-list li { padding-left: calc(var(--level, 0) * 18px); } .card-list .check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; cursor: pointer; } .card-list input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .card-done { display: flex; align-items: center; gap: 4px; margin: 0; } .card-done .icon { width: 14px; height: 14px; } .card-chip { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink); } .card-chip .icon { width: 15px; height: 15px; color: var(--muted); flex: none; } .card-chip.place, .card-chip.reminder.past { font-weight: 500; color: var(--muted); } .card-chip.reminder.past span { text-decoration: line-through; } .chip-me .icon { color: var(--link); } .card-foot { color: var(--muted); font-size: 0.72rem; } /* editor */ .card-editor { margin: -4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--tint-c) 10%, transparent); } .card-title-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 700 max(16px, 1.1rem) var(--display); } .card-text-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); resize: vertical; } .item-editor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .item-row { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--level, 0) * 22px); } .item-row > input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .item-text { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); } .item-text:hover, .item-text:focus { border-color: var(--line); background: var(--surface); } .item-row.done .item-text { text-decoration: line-through; color: var(--muted); } .item-tools { display: flex; gap: 0; opacity: 0.35; } .item-row:hover .item-tools, .item-row:focus-within .item-tools { opacity: 1; } .item-tools .icon-btn { width: 30px; height: 30px; } .item-tools .icon { width: 16px; height: 16px; } .card-section-body { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; } .card-section-body > input, .inline-form.wrap select, .inline-form.wrap input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); } .inline-form.wrap { flex-wrap: wrap; } .card-colours { display: flex; flex-wrap: wrap; gap: 8px; } .card-colour { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--tint-c) 55%, var(--surface)); } .card-colour.c-default { background: var(--surface); } .card-colour.on { outline: 2px solid var(--link); outline-offset: 2px; } @media (pointer: coarse) { .item-tools { opacity: 1; } } /* calendar */ .calendar { display: flex; flex-direction: column; gap: 12px; } .cal-head { display: flex; align-items: center; gap: 6px; } .cal-title { margin: 0 6px; min-width: 10ch; font-size: 1.15rem; } .cal-scroll { overflow-x: auto; } .cal-grid { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; } .cal-grid th { padding: 6px; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-align: left; } .cal-day { height: 104px; padding: 4px; border: 1px solid var(--line); vertical-align: top; background: var(--surface); } .cal-day.outside { background: var(--raised); } .cal-day.outside .cal-num { color: var(--muted); } .cal-day-head { display: flex; align-items: center; justify-content: space-between; } .cal-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; } .cal-day.today .cal-num { background: var(--accent); color: var(--accent-ink); } .cal-add { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); opacity: 0; } .cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; } .cal-add .icon { width: 14px; height: 14px; } @media (pointer: coarse) { .cal-add { opacity: 0.6; } } .cal-chip { display: block; width: 100%; margin-top: 2px; padding: 2px 6px; border: 0; border-left: 3px solid color-mix(in srgb, var(--tint-c) 80%, var(--link)); border-radius: 4px; background: color-mix(in srgb, var(--tint-c) 18%, var(--raised)); color: var(--ink); font-size: 0.72rem; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-chip.reminder { border-left-style: dashed; } .cal-more { display: block; margin-top: 2px; color: var(--muted); font-size: 0.7rem; } .upcoming h3 { margin: 0 0 6px; } .upcoming-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .upcoming-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--tint-c) 12%, var(--surface)); color: var(--ink); text-align: left; } .upcoming-item .icon { color: var(--muted); flex: none; } .board-search input { width: 180px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); } @media (max-width: 700px) { .board-search input { width: 120px; } .board-body { padding: 12px 10px 40px; } } /* ---------- 3D models ---------- */ .model-card { display: flex; flex-direction: column; width: min(360px, 100%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } .model-open { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: zoom-in; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--raised) 60%, #FFFFFF), var(--raised)); } [data-scheme="dark"] .model-open { background: radial-gradient(circle at 50% 40%, #2d2530, #151218); } .model-open img { width: 100%; height: 100%; object-fit: contain; } .model-placeholder .icon { width: 56px; height: 56px; color: var(--muted); } .model-badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; } .model-badge .icon { width: 14px; height: 14px; } .model-open:hover .model-badge, .model-open:focus-visible .model-badge { background: var(--accent); color: var(--accent-ink); } .model-meta { display: flex; align-items: center; gap: 10px; padding: 8px 10px; } .model-meta .file-text { flex: 1; min-width: 0; } .model-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; background: #151218; color: #F4E9EF; } .model-viewer[open] { display: flex; } .model-viewer::backdrop { background: rgba(0, 0, 0, 0.8); } .model-viewer[data-bg="light"] { background: #F2F0F3; color: #25131D; } .model-viewer[data-bg="none"] { background: repeating-conic-gradient(#2a2430 0 25%, #1d1822 0 50%) 0 0 / 24px 24px; } .mv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; } .mv-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .mv-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-head-actions { display: flex; align-items: center; gap: 6px; flex: none; } .model-viewer .icon-btn, .model-viewer .btn { color: inherit; } .model-viewer .btn { background: rgba(127, 127, 127, 0.18); border-color: rgba(127, 127, 127, 0.35); } .model-viewer .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .mv-stage { position: relative; flex: 1; min-height: 0; touch-action: none; } .mv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; } .mv-status { margin: 0; padding: 8px 14px; text-align: center; font-size: 0.9rem; } .mv-status[hidden] { display: none; } .mv-foot { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); } .mv-toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .mv-group { display: inline-flex; gap: 4px; } .mv-info, .mv-help { margin: 0; font-size: 0.8rem; opacity: 0.85; } @media (max-width: 700px) { .mv-help { display: none; } .mv-toolbar .btn { padding: 0 10px; } } /* ---------- viewing older messages ---------- */ .present-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 calc(16px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left)); padding: 6px 8px 6px 14px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 0.86rem; font-weight: 600; } .present-bar[hidden] { display: none; } .present-bar .btn { background: var(--accent-ink); color: var(--accent); border-color: transparent; } .loading.newer { margin-top: 10px; } .msg:focus { outline: none; } .msg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } /* ---------- search and shared media panel ---------- */ .tool-panel { width: 420px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); } .tool-panel[hidden] { display: none; } .tp-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; } .tp-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); } .tp-search:focus-within { border-color: var(--link); } .tp-search > .icon { width: 18px; height: 18px; color: var(--muted); flex: none; } .tp-search input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; color: var(--ink); outline: none; } .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .suggest[hidden] { display: none; } .suggest-title { padding: 4px 8px 6px; color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .suggest-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; } .suggest-item.active, .suggest-item:hover { background: var(--hover); } .suggest-item.active { box-shadow: inset 0 0 0 1px var(--link); } .sg-label { font-weight: 600; white-space: nowrap; } .sg-sub { margin-left: auto; color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scope-switch { margin: 0 10px 8px; } .tp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 20px; } .tp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 8px; } .tp-count { font-weight: 700; font-size: 0.9rem; } .tp-bar select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); } .tp-empty { padding: 30px 12px; text-align: center; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 0.8rem; font-weight: 600; } .chip .icon { width: 14px; height: 14px; } .chip.bad { border-color: var(--danger); background: transparent; color: var(--danger); text-decoration: line-through; } .problems { margin: 0 0 8px; padding: 8px 12px 8px 26px; border-radius: 10px; background: var(--raised); color: var(--danger); font-size: 0.85rem; } .results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .result { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); } .result:hover { border-color: var(--muted); } .result-where { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 0.78rem; font-weight: 700; } .result-where .icon { width: 13px; height: 13px; } .result-head { display: flex; align-items: center; gap: 8px; padding-right: 54px; } .result-text { overflow-wrap: anywhere; font-size: 0.92rem; } .result-text mark, .result-file mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--badge) 55%, transparent); color: inherit; } .result-files { display: flex; flex-wrap: wrap; gap: 6px; } .result-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px 3px 3px; border-radius: 8px; background: var(--surface); font-size: 0.8rem; } .result-file img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; } .result-file .icon { width: 16px; height: 16px; margin-left: 5px; color: var(--muted); } .result-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-jump { position: absolute; top: 8px; right: 8px; } @media (hover: hover) and (pointer: fine) { .result-jump { opacity: 0; } .result:hover .result-jump, .result-jump:focus-visible, .result:focus-within .result-jump { opacity: 1; } } .pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } .tp-tabs { margin-bottom: 6px; } .tp-tabs button[aria-selected="true"] { background: var(--hover); color: var(--ink); } .tab-count { color: var(--muted); font-weight: 500; } .tp-month { margin: 14px 2px 8px; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .media-tile { position: relative; aspect-ratio: 1; } .media-open { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--raised); cursor: zoom-in; } .media-open img { width: 100%; height: 100%; object-fit: cover; } .media-icon .icon { width: 30px; height: 30px; color: var(--muted); } .media-kind { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #FFFFFF; } .media-kind .icon { width: 14px; height: 14px; } .media-tile .tp-jump { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; } @media (hover: hover) and (pointer: fine) { .media-tile .tp-jump { opacity: 0; } .media-tile:hover .tp-jump, .media-tile:focus-within .tp-jump { opacity: 1; } } .shared-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .shared-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; } .shared-row:hover { background: var(--hover); } .row-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--tint); color: var(--link); } .link-thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.row-name { color: var(--link); } .row-sub { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audio-row audio { width: 100%; margin-top: 4px; } .tp-more { display: block; margin: 12px auto 0; } /* medium screens: the panel slides over the chat; phones: it fills the screen */ @media (max-width: 1099px) { .chat-body { position: relative; } .tool-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: min(420px, 92%); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25); } } @media (max-width: 760px) { .tool-panel { position: fixed; inset: 0; width: auto; z-index: 55; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); border: 0; } .media-grid { gap: 3px; } } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70; width: max-content; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 0.9rem; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.error { background: var(--danger); color: var(--danger-ink); } /* ---------- phones ---------- */ @media (max-width: 760px) { .shell { grid-template-columns: 64px minmax(0, 1fr); } .rail-btn { width: 64px; } .rail-btn .badge { right: 6px; } .shell:not(.view-open) .view { display: none; } .shell.view-open .rail, .shell.view-open .sidebar { display: none; } .shell.view-open .view { grid-column: 1 / -1; } .back { display: inline-grid; } .pane-head { padding-left: 12px; } #friendsPane .tabs { order: 5; flex-basis: 100%; gap: 2px; margin: 4px -12px -4px; padding: 0 12px; } #friendsPane .tabs button { padding: 0 10px; font-size: 0.92rem; } .tab-long { display: none; } .auth { grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; } .auth-brand .wordmark { font-size: 3.6rem; margin-top: 12px; } .tagline { font-size: 1rem; } .auth-card { justify-self: stretch; width: 100%; } .msg { padding-left: 12px; padding-right: 12px; column-gap: 12px; } .msg-actions { right: 8px; } .sys { margin-left: 64px; } .modal { width: 100vw; max-height: calc(100dvh - 24px); margin: auto 0 0; } .modal-card { max-height: calc(100dvh - 24px); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); } .person-actions { gap: 6px; } .emoji-scroll { height: 42dvh; } } /* ---------- swipe gestures (phones) ---------- */ @media (max-width: 760px) { /* up/down scrolling stays with the browser; sideways movement is ours (areas that scroll sideways keep theirs) */ .shell, .shell :is(.messages, .conv-list, .pane-body, .side-panel, .rail-list, .board-body), .member-drawer { touch-action: pan-y pinch-zoom; } .shell { position: relative; overflow: hidden; } .shell.view-open.peeking .rail, .shell.view-open.peeking .sidebar { display: flex; } .shell.view-open.peeking .view, .shell:not(.view-open).peeking-forward .view { position: absolute; inset: 0; z-index: 5; box-shadow: -10px 0 28px rgba(0, 0, 0, 0.35); } .shell:not(.view-open).peeking-forward .view { display: flex; will-change: transform; } .shell.view-open.peeking .view { will-change: transform; } .member-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(320px, 86vw); overflow-y: auto; padding: calc(12px + env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35); outline: none; } .member-drawer[hidden], .drawer-scrim[hidden] { display: none; } .drawer-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, 0.45); } .drawer-title { margin: 4px 8px 8px; font-size: 1rem; } .members.in-drawer { width: auto; padding: 0; border: 0; background: none; } .people.in-drawer { list-style: none; margin: 0; padding: 0; } .msg { position: relative; } .swipe-reply { position: absolute; top: 50%; right: -52px; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--muted); opacity: 0; } .swipe-reply.ready { background: var(--accent); color: var(--accent-ink); } } /* Installed app: there are no browser toolbars, so keep clear of the phone's navigation bar at all times */ @media (display-mode: standalone) { .me-bar { padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px))); } .composer { padding-bottom: calc(14px + max(env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px))); } .app.keyboard .composer { padding-bottom: 10px; } } @media (prefers-reduced-motion: reduce) { .boot .logo { animation: none; } .msg.flash { animation: none; } .toast, .switch-row input, .switch-row input::before, .rail-icon, .rail-pill { transition: none; } } /* ---------- 2.12: rich text ---------- */ .msg-body .md-p + .md-p, .msg-body .md-p + .md-list, .msg-body .md-list + .md-p { margin-top: 2px; } .md-h { margin: 6px 0 2px; font-family: var(--display); font-weight: 700; line-height: 1.25; } .md-h:first-child { margin-top: 0; } .md-h1 { font-size: 1.5em; } .md-h2 { font-size: 1.25em; } .md-h3 { font-size: 1.08em; } .md-sub { font-size: 0.8em; color: var(--muted); } .md-list { margin: 2px 0; padding-left: 1.5em; white-space: normal; } .md-list .md-list { margin: 0; } .md-list li { white-space: pre-wrap; } .md-list li::marker { color: var(--muted); } .link-host { color: var(--muted); font-size: 0.85em; } .help-out .md-h { margin: 0; } /* ---------- 2.12: spoiler pictures, videos and 3D models ---------- */ .spoiler-media { position: relative; overflow: hidden; cursor: pointer; } .image-tile { overflow: hidden; } /* the picture underneath: blurred, or hidden behind the chosen cover */ .spoiler-media :is(img, video, .sample-pic) { transition: filter 0.45s ease, transform 0.45s ease, opacity 0.45s ease; } .spoiler-media.cover-blur :is(img, video, .sample-pic) { filter: blur(44px) saturate(1.3); transform: scale(1.25); } .spoiler-media:not(.cover-blur) :is(img, video, .sample-pic) { opacity: 0; } .spoiler-media.revealing :is(img, video, .sample-pic) { filter: none; transform: none; opacity: 1; } .spoiler-media::before, .spoiler-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s; } .spoiler-media::after { z-index: 1; background: rgba(20, 8, 16, 0.25); } .spoiler-media::before { z-index: 2; display: none; } .spoiler-media.revealing::before, .spoiler-media.revealing::after, .spoiler-media.revealing .pixel-cover { opacity: 0; } /* pixelated: a 12-pixel-wide copy stretched with hard edges */ .spoiler-media.cover-pixel { background: repeating-conic-gradient(#5b5760 0 25%, #807a86 0 50%) 0 0 / 18px 18px; } .pixel-cover { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity 0.45s; } .spoiler-media.cover-pixel::after { background: rgba(20, 8, 16, 0.12); } /* solid colour */ .spoiler-media.cover-solid::after { background: var(--cover, #1a1a1a); } /* sparkling void: deep space with twinkling stars */ .spoiler-media.cover-void::after { background: radial-gradient(120% 90% at 18% 8%, rgba(142, 78, 198, 0.6), transparent 60%), radial-gradient(90% 80% at 92% 100%, rgba(62, 99, 221, 0.5), transparent 62%), radial-gradient(50% 45% at 62% 42%, rgba(236, 15, 110, 0.28), transparent 70%), #07040D; } .spoiler-media.cover-void::before, .spoiler:not(.shown).cover-void::before { display: block; background-image: var(--stars); background-size: 53px 47px, 67px 89px, 83px 71px, 173px 97px, 131px 113px, 211px 157px; animation: twinkle 2.6s ease-in-out infinite alternate, drift 30s linear infinite; } :root { --stars: radial-gradient(1.2px 1.2px at 11px 7px, #FFFFFF 50%, transparent 70%), radial-gradient(1px 1px at 31px 58px, #CFC4FF 50%, transparent 70%), radial-gradient(1.6px 1.6px at 40px 50px, #FFE08A 50%, transparent 70%), radial-gradient(1.3px 1.3px at 150px 20px, #FFFFFF 50%, transparent 70%), radial-gradient(2.4px 2.4px at 90px 30px, #FFFFFF 40%, rgba(255, 255, 255, 0.35) 60%, transparent 75%), radial-gradient(3px 3px at 60px 120px, #FFD6F0 35%, rgba(255, 150, 210, 0.3) 60%, transparent 78%); } @keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } } @keyframes drift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 53px 94px, -67px 89px, -83px 71px, 173px -97px, 131px -113px, -211px 157px; } } /* TV static */ :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .spoiler-media.cover-static::after { background: var(--noise) 0 0 / 180px 180px, #4a4a4a; animation: static 0.35s steps(1) infinite; } @keyframes static { 0% { background-position: 0 0; } 25% { background-position: -53px 71px; } 50% { background-position: 97px -31px; } 75% { background-position: -17px -113px; } } .reduce-motion .spoiler-media::before, .reduce-motion .spoiler-media::after, .reduce-motion .spoiler::before, .reduce-motion .spoiler { animation: none !important; } .spoiler-pill { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #FFFFFF; font: 700 0.8rem var(--body); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; } .spoiler-pill .icon { width: 16px; height: 16px; } .spoiler-media:hover .spoiler-pill, .spoiler-media:focus-visible .spoiler-pill, .spoiler-cover:hover .spoiler-pill, .spoiler-cover:focus-visible .spoiler-pill { background: var(--accent); color: var(--accent-ink); } .video-spoiler { border-radius: 12px; max-width: min(100%, 480px); } .video-spoiler .media-video { border-radius: 0; } .spoiler-cover { position: absolute; inset: 0; z-index: 5; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; } .media-tile .spoiler-media { cursor: pointer; } .result-file.blurred img { filter: blur(8px); } .reveal-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; } @keyframes fx-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px) rotate(-1deg); } 40% { transform: translate(5px, -4px) rotate(1deg); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(3px, 2px); } } .fx-shake { animation: fx-shake 0.45s ease-out; } .reduce-motion .spoiler-media img, .reduce-motion .spoiler-media video { transition: none; } /* upload tray: spoiler switch and the reveal-effect picker */ .tray-item { position: relative; } .tray-item.is-spoiler img { filter: blur(6px); } .tray-spoiler.on { background: var(--accent); color: var(--accent-ink); } .tray-spoiler.on:hover { background: var(--accent); filter: brightness(1.08); } .reveal-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); } .reveal-pick .icon { width: 16px; height: 16px; } .reveal-pick select { width: auto; min-height: 30px; padding: 2px 26px 2px 8px; font-size: 0.8rem; } /* ---------- 2.12: formatting bubble and toolbar ---------- */ .fmt-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .fmt-btn .icon { width: 18px; height: 18px; } .fmt-btn:hover { background: var(--hover); color: var(--ink); } .fmt-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .fmt-sep { flex: none; width: 1px; height: 20px; margin: 0 3px; background: var(--line); } .format-pop { position: fixed; z-index: 58; display: flex; align-items: center; gap: 1px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); animation: pop-in 0.12s ease-out; } .format-pop[hidden] { display: none; } @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .format-bar { display: flex; align-items: center; gap: 1px; margin-bottom: 6px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); flex-wrap: wrap; row-gap: 2px; } .format-bar[hidden] { display: none; } .fmt-style { padding: 0 4px 0 6px; } .fmt-style .fmt-style-name { min-width: 2.2ch; font: 700 0.75rem var(--body); } .fmt-style .icon:last-child { width: 14px; height: 14px; } .fmt-help { margin-left: auto; } #formatBtn { color: var(--muted); } #formatBtn:hover { color: var(--ink); } #formatBtn[aria-pressed="true"] { color: var(--link); background: color-mix(in srgb, var(--accent) 16%, transparent); } .menu-item.style-h1 .style-sample { font: 700 1.25rem var(--display); } .menu-item.style-h2 .style-sample { font: 700 1.1rem var(--display); } .menu-item.style-h3 .style-sample { font: 700 1rem var(--display); } .menu-item.style-sub .style-sample { font-size: 0.82rem; color: var(--muted); } .menu-item[aria-checked="true"] { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); } .menu-item kbd { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--raised); color: var(--muted); font: 0.78rem var(--mono); } .link-form { width: 320px; max-width: 100%; padding: 14px; } .format-help { width: 420px; max-width: 100%; padding: 14px; } .format-help table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .format-help td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: middle; } .format-help td:first-child code { font: 0.8rem var(--mono); white-space: nowrap; } .format-help .help-out { white-space: pre-wrap; } @media (max-width: 760px) { .fmt-btn { min-width: 38px; height: 38px; } .format-help td:last-child { display: none; } } /* ---------- 2.13: colours and fonts in messages ---------- */ .tx-c { color: var(--tx); } .tx-rainbow { background-image: var(--tx-rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .tx-rainbow a, .tx-c a { -webkit-text-fill-color: currentColor; } .tx-f-xefer { font-family: "Bricolage Grotesque", system-ui, sans-serif; } .tx-f-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .tx-f-atkinson { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; } .tx-f-dyslexic { font-family: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif; } .tx-f-serif { font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; } .tx-f-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.94em; } /* spoiler style picker (upload tray and Settings) */ .spoiler-menu { width: 360px; max-width: 100%; padding: 14px; } .spoiler-style fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .spoiler-style legend { padding: 0; margin-bottom: 6px; } .spoiler-style fieldset[hidden] { display: none; } .spoiler-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .spoiler-sample { position: relative; display: block; width: 200px; max-width: 100%; aspect-ratio: 8 / 5; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--raised); cursor: pointer; } .sample-pic { display: block; width: 100%; height: 100%; } .spoiler-sample-text { margin: 0; flex: 1 1 140px; } .chip-radios { display: flex; flex-wrap: wrap; gap: 6px; } .chip-radio { position: relative; display: inline-flex; } .chip-radio input, .cover-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .chip-radio span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.86rem; } .chip-radio:hover span { background: var(--hover); } .chip-radio input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; } .chip-radio input:focus-visible + span, .cover-swatch:focus-within { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; } .cover-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .cover-swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 1px var(--line); } .cover-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } /* colour and font picker in the formatting tools */ .style-menu { width: 340px; max-width: 100%; padding: 14px; } .text-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .text-swatch { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--line); } .text-swatch.rainbow { background: conic-gradient(#e5484d, #f76b15, #ffc53d, #30a46c, #12a594, #3e63dd, #8e4ec6, #ec0f6e, #e5484d); } .text-swatch.none { background: var(--surface); } .text-swatch.none::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--danger, #e5484d); transform: rotate(45deg); } .text-swatch.custom { overflow: hidden; background: conic-gradient(from 90deg, #fff, #ec0f6e, #3e63dd, #30a46c, #fff); } .text-swatch.custom input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; } .text-swatch[aria-pressed="true"], .text-swatch.custom.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } .font-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .font-pick { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; font-size: 0.95rem; cursor: pointer; } .font-pick:hover { background: var(--hover); } .font-pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .style-sample-line { min-height: 1.6em; padding: 8px 10px; border-radius: 10px; background: var(--bg); overflow-wrap: anywhere; } /* ---------- 2.14: server folders in the rail ---------- */ .rail-btn, .conv { -webkit-touch-callout: none; } .server-icon.mini { width: 20px; height: 20px; font-size: 0.45rem; } .server-icon.mini .fx { display: none; } .rail-folder .folder-minis { display: grid; grid-template-columns: 20px 20px; grid-auto-rows: 20px; gap: 3px; place-content: center; width: 48px; height: 48px; border-radius: 16px; background: color-mix(in srgb, var(--folder, var(--side-accent)) 26%, var(--side-bg)); } .rail-folder:hover .folder-minis, .rail-folder.active .folder-minis { background: color-mix(in srgb, var(--folder, var(--side-accent)) 40%, var(--side-bg)); } .rail-folder.open { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 56px; padding: 0 0 6px; border-radius: 18px; background: color-mix(in srgb, var(--folder, var(--side-accent)) 18%, transparent); } .rail-folder.open .rail-btn { width: 56px; } .rail-folder.open .rail-pill { left: -8px; } .folder-head .folder-icon { background: none; color: var(--folder, var(--side-accent)); } .folder-head .folder-icon .icon { width: 26px; height: 26px; } .rail-folder.open .folder-head { height: 44px; } [data-rail-server].dragging, [data-rail-folder].dragging { opacity: 0.4; } .drop-before, .drop-after { position: relative; } .drop-before::before, .drop-after::after { content: ''; position: absolute; left: 14px; right: 14px; height: 3px; border-radius: 2px; background: var(--side-strong); z-index: 2; } .drop-before::before { top: -4px; } .drop-after::after { bottom: -4px; } .drop-into .rail-icon { outline: 3px solid var(--side-strong); outline-offset: 2px; border-radius: 16px; } .swatch.none { background: linear-gradient(135deg, var(--surface) 45%, var(--danger, #e5484d) 45% 55%, var(--surface) 55%); } /* ---------- 2.14: who can join, Explore servers, previews ---------- */ .privacy-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 0.74rem; font-weight: 600; white-space: nowrap; } .privacy-badge .icon { width: 13px; height: 13px; } .privacy-badge.public { background: color-mix(in srgb, var(--good, #1e8a57) 18%, var(--surface)); } .privacy-badge.friends { background: color-mix(in srgb, var(--link) 15%, var(--surface)); } .choice-text strong { display: inline-flex; align-items: center; gap: 6px; } .choice-text strong .icon { width: 16px; height: 16px; color: var(--muted); } .browse { min-width: min(560px, 100%); } .browse-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .browse-bar p { margin: 0; } .browse-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .browse-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .browse-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .browse-name { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .browse-desc { margin: 0; color: var(--muted); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .browse-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--muted); font-size: 0.8rem; } .browse-actions { flex: none; } .browse-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; } .server-preview { min-width: min(620px, 100%); } .preview-top { display: flex; align-items: center; gap: 14px; } .preview-top .profile-name { margin: 0; } .preview-desc { margin: 0; color: var(--muted); } .preview-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; } .preview-tabs button { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.86rem; } .preview-tabs button .icon { width: 14px; height: 14px; color: var(--muted); } .preview-tabs button.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .preview-tabs button.active .icon { color: inherit; } .preview-topic { display: flex; align-items: center; gap: 4px; margin: 0; } .preview-topic .icon { width: 14px; height: 14px; } .preview-msgs { display: flex; flex-direction: column; gap: 12px; max-height: min(46dvh, 420px); overflow-y: auto; margin: 0; padding: 12px; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); } .preview-msg { display: flex; gap: 10px; align-items: flex-start; } .preview-main { min-width: 0; flex: 1; } .preview-head { display: flex; align-items: baseline; gap: 8px; } .preview-main .msg-body { white-space: pre-wrap; overflow-wrap: anywhere; } .preview-sys { color: var(--muted); font-size: 0.85rem; font-style: italic; text-align: center; } .preview-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .preview-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--raised); font-size: 0.82rem; } .preview-file .icon { width: 15px; height: 15px; color: var(--muted); } @media (max-width: 760px) { .browse-card { flex-wrap: wrap; } .browse-card .server-icon.lg { width: 48px; height: 48px; } .browse-actions { width: 100%; } .browse-actions .btn { width: 100%; justify-content: center; } } /* ---------- 2.15: settings screens (yours and servers'), one layout ---------- */ .modal.wide { width: min(880px, calc(100vw - 24px)); } .modal.wide .modal-card { height: min(760px, calc(100dvh - 48px)); } /* the same size on every page, so it doesn't jump */ .settings-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; } .settings-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; } .snav-group { display: flex; flex-direction: column; gap: 2px; } .modal-body .snav-head { margin: 0 0 4px 10px; font: 700 0.72rem var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .snav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; font-weight: 600; cursor: pointer; } .snav-item span { flex: 1; } .snav-item .icon { width: 18px; height: 18px; flex: none; color: var(--muted); } .snav-item:hover { background: var(--hover); } .snav-item[aria-current="page"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); } .snav-item[aria-current="page"] .icon { color: var(--ink); } .snav-item.danger, .snav-item.danger .icon { color: var(--danger); } .settings-page { min-width: 0; display: flex; flex-direction: column; gap: 18px; } .set-page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .modal-body .set-page-title { margin: 0; font: 700 1.15rem var(--display); outline: none; } .set-back { display: inline-flex; align-items: center; gap: 2px; font-size: 0.88rem; } .set-back .icon { width: 16px; height: 16px; } .set-group { display: flex; flex-direction: column; gap: 6px; } .modal-body .set-title { margin: 0 0 0 4px; font: 700 0.74rem var(--body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .set-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; } .set-card > * + * { border-top: 1px solid var(--line); } .set-row, .set-row.switch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 54px; padding: 10px 14px; border-radius: 0; background: none; } .set-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .set-label { font-weight: 600; } .set-text small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; } .set-nav { width: 100%; border: 0; color: var(--ink); text-align: left; cursor: pointer; flex-wrap: nowrap; } .set-nav:hover, .set-nav:focus-visible { background: var(--hover); } .set-nav > .icon { width: 20px; height: 20px; flex: none; color: var(--muted); } .set-nav > .icon:last-child { width: 18px; height: 18px; } .set-row .segmented { align-self: center; } .set-row select { width: auto; max-width: 100%; } .set-card > :not(:first-child) { border-top: 1px solid var(--line); } .set-block { padding: 12px 14px; } .set-block > .channel-rows { border: 0; } .set-block > .people, .set-block > .channel-rows, .set-block > .sound-list, .set-block > .wp-list { margin: -4px 0; } .set-note { margin: 0 4px; color: var(--muted); font-size: 0.8rem; line-height: 1.4; } .channel-row-topic { flex: 1; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .settings-page .profile-name { margin: 0; } .settings-page .profile .muted { margin: 0; } @media (max-width: 760px) { .modal.wide { width: 100vw; } .modal.wide .modal-card { height: calc(100dvh - 24px); } .settings-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; } .settings-shell.has-page .settings-nav { display: none; } .settings-nav { position: static; } .snav-group { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; gap: 0; } .modal-body .snav-head { margin: 10px 14px 4px; } .snav-item { min-height: 50px; padding: 10px 14px; border-radius: 0; } .snav-item + .snav-item { border-top: 1px solid var(--line); } } /* menus: sub-menus open in place */ .menu-item.has-sub > span:not(.dot-inline) { flex: 1; } .menu-item.has-sub > .icon:last-child { width: 16px; height: 16px; } .menu-item.menu-back { font-weight: 700; } .menu-item[aria-checked] > .icon:last-child { margin-left: auto; color: var(--link); } .set-block > .people > li:first-child, .set-block > .people > li:first-child > .person { border-top: 0; } /* ---------- 2.16: live typing ---------- */ .live-drafts { display: flex; flex-direction: column; gap: 6px; padding: 4px 20px 2px; max-height: 40%; overflow-y: auto; } .live-drafts[hidden] { display: none; } .live-draft { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--link) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .live-main { min-width: 0; flex: 1; } .live-head { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; } .live-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .live-badge .icon { width: 13px; height: 13px; } .live-text { max-height: 6.2em; overflow: hidden; color: var(--ink); opacity: 0.85; } .live-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: var(--link); animation: live-blink 1s steps(1) infinite; } @keyframes live-blink { 50% { opacity: 0; } } .reduce-motion .live-caret { animation: none; } .live-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger, #e5484d) 12%, var(--surface)); font-size: 0.84rem; } .live-bar[hidden] { display: none; } .live-bar-text { flex: 1; min-width: 0; } .live-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--danger, #e5484d); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #e5484d) 60%, transparent); animation: live-pulse 1.6s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #e5484d) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } } .reduce-motion .live-dot { animation: none; } @media (max-width: 760px) { .live-drafts { padding: 4px 12px 2px; } } /* ---------- 2.17: invites with a QR code ---------- */ .invite-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .qr-box { display: grid; place-items: center; width: 184px; height: 184px; flex: none; padding: 0; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); } .qr { display: block; width: 176px; height: 176px; } .invite-details { flex: 1 1 220px; min-width: 0; } .invite-details p { margin: 0; } .invite-code { font: 700 1.35rem/1.2 var(--mono, ui-monospace, monospace); letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; } .invite-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 0.9rem; } .invite-hint { margin-top: 18px; } /* ---------- 2.18: "Update ready" after the server gets newer app files ---------- */ .update-card { display: flex; align-items: center; gap: 10px; margin: 6px 8px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--side-active); color: var(--side-ink); box-shadow: inset 3px 0 0 var(--side-accent); } .update-card[hidden], .update-bar[hidden] { display: none; } .update-icon { display: inline-grid; flex: none; } .update-icon .icon { width: 20px; height: 20px; } .update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .update-text strong { font: 600 0.9rem var(--display); } .update-text span { font-size: 0.76rem; color: var(--side-ink); opacity: 0.85; } .update-card .btn { flex: none; gap: 6px; padding: 0 12px; background: var(--side-accent); color: var(--side-accent-ink); border-color: transparent; } .update-card .btn .icon { width: 15px; height: 15px; } .update-bar { display: flex; align-items: center; gap: 10px; margin: 8px calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); padding: 5px 5px 5px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 0.86rem; } .update-bar .update-icon { color: var(--link); } .update-bar .update-icon .icon { width: 18px; height: 18px; } .update-bar-text { flex: 1; min-width: 0; } .update-bar .btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .update-bar .icon-btn { width: 30px; height: 30px; flex: none; } .update-bar .icon-btn .icon { width: 16px; height: 16px; } @media (max-width: 760px) { .update-bar { margin: 6px 10px 0; font-size: 0.84rem; } .update-long { display: none; } } /* ---------- 2.20: channel categories ---------- */ .conv-list li.cat { margin-top: 12px; } .conv-list > li.cat:first-child { margin-top: 4px; } .cat-head { display: flex; align-items: center; gap: 2px; padding-right: 2px; } .cat-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; min-height: 30px; padding: 4px 4px 4px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--side-muted); font: 700 0.75rem/1.2 var(--body); text-transform: uppercase; letter-spacing: 0.04em; } .cat-toggle:hover, .cat-toggle.unread { color: var(--side-ink); } .cat-chevron { display: inline-grid; flex: none; transition: transform 0.15s ease; } .cat-chevron .icon { width: 13px; height: 13px; } li.cat.closed .cat-chevron { transform: rotate(-90deg); } .reduce-motion .cat-chevron { transition: none; } .cat-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-add { width: 26px; height: 26px; flex: none; color: var(--side-muted); opacity: 0; } .cat-add .icon { width: 16px; height: 16px; } .cat-add:hover { color: var(--side-ink); } .cat-head:hover .cat-add, .cat-add:focus-visible { opacity: 1; } @media (hover: none) { .cat-add { opacity: 1; } } .cat-channels { list-style: none; margin: 0; padding: 0; } .cat-empty { padding: 2px 12px 6px 18px; font-size: 0.78rem; color: var(--side-muted); } .cat-head.drop-into { outline: 2px solid var(--side-strong); outline-offset: -2px; border-radius: 6px; } #channelList li.dragging { opacity: 0.45; } /* in server settings */ .cat-block { display: flex; flex-direction: column; gap: 6px; } .cat-block-head { display: flex; align-items: center; gap: 4px; padding: 2px 0 4px; border-bottom: 1px solid var(--line); } .cat-block-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 700 0.78rem var(--body); text-transform: uppercase; letter-spacing: 0.04em; } .cat-block-empty { margin: 2px 0 4px; } .channel-rows .icon-btn.round, .cat-block-head .icon-btn.round { width: 32px; height: 32px; flex: none; } .channel-rows .icon-btn.round .icon, .cat-block-head .icon-btn.round .icon { width: 16px; height: 16px; } .icon-btn.round:disabled { opacity: 0.35; cursor: default; } /* ---------- 2.21: voice messages ---------- */ .composer.recording .composer-row, .composer.recording .attach-tray, .composer.recording .tray-bar, .composer.recording .format-bar, .composer.recording .live-bar { display: none; } .voice-bar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 6px 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .voice-bar[hidden] { display: none; } .rec-dot { width: 10px; height: 10px; flex: none; margin-left: 4px; border-radius: 50%; background: var(--danger, #e5484d); animation: live-pulse 1.4s ease-out infinite; } .reduce-motion .rec-dot { animation: none; } .voice-clock { flex: none; min-width: 2.6em; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9rem; } .voice-live, .voice-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; gap: 2px; overflow: hidden; } .voice-live span, .voice-wave span { flex: 1 1 0; min-width: 2px; max-width: 5px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); } .voice-live span.played, .voice-wave span.played { background: var(--link); } .voice-bar .voice-live span { background: var(--link); } .voice-bar .voice-live span.played { background: var(--link); } .voice-bar:has(.voice-play) .voice-live span:not(.played) { background: color-mix(in srgb, var(--muted) 55%, transparent); } .voice-sound { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 0.8rem; font-weight: 600; } .voice-sound .icon { width: 16px; height: 16px; } .voice-sound.off { border-color: var(--link); color: var(--link); background: var(--tint); } .voice-sound:disabled { opacity: 0.6; cursor: default; } .voice-bar .send { flex: none; } .voice-stop .icon, .voice-play .icon { width: 18px; height: 18px; } @media (max-width: 480px) { .voice-sound span { display: none; } .voice-sound { padding: 0 9px; } } .voice-card { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .voice-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--link); } .voice-label .icon { width: 15px; height: 15px; } .voice-kind { text-transform: uppercase; letter-spacing: 0.04em; } .voice-meta { color: var(--muted); font-weight: 500; } .voice-player { display: flex; align-items: center; gap: 8px; } .voice-play { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .voice-play:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); } .voice-wave { height: 32px; cursor: pointer; border-radius: 6px; } .voice-wave:focus-visible { outline: 2px solid var(--focus, var(--link)); outline-offset: 2px; } .voice-time { flex: none; min-width: 2.6em; text-align: right; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--muted); } .voice-speed { flex: none; min-width: 38px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 0.75rem; font-weight: 700; } .voice-transcript { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--raised); } .transcript-label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .transcript-warn { text-transform: none; letter-spacing: 0; font-weight: 600; } .transcript-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.94rem; } .voice-card.text-only .transcript-text { font-size: 1rem; } .transcript-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 0.86rem; font-style: italic; } .spinner { width: 14px; height: 14px; flex: none; border: 2px solid color-mix(in srgb, var(--muted) 35%, transparent); border-top-color: var(--link); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .reduce-motion .spinner { animation-duration: 2.4s; } .mic-btn[hidden], #sendBtn[hidden] { display: none; } /* ---------- 2.27: transcripts for sound files you send ---------- */ .tray-transcript.on { background: var(--accent); color: var(--accent-ink); } .tray-transcript.on:hover { background: var(--accent); filter: brightness(1.08); } .media-audio.with-transcript { width: min(100%, 420px); } /* ---------- 2.28: one player that keeps going when you change chat, and its "now playing" bar ---------- */ .player-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; padding-top: calc(6px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); } .player-bar[hidden] { display: none; } .player-bar:not([hidden]) ~ .pane .pane-head { padding-top: 8px; } .player-play { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .player-play:hover { background: var(--accent); filter: brightness(1.08); } .player-play .icon { width: 16px; height: 16px; } .player-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 2px 4px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; } .player-info:hover { background: var(--hover); } .player-title { display: flex; align-items: center; gap: 6px; max-width: 100%; font-weight: 700; font-size: 0.88rem; } .player-title .icon { width: 15px; height: 15px; flex: none; color: var(--link); } .player-title span, .player-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .player-sub { font-size: 0.76rem; color: var(--muted); } .player-time { flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); } .player-close { flex: none; width: 30px; height: 30px; } .player-close .icon { width: 16px; height: 16px; } .player-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; cursor: pointer; background: color-mix(in srgb, var(--muted) 18%, transparent); } .player-line::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -4px; } /* a bigger target than it looks */ .player-line:focus-visible { outline: 2px solid var(--focus, var(--link)); outline-offset: 1px; } .player-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); } /* the copy above the chat list only shows on phones, where the list and the chat take turns */ .player-bar.side { display: none; } @media (max-width: 760px) { .player-bar.side:not([hidden]) { display: flex; } .player-bar.side:not([hidden]) ~ .side-panel .side-nav { padding-top: 6px; } .player-time { display: none; } } /* sound files in messages: the same play button, a bar to seek, the time */ .audio-main { display: flex; align-items: center; gap: 10px; width: 100%; } .audio-main > .voice-play, .shared-row.audio-row > .voice-play { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .audio-main > .voice-play:hover, .shared-row.audio-row > .voice-play:hover { background: var(--accent); filter: brightness(1.08); } .audio-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .audio-info .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .audio-seek { position: relative; height: 6px; border-radius: 3px; cursor: pointer; background: color-mix(in srgb, var(--muted) 25%, transparent); } .audio-seek::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; } .audio-seek:focus-visible { outline: 2px solid var(--focus, var(--link)); outline-offset: 3px; } .audio-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--accent); } .audio-time { font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--muted); } .shared-row.audio-row > .voice-play { width: 34px; height: 34px; } /* ---------- 2.29: board tags ---------- */ .tag-chip { --tint-c: var(--muted); display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--tint-c) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--tint-c) 14%, var(--surface)); color: var(--ink); font-size: 0.84rem; font-weight: 600; } button.tag-chip { cursor: pointer; } button.tag-chip:hover { background: color-mix(in srgb, var(--tint-c) 24%, var(--surface)); } .tag-chip.on { border-color: var(--tint-c); box-shadow: inset 0 0 0 1px var(--tint-c); background: color-mix(in srgb, var(--tint-c) 30%, var(--surface)); } .tag-chip.all.on { --tint-c: var(--link); } .tag-chip.small { min-height: 24px; padding: 1px 8px; font-size: 0.76rem; gap: 5px; } .tag-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tint-c); } .tag-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-count { font-size: 0.74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } [data-theme="mono"] .tag-chip { --tint-c: var(--muted); } .board-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; } .board-tags-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .board-tags-label .icon { width: 15px; height: 15px; } .card-tags { display: flex; flex-wrap: wrap; gap: 5px; } .tag-picker { display: flex; flex-wrap: wrap; gap: 6px; } .tag-picker:empty { display: none; } .tag-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tag-row > .tag-chip { width: 110px; } .tag-row input { flex: 1 1 140px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); font-size: max(16px, 0.95rem); } .tag-row select { flex: 0 0 auto; } .tag-used { min-width: 4.5em; } /* ---------- 2.30: moving to a new address ---------- */ .move-card { box-shadow: inset 3px 0 0 var(--side-accent), 0 0 0 1px color-mix(in srgb, var(--side-accent) 45%, transparent); } .move-card .btn, .move-bar .btn { text-decoration: none; } .move-bar { border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .move-bar .update-icon { color: var(--accent); } .auth-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 0.9rem; line-height: 1.4; } .auth-note[hidden] { display: none; } .auth-note p { flex: 1; min-width: 0; margin: 0; } .auth-note strong { display: block; margin-bottom: 2px; font-family: var(--display); } .move-note { background: var(--tint); border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); } .move-note > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); } .move-note a { color: var(--link); font-weight: 700; } .welcome-note .icon-btn { flex: none; width: 30px; height: 30px; margin: -4px -4px 0 0; } .welcome-note .icon-btn .icon { width: 16px; height: 16px; }