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

ui: 导航按钮和 Think 按钮视觉增强

Browse Source 
导航按钮 (.icon-btn):
- 增加玻璃背景 + 边框，不再透明
- hover 时青色高亮 + 发光 + 上浮
- 图标 18px → 20px

Think 按钮:
- 尺寸 38px → 40px，默认色 text-muted → text-secondary
- hover 时紫色发光 + 上浮
- 选中态渐变背景 + 更强光晕
This commit is contained in:
thzxx
2026-04-03 13:00:20 +08:00
parent be4e7bf101
commit 2e1b0ad066
1 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+25 -16
View File
@@ -210,24 +210,31 @@ body::before {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: transparent;
width: 38px;
height: 38px;
border: 1px solid var(--border-glass);
background: var(--bg-glass-light);
color: var(--text-secondary);
border-radius: var(--radius-sm);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition);
}
.icon-btn:hover {
background: var(--bg-glass-hover);
color: var(--text-primary);
color: var(--accent-cyan);
border-color: var(--accent-cyan);
box-shadow: 0 0 12px rgba(0, 245, 212, 0.15);
transform: translateY(-1px);
}
.icon-btn:active {
transform: translateY(0) scale(0.95);
}
.icon-btn svg {
width: 18px;
height: 18px;
width: 20px;
height: 20px;
}
.icon-btn.sm {
@@ -327,8 +334,8 @@ body::before {
.think-toggle input { display: none; }
.think-btn {
width: 38px;
height: 38px;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--bg-glass-light);
border: 1px solid var(--border-glass);
@@ -336,25 +343,27 @@ body::before {
align-items: center;
justify-content: center;
transition: var(--transition);
color: var(--text-muted);
color: var(--text-secondary);
}
.think-btn svg {
width: 18px;
height: 18px;
width: 20px;
height: 20px;
}
.think-toggle:not(.unavailable):hover .think-btn {
border-color: var(--accent-purple);
color: var(--accent-purple);
background: rgba(123, 47, 247, 0.08);
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 {
background: rgba(123, 47, 247, 0.15);
background: linear-gradient(135deg, rgba(123, 47, 247, 0.2), rgba(0, 245, 212, 0.1));
border-color: var(--accent-purple);
color: var(--accent-purple);
box-shadow: 0 0 10px rgba(123, 47, 247, 0.25);
box-shadow: 0 0 14px rgba(123, 47, 247, 0.3);
}
.think-toggle.unavailable .think-btn {