kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-09-09 11:47:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): rename inj roles to sys-front-*, add sys-svc-cdn, cache-busting lookup

Browse Source 
Introduce sys-svc-cdn (cdn_paths/cdn_urls/cdn_dirs) and ensure CDN directories + latest symlink.

Rename sys-srv-web-inj-* → sys-front-inj-*; update includes/templates; serve shared/per-app CSS & JS via CDN.

Add lookup_plugins/local_mtime_qs.py for mtime-based cache busting; split CSS into default.css/bootstrap.css + optional per-app style.css.

CSP: use style-src-elem; drop unsafe-inline for styles. Services: fix SYS_SERVICE_ALL_ENABLED bool and controlled flush.

BREAKING CHANGE: role names changed; replace includes and references accordingly.

Conversation: https://chatgpt.com/share/68b55494-9ec4-800f-b559-44707029141d
This commit is contained in:
Kevin Veen-Birkenbach
2025-09-01 10:10:23 +02:00
parent 3f8e7c1733
commit 231fd567b3
123 changed files with 1789 additions and 1393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
roles/web-app-keycloak/templates/style.css.j2 Normal file
View File

@@ -0,0 +1,109 @@
:root{
/* --- Palette Black (Gray Scale) --- */
{% for i in range(1, 21) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
{% set black = i * 50 %}
{% set color = 100 - i * 5 %}
--pf-v5-global--palette--black-{{ black }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}
/* --- White --- */
--pf-v5-global--palette--white: var(--color-01-99);
/* --- Background Colors --- */
--pf-v5-global--BackgroundColor--100: var(--color-01-99);
--pf-v5-global--BackgroundColor--150: var(--color-01-95);
--pf-v5-global--BackgroundColor--200: var(--color-01-85);
--pf-v5-global--BackgroundColor--300: var(--color-01-75);
--pf-v5-global--BackgroundColor--400: var(--color-01-65);
--pf-v5-global--BackgroundColor--light-100: var(--color-01-99);
--pf-v5-global--BackgroundColor--light-200: var(--color-01-95);
--pf-v5-global--BackgroundColor--light-300: var(--color-01-85);
--pf-v5-global--BackgroundColor--dark-100: var(--color-01-10);
--pf-v5-global--BackgroundColor--dark-200: var(--color-01-25);
--pf-v5-global--BackgroundColor--dark-300: var(--color-01-20);
--pf-v5-global--BackgroundColor--dark-400: var(--color-01-30);
--pf-v5-global--BackgroundColor--dark-transparent-100: rgba(var(--color-01-rgb-10),0.7);
--pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-01-rgb-20),0.8);
/* --- Color Variables --- */
--pf-v5-global--color-01--100: var(--color-01-10);
--pf-v5-global--color-01--200: var(--color-01-40);
--pf-v5-global--color-01--300: var(--color-01-25);
--pf-v5-global--color-01--400: var(--color-01-50);
--pf-v5-global--color-01--light-100: var(--color-01-99);
--pf-v5-global--color-01--light-200: var(--color-01-85);
--pf-v5-global--color-01--light-300: var(--color-01-75);
--pf-v5-global--color-01--dark-100: var(--color-01-10);
--pf-v5-global--color-01--dark-200: var(--color-01-40);
/* --- Active Colors --- */
--pf-v5-global--active-color--100: var(--color-01-65);
--pf-v5-global--active-color--200: var(--color-01-95);
--pf-v5-global--active-color--300: var(--color-01-75);
--pf-v5-global--active-color--400: var(--color-01-85);
/* --- Disabled Colors --- */
--pf-v5-global--disabled-color--100: var(--color-01-40);
--pf-v5-global--disabled-color--200: var(--color-01-75);
--pf-v5-global--disabled-color--300: var(--color-01-85);
/* --- Primary Colors --- */
--pf-v5-global--primary-color--100: var(--color-01-65);
--pf-v5-global--primary-color--200: var(--color-01-40);
--pf-v5-global--primary-color--light-100: var(--color-01-75);
--pf-v5-global--primary-color--dark-100: var(--color-01-65);
/* --- Secondary Colors --- */
--pf-v5-global--secondary-color--100: var(--color-01-40);
/* --- Custom Colors --- */
--pf-v5-global--custom-color--100: var(--color-01-65);
--pf-v5-global--custom-color--200: var(--color-01-65);
--pf-v5-global--custom-color--300: var(--color-01-30);
/* --- Link Colors --- */
--pf-v5-global--link--Color: var(--color-01-65);
--pf-v5-global--link--color-01--hover: var(--color-01-40);
--pf-v5-global--link--color-01--light: var(--color-01-75);
--pf-v5-global--link--color-01--light--hover: var(--color-01-85);
--pf-v5-global--link--color-01--dark: var(--color-01-65);
--pf-v5-global--link--color-01--dark--hover: var(--color-01-40);
--pf-v5-global--link--color-01--visited: var(--color-01-40);
/* --- Border Colors --- */
--pf-v5-global--BorderColor--100: var(--color-01-75);
--pf-v5-global--BorderColor--200: var(--color-01-50);
--pf-v5-global--BorderColor--300: var(--color-01-85);
--pf-v5-global--BorderColor--400: var(--color-01-65);
--pf-v5-global--BorderColor--dark-100: var(--color-01-75);
--pf-v5-global--BorderColor--light-100: var(--color-01-65);
/* --- Icon Colors --- */
--pf-v5-global--icon--color-01--light: var(--color-01-40);
--pf-v5-global--icon--color-01--dark: var(--color-01-10);
--pf-v5-global--icon--color-01--light--light: var(--color-01-85);
--pf-v5-global--icon--color-01--dark--light: var(--color-01-99);
--pf-v5-global--icon--color-01--light--dark: var(--color-01-40);
--pf-v5-global--icon--color-01--dark--dark: var(--color-01-10);
}
.pf-v5-c-button.pf-m-tertiary {
--pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-01-70);
{# Assume that the following line is necessary due to load order #}
background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
}
/* Additional Keykloak Configuration */
a.pf-v5-c-nav__link{
--pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-01-rgb-56), 0.4);
}
/* Keycloak */
div#app header{
background-color: var(--color-01-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
color: var(--color-01-98);
}