diff --git a/roles/koji_hub/tasks/main.yaml b/roles/koji_hub/tasks/main.yaml index a885dfb..b4c607a 100644 --- a/roles/koji_hub/tasks/main.yaml +++ b/roles/koji_hub/tasks/main.yaml @@ -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) */