Add CPU/GPU names on perf charts, reusable color picker, and header toolbar redesign

- Show CPU and GPU model names as overlays on performance chart cards
- Add cpu_name field to performance API with cross-platform detection
- Extract reusable color-picker popover module (9 presets + custom picker)
- Per-chart color customization for CPU/RAM/GPU performance charts
- Redesign header: compact toolbar container with icon-only buttons
- Compact language dropdown (EN/RU/ZH), icon-only login/logout
- Use accent color for FPS charts, range slider accent, dashboard icons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 21:12:13 +03:00
parent 2bca119ad4
commit 6a7ba3d0b7
13 changed files with 361 additions and 127 deletions

View File

@@ -104,6 +104,7 @@
.dashboard-target-icon {
font-size: 1rem;
flex-shrink: 0;
color: var(--primary-text-color);
}
.dashboard-target-name {
@@ -317,7 +318,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
margin-bottom: 0;
}
.perf-chart-label {
@@ -328,14 +329,33 @@
color: var(--text-secondary);
}
.perf-chart-subtitle {
position: absolute;
top: 0;
left: 0;
font-size: 0.6rem;
font-weight: 400;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: calc(100% - 4px);
pointer-events: none;
opacity: 0.7;
z-index: 1;
}
.perf-chart-value {
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-text-color);
}
.perf-chart-value.cpu { color: #2196F3; }
.perf-chart-value.ram { color: #4CAF50; }
.perf-chart-value.gpu { color: #FF9800; }
.perf-chart-label .color-picker-swatch {
width: 12px;
height: 12px;
vertical-align: middle;
}
.perf-chart-unavailable {
text-align: center;