« Modèle:Button/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications Balise : Révoqué |
mAucun résumé des modifications |
||
| (21 versions intermédiaires par 2 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* ============================================ | /* ============================================ | ||
VARIABLES CSS (wrapper pour TemplateStylesExtender) | |||
============================================ */ | ============================================ */ | ||
.button-link-vars { | |||
.button-link- | --btn-surface-0: var(--color-surface-0); | ||
--btn-surface-1: var(--color-surface-1); | |||
--btn-surface-2: var(--color-surface-2); | |||
--btn-surface-3: var(--color-surface-3); | |||
--btn-surface-4: var(--color-surface-4); | |||
--btn-text-dark: var(--color-base); | |||
margin-bottom: 8px; | |||
} | } | ||
.button-link- | /* Dernier bouton sans marge */ | ||
.button-link-vars:last-child { | |||
margin-bottom: 0; | |||
} | } | ||
/* ============================================ | /* ============================================ | ||
BOUTON - Base | |||
============================================ */ | ============================================ */ | ||
.button-link-wrapper { | .button-link-wrapper { | ||
min-height: | min-height: 60px; | ||
border-radius: 12px; | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
| Ligne 47 : | Ligne 27 : | ||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | ||
position: relative; | position: relative; | ||
background: | background-color: var(--background-color-progressive); | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Ligne 56 : | Ligne 36 : | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | ||
background-color: var(--background-color-progressive--hover); | |||
} | } | ||
.button-link-content { | |||
.button-link- | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
text-align: center; | |||
padding: 1rem; | |||
text- | |||
} | } | ||
.button-link-content a { | |||
color: var(--color-inverted-primary) !important; | |||
text-decoration: none !important; | |||
.button-link-content { | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
height: 100%; | |||
} | } | ||
/* | /* Force la couleur même après visite */ | ||
.button-link-- | .button-link-content a:hover, | ||
.button-link-content a:visited, | |||
.button-link-content a:active { | |||
color: var(--color-inverted-primary) !important; | |||
} | } | ||
.button-link- | /* CONTENEUR D'IMAGE DE TAILLE FIXE */ | ||
.button-link-content .mw-file-description { | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: | width: 200px; | ||
height: | height: 50px; | ||
margin: 0 auto 0.5rem; | |||
overflow: hidden; | |||
} | } | ||
.button-link- | /* IMAGE RESPONSIVE DANS LE CONTENEUR */ | ||
width: 100%; | .button-link-content img { | ||
height: 100%; | max-width: 100%; | ||
max-height: 100%; | |||
width: auto !important; | |||
height: auto !important; | |||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); | |||
} | } | ||
/* Masquer l'icône de lien externe */ | |||
.button-link-content a.external::after { | |||
display: none !important; | |||
} | |||
/* ============================================ | /* ============================================ | ||
SURFACES ADAPTATIVES (style=surface-X) | |||
============================================ */ | ============================================ */ | ||
.button-link--surface-0 { | |||
background-color: var(--btn-surface-0) !important; | |||
} | |||
.button-link--surface-0 .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
} | |||
.button-link-- | .button-link--surface-1 { | ||
background-color: var(--btn-surface-1) !important; | |||
} | |||
.button-link--surface-1 .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
} | } | ||
.button-link--surface-2 { | |||
background-color: var(--btn-surface-2) !important; | |||
} | |||
.button-link--surface-2 .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
} | |||
.button-link-- | .button-link--surface-3 { | ||
background-color: var(--btn-surface-3) !important; | |||
} | |||
.button-link--surface-3 .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
} | } | ||
.button-link--surface-4 { | |||
background-color: var(--btn-surface-4) !important; | |||
} | |||
.button-link--surface-4 .button-link-content a { | |||
.button-link-- | color: var(--btn-text-dark) !important; | ||
} | } | ||
/* ============================================ | /* ============================================ | ||
COULEUR PERSONNALISÉE (background=#FF0000) | |||
============================================ */ | ============================================ */ | ||
.button-link--custom-bg { | |||
.button-link- | background-color: var(--custom-bg) !important; | ||
} | } | ||
.button-link- | .button-link--custom-bg:hover { | ||
background-color: var(--custom-bg) !important; | |||
filter: brightness(0.9); | |||
} | } | ||
/* ============================================ | /* ============================================ | ||
COULEURS PRÉDÉFINIES (logos) | |||
============================================ */ | ============================================ */ | ||
.button-link- | /* ========== COULEURS GÉNÉRIQUES ========== */ | ||
.button-link--danger { background-color: #dc3545 !important; } | |||
.button-link--dark { background-color: var(--btn-surface-4) !important; } | |||
.button-link--info { background-color: #17a2b8 !important; } | |||
.button-link--light { | |||
background-color: var(--btn-surface-1) !important; | |||
} | |||
.button-link--light .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
} | |||
.button-link--secondary { | |||
background-color: var(--btn-surface-2) !important; | |||
} | } | ||
.button-link--secondary .button-link-content a { | |||
color: var(--btn-text-dark) !important; | |||
.button-link-- | |||
} | } | ||
.button-link--success { background-color: #28a745 !important; } | |||
.button-link-- | .button-link--warning { | ||
background-color: #ffc107 !important; | |||
} | } | ||
.button-link--warning .button-link-content a { | |||
.button-link-- | color: #000 !important; | ||
} | } | ||
/* ==================== | /* ========== OUTILS DE DÉVELOPPEMENT ========== */ | ||
.button-link--codepen { background-color: #000000 !important; } | |||
.button-link--docker { background-color: #2496ed !important; } | |||
.button-link--gradle { background-color: #02303a !important; } | |||
.button-link--jenkins { background-color: #d24939 !important; } | |||
.button-link--kubernetes { background-color: #326ce5 !important; } | |||
.button-link--maven { background-color: #c71a36 !important; } | |||
.button-link--npm { background-color: #cb3837 !important; } | |||
.button-link--stackoverflow { background-color: #f48024 !important; } | |||
/* RÉSEAUX SOCIAUX */ | /* ========== RÉSEAUX SOCIAUX ========== */ | ||
.button-link-- | .button-link--discord { background-color: #5865f2 !important; } | ||
.button-link-- | .button-link--facebook { background-color: #1877f2 !important; } | ||
.button-link-- | .button-link--github { background-color: #24292e !important; } | ||
.button-link-- | .button-link--gitlab { background-color: #fc6d26 !important; } | ||
.button-link--instagram { background: linear-gradient( | .button-link--instagram { | ||
.button-link--linkedin { background: #0a66c2; } | background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important; | ||
.button-link--mastodon { background: #6364ff; } | } | ||
.button-link--reddit { background: #ff4500; } | .button-link--linkedin { background-color: #0a66c2 !important; } | ||
.button-link-- | .button-link--mastodon { background-color: #6364ff !important; } | ||
.button-link--reddit { background-color: #ff4500 !important; } | |||
.button-link--telegram { background-color: #0088cc !important; } | |||
.button-link--tiktok { background-color: #000000 !important; } | |||
.button-link--tiktok { background: #000000; } | .button-link--twitch { background-color: #9146ff !important; } | ||
.button-link--twitch { background: #9146ff; } | .button-link--x { background-color: #000000 !important; } | ||
.button-link-- | .button-link--youtube { background-color: #ff0000 !important; } | ||
.button-link--youtube { background: #ff0000; } | |||
/* | /* ========== MINECRAFT MODLOADERS ========== */ | ||
.button-link-- | .button-link--fabric { | ||
.button-link-- | background-color: #dbd3c8 !important; | ||
.button-link-- | } | ||
.button-link-- | .button-link--fabric .button-link-content a { | ||
.button-link-- | color: #000 !important; | ||
.button-link-- | } | ||
.button-link--forge { background-color: #1e2c42 !important; } | |||
.button-link--minecraft { background-color: #62b47a !important; } | |||
.button-link--neoforge { background-color: #ff6b35 !important; } | |||
.button-link--quilt { background-color: #8b5cf6 !important; } | |||
/* | /* ========== PLATEFORMES DE PLUGINS ========== */ | ||
.button-link--curseforge { background: #f16436; } | .button-link--bukkit { background-color: #f7931e !important; } | ||
.button-link-- | .button-link--curseforge { background-color: #f16436 !important; } | ||
.button-link--modrinth { background: #1bd96a; } | .button-link--github-releases { background-color: #238636 !important; } | ||
.button-link--spigot { background: #ed8106; } | .button-link--hangar { background-color: #0089ff !important; } | ||
.button-link--modrinth { background-color: #1bd96a !important; } | |||
.button-link--paper { background-color: #1a8cff !important; } | |||
.button-link--polymart { background-color: #2196f3 !important; } | |||
.button-link--purpur { background-color: #a855f7 !important; } | |||
.button-link--spigot { background-color: #ed8106 !important; } | |||
/* FINANCEMENT */ | /* ========== PLATEFORMES DE FINANCEMENT ========== */ | ||
.button-link--buymeacoffee { background: #ffdd00; } | .button-link--buymeacoffee { | ||
.button-link--buymeacoffee .button-link- | background-color: #ffdd00 !important; | ||
.button-link--helloasso { background: #4C40CF; } | } | ||
.button-link--kofi { background: #ff5e5b; } | .button-link--buymeacoffee .button-link-content a { | ||
.button-link--liberapay { background: #f6c915; } | color: #000 !important; | ||
.button-link--liberapay .button-link- | } | ||
.button-link--opencollective { background: #7fadf2; } | .button-link--helloasso { background-color: #4C40CF !important; } | ||
.button-link--patreon { background: #ff424d; } | .button-link--helloasso:hover { background-color: #3d33a6 !important; } | ||
.button-link--paypal { background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%); } | .button-link--kofi { background-color: #ff5e5b !important; } | ||
.button-link--qonto { background: #1d1d1d; } | .button-link--liberapay { | ||
.button-link--stripe { background: #635BFF; } | background-color: #f6c915 !important; | ||
} | |||
.button-link--liberapay .button-link-content a { | |||
color: #000 !important; | |||
} | |||
.button-link--opencollective { background-color: #7fadf2 !important; } | |||
.button-link--patreon { background-color: #ff424d !important; } | |||
.button-link--paypal { | |||
background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%) !important; | |||
} | |||
.button-link--paypal:hover { | |||
background: linear-gradient(135deg, #005ea6 0%, #003087 100%) !important; | |||
} | |||
.button-link--qonto { background-color: #1d1d1d !important; } | |||
.button-link--stripe { background-color: #635BFF !important; } | |||
/* ============================================ | /* ============================================ | ||
ALIGNEMENT | ALIGNEMENT + WIDTH FIXE | ||
============================================ */ | ============================================ */ | ||
.button-link--align-left { | .button-link--align-left { | ||
width: | width: 300px; | ||
margin-right: auto; | margin-right: auto; | ||
margin-left: 0; | margin-left: 0; | ||
| Ligne 284 : | Ligne 254 : | ||
.button-link--align-center { | .button-link--align-center { | ||
width: | width: 300px; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
| Ligne 291 : | Ligne 260 : | ||
.button-link--align-right { | .button-link--align-right { | ||
width: | width: 300px; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: 0; | margin-right: 0; | ||
} | |||
/* ============================================ | |||
HAUTEUR PERSONNALISÉE + NO-LOGO | |||
============================================ */ | |||
.button-link-wrapper.button-link--no-logo .button-link-content { | |||
padding: 0.35rem 1rem; | |||
} | |||
.button-link-wrapper.button-link--no-logo .button-link-content a { | |||
line-height: 1.1; | |||
} | } | ||
Dernière version du 11 février 2026 à 20:41
/* ============================================
VARIABLES CSS (wrapper pour TemplateStylesExtender)
============================================ */
.button-link-vars {
--btn-surface-0: var(--color-surface-0);
--btn-surface-1: var(--color-surface-1);
--btn-surface-2: var(--color-surface-2);
--btn-surface-3: var(--color-surface-3);
--btn-surface-4: var(--color-surface-4);
--btn-text-dark: var(--color-base);
margin-bottom: 8px;
}
/* Dernier bouton sans marge */
.button-link-vars:last-child {
margin-bottom: 0;
}
/* ============================================
BOUTON - Base
============================================ */
.button-link-wrapper {
min-height: 60px;
border-radius: 12px;
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-color: var(--background-color-progressive);
display: flex;
align-items: center;
justify-content: center;
}
.button-link-wrapper:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
background-color: var(--background-color-progressive--hover);
}
.button-link-content {
width: 100%;
height: 100%;
text-align: center;
padding: 1rem;
}
.button-link-content a {
color: var(--color-inverted-primary) !important;
text-decoration: none !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
/* Force la couleur même après visite */
.button-link-content a:hover,
.button-link-content a:visited,
.button-link-content a:active {
color: var(--color-inverted-primary) !important;
}
/* CONTENEUR D'IMAGE DE TAILLE FIXE */
.button-link-content .mw-file-description {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 50px;
margin: 0 auto 0.5rem;
overflow: hidden;
}
/* IMAGE RESPONSIVE DANS LE CONTENEUR */
.button-link-content img {
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* Masquer l'icône de lien externe */
.button-link-content a.external::after {
display: none !important;
}
/* ============================================
SURFACES ADAPTATIVES (style=surface-X)
============================================ */
.button-link--surface-0 {
background-color: var(--btn-surface-0) !important;
}
.button-link--surface-0 .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--surface-1 {
background-color: var(--btn-surface-1) !important;
}
.button-link--surface-1 .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--surface-2 {
background-color: var(--btn-surface-2) !important;
}
.button-link--surface-2 .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--surface-3 {
background-color: var(--btn-surface-3) !important;
}
.button-link--surface-3 .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--surface-4 {
background-color: var(--btn-surface-4) !important;
}
.button-link--surface-4 .button-link-content a {
color: var(--btn-text-dark) !important;
}
/* ============================================
COULEUR PERSONNALISÉE (background=#FF0000)
============================================ */
.button-link--custom-bg {
background-color: var(--custom-bg) !important;
}
.button-link--custom-bg:hover {
background-color: var(--custom-bg) !important;
filter: brightness(0.9);
}
/* ============================================
COULEURS PRÉDÉFINIES (logos)
============================================ */
/* ========== COULEURS GÉNÉRIQUES ========== */
.button-link--danger { background-color: #dc3545 !important; }
.button-link--dark { background-color: var(--btn-surface-4) !important; }
.button-link--info { background-color: #17a2b8 !important; }
.button-link--light {
background-color: var(--btn-surface-1) !important;
}
.button-link--light .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--secondary {
background-color: var(--btn-surface-2) !important;
}
.button-link--secondary .button-link-content a {
color: var(--btn-text-dark) !important;
}
.button-link--success { background-color: #28a745 !important; }
.button-link--warning {
background-color: #ffc107 !important;
}
.button-link--warning .button-link-content a {
color: #000 !important;
}
/* ========== OUTILS DE DÉVELOPPEMENT ========== */
.button-link--codepen { background-color: #000000 !important; }
.button-link--docker { background-color: #2496ed !important; }
.button-link--gradle { background-color: #02303a !important; }
.button-link--jenkins { background-color: #d24939 !important; }
.button-link--kubernetes { background-color: #326ce5 !important; }
.button-link--maven { background-color: #c71a36 !important; }
.button-link--npm { background-color: #cb3837 !important; }
.button-link--stackoverflow { background-color: #f48024 !important; }
/* ========== RÉSEAUX SOCIAUX ========== */
.button-link--discord { background-color: #5865f2 !important; }
.button-link--facebook { background-color: #1877f2 !important; }
.button-link--github { background-color: #24292e !important; }
.button-link--gitlab { background-color: #fc6d26 !important; }
.button-link--instagram {
background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;
}
.button-link--linkedin { background-color: #0a66c2 !important; }
.button-link--mastodon { background-color: #6364ff !important; }
.button-link--reddit { background-color: #ff4500 !important; }
.button-link--telegram { background-color: #0088cc !important; }
.button-link--tiktok { background-color: #000000 !important; }
.button-link--twitch { background-color: #9146ff !important; }
.button-link--x { background-color: #000000 !important; }
.button-link--youtube { background-color: #ff0000 !important; }
/* ========== MINECRAFT MODLOADERS ========== */
.button-link--fabric {
background-color: #dbd3c8 !important;
}
.button-link--fabric .button-link-content a {
color: #000 !important;
}
.button-link--forge { background-color: #1e2c42 !important; }
.button-link--minecraft { background-color: #62b47a !important; }
.button-link--neoforge { background-color: #ff6b35 !important; }
.button-link--quilt { background-color: #8b5cf6 !important; }
/* ========== PLATEFORMES DE PLUGINS ========== */
.button-link--bukkit { background-color: #f7931e !important; }
.button-link--curseforge { background-color: #f16436 !important; }
.button-link--github-releases { background-color: #238636 !important; }
.button-link--hangar { background-color: #0089ff !important; }
.button-link--modrinth { background-color: #1bd96a !important; }
.button-link--paper { background-color: #1a8cff !important; }
.button-link--polymart { background-color: #2196f3 !important; }
.button-link--purpur { background-color: #a855f7 !important; }
.button-link--spigot { background-color: #ed8106 !important; }
/* ========== PLATEFORMES DE FINANCEMENT ========== */
.button-link--buymeacoffee {
background-color: #ffdd00 !important;
}
.button-link--buymeacoffee .button-link-content a {
color: #000 !important;
}
.button-link--helloasso { background-color: #4C40CF !important; }
.button-link--helloasso:hover { background-color: #3d33a6 !important; }
.button-link--kofi { background-color: #ff5e5b !important; }
.button-link--liberapay {
background-color: #f6c915 !important;
}
.button-link--liberapay .button-link-content a {
color: #000 !important;
}
.button-link--opencollective { background-color: #7fadf2 !important; }
.button-link--patreon { background-color: #ff424d !important; }
.button-link--paypal {
background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%) !important;
}
.button-link--paypal:hover {
background: linear-gradient(135deg, #005ea6 0%, #003087 100%) !important;
}
.button-link--qonto { background-color: #1d1d1d !important; }
.button-link--stripe { background-color: #635BFF !important; }
/* ============================================
ALIGNEMENT + WIDTH FIXE
============================================ */
.button-link--align-left {
width: 300px;
margin-right: auto;
margin-left: 0;
}
.button-link--align-center {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.button-link--align-right {
width: 300px;
margin-left: auto;
margin-right: 0;
}
/* ============================================
HAUTEUR PERSONNALISÉE + NO-LOGO
============================================ */
.button-link-wrapper.button-link--no-logo .button-link-content {
padding: 0.35rem 1rem;
}
.button-link-wrapper.button-link--no-logo .button-link-content a {
line-height: 1.1;
}