summaryrefslogtreecommitdiff
path: root/frontend/src/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app.css')
-rw-r--r--frontend/src/app.css291
1 files changed, 70 insertions, 221 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css
index ae195ff..6e5f27d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -5,216 +5,77 @@
@custom-variant dark (&:is(.dark *));
-/* ==== round3 主题 sessions tokens ====
- 来源：用户在 shadcn 官网 create 的 Stripe 风格参考截图（preset b1D0dv72 CLI
- 拉取成功但落的是 neutral 默认，故按截图色值重配 tokens）。
- 参考取样：mint 主色 #70DAB6 / 深一档 #58D3AA；amber 主色 #F0AE00。
- 卡片白底、radius 0.75rem、大字重数字 tabular-nums。默认 mint，.theme-amber 切换。 */
+/* ==== preset b6t6C6CTw theme layer（shadcn-svelte CLI 生成，未做自定义编辑） ==== */
:root,
.dark {
- /* shadcn tokens — white card, Stripe-ish neutrals */
- --radius: 0.75rem;
- --background: #f7fafb;
- --foreground: #1e2a30;
- --card: #ffffff;
- --card-foreground: #1e2a30;
- --popover: #ffffff;
- --popover-foreground: #1e2a30;
- --primary: #0e3a30;
- --primary-foreground: #ffffff;
- --secondary: #eef3f4;
- --secondary-foreground: #26414a;
- --muted: #eef3f4;
- --muted-foreground: #5c6c74;
- --accent: #e3f7ef;
- --accent-foreground: #0b5d47;
- --destructive: #b91c1c;
- --input: #d6e0e3;
- --ring: #70dab6;
- --border: #e2eaec;
- /* mint demo（默认） */
- --brand: #58d3aa;
- --brand-strong: #0f9f7a;
- --brand-soft: #e3f7ef;
- --brand-ink: #0b4a3a;
- /* chart 家族（mint 梯度，贴近截图的柔和强调） */
- --chart-1: #58d3aa;
- --chart-2: #0f9f7a;
- --chart-3: #0b4a3a;
- --chart-4: #c4b37a;
- --chart-5: #94a6ac;
- --sidebar: #ffffff;
- --sidebar-foreground: #1e2a30;
- --sidebar-border: #e2eaec;
- /* legacy alias（迁移期语义映射，等价 token 而非旧组件样式） */
- --bg: var(--background);
- --surface: var(--card);
- --surface-2: var(--secondary);
- --border-strong: #cbd5d8;
- --text: var(--foreground);
- --text-2: var(--muted-foreground);
- --text-3: #7b8a92;
- --teal: var(--brand);
- --teal-strong: var(--brand-strong);
- --teal-soft: var(--brand-soft);
- --ink: var(--brand-ink);
- --danger-soft: #fdf2f2;
- --warn: #92400e;
- --warn-soft: #fff9ec;
- --ok: #15803d;
- --ok-soft: #ecfdf3;
- --shadow: 0 1px 2px rgba(16, 42, 49, 0.05), 0 2px 8px rgba(16, 42, 49, 0.05);
- --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Noto Sans Mono CJK SC', monospace;
- --font: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
- 'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
- --sidebar-primary: var(--primary);
- --sidebar-primary-foreground: var(--primary-foreground);
- --sidebar-accent: var(--secondary);
- --sidebar-accent-foreground: var(--foreground);
- --sidebar-ring: var(--ring);
+ --radius: 0.625rem;
+ --background: oklch(0.148 0.004 228.8);
+ --foreground: oklch(0.987 0.002 197.1);
+ --card: oklch(0.218 0.008 223.9);
+ --card-foreground: oklch(0.987 0.002 197.1);
+ --popover: oklch(0.218 0.008 223.9);
+ --popover-foreground: oklch(0.987 0.002 197.1);
+ --primary: oklch(0.444 0.177 26.899);
+ --primary-foreground: oklch(0.971 0.013 17.38);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.275 0.011 216.9);
+ --muted-foreground: oklch(0.723 0.014 214.4);
+ --accent: oklch(0.275 0.011 216.9);
+ --accent-foreground: oklch(0.987 0.002 197.1);
+ --destructive: oklch(0.704 0.191 22.216);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.56 0.021 213.5);
+ --border: oklch(1 0 0 / 10%);
+ --chart-1: oklch(0.872 0.007 219.6);
+ --chart-2: oklch(0.56 0.021 213.5);
+ --chart-3: oklch(0.45 0.017 213.2);
+ --chart-4: oklch(0.378 0.015 216);
+ --chart-5: oklch(0.275 0.011 216.9);
+ --sidebar: oklch(0.218 0.008 223.9);
+ --sidebar-foreground: oklch(0.987 0.002 197.1);
+ --sidebar-primary: oklch(0.637 0.237 25.331);
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+ --sidebar-accent: oklch(0.275 0.011 216.9);
+ --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.56 0.021 213.5);
}
-/* amber demo：第二套 CSS 变量组（src/lib/theme.ts 切换 .theme-amber） */
-.theme-amber {
- --primary: #b87700;
- --primary-foreground: #ffffff;
- --accent: #fdf3d7;
- --accent-foreground: #7a5200;
- --ring: #f0ae00;
- --brand: #f0ae00;
- --brand-strong: #c08700;
- --brand-soft: #fdf3d7;
- --brand-ink: #5d3f00;
- --chart-1: #f0ae00;
- --chart-2: #b87700;
- --chart-3: #6e4a00;
- --chart-4: #58d3aa;
- --chart-5: #94a6ac;
-}
-
-/* legacy 名义色到主题的映射：amber 组同样生效 */
-.theme-amber { --teal: var(--brand); --teal-strong: var(--brand-strong); --teal-soft: var(--brand-soft); --ink: var(--brand-ink); }
-
.dark {
- --background: #10181b;
- --foreground: #eef3f4;
- --card: #16211f;
- --card-foreground: #eef3f4;
- --popover: #16201f;
- --popover-foreground: #eef3f4;
- --primary: #58d3aa;
- --primary-foreground: #0b1a16;
- --secondary: #1c2a27;
- --secondary-foreground: #eef3f4;
- --muted: #1c2a27;
- --muted-foreground: #93a5ab;
- --accent: #12332c;
- --accent-foreground: #8aeccf;
- --destructive: #e05252;
- --input: #243437;
- --ring: #58d3aa;
- --border: #223433;
- --border-strong: #2c4340;
- --brand-soft: rgba(88, 211, 170, 0.14);
- --text-2: #93a5ab;
- --text-3: #7b8a92;
- --danger-soft: rgba(185, 28, 28, 0.2);
- --warn-soft: rgba(146, 64, 14, 0.2);
- --ok: #4ade80;
-}
-
-* { box-sizing: border-box; }
-
-/* 全局 150ms 微过渡 */
-a, button, input, select, textarea, [data-slot='card'], .navlink {
- transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
- box-shadow 150ms ease, transform 150ms ease;
-}
-
-@media (hover: hover) and (min-width: 768px) {
- [data-slot='card']:hover {
- box-shadow: 0 4px 14px rgba(16, 42, 49, 0.08);
- transform: translateY(-1px);
- }
-}
-
-html, body {
- margin: 0;
- padding: 0;
- background: var(--background);
- color: var(--foreground);
- font-family: var(--font);
- font-size: 14.5px;
- line-height: 1.55;
- -webkit-font-smoothing: antialiased;
- background-color: var(--background);
-}
-
-h1, h2, h3, h4 { font-weight: 600; margin: 0; }
-h1 { font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.25; }
-h2 { font-size: 1.18rem; letter-spacing: -0.01em; }
-h3 { font-size: 1.02rem; }
-
-a { color: var(--brand-strong); text-decoration: none; }
-a:hover { text-decoration: underline; }
-p { margin: 0.4rem 0; }
-
-button, input, select, textarea { font: inherit; color: inherit; }
-button { cursor: pointer; }
-
-/* 布局原语（非组件 facade）：排列结构工具 */
-.stack { display: flex; flex-direction: column; gap: 0.75rem; }
-.row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
-.spread { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
-.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
-.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
-.cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
-.table-wrap { overflow-x: auto; min-width: 0; }
-.card, .stack, .row, .spread { min-width: 0; }
-
-/* Semaphore 数字排印（Stripe 仪表感）：大字重 + 等宽数字 */
-.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
-.mlabel { color: var(--text-3); font-size: 0.8rem; }
-.mvalue {
- font-size: 1.5rem;
- font-weight: 700;
- letter-spacing: -0.01em;
- color: var(--foreground);
- font-variant-numeric: tabular-nums;
- font-family: var(--mono);
- overflow-wrap: anywhere;
+ --background: oklch(0.148 0.004 228.8);
+ --foreground: oklch(0.987 0.002 197.1);
+ --card: oklch(0.218 0.008 223.9);
+ --card-foreground: oklch(0.987 0.002 197.1);
+ --popover: oklch(0.218 0.008 223.9);
+ --popover-foreground: oklch(0.987 0.002 197.1);
+ --primary: oklch(0.444 0.177 26.899);
+ --primary-foreground: oklch(0.971 0.013 17.38);
+ --secondary: oklch(0.274 0.006 286.033);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.275 0.011 216.9);
+ --muted-foreground: oklch(0.723 0.014 214.4);
+ --accent: oklch(0.275 0.011 216.9);
+ --accent-foreground: oklch(0.987 0.002 197.1);
+ --destructive: oklch(0.704 0.191 22.216);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.56 0.021 213.5);
+ --border: oklch(1 0 0 / 10%);
+ --chart-1: oklch(0.872 0.007 219.6);
+ --chart-2: oklch(0.56 0.021 213.5);
+ --chart-3: oklch(0.45 0.017 213.2);
+ --chart-4: oklch(0.378 0.015 216);
+ --chart-5: oklch(0.275 0.011 216.9);
+ --sidebar: oklch(0.218 0.008 223.9);
+ --sidebar-foreground: oklch(0.987 0.002 197.1);
+ --sidebar-primary: oklch(0.637 0.237 25.331);
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+ --sidebar-accent: oklch(0.275 0.011 216.9);
+ --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.56 0.021 213.5);
}
-.mvalue-sub { color: var(--text-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
-.metric-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
- gap: 0.7rem;
-}
-.run-split { display: inline-flex; gap: 0.5rem; align-items: baseline; }
-.run-split i { font-style: normal; color: var(--text-3); font-size: 0.75rem; }
-
-.hint { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
-label { display: block; font-size: 0.84rem; color: var(--text-2); font-weight: 500; margin-bottom: 0.25rem; }
-input, select, textarea { font: inherit; color: inherit; }
-
-code, pre { font-family: var(--mono); font-size: 0.85rem; }
-pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
-
-.sr-only {
- position: absolute;
- width: 1px; height: 1px;
- padding: 0; margin: -1px;
- overflow: hidden; clip: rect(0 0 0 0);
- border: 0;
-}
-
-/* narrow-viewport wrapping（保留：文档级防溢出行为，非组件样式） */
-.banner { overflow-wrap: anywhere; }
-.banner .err-list { overflow-wrap: anywhere; }
-.table.data, table.data { min-width: 0; }
-.mono-invite { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }
-.ul-plain { margin: 0.15rem 0 0; padding-left: 1.1rem; }
@theme inline {
--font-sans: 'Inter Variable', sans-serif;
@@ -256,28 +117,16 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
- --radius-0.75rem: var(--radius);
}
@layer base {
- * {
- @apply border-border outline-ring/50;
+ * {
+ @apply border-border outline-ring/50;
}
- body {
- @apply bg-background text-foreground;
+ body {
+ @apply bg-background text-foreground;
}
- html {
- @apply font-sans;
- }
-}
-
-/* ---- 窄视口收敛（保留行为：不做全局隐藏，仅塌缩/换行 + 局部滚动） ---- */
-@media (max-width: 900px) {
- .cols-2 { grid-template-columns: minmax(0, 1fr); }
- .metric-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
- .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
- table.data th, table.data td {
- white-space: normal;
- overflow-wrap: anywhere;
+ html {
+ @apply font-sans;
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-10-04 11:33:20 +0000