Add results_visualization/css/layout.css

2026-01-18 17:11:07 +00:00 · 2026-01-18 17:11:07 +00:00 · 4c133bc3b8
commit 4c133bc3b8
parent 04e140720d
1 changed files with 171 additions and 0 deletions
--- a/results_visualization/css/layout.css
+++ b/results_visualization/css/layout.css
@ -0,0 +1,171 @@
+:root {
+  --primary: #2c3e50;
+  --accent: #4caf50;
+  --bg-light: #f5f5f5;
+  --bg-dark: #ffffff;
+  --text-color: #333;
+  --border-radius: 6px;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --max-width: 1200px;
+  --font-base: 'system-ui', sans-serif;
+  --font-size-base: 1rem;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-base);
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  background-color: var(--bg-light);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-md);
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+/* ================================ */
+/* App Layout                       */
+/* ================================ */
+.app-header {
+  background: var(--primary);
+  color: #fff;
+  padding: var(--spacing-md);
+  text-align: center;
+  font-weight: 600;
+}
+
+.filter-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  background: var(--bg-dark);
+  padding: var(--spacing-md);
+  border-radius: var(--border-radius);
+  margin-bottom: var(--spacing-md);
+}
+
+.timeline-panel {
+  flex: 1;
+  background: var(--bg-dark);
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.stats-summary {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--bg-dark);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+.data-table th,
+.data-table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+.data-table th {
+  background-color: #f0f0f0;
+  font-weight: 600;
+}
+
+.app-footer {
+  background: var(--primary);
+  color: #fff;
+  text-align: center;
+  padding: var(--spacing-md);
+  font-size: 0.875rem;
+}
+
+/* ================================ */
+/* Panels and Cards                 */
+/* ================================ */
+.panel {
+  background: var(--bg-dark);
+  border-radius: var(--border-radius);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+.summary-card {
+  background: var(--bg-dark);
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  flex: 1 1 200px;
+  min-width: 200px;
+  text-align: center;
+}
+
+.summary-card h3 {
+  margin: 0 0 var(--spacing-sm);
+  font-size: 1.1rem;
+  color: var(--primary);
+}
+
+.summary-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--text-color);
+}
+
+/* ================================ */
+/* Responsive Layout                */
+/* ================================ */
+@media (min-width: 640px) {
+  .stats-summary {
+    justify-content: space-between;
+  }
+}
+
+@media (min-width: 1024px) {
+  main {
+    flex-direction: row;
+    gap: var(--spacing-lg);
+  }
+
+  .filter-panel {
+    flex-basis: 20%;
+  }
+
+  .timeline-panel {
+    flex: 1;
+  }
+}
+
+
+/* ================================ */
+/* Footer Copyright                 */
+/* ================================ */
+.app-footer::after {
+  content: "© 2026 Donau2Space.de";
+  display: block;
+  font-size: 0.8rem;
+  margin-top: var(--spacing-sm);
+  color: #fff;
+}