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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 3 : / Ligne 3 : @@
     ========================================= */
-/* Container principal */
 .sb-footer{
    width: 100%;
@@ Ligne 22 : / Ligne 21 : @@
 /* =========================================
-    TITRES (texte noir demandé)
+    TITRES
     ========================================= */
@@ Ligne 33 : / Ligne 32 : @@
-/* Spacer pousse la partie soutien à droite */
+/* Spacer */
 .sb-spacer{
    flex: 1 1 auto;
@@ Ligne 52 : / Ligne 51 : @@
 /* =========================================
-    BOUTONS (base commune)
+    BOUTONS — BASE UNIQUE (IMPORTANT)
     ========================================= */
-.sb-wrapper {
+.sb-footer .sb-btn{
-    min-height: 80px;
+  display: flex;
-    border-radius: 12px;
+  align-items: center;
-    overflow: hidden;
+  justify-content: center;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    position: relative;
-    background: #6c757d;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.sb-wrapper:hover {
+  border-radius: 12px;
-    transform: translateY(-2px);
+  overflow: hidden;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-}
-.sb-content {
+  transition: all .3s cubic-bezier(.4,0,.2,1);
-    width: 100%;
+  box-shadow: 0 2px 8px rgba(0,0,0,.10);
-    text-align: center;
-    padding: 1rem;
-}
-.sb-content a {
+  /* PAS de gris fallback */
-    color: white !important;
+  background: transparent;
-    text-decoration: none !important;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-.sb-content a:hover,
-.sb-content a:visited {
-    color: white !important;
-}
-/* CONTENEUR D'IMAGE DE TAILLE FIXE */
-.sb-content .mw-file-description {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;           /* LARGEUR FIXE */
-    height: 50px;           /* HAUTEUR FIXE */
-    margin: 0 auto 0.5rem;
-    overflow: hidden;       /* Cache ce qui dépasse */
-}
-/* IMAGE RESPONSIVE DANS LE CONTENEUR */
-.sb-content img {
-    max-width: 100%;        /* Ne dépasse pas le conteneur */
-    max-height: 100%;       /* Ne dépasse pas le conteneur */
-    width: auto !important;
-    height: auto !important;
-    object-fit: contain;    /* Garde les proportions */
-    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
-/* Masquer l'icône de lien externe */
+.sb-footer .sb-btn:hover{
-.sb-content a.external::after {
+  transform: translateY(-2px);
-    display: none !important;
+  box-shadow: 0 4px 16px rgba(0,0,0,.20);
 }
@@ Ligne 124 : / Ligne 79 : @@
     ========================================= */
-/* Réseaux carrés */
+/* Réseaux (carrés) */
 .sb-icon{
    width: 58px;
@@ Ligne 130 : / Ligne 85 : @@
 }
-/* Boutons soutien */
+/* Soutien (largeur auto) */
 .sb-support{
    height: 58px;
-   padding: 0 14px;
+   padding: 0 16px;
 }
 /* =========================================
-    LIENS INTERNES (MediaWiki safe)
+    LIEN INTERNE PLEIN BOUTON
     ========================================= */
-.sb-footer a{
+.sb-footer .sb-btn > a{
    display: flex;
    align-items: center;
@@ Ligne 149 : / Ligne 104 : @@
    width: 100%;
    height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
    color: #fff !important;
    text-decoration: none !important;
+}
-  background: transparent !important;
-}
+/* =========================================
+   SUPPRESSION STYLES MEDIAWIKI INDÉSIRABLES
+   ========================================= */
-/* Masquer l'icône de lien externe */
+/* icône lien externe */
-.button-link-content a.external::after {
+.sb-footer a::after,
-    display: none !important;
+.sb-footer a::before,
+.sb-footer a.external::after,
+.sb-footer a.external::before{
+  display: none !important;
+  content: none !important;
 }
-/* Masquer éventuel texte brut d’URL */
+/* background auto des liens externes */
 .sb-footer a.external{
-   font-size: 0;
+   background-image: none !important;
+  padding-right: 0 !important;
 }
-.sb-footer a.external img,
+/* wrappers fichiers */
-.sb-footer a.external b,
+.sb-footer .mw-file-description{
-.sb-footer a.external strong{
+   background: transparent !important;
-   font-size: initial;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
 }
@@ Ligne 204 : / Ligne 175 : @@
 /* =========================================
     COULEURS RÉSEAUX SOCIAUX
-    (scopé uniquement au footer)
+    (appliquées AU BOUTON, pas au lien)
     ========================================= */
-.sb-footer .button-link--discord { background: #5865f2; }
+.sb-footer .sb-btn.button-link--discord   { background: #5865f2; }
-.sb-footer .button-link--twitter { background: #1da1f2; }
+.sb-footer .sb-btn.button-link--twitter   { background: #1da1f2; }
-.sb-footer .button-link--instagram {
+.sb-footer .sb-btn.button-link--instagram{
    background: linear-gradient(
 deg,
@@ Ligne 221 : / Ligne 192 : @@
 }
-.sb-footer .button-link--tiktok { background: #000000; }
+.sb-footer .sb-btn.button-link--tiktok    { background: #000; }
+.sb-footer .sb-btn.button-link--helloasso { background: #5a2ca0; }
-/* HelloAsso */
-.sb-footer .button-link--helloasso { background: #5a2ca0; }