Revamp user management styling with gradient backgrounds, improved table layout, and enhanced button interactions

src/main/resources/static/css/style.css

@@ -6,7 +6,8 @@ body {
     justify-content: center;
     height: 100vh;
     margin: 0;
-    background-color: #f0f0f0;
+    background: linear-gradient(45deg, #f1faee, #a8dadc);
+    color: #1d3557;
 }
 
 h1 {
@@ -18,7 +19,6 @@ p {
 }
 
 .register_form{
-    background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@@ -27,6 +27,7 @@ p {
     box-sizing: border-box;
 }
 .container1{
+    background-color: rgba(255,255,255,0.2);
     display: inline-flex;
     flex-direction: column;
     background-color: #fff;

src/main/resources/static/css/table_style.css

@@ -1,107 +1,74 @@
-
-body {
-	background: linear-gradient(45deg, #49a09d, #5f2c82);
-	font-family: sans-serif;
-	font-weight: 100;
+html{
+    height: 100%;
+    background: linear-gradient(45deg, #f1faee, #a8dadc);
 }
-h2{
-    color: #f0f0f0;
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: sans-serif;
+    font-weight: 100;
+    color: #1d3557;
 }
-.contenido {
-	position: absolute;
-	top: 40%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-.table-container {
-	height: 400px; /* Altura fija del contenedor */
-	overflow: hidden; /* Scroll vertical */
-	border-radius: 5px;
+.contenido{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-/* Estilo para la barra de desplazamiento */
-::-webkit-scrollbar {
-    width: 12px;
-}
-
-/* Estilo para el fondo de la barra */
-::-webkit-scrollbar-track {
-    background: rgba(85, 96, 143, 0.1);
-    border-radius: 10px;
-}
-
-/* Estilo para el control deslizante */
-::-webkit-scrollbar-thumb {
-    background: #55608f;
-    border-radius: 10px;
-    border: 3px solid transparent;
-    background-clip: content-box;
-}
-
-/* Efecto hover en el control deslizante */
-::-webkit-scrollbar-thumb:hover {
-    background: #404b7c;
-    border: 3px solid transparent;
-    background-clip: content-box;
-}
-
-
-table {
-    width: 800px;
-    border-collapse: collapse;
-    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.3);
 }
 
 th, td {
     padding: 15px;
     background-color: rgba(255,255,255,0.2);
-    color: #fff;
+    color: #457b9d;
 }
 
 th {
-	text-align: left;
+    background-color: #a8dadc;
+}
+td{
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-thead th {
-    background-color: #55608f;
+
+
+table{
+    border-collapse: collapse;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
 }
-thead {
+.table-container{
+    height: 500px;
+    overflow: auto;
+    border-radius: 10px;
+}
+.table1 thead {
     position: sticky;
-    top: 0;
-    z-index: 1;
-}
-tbody {
-        display: block;
-        max-height: 350px;
-        overflow-y: auto;
-    }
-thead, tbody tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-}
-tbody {
-	tr {
-		&:hover {
-			background-color: rgba(255,255,255,0.3);
-		}
-	}
+    top: 0%;
 }
+
 .celda-acciones{
-    text-align: center;
-    padding: 0;
+    display: flex;
 }
 .celda-acciones button{
-    background-color: #007bff;
-    color: #fff;
+    background-color: rgba(255, 255, 255, 0.3);
     border: none;
     border-radius: 4px;
     cursor: pointer;
     padding: 5px;
-    margin: 1px/*vertical*/ 10px/*horizontal*/;
+    margin: 1px auto;
 }
+
 .celda-acciones button:hover {
-    background-color: #0056b3;
+    background-color: rgba(255, 255, 255, 0.5);
 }
+/* Estilo para la barra de desplazamiento */
+::-webkit-scrollbar {
+    border-radius: 100px;
 
-
+}

src/main/resources/templates/user_management.html

@@ -8,10 +8,10 @@
     <div class="contenido">
         <h2>Gestión de Usuarios</h2>
         <div class="table-container">
-            <table>
+            <table class="table1">
                 <thead>
                     <tr>
-                        <th>ID</th>
+                        <th class="celda-id">ID</th>
                         <th>Nombre</th>
                         <th>Rol</th>
                         <th>Email</th>
@@ -20,11 +20,11 @@
                 </thead>
                 <tbody>
                     <tr th:each="user : ${users}">
-                        <td th:text="${user.id}"></td>
+                        <td class="celda-id" th:text="${user.id}"></td>
                         <td th:text="${user.nombre}"></td>
                         <td th:text="${user.role}"></td>
-                        <td th:text="${user.mail}"></td>
-                        <td class="celda-acciones"><button>✏️</button> <button>🗑️</button></td>
+                        <td th:title="${user.mail}" th:text="${user.mail}"></td>
+                        <td class="celda-acciones"><button th:title="Editar">✏️</button> <button th:title="Borrar">🗑️</button></td>
                     </tr>
                 </tbody>
             </table>