106 lines
No EOL
2.5 KiB
CSS
106 lines
No EOL
2.5 KiB
CSS
/* ======================================================================
|
|
THEME: DARK MODE
|
|
Description: Hintergrund- und Textdefinitionen für dunkles Erscheinungsbild
|
|
====================================================================== */
|
|
|
|
.theme-dark {
|
|
--background-color: #1e1e1e;
|
|
--surface-color: #2a2a2a;
|
|
--text-color: #e0e0e0;
|
|
--text-muted-color: #a0a0a0;
|
|
--accent-color: #4dabf7;
|
|
--success-color: #6dbf73;
|
|
--warning-color: #d7b23e;
|
|
--error-color: #e57373;
|
|
--chart-unpinned: #64b5f6;
|
|
--chart-half-pinned: #81c784;
|
|
--chart-pinned: #ffb74d;
|
|
--border-color: #3a3a3a;
|
|
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.theme-dark .card,
|
|
.theme-dark .panel {
|
|
background-color: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.theme-dark a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
}
|
|
.theme-dark a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ======================================================================
|
|
THEME: LIGHT MODE
|
|
Description: Farbdefinitionen für helles Erscheinungsbild
|
|
====================================================================== */
|
|
|
|
.theme-light {
|
|
--background-color: #f5f5f5;
|
|
--surface-color: #ffffff;
|
|
--text-color: #212121;
|
|
--text-muted-color: #616161;
|
|
--accent-color: #1976d2;
|
|
--success-color: #388e3c;
|
|
--warning-color: #f9a825;
|
|
--error-color: #d32f2f;
|
|
--chart-unpinned: #2196f3;
|
|
--chart-half-pinned: #66bb6a;
|
|
--chart-pinned: #ffa726;
|
|
--border-color: #e0e0e0;
|
|
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.theme-light .card,
|
|
.theme-light .panel {
|
|
background-color: var(--surface-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.theme-light a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
}
|
|
.theme-light a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ======================================================================
|
|
GLOBAL CHART COLOR USAGE
|
|
====================================================================== */
|
|
|
|
.chart-unpinned {
|
|
color: var(--chart-unpinned);
|
|
}
|
|
.chart-half-pinned {
|
|
color: var(--chart-half-pinned);
|
|
}
|
|
.chart-pinned {
|
|
color: var(--chart-pinned);
|
|
}
|
|
|
|
footer {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted-color);
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
footer::after {
|
|
content: "© 2026 Donau2Space.de";
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
} |