CSS Testing

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 {
+/* ===== CONTAINERS ===== */
-  font-size: 1.3em;
+.dashboard,
-  font-weight: bold;
+.admin-container,
-}
+.login-container {
-
-/* Dashboard container */
-.dashboard {
   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 {
+.login-container {
-  margin-bottom: 20px;
+  max-width: 400px;
-  color: #2c3e50;
+  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;
 }
 
-
+/* ===== FORMS ===== */
-/* 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 */
 .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 {
+.admin-container button,
-  padding: 8px 20px;
+.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 */
+/* ===== TABLES ===== */
-.admin-container h1 {
+.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 */
+.responsive-table th,
-.admin-container a.back-link {
+.responsive-table td {
-  display: inline-block;
+  text-align: left;
-  margin-bottom: 15px;
+  padding: 8px;
-  text-decoration: none;
+}
-  color: #1f618d;
+
+.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 {
+/* ===== RESPONSIVE DESIGN ===== */
-  color: #f39c12;
-}
-
-/* Mobile responsive */
 @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,
+  .responsive-table tbody,
-  .admin-container td,
+  .admin-container tr,
-  .admin-container tr {
+  .responsive-table tr {
     display: block;
     width: 100%;
   }
 
-  .admin-container thead {
+  .admin-container tr,
-    display: none; /* Nasconde intestazioni */
+  .responsive-table tr {
-  }
-
-  .admin-container 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;
+    word-wrap: break-word;
-    justify-content: space-between;
+    white-space: normal;
-    padding: 8px 10px;
+    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 {
+  .responsive-table td span {
-    border-bottom: 0;
+    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 */
-  }
-}