Basculer la recherche
Basculer le menu
63
1,9 k
13
5,7 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

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

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Hiob (discussion | contributions)
owner
4 083 modifications
m couleurs interverties planned <---> inprogress
Hiob (discussion | contributions)
owner
4 083 modifications
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
/* ============================================================
/* ============================================================
   ROADMAP — Design intégré au skin Citizen
   ROADMAP — Design intégré au skin Citizen
   Utilise var() Citizen pour surfaces/textes (dark mode auto)
   Palette Aurora — OKLCH
  Couleurs statuts en hex direct (pas de custom properties)
  Variables centralisées, dark mode automatique Citizen
   ============================================================ */
   ============================================================ */


/* --- Conteneur principal --- */
/* ============================================================
  PALETTE AURORA — Variables statuts
  Échelle : idea (violet) → planned (ambre) → inprogress (saphir) → done (émeraude)
  ============================================================ */
:root {
/* --- Couleurs texte / badge (light) --- */
--roadmap-color-idea:          oklch(45% 0.18 300);
--roadmap-color-planned:      oklch(62% 0.16 60);
--roadmap-color-inprogress:    oklch(50% 0.17 240);
--roadmap-color-done:          oklch(48% 0.15 155);
--roadmap-color-cancelled:    oklch(48% 0.18 20);
 
/* --- Backgrounds stat boxes (light) --- */
--roadmap-bg-idea:            oklch(95% 0.04 300);
--roadmap-bg-planned:          oklch(96% 0.04 60);
--roadmap-bg-inprogress:      oklch(95% 0.04 240);
--roadmap-bg-done:            oklch(95% 0.04 155);
--roadmap-bg-cancelled:        oklch(95% 0.04 20);
 
/* --- Bordures (light) --- */
--roadmap-border-idea:        oklch(80% 0.08 300);
--roadmap-border-planned:      oklch(85% 0.08 60);
--roadmap-border-inprogress:  oklch(80% 0.08 240);
--roadmap-border-done:        oklch(82% 0.08 155);
--roadmap-border-cancelled:    oklch(82% 0.08 20);
}
 
/* --- Dark mode Citizen --- */
.skin-theme-clientpref-night,
.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
/* Textes plus lumineux */
--roadmap-color-idea:          oklch(72% 0.18 300);
--roadmap-color-planned:      oklch(78% 0.16 60);
--roadmap-color-inprogress:    oklch(72% 0.17 240);
--roadmap-color-done:          oklch(72% 0.15 155);
--roadmap-color-cancelled:    oklch(70% 0.18 20);
 
/* Backgrounds sombres */
--roadmap-bg-idea:            oklch(25% 0.06 300);
--roadmap-bg-planned:          oklch(26% 0.06 60);
--roadmap-bg-inprogress:      oklch(25% 0.06 240);
--roadmap-bg-done:            oklch(25% 0.06 155);
--roadmap-bg-cancelled:        oklch(25% 0.06 20);
 
/* Bordures sombres */
--roadmap-border-idea:        oklch(40% 0.10 300);
--roadmap-border-planned:      oklch(45% 0.10 60);
--roadmap-border-inprogress:  oklch(40% 0.10 240);
--roadmap-border-done:        oklch(42% 0.10 155);
--roadmap-border-cancelled:    oklch(42% 0.10 20);
}
 
/* --- Dark mode auto (suit le système) --- */
@media (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--roadmap-color-idea:          oklch(72% 0.18 300);
--roadmap-color-planned:      oklch(78% 0.16 60);
--roadmap-color-inprogress:    oklch(72% 0.17 240);
--roadmap-color-done:          oklch(72% 0.15 155);
--roadmap-color-cancelled:    oklch(70% 0.18 20);
 
--roadmap-bg-idea:            oklch(25% 0.06 300);
--roadmap-bg-planned:          oklch(26% 0.06 60);
--roadmap-bg-inprogress:      oklch(25% 0.06 240);
--roadmap-bg-done:            oklch(25% 0.06 155);
--roadmap-bg-cancelled:        oklch(25% 0.06 20);
 
--roadmap-border-idea:        oklch(40% 0.10 300);
--roadmap-border-planned:      oklch(45% 0.10 60);
--roadmap-border-inprogress:  oklch(40% 0.10 240);
--roadmap-border-done:        oklch(42% 0.10 155);
--roadmap-border-cancelled:    oklch(42% 0.10 20);
}
}
 
/* ============================================================
  LAYOUT — Conteneur principal
  ============================================================ */
.roadmap-container {
.roadmap-container {
   width: 100%;
   width: 100%;
Ligne 14 : Ligne 91 :
   border: 1px solid rgba(0,0,0,0.08);
   border: 1px solid rgba(0,0,0,0.08);
   background: var(--color-surface-1, #f8f9fa);
   background: var(--color-surface-1, #f8f9fa);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
}


/* --- Header --- */
/* ============================================================
  HEADER
  ============================================================ */
.roadmap-header {
.roadmap-header {
   background: var(--color-surface-2, #eaecf0);
   background: var(--color-surface-2, #eaecf0);
Ligne 38 : Ligne 117 :
}
}


/* --- Statistiques conteneur --- */
/* ============================================================
  STATS
  ============================================================ */
.roadmap-stats {
.roadmap-stats {
   display: flex;
   display: flex;
Ligne 48 : Ligne 129 :
}
}


/* --- Stat box de base --- */
.roadmap-stat {
.roadmap-stat {
   display: flex;
   display: flex;
Ligne 78 : Ligne 158 :
}
}


/* --- Couleurs par statut : stats --- */
/* Stat boxes — Palette Aurora */
/* Échelle : idea (violet) → planned (orange) → inprogress (bleu) → done (vert) */
.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); }
.roadmap-stat-inprogress { background: var(--roadmap-bg-inprogress); border-color: var(--roadmap-border-inprogress); }
.roadmap-stat-done      { background: var(--roadmap-bg-done);      border-color: var(--roadmap-border-done); }
.roadmap-stat-cancelled  { background: var(--roadmap-bg-cancelled);  border-color: var(--roadmap-border-cancelled); }


.roadmap-stat-idea {
.roadmap-stat-idea       .roadmap-stat-count { color: var(--roadmap-color-idea); }
  background: #f3e5f5;
.roadmap-stat-planned    .roadmap-stat-count { color: var(--roadmap-color-planned); }
  border-color: #ce93d8;
.roadmap-stat-inprogress .roadmap-stat-count { color: var(--roadmap-color-inprogress); }
}
.roadmap-stat-done      .roadmap-stat-count { color: var(--roadmap-color-done); }
.roadmap-stat-idea .roadmap-stat-count {
.roadmap-stat-cancelled  .roadmap-stat-count { color: var(--roadmap-color-cancelled); }
  color: #7b1fa2;
}


.roadmap-stat-planned {
/* ============================================================
  background: #fff8e1;
  BARRE DE PROGRESSION
  border-color: #ffe082;
  ============================================================ */
}
.roadmap-stat-planned .roadmap-stat-count {
  color: #f57f17;
}
 
.roadmap-stat-inprogress {
  background: #e3ecfa;
  border-color: #90b4e8;
}
.roadmap-stat-inprogress .roadmap-stat-count {
  color: #1a56a8;
}
 
.roadmap-stat-done {
  background: #e8f5e9;
  border-color: #a5d6a7;
}
.roadmap-stat-done .roadmap-stat-count {
  color: #2e7d32;
}
 
.roadmap-stat-cancelled {
  background: #fce8e8;
  border-color: #ef9a9a;
}
.roadmap-stat-cancelled .roadmap-stat-count {
  color: #c62828;
}
 
/* --- Barre de progression --- */
.roadmap-progress-wrap {
.roadmap-progress-wrap {
   padding: 0.8em 1.5em 1em;
   padding: 0.8em 1.5em 1em;
Ligne 144 : Ligne 196 :
.roadmap-progress-fill {
.roadmap-progress-fill {
   height: 100%;
   height: 100%;
   background: #3366cc;
   background: var(--roadmap-color-done);
   border-radius: 99px;
   border-radius: 99px;
   transition: width 0.6s ease;
   transition: width 0.6s ease;
}
}


/* --- Sections --- */
/* ============================================================
  SECTIONS
  ============================================================ */
.roadmap-section {
.roadmap-section {
   border-top: 1px solid rgba(0,0,0,0.06);
   border-top: 1px solid rgba(0,0,0,0.06);
Ligne 164 : Ligne 218 :
}
}


/* --- Items --- */
/* ============================================================
  ITEMS
  ============================================================ */
.roadmap-item {
.roadmap-item {
   display: flex;
   display: flex;
Ligne 178 : Ligne 234 :
}
}


/* --- Bordure gauche par statut --- */
/* Bordures gauche — Palette Aurora */
/* Échelle : idea (violet) → planned (orange) → inprogress (bleu) → done (vert) */
.roadmap-item.roadmap-idea      { border-left: 3px solid var(--roadmap-color-idea); }
.roadmap-item.roadmap-idea      { border-left: 3px solid #7b1fa2; }
.roadmap-item.roadmap-planned    { border-left: 3px solid var(--roadmap-color-planned); }
.roadmap-item.roadmap-planned    { border-left: 3px solid #f57f17; }
.roadmap-item.roadmap-inprogress { border-left: 3px solid var(--roadmap-color-inprogress); }
.roadmap-item.roadmap-inprogress { border-left: 3px solid #1a56a8; }
.roadmap-item.roadmap-done      { border-left: 3px solid var(--roadmap-color-done); }
.roadmap-item.roadmap-done      { border-left: 3px solid #2e7d32; }
.roadmap-item.roadmap-cancelled  { border-left: 3px solid var(--roadmap-color-cancelled); }
.roadmap-item.roadmap-cancelled  { border-left: 3px solid #c62828; }


.roadmap-item-content {
.roadmap-item-content {
Ligne 214 : Ligne 269 :
}
}


/* --- Badges --- */
/* ============================================================
/* Échelle : idea (violet) → planned (orange) → inprogress (bleu) → done (vert) */
  BADGES — Palette Aurora
  ============================================================ */
.roadmap-badge {
.roadmap-badge {
   display: inline-flex;
   display: inline-flex;
Ligne 228 : Ligne 284 :
   flex-shrink: 0;
   flex-shrink: 0;
   margin-top: 2px;
   margin-top: 2px;
  color: #ffffff;
}
}


.roadmap-badge-idea      { background: #7b1fa2; color: #ffffff; }
.roadmap-badge-idea      { background: var(--roadmap-color-idea); }
.roadmap-badge-planned    { background: #f57f17; color: #ffffff; }
.roadmap-badge-planned    { background: var(--roadmap-color-planned); }
.roadmap-badge-inprogress { background: #1a56a8; color: #ffffff; }
.roadmap-badge-inprogress { background: var(--roadmap-color-inprogress); }
.roadmap-badge-done      { background: #2e7d32; color: #ffffff; }
.roadmap-badge-done      { background: var(--roadmap-color-done); }
.roadmap-badge-cancelled  { background: #c62828; color: #ffffff; }
.roadmap-badge-cancelled  { background: var(--roadmap-color-cancelled); }


/* =====================================================
/* ============================================================
   TAGS — Roadmap
   TAGS
   ===================================================== */
   ============================================================ */
 
/* Conteneur */
.roadmap-tags {
.roadmap-tags {
   display: flex;
   display: flex;
Ligne 248 : Ligne 303 :
}
}


/* Base tag */
.roadmap-tag {
.roadmap-tag {
   font-size: 0.7em;
   font-size: 0.7em;
Ligne 259 : Ligne 313 :
}
}


/* -----------------------------------------------------
/* --- Général --- */
  Général
  ----------------------------------------------------- */
.roadmap-tag-gameplay      { background: #e0f2e9; color: #1b6e33; }
.roadmap-tag-gameplay      { background: #e0f2e9; color: #1b6e33; }
.roadmap-tag-contenu      { background: #fdf0e0; color: #7a5220; }
.roadmap-tag-contenu      { background: #fdf0e0; color: #7a5220; }
Ligne 267 : Ligne 319 :
.roadmap-tag-interface    { background: #fce8e8; color: #8e2a2a; }
.roadmap-tag-interface    { background: #fce8e8; color: #8e2a2a; }


/* -----------------------------------------------------
/* --- Monde & Exploration --- */
  Monde & Exploration
  ----------------------------------------------------- */
.roadmap-tag-monde        { background: #e0f2f1; color: #004d40; }
.roadmap-tag-monde        { background: #e0f2f1; color: #004d40; }
.roadmap-tag-spawn        { background: #fff8e1; color: #ff6f00; }
.roadmap-tag-spawn        { background: #fff8e1; color: #ff6f00; }
Ligne 276 : Ligne 326 :
.roadmap-tag-transport    { background: #e3f2fd; color: #0d47a1; }
.roadmap-tag-transport    { background: #e3f2fd; color: #0d47a1; }


/* -----------------------------------------------------
/* --- Gameplay & Combat --- */
  Gameplay & Combat
  ----------------------------------------------------- */
.roadmap-tag-combat        { background: #ffebee; color: #b71c1c; }
.roadmap-tag-combat        { background: #ffebee; color: #b71c1c; }
.roadmap-tag-quetes        { background: #e8d5f5; color: #6a1b9a; }
.roadmap-tag-quetes        { background: #e8d5f5; color: #6a1b9a; }
Ligne 287 : Ligne 335 :
.roadmap-tag-economie      { background: #fce4ec; color: #880e4f; }
.roadmap-tag-economie      { background: #fce4ec; color: #880e4f; }


/* -----------------------------------------------------
/* --- Technique & Administration --- */
  Technique & Administration
  ----------------------------------------------------- */
.roadmap-tag-technique    { background: #e0e8f5; color: #2a4d8e; }
.roadmap-tag-technique    { background: #e0e8f5; color: #2a4d8e; }
.roadmap-tag-plugin        { background: #e0f4ff; color: #01579b; }
.roadmap-tag-plugin        { background: #e0f4ff; color: #01579b; }
Ligne 301 : Ligne 347 :
.roadmap-tag-moderation    { background: #e8f5e9; color: #2e7d32; }
.roadmap-tag-moderation    { background: #e8f5e9; color: #2e7d32; }


/* -----------------------------------------------------
/* --- Communication & Documentation --- */
  Communication & Documentation
  ----------------------------------------------------- */
.roadmap-tag-communication { background: #f1f8e9; color: #558b2f; }
.roadmap-tag-communication { background: #f1f8e9; color: #558b2f; }
.roadmap-tag-discord      { background: #e8e0f5; color: #3a2a7a; }
.roadmap-tag-discord      { background: #e8e0f5; color: #3a2a7a; }
.roadmap-tag-wiki          { background: #e0f5f0; color: #1a6e55; }
.roadmap-tag-wiki          { background: #e0f5f0; color: #1a6e55; }


/* --- Date --- */
/* ============================================================
  DATE
  ============================================================ */
.roadmap-date {
.roadmap-date {
   flex-shrink: 0;
   flex-shrink: 0;
Ligne 320 : Ligne 366 :
}
}


/* --- Légende --- */
/* ============================================================
  LÉGENDE
  ============================================================ */
.roadmap-legend {
.roadmap-legend {
   display: flex;
   display: flex;
Ligne 345 : Ligne 393 :
}
}


/* --- Responsive --- */
/* ============================================================
  RESPONSIVE
  ============================================================ */
@media (max-width: 640px) {
@media (max-width: 640px) {
   .roadmap-stats   { padding: 0.8em 1em; gap: 0.4em; }
   .roadmap-stats         { padding: 0.8em 1em; gap: 0.4em; }
   .roadmap-stat     { min-width: 55px; padding: 0.4em 0.6em; }
   .roadmap-stat           { min-width: 55px; padding: 0.4em 0.6em; }
   .roadmap-item     { padding: 0.6em 1em; }
   .roadmap-item           { padding: 0.6em 1em; }
   .roadmap-date     { display: none; }
   .roadmap-date           { display: none; }
   .roadmap-header   { padding: 1em; }
   .roadmap-header         { padding: 1em; }
   .roadmap-section-title  { padding: 0.6em 1em; }
   .roadmap-section-title  { padding: 0.6em 1em; }
   .roadmap-progress-wrap  { padding: 0.6em 1em 0.8em; }
   .roadmap-progress-wrap  { padding: 0.6em 1em 0.8em; }
}
}
Récupérée de "https://wiki.nefald.fr/Modèle:Roadmap/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.