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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* Conteneur : en ligne, responsive */
+/* =========================
+   MiniCardv2 — CSS complet
+   - Pleine largeur
+   - 1 ligne
+   - Les tuiles s’adaptent au nombre (1fr)
+   - Scroll horizontal si ça ne rentre pas (responsive)
+   ========================= */
 .minicardv2-container{
-   display:flex;
+   display:grid;
-   align-items:center;
+   grid-auto-flow:column;
+  grid-auto-columns:1fr;
    gap:.6rem;
+  width:100%;
    padding:.4rem 0;
-  /* OPTION A (recommandée) : 1 seule ligne + scroll horizontal si trop long */
-  flex-wrap:nowrap;
    overflow-x:auto;
+   overflow-y:hidden;
-   /* OPTION B (alternative) : autoriser le retour à la ligne sur petits écrans */
+   box-sizing:border-box;
-  /* flex-wrap:wrap; */
-   /* overflow-x:visible; */
 }
-/* Important : certains skins mettent les liens externes en block/100%,
+/* Tuiles : liens externes MediaWiki */
-   on force le comportement "tuile" */
 .minicardv2-container a.external{
-   display:inline-flex !important;
+   display:flex !important;
    align-items:center;
+  justify-content:center;
    gap:.5rem;
-   width:auto !important;
+   width:100% !important;
-   max-width:100%;
+   min-width:0;
    padding:.55rem .8rem;
@@ Ligne 53 : / Ligne 59 : @@
 }
-/* Optionnel : enlever l’icône "lien externe" ajoutée par MediaWiki (la petite flèche) */
+/* Masquer l’icône "lien externe" (petite flèche) */
 .minicardv2-container a.external::after{
    display:none !important;
 }