Add results_visualization/css/components.css

2026-01-22 11:58:35 +00:00 · 2026-01-22 11:58:35 +00:00 · 037bb38f46
commit 037bb38f46
parent a31363ba7a
1 changed files with 130 additions and 0 deletions
--- a/results_visualization/css/components.css
+++ b/results_visualization/css/components.css
@ -0,0 +1,130 @@
+:root {
+  --primary-color: #2a6db0;
+  --secondary-color: #f5f7fa;
+  --accent-color: #e1e8ed;
+  --text-color: #222;
+  --text-muted: #666;
+  --font-base: 'system-ui', sans-serif;
+  --radius-md: 6px;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+  --shadow-md: 0 2px 6px rgba(0,0,0,0.15);
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --breakpoint-tablet: 768px;
+}
+
+/* ================================ */
+/* Section: Filter Controls         */
+/* ================================ */
+.filter-controls,
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
+  background-color: var(--secondary-color);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-base);
+}
+
+.filter-controls select,
+.filter-controls button,
+.toolbar select,
+.toolbar button {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--accent-color);
+  border-radius: var(--radius-md);
+  background-color: #fff;
+  color: var(--text-color);
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.filter-controls button:hover,
+.toolbar button:hover {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+
+/* ================================ */
+/* Section: Summary Cards             */
+/* ================================ */
+.summary-cards,
+.grid {
+  display: grid;
+  gap: var(--spacing-md);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  margin-top: var(--spacing-md);
+}
+
+.summary-cards__card,
+.grid__card {
+  background-color: #fff;
+  padding: var(--spacing-lg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  text-align: center;
+  font-family: var(--font-base);
+}
+
+.summary-cards__card h3,
+.grid__card h3 {
+  font-size: 1.1rem;
+  color: var(--text-color);
+  margin-bottom: var(--spacing-sm);
+}
+
+.summary-cards__card p,
+.grid__card p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+/* ================================ */
+/* Section: Chart Style               */
+/* ================================ */
+.chart-container,
+.chart-style {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+  background-color: #fff;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.chart-container canvas,
+.chart-style canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Responsive adjustments */
+@media (min-width: var(--breakpoint-tablet)) {
+  .filter-controls,
+  .toolbar {
+    justify-content: space-between;
+  }
+} 
+
+/* Footer for copyright reference */
+footer {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  padding: var(--spacing-md);
+}
+
+footer::after {
+  content: '© 2026 Donau2Space.de';
+  display: block;
+  margin-top: var(--spacing-xs);
+}