« Modèle:IconButton/styles.css » : différence entre les versions
De Nefald
Autres actions
Création |
m taille icone et position |
||
| Ligne 40 : | Ligne 40 : | ||
} | } | ||
/* Conteneur d'image | /* Conteneur d'image - prend tout l'espace */ | ||
.icon-button .mw-file-description { | .icon-button .mw-file-description { | ||
display: flex; | display: flex !important; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: | width: 100% !important; | ||
height: | height: 100% !important; | ||
margin: 0; | margin: 0 !important; | ||
padding: 8px; | |||
box-sizing: border-box; | |||
} | } | ||
/* Image responsive */ | /* Image responsive - remplit le conteneur */ | ||
.icon-button img { | .icon-button img { | ||
max-width: 100%; | max-width: 100% !important; | ||
max-height: 100%; | max-height: 100% !important; | ||
width: auto !important; | width: auto !important; | ||
height: auto !important; | height: auto !important; | ||
object-fit: contain; | object-fit: contain; | ||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); | filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); | ||
} | |||
/* Masquer l'icône de lien externe */ | |||
.icon-button a.external::after { | |||
display: none !important; | |||
} | } | ||
| Ligne 77 : | Ligne 83 : | ||
.icon-button--snapchat { background: #fffc00; } | .icon-button--snapchat { background: #fffc00; } | ||
.icon-button--pinterest { background: #e60023; } | .icon-button--pinterest { background: #e60023; } | ||
.icon-button--telegram { background: #26a5e4; } | |||
.icon-button--whatsapp { background: #25d366; } | .icon-button--whatsapp { background: #25d366; } | ||
.icon-button--signal { background: #3a76f0; } | .icon-button--signal { background: #3a76f0; } | ||
/* | /* PLATEFORMES TECH */ | ||
.icon-button--github { background: #181717; } | .icon-button--github { background: #181717; } | ||
.icon-button--gitlab { background: #fc6d26; } | .icon-button--gitlab { background: #fc6d26; } | ||
.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 */ | ||
.icon-button-- | .icon-button--steam { background: #171a21; } | ||
.icon-button-- | .icon-button--epicgames { background: #313131; } | ||
.icon-button-- | .icon-button--playstation { background: #003087; } | ||
.icon-button--xbox { background: #107c10; } | |||
.icon-button--nintendo { background: #e60012; } | |||
.icon-button-- | |||
.icon-button-- | |||
/* | /* MUSIQUE/VIDÉO */ | ||
.icon-button-- | .icon-button--spotify { background: #1db954; } | ||
.icon-button-- | .icon-button--soundcloud { background: #ff5500; } | ||
.icon-button-- | .icon-button--applemusic { background: #fa243c; } | ||
.icon-button-- | .icon-button--deezer { background: #00c7f2; } | ||
.icon-button--vimeo { background: #1ab7ea; } | |||
.icon-button--dailymotion { background: #0066dc; } | |||
/* | /* OUTILS PRO */ | ||
.icon-button-- | .icon-button--slack { background: #4a154b; } | ||
.icon-button-- | .icon-button--notion { background: #000000; } | ||
.icon-button-- | .icon-button--trello { background: #0052cc; } | ||
.icon-button-- | .icon-button--asana { background: #f06a6a; } | ||
.icon-button--jira { background: #0052cc; } | |||
/* COULEURS | /* COULEURS GÉNÉRIQUES */ | ||
.icon-button--primary | .icon-button--primary, .icon-button--blue { background: #3366cc; } | ||
.icon-button--blue { background: #3366cc; } | .icon-button--secondary, .icon-button--gray, .icon-button--grey { background: #72777d; } | ||
.icon-button--secondary | .icon-button--success, .icon-button--green { background: #14866d; } | ||
.icon-button--gray | .icon-button--danger, .icon-button--red { background: #d73333; } | ||
.icon-button--grey { background: # | .icon-button--warning, .icon-button--yellow { background: #fc3; } | ||
.icon-button--success | .icon-button--info, .icon-button--cyan { background: #00b8d4; } | ||
.icon-button--green { background: #14866d; } | .icon-button--purple, .icon-button--violet { background: #6f42c1; } | ||
.icon-button--danger | |||
.icon-button--red { background: #d73333; } | |||
.icon-button--warning | |||
.icon-button--yellow { background: #fc3; } | |||
.icon-button--info | |||
.icon-button--cyan { background: #00b8d4; } | |||
.icon-button--purple | |||
.icon-button--violet { background: #6f42c1; } | |||
.icon-button--pink { background: #d63384; } | .icon-button--pink { background: #d63384; } | ||
.icon-button--orange { background: #fd7e14; } | .icon-button--orange { background: #fd7e14; } | ||