84 lines
No EOL
1.9 KiB
CSS
84 lines
No EOL
1.9 KiB
CSS
/* =========================================================
|
|
Theme Styles for Data Visualization (Light & Dark Modes)
|
|
========================================================= */
|
|
|
|
/* ---------------------------------------------------------
|
|
Color Themes
|
|
--------------------------------------------------------- */
|
|
:root {
|
|
/* Base colors */
|
|
--color-bg: #ffffff;
|
|
--color-surface: #f7f9fa;
|
|
--color-text: #1c1e21;
|
|
--color-subtle-text: #555b61;
|
|
|
|
/* Primary and secondary accents */
|
|
--color-primary: #0077cc;
|
|
--color-primary-hover: #005fa3;
|
|
--color-secondary: #2d9cdb;
|
|
--color-accent: #33c759;
|
|
|
|
/* States */
|
|
--color-success: #27ae60;
|
|
--color-warning: #f39c12;
|
|
--color-error: #e74c3c;
|
|
|
|
/* Chart tones */
|
|
--chart-bandwidth: #0077cc;
|
|
--chart-latency: #33c759;
|
|
--chart-retry: #e67e22;
|
|
|
|
/* Borders and lines */
|
|
--color-border: #d0d6db;
|
|
--color-divider: #eceef0;
|
|
|
|
/* Shadows */
|
|
--shadow-elevation: 0 2px 5px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.dark-mode {
|
|
/* Dark background and contrast adjustments */
|
|
--color-bg: #121416;
|
|
--color-surface: #1f2225;
|
|
--color-text: #e5e7eb;
|
|
--color-subtle-text: #a0a4a8;
|
|
|
|
/* Accents adapted for dark backgrounds */
|
|
--color-primary: #3d9cff;
|
|
--color-primary-hover: #6bb5ff;
|
|
--color-secondary: #5dade2;
|
|
--color-accent: #58d68d;
|
|
|
|
/* States */
|
|
--color-success: #2ecc71;
|
|
--color-warning: #f5b041;
|
|
--color-error: #e74c3c;
|
|
|
|
/* Chart tones */
|
|
--chart-bandwidth: #3498db;
|
|
--chart-latency: #2ecc71;
|
|
--chart-retry: #e67e22;
|
|
|
|
/* Borders and lines */
|
|
--color-border: #2f3337;
|
|
--color-divider: #363a3e;
|
|
|
|
/* Shadows */
|
|
--shadow-elevation: 0 2px 5px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Metadata Footer */
|
|
footer {
|
|
font-size: 0.875rem;
|
|
color: var(--color-subtle-text);
|
|
text-align: center;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid var(--color-divider);
|
|
}
|
|
|
|
footer::after {
|
|
content: "© 2026 Donau2Space.de";
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
color: var(--color-subtle-text);
|
|
} |