/* Banners of Iron Bot — dashboard design system. Dark "iron" theme by default, light theme via [data-theme="light"] on . */ /* ------------------------------------------------------------------------------------------ */ /* Tokens */ /* ------------------------------------------------------------------------------------------ */ :root { color-scheme: dark; --bg: #0e1013; --bg-elev: #13161a; --panel: #171a1f; --panel-2: #1d2127; --panel-3: #252a31; --border: #272c33; --border-strong: #363c45; --text: #e6e8eb; --text-muted: #9aa1ab; --text-faint: #6c737e; --accent: #c9a227; --accent-hover: #d9b441; --accent-text: #dcba4f; --accent-soft: rgba(201, 162, 39, 0.13); --accent-contrast: #17130a; --danger: #e5534b; --danger-soft: rgba(229, 83, 75, 0.14); --warning: #e0a043; --warning-soft: rgba(224, 160, 67, 0.14); --success: #3fb67f; --success-soft: rgba(63, 182, 127, 0.14); --info: #5d9fe0; --info-soft: rgba(93, 159, 224, 0.14); --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4); --focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.42); --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; --mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --sidebar-width: 256px; --transition: 150ms ease; --discord-bg: #313338; --discord-text: #dbdee1; --discord-muted: #949ba4; --discord-embed: #2b2d31; --discord-link: #00a8fc; --discord-code: #1e1f22; } [data-theme="light"] { color-scheme: light; --bg: #f3f1ec; --bg-elev: #faf9f6; --panel: #ffffff; --panel-2: #f6f4ef; --panel-3: #ece9e2; --border: #e4e0d7; --border-strong: #d2cdc2; --text: #1c1f24; --text-muted: #59606b; --text-faint: #898f99; --accent: #c9a227; --accent-hover: #b7921c; --accent-text: #86690c; --accent-soft: rgba(201, 162, 39, 0.16); --accent-contrast: #1a1506; --danger: #c63a32; --danger-soft: rgba(198, 58, 50, 0.1); --warning: #a86d12; --warning-soft: rgba(214, 145, 38, 0.14); --success: #1f8456; --success-soft: rgba(31, 132, 86, 0.11); --info: #2c6cb0; --info-soft: rgba(44, 108, 176, 0.1); --shadow: 0 1px 2px rgba(28, 31, 36, 0.06), 0 10px 28px -16px rgba(28, 31, 36, 0.2); --shadow-lg: 0 28px 70px -24px rgba(28, 31, 36, 0.35), 0 2px 8px rgba(28, 31, 36, 0.08); --focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.38); --discord-bg: #ffffff; --discord-text: #313338; --discord-muted: #5c5e66; --discord-embed: #f2f3f5; --discord-link: #006ce7; --discord-code: #ebedef; } /* ------------------------------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } html, body { margin: 0; min-height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.25; } p { margin: 0 0 0.75em; } p:last-child { margin-bottom: 0; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } img { max-width: 100%; } code, kbd, pre, samp { font-family: var(--mono); font-size: 0.92em; } ul, ol { margin: 0; padding-left: 1.3em; } button { font: inherit; color: inherit; } ::selection { background: rgba(201, 162, 39, 0.34); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 8px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); font-weight: 600; transform: translateY(-160%); transition: transform var(--transition); } .skip-link:focus { transform: none; text-decoration: none; } .boot-splash { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 20px; } .boot-logo { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(201, 162, 39, 0.25)); } .noscript { position: fixed; inset: auto 16px 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--danger-soft); border: 1px solid var(--danger); color: var(--text); text-align: center; } /* ------------------------------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------------------------------ */ .app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg-elev); border-right: 1px solid var(--border); z-index: 30; } .sidebar-top { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; } .brand:hover { text-decoration: none; } .brand-logo { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)); } .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .brand-name { font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; } .brand-sub { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; } .demo-badge { font-size: 10.5px; padding: 1px 7px; } .sidebar .menu-button { display: none; margin-left: auto; font-size: 18px; } @media (max-width: 899.98px) { .sidebar .menu-button { display: inline-flex; } } .sidebar-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } .nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; } .nav-group + .nav-group { margin-top: 14px; } .nav-group-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin: 1px 0; border-radius: 8px; color: var(--text-muted); font-weight: 520; transition: background var(--transition), color var(--transition); } .nav-item:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .nav-icon { width: 22px; flex: none; text-align: center; font-size: 16px; line-height: 1; } .sidebar-footer { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--border); } .bot-status { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); } .bot-status-text { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.3; } .bot-status-title { font-weight: 600; color: var(--text); } .bot-status-sub { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-dot { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--text-faint); } .status-dot.is-online { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); } .status-dot.is-online::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--success); opacity: 0; animation: status-ping 2.4s ease-out infinite; } .status-dot.is-demo { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); } .status-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); } .status-dot.is-error { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } @keyframes status-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.9); opacity: 0; } } /* Who is logged in (sidebar footer) */ .actor-slot:empty { display: none; } .actor { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); } .actor-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; background: var(--panel-3); } .actor-avatar.is-fallback { display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); } .actor-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .actor-name { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .actor-role { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .actor-logout { margin-left: auto; flex: none; } .forbidden-view .error-icon { color: var(--warning); } .sidebar-controls { display: flex; align-items: center; gap: 6px; } .segmented { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); } .segmented button { border: 0; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 6px; cursor: pointer; transition: background var(--transition), color var(--transition); } .segmented button:hover { color: var(--text); } .segmented button[aria-pressed="true"] { background: var(--panel-3); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .main { min-width: 0; padding: 30px 36px 56px; } .main:focus { outline: none; } .page { max-width: 1240px; margin: 0 auto; } .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 24px; } .page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .page-subtitle { margin-top: 4px; color: var(--text-muted); font-size: 14px; } .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .page-body { display: flex; flex-direction: column; gap: 20px; } /* ------------------------------------------------------------------------------------------ */ /* Containers */ /* ------------------------------------------------------------------------------------------ */ .card { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card:not(:has(> .card-header, > .card-body, > .card-footer)) { padding: 18px 20px; } .card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); } .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; } .card-subtitle { font-size: 13px; color: var(--text-muted); } .card-body { flex: 1; min-width: 0; padding: 18px 20px; } .card-body.flush { padding: 0; } .card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: color-mix(in srgb, var(--panel-2) 55%, transparent); } .grid, .grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; min-width: 0; } .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1180px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } .stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .stack-sm { gap: 8px; } .stack-lg { gap: 22px; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .spacer { flex: 1 1 auto; } .divider { height: 1px; margin: 16px 0; border: 0; background: var(--border); } /* ------------------------------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font-size: 13.5px; font-weight: 560; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform 80ms ease; } .btn:hover { background: var(--panel-3); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn.is-busy { cursor: progress; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.3); } .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: color-mix(in srgb, var(--danger) 88%, #fff); border-color: color-mix(in srgb, var(--danger) 88%, #fff); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--panel-2); color: var(--text); } .btn-sm { height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; } .btn-icon { width: 36px; padding: 0; font-size: 16px; } .btn-icon.btn-sm { width: 30px; font-size: 14.5px; } .btn .spinner { width: 14px; height: 14px; border-width: 2px; } /* ------------------------------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field > label, .field-label { font-size: 13px; font-weight: 600; color: var(--text); } .hint { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .input-group { display: flex; align-items: stretch; gap: 8px; } .input-group > input, .input-group > select, .input-group > textarea, .input-group > .picker-wrap { flex: 1 1 auto; min-width: 0; } :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea) { width: 100%; min-height: 36px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px; line-height: 1.4; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea):hover { border-color: color-mix(in srgb, var(--border-strong) 55%, var(--text-faint)); } :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--panel); } :where(input, select, textarea):disabled { opacity: 0.6; cursor: not-allowed; } :where(input, textarea)::placeholder { color: var(--text-faint); } :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); } textarea { min-height: 96px; resize: vertical; line-height: 1.5; } select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa1ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; } select[multiple], select[size] { min-height: 120px; padding-right: 11px; background-image: none; } option, optgroup { background: var(--panel); color: var(--text); } input[type="color"] { width: 44px; height: 36px; padding: 3px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel-2); cursor: pointer; } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; } input[type="range"] { accent-color: var(--accent); } .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 14px; } .switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .switch .slider { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--border-strong); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .switch .slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 160ms ease, background var(--transition); } .switch:hover .slider { border-color: var(--text-faint); } .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } .switch input:checked + .slider::after { transform: translateX(16px); background: #fff; } .switch input:focus-visible + .slider { box-shadow: var(--focus-ring); } .switch:has(input:disabled) { opacity: 0.55; cursor: not-allowed; } .checkbox-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); } .checkbox-list label { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; } .checkbox-list label:hover { background: var(--panel-3); } /* ------------------------------------------------------------------------------------------ */ /* Tables */ /* ------------------------------------------------------------------------------------------ */ .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .card > .table-wrap, .card-body.flush > .table-wrap { border: 0; border-radius: 0; background: transparent; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; background: var(--panel-2); border-bottom: 1px solid var(--border); } .table td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--border); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); } .table td.actions, .table th.actions { text-align: right; white-space: nowrap; } /* ------------------------------------------------------------------------------------------ */ /* Feedback */ /* ------------------------------------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: var(--panel-3); color: var(--text-muted); font-size: 11.5px; font-weight: 650; line-height: 1.5; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle; } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-muted { background: var(--panel-3); color: var(--text-muted); } .badge-accent { background: var(--accent-soft); color: var(--accent-text); } .alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 14px; line-height: 1.5; } .alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); } .alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); } .alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); } .alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .alert-icon { flex: none; font-size: 16px; line-height: 1.45; } .alert-body { flex: 1; min-width: 0; } .alert-title { font-weight: 650; margin-bottom: 2px; } .spinner { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); vertical-align: middle; animation: spin 0.8s linear infinite; } .spinner-sm { width: 14px; height: 14px; border-width: 2px; } .btn-primary .spinner { border-color: rgba(0, 0, 0, 0.2); border-top-color: var(--accent-contrast); } .btn-danger .spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; } .btn-icon.is-busy { font-size: 0; } @keyframes spin { to { transform: rotate(360deg); } } .loading-block { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; color: var(--text-muted); } .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 20px; text-align: center; color: var(--text-muted); } .empty-icon { font-size: 30px; line-height: 1; } .empty-text { max-width: 440px; margin: 0; font-size: 14px; } .skeleton { position: relative; overflow: hidden; min-height: 12px; border-radius: 6px; background: var(--panel-2); } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent); animation: shimmer 1.4s ease-in-out infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .skeleton-text { height: 12px; margin: 8px 0; } .skeleton-title { height: 22px; width: 38%; } .skeleton-card { height: 128px; border-radius: var(--radius-lg); } /* ------------------------------------------------------------------------------------------ */ /* Text utilities */ /* ------------------------------------------------------------------------------------------ */ .muted { color: var(--text-muted); } .small { font-size: 12.5px; } .mono { font-family: var(--mono); font-size: 0.92em; } .nowrap { white-space: nowrap; } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-accent { color: var(--accent-text); } .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------------------------------ */ /* Misc components */ /* ------------------------------------------------------------------------------------------ */ .tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; } .tab { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 560; white-space: nowrap; cursor: pointer; transition: color var(--transition), background var(--transition); } .tab:hover { color: var(--text); background: var(--panel-2); text-decoration: none; } .tab.active, .tab[aria-selected="true"] { color: var(--text); } .tab.active::after, .tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); } .avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; object-fit: cover; background: var(--panel-3); color: var(--text-muted); font-size: 14px; font-weight: 700; } .avatar-sm { width: 24px; height: 24px; font-size: 10px; } .avatar-lg { width: 56px; height: 56px; font-size: 19px; } .stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card .stat { padding: 0; background: transparent; border: 0; box-shadow: none; } .stat-label { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .stat-value { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat-sub { font-size: 12.5px; color: var(--text-muted); } .list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .list-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--border); color: inherit; } .list-item:last-child { border-bottom: 0; } .card-body.flush .list-item { padding: 12px 20px; } a.list-item:hover { background: var(--panel-2); text-decoration: none; } .kbd, kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--panel-2); color: var(--text-muted); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; } .tree { display: flex; flex-direction: column; gap: 2px; } .tree-category { padding: 12px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .tree-channel { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px 6px 22px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; } .tree-channel:hover { background: var(--panel-2); } .color-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--text-faint)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); vertical-align: middle; } /* ------------------------------------------------------------------------------------------ */ /* Discord preview */ /* ------------------------------------------------------------------------------------------ */ .discord-preview { padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--discord-bg); color: var(--discord-text); font-size: 15px; line-height: 1.375; overflow-wrap: anywhere; } .discord-preview a { color: var(--discord-link); } .embed { position: relative; display: grid; gap: 8px; max-width: 520px; margin-top: 6px; padding: 10px 16px 14px 14px; border-left: 4px solid var(--embed-color, #1e1f22); border-radius: 4px; background: var(--discord-embed); } .embed-bar { position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; border-radius: 4px 0 0 4px; background: var(--embed-color, var(--accent)); } .embed-title { font-size: 16px; font-weight: 700; color: var(--discord-text); } a.embed-title, .embed-title a { color: var(--discord-link); } .embed-desc { font-size: 14px; color: var(--discord-text); } .embed-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; } .embed-field { grid-column: 1 / -1; min-width: 0; font-size: 14px; } .embed-field.inline { grid-column: auto; } .embed-field-name { font-weight: 700; } .embed-image img, img.embed-image { display: block; max-width: 100%; max-height: 300px; margin-top: 4px; border-radius: 4px; } .embed-footer { font-size: 12px; color: var(--discord-muted); } /* ------------------------------------------------------------------------------------------ */ /* Rendered markdown (ui.js renderMarkdown) */ /* ------------------------------------------------------------------------------------------ */ .md-p { margin: 0 0 0.55em; } .md-p:last-child { margin-bottom: 0; } .md-h1, .md-h2, .md-h3 { margin: 0.7em 0 0.3em; font-weight: 700; } .md-h1 { font-size: 1.35em; } .md-h2 { font-size: 1.18em; } .md-h3 { font-size: 1.04em; } :is(.md-h1, .md-h2, .md-h3):first-child { margin-top: 0; } .md-code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--panel-3); font-size: 0.88em; } .md-codeblock { margin: 0.5em 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 12.5px; line-height: 1.5; white-space: pre; } .md-codeblock code { font-size: inherit; } .md-quote { margin: 0.4em 0; padding: 1px 0 1px 12px; border-left: 3px solid var(--border-strong); } .md-list { margin: 0.3em 0 0.55em; padding-left: 1.4em; } .md-list li { margin: 0.15em 0; } .md-list .md-list { margin: 0.1em 0; } .md-subtext { font-size: 0.82em; color: var(--text-muted); } .md-spoiler { border-radius: 3px; background: var(--panel-3); color: transparent; cursor: pointer; transition: color var(--transition); } .md-spoiler:hover { color: inherit; } .md-link { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 45%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; } .md-time { padding: 0 4px; border-radius: 3px; background: var(--panel-3); } .discord-preview .md-code, .discord-preview .md-time { background: var(--discord-code); } .discord-preview .md-codeblock { background: var(--discord-code); border-color: transparent; } .discord-preview .md-link { color: var(--discord-link); text-decoration: none; } .discord-preview .md-quote { border-left-color: #4e5058; } .discord-preview .md-subtext { color: var(--discord-muted); } /* ------------------------------------------------------------------------------------------ */ /* Toasts */ /* ------------------------------------------------------------------------------------------ */ .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toasts[popover] { inset: auto 16px 16px auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); border-left: 3px solid var(--info); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.45; pointer-events: auto; animation: toast-in 0.22s ease-out; } .toast-success { border-left-color: var(--success); } .toast-warning { border-left-color: var(--warning); } .toast-danger { border-left-color: var(--danger); } .toast-icon { flex: none; line-height: 1.45; } .toast-message { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; } .toast-close { flex: none; padding: 1px 6px; border: 0; border-radius: 5px; background: transparent; color: var(--text-faint); font-size: 17px; line-height: 1.2; cursor: pointer; } .toast-close:hover { background: var(--panel-2); color: var(--text); } .toast.is-leaving { animation: toast-out 0.18s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } } @keyframes toast-out { to { opacity: 0; transform: translateX(16px); } } /* ------------------------------------------------------------------------------------------ */ /* Modal dialogs */ /* ------------------------------------------------------------------------------------------ */ dialog.modal { display: flex; flex-direction: column; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); } dialog.modal:not([open]) { display: none; } dialog.modal.modal-wide { width: min(880px, calc(100vw - 32px)); } dialog.modal[open] { animation: modal-in 0.18s ease-out; } dialog.modal::backdrop { background: rgba(6, 7, 9, 0.62); backdrop-filter: blur(3px); animation: fade-in 0.18s ease-out; } [data-theme="light"] dialog.modal::backdrop { background: rgba(28, 31, 36, 0.35); } .modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--border); } .modal-title { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 650; } .modal-body { flex: 1 1 auto; min-height: 0; padding: 18px 20px; overflow-y: auto; } .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--panel-2) 55%, transparent); } .modal-message { margin: 0; white-space: pre-line; } /* Browsers without .showModal(): centre the fallback dialog above the page. */ dialog.modal.is-fallback { position: fixed; top: 50%; left: 50%; z-index: 1200; transform: translate(-50%, -50%); } @media (pointer: coarse) { .modal-close { width: 38px; height: 38px; } } @media (max-width: 560px) { dialog.modal, dialog.modal.modal-wide { width: calc(100vw - 16px); max-height: calc(100vh - 24px); } .modal-footer .btn { flex: 1 1 auto; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } } /* Member picker (ui.js memberPicker) */ .picker-list { position: fixed; z-index: 1100; max-height: 280px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-lg); } .picker-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 9px; border-radius: 7px; cursor: pointer; } .picker-item.is-active { background: var(--accent-soft); } .picker-names { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; } .picker-name, .picker-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-name { font-size: 13.5px; font-weight: 600; } .picker-sub { font-size: 12px; color: var(--text-muted); } .picker-status { padding: 9px 10px; color: var(--text-muted); font-size: 13px; } /* ------------------------------------------------------------------------------------------ */ /* Login screen and page states */ /* ------------------------------------------------------------------------------------------ */ .login-screen { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(900px 520px at 50% -12%, rgba(201, 162, 39, 0.13), transparent 70%), repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--text) 1.6%, transparent) 22px 23px), var(--bg); } .login-card { width: min(400px, 100%); padding: 32px 30px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-lg); } .login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; text-align: center; } .login-logo { width: 72px; height: 72px; filter: drop-shadow(0 8px 22px rgba(201, 162, 39, 0.28)); } .login-title { font-size: 21px; font-weight: 700; } .login-sub { color: var(--text-muted); font-size: 14px; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-form .btn-primary { width: 100%; height: 40px; } .login-alert { margin-bottom: 18px; } /* Sign in with Discord — the main way in; the password form below is the owner's fallback. */ .login-discord { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border: 0; border-radius: var(--radius); background: #5865f2; color: #ffffff; font-size: 15px; font-weight: 650; } .login-discord:hover, .login-discord:focus-visible { background: #4752c4; color: #ffffff; text-decoration: none; } .login-discord-icon { font-size: 18px; line-height: 1; } .login-hint { margin: 8px 0 0; text-align: center; } .login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-footer { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .error-view { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: 8vh auto 0; text-align: center; } .error-icon { font-size: 40px; line-height: 1; } .error-title { font-size: 20px; font-weight: 700; } .error-detail { max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text-muted); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; } .page { animation: page-in 0.2s ease-out; } @keyframes page-in { from { opacity: 0; } } .page-loading { display: flex; flex-direction: column; gap: 16px; } /* ------------------------------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------------------------------ */ @media (max-width: 899.98px) { .app { display: block; } .sidebar { position: sticky; top: 0; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(10px); } .sidebar-top { padding: 10px 14px; } .brand-logo { width: 32px; height: 32px; } .sidebar-panel { display: none; max-height: calc(100vh - 56px); overflow-y: auto; border-top: 1px solid var(--border); } .sidebar.is-open .sidebar-panel { display: flex; } .nav { overflow: visible; padding: 8px 12px; } .main { padding: 20px 16px 48px; } .page-title { font-size: 21px; } } @media (max-width: 560px) { .page-actions { width: 100%; margin-left: 0; } .card-header, .card-body, .card-footer { padding-left: 16px; padding-right: 16px; } .login-card { padding: 26px 20px 20px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } .status-dot.is-online::after, .skeleton::after { display: none; } }