Basculer la recherche
Basculer le menu
60
1,9 k
12
5,3 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édente
Hiob (discussion | contributions)
owner
3 729 modifications
color
Hiob (discussion | contributions)
owner
3 729 modifications
border-radius roadmap-tag
 
(4 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
/* ============================================================
/* ============================================================
   ROADMAP — Design intégré au skin Citizen
   ROADMAP — Design intégré au skin Citizen
   Utilise les variables Citizen pour le theming automatique
   Utilise var() Citizen pour surfaces/textes (dark mode auto)
  Couleurs statuts en hex direct (pas de custom properties)
   ============================================================ */
   ============================================================ */
/* --- Variable progressive composite --- */
:root {
  --roadmap-color-progressive: oklch(53.25% 0.1679 262.29);
  --roadmap-color-done: oklch(55% 0.17 145);
  --roadmap-color-done-bg: oklch(92% 0.05 145);
  --roadmap-color-inprogress: oklch(70% 0.16 70);
  --roadmap-color-inprogress-bg: oklch(92% 0.05 70);
  --roadmap-color-planned: oklch(55% 0.15 262);
  --roadmap-color-planned-bg: oklch(92% 0.04 262);
  --roadmap-color-idea: oklch(55% 0.15 310);
  --roadmap-color-idea-bg: oklch(92% 0.05 310);
  --roadmap-color-cancelled: oklch(55% 0.12 25);
  --roadmap-color-cancelled-bg: oklch(92% 0.04 25);
}


/* --- Conteneur principal --- */
/* --- Conteneur principal --- */
.roadmap-container {
.roadmap-container {
  font-family: var(--font-family-citizen-base);
   width: 100%;
   width: 100%;
   max-width: none;
   max-width: none;
   margin: 1.5em 0;
   margin: 1.5em 0;
   border-radius: var(--border-radius--medium, 12px);
   border-radius: 12px;
   overflow: hidden;
   overflow: hidden;
   border: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border: 1px solid rgba(0,0,0,0.08);
   background: var(--color-surface-1);
   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);
   background: var(--color-surface-2, #eaecf0);
   padding: 1.4em 1.5em 1.2em;
   padding: 1.4em 1.5em 1.2em;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border-bottom: 1px solid rgba(0,0,0,0.08);
}
}


.roadmap-header-title {
.roadmap-header-title {
  font-family: var(--font-family-citizen-base);
   font-size: 1.4em;
   font-size: 1.4em;
   font-weight: 700;
   font-weight: 700;
   color: var(--color-emphasized);
   color: var(--color-emphasized, #1a1a2e);
   margin: 0;
   margin: 0;
   line-height: 1.3;
   line-height: 1.3;
Ligne 51 : Ligne 34 :
.roadmap-subtitle {
.roadmap-subtitle {
   font-size: 0.85em;
   font-size: 0.85em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
   margin-top: 0.3em;
   margin-top: 0.3em;
}
}


/* --- Statistiques --- */
/* --- Statistiques conteneur --- */
.roadmap-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  padding: 1em 1.5em;
  background: var(--color-surface-0, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
 
/* --- Stat box de base --- */
.roadmap-stat {
.roadmap-stat {
   display: flex;
   display: flex;
Ligne 62 : Ligne 55 :
   min-width: 65px;
   min-width: 65px;
   padding: 0.5em 0.8em;
   padding: 0.5em 0.8em;
   border-radius: var(--border-radius--small, 8px);
   border-radius: 8px;
   border: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border: 1px solid rgba(0,0,0,0.08);
   transition: background 0.15s ease, transform 0.15s ease;
   transition: background 0.15s ease, transform 0.15s ease;
}
}
Ligne 72 : Ligne 65 :


.roadmap-stat-count {
.roadmap-stat-count {
  font-family: var(--font-family-citizen-base);
   font-size: 1.3em;
   font-size: 1.3em;
   font-weight: 700;
   font-weight: 700;
Ligne 80 : Ligne 72 :
.roadmap-stat-label {
.roadmap-stat-label {
   font-size: 0.7em;
   font-size: 0.7em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   letter-spacing: 0.03em;
   margin-top: 0.3em;
   margin-top: 0.2em;
}
}


/* --- Stats colorées par statut --- */
/* --- Couleurs par statut : stats --- */
.roadmap-stat-done {
.roadmap-stat-done {
   background: var(--roadmap-color-done-bg);
   background: #e8f5e9;
   border-color: var(--roadmap-color-done);
   border-color: #a5d6a7;
}
}
.roadmap-stat-done .roadmap-stat-count {
.roadmap-stat-done .roadmap-stat-count {
   color: var(--roadmap-color-done);
   color: #2e7d32;
}
}
.roadmap-stat-inprogress {
.roadmap-stat-inprogress {
   background: var(--roadmap-color-inprogress-bg);
   background: #fff8e1;
   border-color: var(--roadmap-color-inprogress);
   border-color: #ffe082;
}
}
.roadmap-stat-inprogress .roadmap-stat-count {
.roadmap-stat-inprogress .roadmap-stat-count {
   color: var(--roadmap-color-inprogress);
   color: #f57f17;
}
}
.roadmap-stat-planned {
.roadmap-stat-planned {
   background: var(--roadmap-color-planned-bg);
   background: #e3ecfa;
   border-color: var(--roadmap-color-planned);
   border-color: #90b4e8;
}
}
.roadmap-stat-planned .roadmap-stat-count {
.roadmap-stat-planned .roadmap-stat-count {
   color: var(--roadmap-color-planned);
   color: #1a56a8;
}
}
.roadmap-stat-idea {
.roadmap-stat-idea {
   background: var(--roadmap-color-idea-bg);
   background: #f3e5f5;
   border-color: var(--roadmap-color-idea);
   border-color: #ce93d8;
}
}
.roadmap-stat-idea .roadmap-stat-count {
.roadmap-stat-idea .roadmap-stat-count {
   color: var(--roadmap-color-idea);
   color: #7b1fa2;
}
}
.roadmap-stat-cancelled {
.roadmap-stat-cancelled {
   background: var(--roadmap-color-cancelled-bg);
   background: #fce8e8;
   border-color: var(--roadmap-color-cancelled);
   border-color: #ef9a9a;
}
}
.roadmap-stat-cancelled .roadmap-stat-count {
.roadmap-stat-cancelled .roadmap-stat-count {
   color: var(--roadmap-color-cancelled);
   color: #c62828;
}
}


Ligne 130 : Ligne 118 :
.roadmap-progress-wrap {
.roadmap-progress-wrap {
   padding: 0.8em 1.5em 1em;
   padding: 0.8em 1.5em 1em;
   background: var(--color-surface-0);
   background: var(--color-surface-0, #ffffff);
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border-bottom: 1px solid rgba(0,0,0,0.08);
}
}


.roadmap-progress-label {
.roadmap-progress-label {
   font-size: 0.8em;
   font-size: 0.82em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
   margin-bottom: 0.5em;
   margin-bottom: 0.5em;
}
.roadmap-progress-label strong {
  color: var(--color-emphasized);
}
}


.roadmap-progress-bar {
.roadmap-progress-bar {
   height: 8px;
  width: 100%;
   background: var(--color-surface-3);
   height: 10px;
   background: var(--color-surface-3, #ddd);
   border-radius: 99px;
   border-radius: 99px;
   overflow: hidden;
   overflow: hidden;
}
}


/* ✅ Corrigé : variable intermédiaire au lieu de oklch() inline */
.roadmap-progress-fill {
.roadmap-progress-fill {
   height: 100%;
   height: 100%;
  background: #3366cc;
   border-radius: 99px;
   border-radius: 99px;
  background: var(--roadmap-color-progressive);
   transition: width 0.6s ease;
   transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
}


/* --- Sections --- */
/* --- Sections --- */
.roadmap-section {
.roadmap-section {
   border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border-top: 1px solid rgba(0,0,0,0.06);
}
 
.roadmap-section:first-of-type {
  border-top: none;
}
}


.roadmap-section-title {
.roadmap-section-title {
   background: var(--color-surface-2);
   font-size: 0.82em;
  padding: 0.65em 1.5em;
  font-family: var(--font-family-citizen-base);
   font-weight: 700;
   font-weight: 700;
  font-size: 0.8em;
  color: var(--color-subtle);
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   letter-spacing: 0.06em;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   color: var(--color-subtle, #72777d);
  padding: 0.8em 1.5em 0.4em;
  background: var(--color-surface-2, #eaecf0);
}
}


Ligne 184 : Ligne 162 :
   display: flex;
   display: flex;
   align-items: flex-start;
   align-items: flex-start;
   gap: 0.8em;
   gap: 0.7em;
   padding: 0.7em 1.5em;
   padding: 0.7em 1.5em;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.05));
   border-bottom: 1px solid rgba(0,0,0,0.04);
   transition: background 0.12s ease;
   transition: background 0.12s ease;
}
.roadmap-item:last-child {
  border-bottom: none;
}
}


.roadmap-item:hover {
.roadmap-item:hover {
   background: var(--color-surface-2);
   background: var(--color-surface-2, rgba(0,0,0,0.02));
}
}


/* --- Badge statut --- */
/* --- Bordure gauche par statut --- */
.roadmap-badge {
.roadmap-item.roadmap-done {
  display: inline-flex;
   border-left: 3px solid #2e7d32;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
 
/* --- Bordure gauche colorée par statut --- */
.roadmap-done {
  border-left: 3px solid var(--roadmap-color-done);
}
 
.roadmap-inprogress {
   border-left: 3px solid var(--roadmap-color-inprogress);
}
 
.roadmap-planned {
  border-left: 3px solid var(--roadmap-color-planned);
}
 
.roadmap-idea {
  border-left: 3px solid var(--roadmap-color-idea);
}
}
 
.roadmap-item.roadmap-inprogress {
.roadmap-cancelled {
   border-left: 3px solid #f57f17;
   border-left: 3px solid var(--roadmap-color-cancelled);
}
}
 
.roadmap-item.roadmap-planned {
/* ✅ Corrigé : variables intermédiaires */
   border-left: 3px solid #1a56a8;
.roadmap-done .roadmap-badge {
   background: var(--roadmap-color-done);
}
}
 
.roadmap-item.roadmap-idea {
.roadmap-inprogress .roadmap-badge {
   border-left: 3px solid #7b1fa2;
   background: var(--roadmap-color-inprogress);
}
}
 
.roadmap-item.roadmap-cancelled {
.roadmap-planned .roadmap-badge {
   border-left: 3px solid #c62828;
   background: var(--roadmap-color-progressive);
}
}


.roadmap-idea .roadmap-badge {
  background: var(--roadmap-color-idea);
}
.roadmap-cancelled .roadmap-badge {
  background: var(--roadmap-color-cancelled);
}
/* --- Contenu item --- */
.roadmap-item-content {
.roadmap-item-content {
   flex: 1;
   flex: 1;
Ligne 264 : Ligne 195 :


.roadmap-item-title {
.roadmap-item-title {
  font-family: var(--font-family-citizen-base);
   font-weight: 600;
   font-weight: 600;
  color: var(--color-emphasized, #1a1a2e);
   font-size: 0.92em;
   font-size: 0.92em;
  color: var(--color-emphasized);
   line-height: 1.4;
   line-height: 1.4;
}
}


.roadmap-item-title a {
.roadmap-item-title a {
   color: var(--color-link);
   color: var(--color-link, #3366cc);
   text-decoration: none;
   text-decoration: none;
}
}
Ligne 280 : Ligne 210 :
}
}


.roadmap-cancelled .roadmap-item-title {
.roadmap-item-desc {
   text-decoration: line-through;
   font-size: 0.82em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
  margin-top: 0.15em;
  line-height: 1.45;
}
}


.roadmap-cancelled .roadmap-item-desc {
/* --- Badges --- */
   text-decoration: line-through;
.roadmap-badge {
   opacity: 0.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
   min-width: 22px;
  border-radius: 50%;
   font-size: 0.72em;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
}


.roadmap-item-desc {
.roadmap-badge-done {
   font-size: 0.82em;
   background: #2e7d32;
   color: var(--color-subtle);
  color: #ffffff;
   margin-top: 0.15em;
}
   line-height: 1.4;
.roadmap-badge-inprogress {
  background: #f57f17;
   color: #ffffff;
}
.roadmap-badge-planned {
  background: #1a56a8;
  color: #ffffff;
}
.roadmap-badge-idea {
  background: #7b1fa2;
   color: #ffffff;
}
.roadmap-badge-cancelled {
  background: #c62828;
   color: #ffffff;
}
}


/* --- Tags --- */
/* --- Tags --- */
.roadmap-tags {
.roadmap-tags {
   display: inline-flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 0.3em;
   gap: 0.3em;
Ligne 306 : Ligne 262 :


.roadmap-tag {
.roadmap-tag {
  display: inline-block;
   font-size: 0.7em;
  font-family: var(--font-family-citizen-base);
   font-size: 0.68em;
   font-weight: 600;
   font-weight: 600;
   padding: 0.15em 0.55em;
   padding: 0.15em 0.55em;
   border-radius: 99px;
   border-radius: 8px;
   text-transform: lowercase;
   white-space: nowrap;
  letter-spacing: 0.02em;
   background: var(--color-surface-3, #ddd);
  line-height: 1.5;
   color: var(--color-subtle, #555);
   background: var(--color-surface-3);
   color: var(--color-subtle);
}
}


/* --- Tags spécifiques : variables pré-calculées --- */
.roadmap-tag-gameplay {
:root {
   background: #e0f2e9;
   --roadmap-tag-gameplay-bg: oklch(90% 0.06 145);
   color: #1b6e33;
   --roadmap-tag-gameplay-fg: oklch(35% 0.12 145);
}
  --roadmap-tag-technique-bg: oklch(90% 0.05 250);
.roadmap-tag-technique {
   --roadmap-tag-technique-fg: oklch(35% 0.12 250);
  background: #e0e8f5;
  --roadmap-tag-contenu-bg: oklch(90% 0.06 70);
   color: #2a4d8e;
   --roadmap-tag-contenu-fg: oklch(40% 0.12 70);
}
  --roadmap-tag-interface-bg: oklch(90% 0.05 25);
.roadmap-tag-contenu {
   --roadmap-tag-interface-fg: oklch(40% 0.12 25);
  background: #fdf0e0;
  --roadmap-tag-event-bg: oklch(90% 0.06 310);
   color: #7a5220;
   --roadmap-tag-event-fg: oklch(35% 0.12 310);
}
  --roadmap-tag-wiki-bg: oklch(90% 0.06 160);
.roadmap-tag-interface {
   --roadmap-tag-wiki-fg: oklch(35% 0.12 160);
  background: #fce8e8;
  --roadmap-tag-discord-bg: oklch(90% 0.06 280);
   color: #8e2a2a;
   --roadmap-tag-discord-fg: oklch(35% 0.12 280);
}
.roadmap-tag-event {
  background: #f0e0f5;
   color: #5e2a7a;
}
.roadmap-tag-wiki {
  background: #e0f5f0;
   color: #1a6e55;
}
.roadmap-tag-discord {
  background: #e8e0f5;
   color: #3a2a7a;
}
}


.roadmap-tag[data-tag="gameplay"] {
.roadmap-tag-economie {
   background: var(--roadmap-tag-gameplay-bg);
   background: #fce4ec;
   color: var(--roadmap-tag-gameplay-fg);
   color: #880e4f;
}
}
.roadmap-tag[data-tag="technique"] {
 
   background: var(--roadmap-tag-technique-bg);
.roadmap-tag-quetes {
   color: var(--roadmap-tag-technique-fg);
   background: #e8d5f5;
   color: #6a1b9a;
}
}
.roadmap-tag[data-tag="contenu"] {
 
   background: var(--roadmap-tag-contenu-bg);
.roadmap-tag-build {
   color: var(--roadmap-tag-contenu-fg);
   background: #fff3e0;
   color: #e65100;
}
}
.roadmap-tag[data-tag="interface"] {
 
   background: var(--roadmap-tag-interface-bg);
.roadmap-tag-bestiaire {
   color: var(--roadmap-tag-interface-fg);
   background: #fff9c4;
   color: #f57f17;
}
}
.roadmap-tag[data-tag="event"] {
 
   background: var(--roadmap-tag-event-bg);
.roadmap-tag-roleplay {
   color: var(--roadmap-tag-event-fg);
   background: #e0f7fa;
   color: #00695c;
}
}
.roadmap-tag[data-tag="wiki"] {
 
   background: var(--roadmap-tag-wiki-bg);
.roadmap-tag-moderation {
   color: var(--roadmap-tag-wiki-fg);
   background: #e8f5e9;
   color: #2e7d32;
}
}
.roadmap-tag[data-tag="discord"] {
 
   background: var(--roadmap-tag-discord-bg);
.roadmap-tag-admin {
   color: var(--roadmap-tag-discord-fg);
   background: #fce4ec;
   color: #ad1457;
}
}


/* --- Tags dark mode : override les variables --- */
.roadmap-tag-communication {
.skin-theme-clientpref-night {
   background: #f1f8e9;
   --roadmap-color-done-bg: oklch(25% 0.05 145);
   color: #558b2f;
   --roadmap-color-inprogress-bg: oklch(25% 0.05 70);
  --roadmap-color-planned-bg: oklch(25% 0.04 262);
  --roadmap-color-idea-bg: oklch(25% 0.05 310);
  --roadmap-color-cancelled-bg: oklch(25% 0.04 25);
}
}


/* --- Tags mode auto sombre --- */
.roadmap-tag-dev {
@media screen and (prefers-color-scheme: dark) {
   background: #ede7f6;
   .skin-theme-clientpref-os {
  color: #4527a0;
    --roadmap-color-done-bg: oklch(25% 0.05 145);
    --roadmap-color-inprogress-bg: oklch(25% 0.05 70);
    --roadmap-color-planned-bg: oklch(25% 0.04 262);
    --roadmap-color-idea-bg: oklch(25% 0.05 310);
    --roadmap-color-cancelled-bg: oklch(25% 0.04 25);
  }
}
}


Ligne 389 : Ligne 348 :
.roadmap-date {
.roadmap-date {
   flex-shrink: 0;
   flex-shrink: 0;
  font-family: var(--font-family-citizen-monospace);
   font-size: 0.72em;
   font-size: 0.72em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
   padding: 0.2em 0.6em;
   padding: 0.2em 0.6em;
   background: var(--color-surface-2);
   background: var(--color-surface-2, #eaecf0);
   border-radius: var(--border-radius--small, 6px);
   border-radius: 6px;
   margin-top: 2px;
   margin-top: 2px;
   white-space: nowrap;
   white-space: nowrap;
Ligne 405 : Ligne 363 :
   gap: 1em;
   gap: 1em;
   padding: 0.8em 1.5em;
   padding: 0.8em 1.5em;
   background: var(--color-surface-2);
   background: var(--color-surface-2, #eaecf0);
   border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border-top: 1px solid rgba(0,0,0,0.08);
   font-size: 0.78em;
   font-size: 0.78em;
   color: var(--color-subtle);
   color: var(--color-subtle, #72777d);
}
 
.roadmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
}


Ligne 415 : Ligne 379 :
   height: 16px;
   height: 16px;
   min-width: 16px;
   min-width: 16px;
   font-size: 0.65em;
   font-size: 0.6em;
}
}


/* --- Responsive --- */
/* --- Responsive --- */
@media (max-width: 640px) {
@media (max-width: 640px) {
  .roadmap-stats {
    padding: 0.8em 1em;
    gap: 0.4em;
  }
  .roadmap-stat {
    min-width: 55px;
    padding: 0.4em 0.6em;
  }
   .roadmap-item {
   .roadmap-item {
     padding: 0.6em 1em;
     padding: 0.6em 1em;
Ligne 425 : Ligne 397 :
   .roadmap-date {
   .roadmap-date {
     display: none;
     display: none;
  }
  .roadmap-stats {
    padding: 0.8em 1em;
    gap: 0.4em;
  }
  .roadmap-stat {
    min-width: 50px;
    padding: 0.3em 0.6em;
   }
   }
   .roadmap-header {
   .roadmap-header {
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.