« Modèle:Règle/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
mAucun résumé des modifications |
||
| (Une version intermédiaire par le même utilisateur non affichée) | |||
| Ligne 1 : | Ligne 1 : | ||
/* =================================================== | /* =================================================== | ||
Modèle: | Modèle:Règle — Styles des règles hiérarchiques | ||
Niveaux : 1 (section) · 2 (sous-section) · 3 (article) | Niveaux : 1 (section) · 2 (sous-section) · 3 (article) | ||
=================================================== */ | =================================================== */ | ||
/* --- Conteneur de la règle --- */ | |||
.regle-item { | .regle-item { | ||
display: flex; | |||
gap: 0.75em; | |||
align-items: baseline; | |||
margin-block: 0.5em; | |||
line-height: 1.6; | |||
} | } | ||
/* --- Niveau 1 : Section principale --- */ | /* --- Niveau 1 : Section principale --- */ | ||
.regle-niveau-1 { | .regle-niveau-1 { | ||
margin-block-start: 1.5em; | |||
padding-block: 0.4em; | |||
border-block-start: 2px solid var(--color-progressive, #36c); | |||
} | } | ||
.regle-niveau-1 .regle- | .regle-niveau-1 .regle-lien { | ||
font-size: 1.15em; | |||
} | } | ||
.regle-niveau-1 .regle-texte { | .regle-niveau-1 .regle-texte { | ||
font-size: 1em; | |||
color: var(--color-emphasized, inherit); | |||
} | } | ||
/* --- Niveau 2 : Sous-section --- */ | /* --- Niveau 2 : Sous-section --- */ | ||
.regle-niveau-2 { | .regle-niveau-2 { | ||
padding-inline-start: 1.5em; | |||
} | } | ||
.regle-niveau-2 .regle- | .regle-niveau-2 .regle-lien { | ||
font-size: 1em; | |||
} | } | ||
/* --- Niveau 3 : Article --- */ | /* --- Niveau 3 : Article --- */ | ||
.regle-niveau-3 { | .regle-niveau-3 { | ||
padding-inline-start: 3em; | |||
} | } | ||
.regle-niveau-3 .regle- | .regle-niveau-3 .regle-lien { | ||
font-size: 0.9em; | |||
font-weight: 600; | |||
opacity: 0.85; | |||
} | } | ||
.regle-niveau-3 .regle-texte { | .regle-niveau-3 .regle-texte { | ||
font-size: 0.95em; | |||
color: var(--color-subtle, inherit); | |||
} | } | ||
/* | /* --- Lien numéro cliquable --- */ | ||
.regle-lien { | .regle-lien { | ||
flex-shrink: 0; | |||
font-weight: 700; | |||
font-variant-numeric: tabular-nums; | |||
color: var(--color-progressive, #36c); | |||
text-decoration: none; | |||
cursor: pointer; | |||
user-select: none; | |||
} | } | ||
.regle-lien:hover { | .regle-lien:hover { | ||
text-decoration: underline; | |||
} | } | ||
/* Toast de confirmation */ | /* --- Toast de confirmation --- */ | ||
.regle-toast { | .regle-toast { | ||
position: fixed; | |||
bottom: 2rem; | |||
left: 50%; | |||
transform: translateX(-50%) translateY(1rem); | |||
background: #2c2c2c; | |||
color: #f0f0f0; | |||
padding: 0.5rem 1.2rem; | |||
border-radius: 2rem; | |||
font-size: 0.9rem; | |||
opacity: 0; | |||
pointer-events: none; | |||
transition: opacity 0.3s ease, transform 0.3s ease; | |||
/* Citizen peut avoir un z-index très élevé sur le header */ | |||
z-index: 200000; | |||
white-space: nowrap; | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); | |||
} | } | ||
.regle-toast.regle-toast--visible { | .regle-toast.regle-toast--visible { | ||
opacity: 1; | |||
transform: translateX(-50%) translateY(0); | |||
} | } | ||