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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

Version du 5 février 2026 à 08:09

/* Bandeau */
.sb-footer{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  padding:18px;
  border-radius:12px;
  background:#343a40;
}

/* Colonnes */
.sb-col{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sb-title{
  color:#fff;
  font-weight:700;
  font-size:1.15rem;
}

/* Ligne */
.sb-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}


/* ===== Même logique visuelle que ButtonLink ===== */

.sb-icon,
.sb-support{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:all .3s cubic-bezier(.4,0,.2,1);

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.sb-icon:hover,
.sb-support:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}


/* tailles */
.sb-icon{
  width:58px;
  height:58px;
}

.sb-support{
  height:58px;
  padding:0 14px;
  gap:10px;
}


/* lien généré par MediaWiki */
.sb-footer a{
  color:#fff !important;
  text-decoration:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:100%;
}

.sb-footer a.external::after{
  display:none !important;
}

@@ Ligne 1 : / Ligne 1 : @@
-/* Conteneur bandeau */
+/* Bandeau */
 .sb-footer{
-   width: 100%;
+   width:100%;
-  box-sizing: border-box;
+   display:flex;
+   flex-wrap:wrap;
-   display: flex;
+   gap:20px;
-   flex-wrap: wrap;
+   padding:18px;
-   gap: 18px;
+   border-radius:12px;
+   background:#343a40;
-   padding: 18px;
-   border-radius: 12px;
-  overflow: hidden;
-   background: #343a40;
-  box-shadow: 0 2px 8px rgba(0,0,0,.10);
 }
+/* Colonnes */
 .sb-col{
-   flex: 1 1 320px;
+   flex:1 1 320px;
-  min-width: 280px;
+   display:flex;
+   flex-direction:column;
-   display: flex;
+   gap:12px;
-   flex-direction: column;
-   gap: 10px;
 }
 .sb-title{
-   color: #fff;
+   color:#fff;
-   font-weight: 700;
+   font-weight:700;
-   font-size: 1.15rem;
+   font-size:1.15rem;
-  line-height: 1.2;
 }
+/* Ligne */
 .sb-row{
-   display: flex;
+   display:flex;
-   flex-wrap: wrap;
+   flex-wrap:wrap;
-   gap: 10px;
+   gap:12px;
-  align-items: center;
 }
-/* IMPORTANT : on stylise l'ancre générée par MediaWiki (le [URL LABEL]) */
-.sb-row a.external{
-  text-decoration: none !important;
-  color: inherit !important;
-  display: inline-flex; /* pour que le lien épouse le LABEL */
-}
-/* Masquer l'icône de lien externe (comme ButtonLink) */
+/* ===== Même logique visuelle que ButtonLink ===== */
-.sb-row a.external::after{
-  display: none !important;
-}
-/* Boutons - look ButtonLink (radius, shadow, hover, transitions) */
 .sb-icon,
 .sb-support{
-   border-radius: 12px;
+   border-radius:12px;
-   overflow: hidden;
+   overflow:hidden;
+  box-shadow:0 2px 8px rgba(0,0,0,.1);
+  transition:all .3s cubic-bezier(.4,0,.2,1);
-   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+   display:flex;
-   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
+  align-items:center;
+   justify-content:center;
-   position: relative;
+   text-align:center;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* fallback si aucune classe button-link--xxx */
-  background: #6c757d;
 }
 .sb-icon:hover,
 .sb-support:hover{
-   transform: translateY(-2px);
+   transform:translateY(-2px);
-   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
+   box-shadow:0 4px 16px rgba(0,0,0,.2);
 }
-/* Réseaux : 58x58 */
+/* tailles */
 .sb-icon{
-   width: 58px;
+   width:58px;
-   height: 58px;
+   height:58px;
 }
-/* Soutien : hauteur 58, largeur auto */
 .sb-support{
-   height: 58px;
+   height:58px;
-   padding: 0 14px;
+   padding:0 14px;
-   gap: 10px;
+   gap:10px;
-  justify-content: flex-start;
-  min-width: 220px; /* ajuste si tu veux plus compact */
-  box-sizing: border-box;
 }
-.sb-support__text{
-  color: #fff;
-  font-weight: 700;
-  white-space: nowrap;
-}
-/* Images */
+/* lien généré par MediaWiki */
-.sb-icon img{
+.sb-footer a{
-   width: 28px !important;
+   color:#fff !important;
-   height: 28px !important;
+   text-decoration:none !important;
-   max-width: 100%;
+   display:flex;
-   max-height: 100%;
+  align-items:center;
-   object-fit: contain;
+   justify-content:center;
-   filter: drop-shadow(0 2px 4px rgba(0,0,0,.10));
+   gap:10px;
-   display: block;
+   width:100%;
+   height:100%;
 }
-.sb-support__icon img{
+.sb-footer a.external::after{
-   width: 22px !important;
+   display:none !important;
-  height: 22px !important;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,.10));
-  display: block;
 }