diff --git a/roles/koji_hub/tasks/main.yaml b/roles/koji_hub/tasks/main.yaml index cdad03f..5b5656c 100644 --- a/roles/koji_hub/tasks/main.yaml +++ b/roles/koji_hub/tasks/main.yaml @@ -527,26 +527,26 @@ #header { background-color: #0f172a; /* Slate 900 */ border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */ - height: 60px; /* Altura ajustada del header */ + height: 70px; /* Altura del header incrementada para mejor presencia */ clear: left; + border-radius: 6px 6px 0 0; /* Bordes redondeados solo arriba */ } #kojiLogo { float: left; - height: 50px; /* Logotipo redondo de 50px */ + height: 54px; /* Logotipo redondo ligeramente más grande */ width: auto; - margin-top: 5px; - margin-left: 15px; + margin-top: 8px; + margin-left: 20px; } #headerSearch { float: right; - margin-right: 15px; - height: 50px; - margin-top: 5px; /* Centrado vertical en el header de 60px */ + margin-right: 20px; + height: 70px; display: flex; align-items: center; - gap: 8px; + gap: 10px; } /* Estilo para los inputs de búsqueda */ @@ -555,11 +555,12 @@ background-color: #1e293b; /* Slate 800 */ border: 1px solid #334155; /* Slate 700 */ color: #f8fafc; /* Slate 50 */ - border-radius: 4px; - padding: 4px 8px; - height: 28px; - font-size: 13px; + border-radius: 6px; + padding: 6px 12px; + height: 34px; /* Altura de inputs aumentada */ + font-size: 14px; box-sizing: border-box; + transition: border-color 0.2s ease; } #headerSearch select:focus, @@ -572,13 +573,14 @@ background-color: #10b981; color: white; border: none; - border-radius: 4px; - padding: 0 16px; - height: 28px; + border-radius: 6px; + padding: 0 20px; + height: 34px; font-weight: 600; - font-size: 13px; + font-size: 14px; cursor: pointer; box-sizing: border-box; + transition: background-color 0.2s ease; } #headerSearch input[type="submit"]:hover { @@ -590,21 +592,42 @@ background-color: #1e293b; /* Slate 800 */ border-bottom: 2px solid #10b981; /* Borde verde esmeralda */ font-weight: bold; - height: 2.1em; + height: auto; /* Quitamos la altura rígida */ + } + + #mainNav ul { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0; + list-style-type: none; } #mainNav ul li { background-color: #1e293b; - border-color: #1e293b; + border: none; + margin: 0; + float: none; } #mainNav ul li a { - color: #f8fafc; /* Texto claro */ + display: block; + color: #cbd5e1; /* Slate 300 para no seleccionado */ + text-decoration: none; + padding: 12px 20px !important; /* Mayor padding táctil y visual */ + font-size: 14px !important; + font-family: inherit; + height: auto; + transition: all 0.2s ease; } #mainNav ul li:hover { background-color: #334155; /* Slate 700 */ - border-color: #10b981; + border-color: transparent; + } + + #mainNav ul li:hover a { + color: #ffffff; } /* Pestaña activa de la página actual */ @@ -620,25 +643,33 @@ body#search #mainNav li#searchTab a, body#api #mainNav li#apiTab a { background-color: #10b981; /* Emerald 500 */ - color: white; + color: white !important; } /* Cambiar colores de enlaces y botones globales */ a { color: #10b981; + text-decoration: none; + font-weight: 500; } a:hover { color: #059669; /* Verde oscuro */ + text-decoration: underline; } - /* --- ESTILOS DE TABLAS MEJORADOS --- */ + /* --- ESTILOS DE TABLAS PREMIUM COMO TARJETAS --- */ - /* Estilo general para todas las tablas (Información vertical y Listas) */ table { width: 100% !important; - margin-bottom: 20px; - border-collapse: collapse; + margin-bottom: 30px; + border-collapse: separate; /* Cambiado a separate para soportar border-radius en las esquinas */ + border-spacing: 0; + background-color: #ffffff; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); /* Sombra de tarjeta */ + border: 1px solid #e2e8f0; + border-radius: 8px; /* Esquinas redondeadas en la tabla */ + overflow: hidden; } /* Tablas de Información (Estructura Vertical: th a la izquierda, td a la derecha) */