« Modèle:RecentArticlesButtons/styles.css » : différence entre les versions

Navigation interactive dans l’historique

@@ Ligne 1 : / Ligne 1 : @@
-/* Recent Articles Buttons - Style Sheet */
+/* === CONTENEUR PRINCIPAL === */
-/* Container */
+.dpl-boutons-articles {
-.ext-recent-articles {
      display: flex;
      flex-wrap: wrap;
-     gap: 0.6em;
+     gap: 1rem; /* ← Espace entre les boutons (16px) */
-     margin: 1.5em 0;
+     margin: 1.5rem 0;
-     padding: 0.8em;
+     padding: 0;
-     background-color: #f8f9fa;
+     background: none;
-     border-radius: 8px;
+     border: none;
      justify-content: flex-start;
 }
-.ext-recent-articles ul {
+/* === RESET LISTE === */
-     list-style: none;
+.dpl-boutons-articles ul {
+     list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
-     gap: 0.6em;
+     gap: 1rem; /* ← Espacement entre items (redondant avec parent mais sécurise) */
-     width: 100%;
+}
+.dpl-boutons-articles li {
+    margin: 0;
+    padding: 0;
+}
+/* === SÉPARATEUR === */
+.dpl-separateur {
+    border: none;
+    height: 2px;
+    background-color: var(--border-color-base);
+     margin: 0 0 1.5rem 0;
+}
+/* === TITRE === */
+.dpl-titre-recents {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--color-base);
+    margin: 0 0 1rem 0;
+    padding: 0;
 }
-/* Button */
+/* === BOUTONS === */
-.ext-recent-articles__button {
+.dpl-bouton-article {
-     display: block;
+     display: inline-flex;
-     background-color: #ffffff;
+     align-items: center;
-     color: #202122;
+     padding: 0.6rem 1.2rem; /* ← Augmenté pour plus de présence */
-     padding: 0.5em 1em;
+     margin: 0.25rem; /* ← Marge supplémentaire pour bien séparer */
-     border-radius: 6px;
+     font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
-     transition: all 0.2s ease;
+     color: var(--color-base);
-     border: 1px solid #a2a9b1;
+    background-color: var(--color-surface-2);
-     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
+     border: 1px solid var(--border-color-base);
-     min-width: 140px;
+     border-radius: 4px;
-     text-align: center;
+    cursor: pointer;
-     line-height: 1.4;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* === HOVER STATE === */
+.dpl-bouton-article:hover {
+    background-color: var(--color-progressive);
+     color: #fff !important;
+    border-color: var(--color-progressive);
+     text-decoration: none !important;
+     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px); /* ← Légère élévation au survol */
 }
-.ext-recent-articles__button:hover {
+/* === LIENS DANS LES BOUTONS === */
-     background-color: #36c;
+.dpl-bouton-article a {
-     color: white;
+     color: inherit;
-    transform: translateY(-2px);
+     text-decoration: none !important;
-     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+     display: block;
-     border-color: #36c;
+     width: 100%;
 }
-.ext-recent-articles__button:active {
+.dpl-bouton-article:hover a,
-     transform: translateY(0);
+.dpl-bouton-article:hover small {
+     color: #fff !important;
+    text-decoration: none !important;
+}
+/* === FOCUS (Accessibilité) === */
+.dpl-bouton-article:focus,
+.dpl-bouton-article a:focus {
+    outline: 2px solid var(--color-progressive);
+    outline-offset: 2px;
+}
+/* === RESPONSIVE === */
+@media (max-width: 768px) {
+    .dpl-boutons-articles {
+        gap: 0.75rem; /* ← Espacement réduit sur mobile */
+    }
+    .dpl-bouton-article {
+        padding: 0.5rem 1rem;
+        margin: 0.2rem;
+        font-size: 0.8125rem;
+    }
 }
-/* Mobile */
+@media (max-width: 480px) {
-@media (max-width: 600px) {
+     .dpl-boutons-articles {
-     .ext-recent-articles {
+         gap: 0.5rem;
-         justify-content: center;
      }
-     .ext-recent-articles__button {
-         width: 100%;
+     .dpl-bouton-article {
-         max-width: 220px;
+         padding: 0.4rem 0.8rem;
+         margin: 0.15rem;
      }
 }