ludan
bbea5d1e58
- EcommercePage.tsx: Add typewriter animation (useTypewriter hook) for slogan text with blinking cursor; replace text-based add/delete buttons with Ant Design icons (CloudUploadOutlined, DeleteOutlined); make command history panel responsive to window width (auto-collapse ≤1180px); update button labels from generic "添加" to context-specific "上传商品图" / "上传素材" - New useTypewriter.ts hook: Character-by-character typewriter animation with configurable speed and pause-before-loop, auto-resets on text change - reset.css: Add comprehensive HTML/body typography baseline (font-size, text-rendering, font-smoothing, line-height); extend reset coverage to select/canvas/svg elements; add overflow-wrap:anywhere for text-bearing elements; add min-width:0 to prevent form element overflow - primitives.css: Add reusable typography utility classes (ui-page-title, ui-section-title, ui-body-copy) with design token references - tokens.css: Expand design token set for typography scales, font weights, and leading values - ecommerce-standalone.css: Add 689 lines of standalone ecommerce page styles - Page CSS (ecommerce, image-workbench, more-tools, more, script-tokens, script-tokens-v5, studio-layout): Enhanced visual styles and layout refinements across all pages - app-shell.css: Shell-level layout and styling improvements
141 lines
3.8 KiB
CSS
141 lines
3.8 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg-base: #0d0d0f;
|
|
--bg-page: var(--bg-base);
|
|
--bg-shell: #0d0d0f;
|
|
--bg-surface: #151719;
|
|
--bg-panel: #151719;
|
|
--bg-elevated: #181b1d;
|
|
--bg-elevated-rgb: 24, 27, 29;
|
|
--bg-inset: #101214;
|
|
--bg-hover: #202527;
|
|
--bg-active: #243129;
|
|
--border-weak: #242a2c;
|
|
--border-subtle: #2a3032;
|
|
--border-default: #394044;
|
|
--border-accent: #00ff88;
|
|
--fg-body: #f3f5f2;
|
|
--fg-muted: #aeb8b1;
|
|
--fg-soft: #7e8983;
|
|
--fg-dim: #5f6a64;
|
|
--accent: #00ff88;
|
|
--accent-rgb: 0, 255, 136;
|
|
--accent-dim: #00d874;
|
|
--accent-hover: #58ffac;
|
|
--accent-muted: #183527;
|
|
--accent-glow: none;
|
|
--accent-cyan: #7be7ff;
|
|
--accent-gold: #d9f99d;
|
|
--success: #26d06e;
|
|
--warning: #f3aa26;
|
|
--error: #ff5a5f;
|
|
--radius-xs: 8px;
|
|
--radius-sm: 10px;
|
|
--radius-md: 14px;
|
|
--radius-lg: 18px;
|
|
--shadow-panel: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
--shadow-tight: 0 0 0 1px rgba(255, 255, 255, 0.04);
|
|
--shadow-glow: 0 0 26px rgba(45, 212, 191, 0.18);
|
|
|
|
/* Motion tokens */
|
|
--transition-fast: 140ms ease;
|
|
--transition-base: 200ms ease;
|
|
--transition-slow: 320ms ease;
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
|
|
|
|
--font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
|
|
"PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
monospace;
|
|
|
|
/* Typography scale */
|
|
--text-2xs: 10px;
|
|
--text-xs: 11px;
|
|
--text-sm: 12px;
|
|
--text-md: 13px;
|
|
--text-base: 14px;
|
|
--text-lg: 16px;
|
|
--text-xl: 18px;
|
|
--text-2xl: 20px;
|
|
--text-3xl: 24px;
|
|
--text-4xl: 28px;
|
|
--text-5xl: 32px;
|
|
--text-title: clamp(22px, 2.2vw, 32px);
|
|
--text-display: clamp(28px, 3.2vw, 46px);
|
|
|
|
--weight-regular: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--weight-heavy: 800;
|
|
|
|
--leading-none: 1;
|
|
--leading-tight: 1.2;
|
|
--leading-heading: 1.28;
|
|
--leading-control: 1.35;
|
|
--leading-body: 1.55;
|
|
--leading-relaxed: 1.7;
|
|
|
|
/* Spacing scale */
|
|
--space-1: 4px;
|
|
--space-2: 6px;
|
|
--space-3: 8px;
|
|
--space-4: 10px;
|
|
--space-5: 12px;
|
|
--space-6: 16px;
|
|
--space-7: 20px;
|
|
--space-8: 24px;
|
|
--space-9: 32px;
|
|
--space-10: 40px;
|
|
--space-11: 48px;
|
|
|
|
/* Responsive layout tokens */
|
|
--breakpoint-sm: 480px;
|
|
--breakpoint-md: 768px;
|
|
--breakpoint-lg: 992px;
|
|
--breakpoint-xl: 1200px;
|
|
--page-gutter: clamp(12px, 2vw, 32px);
|
|
--panel-gutter: clamp(12px, 1.4vw, 24px);
|
|
--card-min: min(100%, 240px);
|
|
--form-control-min-height: 38px;
|
|
--toolbar-min-height: 44px;
|
|
|
|
/* Semantic aliases used by the layered stylesheet structure. */
|
|
--surface-canvas: var(--bg-base);
|
|
--surface-shell: var(--bg-shell);
|
|
--surface-panel: var(--bg-panel);
|
|
--surface-elevated: var(--bg-elevated);
|
|
--surface-muted: var(--bg-inset);
|
|
--surface-hover: var(--bg-hover);
|
|
--text-primary: var(--fg-body);
|
|
--text-muted: var(--fg-muted);
|
|
--text-subtle: var(--fg-soft);
|
|
--text-disabled: var(--fg-dim);
|
|
--border-soft: var(--border-weak);
|
|
--border-normal: var(--border-subtle);
|
|
--border-strong: var(--border-default);
|
|
--radius-control: var(--radius-sm);
|
|
--radius-panel: var(--radius-lg);
|
|
--shadow-surface: var(--shadow-tight);
|
|
--shadow-elevated: var(--shadow-panel);
|
|
--accent-primary: var(--accent);
|
|
--accent-primary-rgb: var(--accent-rgb);
|
|
|
|
/* Legacy aliases used by the first web preview. */
|
|
--page-bg: var(--bg-base);
|
|
--page-bg-soft: var(--bg-shell);
|
|
--surface: var(--bg-panel);
|
|
--surface-strong: var(--bg-elevated);
|
|
--line: var(--border-subtle);
|
|
--line-strong: var(--border-default);
|
|
--text: var(--fg-body);
|
|
--text-soft: var(--fg-soft);
|
|
--cyan: var(--accent-cyan);
|
|
--cyan-strong: #5eead4;
|
|
--gold: var(--accent-gold);
|
|
--green: var(--success);
|
|
--danger: var(--error);
|
|
--shadow-soft: var(--shadow-panel);
|
|
}
|