Add spike_visualizer/css/theme.css

2026-01-12 11:39:19 +00:00 · 2026-01-12 11:39:19 +00:00 · 876fe2acc5
commit 876fe2acc5
parent c3700ecfe0
1 changed files with 103 additions and 0 deletions
--- a/spike_visualizer/css/theme.css
+++ b/spike_visualizer/css/theme.css
@ -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;
+}