/* ========================================================================== Antix Portal — Global Stylesheet Shared portal styles plus page-specific additions for keys, team, usage. ========================================================================== */ /* ========================================================================== RESET & BOX MODEL ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth cross-document navigations (Chromium): the old page cross-fades into the new one instead of a hard white flip. The sidebar/topbar carry stable view-transition-names so they hold still while the content swaps. Unsupported browsers (Safari/Firefox) silently fall back to a normal load. */ @view-transition { navigation: auto; } /* ========================================================================== DESIGN TOKENS (CSS Custom Properties) ========================================================================== */ :root { --dashboard-bg: #0c0d12; --dashboard-fg: #e4e4e7; --dashboard-sidebar: #0f1017; --dashboard-border: #1e1f2a; --dashboard-muted: #6b6b80; --dashboard-secondary: #9b9bb0; --dashboard-accent: #6366f1; --dashboard-card: #141520; --dashboard-hover: #1a1b28; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Sidebar width — collapsed override on . A head bootstrap snippet sets the attribute before paint (no flash); toggleSidebar() in js/app.js flips it. --topbar-h keeps the sidebar logo bar and the page topbar the same height so their borders align. */ --sidebar-width: 220px; --sidebar-collapsed: 64px; --topbar-h: 56px; /* Extended tokens for tables, forms, modals */ --dashboard-danger: #ef4444; --dashboard-danger-hover: #dc2626; --dashboard-success: #22c55e; --dashboard-warning: #f59e0b; --dashboard-input-bg: #0f1017; --dashboard-input-focus: rgba(99, 102, 241, 0.35); --dashboard-overlay: rgba(0, 0, 0, 0.6); /* Semantic foreground/surface tokens. The dark values are the lightened tints previously hardcoded; the light theme swaps them for darkened shades that stay readable on white. */ --dashboard-success-fg: #86efac; --dashboard-danger-fg: #fca5a5; --dashboard-warning-fg: #fde68a; --dashboard-info-fg: #60a5fa; --dashboard-accent-fg: #a5b4fc; --dashboard-subtle-bg: rgba(255, 255, 255, 0.04); --dashboard-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --dashboard-on-accent: #ffffff; --dashboard-on-accent-border: rgba(255, 255, 255, 0.4); color-scheme: dark; } /* Light theme. Opt-in via , persisted by the sidebar toggle (toggleTheme in js/app.js + the head bootstrap snippet on each page, which applies it before first paint). */ [data-theme='light'] { --dashboard-bg: #f6f7f9; --dashboard-fg: #1a1c23; --dashboard-sidebar: #ffffff; --dashboard-border: #e3e5ec; --dashboard-muted: #8a8aa0; --dashboard-secondary: #54546c; --dashboard-card: #ffffff; --dashboard-hover: #eef0f5; --dashboard-input-bg: #ffffff; --dashboard-overlay: rgba(15, 16, 23, 0.4); --dashboard-success-fg: #15803d; --dashboard-danger-fg: #b91c1c; --dashboard-warning-fg: #a16207; --dashboard-info-fg: #1d4ed8; --dashboard-accent-fg: #4f46e5; --dashboard-subtle-bg: rgba(15, 16, 23, 0.03); --dashboard-shadow: 0 8px 24px rgba(15, 16, 23, 0.12); --dashboard-on-accent: #ffffff; --dashboard-on-accent-border: rgba(255, 255, 255, 0.4); color-scheme: light; } [data-sidebar='collapsed'] { --sidebar-width: var(--sidebar-collapsed); } /* ========================================================================== BASE / BODY ========================================================================== */ /* Paint the root canvas dark too, so any frame before lays out (e.g. a hard navigation fallback) is the dashboard background, not white. */ html { background: var(--dashboard-bg); } body { font-family: var(--font-sans); background: var(--dashboard-bg); color: var(--dashboard-fg); min-height: 100vh; display: block; } /* ========================================================================== SIDEBAR ========================================================================== */ .sidebar { width: var(--sidebar-width); min-height: 100vh; background: var(--dashboard-sidebar); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; transition: width 0.18s ease; /* Persist the sidebar across cross-document View Transitions (see the @view-transition rule below): the browser matches old/new frames by name so the chrome stays put while only the content cross-fades. */ view-transition-name: portal-sidebar; } /* The logo bar is part of the unified top header: same background as the topbar, and the sidebar's vertical divider lives on the nav below it (not on .sidebar) so no vertical line crosses the header strip. */ .sidebar-header { height: var(--topbar-h); /* align the logo bar's border with the topbar's */ padding: 0 12px 0 16px; background: var(--dashboard-bg); border-bottom: 1px solid var(--dashboard-border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-logo { display: flex; align-items: center; gap: 8px; min-width: 0; } .sidebar-logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-collapse-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: none; color: var(--dashboard-muted); cursor: pointer; transition: all 0.15s; } .sidebar-collapse-btn:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } .sidebar-collapse-btn svg { width: 16px; height: 16px; } /* ---- Collapsed rail ---- */ [data-sidebar='collapsed'] .sidebar-logo, [data-sidebar='collapsed'] .nav-item-label, [data-sidebar='collapsed'] .soon-badge, [data-sidebar='collapsed'] .nav-group-label, [data-sidebar='collapsed'] .nav-group-line { display: none; } [data-sidebar='collapsed'] .sidebar-header { justify-content: center; padding: 0; } [data-sidebar='collapsed'] .nav-item { justify-content: center; padding: 8px 0; } [data-sidebar='collapsed'] .nav-group { margin-bottom: 8px; } .sidebar-logo img { width: 20px; height: 20px; } .sidebar-logo span { font-size: 14px; font-weight: 600; color: var(--dashboard-fg); } .sidebar-email { font-size: 11px; color: var(--dashboard-muted); font-family: var(--font-mono); padding-left: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Sidebar Navigation ---- */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 8px; border-right: 1px solid var(--dashboard-border); /* rail divider, below the unified header */ } .nav-group { margin-bottom: 24px; } .nav-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dashboard-muted); padding: 0 12px; margin-bottom: 4px; } .nav-group-line { width: 32px; height: 1px; background: var(--dashboard-border); margin-left: 12px; margin-bottom: 8px; } .nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-family: var(--font-sans); color: var(--dashboard-muted); background: none; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; position: relative; } .nav-item:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } /* Active-page highlight. The sidebar markup is shared/static across pages (see _sidebar.html), so the active item is selected by the page's `body[data-page]` rather than a baked-in `.active` class. */ .nav-item.active, body[data-page='home'] .nav-item[data-nav-id='home'], body[data-page='team'] .nav-item[data-nav-id='team'], body[data-page='endpoints'] .nav-item[data-nav-id='endpoints'], body[data-page='keys'] .nav-item[data-nav-id='keys'], body[data-page='install'] .nav-item[data-nav-id='install'], body[data-page='usage'] .nav-item[data-nav-id='usage'] { background: rgba(99, 102, 241, 0.15); color: var(--dashboard-accent); font-weight: 500; } .nav-item.disabled { cursor: not-allowed; opacity: 0.6; } .nav-item.disabled:hover { background: none; color: var(--dashboard-muted); } .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Keep the label on one line; the badge stays compact so the longest label ("Available Models") fits without wrapping. */ .nav-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav-item .soon-badge { margin-left: auto; flex-shrink: 0; font-size: 8px; font-weight: 600; color: var(--dashboard-accent); letter-spacing: 0.03em; text-transform: uppercase; } /* ---- Sidebar Footer ---- */ .sidebar-footer { padding: 12px; border-top: 1px solid var(--dashboard-border); display: flex; gap: 8px; } /* Topbar controls (theme toggle + sign out, rendered by renderTopbarControls in js/app.js into .topbar-right) */ .topbar-ctl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-family: var(--font-sans); color: var(--dashboard-secondary); background: none; border: 1px solid var(--dashboard-border); cursor: pointer; transition: all 0.15s; } .topbar-ctl-btn:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } .topbar-ctl-btn svg { width: 15px; height: 15px; } .topbar-ctl-btn.icon-only { padding: 6px; } .signout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-family: var(--font-sans); color: var(--dashboard-secondary); background: none; border: 1px solid var(--dashboard-border); cursor: pointer; transition: all 0.15s; } .signout-btn:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } .signout-btn svg { width: 16px; height: 16px; } /* ========================================================================== MAIN LAYOUT ========================================================================== */ .main { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.18s ease; } .topbar { height: 56px; border-bottom: 1px solid var(--dashboard-border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; view-transition-name: portal-topbar; } .topbar-title { font-size: 18px; font-weight: 600; } .topbar-right { display: flex; align-items: center; gap: 12px; } /* The fixed sidebar is reserved via margin. `--sidebar-width` already collapses to `--sidebar-collapsed` under [data-sidebar='collapsed'] (and on narrow screens), so this single rule covers both states. */ body.portal-shell > .topbar, body.portal-shell > .content { margin-left: var(--sidebar-width); transition: margin-left 0.18s ease; } @media (max-width: 760px) { :root, [data-sidebar='expanded'], [data-sidebar='collapsed'] { --sidebar-width: var(--sidebar-collapsed); } .sidebar { width: var(--sidebar-collapsed); } body.portal-shell > .topbar, body.portal-shell > .content { width: calc(100vw - var(--sidebar-collapsed)); margin-left: var(--sidebar-collapsed); } .sidebar-logo, .nav-item-label, .soon-badge, .nav-group-label, .nav-group-line { display: none; } .sidebar-header { justify-content: center; padding: 0; } .nav-item { justify-content: center; padding: 8px 0; } .nav-group { margin-bottom: 8px; } .topbar { padding: 0 14px; gap: 12px; } .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-right { flex-shrink: 0; gap: 8px; } .content { padding: 18px 14px; } .content-inner { max-width: none; } .form-row > button, .form-row > .btn-primary, .form-row > .btn-outline, .form-row > .btn-danger, .form-row > .btn-secondary, .form-row > .btn-danger-outline { width: 100%; flex-basis: 100%; } .card, .ante-card, .install-card { padding: 16px; } .cards-grid { grid-template-columns: 1fr; } .update-banner { justify-content: flex-start; flex-wrap: wrap; padding: 10px 12px; } } /* ========================================================================== BADGE & UTILITY ========================================================================== */ .badge-public, .badge-standard, .badge-admin { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; padding: 2px 8px; } .badge-public { color: var(--dashboard-muted); background: var(--dashboard-hover); border: 1px solid var(--dashboard-border); } .badge-standard { color: var(--dashboard-success-fg); background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); } .badge-admin { color: var(--dashboard-danger-fg); background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); } .docs-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--dashboard-secondary); text-decoration: none; transition: color 0.15s; } .docs-link:hover { color: var(--dashboard-fg); } .docs-link svg { width: 14px; height: 14px; } /* ========================================================================== CONTENT AREA ========================================================================== */ .content { flex: 1; padding: 32px; } .content-inner { width: 100%; max-width: 1180px; margin: 0 auto; } /* ---- Welcome Section ---- */ .welcome-section { margin-bottom: 20px; } .welcome-title { font-size: 16px; font-weight: 600; color: var(--dashboard-fg); } .welcome-sub { font-size: 14px; color: var(--dashboard-muted); margin-top: 2px; } /* ========================================================================== CTA BUTTONS ========================================================================== */ .cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: var(--dashboard-accent); color: #fff; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1.35; text-align: center; white-space: normal; max-width: 100%; } .btn-primary:hover { background: rgba(99, 102, 241, 0.85); } .btn-primary svg { width: 16px; height: 16px; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: none; color: var(--dashboard-secondary); border: 1px solid var(--dashboard-border); cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1.35; text-align: center; white-space: normal; max-width: 100%; } .btn-outline:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } .btn-outline svg { width: 16px; height: 16px; } .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: var(--dashboard-danger); color: #fff; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1.35; text-align: center; white-space: normal; max-width: 100%; } .btn-danger:hover { background: var(--dashboard-danger-hover); } .btn-sm { padding: 6px 12px; font-size: 12px; } /* Secondary action style for buttons used inside tables / form-rows where the * button must sit alongside text rather than break onto its own line. */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: var(--dashboard-card); color: var(--dashboard-fg); border: 1px solid var(--dashboard-border); cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1.35; text-align: center; white-space: normal; max-width: 100%; } .btn-secondary:hover { background: var(--dashboard-hover); } .btn-secondary svg { width: 16px; height: 16px; } .table-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .btn-danger-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: none; color: var(--dashboard-danger); border: 1px solid var(--dashboard-danger); cursor: pointer; transition: all 0.15s; text-decoration: none; line-height: 1.35; text-align: center; white-space: normal; max-width: 100%; } .btn-danger-outline:hover { background: var(--dashboard-danger); color: #fff; } /* ========================================================================== INSTALL CARD ========================================================================== */ .install-card { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; } .install-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .install-header svg { width: 16px; height: 16px; color: var(--dashboard-accent); } .install-header span { font-size: 14px; font-weight: 600; } .install-command { display: flex; align-items: center; gap: 8px; background: var(--dashboard-bg); border: 1px solid var(--dashboard-border); border-radius: 8px; padding: 12px 16px; } .install-command code { flex: 1; font-size: 14px; font-family: var(--font-mono); color: var(--dashboard-fg); } .copy-btn { flex-shrink: 0; padding: 6px; border-radius: 4px; background: none; border: none; color: var(--dashboard-muted); cursor: pointer; transition: all 0.15s; } .copy-btn:hover { color: var(--dashboard-fg); background: var(--dashboard-hover); } .copy-btn svg { width: 16px; height: 16px; } .copy-btn.copy-btn-success { color: var(--dashboard-success-fg); } .install-hint { font-size: 12px; color: var(--dashboard-muted); margin-top: 8px; } .install-hint code { font-family: var(--font-mono); color: var(--dashboard-secondary); } /* Stale-tab update prompt, shown by js/app.js when /api/version changes. */ .update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: var(--dashboard-accent); color: var(--dashboard-on-accent); font-family: var(--font-sans); font-size: 14px; box-shadow: var(--dashboard-shadow); } .update-banner-reload, .update-banner-dismiss { border-radius: 6px; cursor: pointer; font-family: var(--font-sans); font-size: 13px; } .update-banner-reload { padding: 4px 14px; border: none; background: var(--dashboard-on-accent); color: var(--dashboard-accent); font-weight: 600; } .update-banner-dismiss { padding: 4px 10px; border: 1px solid var(--dashboard-on-accent-border); background: transparent; color: var(--dashboard-on-accent); } /* ========================================================================== FEATURE CARDS GRID ========================================================================== */ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .feature-card { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 12px; padding: 16px; text-align: left; cursor: pointer; transition: border-color 0.15s; text-decoration: none; display: block; } .feature-card:hover { border-color: rgba(99, 102, 241, 0.4); } .feature-card.disabled { opacity: 0.6; cursor: default; } .feature-card.disabled:hover { border-color: var(--dashboard-border); } .feature-card-icon { width: 20px; height: 20px; margin-bottom: 10px; color: var(--dashboard-accent); } .feature-card.disabled .feature-card-icon { color: var(--dashboard-muted); } .feature-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .feature-card-top svg:last-child { width: 12px; height: 12px; color: var(--dashboard-muted); transition: color 0.15s; } .feature-card:hover .feature-card-top svg:last-child { color: var(--dashboard-secondary); } .feature-card h4 { font-size: 14px; font-weight: 600; color: var(--dashboard-fg); margin-bottom: 4px; } .feature-card p { font-size: 12px; color: var(--dashboard-muted); line-height: 1.6; } /* ========================================================================== ANTE AGENT PAGE ========================================================================== */ .ante-card { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 12px; padding: 20px 32px; } .ante-card h2 { font-size: 18px; font-weight: 600; color: var(--dashboard-fg); margin-bottom: 24px; } .ante-section { margin-bottom: 32px; } .ante-section:last-child { margin-bottom: 0; } .ante-section h3 { font-size: 16px; font-weight: 600; color: var(--dashboard-accent); margin-bottom: 12px; } .ante-section p { font-size: 14px; color: var(--dashboard-secondary); margin-bottom: 12px; } .ante-section .cmd-block { background: var(--dashboard-bg); border: 1px solid var(--dashboard-border); border-radius: 8px; padding: 12px 16px; } .ante-section .cmd-block code { font-size: 14px; font-family: var(--font-mono); color: var(--dashboard-fg); } .ante-cmd-list { display: flex; flex-direction: column; gap: 12px; } .ante-cmd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; } .ante-cmd-row span { color: var(--dashboard-secondary); } .ante-cmd-row code, .ante-cmd-row-code { background: var(--dashboard-bg); border: 1px solid var(--dashboard-border); border-radius: 4px; padding: 4px 10px; font-size: 14px; font-family: var(--font-mono); color: var(--dashboard-fg); } /* ========================================================================== LOGIN PAGE ========================================================================== */ .login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; background: var(--dashboard-bg); } .login-card { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; text-align: center; box-shadow: var(--dashboard-shadow); } .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .login-logo img { width: 32px; height: 32px; } .login-logo span { font-size: 20px; font-weight: 700; color: var(--dashboard-fg); } .login-sub { font-size: 14px; color: var(--dashboard-muted); margin-bottom: 32px; } .oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--font-sans); background: var(--dashboard-hover); border: 1px solid var(--dashboard-border); color: var(--dashboard-fg); cursor: pointer; transition: all 0.15s; margin-bottom: 12px; text-decoration: none; } .oauth-btn:hover { background: var(--dashboard-border); } .oauth-btn svg { width: 18px; height: 18px; } /* ========================================================================== GENERIC CARD (reusable — matches .ante-card visual language) ========================================================================== */ .card { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 12px; padding: 20px 32px; } .card h2 { font-size: 18px; font-weight: 600; color: var(--dashboard-fg); margin-bottom: 24px; } .card h3 { font-size: 16px; font-weight: 600; color: var(--dashboard-accent); margin-bottom: 12px; } .card p { font-size: 14px; color: var(--dashboard-secondary); margin-bottom: 12px; } .card + .card { margin-top: 16px; } /* ========================================================================== TABLE STYLES (keys, team, usage pages) ========================================================================== */ .table-wrapper { overflow-x: auto; border: 1px solid var(--dashboard-border); border-radius: 12px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead { background: var(--dashboard-sidebar); } thead th { padding: 10px 16px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dashboard-muted); border-bottom: 1px solid var(--dashboard-border); white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--dashboard-border); transition: background 0.1s; } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--dashboard-hover); } tbody td { padding: 12px 16px; color: var(--dashboard-fg); vertical-align: middle; } tbody td code { font-family: var(--font-mono); font-size: 12px; background: var(--dashboard-bg); border: 1px solid var(--dashboard-border); border-radius: 4px; padding: 2px 8px; color: var(--dashboard-fg); } .table-empty { text-align: center; padding: 40px 16px; color: var(--dashboard-muted); font-size: 14px; } /* ========================================================================== FORM / INPUT STYLES (dark theme) ========================================================================== */ label { display: block; font-size: 12px; font-weight: 600; color: var(--dashboard-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="datetime-local"], select, textarea { width: 100%; padding: 10px 14px; font-size: 14px; font-family: var(--font-sans); color: var(--dashboard-fg); background: var(--dashboard-input-bg); border: 1px solid var(--dashboard-border); border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="datetime-local"]:focus, select:focus, textarea:focus { border-color: var(--dashboard-accent); box-shadow: 0 0 0 3px var(--dashboard-input-focus); } input[type="datetime-local"] { min-height: 40px; line-height: 1.2; } input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; } input::placeholder, textarea::placeholder { color: var(--dashboard-muted); } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } textarea { min-height: 80px; resize: vertical; } .form-group { margin-bottom: 16px; } .form-hint { font-size: 12px; color: var(--dashboard-muted); margin-top: 4px; } .form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .form-row > * { flex: 1 1 180px; min-width: 0; } .form-row > button, .form-row > .btn-primary, .form-row > .btn-outline, .form-row > .btn-danger, .form-row > .btn-secondary, .form-row > .btn-danger-outline { flex: 0 0 auto; min-width: 132px; } /* ========================================================================== MODAL STYLES ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: var(--dashboard-overlay); display: flex; align-items: center; justify-content: center; z-index: 200; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 16px; padding: 32px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-header h2 { font-size: 18px; font-weight: 600; color: var(--dashboard-fg); } .modal-close { padding: 6px; border-radius: 6px; background: none; border: none; color: var(--dashboard-muted); cursor: pointer; transition: all 0.15s; } .modal-close:hover { color: var(--dashboard-fg); background: var(--dashboard-hover); } .modal-close svg { width: 18px; height: 18px; } .modal-body { margin-bottom: 24px; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; } /* ========================================================================== SUMMARY GRID / STAT BOXES (usage page) ========================================================================== */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-box { background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 12px; padding: 16px 20px; } .stat-box-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dashboard-muted); margin-bottom: 6px; } .stat-box-value { font-size: 24px; font-weight: 700; color: var(--dashboard-fg); font-variant-numeric: tabular-nums; } .stat-box-value.accent { color: var(--dashboard-accent); } .stat-box-sub { font-size: 12px; color: var(--dashboard-muted); margin-top: 2px; } /* ========================================================================== STATUS BADGES (for key status, team roles, etc.) ========================================================================== */ .badge { display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; } .badge-active { color: var(--dashboard-success); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); } .badge-revoked { color: var(--dashboard-danger); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); } .badge-warning { color: var(--dashboard-warning); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.25); } .badge-muted { color: var(--dashboard-muted); background: var(--dashboard-hover); border: 1px solid var(--dashboard-border); } .badge-oauth { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); color: var(--dashboard-success-fg); } /* ========================================================================== UTILITY CLASSES ========================================================================== */ .text-muted { color: var(--dashboard-muted); } .text-secondary { color: var(--dashboard-secondary); } .text-accent { color: var(--dashboard-accent); } .text-danger { color: var(--dashboard-danger); } .text-success { color: var(--dashboard-success); } .text-mono { font-family: var(--font-mono); } .text-sm { font-size: 12px; } .text-xs { font-size: 10px; } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .hidden { display: none; } /* --------------------------------------------------------------------------- * Observation drawer (Traces -> request detail). * * Right-side sheet; full-screen on mobile. Renders the body of a single * inference. Lives in portal/ only — the sessions branch's Gantt can * import from here once it lands. * ------------------------------------------------------------------------ */ .obs-drawer-overlay { position: fixed; inset: 0; background: var(--dashboard-overlay); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 180ms ease-out; } .obs-drawer-overlay.active { opacity: 1; pointer-events: auto; } .obs-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--dashboard-card); border-left: 1px solid var(--dashboard-border); z-index: 999; overflow-y: auto; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 180ms ease-out; } .obs-drawer.active { transform: translateX(0); } @media (max-width: 720px) { .obs-drawer { width: 100vw; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .obs-drawer, .obs-drawer-overlay { transition: none; } } .obs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--dashboard-border); position: sticky; top: 0; background: var(--dashboard-card); z-index: 1; } .obs-drawer-head h3 { margin: 0; font-size: 14px; font-weight: 600; } .obs-drawer-close { background: none; border: 0; color: var(--dashboard-secondary); font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; } .obs-drawer-close:hover { color: var(--dashboard-fg); } .obs-drawer-body { padding: 14px 16px 24px; } .obs-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 8px 0 16px; } .obs-meta div { margin: 0; } .obs-meta dt { font-size: 11px; color: var(--dashboard-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; } .obs-meta dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; word-break: break-word; } .obs-meta-id { grid-column: 1 / -1; } .obs-meta-id code { font-family: var(--font-mono); font-size: 12px; color: var(--dashboard-secondary); } .obs-section { border: 1px solid var(--dashboard-border); border-radius: 6px; margin-top: 10px; background: var(--dashboard-bg); } .obs-section > summary { cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 500; user-select: none; } .obs-section[open] > summary { border-bottom: 1px solid var(--dashboard-border); } .obs-section-body { padding: 10px 12px; } /* Tool definitions / tool calls (Phase 2) */ .obs-tool { border: 1px solid var(--dashboard-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; } .obs-tool:last-child { margin-bottom: 0; } .obs-tool-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; background: var(--dashboard-bg); border-bottom: 1px solid var(--dashboard-border); } .obs-tool-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .obs-tool-id { font-family: var(--font-mono); font-size: 11px; color: var(--dashboard-secondary); } .obs-tool-desc { font-size: 11px; color: var(--dashboard-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .obs-tool-schema > summary { font-size: 11px; color: var(--dashboard-secondary); cursor: pointer; padding: 4px 10px; } .obs-tool .obs-json { border: none; border-radius: 0; } .obs-section-hint { font-size: 11px; color: var(--dashboard-secondary); text-transform: uppercase; letter-spacing: 0.4px; } .obs-json-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .obs-json { font-family: var(--font-mono); font-size: 12px; background: var(--dashboard-input-bg); border: 1px solid var(--dashboard-border); border-radius: 4px; padding: 8px 10px; margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; } .redacted-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: var(--dashboard-hover); color: var(--dashboard-secondary); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; } .redacted-chip-icon { flex: 0 0 auto; /* SVG path uses currentColor; the chip's `color:` is the icon tint. */ } /* Item 4: distinguish POLICY-HIDDEN ("the gateway refuses to serve this") * from NOT-RECORDED ("this row simply doesn't have a value"). The two * variants land on the same base `.redacted-chip` so legacy callers * that don't pass a kind still render reasonably. * * .redacted-chip-policy — solid fill, lock icon, label "redacted" * .redacted-chip-unavailable — outlined, dashed border, em-dash glyph */ .redacted-chip-policy { background: var(--dashboard-hover); color: var(--dashboard-fg); border: 1px solid var(--dashboard-border); } .redacted-chip-unavailable { background: transparent; color: var(--dashboard-secondary); border: 1px dashed var(--dashboard-border); } /* The unavailable variant uses an em-dash *prefix* glyph (the ::before * pseudo-element) so the chip reads as "— unavailable" without the * label text needing to encode the glyph. */ .redacted-chip-unavailable::before { content: '\2014'; /* em-dash */ margin-right: 2px; color: var(--dashboard-muted); } .privacy-banner { border: 1px solid var(--dashboard-border); border-radius: 6px; padding: 8px 10px; font-size: 12px; margin-bottom: 12px; line-height: 1.4; } .privacy-banner-warn { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); color: var(--dashboard-warning); } .privacy-banner-muted { background: var(--dashboard-hover); color: var(--dashboard-secondary); } /* Trace row affordances. Whole row is the click target; the trailing * glyph is a sighted-user hint. tabindex=0 + role=button on the * gives keyboard + AT users the same affordance. */ .trace-row { cursor: pointer; } .trace-row:hover { background: var(--dashboard-hover); } .trace-row:focus { outline: 2px solid var(--dashboard-input-focus); outline-offset: -2px; } .trace-row-glyph { color: var(--dashboard-secondary); font-size: 12px; margin-left: 4px; } /* 429 cool-down: dim the table and block pointer events for ~5s so a * user who hit the per-user obs budget doesn't keep firing requests. */ .obs-rows-disabled { opacity: 0.5; pointer-events: none; } /* ─── Item 6: shared JSON-highlight palette ────────────────────────── * The shared highlighter (ui/web/shared/json_highlight.js) emits two * class names per token — the legacy short form (.key, .string, ...) * for the admin observations page, and the prefixed form * (.json-key, .json-string, ...) we scope under `.obs-json` here so * we don't trample on any other page that happens to use one of the * short names. */ .obs-json .json-key { color: var(--dashboard-accent); } .obs-json .json-string { color: var(--dashboard-fg); } .obs-json .json-number { color: var(--dashboard-warning); } .obs-json .json-boolean { color: var(--dashboard-warning); } .obs-json .json-null { color: var(--dashboard-secondary); } /* ─── Item 7: mobile bottom-sheet (static, no drag-to-dismiss) ────── * On narrow viewports the right-side drawer becomes a bottom sheet — * the same control surface but anchored to the bottom edge so the * thumb-zone reaches the close button. Drag-to-dismiss is * intentionally deferred (the static sheet is already a step-up over * the v1 fullscreen takeover); backdrop-tap and the close button still * dismiss. The 500px breakpoint is narrower than the 720px breakpoint * above on purpose: phones get the sheet, small tablets keep the * full-screen drawer. */ @media (max-width: 500px) { .obs-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100vw; height: 80vh; transform: translateY(100%); border-left: 0; border-top: 1px solid var(--dashboard-border); border-radius: 12px 12px 0 0; } .obs-drawer.active { /* Sheet rests at 20vh from the top → 80vh visible height (matches * the `height: 80vh` rule above). */ transform: translateY(20vh); } } /* (Removed) The previous prefers-reduced-motion @media rule for the * bottom-sheet was a no-op: it duplicated the active-state transform * already declared above. The earlier global `prefers-reduced-motion` * block neutralises `transition` (not `transform`), so the bottom sheet * already snaps into place at translateY(20vh) without animation. */ /* ── Trace-list filter strip (Next-2b) ─────────────────────────────── */ #traceFilterStrip { margin-bottom: 12px; padding: 10px 12px; } .trace-filter-toggle { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 4px 0; font: inherit; text-align: left; min-width: 0; } .trace-filter-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; font-size: 13px; color: var(--dashboard-muted); } .trace-filter-grid { display: none; margin-top: 12px; grid-template-columns: repeat(4, 1fr); gap: 10px; } .trace-filter-grid .form-group { margin-bottom: 0; min-width: 0; } #traceFilterStrip.expanded .trace-filter-grid, #usageFilterStrip.expanded .trace-filter-grid { display: grid; } .trace-filter-toggle .toggle-glyph { display: inline-block; flex: 0 0 auto; color: var(--dashboard-muted); transition: transform 120ms ease; } #traceFilterStrip.expanded .trace-filter-toggle .toggle-glyph, #usageFilterStrip.expanded .trace-filter-toggle .toggle-glyph { transform: rotate(180deg); } .trace-filter-search { display: flex; align-items: center; gap: 6px; } .trace-filter-search input { flex: 1; } /* Banner for deep-link rows that fall outside the current filter view. */ .banner { padding: 10px 14px; border-radius: 6px; margin: 8px 0; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .banner-info { background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.3); color: var(--dashboard-info-fg); } .banner code { font-family: ui-monospace, SFMono-Regular, monospace; } @media (max-width: 720px) { .trace-filter-grid { grid-template-columns: 1fr; } } /* ========================================================================== Activity tab — Gantt session viewer (Next-2.5) ========================================================================== */ .activity-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: stretch; min-height: 400px; } .activity-sessions { border: 1px solid var(--dashboard-border); border-radius: 6px; overflow-y: auto; max-height: 600px; background: var(--dashboard-card); } .activity-session-card { padding: 10px 12px; border-bottom: 1px solid var(--dashboard-border); cursor: pointer; outline: none; } .activity-session-card:hover, .activity-session-card:focus-visible { background: var(--dashboard-hover); } .activity-session-card.active { background: rgba(99, 102, 241, 0.10); border-left: 3px solid var(--dashboard-accent); } .activity-session-id { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 500; color: var(--dashboard-fg); display: flex; gap: 6px; align-items: center; } .activity-session-meta { display: flex; gap: 10px; margin-top: 4px; font-size: 11px; color: var(--dashboard-secondary); flex-wrap: wrap; } .activity-gantt { border: 1px solid var(--dashboard-border); border-radius: 6px; background: var(--dashboard-card); padding: 12px 14px; overflow-x: auto; } .activity-gantt-header { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--dashboard-border); margin-bottom: 10px; } .activity-gantt-title { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 13px; color: var(--dashboard-fg); } .activity-gantt-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dashboard-secondary); gap: 16px; } .activity-gantt-tracks { display: flex; flex-direction: column; gap: 4px; } .activity-track { display: grid; grid-template-columns: 28px 1fr 220px; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; outline: none; border-radius: 4px; } .activity-track:hover, .activity-track:focus-visible { background: var(--dashboard-hover); } .activity-track-num { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; color: var(--dashboard-muted); text-align: right; } .activity-track-rail { position: relative; height: 14px; background: var(--dashboard-subtle-bg); border-radius: 3px; } .activity-track-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; min-width: 2px; } .activity-track-label { font-size: 11px; color: var(--dashboard-secondary); font-family: ui-monospace, SFMono-Regular, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity-empty, .activity-skeleton, .activity-error, .activity-truncated { padding: 16px; font-size: 12px; color: var(--dashboard-secondary); } .activity-error { color: var(--dashboard-danger); } .activity-truncated { background: rgba(245, 158, 11, 0.08); border-left: 3px solid #f59e0b; margin-bottom: 10px; border-radius: 0 4px 4px 0; } /* Mobile fallback list — hidden on desktop, shown <900px in place of the two-column Gantt. The desktop layout is unreadable below 900px (Gantt bars become too narrow), and a card list is the ergonomic shape for touch. */ .activity-mobile-list { display: none; } @media (max-width: 899px) { .activity-layout { display: none; } .activity-mobile-list { display: block; border: 1px solid var(--dashboard-border); border-radius: 6px; background: var(--dashboard-card); } } /* ========================================================================== Group-by-session buckets on Traces tab (Next-2.5) ========================================================================== */ .trace-groupby-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; user-select: none; } .trace-bucket-header { background: rgba(99, 102, 241, 0.06); cursor: pointer; outline: none; } .trace-bucket-header:hover, .trace-bucket-header:focus-visible { background: rgba(99, 102, 241, 0.12); } .trace-bucket-header td { padding: 8px 10px; font-size: 12px; border-top: 1px solid var(--dashboard-border); } .trace-bucket-label { font-weight: 500; } .trace-bucket-chev { display: inline-block; width: 1em; text-align: center; color: var(--dashboard-secondary); } /* ========================================================================== TOASTS (showToast in js/app.js) ========================================================================== */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 48px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 10px; box-shadow: var(--dashboard-shadow); font-size: 13px; color: var(--dashboard-fg); cursor: pointer; animation: toast-enter 0.2s ease-out; transition: opacity 0.25s, transform 0.25s; } @keyframes toast-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .toast-leaving { opacity: 0; transform: translateY(8px); } .toast-icon { flex-shrink: 0; display: inline-flex; } .toast-icon svg { width: 16px; height: 16px; margin-top: 1px; } .toast-success .toast-icon { color: var(--dashboard-success); } .toast-error .toast-icon { color: var(--dashboard-danger); } .toast-info .toast-icon { color: var(--dashboard-accent); } .toast-message { overflow-wrap: anywhere; } /* Confirm dialog (confirmDialog in js/app.js) */ .modal-confirm { max-width: 420px; } .confirm-dialog-message { font-size: 13px; line-height: 1.6; color: var(--dashboard-secondary); white-space: pre-line; } /* Prompt dialog (promptDialog in js/app.js) */ .modal-prompt { max-width: 420px; } .prompt-dialog-message { font-size: 13px; line-height: 1.6; color: var(--dashboard-secondary); margin-bottom: 16px; white-space: pre-line; } /* ========================================================================== SKELETONS & EMPTY/ERROR STATES (helpers in js/app.js) ========================================================================== */ .skeleton { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--dashboard-hover) 25%, var(--dashboard-border) 50%, var(--dashboard-hover) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .sidebar, .main { transition: none; } } .skeleton-line { display: block; margin: 10px 0; } .empty-state { padding: 28px 16px; text-align: center; color: var(--dashboard-muted); } .empty-state-title { font-size: 13.5px; font-weight: 600; color: var(--dashboard-secondary); margin-bottom: 4px; } .empty-state-title.error-state-title { color: var(--dashboard-danger-fg); } .empty-state-hint { font-size: 12.5px; margin-bottom: 10px; } /* ========================================================================== USER MENU (avatar dropdown in topbar; built by renderTopbarControls) ========================================================================== */ .user-menu { position: relative; display: inline-flex; } .user-avatar-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--dashboard-border); border-radius: 50%; background: none; cursor: pointer; transition: all 0.15s; } .user-avatar-btn:hover { border-color: var(--dashboard-accent); } .user-avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dashboard-accent); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; } .user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--dashboard-card); border: 1px solid var(--dashboard-border); border-radius: 10px; box-shadow: var(--dashboard-shadow); padding: 8px; z-index: 250; } .user-menu-panel[hidden] { display: none; } .user-menu-identity { padding: 6px 8px 8px; } .user-menu-email { font-size: 13px; font-weight: 500; color: var(--dashboard-fg); word-break: break-all; margin-bottom: 6px; } .user-menu-badge { /* inherits .badge-* classes for color */ } .user-menu-divider { height: 1px; background: var(--dashboard-border); margin: 4px 0; } .user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: none; border-radius: 6px; background: none; color: var(--dashboard-secondary); font-size: 13px; font-family: var(--font-sans); cursor: pointer; transition: all 0.15s; } .user-menu-item:hover { background: var(--dashboard-hover); color: var(--dashboard-fg); } .user-menu-item svg { width: 15px; height: 15px; } /* ========================================================================== CROSS-DOCUMENT VIEW TRANSITIONS Smooths full-page sidebar navigation into a crossfade instead of a flash. Both the old and new document opt in (all portal pages share this sheet); unsupported browsers ignore it and navigate normally. ========================================================================== */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }