From b5ef66634e8062e4b9696d5993b9e9f387825c81 Mon Sep 17 00:00:00 2001 From: Mika Date: Sat, 24 Jan 2026 12:03:26 +0000 Subject: [PATCH] Add visualization_tool/css/base.css --- visualization_tool/css/base.css | 130 ++++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 visualization_tool/css/base.css diff --git a/visualization_tool/css/base.css b/visualization_tool/css/base.css new file mode 100644 index 0000000..fc5065c --- /dev/null +++ b/visualization_tool/css/base.css @@ -0,0 +1,130 @@ +:root { + /* Color Scheme */ + --color-bg: #f9fafb; + --color-surface: #ffffff; + --color-border: #d1d5db; + --color-text: #111827; + --color-text-muted: #6b7280; + --color-primary: #2563eb; + --color-primary-light: #60a5fa; + --color-success: #16a34a; + --color-danger: #dc2626; + + /* Typography */ + --font-base: 'Inter', system-ui, -apple-system, sans-serif; + --font-size-base: 1rem; + --font-size-sm: 0.875rem; + --font-size-lg: 1.125rem; + --line-height-base: 1.5; + + /* Spacing */ + --spacing-xs: 0.25rem; + --spacing-sm: 0.5rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + + /* Layout */ + --max-width: 1200px; + --border-radius: 0.25rem; + --transition-base: 0.2s ease-in-out; + + /* Breakpoints */ + --bp-sm: 640px; + --bp-md: 768px; + --bp-lg: 1024px; + --bp-xl: 1280px; +} + +/* Reset / Normalize */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; +} + +body, h1, h2, h3, h4, h5, h6, p { + font-family: var(--font-base); + color: var(--color-text); +} + +img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + max-width: 100%; + height: auto; +} + +ul, ol { + list-style: none; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--transition-base); +} + +a:hover, a:focus { + color: var(--color-primary-light); +} + +button, input, select, textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/* Basic Layout */ +body { + background-color: var(--color-bg); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.app-shell { + display: flex; + flex-direction: column; + flex-grow: 1; + max-width: var(--max-width); + width: 100%; + margin: 0 auto; + padding: var(--spacing-md); +} + +/* Responsive adjustments */ +@media (min-width: var(--bp-md)) { + .app-shell { + padding: var(--spacing-lg); + } +} + +@media (min-width: var(--bp-lg)) { + .app-shell { + padding: var(--spacing-xl); + } +} + +/* Footer Copyright */ +footer { + text-align: center; + padding: var(--spacing-md); + color: var(--color-text-muted); + font-size: var(--font-size-sm); +} + +footer::after { + content: '© 2026 Donau2Space.de'; + display: block; + margin-top: var(--spacing-xs); +} \ No newline at end of file