Basculer la recherche
Basculer le menu
61
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:Button/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Hiob (discussion | contributions)
owner
4 069 modifications
m ajustement de la var
Hiob (discussion | contributions)
owner
4 069 modifications
mAucun résumé des modifications
Ligne 27 : 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-color: var(--background-color-progressive); /* ← MÊME VARIABLE QUE CITIZEN */
     background-color: var(--background-color-progressive);
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
Ligne 36 : 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); /* ← HOVER CITIZEN */
     background-color: var(--background-color-progressive--hover);
}
}


Ligne 47 : Ligne 47 :


.button-link-content a {
.button-link-content a {
     color: var(--color-inverted-primary) !important; /* ← MÊME VARIABLE QUE CITIZEN */
     color: var(--color-inverted-primary) !important;
     text-decoration: none !important;
     text-decoration: none !important;
     display: flex;
     display: flex;
Ligne 90 : Ligne 90 :


/* ============================================
/* ============================================
   COULEURS PRÉDÉFINIES
   COULEURS PRÉDÉFINIES (logos)
   ============================================ */
   ============================================ */


/* ========== COULEURS GÉNÉRIQUES ========== */
/* ========== COULEURS GÉNÉRIQUES ========== */
.button-link--danger { background: #dc3545; }
.button-link--danger { background-color: #dc3545 !important; }
.button-link--dark { background: #343a40; }
.button-link--dark { background-color: var(--btn-surface-4) !important; }
.button-link--info { background: #17a2b8; }
.button-link--info { background-color: #17a2b8 !important; }
 
.button-link--light {  
.button-link--light {  
     background: var(--btn-surface-1);  
     background-color: var(--btn-surface-1) !important;  
}
}
.button-link--light .button-link-content a {
.button-link--light .button-link-content a {
     color: var(--btn-text-dark) !important;
     color: var(--btn-text-dark) !important;
}
}
 
/* ❌ SUPPRIMÉ : .button-link--primary (utilise le défaut) */
.button-link--primary { background: var(--btn-progressive); }
 
.button-link--secondary {  
.button-link--secondary {  
     background: var(--btn-surface-2);  
     background-color: var(--btn-surface-2) !important;  
}
}
.button-link--secondary .button-link-content a {
.button-link--secondary .button-link-content a {
     color: var(--btn-text-dark) !important;
     color: var(--btn-text-dark) !important;
}
}
 
.button-link--success { background-color: #28a745 !important; }
.button-link--success { background: #28a745; }
 
.button-link--warning {  
.button-link--warning {  
     background: #ffc107;  
     background-color: #ffc107 !important;  
}
}
.button-link--warning .button-link-content a {
.button-link--warning .button-link-content a {
Ligne 123 : Ligne 118 :
}
}


/* ========== VARIABLES CITIZEN (surfaces adaptatives) ========== */
/* ========== OUTILS DE DÉVELOPPEMENT ========== */
.button-link--surface-0 {  
.button-link--codepen { background-color: #000000 !important; }
    background: var(--btn-surface-0);  
.button-link--docker { background-color: #2496ed !important; }
}
.button-link--gradle { background-color: #02303a !important; }
.button-link--surface-0 .button-link-content a {
.button-link--jenkins { background-color: #d24939 !important; }
    color: var(--btn-text-dark) !important;  
.button-link--kubernetes { background-color: #326ce5 !important; }
}
.button-link--maven { background-color: #c71a36 !important; }
 
.button-link--npm { background-color: #cb3837 !important; }
.button-link--surface-1 {  
.button-link--stackoverflow { background-color: #f48024 !important; }
    background: var(--btn-surface-1);  
}
.button-link--surface-1 .button-link-content a {
    color: var(--btn-text-dark) !important;  
}
 
.button-link--surface-2 {  
    background: var(--btn-surface-2);
}
.button-link--surface-2 .button-link-content a {
    color: var(--btn-text-dark) !important;  
}
 
.button-link--surface-3 {  
    background: var(--btn-surface-3);
}
.button-link--surface-3 .button-link-content a {
    color: var(--btn-text-dark) !important;  
}
 
.button-link--surface-4 {  
    background: var(--btn-surface-4);
}
.button-link--surface-4 .button-link-content a {
    color: var(--btn-text-light) !important;  
}
 
.button-link--progressive {  
    background: var(--btn-progressive);  
}


/* ========== RÉSEAUX SOCIAUX ========== */
/* ========== RÉSEAUX SOCIAUX ========== */
.button-link--bluesky { background: #0085ff; }
.button-link--discord { background-color: #5865f2 !important; }
.button-link--discord { background: #5865f2; }
.button-link--facebook { background-color: #1877f2 !important; }
.button-link--facebook { background: #1877f2; }
.button-link--github { background-color: #24292e !important; }
.button-link--gitlab { background-color: #fc6d26 !important; }
.button-link--instagram {  
.button-link--instagram {  
     background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
     background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%) !important;  
}
.button-link--linkedin { background: #0077b5; }
.button-link--mastodon { background: #6364ff; }
.button-link--reddit { background: #ff4500; }
 
.button-link--snapchat {
    background: #fffc00;
}
.button-link--snapchat .button-link-content a {
    color: #000 !important;
}
 
.button-link--threads { background: #000000; }
.button-link--tiktok { background: #000000; }
.button-link--twitch { background: #9146ff; }
.button-link--twitter { background: #1da1f2; }
.button-link--x { background: #000000; }
.button-link--youtube { background: #ff0000; }
 
/* ========== HÉBERGEMENT DE CODE ========== */
.button-link--github { background: #24292e; }
 
.button-link--gitlab { background: #fc6f23; }
 
/* ========== SERVICES DE DÉVELOPPEMENT ========== */
.button-link--codepen {
    background: #000000;  
}
}
 
.button-link--linkedin { background-color: #0a66c2 !important; }
.button-link--docker { background: #2496ed; }
.button-link--mastodon { background-color: #6364ff !important; }
.button-link--gradle { background: #02303a; }
.button-link--reddit { background-color: #ff4500 !important; }
.button-link--jenkins { background: #d24939; }
.button-link--telegram { background-color: #0088cc !important; }
.button-link--kubernetes { background: #326ce5; }
.button-link--tiktok { background-color: #000000 !important; }
.button-link--maven { background: #c71a36; }
.button-link--twitch { background-color: #9146ff !important; }
.button-link--npm { background: #cb3837; }
.button-link--x { background-color: #000000 !important; }
.button-link--stackoverflow { background: #f48024; }
.button-link--youtube { background-color: #ff0000 !important; }


/* ========== MINECRAFT MODLOADERS ========== */
/* ========== MINECRAFT MODLOADERS ========== */
.button-link--fabric {  
.button-link--fabric {  
     background: #dbd3c8;  
     background-color: #dbd3c8 !important;  
}
}
.button-link--fabric .button-link-content a {
.button-link--fabric .button-link-content a {
     color: #000 !important;
     color: #000 !important;
}
}
 
.button-link--forge { background-color: #1e2c42 !important; }
.button-link--forge { background: #1e2c42; }
.button-link--minecraft { background-color: #62b47a !important; }
.button-link--minecraft { background: #62b47a; }
.button-link--neoforge { background-color: #ff6b35 !important; }
.button-link--neoforge { background: #ff6b35; }
.button-link--quilt { background-color: #8b5cf6 !important; }
.button-link--quilt { background: #8b5cf6; }


/* ========== PLATEFORMES DE PLUGINS ========== */
/* ========== PLATEFORMES DE PLUGINS ========== */
.button-link--bukkit { background: #f7931e; }
.button-link--bukkit { background-color: #f7931e !important; }
.button-link--curseforge { background: #f16436; }
.button-link--curseforge { background-color: #f16436 !important; }
.button-link--github-releases { background: #238636; }
.button-link--github-releases { background-color: #238636 !important; }
.button-link--hangar { background: #0089ff; }
.button-link--hangar { background-color: #0089ff !important; }
.button-link--modrinth { background: #1bd96a; }
.button-link--modrinth { background-color: #1bd96a !important; }
.button-link--paper { background: #1a8cff; }
.button-link--paper { background-color: #1a8cff !important; }
.button-link--polymart { background: #2196f3; }
.button-link--polymart { background-color: #2196f3 !important; }
.button-link--purpur { background: #a855f7; }
.button-link--purpur { background-color: #a855f7 !important; }
.button-link--spigot { background: #ed8106; }
.button-link--spigot { background-color: #ed8106 !important; }


/* ========== PLATEFORMES DE FINANCEMENT ========== */
/* ========== PLATEFORMES DE FINANCEMENT ========== */
.button-link--buymeacoffee {  
.button-link--buymeacoffee {  
     background: #ffdd00;  
     background-color: #ffdd00 !important;  
}
}
.button-link--buymeacoffee .button-link-content a {
.button-link--buymeacoffee .button-link-content a {
     color: #000 !important;
     color: #000 !important;
}
}
 
.button-link--helloasso { background-color: #4C40CF !important; }
.button-link--helloasso {  
.button-link--helloasso:hover { background-color: #3d33a6 !important; }
    background: #4C40CF;  
.button-link--kofi { background-color: #ff5e5b !important; }
}
.button-link--helloasso:hover {  
    background: #3d33b3;  
}
 
.button-link--kofi { background: #ff5e5b; }
 
.button-link--liberapay {  
.button-link--liberapay {  
     background: #f6c915;  
     background-color: #f6c915 !important;  
}
}
.button-link--liberapay .button-link-content a {
.button-link--liberapay .button-link-content a {
     color: #000 !important;
     color: #000 !important;
}
}
 
.button-link--opencollective { background-color: #7fadf2 !important; }
.button-link--opencollective { background: #7fadf2; }
.button-link--patreon { background-color: #ff424d !important; }
.button-link--patreon { background: #ff424d; }
 
.button-link--paypal {  
.button-link--paypal {  
     background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%);  
     background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%) !important;  
}
}
.button-link--paypal:hover {  
.button-link--paypal:hover {  
     background: linear-gradient(135deg, #005ea6 0%, #003087 100%);  
     background: linear-gradient(135deg, #005ea6 0%, #003087 100%) !important;  
}
}
 
.button-link--qonto { background-color: #1d1d1d !important; }
.button-link--qonto { background: #1d1d1d; }
.button-link--stripe { background-color: #635BFF !important; }
.button-link--stripe { background: #635BFF; }


/* ============================================
/* ============================================
Récupérée de "https://wiki.nefald.fr/Modèle:Button/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.