Optimized CSS for Mailu and Keycloak

.gitignore

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

roles/nginx-global-css/filter_plugins/color_filters.py

@@ -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,
+        }

roles/nginx-global-css/templates/global.css.j2

@@ -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,22 +40,31 @@
     --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**/
 :root{
-    --color-main-background: var(--bright-color);
+    --color-main-background:        var(--bright-color);
-    --color-main-background-rgb: var(--bright-color);
+    --color-main-background-rgb:    var(--bright-color);
-    --color-primary-element: var(--button-bg-color);
+    --color-primary-element:        var(--button-bg-color);
-    --color-main-text: var(--dark-color);
+    --color-main-text:              var(--dark-color);
-    --color-background-hover: var(--secondary-color);
+    --color-background-hover:       var(--secondary-color);
 
     /** Calendar **/
-    --color-background-dark: var(--info-color); /** Days which aren't in the current month **/
+    --color-background-dark:        var(--info-color); /** Days which aren't in the current month **/
-    --color-primary-element-light: var(--secondary-color);
+    --color-primary-element-light:  var(--secondary-color);
 }
 
 /* Peertube Overrides */
@@ -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;