kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-02-22 12:29:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Optimized CSS for Mailu and Keycloak

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-02-13 10:52:20 +01:00
parent e947c203a1
commit d276918bcf
3 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +1,2 @@
site.retry
*__pycache__

23
roles/nginx-global-css/filter_plugins/color_filters.py Normal file
View File

@ -0,0 +1,23 @@
def adjust_color(hex_color, amount):
# Remove the leading '#' if present
hex_color = hex_color.lstrip('#')
# Extract the RGB components
r = int(hex_color[0:2], 16)
g = int(hex_color[2:4], 16)
b = int(hex_color[4:6], 16)
# Adjust the values, ensuring they remain within the range 0-255
r = max(0, min(255, r + amount))
g = max(0, min(255, g + amount))
b = max(0, min(255, b + amount))
# Convert the values back into a hexadecimal string
return '#{0:02x}{1:02x}{2:02x}'.format(r, g, b)
class FilterModule(object):
'''Custom filters for Ansible'''
def filters(self):
return {
'adjust_color': adjust_color,
}

26
roles/nginx-global-css/templates/global.css.j2
View File

@ -1,4 +1,11 @@
/* Global Theming Styles – Color and Shadow Variables */
/***
Global Theming Styles – Color and Shadow Variables
HINT: Better overwritte CSS variables instead of individual elements.
*/
:root {
--primary-color: {{ global_theming.css.colors.primary }};
--secondary-color: {{ global_theming.css.colors.secondary }};
@ -33,9 +40,18 @@
--bs-btn-color: var(--dark-color);
}
/** Keycloak Overrides **/
:root{
--pf-v5-global--Color--100: {{global_theming.css.colors.background_dark | adjust_color(10) }};
--pf-v5-global--Color--200: {{global_theming.css.colors.background_dark | adjust_color(30) }};
--pf-v5-global--Color--light-100: {{global_theming.css.colors.background_dark | adjust_color(0) }};
--pf-v5-global--Color--light-200: {{global_theming.css.colors.background_dark | adjust_color(20) }};
--pf-v5-global--Color--light-300: {{global_theming.css.colors.background_dark | adjust_color(40) }};
}
/** Mastodon Overrides **/
:root{
--surface-variant-background-color: var(--button-bg-color)
--surface-variant-background-color: var(--button-bg-color);
}
/** Nextcloud Specific**/
@ -205,6 +221,12 @@ div#app main#kc-main-content-page-container section a
border-color: transparent !important;
}
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--bright-color) !important;
}
/** Mastodon Specific **/
div#mastodon div.compose-panel div.compose-form__highlightable{
background-color: var(--bright-color) !important;