|
|
| Ligne 1 : |
Ligne 1 : |
| /* ============================================ | | /* ============================================ |
| FIX: RÉINITIALISATION POUR ÉVITER CONFLITS | | WRAPPER PRINCIPAL |
| ============================================ */
| |
| | |
| .button-link-image-container,
| |
| .button-link-image-container *,
| |
| .button-link-image,
| |
| .button-link-image * {
| |
| border: none !important;
| |
| box-sizing: border-box !important;
| |
| }
| |
| | |
| .button-link-image-container img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| }
| |
| | |
| | |
| /* ============================================
| |
| MASQUER L'ICÔNE DE LIEN EXTERNE MEDIAWIKI
| |
| ============================================ */
| |
| | |
| .button-link-wrapper a.external,
| |
| .button-link-wrapper a[href^="http"]::after,
| |
| .button-link-wrapper a.external::after {
| |
| background-image: none !important;
| |
| background: none !important;
| |
| padding-right: 0 !important;
| |
| content: '' !important;
| |
| }
| |
| | |
| .button-link-wrapper .mw-parser-output a.external {
| |
| background: none !important;
| |
| padding: 0 !important;
| |
| }
| |
| | |
| /* ============================================
| |
| BASE DU BOUTON
| |
| ============================================ */ | | ============================================ */ |
|
| |
|
| .button-link-wrapper { | | .button-link-wrapper { |
| min-height: 100px; | | min-height: 80px; |
| border-radius: 12px; | | border-radius: 12px; |
| overflow: hidden; | | overflow: hidden; |
| Ligne 49 : |
Ligne 12 : |
| background: #6c757d; | | background: #6c757d; |
| display: flex; | | display: flex; |
| align-items: center; | | align-items: stretch; /* ⬅️ CHANGÉ */ |
| justify-content: center;
| |
| } | | } |
|
| |
|
| Ligne 59 : |
Ligne 21 : |
|
| |
|
| /* ============================================ | | /* ============================================ |
| ZONE CLIQUABLE (lien invisible) | | CONTENU PRINCIPAL |
| ============================================ */ | | ============================================ */ |
|
| |
|
| .button-link-wrapper > a { | | .button-link-content { |
| position: absolute !important;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%; | | width: 100%; |
| height: 100%; | | display: flex; /* ⬅️ AJOUTÉ */ |
| z-index: 20;
| | align-items: center; /* ⬅️ AJOUTÉ */ |
| opacity: 0;
| |
| overflow: hidden; | |
| text-indent: -9999px;
| |
| display: block !important;
| |
| } | | } |
|
| |
|
| .button-link-clickzone { | | .button-link-content a { |
| position: absolute; | | color: white !important; |
| top: 0; | | text-decoration: none !important; |
| left: 0; | | display: flex; |
| | align-items: center; |
| width: 100%; | | width: 100%; |
| height: 100%; | | padding: 1rem; |
| display: block; | | gap: 1rem; /* ⬅️ Espacement entre image et texte */ |
| }
| |
| | |
| /* Masquer complètement l'icône et le texte du lien */ | |
| .button-link-wrapper > a > .mw-file-description,
| |
| .button-link-wrapper > a > img {
| |
| display: none !important;
| |
| } | | } |
|
| |
|
| /* ============================================
| | .button-link-content a:hover, |
| CONTENU DU BOUTON
| | .button-link-content a:visited { |
| ============================================ */
| | color: white !important; |
| | |
| .button-link-content { | |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 20px;
| |
| padding: 20px 30px;
| |
| position: relative;
| |
| z-index: 10;
| |
| pointer-events: none;
| |
| width: 100%; | |
| } | | } |
|
| |
|
| Ligne 115 : |
Ligne 54 : |
| justify-content: center; | | justify-content: center; |
| flex-shrink: 0; | | flex-shrink: 0; |
| width: 200px; /* Largeur fixe généreuse */ | | width: 120px; /* ⬅️ Réduit */ |
| height: 60px; /* Hauteur fixe augmentée */ | | height: 100%; /* ⬅️ Prend toute la hauteur disponible */ |
| margin-right: 1rem;
| |
| overflow: hidden; | | overflow: hidden; |
| background: transparent; | | background: transparent; |
| }
| |
|
| |
| /* Image à droite : inverser les marges */
| |
| .button-link--imagepos-right .button-link-image-container {
| |
| margin-right: 0;
| |
| margin-left: 1rem;
| |
| } | | } |
|
| |
|
| Ligne 134 : |
Ligne 66 : |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
| | padding: 0.5rem; /* ⬅️ Petit padding interne */ |
| } | | } |
|
| |
|
| Ligne 145 : |
Ligne 78 : |
| filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); | | filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); |
| } | | } |
|
| |
| /* IMAGE CENTRÉE (sans texte) : plus grande */
| |
| .button-link--imagepos-center .button-link-image-container {
| |
| width: 250px;
| |
| height: 70px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
|
| |
|
| |
|
| /* ============================================ | | /* ============================================ |
| DISPOSITION PAR DÉFAUT : IMAGE CENTRÉE | | TEXTE DU BOUTON |
| ============================================ */ | | ============================================ */ |
|
| |
|
| .button-link--imagepos-center .button-link-content { | | .button-link-text { |
| | flex: 1; /* ⬅️ Prend l'espace restant */ |
| | display: flex; |
| flex-direction: column; | | flex-direction: column; |
| text-align: center; | | justify-content: center; |
| | text-align: left; |
| | min-width: 0; /* ⬅️ Permet au texte de se réduire si besoin */ |
| } | | } |
|
| |
|
| /* ============================================
| | .button-link-text strong { |
| DISPOSITION : IMAGE À GAUCHE
| | font-size: 1.1em; |
| ============================================ */
| | display: block; |
| | | margin-bottom: 0.25rem; |
| .button-link--imagepos-left .button-link-content { | |
| flex-direction: row; | |
| justify-content: flex-start; | |
| text-align: left; | |
| } | | } |
|
| |
|
| /* ============================================ | | /* ============================================ |
| DISPOSITION : IMAGE À DROITE | | POSITIONNEMENT QR CODE |
| ============================================ */ | | ============================================ */ |
|
| |
|
| .button-link--imagepos-right .button-link-content { | | /* QR Code à GAUCHE (défaut) */ |
| flex-direction: row-reverse; | | .button-link--imagepos-left .button-link-content a { |
| justify-content: flex-start;
| | flex-direction: row; |
| text-align: right;
| |
| } | | } |
|
| |
|
| /* ============================================
| | .button-link--imagepos-left .button-link-text { |
| IMAGE
| | text-align: left; |
| ============================================ */
| |
| | |
| .button-link-image-container { | |
| flex-shrink: 0;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-radius: 8px; | |
| overflow: hidden;
| |
| } | | } |
|
| |
|
| .button-link-image { | | /* QR Code à DROITE */ |
| display: block; | | .button-link--imagepos-right .button-link-content a { |
| max-width: 100%; /* Ne dépasse pas le conteneur */
| | flex-direction: row-reverse; |
| max-height: 100%; /* Ne dépasse pas le conteneur */
| |
| } | | } |
|
| |
|
| /* ============================================
| | .button-link--imagepos-right .button-link-text { |
| TEXTE
| | text-align: right; |
| ============================================ */
| |
| | |
| .button-link-text { | |
| color: white;
| |
| font-size: 1.2em;
| |
| line-height: 1.4;
| |
| font-weight: bold;
| |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| flex: 1;
| |
| display: flex;
| |
| align-items: center;
| |
| } | | } |
|
| |
|
| /* Centrage vertical du texte selon la position */ | | /* QR Code CENTRÉ (pas de texte) */ |
| .button-link--imagepos-center .button-link-text { | | .button-link--imagepos-center .button-link-content a { |
| justify-content: center; | | justify-content: center; |
| } | | } |
|
| |
|
| .button-link--imagepos-left .button-link-text { | | .button-link--imagepos-center .button-link-image-container { |
| justify-content: flex-start; | | width: 200px; /* ⬅️ Plus grand quand centré */ |
| } | | } |
|
| |
|
| .button-link--imagepos-right .button-link-text { | | .button-link--imagepos-center .button-link-text { |
| justify-content: flex-end; | | display: none; |
| } | | } |
|
| |
|
| /* ============================================ | | /* ============================================ |
| COULEURS PRÉDÉFINIES (LOGOS)
| | ALIGNEMENT DU BOUTON |
| ============================================ */
| |
| | |
| /* RÉSEAUX SOCIAUX */
| |
| .button-link--bluesky { background: #0085ff; }
| |
| .button-link--discord { background: #5865f2; }
| |
| .button-link--facebook { background: #1877f2; }
| |
| .button-link--github { background: #24292e; }
| |
| .button-link--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
| |
| .button-link--linkedin { background: #0a66c2; }
| |
| .button-link--mastodon { background: #6364ff; }
| |
| .button-link--reddit { background: #ff4500; }
| |
| .button-link--signal { background: #3a76f0; }
| |
| .button-link--snapchat { background: #fffc00; }
| |
| .button-link--snapchat .button-link-text { color: #000; }
| |
| .button-link--telegram { background: #0088cc; }
| |
| .button-link--tiktok { background: #000000; }
| |
| .button-link--twitch { background: #9146ff; }
| |
| .button-link--twitter { background: #1da1f2; }
| |
| .button-link--x { background: #000000; }
| |
| .button-link--youtube { background: #ff0000; }
| |
| | |
| /* SERVICES */
| |
| .button-link--bandcamp { background: #1da0c3; }
| |
| .button-link--deezer { background: #ff0092; }
| |
| .button-link--gitlab { background: #fc6d26; }
| |
| .button-link--soundcloud { background: #ff5500; }
| |
| .button-link--spotify { background: #1db954; }
| |
| .button-link--steam { background: #171a21; }
| |
| | |
| /* JEUX */
| |
| .button-link--curseforge { background: #f16436; }
| |
| .button-link--minecraft { background: #62b47a; }
| |
| .button-link--modrinth { background: #1bd96a; }
| |
| .button-link--spigot { background: #ed8106; }
| |
| | |
| /* FINANCEMENT */
| |
| .button-link--buymeacoffee { background: #ffdd00; }
| |
| .button-link--buymeacoffee .button-link-text { color: #000; }
| |
| .button-link--helloasso { background: #4C40CF; }
| |
| .button-link--kofi { background: #ff5e5b; }
| |
| .button-link--liberapay { background: #f6c915; }
| |
| .button-link--liberapay .button-link-text { color: #000; }
| |
| .button-link--opencollective { background: #7fadf2; }
| |
| .button-link--patreon { background: #ff424d; }
| |
| .button-link--paypal { background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%); }
| |
| .button-link--qonto { background: #1d1d1d; }
| |
| .button-link--stripe { background: #635BFF; }
| |
| | |
| /* ============================================
| |
| ALIGNEMENT | |
| ============================================ */ | | ============================================ */ |
|
| |
|
| Ligne 304 : |
Ligne 156 : |
| margin-left: auto; | | margin-left: auto; |
| margin-right: 0; | | margin-right: 0; |
| | } |
| | |
| | /* Masquer l'icône de lien externe */ |
| | .button-link-content a.external::after { |
| | display: none !important; |
| } | | } |
