« Modèle:RecentArticlesButtons/styles.css » : différence entre les versions
De Nefald
Autres actions
mAucun résumé des modifications |
mAucun résumé des modifications |
||
| Ligne 3 : | Ligne 3 : | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 1rem; /* ← Espace entre les boutons (16px) */ | ||
margin: 1.5rem 0; | margin: 1.5rem 0; | ||
padding: 0; | padding: 0; | ||
| Ligne 9 : | Ligne 9 : | ||
border: none; | border: none; | ||
justify-content: flex-start; | justify-content: flex-start; | ||
} | |||
/* === RESET LISTE === */ | |||
.dpl-boutons-articles ul { | |||
list-style-type: none; | |||
padding: 0; | |||
margin: 0; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 1rem; /* ← Espacement entre items (redondant avec parent mais sécurise) */ | |||
} | |||
.dpl-boutons-articles li { | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
| Ligne 15 : | Ligne 30 : | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
padding: 0. | padding: 0.6rem 1.2rem; /* ← Augmenté pour plus de présence */ | ||
margin: 0.25rem; /* ← Marge supplémentaire pour bien séparer */ | |||
font-size: 0.875rem; | font-size: 0.875rem; | ||
font-weight: 500; | font-weight: 500; | ||
| Ligne 24 : | Ligne 40 : | ||
border-radius: 4px; | border-radius: 4px; | ||
cursor: pointer; | cursor: pointer; | ||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | ||
} | } | ||
/* | /* === HOVER STATE === */ | ||
.dpl-bouton-article:hover { | .dpl-bouton-article:hover { | ||
background-color: var(--color-progressive); | background-color: var(--color-progressive); | ||
color: #fff !important; | color: #fff !important; | ||
border-color: var(--color-progressive); | border-color: var(--color-progressive); | ||
text-decoration: none !important; | text-decoration: none !important; | ||
box-shadow: | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | ||
transform: translateY(- | transform: translateY(-2px); /* ← Légère élévation au survol */ | ||
} | |||
/* === LIENS DANS LES BOUTONS === */ | |||
.dpl-bouton-article a { | |||
color: inherit; | |||
text-decoration: none !important; | |||
display: block; | |||
width: 100%; | |||
} | } | ||
.dpl-bouton-article:hover a, | |||
.dpl-bouton-article:hover | .dpl-bouton-article:hover small { | ||
color: #fff !important; | color: #fff !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
/* | /* === FOCUS (Accessibilité) === */ | ||
.dpl-bouton-article:focus { | .dpl-bouton-article:focus, | ||
.dpl-bouton-article a:focus { | |||
outline: 2px solid var(--color-progressive); | outline: 2px solid var(--color-progressive); | ||
outline-offset: 2px; | outline-offset: 2px; | ||
} | } | ||
| Ligne 64 : | Ligne 77 : | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.dpl-boutons-articles { | .dpl-boutons-articles { | ||
gap: 0. | gap: 0.75rem; /* ← Espacement réduit sur mobile */ | ||
} | } | ||
.dpl-bouton-article { | .dpl-bouton-article { | ||
padding: 0. | padding: 0.5rem 1rem; | ||
font-size: 0. | margin: 0.2rem; | ||
font-size: 0.8125rem; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.dpl-boutons-articles { | |||
gap: 0.5rem; | |||
} | } | ||
.dpl-bouton-article | .dpl-bouton-article { | ||
padding: 0.4rem 0.8rem; | |||
margin: 0.15rem; | |||
} | } | ||
} | } | ||