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): set full width layout and synchronize CSS to local tasks

Browse source 
- Remove wrap max-width to allow the content to use 100% width on ultra-wide screens.
- Clean up duplicate and old CSS blocks from the tasks file.

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

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

@ -478,19 +478,21 @@
/* 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: 14px; font-size: 16px; /* Fuente base incrementada */
line-height: 1.6; line-height: 1.6;
color: #334155; /* Slate 700 */ color: #334155; /* Slate 700 */
background-color: #f8fafc; background-color: #f8fafc; /* Gris claro de fondo de pantalla */
} }
#wrap { #wrap {
background-color: #ffffff; background-color: transparent; /* Transparente sin envoltorio artificial */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); box-shadow: none;
border-radius: 8px; border-radius: 0;
margin: 20px auto; margin: 0 auto;
max-width: 1400px; width: 100%; /* Ancho completo real */
padding: 10px 0; max-width: none; /* Sin límite en ultra-wide */
padding: 0 20px;
box-sizing: border-box;
} }
#innerwrap { #innerwrap {
@ -500,20 +502,22 @@
h2, h3 { h2, h3 {
color: #0f172a; color: #0f172a;
font-weight: 700; font-weight: 700;
margin-top: 25px; margin-top: 30px;
margin-bottom: 15px; margin-bottom: 20px;
font-size: 1.6em;
} }
/* Encabezados de tablas/sección de Koji */ /* Encabezados de tablas/sección de Koji */
h4 { h4 {
background-color: #0f172a !important; /* Slate 900 */ background-color: #0f172a !important; /* Slate 900 */
color: #f8fafc !important; color: #f8fafc !important;
border-left: 4px solid #10b981; /* Detalle verde esmeralda */ border-left: 5px solid #10b981; /* Detalle verde esmeralda de 5px */
padding: 10px 15px; padding: 12px 20px;
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 16px;
border-radius: 4px; border-radius: 6px;
margin: 20px 0 15px 0; margin: 25px 0 15px 0;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
} }
h4 a { h4 a {
@ -676,23 +680,29 @@
table th { table th {
font-weight: 600; font-weight: 600;
color: #0f172a; /* Slate 900 */ color: #0f172a; /* Slate 900 */
background-color: #f1f5f9; /* Slate 100 */ background-color: #f8fafc; /* Slate 50 */
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: 8px 15px; padding: 12px 18px !important; /* Padding ampliado */
width: 180px; width: 200px;
font-size: 13px; font-size: 15px !important; /* Letras más grandes */
} }
table td { table td {
padding: 8px 15px; padding: 12px 18px !important;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
color: #334155; color: #334155;
font-size: 13px; font-size: 15px !important;
vertical-align: middle; vertical-align: middle;
} }
/* Eliminar el borde inferior de la última fila de la tabla */
table tr:last-child th,
table tr:last-child td {
border-bottom: none;
}
/* Tablas de Listas de Datos (Estructura Horizontal: th arriba, td abajo) */ /* Tablas de Listas de Datos (Estructura Horizontal: th arriba, td abajo) */
table.data-list, table.data-list,
table.list { table.list {
@ -706,10 +716,10 @@
color: #f8fafc !important; color: #f8fafc !important;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
border-bottom: 2px solid #10b981 !important; /* Borde inferior verde */ border-bottom: 2px solid #10b981 !important; /* Borde verde esmeralda inferior */
border-right: none; border-right: none;
padding: 10px 15px; padding: 14px 18px !important;
font-size: 13px; font-size: 15px !important;
} }
table.data-list td, table.data-list td,
@ -717,7 +727,7 @@
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
border-right: none; border-right: none;
text-align: left; text-align: left;
padding: 10px 15px; padding: 12px 18px !important;
} }
/* Filas alternas y hover en listas */ /* Filas alternas y hover en listas */
@ -728,7 +738,7 @@
table.data-list tr:hover, table.data-list tr:hover,
table.list tr:hover { table.list tr:hover {
background-color: #f1f5f9; background-color: #f1f5f9; /* Hover slate claro */
} }
/* Botones */ /* Botones */
@ -736,10 +746,10 @@
background-color: #10b981; background-color: #10b981;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
padding: 6px 16px; padding: 8px 18px;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
@ -748,25 +758,37 @@
background-color: #059669; background-color: #059669;
} }
/* Login Info styling */
#loginInfo {
float: right;
font-weight: 500;
margin: 15px 5px;
color: #64748b;
font-size: 13px;
}
#loginInfo a {
color: #10b981;
}
/* --- ESTILOS RESPONSIVOS PARA MÓVILES (Media Queries) --- */ /* --- ESTILOS RESPONSIVOS PARA MÓVILES (Media Queries) --- */
@media (max-width: 768px) { @media (max-width: 768px) {
#wrap { #wrap {
margin: 5px; padding: 0 10px;
padding: 5px;
} }
#header { #header {
height: auto; height: auto;
min-height: 110px; min-height: 120px;
padding: 10px; padding: 15px 10px;
text-align: center; text-align: center;
} }
#kojiLogo { #kojiLogo {
float: none; float: none;
display: block; display: block;
margin: 0 auto 10px auto; margin: 0 auto 15px auto;
height: 40px; height: 44px;
} }
#headerSearch { #headerSearch {
@ -775,39 +797,23 @@
justify-content: center; justify-content: center;
height: auto; height: auto;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 8px;
}
#mainNav {
height: auto;
}
#mainNav ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style-type: none;
} }
#mainNav ul li { #mainNav ul li {
float: none; flex: 1 1 45%; /* Menú más cómodo en móviles */
flex: 1 1 30%; /* Ocupa al menos el 30% del ancho, fluyendo en filas */
text-align: center;
border-width: 1px;
} }
#mainNav ul li a { #mainNav ul li a {
padding: 8px 5px; padding: 10px 10px !important;
font-size: 12px; font-size: 13px !important;
height: auto;
} }
#loginInfo { #loginInfo {
float: none; float: none;
display: block; display: block;
text-align: center; text-align: center;
margin: 10px 0; margin: 15px 0;
} }
/* Tablas Responsivas en Móvil (convierten a scroll horizontal) */ /* Tablas Responsivas en Móvil (convierten a scroll horizontal) */