From f21a4b3655c82bd76e43d1d43c00342a073a038e Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 16 Jun 2025 14:18:14 +0000 Subject: [PATCH] Corriger la personnalisation des couleurs CSS et la documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cette modification ajuste les améliorations précédentes pour la personnalisation des couleurs en se concentrant uniquement sur les fichiers `app/public/css/style.css` et `app/public/css/dark-mode.css`, conformément à vos retours. Changements apportés : 1. Fichier `src/styles/globals.css` : - Restauré à son état d'origine (suppression du commentaire précédemment ajouté). 2. Fichier `app/public/css/style.css`: - Un commentaire a été ajouté en haut du fichier pour expliquer comment personnaliser les couleurs en surchargeant les variables CSS. - Plusieurs couleurs précédemment codées en dur ont été remplacées par des variables CSS. Cela inclut les styles pour : - `.logout-button` - `.success-message`, `.error-message` (fonds et bordures) - `tr:hover` (survol des lignes de tableau) - `.certificate-entry` (bordure) - `.app-footer` (fond et texte) - `tr.revoked-cert` (texte, fond, survol) 3. Fichier `app/public/css/dark-mode.css`: - Les nouvelles variables CSS introduites dans `style.css` ont été définies avec des valeurs appropriées pour le thème sombre. - La valeur alpha du `box-shadow` pour les inputs en focus a été corrigée pour correspondre à la valeur d'origine (`0.25`). - Les blocs de style spécifiques pour `.app-footer` et `tr.revoked-cert` (et son `:hover`) qui dupliquaient la gestion des couleurs via les variables n'ont pas été réintroduits. Ces modifications visent à rendre la personnalisation des thèmes plus robuste et mieux documentée pour la partie CSS classique de l'application. --- app/public/css/dark-mode.css | 28 +++++++++---------- app/public/css/style.css | 53 +++++++++++++++++++++++++++--------- 2 files changed, 54 insertions(+), 27 deletions(-) diff --git a/app/public/css/dark-mode.css b/app/public/css/dark-mode.css index 7f5a78e..372e5c9 100644 --- a/app/public/css/dark-mode.css +++ b/app/public/css/dark-mode.css @@ -25,19 +25,19 @@ body.dark-mode { --message-error-color: #ff9999; --input-border: #666; --input-focus-border: #007bff; -} - -body.dark-mode .app-footer { - background-color: #1a1a1a; - color: #ccc; -} - -body.dark-mode tr.revoked-cert { - background-color: #5c2c2c; /* Fond plus foncé pour le mode sombre */ - color: #aaa; -} -body.dark-mode tr.revoked-cert:hover { - background-color: #703c3c; + --button-logout-bg: #d32f2f; /* Ajusté pour le mode sombre, peut-être plus sombre que le danger normal */ + --button-logout-hover-bg: #b71c1c; + --message-success-bg: #2a4f2a; /* Exemple, à ajuster */ + --message-success-border-color: #385e38; /* Exemple, à ajuster */ + --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 */ + --certificate-entry-border-color: #4a4a4a; /* Plus foncé pour le mode sombre */ + --footer-bg: #1a1a1a; /* Déjà présent, juste vérifier */ + --footer-text-color: #ccc; /* Déjà présent, juste vérifier */ + --revoked-cert-text-color: #aaa; /* Déjà présent, juste vérifier */ + --revoked-cert-bg-color: #5c2c2c; /* Déjà présent, juste vérifier */ + --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); } diff --git a/app/public/css/style.css b/app/public/css/style.css index 4759739..7c7257b 100644 --- a/app/public/css/style.css +++ b/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; - background-color: #fce4e4; /* Léger fond rouge pour le mode clair */ + color: var(--revoked-cert-text-color); + 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; - color: #f4f4f4; + background-color: var(--footer-bg); + 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 */ }