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

Navigation interactive dans l’historique

← Modification précédente

@@ Ligne 1 : / Ligne 1 : @@
-/* ===== RECENT ARTICLES BUTTONS (Citizen Theme Adaptation) ===== */
+/* === CONTENEUR PRINCIPAL === */
-/* Conteneur principal - Sans fond ni bordure */
 .dpl-boutons-articles {
      display: flex;
      flex-wrap: wrap;
-     gap: 0.75rem;
+     gap: 1rem; /* ← Espace entre les boutons (16px) */
      margin: 1.5rem 0;
      padding: 0;
-     background-color: transparent;
+     background: none;
      border: none;
-    border-radius: 0;
      justify-content: flex-start;
-    width: 100%;
 }
-/* Style des boutons (compatible Citizen) */
+/* === RESET LISTE === */
-.dpl-bouton-article {
+.dpl-boutons-articles ul {
-     display: inline-block;
+    list-style-type: none;
-     padding: 0.5rem 1rem;
+    padding: 0;
-     border: 1px solid var(--border-color-base);
+    margin: 0;
-     border-radius: 2px;
+    display: flex;
-     background-color: var(--color-surface-1);
+    flex-wrap: wrap;
+    gap: 1rem; /* ← Espacement entre items (redondant avec parent mais sécurise) */
+}
+.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);
-     text-decoration: none !important;
+     margin: 0 0 1rem 0;
-    font-size: 0.9rem;
+     padding: 0;
-    transition:
-        background-color 0.2s ease,
-        border-color 0.2s ease,
-        color 0.2s ease;
-     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 200px;
 }
-/* Effet de survol */
+/* === BOUTONS === */
-.dpl-bouton-article:hover {
+.dpl-bouton-article {
-     background-color: var(--color-surface-3);
+    display: inline-flex;
-     border-color: var(--color-progressive);
+    align-items: center;
-     color: var(--color-progressive);
+    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-weight: 500;
+     text-decoration: none;
+    color: var(--color-base);
+     background-color: var(--color-surface-2);
+     border: 1px solid var(--border-color-base);
+    border-radius: 4px;
      cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
-/* Bouton actif (page courante) */
+/* === HOVER STATE === */
-.dpl-bouton-article.active {
+.dpl-bouton-article:hover {
      background-color: var(--color-progressive);
+    color: #fff !important;
      border-color: var(--color-progressive);
-     color: white;
+     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 */
 }
-/* Date de modification (style subtil) */
+/* === LIENS DANS LES BOUTONS === */
-.dpl-bouton-article .date {
+.dpl-bouton-article a {
+    color: inherit;
+    text-decoration: none !important;
      display: block;
-     font-size: 0.75rem;
+     width: 100%;
-     color: var(--color-subtle);
+}
-     margin-top: 0.25rem;
+.dpl-bouton-article:hover a,
+.dpl-bouton-article:hover small {
+     color: #fff !important;
+     text-decoration: none !important;
 }
-/* Adaptation pour les cartes (si variante "carte" utilisée) */
+/* === FOCUS (Accessibilité) === */
-.dpl-bouton-article.carte {
+.dpl-bouton-article:focus,
-     min-width: 120px;
+.dpl-bouton-article a:focus {
-     text-align: center;
+     outline: 2px solid var(--color-progressive);
-     padding: 0.75rem;
+     outline-offset: 2px;
-     border-radius: 4px;
+}
-    box-shadow: var(--box-shadow-card);
+/* === 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;
+    }
 }
-/* Responsive: Empiler les boutons sur mobile */
+@media (max-width: 480px) {
-@media (max-width: 720px) {
      .dpl-boutons-articles {
-         justify-content: center;
+         gap: 0.5rem;
      }
      .dpl-bouton-article {
-         max-width: 150px;
+         padding: 0.4rem 0.8rem;
-         font-size: 0.85rem;
+         margin: 0.15rem;
      }
 }