103 lines
No EOL
2.4 KiB
CSS
103 lines
No EOL
2.4 KiB
CSS
/* ================================================
|
|
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;
|
|
} |