新的提交
This commit is contained in:
cc committed
commit
01641834de
188 files changed
+34865
No files matched your search
@@ -0,0 +1,18 @@
|
||||
// 聊天背景涂鸦图案
|
||||
// 使用 SVG data URI 实现 Telegram 风格的涂鸦背景
|
||||
// 更大的画布 + 随机分布 + 不同大小和角度
|
||||
|
||||
// 浅色模式涂鸦图案
|
||||
$pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23000;stroke-width:1.2;opacity:0.045%7D.b%7Bfill:none;stroke:%23000;stroke-width:1;opacity:0.035%7D.c%7Bfill:none;stroke:%23000;stroke-width:0.8;opacity:0.04%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(45,35) rotate(-8)'%3E%3Ccircle class='a' cx='0' cy='0' r='16'/%3E%3Ccircle class='a' cx='-5' cy='-4' r='2.5'/%3E%3Ccircle class='a' cx='5' cy='-4' r='2.5'/%3E%3Cpath class='a' d='M-8 4 Q0 12 8 4'/%3E%3C/g%3E%3Cg transform='translate(320,28) rotate(15) scale(0.7)'%3E%3Cpath class='b' d='M0 -12 l3 9 9 0 -7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 9 0z'/%3E%3C/g%3E%3Cg transform='translate(180,55) rotate(12)'%3E%3Cpath class='a' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(95,120) rotate(-5) scale(1.1)'%3E%3Cpath class='b' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(355,95) rotate(8)'%3E%3Cpath class='c' d='M0 0 L0 18 M0 0 L18 -4 L18 14'/%3E%3Cellipse class='c' cx='-4' cy='20' rx='6' ry='4'/%3E%3Cellipse class='c' cx='14' cy='16' rx='6' ry='4'/%3E%3C/g%3E%3Cg transform='translate(250,110) rotate(-12) scale(0.9)'%3E%3Crect class='b' x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath class='b' d='M0 2 L13 11 L26 2'/%3E%3C/g%3E%3Cg transform='translate(28,195) rotate(6)'%3E%3Ccircle class='a' cx='0' cy='0' r='11'/%3E%3Cpath class='a' d='M-5 11 L5 11 M-4 14 L4 14'/%3E%3Cpath class='c' d='M-3 -2 L0 -6 L3 -2'/%3E%3C/g%3E%3Cg transform='translate(155,175) rotate(-3) scale(0.85)'%3E%3Cpath class='b' d='M0 0 L0 28 Q14 22 28 28 L28 0 Q14 6 0 0'/%3E%3Cpath class='b' d='M28 0 L28 28 Q42 22 56 28 L56 0 Q42 6 28 0'/%3E%3C/g%3E%3Cg transform='translate(340,185) rotate(-20) scale(1.2)'%3E%3Cpath class='a' d='M0 8 L20 0 L5 6 L8 14 L5 6 L-12 12 Z'/%3E%3C/g%3E%3Cg transform='translate(70,280) rotate(5)'%3E%3Crect class='b' x='0' y='5' width='30' height='22' rx='4'/%3E%3Ccircle class='b' cx='15' cy='16' r='7'/%3E%3Crect class='b' x='8' y='0' width='14' height='6' rx='2'/%3E%3C/g%3E%3Cg transform='translate(230,250) rotate(-8) scale(1.1)'%3E%3Crect class='a' x='0' y='6' width='22' height='18' rx='2'/%3E%3Crect class='a' x='-3' y='0' width='28' height='7' rx='2'/%3E%3Cpath class='a' d='M11 0 L11 24 M-3 13 L25 13'/%3E%3C/g%3E%3Cg transform='translate(365,280) rotate(10)'%3E%3Cellipse class='b' cx='0' cy='0' rx='10' ry='14'/%3E%3Cpath class='b' d='M0 14 Q-3 20 0 28 Q2 24 -1 20'/%3E%3C/g%3E%3Cg transform='translate(145,310) rotate(-6)'%3E%3Cpath class='c' d='M0 0 L4 28 L24 28 L28 0 Z'/%3E%3Cpath class='c' d='M28 6 Q40 6 40 16 Q40 24 28 24'/%3E%3Cpath class='c' d='M8 8 Q10 4 12 8'/%3E%3C/g%3E%3Cg transform='translate(310,340) rotate(5) scale(0.9)'%3E%3Cpath class='a' d='M0 8 L8 0 L24 0 L32 8 L16 28 Z'/%3E%3Cpath class='a' d='M8 0 L12 8 L0 8 M24 0 L20 8 L32 8 M12 8 L16 28 L20 8'/%3E%3C/g%3E%3Cg transform='translate(55,365) rotate(25) scale(1.15)'%3E%3Cpath class='a' d='M8 0 Q12 -14 16 0 L14 6 L18 12 L12 9 L6 12 L10 6 Z'/%3E%3Ccircle class='c' cx='12' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(200,375) rotate(-4)'%3E%3Cpath class='b' d='M0 12 Q0 -8 24 -8 Q48 -8 48 12'/%3E%3Cpath class='c' d='M6 12 Q6 -2 24 -2 Q42 -2 42 12'/%3E%3Cpath class='c' d='M12 12 Q12 4 24 4 Q36 4 36 12'/%3E%3C/g%3E%3Cg transform='translate(380,375) rotate(-10)'%3E%3Ccircle class='a' cx='0' cy='0' r='8'/%3E%3Cpath class='c' d='M0 -14 L0 -10 M0 10 L0 14 M-14 0 L-10 0 M10 0 L14 0 M-10 -10 L-7 -7 M7 7 L10 10 M-10 10 L-7 7 M7 -7 L10 -10'/%3E%3C/g%3E%3Cg transform='translate(280,45) rotate(-15) scale(0.6)'%3E%3Cpath class='c' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(15,85) rotate(8) scale(0.6)'%3E%3Cpath class='c' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(120,65) rotate(5) scale(0.8)'%3E%3Ccircle class='c' cx='0' cy='0' r='12'/%3E%3Cpath class='c' d='M-5 -3 L-3 -3'/%3E%3Ccircle class='c' cx='5' cy='-3' r='2'/%3E%3Cpath class='c' d='M-6 4 Q0 9 6 4'/%3E%3C/g%3E%3Cg transform='translate(390,145) rotate(-5)'%3E%3Cpath class='b' d='M0 0 Q0 -10 8 -10 Q16 -10 16 0 L18 8 L-2 8 Z'/%3E%3Ccircle class='b' cx='8' cy='10' r='3'/%3E%3Ccircle class='c' cx='8' cy='-12' r='2'/%3E%3C/g%3E%3Cg transform='translate(20,320) rotate(20)'%3E%3Ccircle class='b' cx='0' cy='0' r='10'/%3E%3Cpath class='b' d='M0 10 L0 30'/%3E%3Cpath class='c' d='M-7 -7 Q0 0 7 -7 M-7 0 Q0 7 7 0'/%3E%3C/g%3E%3Cg transform='translate(295,165) rotate(-3) scale(0.9)'%3E%3Ccircle class='b' cx='10' cy='10' r='12'/%3E%3Cpath class='b' d='M0 4 L4 -6 L8 4 M12 4 L16 -6 L20 4'/%3E%3Ccircle class='c' cx='6' cy='8' r='2'/%3E%3Ccircle class='c' cx='14' cy='8' r='2'/%3E%3Cpath class='c' d='M8 13 L10 15 L12 13'/%3E%3Cpath class='c' d='M-4 Line truncated
|
||||
|
||||
// 深色模式涂鸦图案
|
||||
$pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23fff;stroke-width:1.2;opacity:0.055%7D.b%7Bfill:none;stroke:%23fff;stroke-width:1;opacity:0.045%7D.c%7Bfill:none;stroke:%23fff;stroke-width:0.8;opacity:0.05%7D%3C/style%3E%3C/defs%3E%3Cg transform='translate(45,35) rotate(-8)'%3E%3Ccircle class='a' cx='0' cy='0' r='16'/%3E%3Ccircle class='a' cx='-5' cy='-4' r='2.5'/%3E%3Ccircle class='a' cx='5' cy='-4' r='2.5'/%3E%3Cpath class='a' d='M-8 4 Q0 12 8 4'/%3E%3C/g%3E%3Cg transform='translate(320,28) rotate(15) scale(0.7)'%3E%3Cpath class='b' d='M0 -12 l3 9 9 0 -7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 9 0z'/%3E%3C/g%3E%3Cg transform='translate(180,55) rotate(12)'%3E%3Cpath class='a' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(95,120) rotate(-5) scale(1.1)'%3E%3Cpath class='b' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(355,95) rotate(8)'%3E%3Cpath class='c' d='M0 0 L0 18 M0 0 L18 -4 L18 14'/%3E%3Cellipse class='c' cx='-4' cy='20' rx='6' ry='4'/%3E%3Cellipse class='c' cx='14' cy='16' rx='6' ry='4'/%3E%3C/g%3E%3Cg transform='translate(250,110) rotate(-12) scale(0.9)'%3E%3Crect class='b' x='0' y='0' width='26' height='18' rx='2'/%3E%3Cpath class='b' d='M0 2 L13 11 L26 2'/%3E%3C/g%3E%3Cg transform='translate(28,195) rotate(6)'%3E%3Ccircle class='a' cx='0' cy='0' r='11'/%3E%3Cpath class='a' d='M-5 11 L5 11 M-4 14 L4 14'/%3E%3Cpath class='c' d='M-3 -2 L0 -6 L3 -2'/%3E%3C/g%3E%3Cg transform='translate(155,175) rotate(-3) scale(0.85)'%3E%3Cpath class='b' d='M0 0 L0 28 Q14 22 28 28 L28 0 Q14 6 0 0'/%3E%3Cpath class='b' d='M28 0 L28 28 Q42 22 56 28 L56 0 Q42 6 28 0'/%3E%3C/g%3E%3Cg transform='translate(340,185) rotate(-20) scale(1.2)'%3E%3Cpath class='a' d='M0 8 L20 0 L5 6 L8 14 L5 6 L-12 12 Z'/%3E%3C/g%3E%3Cg transform='translate(70,280) rotate(5)'%3E%3Crect class='b' x='0' y='5' width='30' height='22' rx='4'/%3E%3Ccircle class='b' cx='15' cy='16' r='7'/%3E%3Crect class='b' x='8' y='0' width='14' height='6' rx='2'/%3E%3C/g%3E%3Cg transform='translate(230,250) rotate(-8) scale(1.1)'%3E%3Crect class='a' x='0' y='6' width='22' height='18' rx='2'/%3E%3Crect class='a' x='-3' y='0' width='28' height='7' rx='2'/%3E%3Cpath class='a' d='M11 0 L11 24 M-3 13 L25 13'/%3E%3C/g%3E%3Cg transform='translate(365,280) rotate(10)'%3E%3Cellipse class='b' cx='0' cy='0' rx='10' ry='14'/%3E%3Cpath class='b' d='M0 14 Q-3 20 0 28 Q2 24 -1 20'/%3E%3C/g%3E%3Cg transform='translate(145,310) rotate(-6)'%3E%3Cpath class='c' d='M0 0 L4 28 L24 28 L28 0 Z'/%3E%3Cpath class='c' d='M28 6 Q40 6 40 16 Q40 24 28 24'/%3E%3Cpath class='c' d='M8 8 Q10 4 12 8'/%3E%3C/g%3E%3Cg transform='translate(310,340) rotate(5) scale(0.9)'%3E%3Cpath class='a' d='M0 8 L8 0 L24 0 L32 8 L16 28 Z'/%3E%3Cpath class='a' d='M8 0 L12 8 L0 8 M24 0 L20 8 L32 8 M12 8 L16 28 L20 8'/%3E%3C/g%3E%3Cg transform='translate(55,365) rotate(25) scale(1.15)'%3E%3Cpath class='a' d='M8 0 Q12 -14 16 0 L14 6 L18 12 L12 9 L6 12 L10 6 Z'/%3E%3Ccircle class='c' cx='12' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(200,375) rotate(-4)'%3E%3Cpath class='b' d='M0 12 Q0 -8 24 -8 Q48 -8 48 12'/%3E%3Cpath class='c' d='M6 12 Q6 -2 24 -2 Q42 -2 42 12'/%3E%3Cpath class='c' d='M12 12 Q12 4 24 4 Q36 4 36 12'/%3E%3C/g%3E%3Cg transform='translate(380,375) rotate(-10)'%3E%3Ccircle class='a' cx='0' cy='0' r='8'/%3E%3Cpath class='c' d='M0 -14 L0 -10 M0 10 L0 14 M-14 0 L-10 0 M10 0 L14 0 M-10 -10 L-7 -7 M7 7 L10 10 M-10 10 L-7 7 M7 -7 L10 -10'/%3E%3C/g%3E%3Cg transform='translate(280,45) rotate(-15) scale(0.6)'%3E%3Cpath class='c' d='M0 -8 C0 -14 8 -17 12 -10 C16 -17 24 -14 24 -8 C24 4 12 14 12 14 C12 14 0 4 0 -8'/%3E%3C/g%3E%3Cg transform='translate(15,85) rotate(8) scale(0.6)'%3E%3Cpath class='c' d='M0 10 Q-8 10 -8 3 Q-8 -4 0 -4 Q0 -12 10 -12 Q22 -12 22 -2 Q30 -2 30 5 Q30 12 22 12 Z'/%3E%3C/g%3E%3Cg transform='translate(120,65) rotate(5) scale(0.8)'%3E%3Ccircle class='c' cx='0' cy='0' r='12'/%3E%3Cpath class='c' d='M-5 -3 L-3 -3'/%3E%3Ccircle class='c' cx='5' cy='-3' r='2'/%3E%3Cpath class='c' d='M-6 4 Q0 9 6 4'/%3E%3C/g%3E%3Cg transform='translate(390,145) rotate(-5)'%3E%3Cpath class='b' d='M0 0 Q0 -10 8 -10 Q16 -10 16 0 L18 8 L-2 8 Z'/%3E%3Ccircle class='b' cx='8' cy='10' r='3'/%3E%3Ccircle class='c' cx='8' cy='-12' r='2'/%3E%3C/g%3E%3Cg transform='translate(20,320) rotate(20)'%3E%3Ccircle class='b' cx='0' cy='0' r='10'/%3E%3Cpath class='b' d='M0 10 L0 30'/%3E%3Cpath class='c' d='M-7 -7 Q0 0 7 -7 M-7 0 Q0 7 7 0'/%3E%3C/g%3E%3Cg transform='translate(295,165) rotate(-3) scale(0.9)'%3E%3Ccircle class='b' cx='10' cy='10' r='12'/%3E%3Cpath class='b' d='M0 4 L4 -6 L8 4 M12 4 L16 -6 L20 4'/%3E%3Ccircle class='c' cx='6' cy='8' r='2'/%3E%3Ccircle class='c' cx='14' cy='8' r='2'/%3E%3Cpath class='c' d='M8 13 L10 15 L12 13'/%3E%3Cpath class='c' d='M-4 1Line truncated
|
||||
|
||||
// 导出 CSS 变量
|
||||
:root {
|
||||
--chat-pattern: #{$pattern-light};
|
||||
}
|
||||
|
||||
[data-mode="dark"] {
|
||||
--chat-pattern: #{$pattern-dark};
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
// CSS 变量 - 主题
|
||||
@use './chat-patterns.scss';
|
||||
|
||||
:root {
|
||||
// 颜色
|
||||
--primary: #8B7355;
|
||||
--primary-hover: #7A6548;
|
||||
--primary-light: rgba(139, 115, 85, 0.1);
|
||||
--danger: #dc3545;
|
||||
--warning: #ffc107;
|
||||
|
||||
// 背景
|
||||
--bg-primary: #F0EEE9;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
|
||||
// 文字
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
|
||||
// 边框
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--border-radius: 9999px;
|
||||
|
||||
// 阴影
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// 侧边栏
|
||||
--sidebar-width: 220px;
|
||||
|
||||
// 主题渐变
|
||||
--bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
|
||||
|
||||
// 卡片背景
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// ==================== 浅色主题 ====================
|
||||
|
||||
// 云上舞白主题 (默认)
|
||||
[data-theme="cloud-dancer"][data-mode="light"],
|
||||
[data-theme="cloud-dancer"]:not([data-mode]) {
|
||||
--primary: #8B7355;
|
||||
--primary-hover: #7A6548;
|
||||
--primary-light: rgba(139, 115, 85, 0.1);
|
||||
--bg-primary: #F0EEE9;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--bg-gradient: linear-gradient(135deg, #F0EEE9 0%, #E8E6E1 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// 刚玉蓝主题
|
||||
[data-theme="corundum-blue"][data-mode="light"],
|
||||
[data-theme="corundum-blue"]:not([data-mode]) {
|
||||
--primary: #4A6670;
|
||||
--primary-hover: #3D565E;
|
||||
--primary-light: rgba(74, 102, 112, 0.1);
|
||||
--bg-primary: #E8EEF0;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--bg-gradient: linear-gradient(135deg, #E8EEF0 0%, #D8E4E8 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #5A7A86 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// 冰猕猴桃汁绿主题
|
||||
[data-theme="kiwi-green"][data-mode="light"],
|
||||
[data-theme="kiwi-green"]:not([data-mode]) {
|
||||
--primary: #7A9A5C;
|
||||
--primary-hover: #6A8A4C;
|
||||
--primary-light: rgba(122, 154, 92, 0.1);
|
||||
--bg-primary: #E8F0E4;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--bg-gradient: linear-gradient(135deg, #E8F0E4 0%, #D8E8D0 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #8AAA6C 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// 辛辣红主题
|
||||
[data-theme="spicy-red"][data-mode="light"],
|
||||
[data-theme="spicy-red"]:not([data-mode]) {
|
||||
--primary: #8B4049;
|
||||
--primary-hover: #7A3540;
|
||||
--primary-light: rgba(139, 64, 73, 0.1);
|
||||
--bg-primary: #F0E8E8;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--bg-gradient: linear-gradient(135deg, #F0E8E8 0%, #E8D8D8 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #A05058 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// 明水鸭色主题
|
||||
[data-theme="teal-water"][data-mode="light"],
|
||||
[data-theme="teal-water"]:not([data-mode]) {
|
||||
--primary: #5A8A8A;
|
||||
--primary-hover: #4A7A7A;
|
||||
--primary-light: rgba(90, 138, 138, 0.1);
|
||||
--bg-primary: #E4F0F0;
|
||||
--bg-secondary: rgba(255, 255, 255, 0.7);
|
||||
--bg-tertiary: rgba(0, 0, 0, 0.03);
|
||||
--bg-hover: rgba(0, 0, 0, 0.05);
|
||||
--text-primary: #3d3d3d;
|
||||
--text-secondary: #666666;
|
||||
--text-tertiary: #999999;
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--bg-gradient: linear-gradient(135deg, #E4F0F0 0%, #D4E8E8 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #6A9A9A 100%);
|
||||
--card-bg: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
// ==================== 深色主题 ====================
|
||||
|
||||
// 云上舞白 - 深色
|
||||
[data-theme="cloud-dancer"][data-mode="dark"] {
|
||||
--primary: #C9A86C;
|
||||
--primary-hover: #D9B87C;
|
||||
--primary-light: rgba(201, 168, 108, 0.15);
|
||||
--bg-primary: #1a1816;
|
||||
--bg-secondary: rgba(40, 36, 32, 0.9);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.05);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #F0EEE9;
|
||||
--text-secondary: #b3b0aa;
|
||||
--text-tertiary: #807d78;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-gradient: linear-gradient(135deg, #1a1816 0%, #252220 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #C9A86C 100%);
|
||||
--card-bg: rgba(40, 36, 32, 0.9);
|
||||
}
|
||||
|
||||
// 刚玉蓝 - 深色
|
||||
[data-theme="corundum-blue"][data-mode="dark"] {
|
||||
--primary: #6A9AAA;
|
||||
--primary-hover: #7AAABA;
|
||||
--primary-light: rgba(106, 154, 170, 0.15);
|
||||
--bg-primary: #141a1c;
|
||||
--bg-secondary: rgba(30, 40, 44, 0.9);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.05);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #E8EEF0;
|
||||
--text-secondary: #a8b4b8;
|
||||
--text-tertiary: #6a7a80;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-gradient: linear-gradient(135deg, #141a1c 0%, #1e282c 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #6A9AAA 100%);
|
||||
--card-bg: rgba(30, 40, 44, 0.9);
|
||||
}
|
||||
|
||||
// 冰猕猴桃汁绿 - 深色
|
||||
[data-theme="kiwi-green"][data-mode="dark"] {
|
||||
--primary: #9ABA7C;
|
||||
--primary-hover: #AACA8C;
|
||||
--primary-light: rgba(154, 186, 124, 0.15);
|
||||
--bg-primary: #161a14;
|
||||
--bg-secondary: rgba(34, 42, 30, 0.9);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.05);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #E8F0E4;
|
||||
--text-secondary: #a8b4a0;
|
||||
--text-tertiary: #6a7a60;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-gradient: linear-gradient(135deg, #161a14 0%, #222a1e 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #9ABA7C 100%);
|
||||
--card-bg: rgba(34, 42, 30, 0.9);
|
||||
}
|
||||
|
||||
// 辛辣红 - 深色
|
||||
[data-theme="spicy-red"][data-mode="dark"] {
|
||||
--primary: #C06068;
|
||||
--primary-hover: #D07078;
|
||||
--primary-light: rgba(192, 96, 104, 0.15);
|
||||
--bg-primary: #1a1416;
|
||||
--bg-secondary: rgba(42, 32, 34, 0.9);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.05);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #F0E8E8;
|
||||
--text-secondary: #b4a8aa;
|
||||
--text-tertiary: #7a6a6c;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-gradient: linear-gradient(135deg, #1a1416 0%, #2a2022 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #C06068 100%);
|
||||
--card-bg: rgba(42, 32, 34, 0.9);
|
||||
}
|
||||
|
||||
// 明水鸭色 - 深色
|
||||
[data-theme="teal-water"][data-mode="dark"] {
|
||||
--primary: #7ABAAA;
|
||||
--primary-hover: #8ACABA;
|
||||
--primary-light: rgba(122, 186, 170, 0.15);
|
||||
--bg-primary: #121a1a;
|
||||
--bg-secondary: rgba(28, 42, 42, 0.9);
|
||||
--bg-tertiary: rgba(255, 255, 255, 0.05);
|
||||
--bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: #E4F0F0;
|
||||
--text-secondary: #a0b4b4;
|
||||
--text-tertiary: #607a7a;
|
||||
--border-color: rgba(255, 255, 255, 0.1);
|
||||
--bg-gradient: linear-gradient(135deg, #121a1a 0%, #1c2a2a 100%);
|
||||
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #7ABAAA 100%);
|
||||
--card-bg: rgba(28, 42, 42, 0.9);
|
||||
}
|
||||
|
||||
// 重置样式
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 滚动条样式
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--text-tertiary);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮基础样式
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片样式
|
||||
.card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user