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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user