refactor: implement new UI/UX architecture with redesigned desktop and mobile layouts, CSS-in-CSS modularization, and updated components.

2026-08-29 00:53:57 -07:00
parent dfbf646332
commit cd98c0120e
47 changed files with 8039 additions and 7236 deletions
@@ -0,0 +1,79 @@
+/* RSSPipe - High-Precision Metallic Monochrome Design Tokens */
+
+:root {
+  /* Surfaces & Backgrounds (Crisp Titanium & Neutral Monochrome) */
+  --bg-app: #f4f4f5;
+  --bg-surface: #ffffff;
+  --bg-sidebar: #fafafa;
+  --bg-card: #ffffff;
+  --bg-card-hover: #f4f4f5;
+  --bg-card-active: #e4e4e7;
+  --bg-subtle: #f4f4f5;
+  --bg-overlay: rgba(9, 9, 11, 0.45);
+  --bg-docked: rgba(255, 255, 255, 0.96);
+
+  /* Borders (Neutral Steel / Zinc) */
+  --border-light: #f4f4f5;
+  --border-subtle: #e4e4e7;
+  --border-strong: #d4d4d8;
+  --border-focus: #18181b;
+
+  /* Typography */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* Text Colors (Pure High-Contrast Zinc) */
+  --text-primary: #09090b;
+  --text-secondary: #27272a;
+  --text-muted: #71717a;
+  --text-dim: #a1a1aa;
+  --text-inverse: #ffffff;
+
+  /* Brand Accents (Titanium Black & Steel) */
+  --accent-primary: #18181b;
+  --accent-hover: #27272a;
+  --accent-soft: rgba(24, 24, 27, 0.06);
+  --accent-border: #d4d4d8;
+
+  /* Semantic Highlight Colors */
+  --star-gold: #d97706;
+  --star-bg: #fef3c7;
+  --success: #059669;
+  --success-soft: #d1fae5;
+  --danger: #dc2626;
+  --danger-soft: #fee2e2;
+  --badge-ai: #4f46e5;
+  --badge-ai-soft: #e0e7ff;
+  --badge-tts: #0284c7;
+  --badge-tts-soft: #e0f2fe;
+
+  /* Radiuses */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* Shadows (Subtle, Crisp Elevation) */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
+  --shadow-docked: 0 -4px 20px rgba(0, 0, 0, 0.07);
+
+  /* Layout Dimensions */
+  --header-height: 50px;
+  --bottom-nav-height: 58px;
+  --docked-audio-height: 56px;
+  --sidebar-min-width: 200px;
+  --sidebar-default-width: 250px;
+  --list-min-width: 300px;
+  --list-default-width: 400px;
+  --reader-min-width: 480px;
+
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-smooth: 350ms cubic-bezier(0.32, 0.72, 0, 1);
+}