From 876fe2acc5c6d1e65f577e0673c12501b1218e14 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Mon, 12 Jan 2026 11:39:19 +0000
Subject: [PATCH] Add spike_visualizer/css/theme.css

---
 spike_visualizer/css/theme.css | 103 +++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 spike_visualizer/css/theme.css

diff --git a/spike_visualizer/css/theme.css b/spike_visualizer/css/theme.css
new file mode 100644
index 0000000..8bdea1d
--- /dev/null
+++ 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;
+}
\ No newline at end of file