Initial commit: 12个专业个人简历作品集项目
This commit is contained in:
KQL
521
个人简历_环保/.superdesign/design_iterations/default_ui_darkmode.css
Normal file
521
个人简历_环保/.superdesign/design_iterations/default_ui_darkmode.css
Normal file
@@ -0,0 +1,521 @@
|
||||
/* ========================================
|
||||
Dark Mode UI Framework
|
||||
A beautiful dark mode design system
|
||||
======================================== */
|
||||
|
||||
/* ========================================
|
||||
CSS Variables & Theme
|
||||
======================================== */
|
||||
:root {
|
||||
/* Dark Mode Color Palette */
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
|
||||
/* Spacing & Layout */
|
||||
--radius: 0.625rem;
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 0.75rem;
|
||||
--spacing-lg: 1rem;
|
||||
--spacing-xl: 1.5rem;
|
||||
--spacing-2xl: 2rem;
|
||||
--spacing-3xl: 3rem;
|
||||
|
||||
/* Typography */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Base Styles
|
||||
======================================== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Layout Components
|
||||
======================================== */
|
||||
.container {
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2xl) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.container-sm {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.container-lg {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
||||
|
||||
.gap-sm { gap: var(--spacing-sm); }
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
.gap-xl { gap: var(--spacing-xl); }
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Card Components
|
||||
======================================== */
|
||||
.card {
|
||||
background-color: var(--card);
|
||||
color: var(--card-foreground);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Button Components
|
||||
======================================== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
white-space: nowrap;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
min-height: 2.25rem;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: rgba(236, 236, 236, 0.9);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
background-color: var(--destructive);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-destructive:hover {
|
||||
background-color: rgba(220, 38, 38, 0.9);
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-sm {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
font-size: var(--font-size-xs);
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
font-size: var(--font-size-base);
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: var(--spacing-sm);
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Form Components
|
||||
======================================== */
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
color: var(--foreground);
|
||||
font-size: var(--font-size-sm);
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Badge Components
|
||||
======================================== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid;
|
||||
padding: 0.125rem var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Priority Badge Variants */
|
||||
.badge-priority-high {
|
||||
background: rgba(127, 29, 29, 0.3);
|
||||
color: rgb(252, 165, 165);
|
||||
border: 1px solid rgba(153, 27, 27, 0.5);
|
||||
}
|
||||
|
||||
.badge-priority-medium {
|
||||
background: rgba(120, 53, 15, 0.3);
|
||||
color: rgb(252, 211, 77);
|
||||
border: 1px solid rgba(146, 64, 14, 0.5);
|
||||
}
|
||||
|
||||
.badge-priority-low {
|
||||
background: rgba(20, 83, 45, 0.3);
|
||||
color: rgb(134, 239, 172);
|
||||
border: 1px solid rgba(22, 101, 52, 0.5);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Tab Components
|
||||
======================================== */
|
||||
.tab-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--foreground);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #f8f9fa !important;
|
||||
color: #1a1a1a !important;
|
||||
border-color: #f8f9fa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-button.active:hover {
|
||||
background-color: #e9ecef !important;
|
||||
border-color: #e9ecef !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Typography
|
||||
======================================== */
|
||||
.text-xs { font-size: var(--font-size-xs); }
|
||||
.text-sm { font-size: var(--font-size-sm); }
|
||||
.text-base { font-size: var(--font-size-base); }
|
||||
.text-lg { font-size: var(--font-size-lg); }
|
||||
.text-xl { font-size: var(--font-size-xl); }
|
||||
.text-2xl { font-size: var(--font-size-2xl); }
|
||||
.text-3xl { font-size: var(--font-size-3xl); }
|
||||
.text-4xl { font-size: var(--font-size-4xl); }
|
||||
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
|
||||
.text-primary { color: var(--primary); }
|
||||
.text-muted { color: var(--muted-foreground); }
|
||||
.text-destructive { color: var(--destructive); }
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, var(--primary), rgba(236, 236, 236, 0.6));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Icon System
|
||||
======================================== */
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sm { width: 0.875rem; height: 0.875rem; }
|
||||
.icon-lg { width: 1.25rem; height: 1.25rem; }
|
||||
.icon-xl { width: 1.5rem; height: 1.5rem; }
|
||||
.icon-2xl { width: 2rem; height: 2rem; }
|
||||
|
||||
/* ========================================
|
||||
Interactive Components
|
||||
======================================== */
|
||||
.checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background-color: rgb(22, 163, 74);
|
||||
border-color: rgb(22, 163, 74);
|
||||
}
|
||||
|
||||
.checkbox.checked::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
List Components
|
||||
======================================== */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list-item.completed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Empty State Component
|
||||
======================================== */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-3xl) var(--spacing-lg);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Utility Classes
|
||||
======================================== */
|
||||
.hidden { display: none; }
|
||||
.block { display: block; }
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
|
||||
.w-full { width: 100%; }
|
||||
.h-full { height: 100%; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
.opacity-50 { opacity: 0.5; }
|
||||
.opacity-60 { opacity: 0.6; }
|
||||
.opacity-75 { opacity: 0.75; }
|
||||
|
||||
.transition-all { transition: all 0.2s ease; }
|
||||
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
|
||||
.transition-opacity { transition: opacity 0.2s ease; }
|
||||
|
||||
/* ========================================
|
||||
Responsive Design
|
||||
======================================== */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.grid-cols-auto {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.flex-col-mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-center-mobile {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gap-sm-mobile { gap: var(--spacing-sm); }
|
||||
|
||||
.hidden-mobile { display: none; }
|
||||
.block-mobile { display: block; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.text-2xl { font-size: var(--font-size-xl); }
|
||||
.text-3xl { font-size: var(--font-size-2xl); }
|
||||
.text-4xl { font-size: var(--font-size-3xl); }
|
||||
|
||||
.container {
|
||||
padding: var(--spacing-lg) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Animation Utilities
|
||||
======================================== */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Focus & Accessibility
|
||||
======================================== */
|
||||
.focus-visible:focus-visible {
|
||||
outline: 2px solid var(--ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
2639
个人简历_环保/.superdesign/design_iterations/eco_resume_final.html
Normal file
2639
个人简历_环保/.superdesign/design_iterations/eco_resume_final.html
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
230
个人简历_环保/.superdesign/design_iterations/eco_resume_theme.css
Normal file
230
个人简历_环保/.superdesign/design_iterations/eco_resume_theme.css
Normal file
@@ -0,0 +1,230 @@
|
||||
/* 环保产业个人简历主题 - 统一绿色系风格 */
|
||||
:root {
|
||||
/* 主色调 - 绿色系渐变 */
|
||||
--eco-primary: #2d7f5e; /* 主绿色 */
|
||||
--eco-primary-light: #4a9d7e; /* 浅绿色 */
|
||||
--eco-primary-lighter: #6db89a; /* 更浅绿色 */
|
||||
--eco-primary-dark: #1a5c40; /* 深绿色 */
|
||||
--eco-primary-darker: #0d3926; /* 更深绿色 */
|
||||
--eco-primary-soft: #e8f5f0; /* 极浅绿背景 */
|
||||
--eco-primary-softer: #f0faf6; /* 超浅绿背景 */
|
||||
|
||||
/* 辅助色 - 同色系变体 */
|
||||
--eco-secondary: #3a8968; /* 青绿色 */
|
||||
--eco-secondary-light: #5ba584; /* 浅青绿色 */
|
||||
--eco-secondary-dark: #2a6b4f; /* 深青绿色 */
|
||||
--eco-mint: #4fb286; /* 薄荷绿 */
|
||||
--eco-mint-light: #7ac5a3; /* 浅薄荷绿 */
|
||||
|
||||
/* 功能色 - 绿色系变体 */
|
||||
--eco-accent: #66c297; /* 翠绿色 - 强调色 */
|
||||
--eco-accent-light: #8cd4b1; /* 浅翠绿色 */
|
||||
--eco-success: #52c41a; /* 成功绿 */
|
||||
--eco-warning: #95b83d; /* 黄绿色警告 */
|
||||
--eco-error: #d48869; /* 柔和橙红 */
|
||||
--eco-info: #5ea89b; /* 青绿信息色 */
|
||||
|
||||
/* 中性色 - 现代灰度系统 */
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #eeeeee;
|
||||
--neutral-300: #e0e0e0;
|
||||
--neutral-400: #bdbdbd;
|
||||
--neutral-500: #9e9e9e;
|
||||
--neutral-600: #757575;
|
||||
--neutral-700: #616161;
|
||||
--neutral-800: #424242;
|
||||
--neutral-900: #212121;
|
||||
|
||||
/* 背景色系 - 绿色系 */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8faf9;
|
||||
--bg-tertiary: #f0f7f4;
|
||||
--bg-hero: linear-gradient(135deg, #e8f5f0 0%, #e5f4ed 50%, #ebf8f2 100%);
|
||||
--bg-card: #ffffff;
|
||||
--bg-overlay: rgba(45, 127, 94, 0.03);
|
||||
|
||||
/* 文字色系 */
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #4b5563;
|
||||
--text-muted: #6b7280;
|
||||
--text-inverse: #ffffff;
|
||||
--text-link: #2d7f5e;
|
||||
--text-link-hover: #1a5c40;
|
||||
|
||||
/* 边框色系 */
|
||||
--border-light: #e5e7eb;
|
||||
--border-normal: #d1d5db;
|
||||
--border-dark: #9ca3af;
|
||||
--border-focus: #2d7f5e;
|
||||
|
||||
/* 阴影系统 - 绿色调柔和阴影 */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(45, 127, 94, 0.04);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(45, 127, 94, 0.08), 0 1px 2px -1px rgba(45, 127, 94, 0.08);
|
||||
--shadow-md: 0 4px 6px -1px rgba(45, 127, 94, 0.1), 0 2px 4px -2px rgba(45, 127, 94, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(45, 127, 94, 0.1), 0 4px 6px -4px rgba(45, 127, 94, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(45, 127, 94, 0.12), 0 8px 10px -6px rgba(45, 127, 94, 0.08);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(45, 127, 94, 0.15);
|
||||
--shadow-card: 0 2px 8px rgba(45, 127, 94, 0.06);
|
||||
--shadow-hover: 0 8px 16px rgba(45, 127, 94, 0.12);
|
||||
--shadow-green: 0 4px 12px rgba(45, 127, 94, 0.15);
|
||||
|
||||
/* 圆角系统 - 现代柔和 */
|
||||
--radius-xs: 0.125rem; /* 2px */
|
||||
--radius-sm: 0.25rem; /* 4px */
|
||||
--radius-md: 0.375rem; /* 6px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
--radius-2xl: 1rem; /* 16px */
|
||||
--radius-3xl: 1.5rem; /* 24px */
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 字体系统 - 专业现代 */
|
||||
--font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-display: 'Poppins', 'PingFang SC', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 字重 */
|
||||
--font-light: 300;
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
--font-extrabold: 800;
|
||||
|
||||
/* 字号系统 - 响应式 */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-6xl: 3.75rem; /* 60px */
|
||||
|
||||
/* 行高系统 */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* 间距系统 */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-10: 2.5rem; /* 40px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
--space-20: 5rem; /* 80px */
|
||||
--space-24: 6rem; /* 96px */
|
||||
|
||||
/* 动画时长 */
|
||||
--duration-75: 75ms;
|
||||
--duration-100: 100ms;
|
||||
--duration-150: 150ms;
|
||||
--duration-200: 200ms;
|
||||
--duration-300: 300ms;
|
||||
--duration-500: 500ms;
|
||||
--duration-700: 700ms;
|
||||
--duration-1000: 1000ms;
|
||||
|
||||
/* 动画曲线 */
|
||||
--ease-linear: linear;
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
/* 断点 */
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
|
||||
/* 容器宽度 */
|
||||
--container-sm: 640px;
|
||||
--container-md: 768px;
|
||||
--container-lg: 1024px;
|
||||
--container-xl: 1280px;
|
||||
--container-2xl: 1536px;
|
||||
|
||||
/* 特殊效果 - 统一绿色系 */
|
||||
--gradient-eco: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-secondary) 50%, var(--eco-mint) 100%);
|
||||
--gradient-hero: linear-gradient(135deg, #e8f5f0 0%, #e5f4ed 50%, #ebf8f2 100%);
|
||||
--gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fdfb 100%);
|
||||
--gradient-text: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-mint) 100%);
|
||||
--gradient-button: linear-gradient(135deg, var(--eco-primary) 0%, var(--eco-primary-light) 100%);
|
||||
--gradient-skill: linear-gradient(90deg, var(--eco-mint) 0%, var(--eco-accent) 100%);
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
--blur-sm: 4px;
|
||||
--blur-md: 8px;
|
||||
--blur-lg: 16px;
|
||||
--blur-xl: 24px;
|
||||
|
||||
/* 透明度 */
|
||||
--opacity-0: 0;
|
||||
--opacity-5: 0.05;
|
||||
--opacity-10: 0.1;
|
||||
--opacity-20: 0.2;
|
||||
--opacity-25: 0.25;
|
||||
--opacity-30: 0.3;
|
||||
--opacity-40: 0.4;
|
||||
--opacity-50: 0.5;
|
||||
--opacity-60: 0.6;
|
||||
--opacity-70: 0.7;
|
||||
--opacity-75: 0.75;
|
||||
--opacity-80: 0.8;
|
||||
--opacity-90: 0.9;
|
||||
--opacity-95: 0.95;
|
||||
--opacity-100: 1;
|
||||
}
|
||||
|
||||
/* 暗色模式变量（可选） */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-card: #1e293b;
|
||||
--bg-hero: linear-gradient(135deg, #1e3a2e 0%, #1e293b 100%);
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--border-light: #334155;
|
||||
--border-normal: #475569;
|
||||
--border-dark: #64748b;
|
||||
|
||||
--eco-primary: #4ade80;
|
||||
--eco-primary-light: #86efac;
|
||||
--eco-primary-dark: #22c55e;
|
||||
--eco-primary-soft: #052e16;
|
||||
|
||||
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||
--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
:root {
|
||||
--bg-primary: white;
|
||||
--text-primary: black;
|
||||
--shadow-sm: none;
|
||||
--shadow-md: none;
|
||||
--shadow-lg: none;
|
||||
}
|
||||
}
|
||||
142
个人简历_环保/.superdesign/design_iterations/eco_theme.css
Normal file
142
个人简历_环保/.superdesign/design_iterations/eco_theme.css
Normal file
@@ -0,0 +1,142 @@
|
||||
/* 环保产业主题配色方案 - 符合现代大学生审美 */
|
||||
:root {
|
||||
/* 核心环保色彩 */
|
||||
--primary-green: oklch(0.7 0.15 145); /* 自然绿 - 主色调 */
|
||||
--secondary-green: oklch(0.8 0.12 160); /* 清新薄荷绿 */
|
||||
--accent-blue: oklch(0.65 0.18 220); /* 清水蓝 - 点缀色 */
|
||||
--earth-brown: oklch(0.55 0.08 80); /* 大地棕 */
|
||||
|
||||
/* 现代感配色 */
|
||||
--background: oklch(0.98 0.005 140); /* 极淡绿白 */
|
||||
--surface: oklch(0.95 0.01 140); /* 浅绿灰 */
|
||||
--card: oklch(1.0 0 0); /* 纯白卡片 */
|
||||
--text-primary: oklch(0.2 0.02 140); /* 深绿灰文字 */
|
||||
--text-secondary: oklch(0.45 0.06 140); /* 中绿灰文字 */
|
||||
--text-muted: oklch(0.6 0.04 140); /* 浅绿灰文字 */
|
||||
|
||||
/* 功能色彩 */
|
||||
--success: oklch(0.7 0.15 145); /* 成功绿 */
|
||||
--warning: oklch(0.75 0.15 85); /* 环保橙 */
|
||||
--error: oklch(0.6 0.18 25); /* 温和红 */
|
||||
|
||||
/* 渐变色彩 */
|
||||
--gradient-primary: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
|
||||
--gradient-hero: linear-gradient(135deg, var(--primary-green) 0%, var(--accent-blue) 100%);
|
||||
--gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,254,251,0.95));
|
||||
|
||||
/* 阴影系统 */
|
||||
--shadow-sm: 0 2px 4px rgba(34, 87, 122, 0.08);
|
||||
--shadow-md: 0 4px 12px rgba(34, 87, 122, 0.12);
|
||||
--shadow-lg: 0 8px 24px rgba(34, 87, 122, 0.15);
|
||||
--shadow-xl: 0 12px 40px rgba(34, 87, 122, 0.18);
|
||||
|
||||
/* 边框 */
|
||||
--border-light: oklch(0.9 0.02 140);
|
||||
--border-medium: oklch(0.8 0.04 140);
|
||||
--border-accent: var(--primary-green);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-display: 'Poppins', 'Inter', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
|
||||
|
||||
/* 圆角系统 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 间距系统 */
|
||||
--space-xs: 0.5rem; /* 8px */
|
||||
--space-sm: 0.75rem; /* 12px */
|
||||
--space-md: 1rem; /* 16px */
|
||||
--space-lg: 1.5rem; /* 24px */
|
||||
--space-xl: 2rem; /* 32px */
|
||||
--space-2xl: 3rem; /* 48px */
|
||||
--space-3xl: 4rem; /* 64px */
|
||||
|
||||
/* 动画曲线 */
|
||||
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: oklch(0.1 0.02 140);
|
||||
--surface: oklch(0.15 0.02 140);
|
||||
--card: oklch(0.18 0.02 140);
|
||||
--text-primary: oklch(0.9 0.02 140);
|
||||
--text-secondary: oklch(0.7 0.04 140);
|
||||
--text-muted: oklch(0.5 0.06 140);
|
||||
--border-light: oklch(0.25 0.02 140);
|
||||
--border-medium: oklch(0.35 0.04 140);
|
||||
}
|
||||
}
|
||||
|
||||
/* 全局样式重置和基础设置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans) !important;
|
||||
background-color: var(--background) !important;
|
||||
color: var(--text-primary) !important;
|
||||
line-height: 1.6 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 环保主题特色样式 */
|
||||
.eco-gradient-bg {
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.eco-hero-bg {
|
||||
background: var(--gradient-hero);
|
||||
}
|
||||
|
||||
.eco-card {
|
||||
background: var(--gradient-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.eco-glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.eco-text-primary {
|
||||
color: var(--primary-green) !important;
|
||||
}
|
||||
|
||||
.eco-text-accent {
|
||||
color: var(--accent-blue) !important;
|
||||
}
|
||||
|
||||
.eco-shadow {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
403
个人简历_环保/.superdesign/design_iterations/modern_eco_theme.css
Normal file
403
个人简历_环保/.superdesign/design_iterations/modern_eco_theme.css
Normal file
@@ -0,0 +1,403 @@
|
||||
/* 现代环保主题 - 简约高级风格 */
|
||||
:root {
|
||||
/* 主色调 - 自然环保色系 */
|
||||
--eco-primary: #059669; /* 森林绿 */
|
||||
--eco-primary-light: #10b981; /* 清新绿 */
|
||||
--eco-primary-dark: #047857; /* 深森林绿 */
|
||||
|
||||
/* 辅助色 - 天空与海洋 */
|
||||
--eco-secondary: #0ea5e9; /* 天空蓝 */
|
||||
--eco-secondary-light: #38bdf8; /* 清澈蓝 */
|
||||
--eco-secondary-dark: #0284c7; /* 深海蓝 */
|
||||
|
||||
/* 强调色 - 阳光与生命 */
|
||||
--eco-accent: #f59e0b; /* 暖阳橙 */
|
||||
--eco-accent-light: #fbbf24; /* 明亮橙 */
|
||||
|
||||
/* 中性色 - 现代灰度系统 */
|
||||
--neutral-50: #fafafa;
|
||||
--neutral-100: #f5f5f5;
|
||||
--neutral-200: #e5e5e5;
|
||||
--neutral-300: #d4d4d4;
|
||||
--neutral-400: #a3a3a3;
|
||||
--neutral-500: #737373;
|
||||
--neutral-600: #525252;
|
||||
--neutral-700: #404040;
|
||||
--neutral-800: #262626;
|
||||
--neutral-900: #171717;
|
||||
|
||||
/* 背景色系 */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-tertiary: #f1f5f9;
|
||||
--bg-accent: #ecfdf5;
|
||||
|
||||
/* 文字色系 */
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--text-muted: #9ca3af;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* 状态色 */
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--error: #ef4444;
|
||||
--info: #3b82f6;
|
||||
|
||||
/* 阴影系统 */
|
||||
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--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);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
|
||||
/* 圆角系统 */
|
||||
--radius-xs: 0.125rem; /* 2px */
|
||||
--radius-sm: 0.25rem; /* 4px */
|
||||
--radius-md: 0.375rem; /* 6px */
|
||||
--radius-lg: 0.5rem; /* 8px */
|
||||
--radius-xl: 0.75rem; /* 12px */
|
||||
--radius-2xl: 1rem; /* 16px */
|
||||
--radius-3xl: 1.5rem; /* 24px */
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 字体系统 */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-display: 'Inter', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 字重 */
|
||||
--font-light: 300;
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
--font-black: 900;
|
||||
|
||||
/* 字号系统 */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-6xl: 3.75rem; /* 60px */
|
||||
--text-7xl: 4.5rem; /* 72px */
|
||||
|
||||
/* 间距系统 */
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-10: 2.5rem; /* 40px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
--space-20: 5rem; /* 80px */
|
||||
--space-24: 6rem; /* 96px */
|
||||
--space-32: 8rem; /* 128px */
|
||||
|
||||
/* 动画曲线 */
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* 断点 */
|
||||
--breakpoint-sm: 640px;
|
||||
--breakpoint-md: 768px;
|
||||
--breakpoint-lg: 1024px;
|
||||
--breakpoint-xl: 1280px;
|
||||
--breakpoint-2xl: 1536px;
|
||||
}
|
||||
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: var(--font-normal);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 文字选择 */
|
||||
::selection {
|
||||
background-color: var(--eco-primary-light);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--eco-primary-light);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--neutral-100);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--eco-primary);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--eco-primary-dark);
|
||||
}
|
||||
|
||||
/* 焦点样式 */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--eco-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: var(--eco-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s var(--ease-out);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--eco-primary-dark);
|
||||
}
|
||||
|
||||
/* 按钮基础样式 */
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 图片响应式 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 实用类 */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-6);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
padding: 0 var(--space-8);
|
||||
}
|
||||
}
|
||||
|
||||
/* 环保主题特色类 */
|
||||
.eco-gradient {
|
||||
background: linear-gradient(135deg, var(--eco-primary), var(--eco-secondary));
|
||||
}
|
||||
|
||||
.eco-gradient-light {
|
||||
background: linear-gradient(135deg, var(--eco-primary-light), var(--eco-secondary-light));
|
||||
}
|
||||
|
||||
.eco-text-gradient {
|
||||
background: linear-gradient(135deg, var(--eco-primary), var(--eco-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.eco-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.eco-card:hover {
|
||||
box-shadow: var(--shadow-xl);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.eco-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--eco-primary);
|
||||
color: var(--text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
font-weight: var(--font-medium);
|
||||
transition: all 0.2s var(--ease-out);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eco-btn:hover {
|
||||
background: var(--eco-primary-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.eco-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.eco-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--eco-primary);
|
||||
border: 2px solid var(--eco-primary);
|
||||
}
|
||||
|
||||
.eco-btn-outline:hover {
|
||||
background: var(--eco-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* 动画类 */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.6s var(--ease-out);
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.6s var(--ease-out);
|
||||
}
|
||||
|
||||
.animate-slide-down {
|
||||
animation: slideDown 0.6s var(--ease-out);
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scaleIn 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式工具类 */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
--bg-accent: #064e3b;
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-muted: #94a3b8;
|
||||
|
||||
--neutral-100: #334155;
|
||||
--neutral-200: #475569;
|
||||
--neutral-300: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
/* 偏好减少动画 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user