pengyejiatu/IC-Coder-Plugin
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 统一使用蓝色主题色

Browse Source 
- 压缩图标改为蓝色 #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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/ICViewProvider.ts
View File

@ -320,15 +320,15 @@ export class ICViewProvider implements vscode.WebviewViewProvider {
width: 200px;
padding: 8px 12px;
margin: 4px 0;
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
background: #007ACC;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.btn:hover {
background: var(--vscode-button-hoverBackground);
background: #005a9e;
}
</style>
</head>

2
src/views/contextButton.ts
View File

@ -16,7 +16,7 @@ export function getContextButtonContent(): string {
<span class="add-context-label">添加上下文</span>
</button>
<span class="tooltiptext">添加文件、文件夹、图片或文档作为上下文</span>
<span class="tooltiptext">添加文件、文件夹作为上下文</span>
</div>
<!-- 上拉菜单 -->

2
src/views/conversationHistoryBar.ts
View File

@ -330,7 +330,7 @@ export function getConversationHistoryBarStyles(): string {
}
.new-conversation-button:hover {
background: var(--vscode-toolbar-hoverBackground);
background: #007ACC;
transform: scale(1.1);
}

37
src/views/messageArea.ts
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;

6
src/views/planCard.ts
View File

@ -195,11 +195,11 @@ export function getPlanCardStyles(): string {
background: var(--vscode-list-hoverBackground);
}
.plan-btn-confirm {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
background: #007ACC;
color: #ffffff;
}
.plan-btn-confirm:hover {
background: var(--vscode-button-hoverBackground);
background: #005a9e;
}
.plan-btn-cancel {
background: transparent;

18
src/views/progressBar.ts
View File

@ -186,8 +186,8 @@ export function getProgressBarStyles(): string {
/* 已完成状态 */
.progress-step.completed .step-circle {
background: var(--vscode-button-background);
border-color: var(--vscode-button-background);
background: #007ACC;
border-color: #007ACC;
}
.progress-step.completed .step-number {
@ -204,14 +204,14 @@ export function getProgressBarStyles(): string {
}
.progress-step.completed + .progress-line {
background: var(--vscode-button-background);
background: #007ACC;
}
/* 进行中状态 */
.progress-step.active .step-circle {
background: var(--vscode-button-background);
border-color: var(--vscode-button-background);
box-shadow: 0 0 0 2px var(--vscode-button-background)33;
background: #007ACC;
border-color: #007ACC;
box-shadow: 0 0 0 2px #007ACC33;
animation: pulse 2s infinite;
}
@ -226,10 +226,10 @@ export function getProgressBarStyles(): string {
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 2px var(--vscode-button-background)33;
box-shadow: 0 0 0 2px #007ACC33;
}
50% {
box-shadow: 0 0 0 4px var(--vscode-button-background)1a;
box-shadow: 0 0 0 4px #007ACC1a;
}
}
@ -351,7 +351,7 @@ export function getProgressBarScript(): string {
// 更新连接线
document.querySelectorAll('.progress-line').forEach((line, index) => {
if (index < currentIndex) {
line.style.background = 'var(--vscode-button-background)';
line.style.background = '#007ACC';
} else {
line.style.background = 'var(--vscode-input-border)';
}