diff --git a/app/public/style.css b/app/public/style.css deleted file mode 100644 index bddc72b..0000000 --- a/app/public/style.css +++ /dev/null @@ -1,366 +0,0 @@ -/* 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: #2794f9; - --header-text: #000; - --nav-bg: #e2e2e2; - --nav-link-color: #0056b3; - --nav-link-hover-bg: #d1d1d1; - --table-border-color: #ddd; - --table-header-bg: #0056b3; - --table-header-text: #fff; - --table-row-even-bg: #f2f2f2; - --button-primary-bg: #007bff; - --button-primary-hover-bg: #0056b3; - --button-secondary-bg: #6c757d; - --button-secondary-hover-bg: #5a6268; - --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; -} - -/* 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(0, 0, 0, 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, 235, 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: #d4edda; - color: var(--message-success-color); - border: 1px solid #c3e6cb; - padding: 10px; - border-radius: 8px; - margin-bottom: 15px; -} - -.error-message { - background-color: #f8d7da; - color: var(--message-error-color); - border: 1px solid #f5c6cb; - 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: rgba(0, 0, 0, 0.05); /* 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: #f44336; -} -.logout-button:hover { - background-color: #d32f2f; -} - -.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: #888; - background-color: #fce4e4; /* Léger fond rouge pour le mode clair */ -} -tr.revoked-cert:hover { - background-color: #fcc; -} - -/* Pied de page de l'application */ -.app-footer { - background-color: #333; - color: #f4f4f4; - 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%; - } -}