Balises : Modification par mobile Modification par le web mobile |
Balises : Modification par mobile Modification par le web mobile |
| Ligne 1 : |
Ligne 1 : |
| /* ============================================
| | .button-link-wrapper { |
| BUTTON LINK - Universal clickable buttons
| |
| ============================================ */
| |
| | |
| .button-link { | |
| min-height: 80px; | | min-height: 80px; |
| border-radius: 12px; | | border-radius: 12px; |
| Ligne 10 : |
Ligne 6 : |
| 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: #6c757d; /* Couleur par défaut */ | | background: #6c757d; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| } | | } |
|
| |
|
| .button-link:hover { | | .button-link-wrapper:hover { |
| 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); |
| } | | } |
|
| |
|
| .button-link__link { | | .button-link-content { |
| display: flex !important;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 0.5rem;
| |
| width: 100%; | | width: 100%; |
| height: 100%; | | text-align: center; |
| padding: 1rem; | | padding: 1rem; |
| | } |
| | |
| | .button-link-content a { |
| | color: white !important; |
| text-decoration: none !important; | | text-decoration: none !important; |
| color: white !important; | | display: block; |
| } | | } |
|
| |
|
| .button-link__link:hover, | | .button-link-content a:hover, |
| .button-link__link:visited { | | .button-link-content a:visited { |
| color: white !important; | | color: white !important; |
| } | | } |
|
| |
|
| .button-link__link .mw-file-description { | | .button-link-content .mw-file-description { |
| display: flex !important; | | display: block; |
| align-items: center; | | margin: 0 auto 0.5rem; |
| justify-content: center;
| |
| } | | } |
|
| |
|
| .button-link__link img { | | .button-link-content img { |
| margin: 0 auto; | | margin: 0 auto; |
| display: block; | | display: block; |
| Ligne 48 : |
Ligne 45 : |
| } | | } |
|
| |
|
| .button-link__text {
| | /* Masquer l'icône de lien externe */ |
| font-size: 1.1rem;
| | .button-link-content a.external::after { |
| font-weight: 600;
| |
| color: white;
| |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
| |
| margin-top: 0.25rem;
| |
| }
| |
| | |
| /* Remove ALL external link icons */ | |
| .button-link a::after, | |
| .button-link a.external::after,
| |
| .button-link .mw-file-description::after {
| |
| display: none !important; | | display: none !important; |
| content: none !important;
| |
| }
| |
|
| |
| /* ============================================
| |
| SOCIAL NETWORKS
| |
| ============================================ */
| |
|
| |
| .button-link--discord {
| |
| background: #5865f2;
| |
| }
| |
|
| |
| .button-link--patreon {
| |
| background: #ff424d;
| |
| }
| |
|
| |
| .button-link--gitlab {
| |
| background: #fc6f23;
| |
| }
| |
|
| |
| .button-link--github {
| |
| background: #24292e;
| |
| }
| |
|
| |
| .button-link--twitter {
| |
| background: #1da1f2;
| |
| }
| |
|
| |
| .button-link--youtube {
| |
| background: #ff0000;
| |
| }
| |
|
| |
| .button-link--twitch {
| |
| background: #9146ff;
| |
| }
| |
|
| |
| .button-link--reddit {
| |
| background: #ff4500;
| |
| }
| |
|
| |
| .button-link--mastodon {
| |
| background: #6364ff;
| |
| }
| |
|
| |
| .button-link--bluesky {
| |
| background: #0085ff;
| |
| } | | } |
|
| |
|
| .button-link--linkedin { | | /* Couleurs prédéfinies */ |
| background: #0077b5;
| | .button-link--discord { background: #5865f2; } |
| } | | .button-link--patreon { background: #ff424d; } |
| | .button-link--gitlab { background: #fc6f23; } |
| | .button-link--github { background: #24292e; } |
| | .button-link--twitter { background: #1da1f2; } |
| | .button-link--youtube { background: #ff0000; } |
| | .button-link--twitch { background: #9146ff; } |
| | .button-link--reddit { background: #ff4500; } |
| | .button-link--linkedin { background: #0077b5; } |
| | .button-link--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } |
| | .button-link--tiktok { background: #000000; } |
| | .button-link--facebook { background: #1877f2; } |
| | .button-link--snapchat { background: #fffc00; color: #000 !important; } |
|
| |
|
| .button-link--facebook { | | /* Plateformes de plugins */ |
| background: #1877f2;
| | .button-link--spigot { background: #ed8106; } |
| } | | .button-link--bukkit { background: #f7931e; } |
| | .button-link--modrinth { background: #1bd96a; } |
| | .button-link--curseforge { background: #f16436; } |
| | .button-link--polymart { background: #2196f3; } |
| | .button-link--github-releases { background: #238636; } |
| | .button-link--hangar { background: #0089ff; } |
|
| |
|
| .button-link--instagram { | | /* Services de développement */ |
| background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
| | .button-link--jenkins { background: #d24939; } |
| } | | .button-link--docker { background: #2496ed; } |
| | .button-link--npm { background: #cb3837; } |
| | .button-link--maven { background: #c71a36; } |
| | .button-link--gradle { background: #02303a; } |
|
| |
|
| .button-link--tiktok {
| | /* Couleurs génériques */ |
| background: #000000;
| | .button-link--primary { background: #007bff; } |
| }
| | .button-link--secondary { background: #6c757d; } |
| | | .button-link--success { background: #28a745; } |
| .button-link--snapchat {
| | .button-link--danger { background: #dc3545; } |
| background: #fffc00;
| | .button-link--warning { background: #ffc107; color: #000 !important; } |
| }
| | .button-link--info { background: #17a2b8; } |
| | | .button-link--light { background: #f8f9fa; color: #000 !important; } |
| .button-link--threads {
| | .button-link--dark { background: #343a40; } |
| background: #000000;
| |
| }
| |
| | |
| /* ============================================
| |
| DEVELOPMENT & TECH PLATFORMS
| |
| ============================================ */
| |
| | |
| .button-link--stackoverflow {
| |
| background: #f48024;
| |
| }
| |
| | |
| .button-link--npm {
| |
| background: #cb3837;
| |
| }
| |
| | |
| .button-link--pypi {
| |
| background: #3775a9;
| |
| }
| |
| | |
| .button-link--docker {
| |
| background: #2496ed;
| |
| }
| |
| | |
| .button-link--kubernetes {
| |
| background: #326ce5;
| |
| }
| |
| | |
| .button-link--codepen {
| |
| background: #000000;
| |
| }
| |
| | |
| .button-link--gitlab-ci {
| |
| background: #fc6d26;
| |
| }
| |
| | |
| /* ============================================
| |
| FUNDING & SUPPORT PLATFORMS
| |
| ============================================ */
| |
| | |
| .button-link--kofi {
| |
| background: #ff5e5b;
| |
| }
| |
| | |
| .button-link--liberapay {
| |
| background: #f6c915;
| |
| }
| |
| | |
| .button-link--buymeacoffee {
| |
| background: #ffdd00;
| |
| }
| |
| | |
| .button-link--opencollective {
| |
| background: #7fadf2;
| |
| }
| |
| | |
| /* ============================================ | |
| SEMANTIC COLORS (Citizen-based)
| |
| ============================================ */
| |
| | |
| .button-link--primary, | |
| .button-link--blue {
| |
| background: #3366cc;
| |
| } | |
| | |
| .button-link--secondary, | |
| .button-link--gray,
| |
| .button-link--grey {
| |
| background: #72777d;
| |
| } | |
| | |
| .button-link--success, | |
| .button-link--green {
| |
| background: #14866d;
| |
| } | |
| | |
| .button-link--danger, | |
| .button-link--red {
| |
| background: #d73333;
| |
| } | |
| | |
| .button-link--warning, | |
| .button-link--yellow {
| |
| background: #fc3;
| |
| }
| |
| | |
| .button-link--info,
| |
| .button-link--cyan {
| |
| background: #00b8d4;
| |
| } | |
| | |
| .button-link--purple, | |
| .button-link--violet {
| |
| background: #6f42c1;
| |
| }
| |
| | |
| .button-link--pink {
| |
| background: #d63384;
| |
| }
| |
| | |
| .button-link--orange {
| |
| background: #fd7e14;
| |
| }
| |
| | |
| .button-link--teal {
| |
| background: #20c997;
| |
| }
| |
| | |
| .button-link--indigo {
| |
| background: #6610f2;
| |
| } | |
| | |
| .button-link--black {
| |
| background: #000000;
| |
| }
| |
| | |
| .button-link--white {
| |
| background: #ffffff;
| |
| }
| |
| | |
| .button-link--light { | |
| background: #f8f9fa;
| |
| }
| |
| | |
| .button-link--dark {
| |
| background: #343a40;
| |
| }
| |
| | |
| /* ============================================
| |
| MINECRAFT PLUGIN PLATFORMS
| |
| ============================================ */
| |
| | |
| /* Main Platforms */
| |
| .button-link--modrinth {
| |
| background: #1bd96a;
| |
| }
| |
| | |
| .button-link--curseforge {
| |
| background: #f16436;
| |
| }
| |
| | |
| .button-link--hangar {
| |
| background: #0d6efd;
| |
| }
| |
| | |
| .button-link--spigotmc,
| |
| .button-link--spigot {
| |
| background: #f7c03e;
| |
| }
| |
| | |
| .button-link--bukkit {
| |
| background: #f89a1e;
| |
| }
| |
| | |
| .button-link--papermc,
| |
| .button-link--paper {
| |
| background: #1a8cff;
| |
| }
| |
| | |
| .button-link--purpur {
| |
| background: #a855f7;
| |
| }
| |
| | |
| .button-link--polymart {
| |
| background: #ec4899;
| |
| }
| |
| | |
| /* Additional Platforms */
| |
| .button-link--github-releases {
| |
| background: #238636;
| |
| }
| |
| | |
| .button-link--jenkins {
| |
| background: #d24939;
| |
| }
| |
| | |
| .button-link--maven {
| |
| background: #c71a36;
| |
| }
| |
| | |
| /* Minecraft Official */
| |
| .button-link--minecraft {
| |
| background: #62b47a;
| |
| }
| |
| | |
| .button-link--forge {
| |
| background: #1e2c42;
| |
| }
| |
| | |
| .button-link--fabric {
| |
| background: #dbd3c8;
| |
| }
| |
| | |
| .button-link--quilt {
| |
| background: #8b5cf6;
| |
| }
| |
| | |
| .button-link--neoforge {
| |
| background: #ff6b35;
| |
| }
| |
| | |
| /* Modpacks */
| |
| .button-link--ftb,
| |
| .button-link--feed-the-beast {
| |
| background: #8e44ad;
| |
| }
| |
| | |
| .button-link--technic {
| |
| background: #e74c3c;
| |
| }
| |
| | |
| .button-link--atlauncher {
| |
| background: #3498db;
| |
| }
| |
| | |
| /* Server Software */
| |
| .button-link--velocity {
| |
| background: #3fa9f5;
| |
| }
| |
| | |
| .button-link--waterfall {
| |
| background: #0088ff;
| |
| }
| |
| | |
| .button-link--bungeecord {
| |
| background: #ffcc00;
| |
| }
| |
| | |
| .button-link--sponge {
| |
| background: #f7cf0d;
| |
| }
| |
| | |
| /* ============================================
| |
| TEXT COLOR ADJUSTMENTS
| |
| ============================================ */
| |
| | |
| /* Dark text for light/yellow backgrounds */
| |
| .button-link--spigotmc .button-link__link,
| |
| .button-link--spigot .button-link__link,
| |
| .button-link--bukkit .button-link__link,
| |
| .button-link--bungeecord .button-link__link,
| |
| .button-link--sponge .button-link__link,
| |
| .button-link--fabric .button-link__link,
| |
| .button-link--snapchat .button-link__link,
| |
| .button-link--buymeacoffee .button-link__link,
| |
| .button-link--liberapay .button-link__link,
| |
| .button-link--warning .button-link__link,
| |
| .button-link--yellow .button-link__link,
| |
| .button-link--white .button-link__link,
| |
| .button-link--light .button-link__link {
| |
| color: #000 !important;
| |
| text-shadow: none;
| |
| } | |
| | |
| /* Enhanced shadow for logos on light backgrounds */
| |
| .button-link--fabric img, | |
| .button-link--spigotmc img,
| |
| .button-link--spigot img,
| |
| .button-link--bukkit img,
| |
| .button-link--snapchat img,
| |
| .button-link--buymeacoffee img,
| |
| .button-link--liberapay img,
| |
| .button-link--warning img,
| |
| .button-link--yellow img,
| |
| .button-link--white img,
| |
| .button-link--light img {
| |
| filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
| |
| }
| |
| | |
| /* ============================================
| |
| GRID LAYOUT
| |
| ============================================ */
| |
| | |
| .button-link-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 1rem;
| |
| margin: 1rem 0;
| |
| }
| |
| | |
| /* ============================================
| |
| RESPONSIVE
| |
| ============================================ */
| |
| | |
| @media (max-width: 768px) {
| |
| .button-link-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .button-link {
| |
| min-height: 70px;
| |
| }
| |
| } | |