« 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 : @@
-/* =========================
+.ButtonGrid-container{
-   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:grid;
-  grid-auto-flow:column;
+   gap:.9rem;
-  grid-auto-columns:1fr;
-   gap:.6rem;
    width:100%;
    padding:.4rem 0;
-  overflow-x:auto;
-  overflow-y:hidden;
    box-sizing:border-box;
-}
-/* Tuiles : liens externes MediaWiki */
+  /* Colonnes harmonisées, responsive */
-.minicardv2-container a.external{
+   grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
-   display:flex !important;
+   align-items:stretch;
-  align-items:center;
-  justify-content:center;
-  gap:.5rem;
-  width:100% !important;
-  min-width:0;
-   padding:.55rem .8rem;
-  border-radius:12px;
-  font-weight:600;
-  text-decoration:none;
-  white-space:nowrap;
-  background:#111;
-  color:#fff;
-  transition:transform .08s ease, filter .08s ease;
 }
-.minicardv2-container a.external:hover{
+/* Chaque bouton remplit sa cellule */
-  transform:translateY(-1px);
+.ButtonGrid-container > .button-link{
-  filter:brightness(1.05);
+   width:100%;
-}
-.minicardv2-container a.external:active{
-  transform:translateY(0);
-}
-/* Icône */
-.minicardv2-container a.external img{
-   width:18px;
-  height:18px;
 }
-/* Masquer l’icône "lien externe" (petite flèche) */
+/* Le lien interne remplit la hauteur du bouton */
-.minicardv2-container a.external::after{
+.ButtonGrid-container > .button-link .button-link__link{
-   display:none !important;
+   height:100%;
 }