MediaWiki:Citizen.css: Unterschied zwischen den Versionen
MediaWiki-Schnittstellenseite
Weitere Optionen
Eiki (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Eiki (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 3: | Zeile 3: | ||
/* ===================================================================== | /* ===================================================================== | ||
Cubeside-Farbschema für Citizen | Cubeside-Farbschema für Citizen | ||
Grün nur als Akzent (Links, Buttons, Markierungen). | |||
Hintergründe und Schrift sind neutral – Citizen würde sie sonst | |||
leicht in der Akzentfarbe einfärben. | |||
===================================================================== */ | ===================================================================== */ | ||
/* Hell | /* ---------- Hell ---------- */ | ||
:root { | :root { | ||
--color-progressive-oklch__l: | /* Akzentfarbe: gedecktes Cubeside-Grün (Kontrast auf Weiß ca. 6:1) */ | ||
--color-progressive-oklch__c: 0. | --color-progressive-oklch__l: 48%; | ||
--color-progressive-oklch__c: 0.13; | |||
--color-progressive-oklch__h: 138; | --color-progressive-oklch__h: 138; | ||
--color-primary-oklch__h: 138; | --color-primary-oklch__h: 138; | ||
/* Fallback für ältere Browser ohne OKLCH */ | /* Fallback für ältere Browser ohne OKLCH */ | ||
--color-progressive-hsl__h: | --color-progressive-hsl__h: 100; | ||
--color-progressive-hsl__s: | --color-progressive-hsl__s: 70%; | ||
--color-progressive-hsl__l: | --color-progressive-hsl__l: 26%; | ||
--color-primary__h: | --color-primary__h: 100; | ||
--color-primary__s: | --color-primary__s: 70%; | ||
--color-primary__l: | --color-primary__l: 26%; | ||
/* Hintergründe neutral (keine Grüntönung) */ | |||
--color-surface-0-oklch__c: 0; | |||
--color-surface-1-oklch__c: 0; | |||
--color-surface-2-oklch__c: 0; | |||
--color-surface-3-oklch__c: 0; | |||
--color-surface-4-oklch__c: 0; | |||
--shadow-color-oklch__c: 0; | |||
/* Schrift neutral */ | |||
--color-emphasized-oklch__c: 0; | |||
--color-base-oklch__c: 0; | |||
--color-subtle-oklch__c: 0; | |||
--color-placeholder-oklch__c: 0; | |||
--color-disabled-oklch__c: 0; | |||
} | } | ||
/* Dunkel | /* ---------- Dunkel ---------- */ | ||
:root.skin-theme-clientpref-night { | :root.skin-theme-clientpref-night { | ||
--color-progressive-oklch__l: | --color-progressive-oklch__l: 72%; | ||
--color-progressive-oklch__c: 0. | --color-progressive-oklch__c: 0.15; | ||
--color-progressive-hsl__l: | --color-progressive-hsl__l: 50%; | ||
--color-primary__l: | --color-primary__l: 50%; | ||
--color-emphasized-oklch__c: 0; | |||
--color-base-oklch__c: 0; | |||
--color-subtle-oklch__c: 0; | |||
--color-placeholder-oklch__c: 0; | |||
--color-disabled-oklch__c: 0; | |||
} | } | ||
@media ( prefers-color-scheme: dark ) { | @media ( prefers-color-scheme: dark ) { | ||
:root.skin-theme-clientpref-os { | :root.skin-theme-clientpref-os { | ||
--color-progressive-oklch__l: | --color-progressive-oklch__l: 72%; | ||
--color-progressive-oklch__c: 0. | --color-progressive-oklch__c: 0.15; | ||
--color-progressive-hsl__l: | --color-progressive-hsl__l: 50%; | ||
--color-primary__l: | --color-primary__l: 50%; | ||
--color-emphasized-oklch__c: 0; | |||
--color-base-oklch__c: 0; | |||
--color-subtle-oklch__c: 0; | |||
--color-placeholder-oklch__c: 0; | |||
--color-disabled-oklch__c: 0; | |||
} | } | ||
} | } | ||
| Zeile 40: | Zeile 67: | ||
/* Standardbreite des Inhalts (Citizen-Vorgabe: 1080px) */ | /* Standardbreite des Inhalts (Citizen-Vorgabe: 1080px) */ | ||
:root.citizen-feature-custom-width-clientpref-standard { | :root.citizen-feature-custom-width-clientpref-standard { | ||
--width-layout: | --width-layout: 1280px; | ||
} | } | ||
Version vom 12. November 2026, 20:03 Uhr
/* Das folgende CSS wird für Benutzer des Citizen-Skins geladen */
/* =====================================================================
Cubeside-Farbschema für Citizen
Grün nur als Akzent (Links, Buttons, Markierungen).
Hintergründe und Schrift sind neutral – Citizen würde sie sonst
leicht in der Akzentfarbe einfärben.
===================================================================== */
/* ---------- Hell ---------- */
:root {
/* Akzentfarbe: gedecktes Cubeside-Grün (Kontrast auf Weiß ca. 6:1) */
--color-progressive-oklch__l: 48%;
--color-progressive-oklch__c: 0.13;
--color-progressive-oklch__h: 138;
--color-primary-oklch__h: 138;
/* Fallback für ältere Browser ohne OKLCH */
--color-progressive-hsl__h: 100;
--color-progressive-hsl__s: 70%;
--color-progressive-hsl__l: 26%;
--color-primary__h: 100;
--color-primary__s: 70%;
--color-primary__l: 26%;
/* Hintergründe neutral (keine Grüntönung) */
--color-surface-0-oklch__c: 0;
--color-surface-1-oklch__c: 0;
--color-surface-2-oklch__c: 0;
--color-surface-3-oklch__c: 0;
--color-surface-4-oklch__c: 0;
--shadow-color-oklch__c: 0;
/* Schrift neutral */
--color-emphasized-oklch__c: 0;
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
--color-disabled-oklch__c: 0;
}
/* ---------- Dunkel ---------- */
:root.skin-theme-clientpref-night {
--color-progressive-oklch__l: 72%;
--color-progressive-oklch__c: 0.15;
--color-progressive-hsl__l: 50%;
--color-primary__l: 50%;
--color-emphasized-oklch__c: 0;
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
--color-disabled-oklch__c: 0;
}
@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--color-progressive-oklch__l: 72%;
--color-progressive-oklch__c: 0.15;
--color-progressive-hsl__l: 50%;
--color-primary__l: 50%;
--color-emphasized-oklch__c: 0;
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
--color-disabled-oklch__c: 0;
}
}
/* Standardbreite des Inhalts (Citizen-Vorgabe: 1080px) */
:root.citizen-feature-custom-width-clientpref-standard {
--width-layout: 1280px;
}