style: 统一使用蓝色主题色

- 压缩图标改为蓝色 #007ACC
- 问题选项按钮改为蓝色背景,悬停深蓝色
- 按钮、进度条等组件统一使用蓝色主题
- 添加 CSS 强制规则确保图标在所有主题下显示蓝色
This commit is contained in:
Roe-xin
2026-03-04 14:51:36 +08:00
parent c8e9a5b897
commit f7f45668d3
7 changed files with 43 additions and 32 deletions

View File

@ -248,19 +248,21 @@ export function getMessageAreaStyles(): string {
}
.question-option {
padding: 8px 16px;
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
background: #007ACC;
color: #ffffff;
border: 1px solid #007ACC;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.question-option:hover {
background: var(--vscode-button-secondaryHoverBackground);
background: #005a9e;
border-color: #005a9e;
}
.question-option.selected {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
background: #007ACC;
color: #ffffff;
border-color: #007ACC;
}
.question-message.answered .question-option:not(.selected) {
opacity: 0.5;
@ -420,6 +422,13 @@ export function getMessageAreaStyles(): string {
height: 100%;
display: block;
}
.tool-collapse-icon svg path {
fill: #007ACC !important;
}
.icon-collapsed svg path,
.icon-expanded svg path {
fill: #007ACC !important;
}
.tool-segment-header.collapsed .tool-collapse-icon {
transform: rotate(-90deg);
}
@ -546,7 +555,7 @@ export function getMessageAreaStyles(): string {
.tool-segment-description {
margin: 6px 0 0 0px;
font-size: 0.9rem;
color: #ccc;
color: var(--vscode-descriptionForeground);
line-height: 1.4;
}
/* 低调显示的工具调用样式 */
@ -585,20 +594,22 @@ export function getMessageAreaStyles(): string {
}
.segment-question .question-option {
padding: 8px 16px;
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
border: 1px solid var(--vscode-button-border);
background: #007ACC;
color: #ffffff;
border: 1px solid #007ACC;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
}
.segment-question .question-option:hover {
background: var(--vscode-button-secondaryHoverBackground);
background: #005a9e;
border-color: #005a9e;
}
.segment-question .question-option.selected {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
background: #007ACC;
color: #ffffff;
border-color: #007ACC;
}
.segment-question.answered .question-option:not(.selected) {
opacity: 0.5;