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

@@ -195,6 +195,7 @@ select:disabled {
input[type="range"] {
width: 100%;
margin: 8px 0;
accent-color: var(--primary-color);
}
/* Better password field appearance */
@@ -394,8 +395,7 @@ input:-webkit-autofill:focus {
.modal-header-btn:focus-visible,
.tab-btn:focus-visible,
.stream-tab-btn:focus-visible,
.search-toggle:focus-visible,
.theme-toggle:focus-visible,
.header-btn:focus-visible,
.tutorial-trigger-btn:focus-visible,
.tutorial-close-btn:focus-visible,
.btn-expand-collapse:focus-visible,