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