再见
This commit is contained in:
cc committed
1 parent
f3b0cf5d3a
commit
54016abac5
382 files changed
+2
-188190
No files matched your search
@@ -1,340 +0,0 @@
|
||||
// 批量转写 - 共享基础样式（overlay / modal-content / animations）
|
||||
// 被 ChatPage.scss 和 BatchTranscribeGlobal.tsx 同时使用
|
||||
|
||||
.batch-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
animation: batchFadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.batch-modal-content {
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
animation: batchSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes batchFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes batchSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 批量转写进度浮窗（非阻塞 toast）
|
||||
.batch-progress-toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: 320px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
||||
border: 1px solid var(--border-color);
|
||||
z-index: 10000;
|
||||
animation: batchToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow: hidden;
|
||||
|
||||
.batch-progress-toast-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
.batch-progress-toast-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
|
||||
svg {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-progress-toast-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-progress-toast-body {
|
||||
padding: 12px 14px;
|
||||
|
||||
.progress-info-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.progress-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
|
||||
.progress-percent {
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-eta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px; // 稍微小一点
|
||||
color: var(--text-tertiary, #999); // 使用更淡的颜色
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary), var(--primary));
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes batchToastSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px) scale(0.96);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-inline-result-toast {
|
||||
.batch-progress-toast-title {
|
||||
svg {
|
||||
color: #22c55e;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-inline-result-summary {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.batch-inline-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #16a34a;
|
||||
svg { color: #16a34a; }
|
||||
}
|
||||
|
||||
&.fail {
|
||||
color: #dc2626;
|
||||
svg { color: #dc2626; }
|
||||
}
|
||||
|
||||
&.muted {
|
||||
color: var(--text-tertiary, #999);
|
||||
svg { color: var(--text-tertiary, #999); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 批量转写结果对话框
|
||||
.batch-result-modal {
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
|
||||
.batch-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
svg {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-modal-body {
|
||||
padding: 1.5rem;
|
||||
|
||||
.result-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-left: auto;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.success {
|
||||
svg {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #4caf50;
|
||||
}
|
||||
}
|
||||
|
||||
&.fail {
|
||||
svg {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #f44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-tip {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 152, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 152, 0, 0.3);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 1rem 1.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
|
||||
&.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
// 聊天背景涂鸦图案
|
||||
// 使用 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};
|
||||
}
|
||||
@@ -1,363 +0,0 @@
|
||||
// WeFlow — ChatGPT-inspired design token system
|
||||
// Accent colors per theme, backgrounds unified across themes.
|
||||
@use './chat-patterns.scss';
|
||||
|
||||
// =============================================
|
||||
// Light mode (default)
|
||||
// =============================================
|
||||
:root,
|
||||
[data-mode="light"] {
|
||||
// ---- Accent / Brand (default = ChatGPT green) ----
|
||||
--primary: #10a37f;
|
||||
--primary-rgb: 16, 163, 127;
|
||||
--primary-hover: #0d8a6c;
|
||||
--primary-light: rgba(16, 163, 127, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #10a37f 0%, #1ab893 100%);
|
||||
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
|
||||
// ---- Backgrounds (same for all themes) ----
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9f9f9;
|
||||
--bg-secondary-solid: #f9f9f9;
|
||||
--bg-tertiary: #f0f0f0;
|
||||
--bg-hover: #ececec;
|
||||
--bg-sidebar: #f9f9f9;
|
||||
--bg-gradient: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
|
||||
|
||||
// ---- Text ----
|
||||
--text-primary: #0d0d0d;
|
||||
--text-secondary: #6e6e80;
|
||||
--text-tertiary: #8e8ea0;
|
||||
|
||||
// ---- Borders ----
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--border-radius: 12px;
|
||||
|
||||
// ---- Shadows ----
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
|
||||
// ---- Cards ----
|
||||
--card-bg: #f7f7f8;
|
||||
--card-inner-bg: #ffffff;
|
||||
--sent-card-bg: var(--primary);
|
||||
|
||||
// ---- On-primary foreground ----
|
||||
--on-primary: #ffffff;
|
||||
|
||||
// ---- Layout ----
|
||||
--sidebar-width: 200px;
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Dark mode
|
||||
// =============================================
|
||||
[data-mode="dark"] {
|
||||
--primary: #10a37f;
|
||||
--primary-rgb: 16, 163, 127;
|
||||
--primary-hover: #1ab893;
|
||||
--primary-light: rgba(16, 163, 127, 0.15);
|
||||
--primary-gradient: linear-gradient(135deg, #10a37f 0%, #1ab893 100%);
|
||||
|
||||
--danger: #f87171;
|
||||
--warning: #fbbf24;
|
||||
|
||||
--bg-primary: #212121;
|
||||
--bg-secondary: #2f2f2f;
|
||||
--bg-secondary-solid: #2f2f2f;
|
||||
--bg-tertiary: #383838;
|
||||
--bg-hover: #383838;
|
||||
--bg-sidebar: #171717;
|
||||
--bg-gradient: linear-gradient(180deg, #212121 0%, #1a1a1a 100%);
|
||||
|
||||
--text-primary: #ececec;
|
||||
--text-secondary: #b4b4b4;
|
||||
--text-tertiary: #676767;
|
||||
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
|
||||
--card-bg: #2f2f2f;
|
||||
--card-inner-bg: #353535;
|
||||
--sent-card-bg: var(--primary);
|
||||
--on-primary: #ffffff;
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Accent color themes (override --primary only)
|
||||
// Backgrounds/text stay the same — like ChatGPT's accent system.
|
||||
// =============================================
|
||||
|
||||
// 云上舞白 — warm brown
|
||||
[data-theme="cloud-dancer"] {
|
||||
--primary: #8B7355;
|
||||
--primary-rgb: 139, 115, 85;
|
||||
--primary-hover: #7A6548;
|
||||
--primary-light: rgba(139, 115, 85, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #A68B5B 100%);
|
||||
}
|
||||
[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);
|
||||
--primary-gradient: linear-gradient(135deg, #8B7355 0%, #C9A86C 100%);
|
||||
}
|
||||
|
||||
// 繁花如梦 — rose pink
|
||||
[data-theme="blossom-dream"] {
|
||||
--primary: #D4849A;
|
||||
--primary-rgb: 212, 132, 154;
|
||||
--primary-hover: #C4748A;
|
||||
--primary-light: rgba(212, 132, 154, 0.12);
|
||||
--primary-gradient: linear-gradient(135deg, #D4849A 0%, #E8A8B8 100%);
|
||||
}
|
||||
[data-theme="blossom-dream"][data-mode="dark"] {
|
||||
--primary: #D19EBB;
|
||||
--primary-rgb: 209, 158, 187;
|
||||
--primary-hover: #DDB0C8;
|
||||
--primary-light: rgba(209, 158, 187, 0.15);
|
||||
--primary-gradient: linear-gradient(135deg, #D19EBB 0%, #A878A8 100%);
|
||||
}
|
||||
|
||||
// 刚玉蓝 — steel blue
|
||||
[data-theme="corundum-blue"] {
|
||||
--primary: #4A6670;
|
||||
--primary-rgb: 74, 102, 112;
|
||||
--primary-hover: #3D565E;
|
||||
--primary-light: rgba(74, 102, 112, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #5A7A86 100%);
|
||||
}
|
||||
[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);
|
||||
--primary-gradient: linear-gradient(135deg, #4A6670 0%, #6A9AAA 100%);
|
||||
}
|
||||
|
||||
// 冰猕猴桃汁绿 — kiwi green
|
||||
[data-theme="kiwi-green"] {
|
||||
--primary: #7A9A5C;
|
||||
--primary-rgb: 122, 154, 92;
|
||||
--primary-hover: #6A8A4C;
|
||||
--primary-light: rgba(122, 154, 92, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #8AAA6C 100%);
|
||||
}
|
||||
[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);
|
||||
--primary-gradient: linear-gradient(135deg, #7A9A5C 0%, #9ABA7C 100%);
|
||||
}
|
||||
|
||||
// 辛辣红 — spicy red
|
||||
[data-theme="spicy-red"] {
|
||||
--primary: #8B4049;
|
||||
--primary-rgb: 139, 64, 73;
|
||||
--primary-hover: #7A3540;
|
||||
--primary-light: rgba(139, 64, 73, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #A05058 100%);
|
||||
}
|
||||
[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);
|
||||
--primary-gradient: linear-gradient(135deg, #8B4049 0%, #C06068 100%);
|
||||
}
|
||||
|
||||
// 明水鸭色 — teal
|
||||
[data-theme="teal-water"] {
|
||||
--primary: #5A8A8A;
|
||||
--primary-rgb: 90, 138, 138;
|
||||
--primary-hover: #4A7A7A;
|
||||
--primary-light: rgba(90, 138, 138, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #6A9A9A 100%);
|
||||
}
|
||||
[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);
|
||||
--primary-gradient: linear-gradient(135deg, #5A8A8A 0%, #7ABAAA 100%);
|
||||
}
|
||||
|
||||
// Geist — monochrome
|
||||
[data-theme="geist"] {
|
||||
--primary: #444444;
|
||||
--primary-rgb: 68, 68, 68;
|
||||
--primary-hover: #333333;
|
||||
--primary-light: rgba(68, 68, 68, 0.08);
|
||||
--primary-gradient: linear-gradient(135deg, #444444 0%, #666666 100%);
|
||||
}
|
||||
[data-theme="geist"][data-mode="dark"] {
|
||||
--primary: #ededed;
|
||||
--primary-rgb: 237, 237, 237;
|
||||
--primary-hover: #d5d5d5;
|
||||
--primary-light: rgba(237, 237, 237, 0.1);
|
||||
--primary-gradient: linear-gradient(135deg, #ededed 0%, #cccccc 100%);
|
||||
--on-primary: #111111;
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Global reset
|
||||
// =============================================
|
||||
* {
|
||||
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%;
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Scrollbar
|
||||
// =============================================
|
||||
::-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);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Button base
|
||||
// =============================================
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, opacity 0.15s ease;
|
||||
|
||||
&-primary {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Card base
|
||||
// =============================================
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// Switch toggle
|
||||
// =============================================
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user