mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-12-02 15:39:57 +00:00
Kevin Veen-Birkenbach
bee833feb4
This ensures CSS output remains stable between runs, preventing unnecessary OpenResty restarts for every service caused by randomized gradients or regenerated CSS files. Ref: https://chatgpt.com/share/69281d4b-2488-800f-8c0c-c0db44810d1d
110 lines
5.2 KiB
Django/Jinja
110 lines
5.2 KiB
Django/Jinja
: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({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
|
|
color: var(--color-01-98);
|
|
}
|