« Modèle:Badge/styles.css » : différence entre les versions
De Nefald
Autres actions
flat |
mAucun résumé des modifications |
||
| (5 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* ============================================ | /* ============================================ | ||
BADGE SYSTEM - Design FLAT | BADGE SYSTEM - Design FLAT lisible | ||
============================================ */ | ============================================ */ | ||
| Ligne 6 : | Ligne 6 : | ||
.badge { | .badge { | ||
display: inline-block; | display: inline-block; | ||
font-size: 0. | font-size: 0.65em; | ||
font-weight: | font-weight: 600; | ||
padding: 0. | padding: 0.5em 0.9em; | ||
border-radius: | border-radius: 3px; | ||
margin-left: 0.5em; | margin-left: 0.5em; | ||
vertical-align: middle; | vertical-align: middle; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: | letter-spacing: 1px; | ||
transition: all 0.2s ease; | transition: all 0.2s ease; | ||
white-space: nowrap; | white-space: nowrap; | ||
line-height: 1. | line-height: 1.4; | ||
border: none; | border: none; | ||
box-shadow: none; | box-shadow: none; | ||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; | |||
} | } | ||
.badge:hover { | .badge:hover { | ||
filter: brightness(1. | filter: brightness(1.15); | ||
transform: translateY(-1px); | transform: translateY(-1px); | ||
} | } | ||
| Ligne 64 : | Ligne 65 : | ||
} | } | ||
/* WIP (violet | /* WIP (violet clair) */ | ||
.badge-wip { | .badge-wip { | ||
background: #8b5cf6; | background: #8b5cf6; | ||
| Ligne 86 : | Ligne 87 : | ||
background: #f59e0b; | background: #f59e0b; | ||
color: #1f2937; | color: #1f2937; | ||
font-weight: 700; | |||
} | } | ||
| Ligne 104 : | Ligne 106 : | ||
background: #f59e0b; | background: #f59e0b; | ||
color: #1f2937; | color: #1f2937; | ||
font-weight: 700; | |||
} | } | ||
| Ligne 116 : | Ligne 119 : | ||
background: #e5e7eb; | background: #e5e7eb; | ||
color: #1f2937; | color: #1f2937; | ||
font-weight: 700; | |||
} | } | ||
| Ligne 130 : | Ligne 134 : | ||
} | } | ||
/* Instagram | /* Instagram */ | ||
.badge-instagram { | .badge-instagram { | ||
background: #E1306C; | background: #E1306C; | ||
| Ligne 136 : | Ligne 140 : | ||
} | } | ||
/* === Icônes | /* === Icônes === */ | ||
/* Icône AVANT le texte */ | |||
.badge > span:first-child, | |||
.badge > i:first-child { | |||
margin-right: 0; | |||
margin-left: 0.6em; | |||
} | |||
/* Icône APRÈS le texte */ | |||
.badge > span:last-child:not(:first-child), | |||
.badge > i:last-child:not(:first-child) { | |||
margin-left: 0; | |||
margin-right: 0.6em; | |||
} | |||
.badge .fa | /* Alignement vertical des icônes FontAwesome */ | ||
.badge . | .badge .fa, | ||
.badge . | .badge .fas, | ||
.badge .far, | |||
font-size: | .badge .fab { | ||
font-size: 0.6em; | |||
vertical-align: middle; | vertical-align: middle; | ||
line-height: 1; | |||
display: inline-block; | |||
} | } | ||
/* | /* Correction pour l'extension FontAwesome qui génère des <span> */ | ||
.badge | .badge span[class*="fa-"] { | ||
margin-left: 0.6em; | |||
. | |||
margin-right: 0; | margin-right: 0; | ||
} | } | ||
.badge span[class*="fa-"]:first-child { | |||
margin-left: 0; | |||
margin-right: 0.6em; | |||
} | |||
/* === Variantes de taille === */ | /* === Variantes de taille === */ | ||
.badge-sm { | .badge-sm { | ||
font-size: 0. | font-size: 0.55em; | ||
padding: 0. | padding: 0.4em 0.75em; | ||
} | } | ||
.badge-lg { | .badge-lg { | ||
font-size: 0. | font-size: 0.75em; | ||
padding: 0. | padding: 0.6em 1.1em; | ||
} | } | ||
.badge-xl { | .badge-xl { | ||
font-size: 0. | font-size: 0.85em; | ||
padding: 0. | padding: 0.7em 1.3em; | ||
} | } | ||
| Ligne 177 : | Ligne 200 : | ||
/* Badge outline */ | /* Badge outline */ | ||
.badge-outline { | .badge-outline { | ||
background: transparent | background: transparent; | ||
border: 2px solid currentColor; | border: 2px solid currentColor; | ||
font-weight: | font-weight: 700; | ||
} | } | ||
| Ligne 200 : | Ligne 223 : | ||
color: #06b6d4; | color: #06b6d4; | ||
border-color: #06b6d4; | border-color: #06b6d4; | ||
} | |||
.badge-outline.badge-stable { | |||
color: #3b82f6; | |||
border-color: #3b82f6; | |||
} | } | ||
| Ligne 209 : | Ligne 237 : | ||
/* Badge carré */ | /* Badge carré */ | ||
.badge-square { | .badge-square { | ||
border-radius: | border-radius: 0; | ||
} | } | ||
| Ligne 215 : | Ligne 243 : | ||
.badge-glow:hover { | .badge-glow:hover { | ||
box-shadow: 0 0 | box-shadow: 0 0 15px currentColor; | ||
} | } | ||
| Ligne 257 : | Ligne 264 : | ||
} | } | ||
/* === | /* === Icônes FontAwesome === */ | ||
.badge .fa-solid, | |||
.badge- | .badge .fa-regular, | ||
.badge .fa-brands { | |||
margin-right: 0.45em; | |||
font-size: 1.1em; | |||
vertical-align: middle; | |||
} | } | ||
/* Icône seule - version simplifiée */ | |||
.badge-icon-only .fa-solid, | |||
.badge-icon-only .fa-regular, | |||
.badge-icon-only .fa-brands { | |||
margin-right: 0; | |||
/* | |||
.badge | |||
.badge | |||
. | |||
} | } | ||