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): improve desktop wrap, card tables, and enlarge elements

Browse source 
- Set #wrap background to transparent and remove its box shadow to prevent the header and nav from looking boxed and cut off.
- Convert tables to self-contained visual cards with white backgrounds, border-radii, and shadows.
- Enlarge body font size to 16px, table text to 15px, and nav/search elements to improve readability.

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:23:20 -06:00
commit 7f148e269d
Signed by: renich
GPG key ID: AB2A9F49384FE324
1 changed files with 56 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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) */