MxOS/ansible-koji
SHA256
Watch
6
0
Fork
You've already forked ansible-koji
 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(branding): optimize navigation padding and clean up nested info tables

Browse source 
Co-developed-by: Gemini AI <renich+gemini@woralelandia.com>
Signed-off-by: Rénich Bon Ćirić <renich@woralelandia.com>
This commit is contained in:
Rénich Bon Ćirić 2026-06-16 11:34:41 -06:00
commit 1cc42aa500
Signed by: renich
GPG key ID: AB2A9F49384FE324
1 changed files with 101 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

139
roles/koji_hub/tasks/main.yaml
View file

@ -478,20 +478,26 @@
/* Reset de fuente base y legibilidad global */
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 16px; /* Fuente base incrementada */
font-size: 16px; /* Fuente base */
line-height: 1.6;
color: #334155; /* Slate 700 */
background-color: #f8fafc; /* Gris claro de fondo de pantalla */
background-color: #f1f5f9; /* Fondo gris claro plano */
background-image: none !important; /* Quitar puntos grises de Koji */
margin: 0;
padding: 0;
}
/* Contenedor principal (#wrap) como tarjeta premium */
#wrap {
background-color: transparent; /* Transparente sin envoltorio artificial */
box-shadow: none;
border-radius: 0;
margin: 0 auto;
width: 100%; /* Ancho completo real */
max-width: none; /* Sin límite en ultra-wide */
padding: 0 20px;
background-color: #ffffff; /* Fondo blanco unificado */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* Sombra suave y elegante */
border: 1px solid #e2e8f0;
border-radius: 12px; /* Esquinas redondeadas modernas */
margin: 40px auto;
max-width: 1280px; /* Ancho máximo estándar para legibilidad */
width: 95%;
overflow: hidden; /* Corta los bordes redondeados del header y nav de forma limpia */
padding: 0;
box-sizing: border-box;
}
@ -499,6 +505,10 @@
padding: 0;
}
div#content {
padding: 30px 40px 40px 40px; /* Padding de respiro elegante a los lados y abajo */
}
h2, h3 {
color: #0f172a;
font-weight: 700;
@ -509,14 +519,14 @@
/* Encabezados de tablas/sección de Koji */
h4 {
background-color: #0f172a !important; /* Slate 900 */
background-color: #1e293b !important; /* Slate 800 */
color: #f8fafc !important;
border-left: 5px solid #10b981; /* Detalle verde esmeralda de 5px */
padding: 12px 20px;
font-weight: 600;
font-size: 16px;
border-radius: 6px;
margin: 25px 0 15px 0;
margin: 30px 0 18px 0;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
@ -531,26 +541,25 @@
#header {
background-color: #0f172a; /* Slate 900 */
border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */
height: 70px; /* Altura del header incrementada para mejor presencia */
height: 70px; /* Altura del header */
clear: left;
border-radius: 6px 6px 0 0; /* Bordes redondeados solo arriba */
}
#kojiLogo {
float: left;
height: 54px; /* Logotipo redondo ligeramente más grande */
height: 50px; /* Logotipo redondo */
width: auto;
margin-top: 8px;
margin-left: 20px;
margin-top: 10px;
margin-left: 24px;
}
#headerSearch {
float: right;
margin-right: 20px;
margin-right: 24px;
height: 70px;
display: flex;
align-items: center;
gap: 10px;
gap: 12px;
}
/* Estilo para los inputs de búsqueda */
@ -561,7 +570,7 @@
color: #f8fafc; /* Slate 50 */
border-radius: 6px;
padding: 6px 12px;
height: 34px; /* Altura de inputs aumentada */
height: 34px;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s ease;
@ -596,7 +605,7 @@
background-color: #1e293b; /* Slate 800 */
border-bottom: 2px solid #10b981; /* Borde verde esmeralda */
font-weight: bold;
height: auto; /* Quitamos la altura rígida */
height: auto;
}
#mainNav ul {
@ -618,7 +627,7 @@
display: block;
color: #cbd5e1; /* Slate 300 para no seleccionado */
text-decoration: none;
padding: 12px 20px !important; /* Mayor padding táctil y visual */
padding: 12px 18px !important; /* Padding ajustado para evitar que las pestañas se envuelvan a la segunda línea */
font-size: 14px !important;
font-family: inherit;
height: auto;
@ -662,18 +671,14 @@
text-decoration: underline;
}
/* --- ESTILOS DE TABLAS PREMIUM COMO TARJETAS --- */
/* --- ESTILOS DE TABLAS DENTRO DEL CONTENEDOR BLANCO --- */
table {
width: 100% !important;
margin-bottom: 30px;
border-collapse: separate; /* Cambiado a separate para soportar border-radius en las esquinas */
margin-bottom: 35px;
border-collapse: collapse;
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) */
@ -684,13 +689,13 @@
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: right;
padding: 12px 18px !important; /* Padding ampliado */
width: 200px;
padding: 14px 20px !important; /* Padding ampliado */
width: 220px;
font-size: 15px !important; /* Letras más grandes */
}
table td {
padding: 12px 18px !important;
padding: 14px 20px !important;
border-bottom: 1px solid #e2e8f0;
color: #334155;
font-size: 15px !important;
@ -718,7 +723,7 @@
text-align: left;
border-bottom: 2px solid #10b981 !important; /* Borde verde esmeralda inferior */
border-right: none;
padding: 14px 18px !important;
padding: 14px 20px !important;
font-size: 15px !important;
}
@ -727,7 +732,7 @@
border-bottom: 1px solid #e2e8f0;
border-right: none;
text-align: left;
padding: 12px 18px !important;
padding: 14px 20px !important;
}
/* Filas alternas y hover en listas */
@ -741,13 +746,53 @@
background-color: #f1f5f9; /* Hover slate claro */
}
/* Estilos para tablas anidadas (como en la vista de buildinfo de RPMs y Logs) */
table.nested {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
border: none !important;
background-color: transparent !important;
}
table.nested tr {
background-color: transparent !important;
}
table.nested tr:hover {
background-color: transparent !important; /* Desactivar hover en filas anidadas */
}
table.nested th {
width: auto !important;
text-align: left !important;
background-color: #f1f5f9 !important; /* Slate 100 */
color: #475569 !important; /* Slate 600 */
font-size: 13px !important;
padding: 6px 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
display: inline-block !important;
margin-top: 8px !important;
margin-bottom: 4px !important;
font-weight: 600 !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
table.nested td {
padding: 6px 12px !important;
border: none !important;
font-size: 14px !important;
background-color: transparent !important;
}
/* Botones */
.button, input[type="submit"], input[type="button"] {
background-color: #10b981;
color: white;
border: none;
border-radius: 6px;
padding: 8px 18px;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
@ -771,10 +816,27 @@
color: #10b981;
}
/* --- Pantallas medianas (tabletas y laptops pequeñas) --- */
@media (min-width: 769px) and (max-width: 1100px) {
#mainNav ul li a {
padding: 10px 12px !important;
font-size: 13px !important;
}
}
/* --- ESTILOS RESPONSIVOS PARA MÓVILES (Media Queries) --- */
@media (max-width: 768px) {
#wrap {
padding: 0 10px;
width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
border: none;
padding: 0;
}
div#content {
padding: 20px 15px; /* Padding reducido para móviles */
}
#header {
@ -801,19 +863,20 @@
}
#mainNav ul li {
flex: 1 1 45%; /* Menú más cómodo en móviles */
flex: 1 1 45%; /* Menú más cómodo en móviles (dos por fila) */
}
#mainNav ul li a {
padding: 10px 10px !important;
padding: 12px 10px !important;
font-size: 13px !important;
text-align: center;
}
#loginInfo {
float: none;
display: block;
text-align: center;
margin: 15px 0;
margin: 20px 0;
}
/* Tablas Responsivas en Móvil (convierten a scroll horizontal) */