Add data_visualization/css/layout.css

2026-04-26 02:07:48 +00:00 · 2026-04-26 02:07:48 +00:00 · 3c7ef34260
commit 3c7ef34260
parent 22e1814644
1 changed files with 117 additions and 0 deletions
--- a/data_visualization/css/layout.css
+++ b/data_visualization/css/layout.css
@ -0,0 +1,117 @@
+:root {
+  --color-bg: #0a0a0a;
+  --color-surface: #1c1c1c;
+  --color-accent: #3ac0ff;
+  --color-text: #e0e0e0;
+  --color-text-muted: #a0a0a0;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --font-base: system-ui, sans-serif;
+  --font-size-base: 1rem;
+  --font-size-sm: 0.875rem;
+  --layout-header-height: 3.5rem;
+  --layout-footer-height: 2.5rem;
+}
+
+/* ===================== App Layout ===================== */
+.app-shell {
+  display: grid;
+  grid-template-rows: var(--layout-header-height) 1fr var(--layout-footer-height);
+  height: 100vh;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-base);
+  overflow: hidden;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-md);
+  background-color: var(--color-surface);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.app-main {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  overflow: hidden;
+}
+
+.app-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  background-color: var(--color-surface);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--color-text-muted);
+}
+
+/* ===================== Panels ===================== */
+.heatmap-panel {
+  position: relative;
+  background-color: #000;
+  overflow: hidden;
+}
+
+.stats-panel {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ===================== Sidebar ===================== */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.sidebar .sidebar__box {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+}
+
+.sidebar .sidebar__box + .sidebar__box {
+  margin-top: var(--spacing-sm);
+}
+
+/* ===================== Responsive ===================== */
+@media (max-width: 768px) {
+  .app-main {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+
+  .heatmap-panel {
+    order: 2;
+    height: 50vh;
+  }
+
+  .stats-panel {
+    order: 1;
+    height: auto;
+    max-height: 50vh;
+  }
+}
+
+/* ===================== Footer Copyright ===================== */
+.app-footer::after {
+  content: '© 2026 Donau2Space.de';
+  margin-left: var(--spacing-sm);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}