106 lines
2.6 KiB
CSS
106 lines
2.6 KiB
CSS
/* =============================================================
|
|
THEME STYLES - data_visualization
|
|
-------------------------------------------------------------
|
|
Enthält Farbdefinitionen und Unterstützung für Light/Dark-Mode
|
|
sowie Akzentfarben für Diagramme und markierte Datenpunkte.
|
|
============================================================= */
|
|
|
|
:root {
|
|
--color-light-background: #f8f9fa;
|
|
--color-light-surface: #ffffff;
|
|
--color-light-text: #212529;
|
|
|
|
--color-dark-background: #1e1e1e;
|
|
--color-dark-surface: #252526;
|
|
--color-dark-text: #e0e0e0;
|
|
|
|
--color-accent-primary: #007acc;
|
|
--color-accent-secondary: #ff9800;
|
|
--color-highlight: #4caf50;
|
|
|
|
--transition-theme: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* =============================================================
|
|
Color Modes
|
|
============================================================= */
|
|
|
|
[data-theme='light'] {
|
|
background-color: var(--color-light-background);
|
|
color: var(--color-light-text);
|
|
transition: var(--transition-theme);
|
|
}
|
|
|
|
[data-theme='light'] main,
|
|
[data-theme='light'] section,
|
|
[data-theme='light'] .card {
|
|
background-color: var(--color-light-surface);
|
|
color: var(--color-light-text);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
background-color: var(--color-dark-background);
|
|
color: var(--color-dark-text);
|
|
transition: var(--transition-theme);
|
|
}
|
|
|
|
[data-theme='dark'] main,
|
|
[data-theme='dark'] section,
|
|
[data-theme='dark'] .card {
|
|
background-color: var(--color-dark-surface);
|
|
color: var(--color-dark-text);
|
|
}
|
|
|
|
/* =============================================================
|
|
Accent Colors
|
|
============================================================= */
|
|
|
|
.highlight {
|
|
color: var(--color-highlight);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.accent {
|
|
color: var(--color-accent-primary);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.accent:hover,
|
|
.accent:focus {
|
|
color: var(--color-accent-secondary);
|
|
}
|
|
|
|
/* =============================================================
|
|
Responsive Adjustments (optional for better UI readability)
|
|
============================================================= */
|
|
|
|
@media (min-width: 640px) {
|
|
body {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
body {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
/* =============================================================
|
|
Footer Branding (Konformitäts-Hinweis)
|
|
============================================================= */
|
|
|
|
footer {
|
|
font-size: 0.85rem;
|
|
color: var(--color-accent-secondary);
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
footer::after {
|
|
content: "© 2026 Donau2Space.de";
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
color: var(--color-dark-text);
|
|
}
|