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

Navigation interactive dans l’historique

Dernière version du 4 février 2026 à 21:10

.ButtonGrid-container{
  display:grid;
  gap:.9rem;

  width:100%;
  padding:.4rem 0;
  box-sizing:border-box;

  /* Colonnes harmonisées, responsive */
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  align-items:stretch;
}

/* Chaque bouton remplit sa cellule */
.ButtonGrid-container > .button-link{
  width:100%;
}

/* Le lien interne remplit la hauteur du bouton */
.ButtonGrid-container > .button-link .button-link__link{
  height:100%;
}

@@ Ligne 1 : / Ligne 1 : @@
-/* Conteneur : 1 ligne, pleine largeur, gap constant */
+.ButtonGrid-container{
-.minicardv2-container{
+   display:grid;
-   display:flex;
+   gap:.9rem;
-  align-items:stretch;
-   gap:.6rem;
    width:100%;
@@ Ligne 9 : / Ligne 7 : @@
    box-sizing:border-box;
-   flex-wrap:nowrap;        /* toujours sur 1 ligne */
+   /* Colonnes harmonisées, responsive */
-   overflow-x:auto;         /* responsive: scroll si ça ne rentre pas */
+   grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
-   overflow-y:hidden;
+   align-items:stretch;
 }
-/* MediaWiki injecte parfois <p> et <br> avec des retours ligne dans le paramètre */
+/* Chaque bouton remplit sa cellule */
-.minicardv2-container p{
+.ButtonGrid-container > .button-link{
-  margin:0;
+   width:100%;
-  display:contents;        /* pour ne pas créer un “bloc” intermédiaire */
-}
-.minicardv2-container br{
-  display:none;
-}
-/* Tuiles : elles se partagent la largeur disponible */
-.minicardv2-container a{
-   display:flex;
-  align-items:center;
-  justify-content:center;
-  gap:.5rem;
-  flex:1 1 0;              /* clé: 5 => plus large, 7 => plus étroit */
-  min-width:120px;         /* seuil avant scroll (ajuste si tu veux) */
-  padding:.55rem .8rem;
-  border-radius:12px;
-  font-weight:600;
-  text-decoration:none;
-  white-space:nowrap;
-  background-color:#111;
-  color:#fff;
-  /* neutralise parfois l’icône externe via background-image */
-  background-image:none;
 }
-/* Icône */
+/* Le lien interne remplit la hauteur du bouton */
-.minicardv2-container a img{
+.ButtonGrid-container > .button-link .button-link__link{
-  width:18px;
+   height:100%;
-   height:18px;
 }