Basculer la recherche
Basculer le menu
63
1,9 k
13
5,7 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

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

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
Hiob (discussion | contributions)
owner
4 083 modifications
m taille icone et position
Hiob (discussion | contributions)
owner
4 083 modifications
tiktok + threads background
 
(20 versions intermédiaires par le même utilisateur non affichées)
Ligne 4 : Ligne 4 :


.icon-button {
.icon-button {
     width: 48px;
     width: 60px;
     height: 48px;
     height: 60px;
     border-radius: 8px;
     border-radius: 8px;
     overflow: hidden;
     overflow: hidden;
Ligne 30 : Ligne 30 :
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     padding: 0;
     padding: 8px !important;
    box-sizing: border-box;
     color: transparent !important;
     color: transparent !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}


.icon-button a:hover,
/* Conteneur d'image */
.icon-button a:visited {
    color: transparent !important;
}
 
/* Conteneur d'image - prend tout l'espace */
.icon-button .mw-file-description {
.icon-button .mw-file-description {
     display: flex !important;
     display: flex !important;
Ligne 48 : Ligne 44 :
     height: 100% !important;
     height: 100% !important;
     margin: 0 !important;
     margin: 0 !important;
     padding: 8px;
     padding: 0 !important;
    box-sizing: border-box;
}
}


/* Image responsive - remplit le conteneur */
/* Image responsive */
.icon-button img {
.icon-button img {
     max-width: 100% !important;
     max-width: 100% !important;
     max-height: 100% !important;
     max-height: 100% !important;
     width: auto !important;
     width: 100% !important;
     height: auto !important;
     height: 100% !important;
     object-fit: contain;
     object-fit: contain !important;
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
}
Ligne 70 : Ligne 65 :


/* RÉSEAUX SOCIAUX */
/* RÉSEAUX SOCIAUX */
.icon-button--bluesky { background: #0085ff; }
.icon-button--discord { background: #5865f2; }
.icon-button--discord { background: #5865f2; }
.icon-button--twitter { background: #1da1f2; }
.icon-button--x { background: #000000; }
.icon-button--mastodon { background: #6364ff; }
.icon-button--facebook { background: #1877f2; }
.icon-button--facebook { background: #1877f2; }
.icon-button--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.icon-button--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.icon-button--youtube { background: #ff0000; }
.icon-button--linkedin { background: #0077b5; }
.icon-button--twitch { background: #9146ff; }
.icon-button--mastodon { background: #6364ff; }
.icon-button--tiktok { background: #000000; }
.icon-button--linkedin { background: #0a66c2; }
.icon-button--reddit { background: #ff4500; }
.icon-button--reddit { background: #ff4500; }
.icon-button--snapchat { background: #fffc00; }
.icon-button--snapchat { background: #fffc00; }
.icon-button--pinterest { background: #e60023; }
.icon-button--threads { background: linear-gradient(135deg, #405DE6 0%, #5B51D8 25%, #833AB4 50%, #C13584 75%, #E1306C 100%); }
.icon-button--telegram { background: #26a5e4; }
.icon-button--threads:hover { background: linear-gradient(135deg, #3651d1 0%, #4d43c3 25%, #6f2f9f 50%, #a92d70 75%, #c72b5c 100%); box-shadow: 0 4px 16px rgba(225, 48, 108, 0.4); }
.icon-button--whatsapp { background: #25d366; }
.icon-button--tiktok { background: linear-gradient(135deg, #2DCCD3 0%, #F1204A 100%); }
.icon-button--signal { background: #3a76f0; }
.icon-button--twitch { background: #9146ff; }
.icon-button--twitter { background: #1da1f2; }
.icon-button--youtube { background: #ff0000; }
 
/* HÉBERGEMENT DE CODE */
.icon-button--github { background: #24292e; }
.icon-button--gitlab { background: #fc6f23; }


/* PLATEFORMES TECH */
/* SERVICES DE DÉVELOPPEMENT */
.icon-button--github { background: #181717; }
.icon-button--codepen { background: #ffffff; }
.icon-button--gitlab { background: #fc6d26; }
.icon-button--docker { background: #2496ed; }
.icon-button--gradle { background: #02303a; }
.icon-button--jenkins { background: #d24939; }
.icon-button--kubernetes { background: #326ce5; }
.icon-button--maven { background: #c71a36; }
.icon-button--npm { background: #cb3837; }
.icon-button--stackoverflow { background: #f48024; }
.icon-button--stackoverflow { background: #f48024; }
.icon-button--dev { background: #0a0a0a; }
.icon-button--medium { background: #000000; }
.icon-button--substack { background: #ff6719; }
.icon-button--hashnode { background: #2962ff; }


/* GAMING */
/* MINECRAFT MODLOADERS */
.icon-button--steam { background: #171a21; }
.icon-button--fabric { background: #dbd3c8; }
.icon-button--epicgames { background: #313131; }
.icon-button--forge { background: #1e2c42; }
.icon-button--playstation { background: #003087; }
.icon-button--minecraft { background: #62b47a; }
.icon-button--xbox { background: #107c10; }
.icon-button--neoforge { background: #ff6b35; }
.icon-button--nintendo { background: #e60012; }
.icon-button--quilt { background: #8b5cf6; }


/* MUSIQUE/VIDÉO */
/* PLATEFORMES DE PLUGINS */
.icon-button--spotify { background: #1db954; }
.icon-button--bukkit { background: #f7931e; }
.icon-button--soundcloud { background: #ff5500; }
.icon-button--curseforge { background: #f16436; }
.icon-button--applemusic { background: #fa243c; }
.icon-button--github-releases { background: #238636; }
.icon-button--deezer { background: #00c7f2; }
.icon-button--hangar { background: #0089ff; }
.icon-button--vimeo { background: #1ab7ea; }
.icon-button--modrinth { background: #1bd96a; }
.icon-button--dailymotion { background: #0066dc; }
.icon-button--paper { background: #1a8cff; }
.icon-button--polymart { background: #2196f3; }
.icon-button--purpur { background: #a855f7; }
.icon-button--spigot { background: #ed8106; }


/* OUTILS PRO */
/* PLATEFORMES DE FINANCEMENT */
.icon-button--slack { background: #4a154b; }
.icon-button--buymeacoffee { background: #ffdd00; }
.icon-button--notion { background: #000000; }
.icon-button--helloasso { background: #4C40CF; }
.icon-button--trello { background: #0052cc; }
.icon-button--kofi { background: #ff5e5b; }
.icon-button--asana { background: #f06a6a; }
.icon-button--liberapay { background: #f6c915; }
.icon-button--jira { background: #0052cc; }
.icon-button--opencollective { background: #7fadf2; }
.icon-button--patreon { background: #ff424d; }
.icon-button--paypal { background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%); }
.icon-button--qonto { background: #1d1d1d; }
.icon-button--stripe { background: #635BFF; }


/* COULEURS GÉNÉRIQUES */
/* COULEURS STANDARDS */
.icon-button--primary, .icon-button--blue { background: #3366cc; }
.icon-button--primary, .icon-button--blue { background: #3366cc; }
.icon-button--secondary, .icon-button--gray, .icon-button--grey { background: #72777d; }
.icon-button--secondary, .icon-button--gray, .icon-button--grey { background: #72777d; }
Récupérée de "https://wiki.nefald.fr/Modèle:IconButton/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.