« 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: oklch(var(--color-progressive-oklch__l) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));
+     --btn-progressive: #36c;
+    --btn-progressive-hover: #2563eb;
+    --btn-surface-0: var(--color-surface-0);
      --btn-surface-1: var(--color-surface-1);
      --btn-surface-2: var(--color-surface-2);
-     --btn-text: var(--color-surface-0);
+     --btn-surface-3: var(--color-surface-3);
+    --btn-surface-4: var(--color-surface-4);
+    --btn-text-light: #ffffff;
+    --btn-text-dark: var(--color-base);
 }
@@ Ligne 19 : / Ligne 24 : @@
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      position: relative;
-     background: var(--btn-progressive, #3366cc); /* BLEU PAR DÉFAUT */
+     background: var(--btn-progressive); /* #36c PAR DÉFAUT */
      display: flex;
      align-items: center;
      justify-content: center;
 }
 .button-link-wrapper:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    background: var(--btn-progressive-hover);
 }
@@ Ligne 39 : / Ligne 44 : @@
 .button-link-content a {
-     color: var(--btn-text, white) !important;
+     color: var(--btn-text-light) !important;
      text-decoration: none !important;
      display: flex;
@@ Ligne 50 : / Ligne 55 : @@
 .button-link-content a:hover,
 .button-link-content a:visited {
-     color: var(--btn-text, white) !important;
+     color: var(--btn-text-light) !important;
 }
@@ Ligne 80 : / Ligne 85 : @@
 /* ============================================
-    COULEURS PRÉDÉFINIES
+    COULEURS PRÉDÉFINIES (logos)
     ============================================ */
-/* ========== COULEURS CITIZEN (Variables dynamiques) ========== */
+/* ========== COULEURS GÉNÉRIQUES ========== */
-.button-link--primary {
+.button-link--danger { background: #dc3545; }
-    background: var(--btn-progressive, #007bff);
+.button-link--dark { background: #343a40; }
-}
+.button-link--info { background: #17a2b8; }
-.button-link--secondary {
-    background: var(--btn-surface-2, #6c757d);
-}
 .button-link--light {
-     background: var(--btn-surface-1, #f8f9fa);
+     background: var(--btn-surface-1);
-    color: var(--color-base, #000) !important;
 }
 .button-link--light .button-link-content a {
-     color: var(--color-base, #000) !important;
+     color: var(--btn-text-dark) !important;
 }
+.button-link--primary { background: var(--btn-progressive); }
-/* ========== COULEURS GÉNÉRIQUES ========== */
+.button-link--secondary { background: var(--btn-surface-2); }
-.button-link--danger { background: #dc3545; }
-.button-link--dark { background: #343a40; }
-.button-link--info { background: #17a2b8; }
 .button-link--success { background: #28a745; }
-.button-link--warning {
+.button-link--warning { background: #ffc107; }
-    background: #ffc107;
-    color: #000 !important;
-}
 .button-link--warning .button-link-content a {
      color: #000 !important;
 }
+/* ========== VARIABLES CITIZEN (nouvelles options) ========== */
+.button-link--surface-0 { 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-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 ========== */