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