Fun/SearcjGal-frontend
1
0
Fork 0
mirror of https://github.com/Moe-Sakura/frontend.git synced 2026-05-20 21:45:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 增强艳粉主题样式与组件视觉效果

Browse Source 
* 更新 `index.html` 中的进度条样式，增加渐变色和动画效果，提升用户体验。
* 在 `tailwind.config.js` 中添加艳粉主题配色和自定义样式，增强主题一致性。
* 引入液态玻璃效果于多个组件，提升视觉层次感。
* 优化 `SearchHeader.vue` 和 `VndbPanel.vue` 中的标题和按钮样式，确保在不同主题下的可读性。
* 更新 `SettingsModal.vue` 和 `TopToolbar.vue` 的样式，增强用户交互体验。
This commit is contained in:
AdingApkgg
2025-11-27 05:19:15 +08:00
parent fcd823ade3
commit 47288cfdaa
15 changed files with 1305 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/styles/base.css
View File

@@ -25,8 +25,8 @@
margin: 0;
padding: 0;
/* 背景色 - 白天模式（艳粉调） */
background: rgb(255, 245, 250);
/* 透明背景 - 不遮挡背景图 */
background: transparent;
/* 文字颜色 - 白天模式 */
color: rgb(29, 27, 30);
@@ -35,10 +35,10 @@
scroll-behavior: smooth;
/* 过渡动画 */
transition: background-color 0.3s ease, color 0.3s ease;
transition: background 0.3s ease, color 0.3s ease;
}
/* 暗色模式 - 透明背景，不遮挡随机图 */
/* 暗色模式 - 透明背景 */
.dark body {
background: transparent;
color: rgb(226, 232, 240);

545
src/styles/glassmorphism.css Normal file
View File

@@ -0,0 +1,545 @@
/**
* 苹果同款液态玻璃效果 - 艳粉主题
* Apple-style Glassmorphism with Deep Pink Theme
*/
/* ========== 搜索输入框玻璃效果 ========== */
.glassmorphism-input {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(255, 228, 242, 0.5) 100%
);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1.5px solid rgba(255, 20, 147, 0.15);
box-shadow:
0 8px 24px rgba(255, 20, 147, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 1px 0 0 rgba(255, 255, 255, 0.95) inset;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-input:hover {
border-color: rgba(255, 20, 147, 0.25);
box-shadow:
0 10px 28px rgba(255, 20, 147, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 30px rgba(255, 105, 180, 0.1);
}
.glassmorphism-input:focus {
border-color: rgba(255, 20, 147, 0.4);
box-shadow:
0 12px 32px rgba(255, 20, 147, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.8) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 40px rgba(255, 20, 147, 0.15);
transform: scale(1.01);
}
.dark .glassmorphism-input {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.8) 0%,
rgba(51, 65, 85, 0.7) 100%
);
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
border: 1.5px solid rgba(255, 105, 180, 0.25);
box-shadow:
0 8px 24px rgba(255, 105, 180, 0.15),
0 0 0 1px rgba(255, 105, 180, 0.08) inset,
0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
}
.dark .glassmorphism-input:hover {
border-color: rgba(255, 105, 180, 0.35);
box-shadow:
0 10px 28px rgba(255, 105, 180, 0.22),
0 0 0 1px rgba(255, 105, 180, 0.12) inset,
0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
0 0 35px rgba(255, 20, 147, 0.18);
}
.dark .glassmorphism-input:focus {
border-color: rgba(255, 105, 180, 0.5);
box-shadow:
0 12px 32px rgba(255, 105, 180, 0.3),
0 0 0 1px rgba(255, 105, 180, 0.18) inset,
0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
0 0 45px rgba(255, 20, 147, 0.25);
transform: scale(1.01);
}
/* ========== 搜索按钮玻璃效果 ========== */
.glassmorphism-button {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 228, 242, 0.2) 100%
);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1.5px solid rgba(255, 20, 147, 0.3);
box-shadow:
0 10px 30px rgba(255, 20, 147, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.5) inset,
0 1px 0 0 rgba(255, 255, 255, 0.8) inset;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-button:hover:not(:disabled) {
border-color: rgba(255, 20, 147, 0.5);
box-shadow:
0 14px 40px rgba(255, 20, 147, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 50px rgba(255, 105, 180, 0.3);
transform: scale(1.02) translateY(-1px);
}
.glassmorphism-button:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 6px 20px rgba(255, 20, 147, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.glassmorphism-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dark .glassmorphism-button {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.5) 0%,
rgba(51, 65, 85, 0.4) 100%
);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1.5px solid rgba(255, 105, 180, 0.35);
box-shadow:
0 10px 30px rgba(255, 105, 180, 0.3),
0 0 0 1px rgba(255, 105, 180, 0.1) inset,
0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
}
.dark .glassmorphism-button:hover:not(:disabled) {
border-color: rgba(255, 105, 180, 0.5);
box-shadow:
0 14px 40px rgba(255, 105, 180, 0.4),
0 0 0 1px rgba(255, 105, 180, 0.15) inset,
0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
0 0 55px rgba(255, 20, 147, 0.35);
transform: scale(1.02) translateY(-1px);
}
.dark .glassmorphism-button:active:not(:disabled) {
transform: scale(0.98);
box-shadow:
0 6px 20px rgba(255, 105, 180, 0.25),
0 0 0 1px rgba(255, 105, 180, 0.08) inset;
}
/* ========== 内嵌搜索按钮（输入框内部）========== */
.glassmorphism-search-button {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 228, 242, 0.1) 100%
);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 20, 147, 0.25);
box-shadow:
0 4px 12px rgba(255, 20, 147, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.3) inset;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-search-button:hover:not(:disabled) {
border-color: rgba(255, 20, 147, 0.4);
box-shadow:
0 6px 16px rgba(255, 20, 147, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.5) inset,
0 0 20px rgba(255, 105, 180, 0.2);
transform: translateY(-1px) scale(1.02);
}
.glassmorphism-search-button:active:not(:disabled) {
transform: scale(0.96);
box-shadow:
0 2px 8px rgba(255, 20, 147, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.glassmorphism-search-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dark .glassmorphism-search-button {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.3) 0%,
rgba(51, 65, 85, 0.2) 100%
);
backdrop-filter: blur(15px) saturate(150%);
-webkit-backdrop-filter: blur(15px) saturate(150%);
border: 1px solid rgba(255, 105, 180, 0.3);
box-shadow:
0 4px 12px rgba(255, 105, 180, 0.2),
0 0 0 1px rgba(255, 105, 180, 0.08) inset;
}
.dark .glassmorphism-search-button:hover:not(:disabled) {
border-color: rgba(255, 105, 180, 0.45);
box-shadow:
0 6px 16px rgba(255, 105, 180, 0.3),
0 0 0 1px rgba(255, 105, 180, 0.12) inset,
0 0 25px rgba(255, 20, 147, 0.25);
transform: translateY(-1px) scale(1.02);
}
.dark .glassmorphism-search-button:active:not(:disabled) {
transform: scale(0.96);
box-shadow:
0 2px 8px rgba(255, 105, 180, 0.18),
0 0 0 1px rgba(255, 105, 180, 0.06) inset;
}
/* ========== 模式切换器玻璃效果 ========== */
.glassmorphism-mode-switch {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 228, 242, 0.45) 100%
);
backdrop-filter: blur(25px) saturate(180%);
-webkit-backdrop-filter: blur(25px) saturate(180%);
border: 1.5px solid rgba(255, 20, 147, 0.2);
box-shadow:
0 8px 24px rgba(255, 20, 147, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 1px 0 0 rgba(255, 255, 255, 0.9) inset;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-mode-switch:hover {
border-color: rgba(255, 20, 147, 0.3);
box-shadow:
0 10px 28px rgba(255, 20, 147, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 35px rgba(255, 105, 180, 0.15);
}
.dark .glassmorphism-mode-switch {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.75) 0%,
rgba(51, 65, 85, 0.65) 100%
);
backdrop-filter: blur(25px) saturate(150%);
-webkit-backdrop-filter: blur(25px) saturate(150%);
border: 1.5px solid rgba(255, 105, 180, 0.28);
box-shadow:
0 8px 24px rgba(255, 105, 180, 0.18),
0 0 0 1px rgba(255, 105, 180, 0.1) inset,
0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
}
.dark .glassmorphism-mode-switch:hover {
border-color: rgba(255, 105, 180, 0.38);
box-shadow:
0 10px 28px rgba(255, 105, 180, 0.25),
0 0 0 1px rgba(255, 105, 180, 0.15) inset,
0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
0 0 40px rgba(255, 20, 147, 0.22);
}
/* ========== 模态框液态玻璃效果 ========== */
.glassmorphism-modal {
/* 半透明背景 - 使用粉色渐变增强层次感 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.75) 0%,
rgba(255, 228, 242, 0.6) 50%,
rgba(255, 179, 217, 0.5) 100%
);
/* 背景模糊 - 苹果级别的模糊效果 */
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
/* 边框 - 粉色高光效果 */
border: 1.5px solid rgba(255, 20, 147, 0.15);
box-shadow:
0 8px 32px rgba(255, 20, 147, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 1px 0 0 rgba(255, 255, 255, 0.95) inset,
0 0 40px rgba(255, 105, 180, 0.08);
/* 圆角 */
border-radius: 24px;
/* 过渡动画 */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-modal:hover {
border-color: rgba(255, 20, 147, 0.25);
box-shadow:
0 12px 40px rgba(255, 20, 147, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 50px rgba(255, 105, 180, 0.15);
}
/* 暗色模式的液态玻璃 */
.dark .glassmorphism-modal {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.85) 0%,
rgba(51, 65, 85, 0.75) 50%,
rgba(15, 23, 42, 0.8) 100%
);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1.5px solid rgba(255, 105, 180, 0.25);
box-shadow:
0 8px 32px rgba(255, 105, 180, 0.2),
0 0 0 1px rgba(255, 105, 180, 0.1) inset,
0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
0 0 50px rgba(255, 20, 147, 0.15);
}
.dark .glassmorphism-modal:hover {
border-color: rgba(255, 105, 180, 0.35);
box-shadow:
0 12px 40px rgba(255, 105, 180, 0.3),
0 0 0 1px rgba(255, 105, 180, 0.15) inset,
0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
0 0 60px rgba(255, 20, 147, 0.25);
}
/* ========== 面板液态玻璃效果 ========== */
.glassmorphism-panel {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 228, 242, 0.65) 50%,
rgba(255, 179, 217, 0.55) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1.5px solid rgba(255, 20, 147, 0.18);
box-shadow:
0 12px 40px rgba(255, 20, 147, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 50px rgba(255, 105, 180, 0.1);
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-panel:hover {
border-color: rgba(255, 20, 147, 0.3);
box-shadow:
0 16px 48px rgba(255, 20, 147, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.8) inset,
0 1px 0 0 rgba(255, 255, 255, 1) inset,
0 0 60px rgba(255, 105, 180, 0.18);
transform: translateY(-2px);
}
.dark .glassmorphism-panel {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.9) 0%,
rgba(51, 65, 85, 0.8) 50%,
rgba(15, 23, 42, 0.85) 100%
);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1.5px solid rgba(255, 105, 180, 0.3);
box-shadow:
0 12px 40px rgba(255, 105, 180, 0.25),
0 0 0 1px rgba(255, 105, 180, 0.12) inset,
0 1px 0 0 rgba(255, 255, 255, 0.15) inset,
0 0 50px rgba(255, 20, 147, 0.2);
}
.dark .glassmorphism-panel:hover {
border-color: rgba(255, 105, 180, 0.4);
box-shadow:
0 16px 48px rgba(255, 105, 180, 0.35),
0 0 0 1px rgba(255, 105, 180, 0.18) inset,
0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
0 0 60px rgba(255, 20, 147, 0.3);
transform: translateY(-2px);
}
/* ========== 工具栏按钮玻璃效果 ========== */
.glassmorphism-toolbar-button {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 228, 242, 0.3) 100%
);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 20, 147, 0.15);
box-shadow:
0 4px 12px rgba(255, 20, 147, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-toolbar-button:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 228, 242, 0.5) 100%
);
border-color: rgba(255, 20, 147, 0.25);
box-shadow:
0 6px 16px rgba(255, 20, 147, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 0 20px rgba(255, 105, 180, 0.1);
transform: translateY(-1px);
}
.glassmorphism-toolbar-button:active {
transform: translateY(0);
box-shadow:
0 2px 8px rgba(255, 20, 147, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
.dark .glassmorphism-toolbar-button {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.6) 0%,
rgba(51, 65, 85, 0.5) 100%
);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255, 105, 180, 0.2);
box-shadow:
0 4px 12px rgba(255, 105, 180, 0.15),
0 0 0 1px rgba(255, 105, 180, 0.08) inset;
}
.dark .glassmorphism-toolbar-button:hover {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.8) 0%,
rgba(51, 65, 85, 0.7) 100%
);
border-color: rgba(255, 105, 180, 0.35);
box-shadow:
0 6px 16px rgba(255, 105, 180, 0.25),
0 0 0 1px rgba(255, 105, 180, 0.15) inset,
0 0 25px rgba(255, 20, 147, 0.2);
transform: translateY(-1px);
}
.dark .glassmorphism-toolbar-button:active {
transform: translateY(0);
box-shadow:
0 2px 8px rgba(255, 105, 180, 0.18),
0 0 0 1px rgba(255, 105, 180, 0.1) inset;
}
/* ========== 卡片玻璃效果 ========== */
.glassmorphism-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 228, 242, 0.5) 50%,
rgba(255, 179, 217, 0.45) 100%
);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 20, 147, 0.12);
box-shadow:
0 8px 24px rgba(255, 20, 147, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glassmorphism-card:hover {
border-color: rgba(255, 20, 147, 0.2);
box-shadow:
0 12px 32px rgba(255, 20, 147, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.7) inset,
0 0 30px rgba(255, 105, 180, 0.12);
transform: translateY(-2px);
}
.dark .glassmorphism-card {
background: linear-gradient(
135deg,
rgba(30, 41, 59, 0.75) 0%,
rgba(51, 65, 85, 0.65) 50%,
rgba(15, 23, 42, 0.7) 100%
);
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
border: 1px solid rgba(255, 105, 180, 0.22);
box-shadow:
0 8px 24px rgba(255, 105, 180, 0.18),
0 0 0 1px rgba(255, 105, 180, 0.08) inset;
}
.dark .glassmorphism-card:hover {
border-color: rgba(255, 105, 180, 0.32);
box-shadow:
0 12px 32px rgba(255, 105, 180, 0.28),
0 0 0 1px rgba(255, 105, 180, 0.15) inset,
0 0 35px rgba(255, 20, 147, 0.22);
transform: translateY(-2px);
}

131
src/styles/theme.css Normal file
View File

@@ -0,0 +1,131 @@
/**
* 艳粉主题配色方案
* Deep Pink Color Scheme
*/
:root {
/* ========== 主色调 - 艳粉色系 ========== */
--color-primary: #ff1493; /* DeepPink - 主要色 */
--color-primary-light: #ff69b4; /* HotPink - 浅色 */
--color-primary-lighter: #ffb3d9; /* 更浅的粉色 */
--color-primary-dark: #c71585; /* MediumVioletRed - 深色 */
--color-primary-darker: #8b0a50; /* 更深的粉色 */
/* ========== 渐变色 ========== */
--gradient-primary: linear-gradient(135deg, #ff1493 0%, #d946ef 100%);
--gradient-primary-hover: linear-gradient(135deg, #ff69b4 0%, #e879f9 100%);
--gradient-primary-reverse: linear-gradient(135deg, #d946ef 0%, #ff1493 100%);
/* ========== 辅助色 ========== */
--color-accent: #d946ef; /* 紫色辅助色 */
--color-accent-light: #e879f9;
--color-accent-dark: #c026d3;
/* ========== 背景色 ========== */
--bg-primary: #fff5fa; /* 浅粉色背景 */
--bg-secondary: #ffe4f2; /* 粉色背景 */
--bg-tertiary: #ffb3d9; /* 更深的粉色背景 */
/* ========== 文本色 ========== */
--text-primary: #1d1b1e; /* 主要文本 */
--text-secondary: #6b7280; /* 次要文本 */
--text-tertiary: #9ca3af; /* 第三级文本 */
/* ========== 阴影 ========== */
--shadow-sm: 0 1px 2px rgba(255, 20, 147, 0.1);
--shadow-md: 0 4px 6px rgba(255, 20, 147, 0.15);
--shadow-lg: 0 10px 15px rgba(255, 20, 147, 0.2);
--shadow-xl: 0 20px 25px rgba(255, 20, 147, 0.25);
--shadow-glow: 0 0 20px rgba(255, 20, 147, 0.4);
/* ========== 玻璃态效果 ========== */
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.8);
--glass-shadow: 0 8px 32px rgba(255, 20, 147, 0.08);
}
/* 暗色模式 */
.dark {
/* ========== 主色调 ========== */
--color-primary: #ff69b4;
--color-primary-light: #ffb3d9;
--color-primary-lighter: #ffc9e6;
--color-primary-dark: #ff1493;
--color-primary-darker: #c71585;
/* ========== 渐变色 ========== */
--gradient-primary: linear-gradient(135deg, #ff69b4 0%, #e879f9 100%);
--gradient-primary-hover: linear-gradient(135deg, #ffb3d9 0%, #f0abfc 100%);
--gradient-primary-reverse: linear-gradient(135deg, #e879f9 0%, #ff69b4 100%);
/* ========== 辅助色 ========== */
--color-accent: #e879f9;
--color-accent-light: #f0abfc;
--color-accent-dark: #d946ef;
/* ========== 背景色 ========== */
--bg-primary: #0f172a; /* 深色背景 */
--bg-secondary: #1e293b; /* 次要背景 */
--bg-tertiary: #334155; /* 第三级背景 */
/* ========== 文本色 ========== */
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
/* ========== 阴影 ========== */
--shadow-sm: 0 1px 2px rgba(255, 105, 180, 0.15);
--shadow-md: 0 4px 6px rgba(255, 105, 180, 0.2);
--shadow-lg: 0 10px 15px rgba(255, 105, 180, 0.25);
--shadow-xl: 0 20px 25px rgba(255, 105, 180, 0.3);
--shadow-glow: 0 0 25px rgba(255, 105, 180, 0.5);
/* ========== 玻璃态效果 ========== */
--glass-bg: rgba(30, 41, 59, 0.8);
--glass-border: rgba(255, 105, 180, 0.2);
--glass-shadow: 0 8px 32px rgba(255, 105, 180, 0.15);
}
/* ========== Tailwind CSS 主题颜色扩展 ========== */
@layer utilities {
/* 文本渐变 */
.text-gradient-pink {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 背景渐变 */
.bg-gradient-pink {
background: var(--gradient-primary);
}
.bg-gradient-pink-reverse {
background: var(--gradient-primary-reverse);
}
/* 边框渐变 */
.border-gradient-pink {
border: 1px solid transparent;
background: linear-gradient(white, white) padding-box,
var(--gradient-primary) border-box;
}
/* 阴影 */
.shadow-pink-sm { box-shadow: var(--shadow-sm); }
.shadow-pink-md { box-shadow: var(--shadow-md); }
.shadow-pink-lg { box-shadow: var(--shadow-lg); }
.shadow-pink-xl { box-shadow: var(--shadow-xl); }
.shadow-pink-glow { box-shadow: var(--shadow-glow); }
/* 悬停效果 */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
}