mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-06-28 09:18:42 +02:00
448 lines
12 KiB
CSS
448 lines
12 KiB
CSS
/*
|
|
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;
|
|
--text-color: #333;
|
|
--container-bg: #fff;
|
|
--container-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
--header-bg: #004a99;
|
|
--header-text: #fff;
|
|
--nav-bg: #e2e2e2;
|
|
--nav-link-color: #0056b3;
|
|
--nav-link-hover-bg: #d1d1d1;
|
|
--table-border-color: #ddd;
|
|
--table-header-bg: #004a99;
|
|
--table-header-text: #fff;
|
|
--table-row-even-bg: #f2f2f2;
|
|
--button-primary-bg: #0056b3;
|
|
--button-primary-hover-bg: #004a99;
|
|
--button-secondary-bg: #5a6268;
|
|
--button-secondary-hover-bg: #495057;
|
|
--button-danger-bg: #dc3545;
|
|
--button-danger-hover-bg: #bd2130;
|
|
--status-revoked-color: red;
|
|
--status-active-color: green;
|
|
--message-success-color: green;
|
|
--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 */
|
|
body {
|
|
font-family: 'Inter', sans-serif; /* Utilisation de Inter comme demandé */
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 960px;
|
|
margin: 20px auto;
|
|
background-color: var(--container-bg);
|
|
padding: 20px 30px;
|
|
border-radius: 12px; /* Coins arrondis */
|
|
box-shadow: var(--container-shadow);
|
|
flex-grow: 1; /* Permet au container de prendre de l'espace */
|
|
}
|
|
|
|
h1, h2 {
|
|
color: var(--header-bg);
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* En-tête de l'application */
|
|
.app-header {
|
|
background-color: var(--header-bg);
|
|
color: var(--header-text);
|
|
padding: 15px 0;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.app-title h1 {
|
|
color: var(--header-text);
|
|
margin: 0;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.header-controls {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.language-switcher, .dark-mode-switcher {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.lang-button, .dark-mode-button {
|
|
padding: 8px 12px;
|
|
text-decoration: none;
|
|
color: var(--header-text);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
border-radius: 8px; /* Coins arrondis */
|
|
transition: background-color 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.lang-button:hover, .dark-mode-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.lang-button.active {
|
|
background-color: rgba(0, 255, 42, 0.3);
|
|
border-color: var(--header-text);
|
|
}
|
|
|
|
/* Styles de navigation */
|
|
nav ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 20px 0;
|
|
background-color: var(--nav-bg);
|
|
border-radius: 10px; /* Coins arrondis */
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden; /* Pour que les coins arrondis fonctionnent bien avec le hover */
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
nav ul li {
|
|
margin: 0;
|
|
}
|
|
|
|
nav ul li a {
|
|
display: block;
|
|
padding: 12px 20px;
|
|
text-decoration: none;
|
|
color: var(--nav-link-color);
|
|
font-weight: bold;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
border-radius: 8px; /* Appliquer aux liens pour le hover */
|
|
}
|
|
|
|
nav ul li a:hover {
|
|
background-color: var(--nav-link-hover-bg);
|
|
color: var(--button-primary-hover-bg); /* Ou une autre couleur contrastante */
|
|
}
|
|
|
|
/* Styles des messages */
|
|
.success-message {
|
|
background-color: var(--message-success-bg);
|
|
color: var(--message-success-color);
|
|
border: 1px solid var(--message-success-border-color);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.error-message {
|
|
background-color: var(--message-error-bg);
|
|
color: var(--message-error-color);
|
|
border: 1px solid var(--message-error-border-color);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Styles de tableau */
|
|
.table-responsive {
|
|
overflow-x: auto; /* Pour les petits écrans */
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
border-radius: 12px; /* Coins arrondis pour le tableau */
|
|
overflow: hidden; /* Important pour que les coins arrondis soient visibles */
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid var(--table-border-color);
|
|
}
|
|
|
|
th, td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: var(--table-header-bg);
|
|
color: var(--table-header-text);
|
|
font-weight: bold;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: var(--table-row-even-bg);
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: var(--table-row-hover-bg); /* Léger survol */
|
|
}
|
|
|
|
/* Styles des boutons */
|
|
.button {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
font-size: 1em;
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: 8px; /* Coins arrondis */
|
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.primary-button {
|
|
background-color: var(--button-primary-bg);
|
|
}
|
|
|
|
.primary-button:hover {
|
|
background-color: var(--button-primary-hover-bg);
|
|
}
|
|
|
|
.secondary-button {
|
|
background-color: var(--button-secondary-bg);
|
|
}
|
|
|
|
.secondary-button:hover {
|
|
background-color: var(--button-secondary-hover-bg);
|
|
}
|
|
|
|
.danger-button {
|
|
background-color: var(--button-danger-bg);
|
|
}
|
|
|
|
.danger-button:hover {
|
|
background-color: var(--button-danger-hover-bg);
|
|
}
|
|
|
|
.logout-button {
|
|
background-color: var(--button-logout-bg);
|
|
}
|
|
.logout-button:hover {
|
|
background-color: var(--button-logout-hover-bg);
|
|
}
|
|
|
|
.actions-bar {
|
|
display: flex;
|
|
justify-content: flex-start; /* Alignement à gauche */
|
|
gap: 10px; /* Espace entre les boutons */
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap; /* Pour la réactivité sur mobile */
|
|
}
|
|
|
|
/* Formulaires */
|
|
form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
form input[type="text"],
|
|
form input[type="password"],
|
|
form select {
|
|
width: calc(100% - 22px); /* 100% moins padding et border */
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 8px; /* Coins arrondis */
|
|
font-size: 1em;
|
|
box-sizing: border-box; /* Inclut padding et border dans la largeur */
|
|
}
|
|
|
|
form input[type="text"]:focus,
|
|
form input[type="password"]:focus,
|
|
form select:focus {
|
|
border-color: var(--input-focus-border);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
form button[type="submit"] {
|
|
width: auto;
|
|
padding: 12px 25px;
|
|
font-size: 1.1em;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Messages de statut de certificat */
|
|
.status-revoked {
|
|
color: var(--status-revoked-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-active {
|
|
color: var(--status-active-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Ligne de certificat révoqué */
|
|
tr.revoked-cert {
|
|
text-decoration: line-through;
|
|
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: var(--revoked-cert-hover-bg-color);
|
|
}
|
|
|
|
/* Pied de page de l'application */
|
|
.app-footer {
|
|
background-color: var(--footer-bg);
|
|
color: var(--footer-text-color);
|
|
text-align: center;
|
|
padding: 15px 0;
|
|
margin-top: auto; /* Pousse le footer en bas */
|
|
}
|
|
|
|
.app-footer .container {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
background-color: transparent; /* Pas de fond blanc pour le footer */
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Réactivité mobile */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin: 10px;
|
|
padding: 15px;
|
|
}
|
|
|
|
.app-header .header-content {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
nav ul {
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
nav ul li a {
|
|
padding: 10px 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.actions-bar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.button {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
form input[type="text"],
|
|
form input[type="password"],
|
|
form select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Styles for certificate entries */
|
|
.certificate-entry {
|
|
display: flex;
|
|
justify-content: space-between; /* Aligne les enfants (infos du cert et actions) aux extrémités */
|
|
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 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 */
|
|
}
|
|
|
|
.certificate-info {
|
|
flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */
|
|
margin-right: 10px; /* Espace entre les infos et les boutons d'action */
|
|
}
|
|
|
|
.certificate-actions {
|
|
display: flex; /* Rend les boutons d'action eux-mêmes flexibles pour un alignement interne si nécessaire */
|
|
flex-shrink: 0; /* Empêche les actions de rétrécir si l'espace est limité */
|
|
gap: 5px; /* Ajoute un petit espace entre les boutons de téléchargement */
|
|
}
|
|
|
|
.certificate-info h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
/* Vous pouvez également envisager de définir display: inline ou display: inline-block si nécessaire,
|
|
mais les marges sont le problème le plus courant pour l'alignement vertical dans les conteneurs flex.
|
|
Pour l'instant, concentrons-nous sur les marges. */
|
|
}
|
|
|
|
/* Ajustements pour les certificats finaux dans les listes */
|
|
.certificates-overview ul .certificate-entry {
|
|
/* Peut-être des ajustements spécifiques si nécessaire, mais les styles .certificate-entry ci-dessus devraient déjà bien fonctionner */
|
|
/* Par exemple, si la bordure n'est pas souhaitée ici : */
|
|
/* border: none; */
|
|
/* padding: 5px 0; */ /* Ajuster le rembourrage pour un look plus compact dans la liste */
|
|
}
|
|
|
|
/* Assurer que les paragraphes à l'intérieur des actions n'ajoutent pas de marges indésirables */
|
|
.certificate-actions p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Styles pour les boutons de téléchargement pour qu'ils soient plus compacts si nécessaire */
|
|
.download-button-small {
|
|
padding: 5px 10px; /* Réduire le rembourrage pour les rendre plus petits */
|
|
font-size: 0.9em; /* Réduire la taille de la police */
|
|
}
|
|
|
|
/* Pour s'assurer que les liens dans .certificate-actions ne sont pas soulignés par défaut s'ils héritent d'un style global */
|
|
.certificate-actions a {
|
|
text-decoration: none;
|
|
}
|