feat: migrate spectra lab to tailwind responsive system

2026-04-23 14:15:32 +08:00
parent ee4c172b34
commit 04d6aebe59
7 changed files with 1356 additions and 909 deletions
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -0,0 +1,126 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #121212;
+  --bg-soft: #181818;
+  --panel: #1d1b1a;
+  --panel-2: #23211f;
+  --paper: #f2ece4;
+  --paper-soft: #e5ddd1;
+  --ink: #151515;
+  --text: #f3efe8;
+  --muted: rgba(243, 239, 232, 0.68);
+  --line: rgba(255, 255, 255, 0.11);
+  --line-strong: rgba(255, 255, 255, 0.22);
+  --accent: #7f2f2f;
+  --accent-soft: rgba(127, 47, 47, 0.12);
+}
+
+body.light-mode {
+  --bg: #eee7dd;
+  --bg-soft: #e6ddd1;
+  --panel: #f7f1e8;
+  --panel-2: #f1eadf;
+  --paper: #fffdfa;
+  --paper-soft: #f3ebdf;
+  --ink: #171717;
+  --text: #171717;
+  --muted: rgba(23, 23, 23, 0.7);
+  --line: rgba(23, 23, 23, 0.11);
+  --line-strong: rgba(23, 23, 23, 0.2);
+  --accent: #8d3d38;
+  --accent-soft: rgba(141, 61, 56, 0.12);
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply m-0 min-h-screen font-sans antialiased;
+    color: var(--text);
+    background:
+      radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
+      linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
+  }
+}
+
+@layer components {
+  .shell {
+    @apply relative mx-auto w-[min(1320px,calc(100%-24px))] md:w-[min(1320px,calc(100%-48px))] pb-10;
+  }
+
+  .grid-overlay {
+    @apply pointer-events-none absolute inset-0 z-0 hidden md:grid md:grid-cols-12 md:gap-6;
+  }
+
+  .grid-overlay span {
+    border-left: 1px solid var(--line);
+    opacity: 0.65;
+  }
+
+  .grid-overlay span:last-child {
+    border-right: 1px solid var(--line);
+  }
+
+  .ui-card {
+    @apply border shadow-soft;
+    border-color: var(--line);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
+  }
+
+  .muted {
+    color: var(--muted);
+  }
+
+  .smallcaps {
+    @apply text-[11px] uppercase tracking-[0.16em];
+    color: var(--muted);
+  }
+
+  .work-item.is-active,
+  .tone-chip.is-active,
+  .note-item.is-active {
+    border-color: var(--line-strong);
+    background: var(--accent-soft);
+  }
+
+  .work-item.is-active .work-number,
+  .work-item.is-active small {
+    color: var(--text);
+  }
+
+  .swatch.is-active {
+    outline: 2px solid color-mix(in srgb, var(--swatch) 60%, white 40%);
+    outline-offset: 2px;
+  }
+
+  .reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 650ms ease, transform 650ms ease;
+  }
+
+  .reveal.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .stage-card.is-refreshing {
+    animation: stageRefresh 320ms ease;
+  }
+}
+
+@keyframes stageRefresh {
+  0% {
+    transform: translateY(8px);
+    opacity: 0.88;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}