Optimized LDAP and CSS integration

group_vars/all/11_iam.yml

@@ -52,6 +52,8 @@ ldap:
     root:           "{{_ldap_dn_base}}"
     # Specifies the Distinguished Name (DN) of the LDAP administrator, combining the admin's username with the LDAP root domain.
     administrator:  "cn={{applications.ldap.administrator_username}},{{_ldap_dn_base}}"
+    # Dn from which the users should be read
+    users:          "ou=users,{{_ldap_dn_base}}"
   server:
     domain: "{{applications.ldap.openldap.hostname if applications.ldap.openldap.network.local | bool else domains.ldap}}" # Mapping for public or locale access
     uri:    "{% if applications.ldap.openldap.network.local | bool %}ldap://{{ applications.ldap.openldap.hostname }}:{{ ports.localhost.ldap.openldap }}{% else %}ldaps://{{ domains.ldap }}:{{ ports.public.ldaps.openldap }}{% endif %}"

group_vars/all/13_theming.yml

@@ -14,7 +14,7 @@ global_theming:
       # As the info color – a very light blue (symbolizing the sky)
       info: "#F0F8FF"
     filters:
-      saturation_change:  100
+      saturation_change:  50
       hue_shift:          0
 
 global_theming_enabled: true

roles/docker-keycloak/templates/realm-export.json.j2

@@ -1923,7 +1923,7 @@
             "false"
           ],
           "usersDn": [
-            "ou=users,dc=veen,dc=world"
+            "{{ldap.dn.users}}"
           ],
           "connectionPooling": [
             "true"
@@ -1950,7 +1950,7 @@
             "uid"
           ],
           "bindDn": [
-            "cn=administrator,dc=veen,dc=world"
+            "{{ldap.dn.administrator}}"
           ],
           "lastSync": [
             "1737578007"

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

@@ -61,9 +61,34 @@ def adjust_color(hex_color, target_lightness=None, lightness_change=0, hue_shift
     
     return '#{:02x}{:02x}{:02x}'.format(new_r, new_g, new_b)
 
+def adjust_color_rgb(hex_color, target_lightness=None, lightness_change=0, hue_shift=0, saturation_change=0):
+    """
+    Wrapper function for adjust_color.
+    
+    Calls adjust_color to get the adjusted HEX color and then converts it to a string 
+    of comma-separated RGB values.
+    """
+    adjusted_hex = adjust_color(
+        hex_color,
+        target_lightness=target_lightness,
+        lightness_change=lightness_change,
+        hue_shift=hue_shift,
+        saturation_change=saturation_change
+    )
+    
+    # Remove '#' and parse the RGB components
+    hex_val = adjusted_hex.lstrip('#')
+    r = int(hex_val[0:2], 16)
+    g = int(hex_val[2:4], 16)
+    b = int(hex_val[4:6], 16)
+    
+    return f"{r},{g},{b}"
+
+# Integration in the FilterModule for Ansible
 class FilterModule(object):
     '''Custom filters for Ansible'''
     def filters(self):
         return {
             'adjust_color': adjust_color,
-        }
+            'adjust_color_rgb': adjust_color_rgb,
+        }

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

@@ -10,6 +10,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
     /** Derived Colors from the Base Color **/
     {% for i in range(1, 100) %}
         --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
+        --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
     {% endfor %}
 
     /** Special Action Colors **/
@@ -25,6 +26,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
         /** Dark Mode Derived Colors from the Base Color **/
         {% for i in range(1, 100) %}
             --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
+            --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
         {% endfor %}
 
         /** Special Action Colors **/
@@ -41,20 +43,14 @@ HINT: Better overwritte CSS variables instead of individual elements.
      * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
      */
     --native-dark-accent-color:         var(--color-60);  /* was #a9a9a9 */
-    --native-dark-bg-blend-mode:        multiply;
     --native-dark-bg-color:             var(--color-10);  /* was #292929 */
-    --native-dark-bg-image-color:      rgba(0, 0, 0, 0.10); /* remains the same, or adjust if needed */
+    --native-dark-bg-image-color:       rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
-    --native-dark-bg-image-filter:      brightness(50%) contrast(200%);
     --native-dark-border-color:         var(--color-40);  /* was #555555 */
-    --native-dark-box-shadow:           0 0 0 1px rgb(255 255 255 / 10%);
+    --native-dark-box-shadow:           0 0 0 1px rgb(var(--color-rgb-99), / 10%);
-    --native-dark-brightness:           0.85;
     --native-dark-cite-color:           var(--color-70);  /* was #92de92 – you might adjust if a green tone is needed */
     --native-dark-fill-color:           var(--color-50);  /* was #7d7d7d */
     --native-dark-font-color:           var(--color-95);  /* was #dcdcdc */
     --native-dark-link-color:           var(--color-80);  /* was #8db2e5 */
-    --native-dark-opacity:              0.85;
-    --native-dark-text-shadow:          none;
-    --native-dark-transparent-color:    transparent;
     --native-dark-visited-link-color:   var(--color-85);  /* was #c76ed7 */
 }
 
@@ -73,9 +69,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
 }
 
 /* Discourse */
-:root {
+:root section#main{
-  --scheme-type: light;
-
   /* Base Colors */
   --primary:                   var(--color-20); /* originally #203243 */
   --secondary:                 var(--color-95); /* originally #eef4f7 */
@@ -88,17 +82,23 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --highlight:                 var(--color-70); /* same as header_background */
   --d-selected:                var(--color-85); /* originally #bee0f2 */
   --d-hover:                   var(--color-90); /* originally #d2efff */
+  
+  /* Normally refers to secondary. Somehow this reference does not work.*/
+  --d-sidebar-background:      var(--color-92); 
+  --d-sidebar-footer-fade:     var(--color-92);
+
+
+  /* RGB values */
+  --always-black-rgb:          var(--color-rgb-01);
+  --primary-rgb:               var(--color-rgb-20);
+  --primary-low-rgb:           var(--color-rgb-95);
+  --primary-very-low-rgb:      var(--color-rgb-99);
+  --secondary-rgb:             var(--color-rgb-95);
+  --header_background-rgb:     var(--color-rgb-70);
+  --tertiary-rgb:              var(--color-rgb-40);
+  --highlight-rgb:             var(--color-rgb-70);
+  --success-rgb:               var(--color-rgb-50);
 
-  /* RGB values remain unchanged */
-  --always-black-rgb:          0, 0, 0;
-  --primary-rgb:               32, 50, 67;
-  --primary-low-rgb:           227, 235, 242;
-  --primary-very-low-rgb:      247, 249, 251;
-  --secondary-rgb:             238, 244, 247;
-  --header_background-rgb:     134, 189, 219;
-  --tertiary-rgb:              65, 99, 118;
-  --highlight-rgb:             134, 189, 219;
-  --success-rgb:               112, 219, 130;
 
   /* Primary Scale */
   --primary-very-low:          var(--color-99); /* originally #f7f9fb */
@@ -119,11 +119,11 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --primary-900:               var(--color-20);  /* originally #34516d */
 
   /* Header Primary Scale */
-  --header_primary-low:        var(--color-75);  /* rgb(128, 180, 209) */
+  --header_primary-low:        rgb(var(--color-rgb-75));  /* rgb(128, 180, 209) */
-  --header_primary-low-mid:    var(--color-70);  /* rgb(110, 155, 181) */
+  --header_primary-low-mid:    rgb(var(--color-rgb-70));  /* rgb(110, 155, 181) */
-  --header_primary-medium:     var(--color-60);  /* rgb(93, 132, 155) */
+  --header_primary-medium:     rgb(var(--color-rgb-60));  /* rgb(93, 132, 155) */
-  --header_primary-high:       var(--color-50);  /* rgb(78, 112, 132) */
+  --header_primary-high:       rgb(var(--color-rgb-50));  /* rgb(78, 112, 132) */
-  --header_primary-very-high:  var(--color-20);  /* rgb(52, 76, 94) */
+  --header_primary-very-high:  rgb(var(--color-rgb-20));  /* rgb(52, 76, 94) */
 
   /* Secondary Scale */
   --secondary-low:             var(--color-20);  /* originally #2f5163 */
@@ -158,17 +158,17 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --highlight-high:           var(--color-30);  /* originally #286688 */
 
   /* Combination Variables */
-  --blend-primary-secondary-5:        var(--color-95);  /* originally rgb(232, 238, 241) */
+  --blend-primary-secondary-5:          rgb(var(--color-rgb-95));  /* originally rgb(232, 238, 241) */
   --primary-med-or-secondary-med:       var(--color-60);  /* originally #7499bd */
   --primary-med-or-secondary-high:      var(--color-60);  /* originally #7499bd */
   --primary-high-or-secondary-low:      var(--color-40);  /* originally #487096 */
-  --primary-low-mid-or-secondary-high:   var(--color-75);  /* originally #acc2d7 */
+  --primary-low-mid-or-secondary-high:  var(--color-75);  /* originally #acc2d7 */
-  --primary-low-mid-or-secondary-low:    var(--color-75);  /* originally #acc2d7 */
+  --primary-low-mid-or-secondary-low:   var(--color-75);  /* originally #acc2d7 */
   --primary-or-primary-low-mid:         var(--color-20);  /* originally #203243 */
   --highlight-low-or-medium:            var(--color-90);  /* originally #dbebf4 */
   --tertiary-or-tertiary-low:           var(--color-40);  /* originally #416376 */
-  --tertiary-low-or-tertiary-high:        var(--color-95);  /* originally #dfe8ee */
+  --tertiary-low-or-tertiary-high:      var(--color-95);  /* originally #dfe8ee */
-  --tertiary-med-or-tertiary:             var(--color-60);  /* originally #96b4c5 */
+  --tertiary-med-or-tertiary:           var(--color-60);  /* originally #96b4c5 */
   --secondary-or-primary:               var(--color-95);  /* originally #eef4f7 */
   --tertiary-or-white:                  var(--color-40);  /* originally #416376 */
 
@@ -370,8 +370,8 @@ HINT: Better overwritte CSS variables instead of individual elements.
   --pf-v5-global--BorderColor--light-100:       var(--color-65);
 
   /* --- Icon Colors --- */
-  --pf-v5-global--icon--Color--light:         var(--color-40);
+  --pf-v5-global--icon--Color--light:          var(--color-40);
-  --pf-v5-global--icon--Color--dark:          var(--color-10);
+  --pf-v5-global--icon--Color--dark:           var(--color-10);
   --pf-v5-global--icon--Color--light--light:   var(--color-85);
   --pf-v5-global--icon--Color--dark--light:    var(--color-99);
   --pf-v5-global--icon--Color--light--dark:    var(--color-40);
@@ -385,14 +385,14 @@ HINT: Better overwritte CSS variables instead of individual elements.
 
 /** Nextcloud Specific**/
 :root{
-    --color-main-background:        None;
+    --color-main-background:        var(--color-84);
-    --color-main-background-rgb:    None;
+    --color-main-background-rgb:    rgba(var(--color-rgb-84),0.83);
     --color-primary-element:        var(--color-80);
     --color-main-text:              var(--color-40);
     --color-background-hover:       var(--color-65);
 
     /** Calendar **/
-    --color-background-dark:        var(--info-color); /** Days which aren't in the current month **/
+    --color-background-dark:        var(--color-73); /** Days which aren't in the current month **/
     --color-primary-element-light:  var(--color-65);
 }
 
@@ -601,11 +601,6 @@ html.ng-csp header#header{
     background-color:   var(--color-80) !important;
 }
 
-html.ng-csp button.files-list__row-name-link, html.ng-csp button.button-vue{
-    background-color:   transparent !important;
-    color:              var(--color-80) !important;
-}
-
 html.ng-csp div#postsetupchecks ul.warnings{
     color: var(--error-color) !important;
 }
@@ -614,14 +609,6 @@ html.ng-csp div#postsetupchecks ul.info{
     background-color: transparent !important;
 }
 
-html.ng-csp div#header-menu-user-menu{
-    --color-main-background:    var(--color-78) !important;
-}
-
-div#content-vue p, div#content-vue span{
-    color: var(--color-40) !important;
-}
-
 /** OpenProject **/
 header.op-app-header{
     background-color: var(--color-40) !important;