Basculer la recherche
Basculer le menu
61
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 suivante →
Hiob (discussion | contributions)
owner
4 069 modifications
Page créée avec « →================================================ ROADMAP — Module:Roadmap wiki.nefald.fr ================================================ : .roadmap-container { max-width: 960px; margin: 1.5em auto; border: 1px solid #dde3ea; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); font-size: 0.95em; } →--- Header --- : .roadmap-header { background: linear-gradient(135deg, #1a2940 0%,... »
 
Hiob (discussion | contributions)
owner
4 069 modifications
citizen
Ligne 1 : Ligne 1 :
/* ================================================
/* ============================================================
   ROADMAP — Module:Roadmap
   ROADMAP — Design intégré au skin Citizen
   wiki.nefald.fr
   Utilise les variables Citizen pour le theming automatique
   ================================================ */
   ============================================================ */


/* --- Variable progressive composite --- */
:root {
  --roadmap-color-progressive: oklch(53.25% 0.1679 262.29);
  --roadmap-color-done: oklch(55% 0.17 145);
  --roadmap-color-inprogress: oklch(70% 0.16 70);
  --roadmap-color-idea: oklch(55% 0.15 310);
  --roadmap-color-cancelled: oklch(55% 0.18 25);
}
/* --- Conteneur principal --- */
.roadmap-container {
.roadmap-container {
   max-width: 960px;
  font-family: var(--font-family-citizen-base);
   max-width: 900px;
   margin: 1.5em auto;
   margin: 1.5em auto;
   border: 1px solid #dde3ea;
   border-radius: var(--border-radius--medium, 12px);
  border-radius: 10px;
   overflow: hidden;
   overflow: hidden;
   background: #fff;
  border: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   box-shadow: 0 2px 12px rgba(0,0,0,0.08);
   background: var(--color-surface-1);
  font-size: 0.95em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
}


/* --- Header --- */
/* --- Header --- */
.roadmap-header {
.roadmap-header {
   background: linear-gradient(135deg, #1a2940 0%, #2d6a9f 100%);
   background: var(--color-surface-2);
   color: white;
   padding: 1.4em 1.5em 1.2em;
   padding: 1.2em 1.6em;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
}
}


.roadmap-header-title {
.roadmap-header-title {
   font-size: 1.3em;
  font-family: var(--font-family-citizen-base);
   font-size: 1.4em;
   font-weight: 700;
   font-weight: 700;
   letter-spacing: 0.02em;
   color: var(--color-emphasized);
  margin: 0;
  line-height: 1.3;
}
}


.roadmap-subtitle {
.roadmap-subtitle {
   opacity: 0.75;
   font-size: 0.85em;
   font-size: 0.88em;
   color: var(--color-subtle);
   margin-top: 0.25em;
   margin-top: 0.3em;
}
}


/* --- Stats globales --- */
/* --- Statistiques --- */
.roadmap-stats {
.roadmap-stats {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 0.8em;
   gap: 0.6em;
   padding: 0.9em 1.4em;
   padding: 1em 1.5em;
   background: #f7f9fb;
   background: var(--color-surface-0);
   border-bottom: 1px solid #e8edf2;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
}
}


Ligne 48 : Ligne 61 :
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
   padding: 0.4em 0.9em;
  min-width: 65px;
   border: 2px solid #ccc;
   padding: 0.5em 0.8em;
  border-radius: 8px;
   border-radius: var(--border-radius--small, 8px);
   background: white;
   background: var(--color-surface-1);
   min-width: 60px;
   border: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
  transition: background 0.15s ease;
}
 
.roadmap-stat:hover {
  background: var(--color-surface-2);
}
}


.roadmap-stat-count {
.roadmap-stat-count {
   font-size: 1.4em;
  font-family: var(--font-family-citizen-base);
   font-size: 1.3em;
   font-weight: 700;
   font-weight: 700;
   line-height: 1;
   line-height: 1;
Ligne 62 : Ligne 81 :


.roadmap-stat-label {
.roadmap-stat-label {
   font-size: 0.72em;
   font-size: 0.7em;
   color: #888;
   color: var(--color-subtle);
  margin-top: 0.2em;
   text-transform: uppercase;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   letter-spacing: 0.04em;
  margin-top: 0.3em;
}
}


/* --- Barre de progression --- */
/* --- Barre de progression --- */
.roadmap-progress-wrap {
.roadmap-progress-wrap {
   padding: 0.7em 1.4em;
   padding: 0.8em 1.5em 1em;
   background: #f7f9fb;
   background: var(--color-surface-0);
   border-bottom: 1px solid #e8edf2;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
}
}


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


.roadmap-progress-bar {
.roadmap-progress-bar {
   height: 10px;
   height: 8px;
   background: #e0e6ed;
   background: var(--color-surface-3);
   border-radius: 5px;
   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: linear-gradient(90deg, #27ae60, #52d68a);
   border-radius: 99px;
   border-radius: 5px;
   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 #e8edf2;
   border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
}
 
.roadmap-section:first-of-type {
  border-top: none;
}
}


.roadmap-section-title {
.roadmap-section-title {
   background: #f0f4f8;
   background: var(--color-surface-2);
   padding: 0.55em 1.4em;
   padding: 0.65em 1.5em;
   font-size: 0.78em;
   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.08em;
   letter-spacing: 0.06em;
  color: #5a6a7a;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   border-bottom: 1px solid #e8edf2;
}
}


Ligne 116 : Ligne 145 :
   display: flex;
   display: flex;
   align-items: flex-start;
   align-items: flex-start;
   padding: 0.7em 1.4em;
  gap: 0.8em;
   border-bottom: 1px solid #f3f5f7;
   padding: 0.7em 1.5em;
  gap: 0.9em;
   border-bottom: 1px solid var(--border-color-base, rgba(0,0,0,0.05));
   transition: background 0.12s;
   transition: background 0.12s ease;
}
}


.roadmap-item:hover {
.roadmap-item:last-child {
   background: #f9fbfd;
   border-bottom: none;
}
}


.roadmap-item:last-child {
.roadmap-item:hover {
   border-bottom: none;
   background: var(--color-surface-2);
}
}


/* --- Badge rond --- */
/* --- Badge statut --- */
.roadmap-badge {
.roadmap-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
   font-size: 0.82em;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
   font-size: 0.75em;
   font-weight: 700;
   font-weight: 700;
   color: white;
   color: #fff;
  line-height: 1;
  flex-shrink: 0;
   margin-top: 1px;
   margin-top: 1px;
}
/* ✅ Corrigé : variables intermédiaires */
.roadmap-done .roadmap-badge {
  background: var(--roadmap-color-done);
}
.roadmap-inprogress .roadmap-badge {
  background: var(--roadmap-color-inprogress);
}
.roadmap-planned .roadmap-badge {
  background: var(--roadmap-color-progressive);
}
.roadmap-idea .roadmap-badge {
  background: var(--roadmap-color-idea);
}
.roadmap-cancelled .roadmap-badge {
  background: var(--roadmap-color-cancelled);
}
}


Ligne 152 : Ligne 204 :


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


.roadmap-item-title a {
.roadmap-item-title a {
   color: inherit;
   color: var(--color-link);
   text-decoration: none;
   text-decoration: none;
  border-bottom: 1px dashed #aaa;
}
}


.roadmap-item-title a:hover {
.roadmap-item-title a:hover {
   border-bottom-color: #2d6a9f;
   text-decoration: underline;
  color: #2d6a9f;
}
}


/* Styles par statut */
.roadmap-cancelled .roadmap-item-title {
.roadmap-done .roadmap-item-title {
  text-decoration: line-through;
   color: #6b7a8d;
   color: var(--color-subtle);
}
}


.roadmap-cancelled .roadmap-item-title {
.roadmap-cancelled .roadmap-item-desc {
   text-decoration: line-through;
   text-decoration: line-through;
   color: #b0b8c1;
   opacity: 0.5;
}
}


.roadmap-item-desc {
.roadmap-item-desc {
   font-size: 0.83em;
   font-size: 0.82em;
   color: #8a96a3;
   color: var(--color-subtle);
   margin-top: 0.2em;
   margin-top: 0.15em;
   line-height: 1.4;
   line-height: 1.4;
}
}
Ligne 188 : Ligne 239 :
/* --- Tags --- */
/* --- Tags --- */
.roadmap-tags {
.roadmap-tags {
   display: flex;
   display: inline-flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 0.3em;
   gap: 0.3em;
   margin-top: 0.4em;
   margin-top: 0.3em;
}
}


.roadmap-tag {
.roadmap-tag {
   display: inline-block;
   display: inline-block;
  font-family: var(--font-family-citizen-base);
  font-size: 0.68em;
  font-weight: 600;
   padding: 0.15em 0.55em;
   padding: 0.15em 0.55em;
   border-radius: 4px;
   border-radius: 99px;
   font-size: 0.72em;
   text-transform: lowercase;
   font-weight: 700;
  letter-spacing: 0.02em;
   letter-spacing: 0.03em;
  line-height: 1.5;
   text-transform: uppercase;
  background: var(--color-surface-3);
  color: var(--color-subtle);
}
 
/* --- Tags spécifiques : variables pré-calculées --- */
:root {
  --roadmap-tag-gameplay-bg: oklch(90% 0.06 145);
  --roadmap-tag-gameplay-fg: oklch(35% 0.12 145);
  --roadmap-tag-technique-bg: oklch(90% 0.05 250);
  --roadmap-tag-technique-fg: oklch(35% 0.12 250);
  --roadmap-tag-contenu-bg: oklch(90% 0.06 70);
  --roadmap-tag-contenu-fg: oklch(40% 0.12 70);
  --roadmap-tag-interface-bg: oklch(90% 0.05 25);
  --roadmap-tag-interface-fg: oklch(40% 0.12 25);
  --roadmap-tag-event-bg: oklch(90% 0.06 310);
  --roadmap-tag-event-fg: oklch(35% 0.12 310);
  --roadmap-tag-wiki-bg: oklch(90% 0.06 160);
  --roadmap-tag-wiki-fg: oklch(35% 0.12 160);
  --roadmap-tag-discord-bg: oklch(90% 0.06 280);
  --roadmap-tag-discord-fg: oklch(35% 0.12 280);
}
 
.roadmap-tag[data-tag="gameplay"] {
  background: var(--roadmap-tag-gameplay-bg);
  color: var(--roadmap-tag-gameplay-fg);
}
.roadmap-tag[data-tag="technique"] {
  background: var(--roadmap-tag-technique-bg);
  color: var(--roadmap-tag-technique-fg);
}
.roadmap-tag[data-tag="contenu"] {
  background: var(--roadmap-tag-contenu-bg);
  color: var(--roadmap-tag-contenu-fg);
}
.roadmap-tag[data-tag="interface"] {
  background: var(--roadmap-tag-interface-bg);
  color: var(--roadmap-tag-interface-fg);
}
.roadmap-tag[data-tag="event"] {
  background: var(--roadmap-tag-event-bg);
  color: var(--roadmap-tag-event-fg);
}
.roadmap-tag[data-tag="wiki"] {
  background: var(--roadmap-tag-wiki-bg);
  color: var(--roadmap-tag-wiki-fg);
}
.roadmap-tag[data-tag="discord"] {
  background: var(--roadmap-tag-discord-bg);
  color: var(--roadmap-tag-discord-fg);
}
 
/* --- Tags dark mode : override les variables --- */
.skin-theme-clientpref-night {
  --roadmap-tag-gameplay-bg: oklch(25% 0.06 145);
  --roadmap-tag-gameplay-fg: oklch(75% 0.12 145);
  --roadmap-tag-technique-bg: oklch(25% 0.05 250);
   --roadmap-tag-technique-fg: oklch(75% 0.12 250);
  --roadmap-tag-contenu-bg: oklch(25% 0.06 70);
  --roadmap-tag-contenu-fg: oklch(75% 0.12 70);
  --roadmap-tag-interface-bg: oklch(25% 0.05 25);
  --roadmap-tag-interface-fg: oklch(75% 0.12 25);
  --roadmap-tag-event-bg: oklch(25% 0.06 310);
  --roadmap-tag-event-fg: oklch(75% 0.12 310);
  --roadmap-tag-wiki-bg: oklch(25% 0.06 160);
  --roadmap-tag-wiki-fg: oklch(75% 0.12 160);
  --roadmap-tag-discord-bg: oklch(25% 0.06 280);
   --roadmap-tag-discord-fg: oklch(75% 0.12 280);
}
 
/* --- Tags mode auto sombre --- */
@media screen and (prefers-color-scheme: dark) {
   .skin-theme-clientpref-os {
    --roadmap-tag-gameplay-bg: oklch(25% 0.06 145);
    --roadmap-tag-gameplay-fg: oklch(75% 0.12 145);
    --roadmap-tag-technique-bg: oklch(25% 0.05 250);
    --roadmap-tag-technique-fg: oklch(75% 0.12 250);
    --roadmap-tag-contenu-bg: oklch(25% 0.06 70);
    --roadmap-tag-contenu-fg: oklch(75% 0.12 70);
    --roadmap-tag-interface-bg: oklch(25% 0.05 25);
    --roadmap-tag-interface-fg: oklch(75% 0.12 25);
    --roadmap-tag-event-bg: oklch(25% 0.06 310);
    --roadmap-tag-event-fg: oklch(75% 0.12 310);
    --roadmap-tag-wiki-bg: oklch(25% 0.06 160);
    --roadmap-tag-wiki-fg: oklch(75% 0.12 160);
    --roadmap-tag-discord-bg: oklch(25% 0.06 280);
    --roadmap-tag-discord-fg: oklch(75% 0.12 280);
  }
}
}


Ligne 207 : Ligne 347 :
.roadmap-date {
.roadmap-date {
   flex-shrink: 0;
   flex-shrink: 0;
   font-size: 0.76em;
  font-family: var(--font-family-citizen-monospace);
   color: #b0b8c1;
   font-size: 0.72em;
  color: var(--color-subtle);
  padding: 0.2em 0.6em;
   background: var(--color-surface-2);
  border-radius: var(--border-radius--small, 6px);
  margin-top: 2px;
   white-space: nowrap;
   white-space: nowrap;
  font-style: italic;
  margin-top: 4px;
}
}


Ligne 219 : Ligne 362 :
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 1em;
   gap: 1em;
   padding: 0.75em 1.4em;
   padding: 0.8em 1.5em;
   background: #f7f9fb;
   background: var(--color-surface-2);
   border-top: 2px solid #e8edf2;
   border-top: 1px solid var(--border-color-base, rgba(0,0,0,0.08));
   font-size: 0.8em;
   font-size: 0.78em;
   color: #6b7a8d;
   color: var(--color-subtle);
}
}


Ligne 232 : Ligne 375 :
}
}


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