Browse Source

style: boutons en cartouche arrondi (rounded-full) avec couleurs distinctes

- Primary  : bleu plein + ombre légère
- Secondary: ardoise clair (slate-100/200)
- Ghost    : gris neutre (gray-100/200)
- Danger   : rouge clair (red-100/200) + rouge plein pour confirmation restauration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Cédric Hansen 1 tháng trước cách đây
mục cha
commit
83716ff4d2
2 tập tin đã thay đổi với 11 bổ sung11 xóa
  1. 10 10
      sources/templates/base.html
  2. 1 1
      sources/templates/restore_confirm.html

+ 10 - 10
sources/templates/base.html

@@ -7,17 +7,17 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <script type="text/tailwindcss">
     @layer components {
-      /* Bouton principal (créer, lancer, enregistrer) */
-      .btn-primary   { @apply inline-flex items-center gap-1.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition; }
-      /* Bouton secondaire (tester, éditer, sync, historique) */
-      .btn-secondary { @apply inline-flex items-center gap-1.5 bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 font-medium rounded transition; }
-      /* Bouton icône / action légère */
-      .btn-ghost     { @apply inline-flex items-center gap-1 text-gray-500 hover:text-gray-800 hover:bg-gray-100 rounded transition; }
-      /* Bouton destructeur */
-      .btn-danger    { @apply inline-flex items-center gap-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition; }
+      /* Bouton principal (créer, lancer, enregistrer) — bleu */
+      .btn-primary   { @apply inline-flex items-center gap-1.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-sm transition; }
+      /* Bouton secondaire (tester, éditer, sync, historique) — gris ardoise */
+      .btn-secondary { @apply inline-flex items-center gap-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium rounded-full transition; }
+      /* Bouton action légère (rapatrier, toggle, télécharger) — gris neutre */
+      .btn-ghost     { @apply inline-flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-600 font-medium rounded-full transition; }
+      /* Bouton destructeur — rouge */
+      .btn-danger    { @apply inline-flex items-center gap-1 bg-red-100 hover:bg-red-200 text-red-600 font-medium rounded-full transition; }
       /* Tailles */
-      .btn-sm  { @apply text-xs px-3 py-1.5; }
-      .btn-md  { @apply text-sm px-5 py-2; }
+      .btn-sm      { @apply text-xs px-3 py-1.5; }
+      .btn-md      { @apply text-sm px-5 py-2; }
       .btn-icon-sm { @apply text-xs px-2 py-1; }
     }
   </script>

+ 1 - 1
sources/templates/restore_confirm.html

@@ -92,7 +92,7 @@
 
     <form method="post" class="flex gap-3">
       <button type="submit"
-              class="inline-flex items-center gap-1.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition btn-md">
+              class="inline-flex items-center gap-1.5 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-full shadow-sm transition btn-md">
         Confirmer la restauration
       </button>
       <a href="{{ url_for('jobs.index') }}" class="btn-secondary btn-md">Annuler</a>