style: 更新配色系统为医疗健康风格
- 专业蓝 #005EB8 为主色调 - 印章红 #C41E3A 为品牌强调色 - 移除深色模式 - 明亮背景风格 - 更新实用类样式
This commit is contained in:
张翔
+180
-93
@@ -7,41 +7,40 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #FAFAFA;
|
||||
--color-bg-tertiary: #F5F5F5;
|
||||
--color-bg-hover: #F0F0F0;
|
||||
|
||||
--color-text-primary: #171717;
|
||||
--color-text-secondary: #525252;
|
||||
--color-text-tertiary: #737373;
|
||||
--color-text-muted: #A3A3A3;
|
||||
|
||||
--color-border-primary: #E5E5E5;
|
||||
--color-border-secondary: #F0F0F0;
|
||||
--color-border-accent: #D4D4D4;
|
||||
|
||||
--color-accent: #171717;
|
||||
--color-accent-hover: #262626;
|
||||
--color-accent-light: #404040;
|
||||
|
||||
--color-link: #525252;
|
||||
--color-link-hover: #171717;
|
||||
/* 主色调 - 专业蓝系 */
|
||||
--color-primary: #005EB8;
|
||||
--color-primary-hover: #003B73;
|
||||
--color-primary-light: #00A3E0;
|
||||
--color-primary-lighter: #E8F4FD;
|
||||
|
||||
/* 品牌色 - 印章红 */
|
||||
--color-brand-primary: #C41E3A;
|
||||
--color-brand-primary-hover: #A01830;
|
||||
--color-brand-primary-light: #D4244A;
|
||||
--color-brand-primary-lighter: #E04A68;
|
||||
--color-brand-primary-light: #E04A68;
|
||||
--color-brand-primary-bg: #FEF2F4;
|
||||
|
||||
--color-tech-blue: #00D9FF;
|
||||
--color-tech-blue-hover: #00B8D9;
|
||||
--color-tech-blue-light: #33E1FF;
|
||||
--color-tech-purple: #A855F7;
|
||||
--color-tech-purple-hover: #9333EA;
|
||||
--color-tech-purple-light: #C084FC;
|
||||
--color-tech-cyan: #06B6D4;
|
||||
/* 背景色系 - 明亮健康风 */
|
||||
--color-bg-primary: #FFFFFF;
|
||||
--color-bg-secondary: #F5F7FA;
|
||||
--color-bg-tertiary: #EEF2F7;
|
||||
--color-bg-hover: #E8ECF2;
|
||||
|
||||
/* 文字色系 */
|
||||
--color-text-primary: #1A1A2E;
|
||||
--color-text-secondary: #4A5568;
|
||||
--color-text-tertiary: #718096;
|
||||
--color-text-muted: #A0AEC0;
|
||||
|
||||
/* 边框色系 */
|
||||
--color-border-primary: #E2E8F0;
|
||||
--color-border-secondary: #CBD5E0;
|
||||
--color-border-accent: #005EB8;
|
||||
|
||||
/* 链接色 */
|
||||
--color-link: #005EB8;
|
||||
--color-link-hover: #003B73;
|
||||
|
||||
/* 状态色 */
|
||||
--color-success: #16A34A;
|
||||
--color-success-bg: #F0FDF4;
|
||||
--color-warning: #D97706;
|
||||
@@ -51,6 +50,13 @@
|
||||
--color-error: #DC2626;
|
||||
--color-error-bg: #FEF2F2;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 尺寸变量 */
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
@@ -92,52 +98,6 @@
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-bg-primary: #0A0A0A;
|
||||
--color-bg-secondary: #141414;
|
||||
--color-bg-tertiary: #1A1A1A;
|
||||
--color-bg-hover: #242424;
|
||||
|
||||
--color-text-primary: #FAFAFA;
|
||||
--color-text-secondary: #D4D4D4;
|
||||
--color-text-tertiary: #A3A3A3;
|
||||
--color-text-muted: #737373;
|
||||
|
||||
--color-border-primary: #262626;
|
||||
--color-border-secondary: #333333;
|
||||
--color-border-accent: #404040;
|
||||
|
||||
--color-accent: #FAFAFA;
|
||||
--color-accent-hover: #E5E5E5;
|
||||
--color-accent-light: #D4D4D4;
|
||||
|
||||
--color-link: #D4D4D4;
|
||||
--color-link-hover: #FAFAFA;
|
||||
|
||||
--color-brand-primary: #C41E3A;
|
||||
--color-brand-primary-hover: #A01830;
|
||||
--color-brand-primary-light: #E04A68;
|
||||
--color-brand-primary-lighter: #F08C9F;
|
||||
--color-brand-primary-bg: #1A0F11;
|
||||
|
||||
--color-tech-blue: #00D9FF;
|
||||
--color-tech-blue-hover: #00B8D9;
|
||||
--color-tech-blue-light: #33E1FF;
|
||||
--color-tech-purple: #A855F7;
|
||||
--color-tech-purple-hover: #9333EA;
|
||||
--color-tech-purple-light: #C084FC;
|
||||
--color-tech-cyan: #06B6D4;
|
||||
|
||||
--color-success: #22C55E;
|
||||
--color-success-bg: #052E16;
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-bg: #1C1917;
|
||||
--color-info: #0EA5E9;
|
||||
--color-info-bg: #0C2D48;
|
||||
--color-error: #EF4444;
|
||||
--color-error-bg: #1C1917;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply antialiased;
|
||||
@@ -153,7 +113,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg-secondary);
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-chinese), var(--font-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
line-height: var(--line-height-normal);
|
||||
@@ -169,9 +129,8 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 15% 20%, rgba(196, 30, 58, 0.02) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 85% 80%, rgba(23, 23, 23, 0.015) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 50%, rgba(196, 30, 58, 0.01) 0%, transparent 70%);
|
||||
radial-gradient(ellipse at 15% 20%, rgba(0, 94, 184, 0.03) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 85% 80%, rgba(196, 30, 58, 0.02) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -316,6 +275,51 @@
|
||||
.transition-fast {
|
||||
transition: all var(--transition-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
/* 渐变背景 - Wickret 风格 */
|
||||
.bg-gradient-modern {
|
||||
background: linear-gradient(135deg, var(--color-dark-bg) 0%, #1a1a2e 50%, #16213e 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
}
|
||||
|
||||
.bg-gradient-radial {
|
||||
background: radial-gradient(ellipse at center, var(--color-gradient-start) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
/* 渐变文字 */
|
||||
.text-gradient-brand {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, var(--color-gradient-cyan), var(--color-gradient-mid));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* 发光效果 */
|
||||
.bg-glow-red {
|
||||
background: radial-gradient(circle at center, var(--color-accent-red-glow) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.bg-glow-purple {
|
||||
background: radial-gradient(circle at center, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.shadow-glow-purple {
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.shadow-glow-red {
|
||||
box-shadow: 0 0 30px rgba(196, 30, 58, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@@ -652,10 +656,10 @@
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 40px rgba(0, 217, 255, 0.6);
|
||||
box-shadow: 0 8px 24px rgba(196, 30, 58, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -689,29 +693,112 @@
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.tech-gradient {
|
||||
background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%);
|
||||
.primary-gradient {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
}
|
||||
|
||||
.tech-gradient-text {
|
||||
background: linear-gradient(135deg, var(--color-tech-blue) 0%, var(--color-tech-purple) 100%);
|
||||
.primary-gradient-text {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.tech-glow {
|
||||
box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
.brand-gradient {
|
||||
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-light) 100%);
|
||||
}
|
||||
|
||||
.tech-glow-hover:hover {
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
|
||||
.brand-gradient-text {
|
||||
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-primary-light) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.tech-border {
|
||||
border: 1px solid rgba(0, 217, 255, 0.3);
|
||||
.card-shadow {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.tech-border-hover:hover {
|
||||
border-color: rgba(0, 217, 255, 0.6);
|
||||
.card-shadow-hover:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #C41E3A;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #A01830;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.25);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #005EB8;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #003B73;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 94, 184, 0.25);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid #005EB8;
|
||||
color: #005EB8;
|
||||
border-radius: 8px;
|
||||
padding: 12px 32px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #E8F4FD;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 94, 184, 0.15);
|
||||
}
|
||||
|
||||
.card-health {
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.card-health:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.icon-container-primary {
|
||||
background: linear-gradient(135deg, rgba(0, 94, 184, 0.1), rgba(0, 163, 224, 0.1));
|
||||
border-radius: 12px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-container-primary:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 94, 184, 0.15);
|
||||
}
|
||||
|
||||
.icon-container-brand {
|
||||
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1), rgba(224, 74, 104, 0.1));
|
||||
border-radius: 12px;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-container-brand:hover {
|
||||
box-shadow: 0 4px 12px rgba(196, 30, 58, 0.15);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user