Add visualization_tool/css/components.css

2026-02-24 13:33:03 +00:00 · 2026-02-24 13:33:03 +00:00 · 5e13076af4
commit 5e13076af4
parent 794d768a57
1 changed files with 131 additions and 0 deletions
--- a/visualization_tool/css/components.css
+++ b/visualization_tool/css/components.css
@ -0,0 +1,131 @@
+:root {
+  --primary: #2b7a78;
+  --secondary: #17252a;
+  --background: #f7f9fa;
+  --text: #222;
+  --border: #d1d1d1;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --radius: 6px;
+  --font-base: 'system-ui', sans-serif;
+}
+
+/* =========================== */
+/* Filter-Panel */
+/* =========================== */
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  background-color: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+}
+
+.filter-item label {
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  color: var(--secondary);
+}
+
+.filter-item input,
+.filter-item select {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--font-base);
+}
+
+.filter-item input:focus,
+.filter-item select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 3px rgba(43, 122, 120, 0.4);
+}
+
+/* =========================== */
+/* Chart-Abschnitte */
+/* =========================== */
+.chart-section {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.delta-matrix-panel,
+.timeline-chart-panel {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.delta-matrix-panel h2,
+.timeline-chart-panel h2 {
+  font-size: 1.1rem;
+  color: var(--secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+@media (min-width: 768px) {
+  .chart-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* =========================== */
+/* Summary-Panel */
+/* =========================== */
+.summary-panel {
+  background-color: #fff;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.summary-panel h3 {
+  font-size: 1.2rem;
+  color: var(--secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.summary-panel p {
+  margin-bottom: var(--spacing-sm);
+  font-size: 0.95rem;
+}
+
+.summary-panel strong {
+  color: var(--primary);
+}
+
+/* =========================== */
+/* Footer */
+/* =========================== */
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--border);
+}
+
+footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  margin-top: var(--spacing-sm);
+  color: var(--secondary);
+}