diff --git a/htdocs/admin/style.css b/htdocs/admin/style.css index 4da6dc2..ff6d969 100644 --- a/htdocs/admin/style.css +++ b/htdocs/admin/style.css @@ -1,4 +1,4 @@ -/* Body e font */ +/* ===== BASE ===== */ body { font-family: Arial, sans-serif; background-color: #f0f2f5; @@ -7,7 +7,7 @@ body { padding: 20px; } -/* Navbar */ +/* ===== NAVBAR ===== */ .navbar { background-color: #2c3e50; padding: 10px 20px; @@ -20,6 +20,15 @@ body { box-shadow: 0 2px 5px rgba(0,0,0,0.1); } +.navbar.text-center { + justify-content: center; +} + +.navbar .logo { + font-size: 1.3em; + font-weight: bold; +} + .navbar a { color: #fff; text-decoration: none; @@ -32,27 +41,38 @@ body { color: #f39c12; } -.navbar .logo { - font-size: 1.3em; - font-weight: bold; -} - -/* Dashboard container */ -.dashboard { +/* ===== CONTAINERS ===== */ +.dashboard, +.admin-container, +.login-container { max-width: 800px; margin: 0 auto; - text-align: center; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } -.dashboard h1 { - margin-bottom: 20px; - color: #2c3e50; +.login-container { + max-width: 400px; + margin: 80px auto; + text-align: center; } +.dashboard { + text-align: center; +} + +/* ===== HEADINGS ===== */ +.dashboard h1, +.admin-container h1, +.login-container h1 { + margin-bottom: 20px; + color: #2c3e50; + text-align: center; +} + +/* ===== LINKS ===== */ .dashboard a { display: inline-block; margin: 10px; @@ -66,26 +86,8 @@ body { .dashboard a:hover { background-color: #f39c12; - color: #fff; -} -/* Container principale */ -.admin-container { - max-width: 800px; - margin: 0 auto; - background: #fff; - padding: 30px; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); } -/* Titolo */ -.admin-container h1 { - text-align: center; - color: #2c3e50; - margin-bottom: 20px; -} - -/* Link ritorno */ .admin-container a.back-link { display: inline-block; margin-bottom: 15px; @@ -98,55 +100,6 @@ body { color: #f39c12; } -/* Form aggiungi classe */ -.admin-container form { - margin-bottom: 20px; - text-align: center; -} - -.admin-container input[type="text"], -.admin-container input[type="password"] { - padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 6px; - width: 200px; - margin-right: 10px; -} - -.admin-container button { - padding: 8px 15px; - border: none; - background-color: #1f618d; - color: #fff; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.2s; -} - -.admin-container button:hover { - background-color: #f39c12; -} - -/* Tabella */ -.admin-container table { - width: 100%; - border-collapse: collapse; -} - -.admin-container th, .admin-container td { - border: 1px solid #ccc; - padding: 10px; - text-align: center; -} - -.admin-container th { - background-color: #eee; -} - -.admin-container tr:hover td { - background-color: #f7f7f7; -} - .admin-container a.delete-link { color: #e74c3c; font-weight: bold; @@ -159,7 +112,7 @@ body { } .admin-container a.edit-link { - color: hsl(239, 78%, 57%); + color: #4d5cdb; font-weight: bold; text-decoration: none; transition: color 0.2s; @@ -182,129 +135,9 @@ body { .admin-container form a.cancel-edit:hover { background-color: #f39c12; - color: #fff; } - -/* Login container */ -.login-container { - max-width: 400px; - margin: 80px auto; - background: #fff; - padding: 30px; - border-radius: 10px; - box-shadow: 0 2px 10px rgba(0,0,0,0.1); - text-align: center; -} - -/* Titolo */ -.login-container h1 { - margin-bottom: 20px; - color: #2c3e50; -} - -/* Input */ -.login-container input[type="text"], -.login-container input[type="password"] { - width: 90%; - padding: 10px; - margin: 10px 0; - border-radius: 6px; - border: 1px solid #ccc; - font-size: 1em; -} - -/* Pulsante */ -.login-container button { - padding: 10px 20px; - background-color: #1f618d; - color: #fff; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.2s; - font-size: 1em; -} - -.login-container button:hover { - background-color: #f39c12; - color: #fff; -} - -/* Messaggio errore */ -.login-container .error { - color: #e74c3c; - font-weight: bold; - margin-bottom: 10px; -} - -/* Navbar minima per login */ -.navbar { - background-color: #2c3e50; - padding: 10px 20px; - color: #fff; - text-align: center; - border-radius: 0 0 10px 10px; - margin-bottom: 30px; -} -/* Riutilizziamo .admin-container, h1, navbar già definiti */ - -/* Form Gestione Materie */ -.admin-container form input[type="text"] { - padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 6px; - margin: 5px; - width: 200px; -} - -.admin-container form button { - padding: 8px 20px; - background-color: #1f618d; - color: #fff; - border: none; - border-radius: 6px; - cursor: pointer; - transition: background-color 0.2s; -} - -.admin-container form button:hover { - background-color: #f39c12; - color: #fff; -} - -/* Tabella Materie */ -.admin-container table { - width: 100%; - border-collapse: collapse; - margin-top: 15px; -} - -.admin-container th, .admin-container td { - border: 1px solid #ccc; - padding: 10px; - text-align: center; -} - -.admin-container th { - background-color: #eee; -} - -.admin-container tr:hover td { - background-color: #f7f7f7; -} - -.admin-container a.delete-link { - color: #e74c3c; - font-weight: bold; - text-decoration: none; - transition: color 0.2s; -} - -.admin-container a.delete-link:hover { - color: #c0392b; -} -/* Form gestione orario */ +/* ===== FORMS ===== */ .admin-container form { display: flex; flex-wrap: wrap; @@ -313,6 +146,28 @@ body { margin-bottom: 20px; } +.admin-container input[type="text"], +.admin-container input[type="password"], +.login-container input[type="text"], +.login-container input[type="password"] { + padding: 10px 12px; + border: 1px solid #ccc; + border-radius: 6px; + font-size: 1em; +} + +.admin-container input[type="text"], +.admin-container input[type="password"] { + width: 200px; + margin: 5px; +} + +.login-container input[type="text"], +.login-container input[type="password"] { + width: 90%; + margin: 10px 0; +} + .admin-container form select { padding: 8px 12px; border-radius: 6px; @@ -320,45 +175,74 @@ body { min-width: 120px; } -.admin-container form button { - padding: 8px 20px; +.admin-container button, +.login-container button { + padding: 10px 20px; + border: none; background-color: #1f618d; color: #fff; - border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; + font-size: 1em; } -.admin-container form button:hover { +.admin-container button:hover, +.login-container button:hover { background-color: #f39c12; - color: #fff; } -/* Titolo */ -.admin-container h1 { +/* ===== TABLES ===== */ +.table-container { + width: 100%; + overflow-x: auto; +} + +.admin-container table, +.responsive-table { + width: 100%; + border-collapse: collapse; + margin-top: 15px; +} + +.admin-container th, +.admin-container td, +.responsive-table th, +.responsive-table td { + border: 1px solid #ccc; + padding: 10px; text-align: center; - color: #2c3e50; - margin-bottom: 20px; } -/* Link ritorno */ -.admin-container a.back-link { - display: inline-block; - margin-bottom: 15px; - text-decoration: none; - color: #1f618d; +.responsive-table th, +.responsive-table td { + text-align: left; + padding: 8px; +} + +.admin-container th, +.responsive-table th { + background-color: #eee; +} + +.admin-container tr:hover td { + background-color: #f7f7f7; +} + +/* ===== MESSAGES ===== */ +.login-container .error { + color: #e74c3c; font-weight: bold; + margin-bottom: 10px; } -.admin-container a.back-link:hover { - color: #f39c12; -} - -/* Mobile responsive */ +/* ===== RESPONSIVE DESIGN ===== */ @media (max-width: 768px) { + body { + padding: 10px; + } - /* Form input gestione orario */ + /* Form responsive */ .admin-container form { flex-direction: column; align-items: stretch; @@ -372,22 +256,27 @@ body { margin: 5px 0; } - /* Tabella */ + /* Tabelle responsive */ .admin-container table, + .responsive-table { + display: block; + } + .admin-container thead, + .responsive-table thead { + display: none; + } + .admin-container tbody, - .admin-container th, - .admin-container td, - .admin-container tr { + .responsive-table tbody, + .admin-container tr, + .responsive-table tr { display: block; width: 100%; } - .admin-container thead { - display: none; /* Nasconde intestazioni */ - } - - .admin-container tr { + .admin-container tr, + .responsive-table tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; @@ -396,28 +285,39 @@ body { box-shadow: 0 1px 5px rgba(0,0,0,0.05); } - .admin-container td { + .admin-container td, + .responsive-table td { + display: block; text-align: left; + padding: 8px 10px; padding-left: 50%; position: relative; border: none; border-bottom: 1px solid #eee; - display: flex; - justify-content: space-between; - padding: 8px 10px; + word-wrap: break-word; + white-space: normal; + max-width: 100%; } - .admin-container td::before { + .admin-container td:last-child, + .responsive-table td:last-child { + border-bottom: none; + } + + .admin-container td::before, + .responsive-table td::before { content: attr(data-label); position: absolute; left: 10px; + top: 8px; width: 45%; font-weight: bold; - white-space: nowrap; + white-space: normal; + color: #333; } - .admin-container td:last-child { - border-bottom: 0; + .responsive-table td span { + display: block; } .admin-container a.delete-link { @@ -426,14 +326,15 @@ body { } } -/* Extra piccolo schermo */ @media (max-width: 480px) { - .admin-container td::before { + .admin-container td::before, + .responsive-table td::before { width: 50%; font-size: 0.9em; } - .admin-container td { + .admin-container td, + .responsive-table td { font-size: 0.9em; padding: 6px 8px; } @@ -444,71 +345,4 @@ body { .admin-container form button { font-size: 0.95em; } -} - -.table-container { - width: 100%; - overflow-x: auto; -} - -.responsive-table { - width: 100%; - border-collapse: collapse; -} - -.responsive-table th, -.responsive-table td { - border: 1px solid #ccc; - padding: 8px; - text-align: left; -} - -.responsive-table th { - background: #f4f4f4; -} - -/* Modalità mobile */ -@media (max-width: 768px) { - .responsive-table thead { - display: none; /* nasconde l’intestazione */ - } - .responsive-table tr { - display: block; - margin-bottom: 15px; - border: 1px solid #ddd; - border-radius: 8px; - padding: 10px; - background: #fff; - } - .responsive-table td { - display: block; - justify-content: space-between; - padding: 8px 5px; - padding-top: 30px; - border: none; - border-bottom: 1px solid #eee; - word-wrap: break-word; - white-space: normal; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - } - .responsive-table td:last-child { - border-bottom: none; - } - .responsive-table td::before { - content: attr(data-label); - font-weight: bold; - margin-right: 10px; - color: #333; - position: absolute; - left: 10px; - top: 10px; - width: 45%; - white-space: normal; /* permette a "Materia" di andare a capo */ - font-weight: bold; - } - .response-table td span { - display: block; /* forza l'output del contenuto su una riga separata */ - } -} +} \ No newline at end of file