« 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 — Design intégré au skin Citizen | ||
Utilise var() Citizen pour surfaces/textes (dark mode auto) | |||
Couleurs statuts en hex direct (pas de custom properties) | |||
============================================================ */ | ============================================================ */ | ||
| Ligne 11 : | Ligne 13 : | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid rgba(0,0,0,0.08); | border: 1px solid rgba(0,0,0,0.08); | ||
background: #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); | ||
} | } | ||
| Ligne 17 : | Ligne 19 : | ||
/* --- Header --- */ | /* --- Header --- */ | ||
.roadmap-header { | .roadmap-header { | ||
background: #eaecf0; | background: var(--color-surface-2, #eaecf0); | ||
padding: 1.4em 1.5em 1.2em; | padding: 1.4em 1.5em 1.2em; | ||
border-bottom: 1px solid rgba(0,0,0,0.08); | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
| Ligne 25 : | Ligne 27 : | ||
font-size: 1.4em; | font-size: 1.4em; | ||
font-weight: 700; | font-weight: 700; | ||
color: #1a1a2e; | color: var(--color-emphasized, #1a1a2e); | ||
margin: 0; | margin: 0; | ||
line-height: 1.3; | line-height: 1.3; | ||
| Ligne 32 : | Ligne 34 : | ||
.roadmap-subtitle { | .roadmap-subtitle { | ||
font-size: 0.85em; | font-size: 0.85em; | ||
color: #72777d; | color: var(--color-subtle, #72777d); | ||
margin-top: 0.3em; | margin-top: 0.3em; | ||
} | } | ||
| Ligne 42 : | Ligne 44 : | ||
gap: 0.6em; | gap: 0.6em; | ||
padding: 1em 1.5em; | padding: 1em 1.5em; | ||
background: #ffffff; | background: var(--color-surface-0, #ffffff); | ||
border-bottom: 1px solid rgba(0,0,0,0.08); | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
| Ligne 51 : | Ligne 53 : | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
min-width: | min-width: 65px; | ||
padding: 0. | padding: 0.5em 0.8em; | ||
border-radius: 8px; | border-radius: 8px; | ||
border: | border: 1px solid rgba(0,0,0,0.08); | ||
background: | transition: background 0.15s ease, transform 0.15s ease; | ||
} | |||
.roadmap-stat:hover { | |||
transform: translateY(-1px); | |||
} | } | ||
.roadmap-stat-count { | .roadmap-stat-count { | ||
font-size: 1. | font-size: 1.3em; | ||
font-weight: 700; | font-weight: 700; | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
.roadmap-stat-label { | .roadmap-stat-label { | ||
font-size: 0. | font-size: 0.7em; | ||
color: #72777d; | color: var(--color-subtle, #72777d); | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0. | letter-spacing: 0.03em; | ||
margin-top: 0. | margin-top: 0.2em; | ||
} | } | ||
/* --- | /* --- Couleurs par statut : stats --- */ | ||
.roadmap-stat-done { | .roadmap-stat-done { | ||
background: #e8f5e9; | background: #e8f5e9; | ||
border-color: # | border-color: #a5d6a7; | ||
} | } | ||
.roadmap-stat-done .roadmap-stat-count { | .roadmap-stat-done .roadmap-stat-count { | ||
color: # | color: #2e7d32; | ||
} | } | ||
.roadmap-stat-inprogress { | .roadmap-stat-inprogress { | ||
background: #fff8e1; | background: #fff8e1; | ||
border-color: # | border-color: #ffe082; | ||
} | } | ||
.roadmap-stat-inprogress .roadmap-stat-count { | .roadmap-stat-inprogress .roadmap-stat-count { | ||
color: # | color: #f57f17; | ||
} | } | ||
.roadmap-stat-planned { | .roadmap-stat-planned { | ||
background: #e3ecfa; | background: #e3ecfa; | ||
border-color: # | border-color: #90b4e8; | ||
} | } | ||
.roadmap-stat-planned .roadmap-stat-count { | .roadmap-stat-planned .roadmap-stat-count { | ||
color: # | color: #1a56a8; | ||
} | } | ||
.roadmap-stat-idea { | .roadmap-stat-idea { | ||
background: #f3e5f5; | background: #f3e5f5; | ||
border-color: # | border-color: #ce93d8; | ||
} | } | ||
.roadmap-stat-idea .roadmap-stat-count { | .roadmap-stat-idea .roadmap-stat-count { | ||
color: # | color: #7b1fa2; | ||
} | } | ||
.roadmap-stat-cancelled { | .roadmap-stat-cancelled { | ||
background: #fce8e8; | background: #fce8e8; | ||
border-color: # | border-color: #ef9a9a; | ||
} | } | ||
.roadmap-stat-cancelled .roadmap-stat-count { | .roadmap-stat-cancelled .roadmap-stat-count { | ||
| Ligne 117 : | Ligne 118 : | ||
.roadmap-progress-wrap { | .roadmap-progress-wrap { | ||
padding: 0.8em 1.5em 1em; | padding: 0.8em 1.5em 1em; | ||
background: #ffffff; | background: var(--color-surface-0, #ffffff); | ||
border-bottom: 1px solid rgba(0,0,0,0.08); | border-bottom: 1px solid rgba(0,0,0,0.08); | ||
} | } | ||
| Ligne 123 : | Ligne 124 : | ||
.roadmap-progress-label { | .roadmap-progress-label { | ||
font-size: 0.82em; | font-size: 0.82em; | ||
color: #72777d; | color: var(--color-subtle, #72777d); | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
} | } | ||
.roadmap-progress-bar { | .roadmap-progress-bar { | ||
width: 100%; | |||
height: 10px; | height: 10px; | ||
background: # | background: var(--color-surface-3, #ddd); | ||
border-radius: 99px; | border-radius: 99px; | ||
overflow: hidden; | overflow: hidden; | ||
| Ligne 140 : | Ligne 138 : | ||
.roadmap-progress-fill { | .roadmap-progress-fill { | ||
height: 100%; | height: 100%; | ||
background: #3366cc; | |||
border-radius: 99px; | border-radius: 99px; | ||
transition: width 0.6s ease; | |||
} | } | ||
/* --- Sections --- */ | /* --- Sections --- */ | ||
.roadmap-section { | .roadmap-section { | ||
border-top: 1px solid rgba(0,0,0,0. | border-top: 1px solid rgba(0,0,0,0.06); | ||
} | } | ||
.roadmap-section-title { | .roadmap-section-title { | ||
font-size: 0.82em; | |||
font-weight: 700; | font-weight: 700; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0.06em; | letter-spacing: 0.06em; | ||
color: var(--color-subtle, #72777d); | |||
padding: 0.8em 1.5em 0.4em; | |||
background: var(--color-surface-2, #eaecf0); | |||
} | } | ||
| Ligne 169 : | Ligne 162 : | ||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: 0. | gap: 0.7em; | ||
padding: 0.7em 1.5em; | padding: 0.7em 1.5em; | ||
border-bottom: 1px solid rgba(0,0,0,0. | border-bottom: 1px solid rgba(0,0,0,0.04); | ||
transition: background 0.12s ease; | |||
} | } | ||
.roadmap-item: | .roadmap-item:hover { | ||
background: var(--color-surface-2, rgba(0,0,0,0.02)); | |||
} | } | ||
/* --- Bordure gauche par statut --- */ | /* --- Bordure gauche par statut --- */ | ||
.roadmap-done { | .roadmap-item.roadmap-done { | ||
border-left: 3px solid # | border-left: 3px solid #2e7d32; | ||
} | } | ||
.roadmap-inprogress { | .roadmap-item.roadmap-inprogress { | ||
border-left: 3px solid # | border-left: 3px solid #f57f17; | ||
} | } | ||
.roadmap-planned { | .roadmap-item.roadmap-planned { | ||
border-left: 3px solid # | border-left: 3px solid #1a56a8; | ||
} | } | ||
.roadmap-idea { | .roadmap-item.roadmap-idea { | ||
border-left: 3px solid # | border-left: 3px solid #7b1fa2; | ||
} | } | ||
.roadmap-cancelled { | .roadmap-item.roadmap-cancelled { | ||
border-left: 3px solid #c62828; | border-left: 3px solid #c62828; | ||
} | } | ||
.roadmap-item-content { | .roadmap-item-content { | ||
flex: 1; | flex: 1; | ||
| Ligne 237 : | Ligne 196 : | ||
.roadmap-item-title { | .roadmap-item-title { | ||
font-weight: 600; | font-weight: 600; | ||
color: var(--color-emphasized, #1a1a2e); | |||
font-size: 0.92em; | font-size: 0.92em; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | } | ||
.roadmap-item-title a { | .roadmap-item-title a { | ||
color: #3366cc; | color: var(--color-link, #3366cc); | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| Ligne 251 : | Ligne 210 : | ||
} | } | ||
.roadmap-item-desc { | |||
font-size: 0.82em; | |||
color: # | color: var(--color-subtle, #72777d); | ||
margin-top: 0.15em; | |||
line-height: 1.45; | |||
} | } | ||
.roadmap- | /* --- Badges --- */ | ||
.roadmap-badge { | |||
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- | .roadmap-badge-done { | ||
background: #2e7d32; | |||
color: # | color: #ffffff; | ||
} | |||
.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: | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 0.3em; | gap: 0.3em; | ||
| Ligne 277 : | Ligne 262 : | ||
.roadmap-tag { | .roadmap-tag { | ||
font-size: 0.7em; | |||
font-size: 0. | |||
font-weight: 600; | font-weight: 600; | ||
padding: 0.15em 0.55em; | padding: 0.15em 0.55em; | ||
border-radius: 99px; | border-radius: 99px; | ||
white-space: nowrap; | |||
background: var(--color-surface-3, #ddd); | |||
color: var(--color-subtle, #555); | |||
color: #555; | |||
} | } | ||
| Ligne 298 : | Ligne 280 : | ||
} | } | ||
.roadmap-tag-contenu { | .roadmap-tag-contenu { | ||
background: # | background: #fdf0e0; | ||
color: # | color: #7a5220; | ||
} | } | ||
.roadmap-tag-interface { | .roadmap-tag-interface { | ||
background: # | background: #fce8e8; | ||
color: #8e2a2a; | color: #8e2a2a; | ||
} | } | ||
.roadmap-tag-event { | .roadmap-tag-event { | ||
background: # | background: #f0e0f5; | ||
color: # | color: #5e2a7a; | ||
} | } | ||
.roadmap-tag-wiki { | .roadmap-tag-wiki { | ||
| Ligne 322 : | Ligne 304 : | ||
flex-shrink: 0; | flex-shrink: 0; | ||
font-size: 0.72em; | font-size: 0.72em; | ||
color: #72777d; | color: var(--color-subtle, #72777d); | ||
padding: 0.2em 0.6em; | padding: 0.2em 0.6em; | ||
background: #eaecf0; | background: var(--color-surface-2, #eaecf0); | ||
border-radius: 6px; | border-radius: 6px; | ||
margin-top: 2px; | margin-top: 2px; | ||
| Ligne 336 : | Ligne 318 : | ||
gap: 1em; | gap: 1em; | ||
padding: 0.8em 1.5em; | padding: 0.8em 1.5em; | ||
background: #eaecf0; | background: var(--color-surface-2, #eaecf0); | ||
border-top: 1px solid 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: #72777d; | color: var(--color-subtle, #72777d); | ||
} | } | ||