Mika/cpu_spike_analysis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add spike_visualizer/css/theme.css

Browse source
This commit is contained in:
Mika 2026-01-12 11:39:19 +00:00
parent c3700ecfe0
commit 876fe2acc5
1 changed files with 103 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
spike_visualizer/css/theme.css Normal file
View file

@ -0,0 +1,103 @@
/* ================================================
Themes & Colors
================================================ */
:root {
--color-accent-light: #2d6cdf;
--color-accent-dark: #5aa4f8;
--color-bg-light: #f9f9fb;
--color-bg-dark: #1c1c1e;
--color-surface-light: #ffffff;
--color-surface-dark: #2b2b2e;
--color-text-light: #1a1a1a;
--color-text-dark: #f3f3f3;
--color-muted-light: #e0e0e3;
--color-muted-dark: #3b3b3d;
--color-cpu-high: #ff5c5c;
--color-cpu-mid: #ffb841;
--color-cpu-low: #4caf50;
}
.theme-light {
background-color: var(--color-bg-light);
color: var(--color-text-light);
}
.theme-light .chart-surface {
background-color: var(--color-surface-light);
border: 1px solid var(--color-muted-light);
}
.theme-dark {
background-color: var(--color-bg-dark);
color: var(--color-text-dark);
}
.theme-dark .chart-surface {
background-color: var(--color-surface-dark);
border: 1px solid var(--color-muted-dark);
}
/* ================================================
CPU Highlight States
================================================ */
.cpu-highlight[data-level="high"] {
fill: var(--color-cpu-high);
stroke: #b80000;
stroke-width: 1.5;
}
.cpu-highlight[data-level="mid"] {
fill: var(--color-cpu-mid);
stroke: #d08100;
stroke-width: 1.2;
}
.cpu-highlight[data-level="low"] {
fill: var(--color-cpu-low);
stroke: #2c8c35;
stroke-width: 1.2;
}
/* ================================================
Interactive Emphasis & Animations
================================================ */
.cpu-highlight:hover {
opacity: 0.9;
transform: scale(1.1);
transition: transform 0.15s ease-in-out, opacity 0.15s;
}
.theme-light .tooltip {
background-color: var(--color-surface-light);
border: 1px solid var(--color-muted-light);
color: var(--color-text-light);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.theme-dark .tooltip {
background-color: var(--color-surface-dark);
border: 1px solid var(--color-muted-dark);
color: var(--color-text-dark);
box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
/* ================================================
Footer & Meta
================================================ */
footer {
font-size: 0.8rem;
text-align: center;
margin-top: 2rem;
color: var(--color-muted-light);
}
footer::after {
content: "© 2026 Donau2Space.de";
display: block;
margin-top: 0.5rem;
color: inherit;
}