Unify the design system: Geist, 4px grid, restrained scale
Establish one token system across the shell and primitives: - Typography: vendor Geist (variable woff2, self-hosted, CSP-clean); body 14/16px, title 18px, captions 12px; drop oversized headings. - Color: primary #181818, secondary #6A6A6A over a pure-neutral ramp. - Spacing: strict 4px grid via --sp-* tokens. - Radius: 8 → 40 scale (--r-sm..--r-2xl, --r-full). - Icons: 18px glyph, 1.5 stroke, 24px bound by default. Sweeps tokens through styles.css, components.css, and overlays.css so buttons, inputs, cards, pills, menus, the sidebar, topbar, and page titles all read from the same scale. No page logic touched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 4.8 committed
1 parent
56dbca3bf7
commit
02c9da6fe9
8 files changed
+253
-195
No files matched your search
Binary file not shown.
Binary file not shown.
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { App } from "./app/App";
|
||||
import "./styles/fonts.css";
|
||||
import "./styles.css";
|
||||
import "./styles/components.css";
|
||||
import "./overlays.css";
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
background: rgba(9, 9, 11, 0.22);
|
||||
background: rgba(24, 24, 24, 0.22);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
padding: var(--sp-6);
|
||||
animation: backdrop-enter var(--motion-fast) var(--ease-out);
|
||||
}
|
||||
.modal {
|
||||
@@ -13,10 +13,10 @@
|
||||
max-height: min(760px, 100%);
|
||||
overflow: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
border-radius: var(--r-xl);
|
||||
background: var(--panel);
|
||||
box-shadow: 0 20px 60px rgba(9, 9, 11, 0.18);
|
||||
padding: 20px;
|
||||
box-shadow: 0 20px 60px rgba(24, 24, 24, 0.18);
|
||||
padding: var(--sp-5);
|
||||
animation: overlay-enter var(--motion-base) var(--ease-out-expo);
|
||||
}
|
||||
@keyframes backdrop-enter {
|
||||
@@ -27,8 +27,8 @@
|
||||
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.modal-title { margin: 0 0 14px; font-size: 16px; font-weight: 620; letter-spacing: -0.01em; }
|
||||
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
|
||||
.modal-title { margin: 0 0 var(--sp-4); font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; }
|
||||
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }
|
||||
|
||||
.onboarding-window {
|
||||
width: 100%;
|
||||
@@ -49,7 +49,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 58px;
|
||||
padding: 56px;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
}
|
||||
.onboarding-panel {
|
||||
@@ -65,37 +65,37 @@
|
||||
}
|
||||
.onboarding-titlebar {
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 12px;
|
||||
padding: 0 var(--sp-3);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
.onboarding-titlebar .window-controls { -webkit-app-region: no-drag; }
|
||||
.onboarding-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
|
||||
.onboarding-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-7); }
|
||||
.step-chip {
|
||||
height: 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 0 9px;
|
||||
border-radius: var(--r-full);
|
||||
padding: 0 var(--sp-3);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-3);
|
||||
background: var(--panel);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
|
||||
}
|
||||
.step-chip.active { color: var(--text-1); border-color: var(--text-1); }
|
||||
/* One onboarding step entering after the previous one leaves. */
|
||||
.step-view { animation: view-enter var(--motion-base) var(--ease-out-expo); }
|
||||
.form-grid { display: grid; gap: 14px; }
|
||||
.option-grid { display: grid; gap: 8px; }
|
||||
.form-grid { display: grid; gap: var(--sp-4); }
|
||||
.option-grid { display: grid; gap: var(--sp-2); }
|
||||
.option-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--panel);
|
||||
padding: 14px;
|
||||
padding: var(--sp-4);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
@@ -107,13 +107,13 @@
|
||||
.option-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
|
||||
.option-card:active { transform: scale(0.99); }
|
||||
.option-card.active { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
|
||||
.option-card .opt-title { font-size: 13.5px; font-weight: 540; }
|
||||
.option-card .opt-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
|
||||
.option-card .opt-title { font-size: var(--fs-body); font-weight: 540; }
|
||||
.option-card .opt-sub { font-size: var(--fs-caption); color: var(--text-3); margin-top: var(--sp-1); }
|
||||
.provider-inline-form {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
margin: 2px 0 6px;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
margin: 2px 0 var(--sp-2);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--panel-2);
|
||||
@@ -130,10 +130,10 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 6px;
|
||||
padding: var(--sp-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
gap: 2px;
|
||||
animation: menu-enter var(--motion-fast) var(--ease-out-expo);
|
||||
}
|
||||
@keyframes menu-enter {
|
||||
@@ -143,22 +143,22 @@
|
||||
.popover-panel.end { right: 0; }
|
||||
.popover-panel.start { left: 0; }
|
||||
.menu-label {
|
||||
padding: 6px 8px 4px;
|
||||
font-size: 11px;
|
||||
padding: var(--sp-2) var(--sp-2) var(--sp-1);
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.menu-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
|
||||
@@ -168,14 +168,14 @@
|
||||
.menu-row.danger { color: var(--red); }
|
||||
.menu-row.danger:hover { background: rgba(210, 59, 59, 0.1); color: var(--red); }
|
||||
.menu-row .menu-check { margin-left: auto; color: var(--accent); display: inline-flex; }
|
||||
.menu-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
|
||||
.menu-divider { height: 1px; background: var(--border-soft); margin: var(--sp-1) 0; }
|
||||
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.content { padding: 24px 24px 36px; }
|
||||
.content { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
|
||||
}
|
||||
@media (max-width: 980px) {
|
||||
.sidebar { width: 64px; }
|
||||
@@ -183,11 +183,11 @@
|
||||
.sidebar .nav-item span:not(.nav-badge),
|
||||
.sidebar-foot-name,
|
||||
.sidebar .search-bar > span:not(.search-kbd) { display: none; }
|
||||
.sidebar .search-bar { justify-content: center; padding: 6px; }
|
||||
.sidebar .search-bar { justify-content: center; padding: var(--sp-2); }
|
||||
.sidebar .search-kbd { display: none; }
|
||||
.content { padding: 20px 18px 32px; }
|
||||
.content { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
|
||||
.secondary-pane { width: 180px; }
|
||||
.onboarding-shell { grid-template-columns: 1fr; overflow-y: auto; }
|
||||
.onboarding-hero { padding: 28px; border-right: 0; border-bottom: 1px solid var(--border-soft); overflow-y: visible; }
|
||||
.onboarding-panel { padding: 28px; justify-content: flex-start; overflow-y: visible; }
|
||||
.onboarding-hero { padding: var(--sp-7); border-right: 0; border-bottom: 1px solid var(--border-soft); overflow-y: visible; }
|
||||
.onboarding-panel { padding: var(--sp-7); justify-content: flex-start; overflow-y: visible; }
|
||||
}
|
||||
@@ -47,9 +47,9 @@ export type IconName = keyof typeof PATHS | (string & {});
|
||||
|
||||
export function Icon({
|
||||
name,
|
||||
size = 14,
|
||||
size = 18,
|
||||
color = "currentColor",
|
||||
strokeWidth = 1.6,
|
||||
strokeWidth = 1.5,
|
||||
}: {
|
||||
name: IconName;
|
||||
size?: number;
|
||||
|
||||
@@ -1,16 +1,21 @@
|
||||
:root {
|
||||
/* Surfaces — pure-neutral gray ramp anchored on #181818 */
|
||||
--bg: #fafafa;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f6f6f7;
|
||||
--panel-3: #f1f1f2;
|
||||
--hover: #f4f4f5;
|
||||
--border: #ececef;
|
||||
--border-strong: #e2e2e6;
|
||||
--border-soft: #f1f1f3;
|
||||
--text-1: #09090b;
|
||||
--text-2: #52525b;
|
||||
--text-3: #a1a1aa;
|
||||
--text-4: #d4d4d8;
|
||||
--panel-2: #f6f6f6;
|
||||
--panel-3: #efefef;
|
||||
--hover: #f4f4f4;
|
||||
--border: #eaeaea;
|
||||
--border-strong: #e0e0e0;
|
||||
--border-soft: #f0f0f0;
|
||||
|
||||
/* Text — Primary #181818, Secondary #6A6A6A (+ derived muted/faint) */
|
||||
--text-1: #181818;
|
||||
--text-2: #6a6a6a;
|
||||
--text-3: #9a9a9a;
|
||||
--text-4: #c4c4c4;
|
||||
|
||||
/* Accent + status */
|
||||
--accent: #5e6ad2;
|
||||
--accent-soft: #eef0ff;
|
||||
--green: #2f9e58;
|
||||
@@ -18,15 +23,41 @@
|
||||
--amber: #c87d12;
|
||||
--amber-soft: #fbf3e2;
|
||||
--red: #d23b3b;
|
||||
--r-sm: 6px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 12px;
|
||||
--r-xl: 16px;
|
||||
--shadow-sm: 0 1px 0 rgba(9, 9, 11, 0.04), 0 1px 2px rgba(9, 9, 11, 0.04);
|
||||
--shadow-md: 0 1px 3px rgba(9, 9, 11, 0.06), 0 6px 24px rgba(9, 9, 11, 0.04);
|
||||
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
|
||||
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
|
||||
|
||||
/* Radius — 8 → 40 scale */
|
||||
--r-sm: 8px;
|
||||
--r-md: 12px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 20px;
|
||||
--r-2xl: 28px;
|
||||
--r-full: 999px;
|
||||
|
||||
/* Spacing — strict 4px grid */
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 20px;
|
||||
--sp-6: 24px;
|
||||
--sp-7: 28px;
|
||||
--sp-8: 32px;
|
||||
--sp-10: 40px;
|
||||
|
||||
/* Type scale — Geist; body 14/16, title 18, display 24 */
|
||||
--fs-caption: 12px;
|
||||
--fs-body: 14px;
|
||||
--fs-body-lg: 16px;
|
||||
--fs-title: 18px;
|
||||
--fs-display: 24px;
|
||||
|
||||
/* Icons — 18px glyph, 1.5 stroke, bound in a 24px box */
|
||||
--icon-box: 24px;
|
||||
|
||||
--shadow-sm: 0 1px 0 rgba(24, 24, 24, 0.03), 0 1px 2px rgba(24, 24, 24, 0.05);
|
||||
--shadow-md: 0 1px 3px rgba(24, 24, 24, 0.06), 0 6px 24px rgba(24, 24, 24, 0.05);
|
||||
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
|
||||
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--font-display: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
|
||||
--motion-fast: 120ms;
|
||||
--motion-base: 200ms;
|
||||
--motion-slow: 280ms;
|
||||
@@ -38,12 +69,21 @@
|
||||
html, body, #root { width: 100%; height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-feature-settings: "ss01", "cv11", "cv02";
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
color: var(--text-1);
|
||||
background: var(--bg);
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.005em;
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.006em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.icon-box {
|
||||
width: var(--icon-box);
|
||||
height: var(--icon-box);
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
button, input, textarea, select { font: inherit; color: inherit; }
|
||||
button { cursor: pointer; }
|
||||
@@ -62,23 +102,23 @@ a { color: inherit; }
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 14px 10px;
|
||||
padding: var(--sp-4) var(--sp-3);
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: var(--bg);
|
||||
}
|
||||
/* Clear the native macOS traffic lights that overlap the sidebar top. */
|
||||
.app-shell.is-mac .sidebar { padding-top: 34px; }
|
||||
.app-shell.is-mac .sidebar { padding-top: 36px; }
|
||||
.sidebar-org {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--r-sm);
|
||||
cursor: pointer;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: var(--sp-4);
|
||||
transition: background var(--motion-fast) var(--ease-out);
|
||||
}
|
||||
.sidebar-org:hover { background: var(--hover); }
|
||||
@@ -98,8 +138,8 @@ a { color: inherit; }
|
||||
}
|
||||
.brand-name {
|
||||
flex: 1;
|
||||
font-weight: 540;
|
||||
font-size: 13px;
|
||||
font-weight: 560;
|
||||
font-size: var(--fs-body);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -108,13 +148,13 @@ a { color: inherit; }
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 9px;
|
||||
border-radius: var(--r-md);
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--panel-2);
|
||||
color: var(--text-3);
|
||||
margin-bottom: 16px;
|
||||
font-size: 12.5px;
|
||||
margin-bottom: var(--sp-4);
|
||||
font-size: var(--fs-body);
|
||||
cursor: text;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
@@ -123,29 +163,29 @@ a { color: inherit; }
|
||||
.search-bar:hover { background: var(--panel-3); color: var(--text-2); }
|
||||
.search-kbd {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.nav { display: flex; flex-direction: column; gap: 1px; }
|
||||
.nav { display: flex; flex-direction: column; gap: 2px; }
|
||||
.nav-label {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
padding: 12px 8px 6px;
|
||||
padding: var(--sp-3) var(--sp-2) var(--sp-2);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 6px 8px;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--r-sm);
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-weight: 480;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-body);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -153,13 +193,13 @@ a { color: inherit; }
|
||||
}
|
||||
.nav-item:hover { background: var(--hover); color: var(--text-1); }
|
||||
.nav-item:active { transform: scale(0.985); }
|
||||
.nav-item.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
|
||||
.nav-item.active { background: var(--panel-3); color: var(--text-1); font-weight: 560; }
|
||||
.nav-item.active svg { color: var(--text-1); }
|
||||
.nav-item svg { color: var(--text-3); flex-shrink: 0; transition: color var(--motion-fast) var(--ease-out); }
|
||||
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.nav-item span:not(.nav-badge) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.nav-badge {
|
||||
margin-left: auto;
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -173,29 +213,29 @@ a { color: inherit; }
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 6px;
|
||||
padding: var(--sp-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
gap: 2px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.org-menu-section-label {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 4px 8px 4px;
|
||||
letter-spacing: 0.01em;
|
||||
padding: var(--sp-1) var(--sp-2);
|
||||
}
|
||||
.org-menu-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
|
||||
@@ -219,84 +259,84 @@ a { color: inherit; }
|
||||
.org-menu-confirm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--sp-1);
|
||||
background: var(--amber-soft);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 12px;
|
||||
padding: var(--sp-3);
|
||||
margin: 2px 0;
|
||||
}
|
||||
.org-menu-confirm-title {
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
font-weight: 600;
|
||||
color: var(--text-1);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.org-menu-confirm-hint { font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
|
||||
.org-menu-confirm-hint { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-3); }
|
||||
.org-menu-confirm-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
gap: var(--sp-2);
|
||||
margin-top: var(--sp-2);
|
||||
}
|
||||
.org-menu-confirm-yes {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
padding: 0 var(--sp-4);
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 560;
|
||||
cursor: pointer;
|
||||
}
|
||||
.org-menu-confirm-no {
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
padding: 0 var(--sp-4);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--panel);
|
||||
color: var(--text-2);
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-caption);
|
||||
cursor: pointer;
|
||||
}
|
||||
.org-menu-confirm-no:hover { background: var(--hover); color: var(--text-1); }
|
||||
.org-menu-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
|
||||
.org-menu-divider { height: 1px; background: var(--border-soft); margin: var(--sp-1) 0; }
|
||||
.org-menu-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-2);
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
|
||||
}
|
||||
.org-menu-action:hover { background: var(--hover); color: var(--text-1); }
|
||||
.brand-mark.sm {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 11px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.sidebar-spacer { flex: 1; }
|
||||
.sidebar-foot {
|
||||
padding: 10px 8px 4px;
|
||||
margin-top: 8px;
|
||||
padding: var(--sp-3) var(--sp-2) var(--sp-1);
|
||||
margin-top: var(--sp-2);
|
||||
border-top: 1px solid var(--border-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
.sidebar-foot-name {
|
||||
flex: 1;
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-body);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -311,12 +351,12 @@ a { color: inherit; }
|
||||
background: var(--bg);
|
||||
}
|
||||
.topbar {
|
||||
height: 44px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
gap: var(--sp-3);
|
||||
padding: 0 var(--sp-5);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
@@ -324,17 +364,17 @@ a { color: inherit; }
|
||||
.topbar select,
|
||||
.topbar input,
|
||||
.topbar a { -webkit-app-region: no-drag; }
|
||||
.crumb { font-size: 13px; font-weight: 540; color: var(--text-1); }
|
||||
.crumb-sub { font-size: 13px; color: var(--text-3); }
|
||||
.crumb { font-size: var(--fs-body); font-weight: 560; color: var(--text-1); }
|
||||
.crumb-sub { font-size: var(--fs-body); color: var(--text-3); }
|
||||
.crumb-sep { color: var(--text-4); }
|
||||
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
|
||||
.topbar-actions-slot { display: flex; align-items: center; gap: 6px; }
|
||||
.window-controls { display: flex; align-items: center; gap: 2px; padding-left: 6px; }
|
||||
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.topbar-actions-slot { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.window-controls { display: flex; align-items: center; gap: 2px; padding-left: var(--sp-2); }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 28px 32px 40px;
|
||||
padding: var(--sp-7) var(--sp-8) var(--sp-10);
|
||||
}
|
||||
/* One route's content entering: a quiet rise that signals the view changed.
|
||||
The wrapper is structural for flush routes, so it must stay a flex column. */
|
||||
@@ -379,25 +419,25 @@ a { color: inherit; }
|
||||
.page { max-width: 1100px; }
|
||||
.page-wide { width: 100%; }
|
||||
.page-h1 {
|
||||
margin: 0 0 4px;
|
||||
margin: 0 0 var(--sp-1);
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 620;
|
||||
letter-spacing: -0.018em;
|
||||
font-size: var(--fs-title);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.014em;
|
||||
}
|
||||
.page-sub {
|
||||
margin: 0 0 24px;
|
||||
margin: 0 0 var(--sp-6);
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
.section-label {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: var(--sp-2);
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
|
||||
.col { display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.split-main { display: flex; flex-direction: row; min-height: 0; flex: 1; }
|
||||
@@ -405,7 +445,7 @@ a { color: inherit; }
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
padding: 14px 10px;
|
||||
padding: var(--sp-3) var(--sp-2);
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -461,10 +501,10 @@ a { color: inherit; }
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 14px;
|
||||
gap: var(--sp-2);
|
||||
padding: 0 var(--sp-4);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-sm);
|
||||
text-align: left;
|
||||
@@ -476,7 +516,7 @@ a { color: inherit; }
|
||||
.org-node-card.human { border-color: var(--amber); background: var(--amber-soft); }
|
||||
.org-node-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||
.org-node-name {
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-body);
|
||||
font-weight: 560;
|
||||
letter-spacing: -0.01em;
|
||||
overflow: hidden;
|
||||
@@ -484,7 +524,7 @@ a { color: inherit; }
|
||||
white-space: nowrap;
|
||||
}
|
||||
.org-node-role {
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -2,26 +2,26 @@
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 16px;
|
||||
padding: var(--sp-4);
|
||||
}
|
||||
.card-label {
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 28px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--r-md);
|
||||
gap: var(--sp-2);
|
||||
padding: 0 var(--sp-3);
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--panel);
|
||||
color: var(--text-1);
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-body);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
@@ -34,18 +34,18 @@
|
||||
.button:hover { background: var(--panel-2); }
|
||||
.button:active:not(:disabled) { transform: scale(0.97); }
|
||||
.button.primary { background: var(--text-1); color: #fff; border-color: var(--text-1); }
|
||||
.button.primary:hover { background: #27272a; }
|
||||
.button.primary:hover { background: #2c2c2c; }
|
||||
.button.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
|
||||
.button.ghost:hover { background: var(--hover); color: var(--text-1); }
|
||||
.button.small { height: 24px; padding: 0 8px; font-size: 12px; }
|
||||
.button.small { height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-caption); }
|
||||
.button:disabled { opacity: 0.45; cursor: default; }
|
||||
|
||||
.icon-button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--text-2);
|
||||
@@ -67,20 +67,20 @@
|
||||
.segmented {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
gap: var(--sp-1);
|
||||
padding: var(--sp-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--panel);
|
||||
}
|
||||
.segmented .segment {
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
height: 24px;
|
||||
padding: 0 var(--sp-2);
|
||||
border-radius: var(--r-sm);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 500;
|
||||
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
|
||||
}
|
||||
@@ -90,14 +90,14 @@
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: var(--sp-1);
|
||||
height: 20px;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
padding: 0 var(--sp-2);
|
||||
border-radius: var(--r-full);
|
||||
background: var(--panel-2);
|
||||
color: var(--text-2);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
|
||||
@@ -120,14 +120,14 @@
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.avatar.bot { border-radius: 8px; }
|
||||
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
|
||||
.avatar.lg { width: 36px; height: 36px; font-size: 13px; }
|
||||
.avatar.xl { width: 48px; height: 48px; font-size: 16px; }
|
||||
.avatar.bot { border-radius: var(--r-sm); }
|
||||
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
|
||||
.avatar.lg { width: 36px; height: 36px; font-size: var(--fs-body); }
|
||||
.avatar.xl { width: 48px; height: 48px; font-size: var(--fs-body-lg); }
|
||||
.avatar-stack { display: inline-flex; }
|
||||
.avatar-stack > .avatar-ring { margin-left: -6px; border: 2px solid var(--panel); border-radius: 50%; }
|
||||
.avatar-stack > .avatar-ring:first-child { margin-left: 0; }
|
||||
@@ -138,49 +138,49 @@
|
||||
.input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--panel);
|
||||
color: var(--text-1);
|
||||
padding: 8px 10px;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
outline: none;
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
|
||||
}
|
||||
.input:focus { border-color: var(--text-1); box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.06); }
|
||||
input[type="checkbox"] { accent-color: var(--accent); }
|
||||
.input:focus { border-color: var(--text-1); box-shadow: 0 0 0 3px rgba(24, 24, 24, 0.06); }
|
||||
input[type="checkbox"] { accent-color: var(--text-1); }
|
||||
textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: var(--sp-2);
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
font-size: var(--fs-caption);
|
||||
}
|
||||
.field > span { color: var(--text-2); font-weight: 500; }
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--sp-2);
|
||||
color: var(--text-2);
|
||||
font-size: 12.5px;
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
|
||||
.divider { height: 1px; background: var(--border-soft); margin: 16px 0; }
|
||||
.divider { height: 1px; background: var(--border-soft); margin: var(--sp-4) 0; }
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: var(--sp-3);
|
||||
align-items: center;
|
||||
padding: 12px 18px;
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
font-size: 13px;
|
||||
font-size: var(--fs-body);
|
||||
}
|
||||
.table-row.head {
|
||||
padding: 10px 18px;
|
||||
font-size: 11px;
|
||||
padding: var(--sp-2) var(--sp-4);
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-3);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0.01em;
|
||||
background: var(--panel-2);
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
}
|
||||
@@ -201,23 +201,23 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
|
||||
}
|
||||
.link-button:hover { color: var(--text-1); }
|
||||
|
||||
.oauth-connect { display: flex; flex-direction: column; gap: 8px; }
|
||||
.oauth-connect-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
|
||||
.oauth-connect { display: flex; flex-direction: column; gap: var(--sp-2); }
|
||||
.oauth-connect-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--text-2); }
|
||||
.oauth-connect-row.done { color: var(--text-1); }
|
||||
.oauth-connect-row .link-button { margin-left: auto; }
|
||||
.oauth-connect-code {
|
||||
font-family: ui-monospace, Menlo, Consolas, monospace;
|
||||
font-size: 12.5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--text-1);
|
||||
background: var(--panel-3);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 8px 10px;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
word-break: break-word;
|
||||
}
|
||||
.oauth-connect-error { font-size: 12px; color: var(--red); }
|
||||
.oauth-connect-error { font-size: var(--fs-caption); color: var(--red); }
|
||||
.spinner {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--border-strong);
|
||||
border-top-color: var(--text-2);
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
/* Geist is vendored locally (variable woff2) so the desktop build stays
|
||||
offline and CSP-clean (font-src 'self'). One file per family covers every
|
||||
weight via the variable axis. */
|
||||
@font-face {
|
||||
font-family: "Geist";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("../fonts/Geist-Variable.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geist Mono";
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
|
||||
}
|
||||
Reference in new issue
Block a user