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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
114
个人简历_交通物流/.superdesign/design_iterations/logistics_theme_1.css
Normal file
114
个人简历_交通物流/.superdesign/design_iterations/logistics_theme_1.css
Normal file
@@ -0,0 +1,114 @@
|
||||
:root {
|
||||
/* 交通物流产业专业配色 */
|
||||
--primary-blue: #0052CC; /* 铁路蓝 - 主色调 */
|
||||
--secondary-red: #D32F2F; /* 高铁红 - 强调色 */
|
||||
--logistics-green: #00897B; /* 物流绿 - 成功状态 */
|
||||
--steel-gray: #455A64; /* 钢铁灰 - 专业感 */
|
||||
--cloud-white: #FAFAFA; /* 云白 - 背景色 */
|
||||
|
||||
/* 功能性色彩 */
|
||||
--track-silver: #B0BEC5; /* 轨道银 */
|
||||
--signal-yellow: #FFA726; /* 信号黄 */
|
||||
--night-blue: #1A237E; /* 夜航蓝 */
|
||||
--cargo-brown: #5D4037; /* 货运棕 */
|
||||
|
||||
/* 渐变色 */
|
||||
--gradient-primary: linear-gradient(135deg, #0052CC 0%, #1976D2 100%);
|
||||
--gradient-speed: linear-gradient(90deg, #0052CC 0%, #00897B 50%, #FFA726 100%);
|
||||
--gradient-track: linear-gradient(180deg, rgba(0,82,204,0.1) 0%, rgba(0,82,204,0) 100%);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: #263238;
|
||||
--text-secondary: #546E7A;
|
||||
--text-light: #90A4AE;
|
||||
--text-white: #FFFFFF;
|
||||
|
||||
/* 背景色 */
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #F5F7FA;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-hover: rgba(0, 82, 204, 0.05);
|
||||
|
||||
/* 边框 */
|
||||
--border-light: #E0E0E0;
|
||||
--border-medium: #BDBDBD;
|
||||
--border-focus: #0052CC;
|
||||
|
||||
/* 字体 */
|
||||
--font-primary: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 字体大小 */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
|
||||
/* 间距 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--shadow-card: 0 2px 8px rgba(0, 82, 204, 0.08);
|
||||
--shadow-hover: 0 8px 16px rgba(0, 82, 204, 0.12);
|
||||
|
||||
/* 动画时长 */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
--duration-slower: 800ms;
|
||||
|
||||
/* 动画缓动 */
|
||||
--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);
|
||||
|
||||
/* 特效 */
|
||||
--blur-sm: blur(4px);
|
||||
--blur-md: blur(8px);
|
||||
--blur-lg: blur(12px);
|
||||
--blur-xl: blur(16px);
|
||||
}
|
||||
|
||||
/* 深色模式变量（可选） */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-primary: #0F172A;
|
||||
--bg-secondary: #1E293B;
|
||||
--bg-card: #1E293B;
|
||||
--text-primary: #F1F5F9;
|
||||
--text-secondary: #CBD5E1;
|
||||
--border-light: #334155;
|
||||
--border-medium: #475569;
|
||||
}
|
||||
}
|
||||
177
个人简历_交通物流/.superdesign/design_iterations/logistics_theme_2.css
Normal file
177
个人简历_交通物流/.superdesign/design_iterations/logistics_theme_2.css
Normal file
@@ -0,0 +1,177 @@
|
||||
:root {
|
||||
/* 统一蓝色系 - 交通物流专业配色 */
|
||||
--primary-900: #0C1929; /* 深夜蓝 - 最深色 */
|
||||
--primary-800: #1A2F4B; /* 深海蓝 */
|
||||
--primary-700: #234567; /* 海军蓝 */
|
||||
--primary-600: #2C5F8D; /* 标准蓝 */
|
||||
--primary-500: #3B7CB8; /* 主色调 - 铁路蓝 */
|
||||
--primary-400: #5A9FD4; /* 天空蓝 */
|
||||
--primary-300: #7FB5E1; /* 浅天蓝 */
|
||||
--primary-200: #A5CEEC; /* 云朵蓝 */
|
||||
--primary-100: #D2E5F5; /* 薄雾蓝 */
|
||||
--primary-50: #EBF4FB; /* 极浅蓝 */
|
||||
|
||||
/* 中性色 - 带蓝色调 */
|
||||
--gray-900: #1A1F2B; /* 深灰蓝 */
|
||||
--gray-800: #2C3241; /* 暗灰蓝 */
|
||||
--gray-700: #3E4557; /* 中深灰蓝 */
|
||||
--gray-600: #525A70; /* 中灰蓝 */
|
||||
--gray-500: #6B7489; /* 标准灰蓝 */
|
||||
--gray-400: #8892A6; /* 浅灰蓝 */
|
||||
--gray-300: #A8B2C3; /* 更浅灰蓝 */
|
||||
--gray-200: #CAD2DD; /* 很浅灰蓝 */
|
||||
--gray-100: #E5E9EF; /* 极浅灰蓝 */
|
||||
--gray-50: #F5F7FA; /* 背景灰蓝 */
|
||||
|
||||
/* 功能色 - 蓝色系调和 */
|
||||
--accent-teal: #2E7D8C; /* 青蓝 - 成功/完成 */
|
||||
--accent-slate: #4A5F7A; /* 石板蓝 - 信息 */
|
||||
--accent-steel: #546B84; /* 钢铁蓝 - 次要 */
|
||||
--accent-ice: #6B9BD2; /* 冰蓝 - 高亮 */
|
||||
|
||||
/* 语义色彩 */
|
||||
--success: #2E7D8C; /* 成功 - 青蓝色 */
|
||||
--warning: #7A8BA3; /* 警告 - 中性蓝灰 */
|
||||
--error: #5A6B84; /* 错误 - 深蓝灰 */
|
||||
--info: #3B7CB8; /* 信息 - 主蓝色 */
|
||||
|
||||
/* 渐变 */
|
||||
--gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
|
||||
--gradient-hero: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-700) 50%, var(--primary-500) 100%);
|
||||
--gradient-card: linear-gradient(135deg, var(--primary-50) 0%, var(--gray-50) 100%);
|
||||
--gradient-mesh: radial-gradient(at 20% 80%, var(--primary-100) 0%, transparent 50%),
|
||||
radial-gradient(at 80% 20%, var(--primary-200) 0%, transparent 50%);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: var(--gray-900);
|
||||
--text-secondary: var(--gray-700);
|
||||
--text-muted: var(--gray-500);
|
||||
--text-light: var(--gray-400);
|
||||
--text-white: #FFFFFF;
|
||||
--text-on-primary: #FFFFFF;
|
||||
|
||||
/* 背景色 */
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: var(--gray-50);
|
||||
--bg-tertiary: var(--primary-50);
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-overlay: rgba(12, 25, 41, 0.6);
|
||||
--bg-hover: rgba(59, 124, 184, 0.08);
|
||||
--bg-active: rgba(59, 124, 184, 0.12);
|
||||
|
||||
/* 边框 */
|
||||
--border-light: var(--gray-200);
|
||||
--border-default: var(--gray-300);
|
||||
--border-medium: var(--gray-400);
|
||||
--border-focus: var(--primary-500);
|
||||
--border-hover: var(--primary-400);
|
||||
|
||||
/* 字体 */
|
||||
--font-primary: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--font-heading: 'Space Grotesk', 'Inter', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 字体大小 */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
--text-6xl: 3.75rem;
|
||||
|
||||
/* 字体粗细 */
|
||||
--font-thin: 100;
|
||||
--font-light: 300;
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
--font-black: 900;
|
||||
|
||||
/* 间距 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-3xl: 2rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 - 蓝色调 */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(12, 25, 41, 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(12, 25, 41, 0.1), 0 1px 2px 0 rgba(12, 25, 41, 0.06);
|
||||
--shadow-md: 0 4px 6px -1px rgba(12, 25, 41, 0.1), 0 2px 4px -1px rgba(12, 25, 41, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(12, 25, 41, 0.1), 0 4px 6px -2px rgba(12, 25, 41, 0.05);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(12, 25, 41, 0.12), 0 10px 10px -5px rgba(12, 25, 41, 0.04);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(12, 25, 41, 0.25);
|
||||
--shadow-card: 0 2px 8px rgba(59, 124, 184, 0.1);
|
||||
--shadow-hover: 0 8px 20px rgba(59, 124, 184, 0.15);
|
||||
--shadow-focus: 0 0 0 3px rgba(59, 124, 184, 0.2);
|
||||
|
||||
/* 动画时长 */
|
||||
--duration-instant: 100ms;
|
||||
--duration-fast: 200ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
--duration-slower: 700ms;
|
||||
--duration-slowest: 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.25, 0.1, 0.25, 1);
|
||||
|
||||
/* 特效 */
|
||||
--blur-sm: blur(4px);
|
||||
--blur-md: blur(8px);
|
||||
--blur-lg: blur(12px);
|
||||
--blur-xl: blur(20px);
|
||||
--blur-2xl: blur(40px);
|
||||
|
||||
/* 透明度 */
|
||||
--opacity-0: 0;
|
||||
--opacity-5: 0.05;
|
||||
--opacity-10: 0.1;
|
||||
--opacity-20: 0.2;
|
||||
--opacity-30: 0.3;
|
||||
--opacity-40: 0.4;
|
||||
--opacity-50: 0.5;
|
||||
--opacity-60: 0.6;
|
||||
--opacity-70: 0.7;
|
||||
--opacity-80: 0.8;
|
||||
--opacity-90: 0.9;
|
||||
--opacity-100: 1;
|
||||
|
||||
/* 层级 */
|
||||
--z-0: 0;
|
||||
--z-10: 10;
|
||||
--z-20: 20;
|
||||
--z-30: 30;
|
||||
--z-40: 40;
|
||||
--z-50: 50;
|
||||
--z-modal: 1000;
|
||||
--z-popover: 1100;
|
||||
--z-tooltip: 1200;
|
||||
--z-notification: 1300;
|
||||
}
|
||||
@@ -0,0 +1,219 @@
|
||||
:root {
|
||||
/* 极光蓝紫渐变色系 - 高级物流主题 */
|
||||
|
||||
/* 主色调 - 深邃蓝紫 */
|
||||
--aurora-950: #0A0E27; /* 极夜深蓝 */
|
||||
--aurora-900: #0F1729; /* 深空蓝 */
|
||||
--aurora-800: #1A2942; /* 午夜蓝 */
|
||||
--aurora-700: #273E63; /* 深海蓝 */
|
||||
--aurora-600: #3B5998; /* 皇家蓝 */
|
||||
--aurora-500: #5B7EC2; /* 极光蓝 - 主色 */
|
||||
--aurora-400: #7B9FE0; /* 天际蓝 */
|
||||
--aurora-300: #9BB9F1; /* 晨曦蓝 */
|
||||
--aurora-200: #BDD4F7; /* 薄雾蓝 */
|
||||
--aurora-100: #E0EBFB; /* 冰晶蓝 */
|
||||
--aurora-50: #F3F7FE; /* 极光白 */
|
||||
|
||||
/* 紫色调 - 神秘感 */
|
||||
--purple-900: #1E0E3E; /* 深紫 */
|
||||
--purple-800: #2D1B69; /* 皇家紫 */
|
||||
--purple-700: #3F2B96; /* 贵族紫 */
|
||||
--purple-600: #5141C3; /* 极光紫 */
|
||||
--purple-500: #6B5DD3; /* 薰衣草紫 */
|
||||
--purple-400: #8B7FE5; /* 丁香紫 */
|
||||
--purple-300: #ACA3F2; /* 淡紫 */
|
||||
--purple-200: #CFC9F8; /* 浅紫 */
|
||||
--purple-100: #E9E6FC; /* 极浅紫 */
|
||||
|
||||
/* 青色调 - 科技感 */
|
||||
--cyan-600: #0891B2; /* 科技青 */
|
||||
--cyan-500: #06B6D4; /* 青蓝 */
|
||||
--cyan-400: #22D3EE; /* 亮青 */
|
||||
--cyan-300: #67E8F9; /* 浅青 */
|
||||
--cyan-200: #A5F3FC; /* 极浅青 */
|
||||
|
||||
/* 高级渐变组合 */
|
||||
--gradient-aurora: linear-gradient(135deg,
|
||||
var(--aurora-600) 0%,
|
||||
var(--purple-600) 50%,
|
||||
var(--cyan-500) 100%);
|
||||
|
||||
--gradient-premium: linear-gradient(90deg,
|
||||
#667eea 0%,
|
||||
#764ba2 25%,
|
||||
#6B8DD6 50%,
|
||||
#8E37D7 75%,
|
||||
#667eea 100%);
|
||||
|
||||
--gradient-mesh:
|
||||
radial-gradient(at 20% 80%, var(--purple-400) 0%, transparent 50%),
|
||||
radial-gradient(at 80% 20%, var(--cyan-400) 0%, transparent 50%),
|
||||
radial-gradient(at 40% 40%, var(--aurora-400) 0%, transparent 50%),
|
||||
linear-gradient(135deg, var(--aurora-950) 0%, var(--purple-900) 100%);
|
||||
|
||||
--gradient-glass: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0.05) 100%);
|
||||
|
||||
--gradient-holographic: linear-gradient(45deg,
|
||||
#ff0080,
|
||||
#ff8c00,
|
||||
#ffd700,
|
||||
#00ff00,
|
||||
#00ffff,
|
||||
#0080ff,
|
||||
#ff0080);
|
||||
|
||||
--gradient-card: linear-gradient(135deg,
|
||||
rgba(91, 126, 194, 0.1) 0%,
|
||||
rgba(107, 93, 211, 0.05) 50%,
|
||||
rgba(6, 182, 212, 0.1) 100%);
|
||||
|
||||
--gradient-text: linear-gradient(90deg,
|
||||
var(--aurora-400) 0%,
|
||||
var(--purple-400) 33%,
|
||||
var(--cyan-400) 66%,
|
||||
var(--aurora-400) 100%);
|
||||
|
||||
/* 毛玻璃效果背景 */
|
||||
--glass-white: rgba(255, 255, 255, 0.08);
|
||||
--glass-white-hover: rgba(255, 255, 255, 0.12);
|
||||
--glass-dark: rgba(10, 14, 39, 0.6);
|
||||
--glass-purple: rgba(81, 65, 195, 0.1);
|
||||
--glass-cyan: rgba(6, 182, 212, 0.1);
|
||||
|
||||
/* 霓虹光效 */
|
||||
--neon-blue: #00d4ff;
|
||||
--neon-purple: #a855f7;
|
||||
--neon-pink: #ec4899;
|
||||
--glow-blue: 0 0 20px rgba(0, 212, 255, 0.5);
|
||||
--glow-purple: 0 0 20px rgba(168, 85, 247, 0.5);
|
||||
--glow-pink: 0 0 20px rgba(236, 72, 153, 0.5);
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: var(--aurora-50);
|
||||
--text-secondary: var(--aurora-200);
|
||||
--text-muted: var(--aurora-300);
|
||||
--text-accent: var(--cyan-400);
|
||||
--text-gradient: var(--gradient-text);
|
||||
|
||||
/* 背景色 */
|
||||
--bg-primary: var(--aurora-950);
|
||||
--bg-secondary: var(--aurora-900);
|
||||
--bg-tertiary: var(--aurora-800);
|
||||
--bg-card: var(--glass-white);
|
||||
--bg-overlay: rgba(10, 14, 39, 0.8);
|
||||
|
||||
/* 边框 */
|
||||
--border-default: rgba(255, 255, 255, 0.1);
|
||||
--border-hover: rgba(255, 255, 255, 0.2);
|
||||
--border-accent: var(--cyan-500);
|
||||
--border-gradient: linear-gradient(90deg,
|
||||
var(--purple-500),
|
||||
var(--cyan-500));
|
||||
|
||||
/* 高级阴影 */
|
||||
--shadow-neon:
|
||||
0 0 20px rgba(91, 126, 194, 0.5),
|
||||
0 0 40px rgba(107, 93, 211, 0.3),
|
||||
0 0 60px rgba(6, 182, 212, 0.2);
|
||||
|
||||
--shadow-card:
|
||||
0 10px 40px rgba(0, 0, 0, 0.3),
|
||||
0 2px 10px rgba(91, 126, 194, 0.2);
|
||||
|
||||
--shadow-hover:
|
||||
0 20px 60px rgba(0, 0, 0, 0.4),
|
||||
0 10px 20px rgba(107, 93, 211, 0.3),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
|
||||
--shadow-glass:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
|
||||
--shadow-text:
|
||||
0 0 10px rgba(91, 126, 194, 0.8),
|
||||
0 0 20px rgba(107, 93, 211, 0.6),
|
||||
0 0 30px rgba(6, 182, 212, 0.4);
|
||||
|
||||
/* 动画时长 */
|
||||
--duration-instant: 100ms;
|
||||
--duration-fast: 200ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
--duration-slower: 800ms;
|
||||
--duration-slowest: 1200ms;
|
||||
|
||||
/* 动画缓动函数 */
|
||||
--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-elastic: cubic-bezier(0.68, -0.55, 0.32, 1.55);
|
||||
--ease-back: cubic-bezier(0.36, 0, 0.66, -0.56);
|
||||
|
||||
/* 模糊效果 */
|
||||
--blur-sm: blur(4px);
|
||||
--blur-md: blur(8px);
|
||||
--blur-lg: blur(16px);
|
||||
--blur-xl: blur(24px);
|
||||
--blur-2xl: blur(40px);
|
||||
--backdrop-blur: blur(12px);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-display: 'Orbitron', 'Space Grotesk', sans-serif;
|
||||
--font-primary: 'Inter', 'PingFang SC', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 字体大小 - 响应式 */
|
||||
--text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
|
||||
--text-sm: clamp(0.875rem, 2vw, 1rem);
|
||||
--text-base: clamp(1rem, 2.5vw, 1.125rem);
|
||||
--text-lg: clamp(1.125rem, 3vw, 1.25rem);
|
||||
--text-xl: clamp(1.25rem, 3.5vw, 1.5rem);
|
||||
--text-2xl: clamp(1.5rem, 4vw, 2rem);
|
||||
--text-3xl: clamp(2rem, 5vw, 2.5rem);
|
||||
--text-4xl: clamp(2.5rem, 6vw, 3.5rem);
|
||||
--text-5xl: clamp(3rem, 7vw, 4.5rem);
|
||||
--text-6xl: clamp(3.5rem, 8vw, 6rem);
|
||||
|
||||
/* 间距系统 */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--radius-2xl: 2rem;
|
||||
--radius-3xl: 3rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 装饰性元素 */
|
||||
--pattern-grid: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
--pattern-dots: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236B5DD3' fill-opacity='0.1'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
||||
|
||||
/* 特殊效果 */
|
||||
--noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
|
||||
|
||||
/* 动画关键帧定义 */
|
||||
--animation-float: float 6s ease-in-out infinite;
|
||||
--animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animation-gradient: gradient 8s linear infinite;
|
||||
--animation-glow: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
Reference in New Issue
Block a user