From d276918bcf4209e5dc85fd91af2d521ee73fb042 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Thu, 13 Feb 2025 10:52:20 +0100
Subject: [PATCH] Optimized CSS for Mailu and Keycloak

---
 .gitignore                                    |  3 +-
 .../filter_plugins/color_filters.py           | 23 +++++++++++
 .../nginx-global-css/templates/global.css.j2  | 40 ++++++++++++++-----
 3 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 roles/nginx-global-css/filter_plugins/color_filters.py

diff --git a/.gitignore b/.gitignore
index bed1e33b..7043f7bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-site.retry
\ No newline at end of file
+site.retry
+*__pycache__
\ No newline at end of file
diff --git a/roles/nginx-global-css/filter_plugins/color_filters.py b/roles/nginx-global-css/filter_plugins/color_filters.py
new file mode 100644
index 00000000..957a8aea
--- /dev/null
+++ b/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,
+        }
\ No newline at end of file
diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2
index 5d6cab21..e947708d 100644
--- a/roles/nginx-global-css/templates/global.css.j2
+++ b/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-rgb: var(--bright-color);
-    --color-primary-element: var(--button-bg-color);
-    --color-main-text: var(--dark-color);
-    --color-background-hover: var(--secondary-color);
+    --color-main-background:        var(--bright-color);
+    --color-main-background-rgb:    var(--bright-color);
+    --color-primary-element:        var(--button-bg-color);
+    --color-main-text:              var(--dark-color);
+    --color-background-hover:       var(--secondary-color);
 
     /** Calendar **/
-    --color-background-dark: var(--info-color); /** Days which aren't in the current month **/
-    --color-primary-element-light: var(--secondary-color);
+    --color-background-dark:        var(--info-color); /** Days which aren't in the current month **/
+    --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;