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 */
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 14px;
font-size: 16px; /* Fuente base incrementada */
line-height: 1.6;
color: #334155; /* Slate 700 */
background-color: #f8fafc;
background-color: #f8fafc; /* Gris claro de fondo de pantalla */
}
#wrap {
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);
border-radius: 8px;
margin: 20px auto;
max-width: 1400px;
padding: 10px 0;
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;
box-sizing: border-box;
}
#innerwrap {
@ -500,20 +502,22 @@
h2, h3 {
color: #0f172a;
font-weight: 700;
margin-top: 25px;
margin-bottom: 15px;
margin-top: 30px;
margin-bottom: 20px;
font-size: 1.6em;
}
/* Encabezados de tablas/sección de Koji */
h4 {
background-color: #0f172a !important; /* Slate 900 */
color: #f8fafc !important;
border-left: 4px solid #10b981; /* Detalle verde esmeralda */
padding: 10px 15px;
border-left: 5px solid #10b981; /* Detalle verde esmeralda de 5px */
padding: 12px 20px;
font-weight: 600;
font-size: 15px;
border-radius: 4px;
margin: 20px 0 15px 0;
font-size: 16px;
border-radius: 6px;
margin: 25px 0 15px 0;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
h4 a {
@ -676,23 +680,29 @@
table th {
font-weight: 600;
color: #0f172a; /* Slate 900 */
background-color: #f1f5f9; /* Slate 100 */
background-color: #f8fafc; /* Slate 50 */
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: right;
padding: 8px 15px;
width: 180px;
font-size: 13px;
padding: 12px 18px !important; /* Padding ampliado */
width: 200px;
font-size: 15px !important; /* Letras más grandes */
}
table td {
padding: 8px 15px;
padding: 12px 18px !important;
border-bottom: 1px solid #e2e8f0;
color: #334155;
font-size: 13px;
font-size: 15px !important;
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) */
table.data-list,
table.list {
@ -706,10 +716,10 @@
color: #f8fafc !important;
font-weight: 600;
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;
padding: 10px 15px;
font-size: 13px;
padding: 14px 18px !important;
font-size: 15px !important;
}
table.data-list td,
@ -717,7 +727,7 @@
border-bottom: 1px solid #e2e8f0;
border-right: none;
text-align: left;
padding: 10px 15px;
padding: 12px 18px !important;
}
/* Filas alternas y hover en listas */
@ -728,7 +738,7 @@
table.data-list tr:hover,
table.list tr:hover {
background-color: #f1f5f9;
background-color: #f1f5f9; /* Hover slate claro */
}
/* Botones */
@ -736,10 +746,10 @@
background-color: #10b981;
color: white;
border: none;
border-radius: 4px;
padding: 6px 16px;
border-radius: 6px;
padding: 8px 18px;
font-weight: 600;
font-size: 13px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease;
}
@ -748,25 +758,37 @@
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) --- */
@media (max-width: 768px) {
#wrap {
margin: 5px;
padding: 5px;
padding: 0 10px;
}
#header {
height: auto;
min-height: 110px;
padding: 10px;
min-height: 120px;
padding: 15px 10px;
text-align: center;
}
#kojiLogo {
float: none;
display: block;
margin: 0 auto 10px auto;
height: 40px;
margin: 0 auto 15px auto;
height: 44px;
}
#headerSearch {
@ -775,39 +797,23 @@
justify-content: center;
height: auto;
flex-wrap: wrap;
gap: 6px;
}
#mainNav {
height: auto;
}
#mainNav ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style-type: none;
gap: 8px;
}
#mainNav ul li {
float: none;
flex: 1 1 30%; /* Ocupa al menos el 30% del ancho, fluyendo en filas */
text-align: center;
border-width: 1px;
flex: 1 1 45%; /* Menú más cómodo en móviles */
}
#mainNav ul li a {
padding: 8px 5px;
font-size: 12px;
height: auto;
padding: 10px 10px !important;
font-size: 13px !important;
}
#loginInfo {
float: none;
display: block;
text-align: center;
margin: 10px 0;
margin: 15px 0;
}
/* Tablas Responsivas en Móvil (convierten a scroll horizontal) */