mirror of
https://github.com/Dvorinka/Primora.git
synced 2026-10-29 08:04:50 +00:00
Tomas DvorakandDevin
182b0c49c2
- Geist/Geist Mono via @fontsource inside the Vite bundle — the Google Fonts <link> was blocked by the nginx CSP (style-src 'self'), so the dashboard silently fell back and phoned home on self-hosted instances. Fonts now serve from /assets under 'self' — CSP-clean, airgapped, no console violation. - mcp README: vault_exec described the old deny-list; rewritten for the allow-list contract. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
1419 lines
33 KiB
CSS
1419 lines
33 KiB
CSS
/* ============================================================
|
|
PRIMORA DESIGN SYSTEM
|
|
Signal-console UI. Dark-first zinc, vermilion accent,
|
|
Geist Sans + Geist Mono. Instrument-panel discipline:
|
|
hairlines, tabular numerals, no decoration.
|
|
============================================================ */
|
|
|
|
/* Vendored via @fontsource — self-hosted, no runtime Google dependency
|
|
(the nginx CSP only allows 'self'). */
|
|
@import "@fontsource/geist/400.css";
|
|
@import "@fontsource/geist/500.css";
|
|
@import "@fontsource/geist/600.css";
|
|
@import "@fontsource/geist/700.css";
|
|
@import "@fontsource/geist-mono/400.css";
|
|
@import "@fontsource/geist-mono/500.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ------------------------------------------------------------
|
|
TOKENS
|
|
------------------------------------------------------------ */
|
|
|
|
:root {
|
|
/* surfaces — neutral zinc, no hue tint */
|
|
--bg: #0a0a0b;
|
|
--bg-panel: #0f0f11;
|
|
--surface: #141416;
|
|
--surface-2: #1b1b1f;
|
|
--surface-3: #26262b;
|
|
|
|
/* borders — hairline discipline */
|
|
--border: #222227;
|
|
--border-strong: #303036;
|
|
|
|
/* text */
|
|
--text-1: #f4f4f5;
|
|
--text-2: #a2a2ab;
|
|
--text-3: #63636d;
|
|
|
|
/* accent — Primora vermilion (signal light) */
|
|
--accent: #f4693a;
|
|
--accent-hover: #ff7c4e;
|
|
--accent-active: #d8552b;
|
|
--accent-fg: #1c0d05;
|
|
--accent-muted: rgba(244, 105, 58, 0.12);
|
|
--accent-border: rgba(244, 105, 58, 0.35);
|
|
|
|
/* semantic */
|
|
--success: #4cc38a;
|
|
--success-muted: rgba(76, 195, 138, 0.12);
|
|
--warning: #f5a623;
|
|
--warning-muted: rgba(245, 166, 35, 0.1);
|
|
--error: #e5484d;
|
|
--error-muted: rgba(229, 72, 77, 0.12);
|
|
--info: #70b8ff;
|
|
--info-muted: rgba(112, 184, 255, 0.12);
|
|
|
|
/* geometry */
|
|
--radius-sm: 6px;
|
|
--radius: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
/* shadows — tight and dark, elevation by lightness */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
|
|
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
|
|
--shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
|
|
/* type */
|
|
--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html.light {
|
|
--bg: #fafaf9;
|
|
--bg-panel: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-2: #f4f4f2;
|
|
--surface-3: #e8e8e4;
|
|
|
|
--border: #e5e5e1;
|
|
--border-strong: #d4d4cf;
|
|
|
|
--text-1: #1c1c1a;
|
|
--text-2: #57575a;
|
|
--text-3: #9c9c98;
|
|
|
|
--accent: #d94d22;
|
|
--accent-hover: #c74318;
|
|
--accent-active: #b83c14;
|
|
--accent-fg: #ffffff;
|
|
--accent-muted: rgba(217, 77, 34, 0.08);
|
|
--accent-border: rgba(217, 77, 34, 0.32);
|
|
|
|
--success: #18794e;
|
|
--success-muted: rgba(24, 121, 78, 0.1);
|
|
--warning: #a15c07;
|
|
--warning-muted: rgba(161, 92, 7, 0.1);
|
|
--error: #cd2b31;
|
|
--error-muted: rgba(205, 43, 49, 0.08);
|
|
--info: #006adc;
|
|
--info-muted: rgba(0, 106, 220, 0.08);
|
|
|
|
--shadow-sm: 0 1px 2px rgba(24, 20, 16, 0.05);
|
|
--shadow-md: 0 4px 12px rgba(24, 20, 16, 0.08);
|
|
--shadow-lg: 0 12px 32px rgba(24, 20, 16, 0.12);
|
|
--shadow-overlay: 0 16px 48px rgba(24, 20, 16, 0.18), 0 0 0 1px rgba(24, 20, 16, 0.04);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ------------------------------------------------------------
|
|
BASE
|
|
------------------------------------------------------------ */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 15px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.875rem;
|
|
background: var(--bg);
|
|
color: var(--text-1);
|
|
min-height: 100vh;
|
|
line-height: 1.55;
|
|
letter-spacing: -0.006em;
|
|
font-feature-settings: "ss01";
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.2;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
h1 { font-size: 1.375rem; }
|
|
h2 { font-size: 1.125rem; }
|
|
h3 { font-size: 0.9375rem; }
|
|
|
|
p { color: var(--text-2); }
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
a:hover { color: var(--accent-hover); }
|
|
|
|
code, kbd, samp, pre {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
code {
|
|
font-size: 0.8125em;
|
|
background: var(--surface-2);
|
|
padding: 0.125em 0.375em;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-1);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
:focus:not(:focus-visible) { outline: none; }
|
|
|
|
::selection {
|
|
background: var(--accent-muted);
|
|
color: var(--text-1);
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--surface-3);
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--surface-3) transparent;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------
|
|
COMPONENTS
|
|
------------------------------------------------------------ */
|
|
|
|
@layer components {
|
|
/* ---------- buttons ---------- */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
height: 2.25rem;
|
|
padding: 0 0.875rem;
|
|
border-radius: var(--radius);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background-color 0.12s ease, border-color 0.12s ease,
|
|
color 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
.btn:active:not(:disabled) { transform: translateY(0.5px); }
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--accent-fg);
|
|
font-weight: 600;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-sm);
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: var(--accent-hover);
|
|
}
|
|
.btn-primary:active:not(:disabled) { background: var(--accent-active); }
|
|
|
|
.btn-secondary {
|
|
background: var(--surface);
|
|
color: var(--text-1);
|
|
border-color: var(--border-strong);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: var(--surface-2);
|
|
border-color: var(--text-3);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
}
|
|
.btn-ghost:hover:not(:disabled) {
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: transparent;
|
|
color: var(--error);
|
|
border-color: rgba(229, 72, 77, 0.35);
|
|
}
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: var(--error-muted);
|
|
border-color: var(--error);
|
|
}
|
|
|
|
.btn-sm {
|
|
height: 1.75rem;
|
|
padding: 0 0.625rem;
|
|
font-size: 0.75rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.btn-lg {
|
|
height: 2.625rem;
|
|
padding: 0 1.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.btn-icon {
|
|
padding: 0;
|
|
width: 2.25rem;
|
|
}
|
|
.btn-icon.btn-sm { width: 1.75rem; }
|
|
|
|
/* ---------- inputs ---------- */
|
|
.input, .textarea, .select {
|
|
width: 100%;
|
|
height: 2.25rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius);
|
|
padding: 0 0.75rem;
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
color: var(--text-1);
|
|
transition: border-color 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
|
|
.input:hover:not(:disabled):not(:focus),
|
|
.textarea:hover:not(:disabled):not(:focus),
|
|
.select:hover:not(:disabled):not(:focus) {
|
|
border-color: var(--text-3);
|
|
}
|
|
.input:focus, .textarea:focus, .select:focus {
|
|
border-color: var(--accent);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--accent-muted);
|
|
}
|
|
.input:disabled, .textarea:disabled, .select:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.textarea {
|
|
height: auto;
|
|
min-height: 5rem;
|
|
padding: 0.625rem 0.75rem;
|
|
resize: vertical;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.select {
|
|
cursor: pointer;
|
|
padding-right: 2rem;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2363636d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.625rem center;
|
|
background-size: 1rem;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.label-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--text-3);
|
|
margin-top: 0.375rem;
|
|
}
|
|
|
|
.input-sm {
|
|
height: 1.875rem;
|
|
padding: 0 0.625rem;
|
|
font-size: 0.75rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.input-lg { height: 2.625rem; font-size: 0.875rem; }
|
|
|
|
.checkbox {
|
|
appearance: none;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 4px;
|
|
background: var(--surface);
|
|
cursor: pointer;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
transition: all 0.12s ease;
|
|
}
|
|
.checkbox:checked {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
.checkbox:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 0px;
|
|
width: 6px;
|
|
height: 10px;
|
|
border: solid var(--accent-fg);
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg) scale(0.8);
|
|
}
|
|
.checkbox:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ---------- cards & panels ---------- */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.25rem;
|
|
}
|
|
.card-flush { padding: 0; overflow: hidden; }
|
|
|
|
.card-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.card-header-title {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-1);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.card-header-description {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.card-interactive {
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
.card-interactive:hover {
|
|
border-color: var(--border-strong);
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
/* ---------- metric strip (replaces stat cards) ---------- */
|
|
.metric-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
@media (min-width: 768px) {
|
|
.metric-strip { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
.metric {
|
|
padding: 1rem 1.25rem;
|
|
border-left: 1px solid var(--border);
|
|
min-width: 0;
|
|
transition: background-color 0.12s ease;
|
|
}
|
|
.metric:hover { background: var(--surface); }
|
|
.metric:first-child { border-left: none; padding-left: 0; }
|
|
@media (max-width: 767px) {
|
|
.metric:nth-child(3) { border-left: none; padding-left: 0; }
|
|
.metric:nth-child(n+3) { border-top: 1px solid var(--border); }
|
|
}
|
|
.metric-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
white-space: nowrap;
|
|
}
|
|
.metric-label svg { width: 0.8125rem; height: 0.8125rem; }
|
|
.metric-value {
|
|
margin-top: 0.375rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-1);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.15;
|
|
}
|
|
.metric-sub {
|
|
margin-top: 0.125rem;
|
|
font-size: 0.6875rem;
|
|
color: var(--text-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ---------- list rows (hairline, not cards) ---------- */
|
|
.row-list {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.row-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.875rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--border);
|
|
min-width: 0;
|
|
}
|
|
.row-item.clickable { cursor: pointer; }
|
|
.row-item.clickable:hover .row-title { color: var(--accent); }
|
|
.row-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
flex-shrink: 0;
|
|
color: var(--text-3);
|
|
}
|
|
.row-item.clickable:hover .row-icon { color: var(--accent); }
|
|
.row-main { flex: 1; min-width: 0; }
|
|
.row-title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-1);
|
|
transition: color 0.1s ease;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.row-sub {
|
|
font-size: 0.75rem;
|
|
color: var(--text-3);
|
|
margin-top: 0.0625rem;
|
|
font-family: var(--font-mono);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.row-trailing {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text-3);
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* stat card (kept for StatCard export compat) */
|
|
.stat-card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--text-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.stat-value {
|
|
font-size: 1.625rem;
|
|
font-weight: 600;
|
|
color: var(--text-1);
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
margin-top: 0.25rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ---------- badges ---------- */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
height: 1.375rem;
|
|
padding: 0 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
.badge-primary {
|
|
background: var(--accent-muted);
|
|
color: var(--accent);
|
|
border-color: var(--accent-border);
|
|
}
|
|
.badge-success {
|
|
background: var(--success-muted);
|
|
color: var(--success);
|
|
border-color: rgba(76, 195, 138, 0.25);
|
|
}
|
|
.badge-warning {
|
|
background: var(--warning-muted);
|
|
color: var(--warning);
|
|
border-color: rgba(245, 166, 35, 0.25);
|
|
}
|
|
.badge-error {
|
|
background: var(--error-muted);
|
|
color: var(--error);
|
|
border-color: rgba(229, 72, 77, 0.25);
|
|
}
|
|
.badge-neutral {
|
|
background: var(--surface-2);
|
|
color: var(--text-2);
|
|
border-color: var(--border);
|
|
}
|
|
.badge-dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
/* ---------- storage layout ---------- */
|
|
.storage-grid {
|
|
display: grid;
|
|
gap: 1.25rem;
|
|
grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
|
|
}
|
|
/* below ~1100px the right column gets too tight — the objects table clips */
|
|
@media (max-width: 1100px) {
|
|
.storage-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ---------- table ---------- */
|
|
.table-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.8125rem;
|
|
}
|
|
.table thead th {
|
|
text-align: left;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-3);
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
.table tbody td {
|
|
padding: 0.6875rem 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-2);
|
|
vertical-align: middle;
|
|
}
|
|
.table tbody tr:last-child td { border-bottom: none; }
|
|
.table tbody tr {
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
.table tbody tr:hover { background: var(--surface-2); }
|
|
.table tbody tr.clickable { cursor: pointer; }
|
|
.table .mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ---------- messages / alerts ---------- */
|
|
.message {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--radius);
|
|
font-size: 0.8125rem;
|
|
border: 1px solid;
|
|
}
|
|
.message-neutral {
|
|
background: var(--surface-2);
|
|
border-color: var(--border);
|
|
color: var(--text-2);
|
|
}
|
|
.message-info {
|
|
background: var(--info-muted);
|
|
border-color: rgba(112, 184, 255, 0.25);
|
|
color: var(--info);
|
|
}
|
|
.message-success {
|
|
background: var(--success-muted);
|
|
border-color: rgba(76, 195, 138, 0.25);
|
|
color: var(--success);
|
|
}
|
|
.message-warning {
|
|
background: var(--warning-muted);
|
|
border-color: rgba(245, 166, 35, 0.25);
|
|
color: var(--warning);
|
|
}
|
|
.message-error {
|
|
background: var(--error-muted);
|
|
border-color: rgba(229, 72, 77, 0.25);
|
|
color: var(--error);
|
|
}
|
|
|
|
/* ---------- kbd ---------- */
|
|
.kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 0 0.3rem;
|
|
border-radius: 4px;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border-strong);
|
|
border-bottom-width: 2px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* ---------- spinner / skeleton ---------- */
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid var(--border-strong);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 0.7s linear infinite;
|
|
}
|
|
.btn .spinner {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
border-top-color: currentColor;
|
|
}
|
|
.skeleton {
|
|
background: var(--surface-2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.skeleton::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
|
|
animation: shimmer 1.6s infinite;
|
|
}
|
|
|
|
/* ---------- avatar ---------- */
|
|
.avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: var(--surface-3);
|
|
color: var(--text-1);
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
border: 1px solid var(--border-strong);
|
|
}
|
|
|
|
/* ---------- app shell ---------- */
|
|
.shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
|
|
.sidebar {
|
|
width: 15.5rem;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-panel);
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.sidebar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
height: 3.5rem;
|
|
padding: 0 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.brand-mark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.625rem;
|
|
height: 1.625rem;
|
|
color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
.brand-name {
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
color: var(--text-1);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.brand-tag {
|
|
margin-left: auto;
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-3);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.sidebar-context {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.context-select {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
text-align: left;
|
|
}
|
|
.context-select:hover {
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
}
|
|
.context-select .ctx-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.375rem;
|
|
height: 1.375rem;
|
|
border-radius: 5px;
|
|
background: var(--surface-3);
|
|
color: var(--text-2);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
.context-select .ctx-label {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
color: var(--text-1);
|
|
}
|
|
.context-select select {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
.nav-section {
|
|
padding: 0.75rem 0.5rem 0.375rem;
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
width: 100%;
|
|
padding: 0.45rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-2);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.1s ease;
|
|
text-align: left;
|
|
position: relative;
|
|
}
|
|
.nav-item svg { flex-shrink: 0; color: var(--text-2); transition: color 0.1s ease; }
|
|
.nav-item:hover {
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
}
|
|
.nav-item:hover svg { color: var(--text-1); }
|
|
.nav-item.active {
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
}
|
|
.nav-item.active::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 2px;
|
|
height: 1rem;
|
|
border-radius: 0 2px 2px 0;
|
|
background: var(--accent);
|
|
}
|
|
.nav-item.active svg { color: var(--accent); }
|
|
.nav-item .nav-badge {
|
|
margin-left: auto;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
background: var(--surface-3);
|
|
color: var(--text-2);
|
|
padding: 0.1rem 0.4rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.user-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.5rem;
|
|
border-radius: var(--radius);
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease;
|
|
text-align: left;
|
|
}
|
|
.user-card:hover { background: var(--surface-2); }
|
|
.user-card .user-name {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-1);
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.user-card .user-email {
|
|
font-size: 0.6875rem;
|
|
color: var(--text-3);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- topbar ---------- */
|
|
.main-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
height: 3.5rem;
|
|
padding: 0 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg);
|
|
flex-shrink: 0;
|
|
}
|
|
.topbar-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.8125rem;
|
|
min-width: 0;
|
|
}
|
|
.crumb {
|
|
color: var(--text-3);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.crumb.current { color: var(--text-1); font-weight: 500; }
|
|
.crumb-sep { color: var(--border-strong); }
|
|
|
|
.topbar-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
height: 2rem;
|
|
padding: 0 0.625rem;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border-strong);
|
|
background: var(--surface);
|
|
color: var(--text-3);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
min-width: 11rem;
|
|
}
|
|
.topbar-search:hover {
|
|
border-color: var(--text-3);
|
|
color: var(--text-2);
|
|
}
|
|
.topbar-search .kbd { margin-left: auto; }
|
|
|
|
.health-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
height: 1.625rem;
|
|
padding: 0 0.625rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: var(--text-2);
|
|
white-space: nowrap;
|
|
}
|
|
.health-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.health-dot.ok { background: var(--success); }
|
|
.health-dot.warn { background: var(--warning); }
|
|
.health-dot.err { background: var(--error); }
|
|
|
|
.demo-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
height: 1.625rem;
|
|
padding: 0 0.625rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--accent-border);
|
|
background: var(--accent-muted);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.12s ease;
|
|
}
|
|
.demo-pill:hover { border-color: var(--accent); }
|
|
|
|
.icon-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: var(--radius);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
.icon-btn:hover {
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.5rem;
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.main-content { padding: 2rem; }
|
|
}
|
|
|
|
.sidebar-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
.bottom-nav {
|
|
display: none;
|
|
}
|
|
|
|
/* ---------- page scaffold ---------- */
|
|
.page {
|
|
max-width: 72rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
.page-wide { max-width: 88rem; }
|
|
.page-header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.page-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
color: var(--text-1);
|
|
line-height: 1.15;
|
|
}
|
|
.page-sub {
|
|
margin-top: 0.375rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-3);
|
|
}
|
|
.page-sub code { font-size: 0.75rem; }
|
|
.page-description {
|
|
margin-top: 0.375rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-3);
|
|
}
|
|
.page-description code { font-size: 0.75rem; }
|
|
.page-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-3);
|
|
}
|
|
.divider::before,
|
|
.divider::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--border);
|
|
}
|
|
.section-title {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--text-1);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ---------- empty state ---------- */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 3rem 1.5rem;
|
|
gap: 0.375rem;
|
|
}
|
|
.empty-state-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: var(--radius);
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-3);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.empty-state-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-1);
|
|
}
|
|
.empty-state-description {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-3);
|
|
max-width: 22rem;
|
|
}
|
|
|
|
/* ---------- page tabs ---------- */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.125rem 0.625rem;
|
|
margin-bottom: -1px;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: color 0.1s ease, border-color 0.1s ease;
|
|
}
|
|
.tab:hover:not(:disabled) { color: var(--text-1); }
|
|
.tab.active {
|
|
color: var(--text-1);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
.tab:disabled { opacity: 0.4; cursor: default; }
|
|
.tab .nav-badge { margin-left: 0.25rem; }
|
|
|
|
/* ---------- segmented tabs (login) ---------- */
|
|
.seg {
|
|
display: flex;
|
|
padding: 3px;
|
|
border-radius: var(--radius);
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
gap: 3px;
|
|
}
|
|
.seg-item {
|
|
flex: 1;
|
|
height: 1.875rem;
|
|
border-radius: var(--radius-sm);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
}
|
|
.seg-item:hover { color: var(--text-1); }
|
|
.seg-item.active {
|
|
background: var(--surface);
|
|
color: var(--text-1);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* ---------- auth layout ---------- */
|
|
.auth-wrap {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
.auth-brand {
|
|
display: none;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 2.5rem;
|
|
border-right: 1px solid var(--border);
|
|
background: var(--bg-panel);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
@media (min-width: 900px) {
|
|
.auth-brand { display: flex; }
|
|
}
|
|
.auth-brand-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--border-strong) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border-strong) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
opacity: 0.35;
|
|
mask-image: radial-gradient(ellipse at 25% 45%, black, transparent 70%);
|
|
-webkit-mask-image: radial-gradient(ellipse at 25% 45%, black, transparent 70%);
|
|
}
|
|
.auth-brand-inner { position: relative; z-index: 1; }
|
|
.auth-tagline {
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.2;
|
|
color: var(--text-1);
|
|
max-width: 20rem;
|
|
}
|
|
.auth-points {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.875rem;
|
|
}
|
|
.auth-point {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.625rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-2);
|
|
}
|
|
.auth-point::before {
|
|
content: "";
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 1px;
|
|
background: var(--accent);
|
|
flex-shrink: 0;
|
|
transform: translateY(-2px);
|
|
}
|
|
.auth-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
padding: 2rem 1.25rem;
|
|
min-width: 0;
|
|
}
|
|
@media (min-width: 900px) {
|
|
.auth-panel { flex: 0 0 32rem; }
|
|
}
|
|
.auth-card {
|
|
width: 100%;
|
|
max-width: 22rem;
|
|
}
|
|
|
|
/* ---------- animations ---------- */
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes scale-in {
|
|
from { opacity: 0; transform: scale(0.97) translateY(4px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
.animate-slide-up { animation: slide-up 0.2s ease-out; }
|
|
.animate-fade-in { animation: fade-in 0.15s ease-out; }
|
|
.animate-scale-in { animation: scale-in 0.15s ease-out; }
|
|
}
|
|
|
|
/* ------------------------------------------------------------
|
|
RESPONSIVE SHELL
|
|
------------------------------------------------------------ */
|
|
|
|
@media (max-width: 1023px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 40;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.sidebar.open { transform: translateX(0); }
|
|
.sidebar-backdrop {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
z-index: 30;
|
|
animation: fade-in 0.15s ease-out;
|
|
}
|
|
|
|
.bottom-nav {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-panel);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.bottom-nav-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.1875rem;
|
|
min-height: 3.25rem;
|
|
padding: 0.375rem 0.25rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-3);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: color 0.1s ease;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.bottom-nav-item:active { color: var(--text-1); }
|
|
.bottom-nav-item.active { color: var(--accent); }
|
|
.bottom-nav-item.active::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1.5rem;
|
|
height: 2px;
|
|
border-radius: 0 0 2px 2px;
|
|
background: var(--accent);
|
|
}
|
|
.bottom-nav-item svg { color: inherit; }
|
|
}
|