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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 33 : / Ligne 33 : @@
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+/* Hover couleur progressive uniquement pour le bouton par défaut */
+.button-link-wrapper:not([class*="button-link--"]):hover {
      background: var(--btn-progressive-hover);
 }
@@ Ligne 55 : / Ligne 59 : @@
 .button-link-content a:hover,
 .button-link-content a:visited {
-     color: var(--btn-text-light) !important;
+     color: inherit !important;
 }
@@ Ligne 85 : / Ligne 89 : @@
 /* ============================================
-    COULEURS PRÉDÉFINIES (logos)
+    COULEURS PRÉDÉFINIES
     ============================================ */
@@ Ligne 92 : / Ligne 96 : @@
 .button-link--dark { background: #343a40; }
 .button-link--info { background: #17a2b8; }
 .button-link--light {
      background: var(--btn-surface-1);
@@ Ligne 98 : / Ligne 103 : @@
      color: var(--btn-text-dark) !important;
 }
 .button-link--primary { background: var(--btn-progressive); }
-.button-link--secondary { background: var(--btn-surface-2); }
+.button-link--secondary {
+    background: var(--btn-surface-2);
+}
+.button-link--secondary .button-link-content a {
+    color: var(--btn-text-dark) !important;
+}
 .button-link--success { background: #28a745; }
-.button-link--warning { background: #ffc107; }
+.button-link--warning {
+    background: #ffc107;
+}
 .button-link--warning .button-link-content a {
      color: #000 !important;
 }
-/* ========== VARIABLES CITIZEN (nouvelles options) ========== */
+/* ========== VARIABLES CITIZEN (surfaces adaptatives) ========== */
-.button-link--surface-0 { background: var(--btn-surface-0); }
+.button-link--surface-0 {
-.button-link--surface-0 .button-link-content a { color: var(--btn-text-dark) !important; }
+    background: var(--btn-surface-0);
+}
+.button-link--surface-0 .button-link-content a {
+    color: var(--btn-text-dark) !important;
+}
-.button-link--surface-1 { background: var(--btn-surface-1); }
+.button-link--surface-1 {
-.button-link--surface-1 .button-link-content a { color: var(--btn-text-dark) !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--surface-2 .button-link-content a { color: var(--btn-text-dark) !important; }
+    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--surface-3 .button-link-content a { color: var(--btn-text-dark) !important; }
+    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--surface-4 .button-link-content a { color: var(--btn-text-light) !important; }
+    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); }
+.button-link--progressive {
+    background: var(--btn-progressive);
+}
 /* ========== RÉSEAUX SOCIAUX ========== */
@@ Ligne 134 : / Ligne 172 : @@
 .button-link--mastodon { background: #6364ff; }
 .button-link--reddit { background: #ff4500; }
 .button-link--snapchat {
      background: #fffc00;
-    color: #000 !important;
 }
 .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: #ffffff; }
+.button-link--codepen {
+    background: #000000;
+}
 .button-link--docker { background: #2496ed; }
 .button-link--gradle { background: #02303a; }
@@ Ligne 162 : / Ligne 206 : @@
 /* ========== MINECRAFT MODLOADERS ========== */
-.button-link--fabric { background: #dbd3c8; }
+.button-link--fabric {
+    background: #dbd3c8;
+}
+.button-link--fabric .button-link-content a {
+    color: #000 !important;
+}
 .button-link--forge { background: #1e2c42; }
 .button-link--minecraft { background: #62b47a; }
@@ Ligne 180 : / Ligne 230 : @@
 /* ========== PLATEFORMES DE FINANCEMENT ========== */
-.button-link--buymeacoffee { background: #ffdd00; }
+.button-link--buymeacoffee {
-.button-link--helloasso { background: #4C40CF; }
+    background: #ffdd00;
-.button-link--helloasso:hover { background: #3d3fc7; }
+}
+.button-link--buymeacoffee .button-link-content a {
+    color: #000 !important;
+}
+.button-link--helloasso {
+    background: #4C40CF;
+}
+.button-link--helloasso:hover {
+    background: #3d33b3;
+}
 .button-link--kofi { background: #ff5e5b; }
-.button-link--liberapay { background: #f6c915; }
+.button-link--liberapay {
+    background: #f6c915;
+}
+.button-link--liberapay .button-link-content a {
+    color: #000 !important;
+}
 .button-link--opencollective { background: #7fadf2; }
 .button-link--patreon { background: #ff424d; }
 .button-link--paypal {
      background: linear-gradient(135deg, #0070ba 0%, #1546a0 100%);
@@ Ligne 193 : / Ligne 262 : @@
      background: linear-gradient(135deg, #005ea6 0%, #003087 100%);
 }
-.button-link--qonto { background: #1d1d1dff; }
+.button-link--qonto { background: #1d1d1d; }
 .button-link--stripe { background: #635BFF; }