123 lines
No EOL
2.8 KiB
CSS
123 lines
No EOL
2.8 KiB
CSS
:root {
|
|
/* Farb- und Layout-Variablen */
|
|
--color-primary: #0066cc;
|
|
--color-secondary: #3399ff;
|
|
--color-accent: #ff9900;
|
|
--color-bg: #ffffff;
|
|
--color-text: #222222;
|
|
--color-muted: #666666;
|
|
--color-border: #cccccc;
|
|
|
|
--color-bg-dark: #1a1a1a;
|
|
--color-text-dark: #f0f0f0;
|
|
--color-muted-dark: #999999;
|
|
--color-border-dark: #444444;
|
|
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 2rem;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
|
|
--transition-fast: 0.2s ease-in-out;
|
|
}
|
|
|
|
/* ======================================== */
|
|
/* Light Theme */
|
|
/* ======================================== */
|
|
body.light-mode {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
transition: background-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
body.light-mode a {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
body.light-mode a:hover,
|
|
body.light-mode a:focus {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
body.light-mode .visualization_tool__card {
|
|
background-color: #fafafa;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
body.light-mode .visualization_tool__header {
|
|
background-color: var(--color-secondary);
|
|
color: #fff;
|
|
}
|
|
|
|
body.light-mode .visualization_tool__table th,
|
|
body.light-mode .visualization_tool__table td {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ======================================== */
|
|
/* Dark Theme */
|
|
/* ======================================== */
|
|
body.dark-mode {
|
|
background-color: var(--color-bg-dark);
|
|
color: var(--color-text-dark);
|
|
transition: background-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
body.dark-mode a {
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
body.dark-mode a:hover,
|
|
body.dark-mode a:focus {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
body.dark-mode .visualization_tool__card {
|
|
background-color: #2a2a2a;
|
|
border: 1px solid var(--color-border-dark);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
body.dark-mode .visualization_tool__header {
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
body.dark-mode .visualization_tool__table th,
|
|
body.dark-mode .visualization_tool__table td {
|
|
border-bottom: 1px solid var(--color-border-dark);
|
|
}
|
|
|
|
/* ======================================== */
|
|
/* Accessibility: High Contrast Focus States */
|
|
/* ======================================== */
|
|
:focus-visible {
|
|
outline: 3px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ======================================== */
|
|
/* Footer */
|
|
/* ======================================== */
|
|
footer {
|
|
margin-top: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
body.dark-mode footer {
|
|
color: var(--color-muted-dark);
|
|
}
|
|
|
|
footer::after {
|
|
content: "© 2026 Donau2Space.de";
|
|
display: block;
|
|
margin-top: var(--spacing-sm);
|
|
} |