mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-05-26 07:42:36 +08:00
cc
478 lines
13 KiB
SCSS
478 lines
13 KiB
SCSS
// 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);
|
|
--card-inner-bg: #FAFAF7;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// ==================== 浅色主题 ====================
|
|
|
|
// 云上舞白主题 (默认)
|
|
[data-theme="cloud-dancer"][data-mode="light"],
|
|
[data-theme="cloud-dancer"]:not([data-mode]) {
|
|
--primary: #8B7355;
|
|
--primary-rgb: 139, 115, 85;
|
|
--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);
|
|
--card-inner-bg: #FAFAF7;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 刚玉蓝主题
|
|
[data-theme="corundum-blue"][data-mode="light"],
|
|
[data-theme="corundum-blue"]:not([data-mode]) {
|
|
--primary: #4A6670;
|
|
--primary-rgb: 74, 102, 112;
|
|
--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);
|
|
--card-inner-bg: #F8FAFB;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 冰猕猴桃汁绿主题
|
|
[data-theme="kiwi-green"][data-mode="light"],
|
|
[data-theme="kiwi-green"]:not([data-mode]) {
|
|
--primary: #7A9A5C;
|
|
--primary-rgb: 122, 154, 92;
|
|
--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);
|
|
--card-inner-bg: #F8FBF6;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 辛辣红主题
|
|
[data-theme="spicy-red"][data-mode="light"],
|
|
[data-theme="spicy-red"]:not([data-mode]) {
|
|
--primary: #8B4049;
|
|
--primary-rgb: 139, 64, 73;
|
|
--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);
|
|
--card-inner-bg: #FAF8F8;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 明水鸭色主题
|
|
[data-theme="teal-water"][data-mode="light"],
|
|
[data-theme="teal-water"]:not([data-mode]) {
|
|
--primary: #5A8A8A;
|
|
--primary-rgb: 90, 138, 138;
|
|
--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);
|
|
--card-inner-bg: #F6FBFB;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 繁花如梦 - 浅色（晨曦花境）
|
|
[data-theme="blossom-dream"][data-mode="light"],
|
|
[data-theme="blossom-dream"]:not([data-mode]) {
|
|
// 三色定义（供伪元素光晕使用，饱和度提高以便在底色上可见）
|
|
--blossom-pink: #F0A0B8;
|
|
--blossom-peach: #FFB07A;
|
|
--blossom-blue: #90B8E0;
|
|
|
|
// 主品牌色：Pantone 粉晶 Rose Quartz
|
|
--primary: #D4849A;
|
|
--primary-rgb: 212, 132, 154;
|
|
--primary-hover: #C4748A;
|
|
--primary-light: rgba(212, 132, 154, 0.12);
|
|
|
|
// 背景三层：主背景最深（相对），面板次之，卡片最白
|
|
--bg-primary: #F5EDF2;
|
|
--bg-secondary: rgba(255, 255, 255, 0.82);
|
|
--bg-tertiary: rgba(212, 132, 154, 0.06);
|
|
--bg-hover: rgba(212, 132, 154, 0.09);
|
|
|
|
// 文字：提高对比度，主色接近纯黑只带微弱紫调
|
|
--text-primary: #1E1A22;
|
|
--text-secondary: #6B5F70;
|
|
--text-tertiary: #9A8A9E;
|
|
// 边框：粉色半透明，有存在感但不强硬
|
|
--border-color: rgba(212, 132, 154, 0.18);
|
|
|
|
--bg-gradient: linear-gradient(150deg, #F5EDF2 0%, #F0EAF6 50%, #EAF0F8 100%);
|
|
--primary-gradient: linear-gradient(135deg, #D4849A 0%, #E8A8B8 100%);
|
|
|
|
// 卡片：高不透明度白，与背景形成明显层次
|
|
--card-bg: rgba(255, 255, 255, 0.88);
|
|
--card-inner-bg: rgba(255, 255, 255, 0.95);
|
|
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// ==================== 深色主题 ====================
|
|
|
|
// 云上舞白 - 深色
|
|
[data-theme="cloud-dancer"][data-mode="dark"] {
|
|
--primary: #C9A86C;
|
|
--primary-rgb: 201, 168, 108;
|
|
--primary-hover: #D9B87C;
|
|
--primary-light: rgba(201, 168, 108, 0.15);
|
|
--bg-primary: #1a1816;
|
|
--bg-secondary: rgba(40, 36, 32, 0.9);
|
|
--bg-secondary-solid: #282420;
|
|
--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);
|
|
--card-inner-bg: #27231F;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 刚玉蓝 - 深色
|
|
[data-theme="corundum-blue"][data-mode="dark"] {
|
|
--primary: #6A9AAA;
|
|
--primary-rgb: 106, 154, 170;
|
|
--primary-hover: #7AAABA;
|
|
--primary-light: rgba(106, 154, 170, 0.15);
|
|
--bg-primary: #141a1c;
|
|
--bg-secondary: rgba(30, 40, 44, 0.9);
|
|
--bg-secondary-solid: #1e282c;
|
|
--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);
|
|
--card-inner-bg: #1D272A;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 冰猕猴桃汁绿 - 深色
|
|
[data-theme="kiwi-green"][data-mode="dark"] {
|
|
--primary: #9ABA7C;
|
|
--primary-rgb: 154, 186, 124;
|
|
--primary-hover: #AACA8C;
|
|
--primary-light: rgba(154, 186, 124, 0.15);
|
|
--bg-primary: #161a14;
|
|
--bg-secondary: rgba(34, 42, 30, 0.9);
|
|
--bg-secondary-solid: #222a1e;
|
|
--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);
|
|
--card-inner-bg: #21281D;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 辛辣红 - 深色
|
|
[data-theme="spicy-red"][data-mode="dark"] {
|
|
--primary: #C06068;
|
|
--primary-rgb: 192, 96, 104;
|
|
--primary-hover: #D07078;
|
|
--primary-light: rgba(192, 96, 104, 0.15);
|
|
--bg-primary: #1a1416;
|
|
--bg-secondary: rgba(42, 32, 34, 0.9);
|
|
--bg-secondary-solid: #2a2022;
|
|
--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);
|
|
--card-inner-bg: #281F21;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 明水鸭色 - 深色
|
|
[data-theme="teal-water"][data-mode="dark"] {
|
|
--primary: #7ABAAA;
|
|
--primary-rgb: 122, 186, 170;
|
|
--primary-hover: #8ACABA;
|
|
--primary-light: rgba(122, 186, 170, 0.15);
|
|
--bg-primary: #121a1a;
|
|
--bg-secondary: rgba(28, 42, 42, 0.9);
|
|
--bg-secondary-solid: #1c2a2a;
|
|
--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);
|
|
--card-inner-bg: #1B2828;
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 繁花如梦 - 深色（夜阑幽梦）
|
|
[data-theme="blossom-dream"][data-mode="dark"] {
|
|
// 光晕色（供伪元素使用，降低饱和度避免刺眼）
|
|
--blossom-pink: #C670C3;
|
|
--blossom-purple: #5F4B8B;
|
|
--blossom-blue: #3A2A50;
|
|
|
|
// 主品牌色：藕粉/烟紫粉，降饱和度不刺眼
|
|
--primary: #D19EBB;
|
|
--primary-rgb: 209, 158, 187;
|
|
--primary-hover: #DDB0C8;
|
|
--primary-light: rgba(209, 158, 187, 0.15);
|
|
|
|
// 背景三层：极深黑灰底（去掉紫薯色），面板略浅，卡片再浅一级
|
|
--bg-primary: #151316;
|
|
--bg-secondary: rgba(34, 30, 36, 0.92);
|
|
--bg-secondary-solid: #221E24;
|
|
--bg-tertiary: rgba(255, 255, 255, 0.04);
|
|
--bg-hover: rgba(209, 158, 187, 0.1);
|
|
|
|
// 文字
|
|
--text-primary: #F0EAF4;
|
|
--text-secondary: #A898AE;
|
|
--text-tertiary: #6A5870;
|
|
// 边框：极细白色内发光，剥离层级
|
|
--border-color: rgba(255, 255, 255, 0.07);
|
|
|
|
--bg-gradient: linear-gradient(150deg, #151316 0%, #1A1620 50%, #131018 100%);
|
|
--primary-gradient: linear-gradient(135deg, #D19EBB 0%, #A878A8 100%);
|
|
|
|
// 卡片：比面板更亮一档，用深灰而非紫色
|
|
--card-bg: rgba(42, 38, 46, 0.92);
|
|
--card-inner-bg: rgba(52, 48, 56, 0.96);
|
|
|
|
--sent-card-bg: var(--primary);
|
|
}
|
|
|
|
// 重置样式
|
|
* {
|
|
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;
|
|
}
|
|
|
|
// 全局 Switch 开关样式
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
|
|
input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.switch-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--bg-tertiary);
|
|
transition: 0.3s;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--border-color);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 18px;
|
|
width: 18px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: var(--text-tertiary);
|
|
transition: 0.3s;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
input:checked+.switch-slider {
|
|
background-color: var(--primary);
|
|
border-color: var(--primary);
|
|
|
|
&::before {
|
|
transform: translateX(20px);
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
// 禁用状态
|
|
input:disabled+.switch-slider {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
} |