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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 3 : / Ligne 3 : @@
     ============================================ */
 .button-link-vars {
-    --btn-progressive: #36c;
-    --btn-progressive-hover: #2563eb;
      --btn-surface-0: var(--color-surface-0);
      --btn-surface-1: var(--color-surface-1);
@@ Ligne 10 : / Ligne 8 : @@
      --btn-surface-3: var(--color-surface-3);
      --btn-surface-4: var(--color-surface-4);
-    --btn-text-light: #ffffff;
      --btn-text-dark: var(--color-base);
-     margin-bottom: 8px;
+    margin-bottom: 8px;
 }
@@ Ligne 30 : / Ligne 27 : @@
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: relative;
-     background: var(--btn-progressive); /* #36c PAR DÉFAUT */
+     background-color: var(--background-color-progressive); /* ← MÊME VARIABLE QUE CITIZEN */
      display: flex;
      align-items: center;
@@ Ligne 39 : / Ligne 36 : @@
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-}
+    background-color: var(--background-color-progressive--hover); /* ← HOVER CITIZEN */
-/* Hover couleur progressive uniquement pour le bouton par défaut */
-.button-link-wrapper:not([class*="button-link--"]):hover {
-    background: var(--btn-progressive-hover);
 }
@@ Ligne 54 : / Ligne 47 : @@
 .button-link-content a {
-     color: var(--btn-text-light) !important;
+     color: var(--color-inverted-primary) !important; /* ← MÊME VARIABLE QUE CITIZEN */
      text-decoration: none !important;
      display: flex;
@@ Ligne 63 : / Ligne 56 : @@
 }
+/* Force la couleur même après visite */
 .button-link-content a:hover,
-.button-link-content a:visited {
+.button-link-content a:visited,
-     color: inherit !important;
+.button-link-content a:active {
+     color: var(--color-inverted-primary) !important;
 }