« MediaWiki:Citizen.css » : différence entre les versions

← Modification précédente Modification suivante →

Version du 7 juillet 2025 à 21:13

/* La totalité du CSS placé ici s’appliquera aux utilisateurs de l’habillage Citizen. */

:root {
  /* Couleur primaire Verde Uma Musume via OKLCH pour Citizen */
  --color-progressive-oklch__h: 113;    /* hue ton vert */
  --color-progressive-oklch__c: 0.17;   /* chroma (vibration) */
  --color-progressive-oklch__l: 0.6;    /* lightness */
  /* fallback HSL pour navigateurs plus anciens */
  --color-progressive-hsl__h: 113;
}

@media (prefers-color-scheme: light) {
  :root.skin-theme-clientpref-light {
    /* Optionnel : ajustements surface et texte en mode clair */
    --color-surface-0: #f4f4f4;
    --color-base: #222;
    --color-base--emphasized: #000;
    --color-base--subtle: #555;
  }
}
/* Tu peux ajouter un bloc @media pour dark si un jour tu veux l’activer */

@@ Ligne 1 : / Ligne 1 : @@
 /* La totalité du CSS placé ici s’appliquera aux utilisateurs de l’habillage Citizen. */
-.citizen-header, .citizen-navbar {
+:root {
-   background: #98ce6f !important;
+  /* Couleur primaire Verde Uma Musume via OKLCH pour Citizen */
-   color: #222 !important;
+  --color-progressive-oklch__h: 113;    /* hue ton vert */
+  --color-progressive-oklch__c: 0.17;   /* chroma (vibration) */
+   --color-progressive-oklch__l: 0.6;    /* lightness */
+   /* fallback HSL pour navigateurs plus anciens */
+  --color-progressive-hsl__h: 113;
 }
-.citizen-footer {
+@media (prefers-color-scheme: light) {
-   background: #91d3f9 !important;
+   :root.skin-theme-clientpref-light {
-  color: #222 !important;
+    /* Optionnel : ajustements surface et texte en mode clair */
-}
+    --color-surface-0: #f4f4f4;
+    --color-base: #222;
-.mainpage-box, .fandombox {
+    --color-base--emphasized: #000;
-  background: #ffd7ef;
+    --color-base--subtle: #555;
-  border: 2px solid #98ce6f;
+   }
-  color: #222;
-  border-radius: 10px;
-  padding: 12px;
-   margin-bottom: 1em;
 }
+/* Tu peux ajouter un bloc @media pour dark si un jour tu veux l’activer */