« Modèle:Article détaillé/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
charte graphique |
||
| Ligne 1 : | Ligne 1 : | ||
/* ================================ | /* ================================ | ||
ARTICLE DÉTAILLÉ - Citizen Skin | ARTICLE DÉTAILLÉ - Citizen Skin | ||
Palette : tokens Citizen natifs | |||
Dark mode : automatique via variables | |||
================================ */ | ================================ */ | ||
.article-detaille { | .article-detaille { | ||
display: flex; | |||
align-items: center; | |||
gap: var(--space-sm); | |||
padding: var(--space-xs) var(--space-sm); | |||
margin: var(--space-sm) 0; | |||
background-color: var(--color-surface-2); | |||
border-left: 3px solid var(--color-progressive); | |||
border-radius: var(--border-radius-base); | |||
font-size: 0.95em; | |||
line-height: 1.5; | |||
transition: background-color 0.2s ease, box-shadow 0.2s ease; | |||
} | } | ||
.article-detaille:hover { | |||
background-color: var(--color-surface-3); | |||
} | |||
/* --- Icône --- */ | |||
.article-detaille-icone { | .article-detaille-icone { | ||
font-size: 1.1em; | |||
color: var(--color-progressive); | |||
flex-shrink: 0; | |||
line-height: 1; | |||
opacity: var(--opacity-icon-base); | |||
} | } | ||
/* --- Contenu --- */ | |||
.article-detaille-contenu { | .article-detaille-contenu { | ||
flex: 1; | |||
color: var(--color-base); | |||
} | } | ||
.article-detaille-contenu a { | .article-detaille-contenu a { | ||
color: var(--color-progressive); | |||
font-weight: var(--font-weight-medium); | |||
text-decoration: none; | |||
} | } | ||
.article-detaille-contenu a:hover { | .article-detaille-contenu a:hover { | ||
color: var(--color-progressive--hover); | |||
text-decoration: underline; | |||
} | } | ||
/* Responsive */ | /* --- Responsive --- */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.article-detaille { | |||
padding: var(--space-xs); | |||
gap: var(--space-xs); | |||
} | |||
.article-detaille-icone { | |||
font-size: 1em; | |||
} | |||
} | } | ||