/* Dark is the default theme; the head script sets data-theme to "dark"/"light". */ :root { color-scheme: dark; --bg: #1e1f22; /* Discord darkest */ --bg-2: #232428; --panel: #2b2d31; /* Discord chat panel */ --panel-2: #313338; --panel-3: #383a40; --border: #3a3c42; --text: #f2f3f5; --muted: #b5bac1; --muted-2: #80848e; --accent: #5865f2; /* Discord blurple */ --accent-hover: #4752c4; --ok: #23a55a; --warn: #f0b232; --danger: #f23f43; --radius: 12px; --radius-sm: 8px; --shadow: 0 2px 10px rgba(0, 0, 0, 0.25); /* Duration of the theme switch — shared by the toggle knob and the global colour cross-fade so they start and finish together (see .theme-anim). */ --theme-anim-dur: 0.3s; /* Heatmap intensity scale (Discord blurple, increasing alpha). */ --heat-0: #2b2d31; --heat-1: rgba(88, 101, 242, 0.32); --heat-2: rgba(88, 101, 242, 0.55); --heat-3: rgba(88, 101, 242, 0.78); --heat-4: #5865f2; /* Theme-specific surfaces that aren't simple palette swaps. */ --topbar-bg: rgba(30, 31, 34, 0.85); --btn-hover: #41434a; --row-hover: rgba(255, 255, 255, 0.04); --tag-fg: #aab1f7; } /* Light theme — overrides only; everything else inherits the dark defaults. */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --bg-2: #ebedf0; --panel: #ffffff; --panel-2: #f4f5f7; --panel-3: #e7e9ec; --border: #d5d8dd; --text: #1a1c1e; --muted: #4a4d54; --muted-2: #6a6e78; --accent: #5865f2; --accent-hover: #4752c4; --ok: #1a8245; --warn: #b8860b; --danger: #d83c3e; --shadow: 0 1px 3px rgba(0, 0, 0, 0.12); --heat-0: #e7e9ec; --heat-1: rgba(88, 101, 242, 0.28); --heat-2: rgba(88, 101, 242, 0.5); --heat-3: rgba(88, 101, 242, 0.72); --heat-4: #5865f2; --topbar-bg: rgba(255, 255, 255, 0.85); --btn-hover: #e4e6ea; --row-hover: rgba(0, 0, 0, 0.04); --tag-fg: #3b43b5; } * { box-sizing: border-box; } /* Theme switch cross-fade. The transition is added ONLY while toggling (JS puts `.theme-anim` on for exactly --theme-anim-dur, then removes it), so it never fires on first paint or on ordinary hover/state changes. `transform` is included so the toggle knob keeps sliding (this !important rule would otherwise clobber its own transition), and at the same duration both finish together. */ :root.theme-anim, :root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after { transition: background-color var(--theme-anim-dur) ease, color var(--theme-anim-dur) ease, border-color var(--theme-anim-dur) ease, fill var(--theme-anim-dur) ease, stroke var(--theme-anim-dur) ease, box-shadow var(--theme-anim-dur) ease, transform var(--theme-anim-dur) ease !important; } @media (prefers-reduced-motion: reduce) { :root.theme-anim, :root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after { transition: none !important; } } /* The `hidden` attribute must always win, even over components that set their own `display` (e.g. .chan-chip, .server-select) — otherwise they'd show while meant to be hidden. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "gg sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1200px 600px at 80% -10%, rgba(88, 101, 242, 0.08), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Topbar ──────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1.5rem; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.1rem; letter-spacing: -0.01em; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(88, 101, 242, 0.45); } .brand-mark svg { width: 18px; height: 18px; } .topbar-right { display: flex; align-items: center; gap: 1.1rem; } .topbar nav { display: flex; align-items: center; gap: 1.1rem; } .topbar nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .topbar nav a:hover { color: var(--text); } .topbar nav a.active { color: var(--text); border-bottom-color: var(--accent); } .topbar .user { color: var(--text); font-weight: 600; font-size: 0.9rem; } .nav-sep { width: 1px; height: 20px; background: var(--border); } /* Animated dark/light toggle (sliding indicator + spinning sun/moon icon). Dark = indicator right + moon; light = indicator left + sun. */ .theme-btn { --tb-w: 50px; --tb-h: 26px; --tb-pad: 3px; --tb-bord: 1px; /* Knob fills the content box exactly (border-box subtracts border + padding), so it stays vertically centred instead of overflowing the bottom. */ --tb-knob: calc(var(--tb-h) - 2 * var(--tb-pad) - 2 * var(--tb-bord)); --tb-travel: calc(var(--tb-w) - var(--tb-knob) - 2 * var(--tb-pad) - 2 * var(--tb-bord)); width: var(--tb-w); height: var(--tb-h); flex: none; display: inline-flex; align-items: center; padding: var(--tb-pad); border: var(--tb-bord) solid var(--border); border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22); cursor: pointer; transition: background var(--theme-anim-dur) ease, border-color var(--theme-anim-dur) ease; } .theme-btn__indicator { width: var(--tb-knob); height: var(--tb-knob); border-radius: 50%; background: var(--panel); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); display: grid; place-items: center; transform: translateX(var(--tb-travel)); /* dark (default): slid to the right */ transition: transform var(--theme-anim-dur) ease, background var(--theme-anim-dur) ease; } :root[data-theme="light"] .theme-btn__indicator { transform: translateX(0); } .theme-btn__icon { display: grid; place-items: center; width: 100%; height: 100%; } .theme-btn__icon svg { width: 13px; height: 13px; } .theme-btn .ic-sun { color: var(--warn); display: none; } .theme-btn .ic-moon { color: var(--accent); display: block; } :root[data-theme="light"] .theme-btn .ic-sun { display: block; } :root[data-theme="light"] .theme-btn .ic-moon { display: none; } .theme-btn.spin .theme-btn__icon { animation: theme-spin 0.5s ease; } @keyframes theme-spin { to { transform: rotate(360deg); } } /* User / settings menu (popover opened from the username). */ .user-menu-wrap { position: relative; } .user-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid transparent; border-radius: 999px; padding: 0.25rem 0.55rem 0.25rem 0.3rem; cursor: pointer; color: var(--text); font: inherit; transition: background 0.15s ease; } .user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--btn-hover); } .user-btn .user { font-weight: 600; font-size: 0.9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-btn .caret { width: 14px; height: 14px; color: var(--muted); transition: transform 0.15s ease; } .user-btn[aria-expanded="true"] .caret { transform: rotate(180deg); } .user-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; object-fit: cover; /* object-fit: only */ } .user-avatar.lg { width: 40px; height: 40px; font-size: 1.05rem; } .user-avatar.sm { width: 24px; height: 24px; font-size: 0.72rem; } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 230px; padding: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); animation: menu-pop 0.14s ease; } @keyframes menu-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .user-menu-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.45rem 0.5rem; } .user-menu-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-sep { height: 1px; background: var(--border); margin: 0.3rem 0; } .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.45rem; } .menu-label { color: var(--muted); font-size: 0.9rem; } .menu-select { flex: 0 1 auto; max-width: 11rem; min-width: 0; text-overflow: ellipsis; background: var(--btn-hover); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.4rem; font: inherit; font-size: 0.85rem; cursor: pointer; } .menu-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Compact on/off switch (settings menu). */ .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } /* Sized to match the dark/light .theme-btn (50×26, 18px knob, 24px travel). */ .switch-track { width: 50px; height: 26px; border-radius: 999px; background: var(--btn-hover); border: 1px solid var(--border); padding: 3px; transition: background 0.18s ease; } .switch-thumb { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.18s ease, background 0.18s ease; } .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(24px); background: #fff; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .menu-form { display: block; margin: 0; } .menu-item { width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); font: inherit; font-size: 0.9rem; padding: 0.5rem 0.45rem; border-radius: var(--radius-sm); } .menu-item:hover { background: var(--btn-hover); } .menu-logout { color: var(--danger); font-weight: 600; } .menu-logout:hover { background: rgba(242, 63, 67, 0.12); } /* Account switcher (in the user menu). */ .account-list { display: flex; flex-direction: column; gap: 2px; } .account-row { margin: 0; display: block; } .account-row.is-active, .account-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.4rem 0.45rem; border-radius: var(--radius-sm); } .account-item { background: none; border: none; cursor: pointer; color: var(--text); font: inherit; text-align: left; } .account-item:hover { background: var(--btn-hover); } .account-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; } .account-row.is-active { background: rgba(88, 101, 242, 0.12); } .account-row.is-active .account-name { font-weight: 700; } .account-active { color: var(--ok); font-size: 0.7rem; } .menu-add { display: block; color: var(--accent); } @media (prefers-reduced-motion: reduce) { .user-menu { animation: none; } } /* Minimal modal: a small dialog centred over a dimmed backdrop. */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; padding: 1rem; animation: fade-in 0.15s ease; } .modal { position: relative; width: auto; max-width: 360px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.3rem 1.1rem; animation: menu-pop 0.15s ease; } .modal-title { margin: 0 0 0.5rem; font-size: 1.1rem; } .modal-body { margin: 0; color: var(--muted); } .modal-actions { margin-top: 1.1rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .modal-x { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; } .modal-x:hover { color: var(--text); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal { animation: none; } } .container { max-width: 1040px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; } .footer { text-align: center; color: var(--muted-2); padding: 2rem; font-size: 0.8rem; } h1 { font-size: 1.55rem; margin: 0; letter-spacing: -0.02em; } h2 { font-size: 1.05rem; margin: 2rem 0 0; color: var(--text); letter-spacing: -0.01em; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; } .small { font-size: 0.95rem; } code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.85em; } /* ── Page head + connection pill ─────────────────────────────────────────── */ .page-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; } .conn-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--muted); } .conn-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } .conn-pill[data-state="loading"] .dot { background: var(--muted-2); animation: pulse-dot 1.4s ease infinite; } .conn-pill[data-state="online"] { color: var(--ok); } .conn-pill[data-state="online"] .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(35, 165, 90, 0.18); } .conn-pill[data-state="connecting"] { color: var(--warn); } .conn-pill[data-state="connecting"] .dot { background: var(--warn); animation: pulse-dot 1.2s ease infinite; } .conn-pill[data-state="offline"] { color: var(--danger); } .conn-pill[data-state="offline"] .dot { background: var(--danger); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── Status cards ────────────────────────────────────────────────────────── */ .status-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .card { display: flex; gap: 0.85rem; align-items: flex-start; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.1rem; box-shadow: var(--shadow); } .card-main { min-width: 0; flex: 1; } .card-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(88, 101, 242, 0.14); color: var(--accent); } .card-icon svg { width: 20px; height: 20px; } .ic-bot { background: rgba(88, 101, 242, 0.14); color: var(--accent); } .ic-collect { background: rgba(35, 165, 90, 0.14); color: var(--ok); } .ic-msgs { background: rgba(240, 178, 50, 0.14); color: var(--warn); } .ic-time { background: rgba(181, 186, 193, 0.14); color: var(--muted); } .card-label { color: var(--muted-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .card-value { font-size: 1.55rem; font-weight: 700; margin: 0.2rem 0; line-height: 1.2; overflow-wrap: anywhere; } .card-value.ok { color: var(--ok); } .card-value.warn { color: var(--warn); } .card-sub { color: var(--muted); font-size: 0.83rem; overflow-wrap: anywhere; } /* ── Buttons + actions ───────────────────────────────────────────────────── */ .actions { display: flex; gap: 0.6rem; margin: 1.1rem 0; flex-wrap: wrap; } .inline { display: inline; margin: 0; } .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel-3); color: var(--text); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease; } .btn:hover { background: var(--btn-hover); border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: #d4373b; border-color: #d4373b; } .btn-discord { background: var(--accent); border-color: var(--accent); color: #fff; margin: 1rem 0; } .btn-discord:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; transition: color 0.15s ease; } .link-btn:hover { color: #7984f5; text-decoration: underline; } .link-btn:disabled { color: var(--muted-2); cursor: not-allowed; text-decoration: none; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; margin-top: 0.85rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table th, .table td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background 0.12s ease; } .table tbody tr:hover { background: var(--row-hover); } .table th { color: var(--muted-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; background: var(--bg-2); } .tag { background: rgba(88, 101, 242, 0.15); border: 1px solid rgba(88, 101, 242, 0.4); color: var(--tag-fg); border-radius: 6px; padding: 0.1rem 0.5rem; font-size: 0.78rem; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; } .chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.75rem; font-size: 0.84rem; color: var(--muted); } /* ── Flashes + banners ───────────────────────────────────────────────────── */ .flashes { list-style: none; padding: 0; margin: 0 0 1rem; } .flash { padding: 0.65rem 0.95rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; border: 1px solid var(--border); font-size: 0.92rem; animation: slide-in 0.25s ease; } .flash-success { background: rgba(35, 165, 90, 0.14); border-color: rgba(35, 165, 90, 0.5); } .flash-error { background: rgba(242, 63, 67, 0.14); border-color: rgba(242, 63, 67, 0.5); } @keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .banner { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.92rem; } .banner-error { background: rgba(242, 63, 67, 0.14); border: 1px solid rgba(242, 63, 67, 0.5); } .empty-state { padding: 1rem 0; } /* ── Login / error card ──────────────────────────────────────────────────── */ .login-card { max-width: 420px; margin: 4rem auto; text-align: center; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; box-shadow: var(--shadow); } .login-card h1 { margin-top: 0; } /* ── Progress bar (live collection progress) ─────────────────────────────── */ .progress-wrap { margin: 0.25rem 0 1.25rem; } .progress { background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; height: 12px; overflow: hidden; } .progress-bar { background: linear-gradient(90deg, var(--accent), #7984f5); height: 100%; width: 0; border-radius: 999px; transition: width 0.4s ease; } #col-label, #stats-label { margin: 0.45rem 0 0; font-size: 0.85rem; } /* ── Statistics layout: Discord-style server rail + main column ──────────── */ .stats-layout { display: flex; gap: 1.25rem; align-items: flex-start; } .stats-main { flex: 1; min-width: 0; } .server-rail { flex: none; width: 68px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.6rem 0.4rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); } .rail-item { position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: var(--panel-3); color: var(--text); display: grid; place-items: center; overflow: visible; transition: border-radius 0.15s ease, background 0.15s ease; } .rail-item img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .rail-fallback { font-size: 0.85rem; font-weight: 700; letter-spacing: -0.02em; } .rail-item:hover { border-radius: 35%; background: var(--accent); color: #fff; } .rail-item.active { border-radius: 35%; } /* Discord-style left "pill" indicator on the active/hovered item. */ .rail-item::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--text); transition: height 0.15s ease; } .rail-item:hover::before { height: 18px; } .rail-item.active::before { height: 30px; background: var(--accent); } .rail-item.active { outline: 2px solid var(--accent); outline-offset: 2px; } .rail-item.needs-bot { background: transparent; border: 2px dashed var(--border); color: var(--muted); } .rail-item.needs-bot:hover { border-color: var(--ok); color: var(--ok); background: rgba(35, 165, 90, 0.12); } .rail-add { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg-2); /* The "+" is drawn from two centred bars (below) rather than a text glyph, so it is geometrically centred regardless of font metrics. Hide the literal "+". */ font-size: 0; color: transparent; } .rail-add::before, .rail-add::after { content: ""; position: absolute; top: 50%; left: 50%; background: #fff; border-radius: 1px; } .rail-add::before { width: 8px; height: 2px; transform: translate(-50%, -50%); } .rail-add::after { width: 2px; height: 8px; transform: translate(-50%, -50%); } .rail-divider { width: 60%; height: 1px; background: var(--border); flex: none; margin: 0.1rem 0; } .rail-item.is-skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; cursor: default; } .rail-msg { color: var(--muted-2); font-size: 1.1rem; } .rail-reconnect { width: 46px; height: 46px; border-radius: 50%; text-decoration: none; display: grid; place-items: center; font-size: 1.3rem; background: var(--panel-3); color: var(--warn); border: 1px solid var(--border); } .rail-reconnect:hover { background: var(--btn-hover); } @media (prefers-reduced-motion: reduce) { .rail-item.is-skeleton { animation: none; } } /* Narrow screens: rail becomes a horizontal strip above the content. */ @media (max-width: 640px) { .stats-layout { flex-direction: column; } .server-rail { flex-direction: row; width: 100%; max-height: none; position: static; overflow-x: auto; overflow-y: hidden; } .rail-divider { width: 1px; height: 36px; } .rail-item::before { display: none; } } /* ── Skeleton loading placeholders ───────────────────────────────────────── */ .skeleton-line { display: inline-block; height: 1em; width: 90px; vertical-align: middle; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .skeleton-line.sm { width: 60px; height: 0.8em; } .skeleton-line.lg { width: 140px; } .card-value .skeleton-line { height: 1.3rem; width: 110px; } .skeleton-row td .skeleton-line { width: 70%; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton-block { display: block; width: 100%; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; } .skeleton-block.chart { height: 200px; } .skeleton-block.heat { height: 140px; } /* Refreshing: a moving sheen over a widget's data region while it reloads. The previous data stays visible (slightly dimmed) until the new data replaces it. */ .is-refreshing { position: relative; } .is-refreshing > * { opacity: 0.6; transition: opacity 0.15s ease; } .is-refreshing::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgba(88, 101, 242, 0.18) 50%, transparent 65%); background-size: 220% 100%; animation: refresh-sweep 1.1s ease-in-out infinite; } @keyframes refresh-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-line, .skeleton-block, .conn-pill .dot, .progress-bar, .theme-btn__indicator, .theme-btn.spin .theme-btn__icon { animation: none; transition: none; } .is-refreshing::after { animation: none; background: rgba(88, 101, 242, 0.12); } } /* ── Analytics (statistics page widgets) ─────────────────────────────────── */ .analytics-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .analytics-head h2 { margin: 0; } .analytics-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* Active channel-filter chip (click to clear). */ .chan-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.3rem 0.2rem 0.6rem; border: 1px solid var(--accent); border-radius: 999px; background: rgba(88, 101, 242, 0.15); color: var(--tag-fg); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .chan-chip:hover { background: rgba(88, 101, 242, 0.28); } .chan-chip-x { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: rgba(88, 101, 242, 0.3); font-size: 0.9rem; line-height: 1; } /* Segmented controls (bot toggle + range/period pickers) */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; } .seg-btn { border: none; background: none; color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.32rem 0.8rem; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--accent); color: #fff; } .seg-3 .seg-btn.active { background: var(--accent); } .widget { display: block; margin-top: 1rem; } .widget-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .widget-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; } .widget-hint { color: var(--muted-2); font-size: 0.82rem; font-weight: 600; } .clear-pins { font-size: 0.82rem; font-weight: 600; } .widget-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .widget-msg { text-align: center; padding: 2rem 0; margin: 0; } .navctl { display: inline-flex; align-items: center; gap: 0.4rem; } .navlabel { font-size: 0.85rem; font-weight: 600; min-width: 5.5rem; text-align: center; } .iconbtn { border: 1px solid var(--border); background: var(--panel-3); color: var(--text); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; display: grid; place-items: center; transition: border-color 0.15s ease, background 0.15s ease; } .iconbtn:hover { border-color: var(--accent); background: var(--btn-hover); } .iconbtn:disabled { opacity: 0.4; cursor: not-allowed; } .iconbtn:disabled:hover { border-color: var(--border); background: var(--panel-3); } /* Heatmap */ #w-heatmap, #w-activity { position: relative; } .heatmap-wrap { overflow-x: auto; padding-bottom: 0.25rem; } /* Instant hover tooltip (message count + date), positioned at the cursor. */ .heat-tip { position: absolute; transform: translate(-50%, -135%); pointer-events: none; z-index: 10; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 0.3rem 0.55rem; font-size: 0.8rem; white-space: nowrap; box-shadow: var(--shadow); } .heat-tip strong { color: var(--accent); } .heat-tip-day { display: block; color: var(--muted-2); font-size: 0.72rem; } .heat-grid { display: grid; gap: 3px; } .heat-grid.year { grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; } .heat-grid.month { grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 360px; } .heat-cell { border-radius: 3px; background: var(--heat-0); aspect-ratio: 1 / 1; min-width: 11px; } .heat-grid.month .heat-cell { aspect-ratio: auto; min-height: 38px; border-radius: 6px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px 5px; font-size: 0.72rem; color: var(--muted); } .heat-cell.blank { background: transparent; } .heat-cell.l0 { background: var(--heat-0); } .heat-cell.l1 { background: var(--heat-1); } .heat-cell.l2 { background: var(--heat-2); } .heat-cell.l3 { background: var(--heat-3); } .heat-cell.l4 { background: var(--heat-4); } .heat-cell:not(.blank):hover { outline: 2px solid var(--text); outline-offset: 0; } .heat-dow { font-size: 0.72rem; color: var(--muted-2); text-align: center; font-weight: 600; padding-bottom: 0.2rem; } .heat-legend { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; font-size: 0.78rem; justify-content: flex-end; } .heat-legend .heat-cell { width: 13px; height: 13px; min-width: 13px; } /* Tiny caption explaining the scale (what the darkest square means). */ .heat-caption { margin: 0.4rem 0 0; font-size: 0.72rem; text-align: right; } /* Activity SVG chart */ .chart-wrap { width: 100%; } svg.chart { width: 100%; height: auto; display: block; } .chart-axis { stroke: var(--border); stroke-width: 1; } .chart-area { fill: rgba(88, 101, 242, 0.18); } .chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } /* Fill only — no stroke, so the closed polygon's baseline edge doesn't leave a stray line/dot along the bottom of the chart. */ .chart-overlay-area { fill: rgba(240, 178, 50, 0.5); stroke: none; } /* Transient hover preview line (a non-pinned user); dashed + neutral. */ .chart-hover-line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; stroke-linecap: round; } .chart-xlabel { fill: var(--muted-2); font-size: 11px; text-anchor: middle; } .chart-ylabel { fill: var(--muted-2); font-size: 11px; } .chart rect:hover { fill: var(--row-hover); } .chart.drillable rect { cursor: pointer; } /* click a bucket to zoom in */ .overlay-label { min-height: 1.2rem; margin: 0.6rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--warn); } /* Average-profile waves (typical day / typical week) — two cards side by side, stacking on narrow viewports. Position:relative so the cursor tooltip anchors. */ .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; } } .profile-grid .widget { margin-top: 1rem; } #w-profile-day, #w-profile-week { position: relative; } /* Smoothed "wave" curve — softer fill + rounded line than the activity chart. */ .chart-wave-area { fill: rgba(88, 101, 242, 0.14); stroke: none; } .chart-wave-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart-wsep { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; } .chart-peak { fill: var(--accent); } /* Greyed-out box when the selected range is too short to average over. */ .widget.is-disabled { opacity: 0.55; } .widget.is-disabled .widget-hint { visibility: hidden; } /* Top users list */ .toplist { list-style: none; margin: 0; padding: 0; } .toplist-row { /* Fixed bar + count columns so every row's tracks line up — a long (e.g. 7-digit) count must not widen the count cell and shove the bar around. */ display: grid; grid-template-columns: 1.6rem 1fr 5.5rem 6rem; align-items: center; gap: 0.75rem; padding: 0.45rem 0.5rem; border-radius: var(--radius-sm); transition: background 0.12s ease; } .toplist-row:not(.is-skeleton):hover { background: rgba(88, 101, 242, 0.12); cursor: default; } .toplist-clickable .toplist-row:not(.is-skeleton) { cursor: pointer; } .toplist-row.active { background: rgba(88, 101, 242, 0.16); box-shadow: inset 2px 0 0 var(--accent); } /* Excluded from the graphics (right-click): greyed + struck-through so it reads as "not counted", but it stays listed and clickable to re-include it. Overrides the pinned highlight (the two can't co-occur — excluding unpins). */ .toplist-row.excluded { opacity: 0.42; background: none; box-shadow: none; } .toplist-row.excluded:hover { opacity: 0.7; background: var(--row-hover); } .toplist-row.excluded .toplist-name { text-decoration: line-through; } .toplist-row.excluded .toplist-bar span { background: var(--muted-2); } /* Pinned user: a static highlight in that user's graph colour (tint + left bar), set via inline --pin-line / --pin-tint custom props. */ .toplist-row.pinned { position: relative; overflow: hidden; background: var(--pin-tint); box-shadow: inset 3px 0 0 var(--pin-line); } .toplist-row.pinned:hover { background: var(--pin-tint); } /* Animated sweep ONLY while that user's data is loading; once loaded the row keeps its solid colour with no animation. */ .toplist-row.pin-loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, var(--pin-line) 50%, transparent 62%); opacity: 0.22; background-size: 220% 100%; animation: refresh-sweep 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .toplist-row.pin-loading::after { animation: none; opacity: 0.12; } } /* Exclusion pending: the row was toggled but the (debounced) graph refresh hasn't landed yet → an animated sweep makes clear the change isn't applied. Excluded rows are dimmed, so lift them a bit while pending so the sweep stays visible. */ .toplist-row.excl-pending { position: relative; overflow: hidden; } .toplist-row.excluded.excl-pending { opacity: 0.72; } .toplist-row.excl-pending::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, var(--accent) 50%, transparent 62%); opacity: 0.22; background-size: 220% 100%; animation: refresh-sweep 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .toplist-row.excl-pending::after { animation: none; opacity: 0.12; } } .toplist .rank { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--panel-3); color: var(--muted); font-size: 0.8rem; font-weight: 700; } .toplist-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toplist-bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; } .toplist-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #7984f5); } .toplist-count { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; } .toplist-empty { padding: 1.5rem 0; text-align: center; } /* ── Word usage widget ─────────────────────────────────────────────────────── The word list reuses .toplist but adds a trailing column for the unobtrusive "add to filter" (+) button, shown only on row hover. */ .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; } #top-words .toplist-row { grid-template-columns: 1.6rem 1fr 5.5rem 6rem 1.5rem; } .word-hide { /* "Hide word" (struck-through eye). Unobtrusive: invisible until the row (or the button) is hovered/focused. */ border: 0; background: transparent; color: var(--muted-2); line-height: 1; cursor: pointer; padding: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; justify-self: end; opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease; } .word-hide svg { width: 15px; height: 15px; } .toplist-row:hover .word-hide, .word-hide:focus-visible { opacity: 1; } .word-hide:hover { background: var(--btn-hover); color: var(--text); } /* Rebuild indicator (indeterminate — the aggregate rebuild has no percentage). */ .word-rebuilding { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem; } .word-rebuild-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); animation: word-rebuild-pulse 1s ease-in-out infinite; } @keyframes word-rebuild-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .word-rebuild-dot { animation: none; } } /* Small inline info icon (e.g. "no words but there are messages" hint). The explanation is a custom CSS tooltip from `data-tip` — native `title` tooltips are unreliable on inline spans/SVG (esp. Safari). Shows on hover and focus. */ .info-hint { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.3rem; color: var(--muted-2); cursor: help; } .info-hint svg { width: 15px; height: 15px; display: block; } .info-hint:hover, .info-hint:focus-visible { color: var(--accent); outline: none; } .info-hint::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem; font-size: 0.8rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none; z-index: 40; } .info-hint:hover::after, .info-hint:focus-visible::after { opacity: 1; visibility: visible; } /* Collapsible filter (excluded stop-words). Collapsed by default. */ .word-filter { margin: 0.2rem 0 0.6rem; } .word-filter-toggle { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0.3rem 0.2rem; font-size: 0.85rem; font-weight: 600; } .word-filter-toggle:hover { color: var(--text); } .word-filter-caret { display: inline-block; transition: transform 0.15s ease; } .word-filter-toggle.open .word-filter-caret { transform: rotate(90deg); } .word-filter-count { color: var(--muted-2); font-weight: 600; } .word-filter-body { padding: 0.2rem 0.2rem 0.4rem; } .word-filter-empty { font-size: 0.85rem; margin: 0.2rem 0; } .word-filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .word-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel-3); color: var(--text); border-radius: 999px; padding: 0.18rem 0.4rem 0.18rem 0.6rem; font-size: 0.82rem; } .word-chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; } .word-chip-x:hover { color: var(--text); background: var(--btn-hover); } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .topbar { padding: 0.6rem 1rem; flex-wrap: wrap; gap: 0.5rem; } .topbar nav { gap: 0.8rem; flex-wrap: wrap; } .container { padding: 1.25rem 1rem 2.5rem; } .table { font-size: 0.88rem; } .table th, .table td { padding: 0.5rem 0.55rem; } } /* ── Toasts ────────────────────────────────────────────────────────────────── Reusable notification system (see initToasts in app.js). Fixed top-right, stacks up to 3 with the newest on top. Per-toast accent (info=blurple, success=green, warning=orange, error=red), optional icon / countdown bar / pause-on-hover. Surfaces use theme tokens so both themes stay correct. */ .toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.6rem; width: min(360px, calc(100vw - 2rem)); pointer-events: none; /* clicks pass through the gaps; each toast re-enables it */ } .toast { --toast-accent: var(--accent); position: relative; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--toast-accent); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; pointer-events: auto; opacity: 0; transform: translateX(14px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.is-in { opacity: 1; transform: none; } .toast.is-leaving { opacity: 0; transform: translateX(14px); } .toast.is-bump { animation: toast-bump 0.3s ease; } .toast-info { --toast-accent: var(--accent); } .toast-success { --toast-accent: var(--ok); } .toast-warning { --toast-accent: #f0883e; } .toast-error { --toast-accent: var(--danger); } .toast-icon { flex: 0 0 auto; display: inline-flex; color: var(--toast-accent); margin-top: 1px; } .toast-icon svg { width: 18px; height: 18px; } .toast-msg { flex: 1 1 auto; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; } .toast-close { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; border-radius: 4px; } .toast-close:hover { color: var(--text); background: var(--btn-hover); } .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); transform-origin: left; animation: toast-progress var(--toast-dur, 4000ms) linear forwards; } .toast.is-paused .toast-progress { animation-play-state: paused; } @keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes toast-bump { 0% { transform: none; } 30% { transform: scale(1.03); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.15s ease; transform: none; } .toast.is-in, .toast.is-leaving { transform: none; } .toast-progress { animation: none; } .toast.is-bump { animation: none; } } @media (max-width: 480px) { .toast-stack { left: 1rem; right: 1rem; width: auto; } } /* ── Manual-setup gate + channel-access lists (statistics) ──────────────────── */ .setup-panel { margin-top: 1rem; padding: 1.25rem 1.4rem; } .setup-head { display: flex; gap: 0.9rem; align-items: flex-start; } .setup-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; background: rgba(240, 178, 50, 0.14); color: var(--warn); } .setup-icon svg { width: 20px; height: 20px; } .setup-head-text h2 { margin: 0 0 0.25rem; font-size: 1.1rem; } .setup-head-text p { margin: 0; max-width: 64ch; } .setup-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.1rem 0 0.4rem; } .setup-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.9rem; } @media (max-width: 720px) { .setup-lists { grid-template-columns: 1fr; } } .setup-col { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; } /* Subtle danger accent for the "no access" column — present but not loud. */ .setup-col.is-no-access { border-color: rgba(242, 63, 67, 0.35); background: rgba(242, 63, 67, 0.05); } .setup-col-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: nowrap; font-size: 0.85rem; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.6rem; white-space: nowrap; } .setup-count { color: var(--muted-2); font-weight: 600; white-space: nowrap; } .setup-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .setup-dot.ok { background: var(--ok); } .setup-dot.danger { background: var(--danger); } /* Channel pill lists (setup panel + the bottom "no access" widget). */ .chan-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .chan-pill { font-size: 0.82rem; padding: 0.2rem 0.6rem; border-radius: 999px; max-width: 100%; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chan-pill.no-access { color: var(--danger); background: rgba(242, 63, 67, 0.08); border-color: rgba(242, 63, 67, 0.35); } /* Accessible but not yet scanned (e.g. access just granted) — a dashed outline hints "will be picked up", without the loud danger styling. */ .chan-pill.pending { border-style: dashed; color: var(--muted); } .chan-pills-empty { font-size: 0.85rem; padding: 0.1rem 0; } /* Bottom "no access" widget — a subtle danger accent on an ordinary card. */ .noaccess-widget { border-color: rgba(242, 63, 67, 0.3); } .noaccess-widget .widget-head h3 { color: var(--danger); } .noaccess-hint { margin: 0 0 0.7rem; font-size: 0.85rem; } /* Add-bot choice dialog (automatic vs manual). */ .invite-modal { max-width: 460px; } .invite-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .invite-option { text-align: left; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); transition: border-color 0.15s ease, background 0.15s ease; } .invite-option:hover { border-color: var(--accent); background: var(--btn-hover); } .invite-option-title { font-weight: 700; } .invite-option-desc { font-size: 0.85rem; color: var(--muted); }