zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): enhance glass effects, card designs, and transitions across components

Browse Source 
- Replaced `client:only="react"` with `client:load transition:persist="header"` for `GlassHeader` to improve page transitions and header consistency.
- Updated card and surface designs with refined colors, borders, and shadows for a cleaner, modern look.
- Adjusted CSS variables for better contrast and distinct layers.
- Applied consistent blur and backdrop styles across components for visual cohesion.
This commit is contained in:
zguiyang
2026-03-14 12:43:11 +08:00
parent 56aac2f9f2
commit 043cdc6734
20 changed files with 49 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/styles/global.css
View File

@@ -44,23 +44,23 @@
:root {
--radius: 0.75rem;
--background: #F1F5F9; /* 更柔和的蓝灰色，不再是纯白或过于扎眼的浅色 */
--foreground: #1E293B;
--background: #F8FAFC; /* 稍微浅一点，增加与卡片的区分度 */
--foreground: #0F172A; /* 更深的颜色，提高对比度 */
--card: #FFFFFF;
--card-foreground: #1E293B;
--card-foreground: #0F172A;
--popover: #FFFFFF;
--popover-foreground: #1E293B;
--popover-foreground: #0F172A;
--primary: #2563EB;
--primary-foreground: #FFFFFF;
--secondary: #E4E4E7;
--secondary-foreground: #1E293B;
--muted: #F4F4F5;
--muted-foreground: #71717A;
--secondary: #F1F5F9;
--secondary-foreground: #0F172A;
--muted: #F1F5F9;
--muted-foreground: #64748B;
--accent: #F97316;
--accent-foreground: #FFFFFF;
--destructive: #EF4444;
--border: #E4E4E7;
--input: #E4E4E7;
--border: #E2E8F0;
--input: #E2E8F0;
--ring: #2563EB;
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
@@ -82,22 +82,22 @@
--gradient-primary: linear-gradient(135deg, #2563EB, #F97316);
--gradient-secondary: linear-gradient(135deg, #3B82F6, #10B981);
--gradient-accent: linear-gradient(135deg, #F97316, #FB923C);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 40px rgba(37, 99, 235, 0.15);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--animation-smooth: cubic-bezier(0.65, 0, 0.35, 1);
--animation-spring: cubic-bezier(0.22, 1, 0.36, 1);
/* Global UI Design Tokens */
--ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.2), rgb(37 99 235 / 0.1), rgb(154 52 18 / 0.2));
--ui-title-gradient: linear-gradient(90deg, #111827 0%, var(--primary) 50%, #ea580c 100%);
--ui-surface-bg: rgb(248 250 252 / 0.75);
--ui-surface-border: rgb(228 228 231 / 0.7);
--ui-surface-shadow: var(--shadow-sm);
--ui-surface-blur: 10px;
--ui-section-soft-bg: rgb(37 99 235 / 0.05);
--ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.05), rgb(37 99 235 / 0.03), rgb(154 52 18 / 0.05));
--ui-title-gradient: linear-gradient(90deg, #0F172A 0%, #2563EB 50%, #ea580c 100%);
--ui-surface-bg: rgb(255 255 255 / 0.8);
--ui-surface-border: rgb(226 232 240 / 0.8);
--ui-surface-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.05);
--ui-surface-blur: 12px;
--ui-section-soft-bg: rgb(37 99 235 / 0.03);
}
.dark {