« Modèle:Roadmap/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
 /* ============================================================
-    ROADMAP — Design intégré au skin Citizen
+    ROADMAP — Palette Aurora
-   Palette Aurora — OKLCH
+    Hex pur pour compatibilité maximale, dark mode Citizen
-    Variables centralisées, dark mode automatique Citizen
     ============================================================ */
 /* ============================================================
-    PALETTE AURORA — Variables statuts
+    PALETTE AURORA — Light mode
-   Échelle : idea (violet) → planned (ambre) → inprogress (saphir) → done (émeraude)
     ============================================================ */
 :root {
-/* --- Couleurs texte / badge (light) --- */
+/* Couleurs principales (texte, badge, bordure gauche) */
---roadmap-color-idea:          oklch(45% 0.18 300);
+--roadmap-color-idea:        #6d28d9;
---roadmap-color-planned:       oklch(62% 0.16 60);
+--roadmap-color-planned:     #d97706;
---roadmap-color-inprogress:    oklch(50% 0.17 240);
+--roadmap-color-inprogress:  #2563eb;
---roadmap-color-done:          oklch(48% 0.15 155);
+--roadmap-color-done:        #059669;
---roadmap-color-cancelled:     oklch(48% 0.18 20);
+--roadmap-color-cancelled:   #dc2626;
-/* --- Backgrounds stat boxes (light) --- */
+/* Backgrounds stat boxes */
---roadmap-bg-idea:             oklch(95% 0.04 300);
+--roadmap-bg-idea:           #f5f0ff;
---roadmap-bg-planned:          oklch(96% 0.04 60);
+--roadmap-bg-planned:        #fffbeb;
---roadmap-bg-inprogress:       oklch(95% 0.04 240);
+--roadmap-bg-inprogress:     #eff6ff;
---roadmap-bg-done:             oklch(95% 0.04 155);
+--roadmap-bg-done:           #ecfdf5;
---roadmap-bg-cancelled:        oklch(95% 0.04 20);
+--roadmap-bg-cancelled:      #fef2f2;
-/* --- Bordures (light) --- */
+/* Bordures stat boxes */
---roadmap-border-idea:         oklch(80% 0.08 300);
+--roadmap-border-idea:       #c4b5fd;
---roadmap-border-planned:      oklch(85% 0.08 60);
+--roadmap-border-planned:    #fcd34d;
---roadmap-border-inprogress:   oklch(80% 0.08 240);
+--roadmap-border-inprogress: #93c5fd;
---roadmap-border-done:         oklch(82% 0.08 155);
+--roadmap-border-done:       #6ee7b7;
---roadmap-border-cancelled:    oklch(82% 0.08 20);
+--roadmap-border-cancelled:  #fca5a5;
 }
-/* --- Dark mode Citizen --- */
+/* ============================================================
-.skin-theme-clientpref-night,
+   PALETTE AURORA — Dark mode explicite Citizen
-.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
+   ============================================================ */
-/* Textes plus lumineux */
+.skin-theme-clientpref-night {
---roadmap-color-idea:          oklch(72% 0.18 300);
+--roadmap-color-idea:        #a78bfa;
---roadmap-color-planned:       oklch(78% 0.16 60);
+--roadmap-color-planned:     #fbbf24;
---roadmap-color-inprogress:    oklch(72% 0.17 240);
+--roadmap-color-inprogress:  #60a5fa;
---roadmap-color-done:          oklch(72% 0.15 155);
+--roadmap-color-done:        #34d399;
---roadmap-color-cancelled:     oklch(70% 0.18 20);
+--roadmap-color-cancelled:   #f87171;
+--roadmap-bg-idea:           #2d1f4e;
+--roadmap-bg-planned:        #2d2208;
+--roadmap-bg-inprogress:     #1e2d4e;
+--roadmap-bg-done:           #0d2e22;
+--roadmap-bg-cancelled:      #2e1212;
-/* Backgrounds sombres */
+--roadmap-border-idea:       #5b3fa0;
---roadmap-bg-idea:             oklch(25% 0.06 300);
+--roadmap-border-planned:    #8a6500;
---roadmap-bg-planned:          oklch(26% 0.06 60);
+--roadmap-border-inprogress: #2a4f8a;
---roadmap-bg-inprogress:       oklch(25% 0.06 240);
+--roadmap-border-done:       #1a5c3a;
---roadmap-bg-done:             oklch(25% 0.06 155);
+--roadmap-border-cancelled:  #7a2020;
---roadmap-bg-cancelled:        oklch(25% 0.06 20);
+}
-/* Bordures sombres */
+/* ============================================================
---roadmap-border-idea:         oklch(40% 0.10 300);
+   PALETTE AURORA — Pure black mode Citizen
---roadmap-border-planned:      oklch(45% 0.10 60);
+   ============================================================ */
---roadmap-border-inprogress:   oklch(40% 0.10 240);
+.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
---roadmap-border-done:         oklch(42% 0.10 155);
+--roadmap-bg-idea:           #1a0f30;
---roadmap-border-cancelled:    oklch(42% 0.10 20);
+--roadmap-bg-planned:        #1a1400;
+--roadmap-bg-inprogress:     #0f1a30;
+--roadmap-bg-done:           #051a10;
+--roadmap-bg-cancelled:      #1a0505;
 }
-/* --- Dark mode auto (suit le système) --- */
+/* ============================================================
+   PALETTE AURORA — Dark mode automatique (suit le système)
+   ============================================================ */
 @media (prefers-color-scheme: dark) {
 :root.skin-theme-clientpref-os {
---roadmap-color-idea:          oklch(72% 0.18 300);
+--roadmap-color-idea:        #a78bfa;
---roadmap-color-planned:       oklch(78% 0.16 60);
+--roadmap-color-planned:     #fbbf24;
---roadmap-color-inprogress:    oklch(72% 0.17 240);
+--roadmap-color-inprogress:  #60a5fa;
---roadmap-color-done:          oklch(72% 0.15 155);
+--roadmap-color-done:        #34d399;
---roadmap-color-cancelled:     oklch(70% 0.18 20);
+--roadmap-color-cancelled:   #f87171;
---roadmap-bg-idea:             oklch(25% 0.06 300);
+--roadmap-bg-idea:           #2d1f4e;
---roadmap-bg-planned:          oklch(26% 0.06 60);
+--roadmap-bg-planned:        #2d2208;
---roadmap-bg-inprogress:       oklch(25% 0.06 240);
+--roadmap-bg-inprogress:     #1e2d4e;
---roadmap-bg-done:             oklch(25% 0.06 155);
+--roadmap-bg-done:           #0d2e22;
---roadmap-bg-cancelled:        oklch(25% 0.06 20);
+--roadmap-bg-cancelled:      #2e1212;
---roadmap-border-idea:         oklch(40% 0.10 300);
+--roadmap-border-idea:       #5b3fa0;
---roadmap-border-planned:      oklch(45% 0.10 60);
+--roadmap-border-planned:    #8a6500;
---roadmap-border-inprogress:   oklch(40% 0.10 240);
+--roadmap-border-inprogress: #2a4f8a;
---roadmap-border-done:         oklch(42% 0.10 155);
+--roadmap-border-done:       #1a5c3a;
---roadmap-border-cancelled:    oklch(42% 0.10 20);
+--roadmap-border-cancelled:  #7a2020;
 }
 }
@@ Ligne 158 : / Ligne 167 : @@
 }
-/* Stat boxes — Palette Aurora */
+/* Stat boxes — Aurora */
 .roadmap-stat-idea       { background: var(--roadmap-bg-idea);       border-color: var(--roadmap-border-idea); }
 .roadmap-stat-planned    { background: var(--roadmap-bg-planned);    border-color: var(--roadmap-border-planned); }
@@ Ligne 234 : / Ligne 243 : @@
 }
-/* Bordures gauche — Palette Aurora */
+/* Bordures gauche — Aurora */
 .roadmap-item.roadmap-idea       { border-left: 3px solid var(--roadmap-color-idea); }
 .roadmap-item.roadmap-planned    { border-left: 3px solid var(--roadmap-color-planned); }
@@ Ligne 270 : / Ligne 279 : @@
 /* ============================================================
-    BADGES — Palette Aurora
+    BADGES — Aurora
     ============================================================ */
 .roadmap-badge {