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

4
src/constants/toolIcons.ts
View File

@ -9,10 +9,10 @@
export const collapseIconSvg = ` export const collapseIconSvg = `
<span class="tool-collapse-icon"> <span class="tool-collapse-icon">
<svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> <svg class="icon-collapsed" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#8a8a8a"/> <path d="M355.05845325 160.07583932c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712L618.05891976 494.24668297c9.74075802 9.74075802 9.74075802 25.76587604 0 35.50663406L355.05845325 792.75378356c-19.63862503 19.63862503-19.63862503 51.53175211 0 71.17037712s51.53175211 19.63862503 71.17037716 0L706.98261396 583.17037714c39.27725009-39.27725009 39.27725009-102.90639522 0-142.18364526L426.22883041 160.07583932c-19.63862503-19.63862503-51.53175211-19.63862503-71.17037716 0z" fill="#007ACC"/>
</svg> </svg>
<svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> <svg class="icon-expanded" style="display:none;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#8a8a8a"/> <path d="M899.70688 272.92672l-382.19776 373.53472-393.45664-384.512a43.52 43.52 0 0 0-60.52352 0 41.14944 41.14944 0 0 0 0 59.14624l423.72096 414.11584a43.35616 43.35616 0 0 0 60.56448 0l412.4672-403.11296a41.20064 41.20064 0 0 0 11.06432-40.41728 42.3424 42.3424 0 0 0-30.2848-29.58336 43.52 43.52 0 0 0-41.35424 10.84416z m0 0" fill="#007ACC"/>
</svg> </svg>
</span> </span>
`; `;

6
src/views/ICViewProvider.ts
View File

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

2
src/views/contextButton.ts
View File

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

2
src/views/conversationHistoryBar.ts
View File

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

37
src/views/messageArea.ts
View File

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

6
src/views/planCard.ts
View File

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

18
src/views/progressBar.ts
View File

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