« Modèle:Roadmap/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* ============================================================ | /* ============================================================ | ||
ROADMAP — | ROADMAP — Compatible TemplateStyles (pas de custom properties) | ||
============================================================ */ | ============================================================ */ | ||
/* --- Conteneur principal --- */ | /* --- Conteneur principal --- */ | ||
.roadmap-container { | .roadmap-container { | ||
width: 100%; | width: 100%; | ||
max-width: none; | max-width: none; | ||
margin: 1.5em 0; | margin: 1.5em 0; | ||
border-radius: | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid | border: 1px solid rgba(0,0,0,0.08); | ||
background: | background: #f8f9fa; | ||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); | ||
} | } | ||
| Ligne 107 : | Ligne 17 : | ||
/* --- Header --- */ | /* --- Header --- */ | ||
.roadmap-header { | .roadmap-header { | ||
background: | background: #eaecf0; | ||
padding: 1.4em 1.5em 1.2em; | padding: 1.4em 1.5em 1.2em; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
.roadmap-header-title { | .roadmap-header-title { | ||
font-size: 1.4em; | font-size: 1.4em; | ||
font-weight: 700; | font-weight: 700; | ||
color: | color: #1a1a2e; | ||
margin: 0; | margin: 0; | ||
line-height: 1.3; | line-height: 1.3; | ||
| Ligne 123 : | Ligne 32 : | ||
.roadmap-subtitle { | .roadmap-subtitle { | ||
font-size: 0.85em; | font-size: 0.85em; | ||
color: | color: #72777d; | ||
margin-top: 0.3em; | margin-top: 0.3em; | ||
} | } | ||
/* --- Statistiques | /* --- Statistiques conteneur --- */ | ||
.roadmap-stats { | .roadmap-stats { | ||
display: flex; | display: flex; | ||
| Ligne 133 : | Ligne 42 : | ||
gap: 0.6em; | gap: 0.6em; | ||
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
background: | background: #ffffff; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
/* --- Stat box de base --- */ | |||
.roadmap-stat { | .roadmap-stat { | ||
display: flex; | display: flex; | ||
| Ligne 143 : | Ligne 53 : | ||
min-width: 70px; | min-width: 70px; | ||
padding: 0.6em 1em; | padding: 0.6em 1em; | ||
border-radius: | border-radius: 8px; | ||
border: 2px solid | border: 2px solid rgba(0,0,0,0.08); | ||
background: | background: #f8f9fa; | ||
} | } | ||
.roadmap-stat-count { | .roadmap-stat-count { | ||
font-size: 1.4em; | font-size: 1.4em; | ||
font-weight: 700; | font-weight: 700; | ||
line-height: 1; | line-height: 1; | ||
color: #333; | |||
} | } | ||
.roadmap-stat-label { | .roadmap-stat-label { | ||
font-size: 0.68em; | font-size: 0.68em; | ||
color: | color: #72777d; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0.05em; | letter-spacing: 0.05em; | ||
| Ligne 168 : | Ligne 73 : | ||
} | } | ||
/* --- Stats colorées --- */ | /* --- Stats colorées par statut --- */ | ||
.roadmap-stat-done { | .roadmap-stat-done { | ||
background: | background: #e8f5e9; | ||
border-color: | border-color: #2d9d46; | ||
} | } | ||
.roadmap-stat-done .roadmap-stat-count { | .roadmap-stat-done .roadmap-stat-count { | ||
color: | color: #2d9d46; | ||
} | } | ||
.roadmap-stat-inprogress { | .roadmap-stat-inprogress { | ||
background: | background: #fff8e1; | ||
border-color: | border-color: #d4920b; | ||
} | } | ||
.roadmap-stat-inprogress .roadmap-stat-count { | .roadmap-stat-inprogress .roadmap-stat-count { | ||
color: | color: #d4920b; | ||
} | } | ||
.roadmap-stat-planned { | .roadmap-stat-planned { | ||
background: | background: #e3ecfa; | ||
border-color: | border-color: #3366cc; | ||
} | } | ||
.roadmap-stat-planned .roadmap-stat-count { | .roadmap-stat-planned .roadmap-stat-count { | ||
color: | color: #3366cc; | ||
} | } | ||
.roadmap-stat-idea { | .roadmap-stat-idea { | ||
background: | background: #f3e5f5; | ||
border-color: | border-color: #9c27b0; | ||
} | } | ||
.roadmap-stat-idea .roadmap-stat-count { | .roadmap-stat-idea .roadmap-stat-count { | ||
color: | color: #9c27b0; | ||
} | } | ||
.roadmap-stat-cancelled { | .roadmap-stat-cancelled { | ||
background: | background: #fce8e8; | ||
border-color: | border-color: #c62828; | ||
} | } | ||
.roadmap-stat-cancelled .roadmap-stat-count { | .roadmap-stat-cancelled .roadmap-stat-count { | ||
color: | color: #c62828; | ||
} | } | ||
| Ligne 212 : | Ligne 117 : | ||
.roadmap-progress-wrap { | .roadmap-progress-wrap { | ||
padding: 0.8em 1.5em 1em; | padding: 0.8em 1.5em 1em; | ||
background: | background: #ffffff; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
.roadmap-progress-label { | .roadmap-progress-label { | ||
font-size: 0.82em; | font-size: 0.82em; | ||
color: | color: #72777d; | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
} | } | ||
.roadmap-progress-label strong { | .roadmap-progress-label strong { | ||
color: | color: #1a1a2e; | ||
} | } | ||
.roadmap-progress-bar { | .roadmap-progress-bar { | ||
height: 10px; | height: 10px; | ||
background: | background: #e0e0e0; | ||
border-radius: 99px; | border-radius: 99px; | ||
overflow: hidden; | overflow: hidden; | ||
| Ligne 236 : | Ligne 141 : | ||
height: 100%; | height: 100%; | ||
border-radius: 99px; | border-radius: 99px; | ||
background: | background: #3366cc; | ||
min-width: 2px; | |||
} | } | ||
/* --- Sections --- */ | /* --- Sections --- */ | ||
.roadmap-section { | .roadmap-section { | ||
border-top: 1px solid | border-top: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
| Ligne 250 : | Ligne 155 : | ||
.roadmap-section-title { | .roadmap-section-title { | ||
background: | background: #eaecf0; | ||
padding: 0.65em 1.5em; | padding: 0.65em 1.5em; | ||
font-weight: 700; | font-weight: 700; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
color: | color: #72777d; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0.06em; | letter-spacing: 0.06em; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
| Ligne 267 : | Ligne 171 : | ||
gap: 0.8em; | gap: 0.8em; | ||
padding: 0.7em 1.5em; | padding: 0.7em 1.5em; | ||
border-bottom: 1px solid | border-bottom: 1px solid rgba(0,0,0,0.05); | ||
} | } | ||
| Ligne 275 : | Ligne 178 : | ||
} | } | ||
.roadmap- | /* --- Bordure gauche par statut --- */ | ||
.roadmap-done { | |||
border-left: 3px solid #2d9d46; | |||
} | |||
.roadmap-inprogress { | |||
border-left: 3px solid #d4920b; | |||
} | |||
.roadmap-planned { | |||
border-left: 3px solid #3366cc; | |||
} | |||
.roadmap-idea { | |||
border-left: 3px solid #9c27b0; | |||
} | |||
.roadmap-cancelled { | |||
border-left: 3px solid #c62828; | |||
} | } | ||
| Ligne 294 : | Ligne 210 : | ||
flex-shrink: 0; | flex-shrink: 0; | ||
margin-top: 1px; | margin-top: 1px; | ||
background: #999; | |||
} | } | ||
.roadmap-badge-done { | |||
background: #2d9d46; | |||
.roadmap-badge-done | |||
background: | |||
} | } | ||
.roadmap-badge-inprogress | .roadmap-badge-inprogress { | ||
background: #d4920b; | |||
background: | |||
} | } | ||
.roadmap-badge-planned | .roadmap-badge-planned { | ||
background: #3366cc; | |||
background: | |||
} | } | ||
.roadmap-badge-idea | .roadmap-badge-idea { | ||
background: #9c27b0; | |||
background: | |||
} | } | ||
.roadmap-badge-cancelled | .roadmap-badge-cancelled { | ||
background: #c62828; | |||
background: | |||
} | } | ||
| Ligne 342 : | Ligne 236 : | ||
.roadmap-item-title { | .roadmap-item-title { | ||
font-weight: 600; | font-weight: 600; | ||
font-size: 0.92em; | font-size: 0.92em; | ||
color: | color: #1a1a2e; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
.roadmap-item-title a { | .roadmap-item-title a { | ||
color: | color: #3366cc; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| Ligne 360 : | Ligne 253 : | ||
.roadmap-cancelled .roadmap-item-title { | .roadmap-cancelled .roadmap-item-title { | ||
text-decoration: line-through; | text-decoration: line-through; | ||
color: | color: #999; | ||
} | } | ||
| Ligne 370 : | Ligne 263 : | ||
.roadmap-item-desc { | .roadmap-item-desc { | ||
font-size: 0.82em; | font-size: 0.82em; | ||
color: | color: #72777d; | ||
margin-top: 0.15em; | margin-top: 0.15em; | ||
line-height: 1.4; | line-height: 1.4; | ||
| Ligne 385 : | Ligne 278 : | ||
.roadmap-tag { | .roadmap-tag { | ||
display: inline-block; | display: inline-block; | ||
font-size: 0.68em; | font-size: 0.68em; | ||
font-weight: 600; | font-weight: 600; | ||
| Ligne 393 : | Ligne 285 : | ||
letter-spacing: 0.02em; | letter-spacing: 0.02em; | ||
line-height: 1.5; | line-height: 1.5; | ||
background: | background: #e0e0e0; | ||
color: | color: #555; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-gameplay { | ||
background: | background: #e0f2e9; | ||
color: | color: #1b6e33; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-technique { | ||
background: | background: #e0e8f5; | ||
color: | color: #2a4d8e; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-contenu { | ||
background: | background: #fef3e0; | ||
color: | color: #8a6200; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-interface { | ||
background: | background: #fde8e8; | ||
color: | color: #8e2a2a; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-event { | ||
background: | background: #f3e5f5; | ||
color: | color: #6a1b7a; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-wiki { | ||
background: | background: #e0f5f0; | ||
color: | color: #1a6e55; | ||
} | } | ||
.roadmap-tag | .roadmap-tag-discord { | ||
background: | background: #e8e0f5; | ||
color: | color: #3a2a7a; | ||
} | } | ||
| Ligne 429 : | Ligne 321 : | ||
.roadmap-date { | .roadmap-date { | ||
flex-shrink: 0; | flex-shrink: 0; | ||
font-size: 0.72em; | font-size: 0.72em; | ||
color: | color: #72777d; | ||
padding: 0.2em 0.6em; | padding: 0.2em 0.6em; | ||
background: | background: #eaecf0; | ||
border-radius: | border-radius: 6px; | ||
margin-top: 2px; | margin-top: 2px; | ||
white-space: nowrap; | white-space: nowrap; | ||
| Ligne 445 : | Ligne 336 : | ||
gap: 1em; | gap: 1em; | ||
padding: 0.8em 1.5em; | padding: 0.8em 1.5em; | ||
background: | background: #eaecf0; | ||
border-top: 1px solid | border-top: 1px solid rgba(0,0,0,0.08); | ||
font-size: 0.78em; | font-size: 0.78em; | ||
color: | color: #72777d; | ||
} | } | ||