Merge pull request #23 from tips-of-mine/correction/personnalisation-couleurs-css

Corriger la personnalisation des couleurs CSS et la documentation

app/public/css/dark-mode.css

@@ -25,19 +25,19 @@ body.dark-mode {
     --message-error-color: #ff9999;
     --input-border: #666;
     --input-focus-border: #007bff;
-}
+    --button-logout-bg: #d32f2f; /* Ajusté pour le mode sombre, peut-être plus sombre que le danger normal */
-
+    --button-logout-hover-bg: #b71c1c;
-body.dark-mode .app-footer {
+    --message-success-bg: #2a4f2a; /* Exemple, à ajuster */
-    background-color: #1a1a1a;
+    --message-success-border-color: #385e38; /* Exemple, à ajuster */
-    color: #ccc;
+    --message-error-bg: #5f2929; /* Exemple, à ajuster */
-}
+    --message-error-border-color: #723737; /* Exemple, à ajuster */
-
+    --table-row-hover-bg: rgba(255, 255, 255, 0.08); /* Plus clair en mode sombre */
-body.dark-mode tr.revoked-cert {
+    --certificate-entry-border-color: #4a4a4a; /* Plus foncé pour le mode sombre */
-    background-color: #5c2c2c; /* Fond plus foncé pour le mode sombre */
+    --footer-bg: #1a1a1a; /* Déjà présent, juste vérifier */
-    color: #aaa;
+    --footer-text-color: #ccc; /* Déjà présent, juste vérifier */
-}
+    --revoked-cert-text-color: #aaa; /* Déjà présent, juste vérifier */
-body.dark-mode tr.revoked-cert:hover {
+    --revoked-cert-bg-color: #5c2c2c; /* Déjà présent, juste vérifier */
-    background-color: #703c3c;
+    --revoked-cert-hover-bg-color: #703c3c; /* Déjà présent, juste vérifier */
 }
 
 /* Spécifiques pour les inputs en mode sombre */
@@ -53,5 +53,5 @@ body.dark-mode form input[type="text"]:focus,
 body.dark-mode form input[type="password"]:focus,
 body.dark-mode form select:focus {
     border-color: var(--input-focus-border);
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
 }

app/public/css/style.css

@@ -1,3 +1,17 @@
+/*
+PERSONNALISATION DES COULEURS :
+Ce fichier utilise des variables CSS pour définir la palette de couleurs de l'application.
+Pour personnaliser le thème, vous pouvez surcharger ces variables. Par exemple,
+dans une feuille de style distincte ou directement dans les outils de développement de votre navigateur :
+
+:root {
+  --primary-bg-color: #votrecouleur;
+  --text-color: #autrecouleur;
+  ...etc.
+}
+
+Les variables pour le mode sombre sont définies dans `dark-mode.css` en utilisant le sélecteur `body.dark-mode`.
+*/
 /* Variables CSS pour faciliter le basculement entre les thèmes */
 :root {
     --bg-color: #f4f4f4;
@@ -25,6 +39,19 @@
     --message-error-color: red;
     --input-border: #ccc;
     --input-focus-border: #007bff;
+    --button-logout-bg: #f44336;
+    --button-logout-hover-bg: #d32f2f;
+    --message-success-bg: #d4edda;
+    --message-success-border-color: #c3e6cb;
+    --message-error-bg: #f8d7da;
+    --message-error-border-color: #f5c6cb;
+    --table-row-hover-bg: rgba(0, 0, 0, 0.05);
+    --certificate-entry-border-color: #eee;
+    --footer-bg: #333;
+    --footer-text-color: #f4f4f4;
+    --revoked-cert-text-color: #888;
+    --revoked-cert-bg-color: #fce4e4;
+    --revoked-cert-hover-bg-color: #fcc;
 }
 
 /* Styles généraux */
@@ -144,18 +171,18 @@ nav ul li a:hover {
 
 /* Styles des messages */
 .success-message {
-    background-color: #d4edda;
+    background-color: var(--message-success-bg);
     color: var(--message-success-color);
-    border: 1px solid #c3e6cb;
+    border: 1px solid var(--message-success-border-color);
     padding: 10px;
     border-radius: 8px;
     margin-bottom: 15px;
 }
 
 .error-message {
-    background-color: #f8d7da;
+    background-color: var(--message-error-bg);
     color: var(--message-error-color);
-    border: 1px solid #f5c6cb;
+    border: 1px solid var(--message-error-border-color);
     padding: 10px;
     border-radius: 8px;
     margin-bottom: 15px;
@@ -194,7 +221,7 @@ tr:nth-child(even) {
 }
 
 tr:hover {
-    background-color: rgba(0, 0, 0, 0.05); /* Léger survol */
+    background-color: var(--table-row-hover-bg); /* Léger survol */
 }
 
 /* Styles des boutons */
@@ -240,10 +267,10 @@ tr:hover {
 }
 
 .logout-button {
-    background-color: #f44336;
+    background-color: var(--button-logout-bg);
 }
 .logout-button:hover {
-    background-color: #d32f2f;
+    background-color: var(--button-logout-hover-bg);
 }
 
 .actions-bar {
@@ -302,17 +329,17 @@ form button[type="submit"] {
 /* Ligne de certificat révoqué */
 tr.revoked-cert {
     text-decoration: line-through;
-    color: #888;
+    color: var(--revoked-cert-text-color);
-    background-color: #fce4e4; /* Léger fond rouge pour le mode clair */
+    background-color: var(--revoked-cert-bg-color); /* Léger fond rouge pour le mode clair */
 }
 tr.revoked-cert:hover {
-    background-color: #fcc;
+    background-color: var(--revoked-cert-hover-bg-color);
 }
 
 /* Pied de page de l'application */
 .app-footer {
-    background-color: #333;
+    background-color: var(--footer-bg);
-    color: #f4f4f4;
+    color: var(--footer-text-color);
     text-align: center;
     padding: 15px 0;
     margin-top: auto; /* Pousse le footer en bas */
@@ -372,7 +399,7 @@ tr.revoked-cert:hover {
     align-items: center; /* Centre les enfants verticalement */
     margin-bottom: 10px; /* Ajoute un peu d'espace entre les entrées de certificat */
     padding: 10px; /* Ajoute un peu de rembourrage à l'intérieur de chaque entrée */
-    border: 1px solid #eee; /* Optionnel : ajoute une bordure pour mieux visualiser les boîtes */
+    border: 1px solid var(--certificate-entry-border-color); /* Optionnel : ajoute une bordure pour mieux visualiser les boîtes */
     flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans si nécessaire */
 }