mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-06-28 06:58:43 +02:00
f21a4b3655
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.
58 lines
2.3 KiB
CSS
58 lines
2.3 KiB
CSS
/* Styles pour le mode sombre */
|
|
body.dark-mode {
|
|
--bg-color: #2c2c2c;
|
|
--text-color: #e0e0e0;
|
|
--container-bg: #3a3a3a;
|
|
--container-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
--header-bg: #1a4d7c;
|
|
--header-text: #f0f0f0;
|
|
--nav-bg: #444;
|
|
--nav-link-color: #9cb3cc;
|
|
--nav-link-hover-bg: #555;
|
|
--table-border-color: #555;
|
|
--table-header-bg: #1a4d7c;
|
|
--table-header-text: #fff;
|
|
--table-row-even-bg: #333;
|
|
--button-primary-bg: #0056b3;
|
|
--button-primary-hover-bg: #004085;
|
|
--button-secondary-bg: #5a6268;
|
|
--button-secondary-hover-bg: #43484f;
|
|
--button-danger-bg: #a71d2a;
|
|
--button-danger-hover-bg: #7a151f;
|
|
--status-revoked-color: #ff6666;
|
|
--status-active-color: #66ff66;
|
|
--message-success-color: #a3e6a3;
|
|
--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;
|
|
--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 */
|
|
body.dark-mode form input[type="text"],
|
|
body.dark-mode form input[type="password"],
|
|
body.dark-mode form select {
|
|
background-color: #4a4a4a;
|
|
color: var(--text-color);
|
|
border: 1px solid var(--input-border);
|
|
}
|
|
|
|
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.25);
|
|
}
|