|
|
| Zeile 1: |
Zeile 1: |
|
| |
|
| /* Dunklere Hintergründe für reinen Dunkelmodus */
| |
| :root.theme-dark {
| |
| --color-surface-0-oklch__l: 8%; /* Noch dunkler als 14% */
| |
| --color-surface-1-oklch__l: 12%;
| |
| --color-surface-2-oklch__l: 16%;
| |
| }
| |
|
| |
| /* Logo Anpassungen für Dark Mode */
| |
| .citizen-header__logo img {
| |
| filter: brightness(1.1) contrast(1.2);
| |
| }
| |
|
| |
| /* Schärfere Texte */
| |
| :root.theme-dark {
| |
| --color-base-oklch__l: 85%; /* Hellerer Text */
| |
| --color-emphasized-oklch__l: 95%; /* Sehr heller Text für
| |
| Überschriften */
| |
| }
| |
|
| |
| /* Subtilere Grenzen */
| |
| :root.theme-dark {
| |
| --border-color-base: rgba(255, 255, 255, 0.12); /* Sichtbarere
| |
| Borders */
| |
| --shadow-opacity: 0.6; /* Stärkere Schatten */
| |
| }
| |
|
| |
|
| |
| ● /* Citizen Dark Mode Optimierungen für LifAD Wiki */
| |
| /* Verstärkte Kontraste für reinen Dunkelmodus */
| |
|
| |
| :root.theme-dark {
| |
| /* Dunklere Hintergründe */
| |
| --color-surface-0-oklch__l: 8%; /* Noch dunkler als Standard 14% */
| |
| --color-surface-1-oklch__l: 12%;
| |
| --color-surface-2-oklch__l: 16%;
| |
|
| |
| /* Hellere Texte für bessere Lesbarkeit */
| |
| --color-base-oklch__l: 85%; /* Hellerer Standardtext */
| |
| --color-emphasized-oklch__l: 95%; /* Sehr heller Text für
| |
| Überschriften */
| |
| --color-subtle-oklch__l: 75%; /* Hellerer subtiler Text */
| |
|
| |
| /* Sichtbarere Borders und UI-Elemente */
| |
| --border-color-base: rgba(255, 255, 255, 0.12); /* Sichtbarere
| |
| Borders */
| |
| --border-color-interactive: rgba(255, 255, 255, 0.15);
| |
| --border-color-subtle: rgba(255, 255, 255, 0.08);
| |
|
| |
| /* Stärkere Schatten für Tiefe */
| |
| --shadow-opacity: 0.6;
| |
| --shadow-color-oklch__l: 4%;
| |
|
| |
| /* Verbesserte Button-Interaktionen */
| |
| --background-color-button-quiet--hover: rgba(255, 255, 255, 0.06);
| |
| --background-color-button-quiet--active: rgba(255, 255, 255, 0.12);
| |
| }
| |
|
| |
| /* Logo-Optimierungen für Dunkelmodus */
| |
| .citizen-header__logo img {
| |
| filter: brightness(1.1) contrast(1.2);
| |
| transition: filter 0.2s ease;
| |
| }
| |
|
| |
| .citizen-header__logo img:hover {
| |
| filter: brightness(1.2) contrast(1.3);
| |
| }
| |
|
| |
| /* Verbesserte Content-Bereiche */
| |
| .mw-body {
| |
| background-color: var(--color-surface-0);
| |
| }
| |
|
| |
| /* Schärfere Inhaltsboxen */
| |
| .citizen-card,
| |
| .mw-message-box {
| |
| border: 1px solid var(--border-color-base);
| |
| box-shadow: 0 2px 8px rgba(0, 0, 0, var(--shadow-opacity));
| |
| }
| |
|
| |
| /* Optimierte Navigation */
| |
| .citizen-menu__item:hover {
| |
| background-color: rgba(255, 255, 255, 0.08);
| |
| }
| |
|
| |
| /* Bessere Code-Blööcke im Dunkelmodus */
| |
| pre, code {
| |
| background-color: rgba(0, 0, 0, 0.3);
| |
| border: 1px solid var(--border-color-subtle);
| |
| }
| |
|
| |
| /* Tabellen-Optimierungen */
| |
| .wikitable {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-base);
| |
| }
| |
|
| |
| .wikitable th {
| |
| background-color: var(--color-surface-2);
| |
| border-bottom: 2px solid var(--border-color-interactive);
| |
| }
| |
|
| |
| /* Search-Box Verbesserungen */
| |
| .citizen-search__card {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-base);
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, var(--shadow-opacity));
| |
| }
| |
|
| |
| /* Sidebar Optimierungen */
| |
| .citizen-page-sidebar {
| |
| background-color: var(--color-surface-0);
| |
| border-right: 1px solid var(--border-color-subtle);
| |
| }
| |
|
| |
| /* Footer Verbesserungen */
| |
| .citizen-footer {
| |
| border-top: 1px solid var(--border-color-subtle);
| |
| background-color: var(--color-surface-1);
| |
| }
| |
|
| |
| /* Link-Optimierungen für bessere Sichtbarkeit */
| |
| a {
| |
| color: hsl(var(--color-progressive-hsl__h),
| |
| var(--color-progressive-hsl__s), 70%);
| |
| }
| |
|
| |
| a:visited {
| |
| color: hsl(var(--color-progressive-hsl__h),
| |
| var(--color-progressive-hsl__s), 65%);
| |
| }
| |
|
| |
| a:hover {
| |
| color: hsl(var(--color-progressive-hsl__h),
| |
| var(--color-progressive-hsl__s), 80%);
| |
| }
| |
|
| |
| /* TOC (Inhaltsverzeichnis) Verbesserungen */
| |
| .citizen-toc {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-base);
| |
| }
| |
|
| |
| .citizen-toc__item:hover {
| |
| background-color: rgba(255, 255, 255, 0.05);
| |
| }
| |
|
| |
| /* Notification/Message Optimierungen */
| |
| .mw-notification {
| |
| background-color: var(--color-surface-2);
| |
| border: 1px solid var(--border-color-interactive);
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
| |
| }
| |
|
| |
| /* Edit-Bereich Optimierungen (falls sichtbar) */
| |
| .mw-editform {
| |
| background-color: var(--color-surface-0);
| |
| }
| |
|
| |
| textarea {
| |
| background-color: var(--color-surface-1);
| |
| border: 1px solid var(--border-color-base);
| |
| color: var(--color-base);
| |
| }
| |
|
| |
| /* Scroll-Optimierungen */
| |
| ::-webkit-scrollbar {
| |
| background-color: var(--color-surface-0);
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb {
| |
| background-color: var(--border-color-interactive);
| |
| border-radius: 6px;
| |
| }
| |
|
| |
| ::-webkit-scrollbar-thumb:hover {
| |
| background-color: var(--border-color-base);
| |
| }
| |
