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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
+/* Bandeau : une seule ligne (desktop), fond transparent */
 .sb-footer{
    width: 100%;
@@ Ligne 4 : / Ligne 5 : @@
    display: flex;
-   flex-wrap: wrap;
+   align-items: center;
-   gap: 18px;
+   gap: 14px;
-   padding: 18px;
+   padding: 14px 16px;
    border-radius: 12px;
-  overflow: hidden;
-  background: #343a40;
-  box-shadow: 0 2px 8px rgba(0,0,0,.12);
-}
-.sb-col{
+   background: transparent;      /* <-- plus de fond gris */
-   flex: 1 1 320px;
+   box-shadow: none;             /* optionnel, tu peux remettre une ombre si tu veux */
-  min-width: 280px;
+   overflow: visible;
-  display: flex;
-   flex-direction: column;
-   gap: 10px;
 }
+/* Titres inline */
 .sb-title{
    color: #fff;
    font-weight: 700;
-   font-size: 1.15rem;
+   font-size: 1.05rem;
-   line-height: 1.2;
+   white-space: nowrap;
+}
+/* Spacer pour pousser la partie soutien à droite */
+.sb-spacer{
+  flex: 1 1 auto;
 }
-.sb-row{
+/* Groupes de boutons */
+.sb-buttons{
    display: flex;
-   flex-wrap: wrap;
+   align-items: center;
    gap: 10px;
-   align-items: center;
+   flex-wrap: nowrap;            /* <-- tout sur une seule ligne */
 }
-/* --- Boutons icônes 58x58 --- */
+/* Boutons (wrapper) : reprend le look ButtonLink */
-.sb-icon{
+.sb-btn{
-   width: 58px;
+   border-radius: 12px;
-   height: 58px;
+   overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,.10);
+  transition: all .3s cubic-bezier(.4,0,.2,1);
-   display: inline-flex;
+   display: flex;
    align-items: center;
    justify-content: center;
-   border-radius: 12px;
+   /* fallback */
-   overflow: hidden;
+   background: #6c757d;
+}
-  text-decoration: none !important;
-  color: #fff !important;
-   box-shadow: 0 2px 8px rgba(0,0,0,.12);
+.sb-btn:hover{
-  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
+  transform: translateY(-2px);
+   box-shadow: 0 4px 16px rgba(0,0,0,.20);
 }
-.sb-icon:hover{
+/* Réseaux : 58x58 */
-   transform: translateY(-1px);
+.sb-icon{
-   box-shadow: 0 6px 18px rgba(0,0,0,.22);
+   width: 58px;
-  filter: brightness(1.02);
+   height: 58px;
 }
-/* --- Boutons soutien : hauteur 58, largeur auto --- */
+/* Soutien : 58px haut, largeur auto */
 .sb-support{
    height: 58px;
-   display: inline-flex;
+  padding: 0 14px;
+}
+/* IMPORTANT : le lien généré par [URL LABEL] doit remplir le bouton */
+.sb-footer a{
+   display: flex;
    align-items: center;
+  justify-content: center;
    gap: 10px;
-   padding: 0 14px;
+   width: 100%;
-   border-radius: 12px;
+   height: 100%;
-  overflow: hidden;
+  color: #fff !important;
    text-decoration: none !important;
-  color: #fff !important;
-   box-shadow: 0 2px 8px rgba(0,0,0,.12);
+   background: transparent !important; /* évite que le thème mette un fond sur <a> */
-  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
 }
-.sb-support:hover{
+/* Neutraliser l’icône au survol (lien externe / copier) DANS le bandeau */
-   transform: translateY(-1px);
+.sb-footer a.external::after{
-   box-shadow: 0 6px 18px rgba(0,0,0,.22);
+   display: none !important;
-   filter: brightness(1.02);
+   content: none !important;
+}
+.sb-footer a::after{
+  display: none !important;
+   content: none !important;
 }
-.sb-support__text{
+/* Certains skins ajoutent une icône via background-image : on coupe */
-   font-weight: 700;
+.sb-footer a.external{
-   white-space: nowrap;
+   background-image: none !important;
+   padding-right: 0 !important;
 }
-/* Images */
+/* Images : tailles propres */
 .sb-icon img{
    width: 28px !important;
    height: 28px !important;
+  object-fit: contain;
    display: block;
 }
-.sb-support__icon img{
+.sb-support img{
    width: 22px !important;
    height: 22px !important;
+  object-fit: contain;
    display: block;
 }
-/* Masquer l'icône "lien externe" MediaWiki dans le bandeau */
+/* Empêcher l’URL de s’afficher (ce que tu vois sur ta capture) :
-.sb-footer a.external::after{
+   certains wikis affichent l’URL dans les liens externes si label “non reconnu”.
-   display: none !important;
+   Ici on force le label à rester le contenu seulement. */
+.sb-footer a.external{
+  font-size: 0;                 /* masque tout texte brut éventuel */
+}
+.sb-footer a.external img,
+.sb-footer a.external b,
+.sb-footer a.external strong{
+  font-size: initial;           /* réactive la taille sur éléments visibles */
+}
+/* Texte des boutons soutien */
+.sb-support strong, .sb-support b{
+  font-size: 0.95rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+/* Responsive : en dessous de 900px, on wrap sur 2 lignes proprement */
+@media (max-width: 900px){
+  .sb-footer{
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+   .sb-spacer{
+    display: none;
+  }
+  .sb-buttons{
+    flex-wrap: wrap;
+  }
 }