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): restore round logo and fix mainNav stylesheet import

Browse source 
- Correct the relative stylesheet import path to '../../koji.css' in the theme file to restore base styles and resolve the unstyled vertical navigation menu list.
- Restore the round logo layout scaled to 50px of height.
- Style the mainNav tabs menu with Slate/Emerald colors to match the theme.

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:02:06 -06:00
commit 99ac10a870
Signed by: renich
GPG key ID: AB2A9F49384FE324
1 changed files with 94 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -413,7 +413,7 @@
- name: Convert main logo SVG to PNG
ansible.builtin.command:
cmd: "rsvg-convert -w 250 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/mxos.svg"
cmd: "rsvg-convert -h 50 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/sitio/static/images/logo.svg"
creates: /tmp/mxos-koji.png
- name: Convert favicon logo SVG to PNG
@ -459,30 +459,112 @@
group: root
mode: "0644"
content: |
@import url("../default/koji.css");
@import url("../../koji.css");
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#header {
background-color: #0f172a; /* Pizarra oscuro */
background-color: #0f172a; /* Slate 900 */
border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */
height: 60px; /* Altura ajustada del header */
clear: left;
}
#header a {
color: #10b981;
#kojiLogo {
float: left;
height: 50px; /* Logotipo redondo de 50px */
width: auto;
margin-top: 5px;
margin-left: 15px;
}
#header h1 {
background-image: url("images/koji.png");
background-repeat: no-repeat;
background-position: left center;
height: 60px;
padding-left: 270px; /* Suficiente espacio para la imagen de 250px */
#headerSearch {
float: right;
margin-right: 15px;
height: 50px;
margin-top: 5px; /* Centrado vertical en el header de 60px */
display: flex;
align-items: center;
gap: 8px;
}
/* Cambiar colores de enlaces y botones */
/* Estilo para los inputs de búsqueda */
#headerSearch select,
#headerSearch input[type="text"] {
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;
box-sizing: border-box;
}
#headerSearch select:focus,
#headerSearch input[type="text"]:focus {
border-color: #10b981;
outline: none;
}
#headerSearch input[type="submit"] {
background-color: #10b981;
color: white;
border: none;
border-radius: 4px;
padding: 0 16px;
height: 28px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
box-sizing: border-box;
}
#headerSearch input[type="submit"]:hover {
background-color: #059669;
}
/* Estilización del Menú de Pestañas (#mainNav) */
#mainNav {
background-color: #1e293b; /* Slate 800 */
border-bottom: 2px solid #10b981; /* Borde verde esmeralda */
font-weight: bold;
height: 2.1em;
}
#mainNav ul li {
background-color: #1e293b;
border-color: #1e293b;
}
#mainNav ul li a {
color: #f8fafc; /* Texto claro */
}
#mainNav ul li:hover {
background-color: #334155; /* Slate 700 */
border-color: #10b981;
}
/* Pestaña activa de la página actual */
body#summary #mainNav li#summaryTab a,
body#tasks #mainNav li#tasksTab a,
body#tags #mainNav li#tagsTab a,
body#builds #mainNav li#buildsTab a,
body#packages #mainNav li#packagesTab a,
body#users #mainNav li#usersTab a,
body#hosts #mainNav li#hostsTab a,
body#buildtargets #mainNav li#buildtargetsTab a,
body#reports #mainNav li#reportsTab a,
body#search #mainNav li#searchTab a,
body#api #mainNav li#apiTab a {
background-color: #10b981; /* Emerald 500 */
color: white;
}
/* Cambiar colores de enlaces y botones globales */
a {
color: #10b981;
}