« Modèle:Article détaillé/styles.css » : différence entre les versions
De Nefald
Autres actions
mAucun résumé des modifications |
charte graphique |
||
| (5 versions intermédiaires par le même utilisateur non affichées) | |||
| 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 { | .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- | .article-detaille-contenu a { | ||
color: var(--color-progressive); | |||
font-weight: var(--font-weight-medium); | |||
text-decoration: none; | |||
} | } | ||
.article-detaille- | .article-detaille-contenu a:hover { | ||
color: var(--color-progressive--hover); | |||
text-decoration: underline; | |||
} | } | ||
/* --- Responsive --- */ | |||
.article-detaille | @media (max-width: 768px) { | ||
.article-detaille { | |||
padding: var(--space-xs); | |||
gap: var(--space-xs); | |||
} | } | ||
.article-detaille-icone { | |||
font-size: 1em; | |||
} | } | ||
} | } | ||
Dernière version du 3 mars 2026 à 13:59
/* ================================
ARTICLE DÉTAILLÉ - Citizen Skin
Palette : tokens Citizen natifs
Dark mode : automatique via variables
================================ */
.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 {
font-size: 1.1em;
color: var(--color-progressive);
flex-shrink: 0;
line-height: 1;
opacity: var(--opacity-icon-base);
}
/* --- Contenu --- */
.article-detaille-contenu {
flex: 1;
color: var(--color-base);
}
.article-detaille-contenu a {
color: var(--color-progressive);
font-weight: var(--font-weight-medium);
text-decoration: none;
}
.article-detaille-contenu a:hover {
color: var(--color-progressive--hover);
text-decoration: underline;
}
/* --- Responsive --- */
@media (max-width: 768px) {
.article-detaille {
padding: var(--space-xs);
gap: var(--space-xs);
}
.article-detaille-icone {
font-size: 1em;
}
}