MetonaTeam/metona-ollama-desktop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ui: 导航按钮和 Think 按钮统一渐变风格

Browse Source 
所有按钮统一为青紫渐变 + 发光风格：
- 导航按钮: 渐变背景、白色图标、hover 放大 + 光晕
- Think 按钮选中态: 渐变背景、白色图标，与发送按钮一致
- Think 按钮未选中: 玻璃态，hover 紫色放大
- 尺寸统一 40-42px，与发送按钮对齐
This commit is contained in:
thzxx
2026-04-03 13:05:25 +08:00
parent 2e1b0ad066
commit 7f842fc02e
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+23 -21
View File
@@ -205,31 +205,29 @@ body::before {
50% { opacity: 0.5; box-shadow: 0 0 12px currentColor; } 50% { opacity: 0.5; box-shadow: 0 0 12px currentColor; }
} }
/* ── 图标按钮 ── */ /* ── 图标按钮（渐变风格，与发送按钮统一）── */
.icon-btn { .icon-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 38px; width: 40px;
height: 38px; height: 40px;
border: 1px solid var(--border-glass); border: none;
background: var(--bg-glass-light); background: var(--gradient-main);
color: var(--text-secondary); color: white;
border-radius: var(--radius-md); border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: var(--transition); transition: var(--transition);
box-shadow: 0 2px 10px rgba(0, 245, 212, 0.25);
} }
.icon-btn:hover { .icon-btn:hover {
background: var(--bg-glass-hover); transform: scale(1.05);
color: var(--accent-cyan); box-shadow: 0 4px 18px rgba(0, 245, 212, 0.4);
border-color: var(--accent-cyan);
box-shadow: 0 0 12px rgba(0, 245, 212, 0.15);
transform: translateY(-1px);
} }
.icon-btn:active { .icon-btn:active {
transform: translateY(0) scale(0.95); transform: scale(0.95);
} }
.icon-btn svg { .icon-btn svg {
@@ -334,8 +332,8 @@ body::before {
.think-toggle input { display: none; } .think-toggle input { display: none; }
.think-btn { .think-btn {
width: 40px; width: 42px;
height: 40px; height: 42px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-glass-light); background: var(--bg-glass-light);
border: 1px solid var(--border-glass); border: 1px solid var(--border-glass);
@@ -352,18 +350,22 @@ body::before {
} }
.think-toggle:not(.unavailable):hover .think-btn { .think-toggle:not(.unavailable):hover .think-btn {
transform: scale(1.05);
box-shadow: 0 4px 18px rgba(123, 47, 247, 0.35);
border-color: var(--accent-purple); border-color: var(--accent-purple);
color: var(--accent-purple); color: var(--accent-purple);
background: rgba(123, 47, 247, 0.1);
box-shadow: 0 0 12px rgba(123, 47, 247, 0.15);
transform: translateY(-1px);
} }
.think-toggle input:checked + .think-btn { .think-toggle input:checked + .think-btn {
background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(0, 245, 212, 0.1)); background: var(--gradient-main);
border-color: var(--accent-purple); border: none;
color: var(--accent-purple); color: white;
box-shadow: 0 0 14px rgba(123, 47, 247, 0.3); box-shadow: 0 2px 10px rgba(0, 245, 212, 0.25);
}
.think-toggle input:checked + .think-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 18px rgba(0, 245, 212, 0.4);
} }
.think-toggle.unavailable .think-btn { .think-toggle.unavailable .think-btn {