107 lines
No EOL
2.3 KiB
CSS
107 lines
No EOL
2.3 KiB
CSS
:root {
|
|
/* Farbvariablen für dunkles Design */
|
|
--color-bg-dark: #0f0f10;
|
|
--color-surface-dark: #1a1a1c;
|
|
--color-text-dark: #e0e0e0;
|
|
--color-accent-dark: #3fa7ff;
|
|
--color-muted-dark: #444;
|
|
|
|
/* Typografievariablen */
|
|
--font-base: 'Segoe UI', Roboto, sans-serif;
|
|
--font-size-base: 1rem;
|
|
--line-height-base: 1.5;
|
|
}
|
|
|
|
/* ======================================== */
|
|
/* Dark Theme Styles */
|
|
/* ======================================== */
|
|
body.dark-mode {
|
|
background-color: var(--color-bg-dark);
|
|
color: var(--color-text-dark);
|
|
font-family: var(--font-base);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-base);
|
|
}
|
|
|
|
.chart-container.dark {
|
|
background-color: var(--color-surface-dark);
|
|
border: 1px solid var(--color-muted-dark);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.event-log.dark {
|
|
background-color: var(--color-surface-dark);
|
|
border-left: 3px solid var(--color-accent-dark);
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
.chart-container.dark .axis line,
|
|
.chart-container.dark .axis path {
|
|
stroke: var(--color-muted-dark);
|
|
}
|
|
|
|
.chart-container.dark .data-line {
|
|
stroke: var(--color-accent-dark);
|
|
}
|
|
|
|
/* Hover- und Fokuseffekte im dunklen Modus */
|
|
a, button, input[type='range'] {
|
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
body.dark-mode a:hover,
|
|
body.dark-mode button:hover {
|
|
color: var(--color-accent-dark);
|
|
}
|
|
|
|
/* Tabellen oder Textlogs */
|
|
.event-log.dark table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.event-log.dark th,
|
|
.event-log.dark td {
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid var(--color-muted-dark);
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
body.dark-mode::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
body.dark-mode::-webkit-scrollbar-track {
|
|
background: var(--color-bg-dark);
|
|
}
|
|
|
|
body.dark-mode::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-muted-dark);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Responsives Verhalten */
|
|
@media (min-width: 640px) {
|
|
.chart-container.dark {
|
|
padding: 1rem;
|
|
}
|
|
.event-log.dark {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
footer.dark-mode {
|
|
color: var(--color-muted-dark);
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid var(--color-muted-dark);
|
|
}
|
|
|
|
footer.dark-mode::after {
|
|
content: "© 2026 Donau2Space.de";
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
color: var(--color-text-dark);
|
|
} |