computer-playbook/roles/nginx-modifier-css/templates/global.css.j2

/***

Global Theming Styles – Color and Shadow Variables 

HINT: 
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.

*/

:root {
    /** Derived Colors from the Base Color **/
    {% for i in range(1, 100) %}
        --color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
        --color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
    {% endfor %}
}

@media (prefers-color-scheme: dark) {
    :root {
        /** Dark Mode Derived Colors from the Base Color **/
        {% for i in range(1, 100) %}
            --color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
            --color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
        {% endfor %}
    }
}


:root, ::after, ::before, ::backdrop {
    /* For Dark Mode Plugin
     * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
     */
    --native-dark-accent-color:         var(--color-60);  /* was #a9a9a9 */
    --native-dark-bg-color:             var(--color-10);  /* was #292929 */
    --native-dark-bg-image-color:       rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
    --native-dark-border-color:         var(--color-40);  /* was #555555 */
    --native-dark-box-shadow:           0 0 0 1px rgb(var(--color-rgb-99), / 10%);
    --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-visited-link-color:   var(--color-85);  /* was #c76ed7 */
}

/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
    --bs-black: var(--color-01); /* Original tone: Black (#000) */
    --bs-white: var(--color-99); /* Original tone: White (#fff) */
    --bs-gray: var(--color-50); /* Original tone: Gray (#6c757d) */
    --bs-gray-dark: var(--color-20); /* Original tone: Dark Gray (#343a40) */
    --bs-gray-100: var(--color-95); /* Original tone: Very Light Gray (#f8f9fa) */
    --bs-gray-200: var(--color-90); /* Original tone: Lighter Gray (#e9ecef) */
    --bs-gray-300: var(--color-85); /* Original tone: Light Gray (#dee2e6) */
    --bs-gray-400: var(--color-80); /* Original tone: Gray (#ced4da) */
    --bs-gray-500: var(--color-70); /* Original tone: Medium Gray (#adb5bd) */
    --bs-gray-600: var(--color-50); /* Original tone: Gray (#6c757d) */
    --bs-gray-700: var(--color-40); /* Original tone: Darker Gray (#495057) */
    --bs-gray-800: var(--color-20); /* Original tone: Dark Gray (#343a40) */
    --bs-gray-900: var(--color-10); /* Original tone: Very Dark Gray (#212529) */
    --bs-primary: var(--color-65); /* Original tone: Blue (#0d6efd) */
    --bs-light: var(--color-95); /* Original tone: Light (#f8f9fa) */
    --bs-dark: var(--color-10); /* Original tone: Dark (#212529) */
    --bs-primary-rgb: var(--color-rgb-65); /* Original tone: Blue (13, 110, 253) */
    --bs-secondary-rgb: var(--color-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */
    --bs-light-rgb: var(--color-rgb-95); /* Original tone: Light (248, 249, 250) */
    --bs-dark-rgb: var(--color-rgb-10); /* Original tone: Dark (33, 37, 41) */
    --bs-white-rgb: var(--color-rgb-99); /* Original tone: White (255, 255, 255) */
    --bs-black-rgb: var(--color-rgb-01); /* Original tone: Black (0, 0, 0) */
    --bs-body-color-rgb: var(--color-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */
    --bs-body-bg-rgb: var(--color-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */
    --bs-body-color: var(--color-10); /* Original tone: Dark (#212529) */
    --bs-body-bg: var(--color-99); /* Original tone: White (#fff) */
    --bs-border-color: var(--color-85); /* Original tone: Gray (#dee2e6) */
    --bs-link-color: var(--color-65); /* Original tone: Blue (#0d6efd) */
    --bs-link-hover-color: var(--color-60); /* Original tone: Darker Blue (#0a58ca) */
    --bs-code-color: var(--color-55); /* Original tone: Pink (#d63384) */
    --bs-highlight-bg: var(--color-93); /* Original tone: Light Yellow (#fff3cd) */
    --bs-list-group-bg: var(--color-40);
}

/* Discourse */
:root section#main{
  /* Base Colors */
  --primary:                   var(--color-20); /* originally #203243 */
  --secondary:                 var(--color-95); /* originally #eef4f7 */
  --tertiary:                  var(--color-40); /* originally #416376 */
  --quaternary:                var(--color-50); /* originally #5e99b9 */

  /* Header & Highlight */
  --header_background:         var(--color-70); /* originally #86bddb */
  --header_primary:            var(--color-20); /* same as --primary */
  --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);


  /* Primary Scale */
  --primary-very-low:          var(--color-99); /* originally #f7f9fb */
  --primary-low:               var(--color-95);  /* originally #e3ebf2 */
  --primary-low-mid:           var(--color-75);  /* originally #acc2d7 */
  --primary-medium:            var(--color-60);  /* originally #7499bd */
  --primary-high:              var(--color-40);  /* originally #487096 */
  --primary-very-high:         var(--color-20);  /* originally #34516d */
  --primary-50:                var(--color-99); /* originally #f7f9fb */
  --primary-100:               var(--color-95);  /* originally #eef3f7 */
  --primary-200:               var(--color-90);  /* originally #e3ebf2 */
  --primary-300:               var(--color-80);  /* originally #c7d6e4 */
  --primary-400:               var(--color-75);  /* originally #acc2d7 */
  --primary-500:               var(--color-70);  /* originally #90aeca */
  --primary-600:               var(--color-60);  /* originally #7499bd */
  --primary-700:               var(--color-50);  /* originally #5381ad */
  --primary-800:               var(--color-40);  /* originally #487096 */
  --primary-900:               var(--color-20);  /* originally #34516d */

  /* Header Primary Scale */
  --header_primary-low:        rgb(var(--color-rgb-75));  /* rgb(128, 180, 209) */
  --header_primary-low-mid:    rgb(var(--color-rgb-70));  /* rgb(110, 155, 181) */
  --header_primary-medium:     rgb(var(--color-rgb-60));  /* rgb(93, 132, 155) */
  --header_primary-high:       rgb(var(--color-rgb-50));  /* rgb(78, 112, 132) */
  --header_primary-very-high:  rgb(var(--color-rgb-20));  /* rgb(52, 76, 94) */

  /* Secondary Scale */
  --secondary-low:             var(--color-20);  /* originally #2f5163 */
  --secondary-medium:          var(--color-40);  /* originally #4e88a5 */
  --secondary-high:            var(--color-60);  /* originally #7ba9c1 */
  --secondary-very-high:       var(--color-90);  /* originally #d7e5ec */

  /* Tertiary Scale */
  --tertiary-very-low:         var(--color-99); /* originally #eaf0f3 */
  --tertiary-low:              var(--color-95);  /* originally #dfe8ee */
  --tertiary-medium:           var(--color-60);  /* originally #96b4c5 */
  --tertiary-high:             var(--color-40);  /* originally #5886a0 */
  --tertiary-hover:            var(--color-20);  /* originally #314a59 */
  --tertiary-50:               var(--color-99); /* originally #eaf0f3 */
  --tertiary-100:              var(--color-95);  /* originally #e6edf1 */
  --tertiary-200:              var(--color-90);  /* originally #e4ebf0 */
  --tertiary-300:              var(--color-85);  /* originally #dfe8ee */
  --tertiary-400:              var(--color-75);  /* originally #c8d8e1 */
  --tertiary-500:              var(--color-65);  /* originally #b1c7d4 */
  --tertiary-600:              var(--color-60);  /* originally #96b4c5 */
  --tertiary-700:              var(--color-55);  /* originally #80a5b9 */
  --tertiary-800:              var(--color-50);  /* originally #6b96ae */
  --tertiary-900:              var(--color-40);  /* originally #5886a0 */

  /* Quaternary */
  --quaternary-low:           var(--color-80);  /* originally #cfe0ea */

  /* Highlight */
  --highlight-bg:             var(--color-90);  /* originally #dbebf4 */
  --highlight-low:            var(--color-90);  /* originally #dbebf4 */
  --highlight-medium:         var(--color-80);  /* originally #c3deed */
  --highlight-high:           var(--color-30);  /* originally #286688 */

  /* Combination Variables */
  --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-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-med-or-tertiary:           var(--color-60);  /* originally #96b4c5 */
  --secondary-or-primary:               var(--color-95);  /* originally #eef4f7 */
  --tertiary-or-white:                  var(--color-40);  /* originally #416376 */

  /* Float Kit */
  --float-kit-arrow-stroke-color:       var(--primary-low);  /* already mapped above */
  --float-kit-arrow-fill-color:         var(--secondary);      /* already mapped above */
}

/* gitea */
:root {
  /* Base and derived colors are now referenced from the computed scale */
  --color-primary:           var(--color-50);
  --color-primary-contrast:  var(--color-99);
  --color-primary-dark-1:    var(--color-48);
  --color-primary-dark-2:    var(--color-47);
  --color-primary-dark-3:    var(--color-46);
  --color-primary-dark-4:    var(--color-45);
  --color-primary-dark-5:    var(--color-44);
  --color-primary-dark-6:    var(--color-43);
  --color-primary-dark-7:    var(--color-42);
  --color-primary-light-1:   var(--color-52);
  --color-primary-light-2:   var(--color-53);
  --color-primary-light-3:   var(--color-54);
  --color-primary-light-4:   var(--color-55);
  --color-primary-light-5:   var(--color-57);
  --color-primary-light-6:   var(--color-59);
  --color-primary-light-7:   var(--color-61);

  /* Alpha variants reference the base RGB variable */
  --color-primary-alpha-10:  rgba(var(--color-rgb-50), 0.10);
  --color-primary-alpha-20:  rgba(var(--color-rgb-50), 0.20);
  --color-primary-alpha-30:  rgba(var(--color-rgb-50), 0.30);
  --color-primary-alpha-40:  rgba(var(--color-rgb-50), 0.40);
  --color-primary-alpha-50:  rgba(var(--color-rgb-50), 0.50);
  --color-primary-alpha-60:  rgba(var(--color-rgb-50), 0.60);
  --color-primary-alpha-70:  rgba(var(--color-rgb-50), 0.70);
  --color-primary-alpha-80:  rgba(var(--color-rgb-50), 0.80);
  --color-primary-alpha-90:  rgba(var(--color-rgb-50), 0.90);

  --color-primary-hover:     var(--color-primary-dark-1);
  --color-primary-active:    var(--color-primary-dark-2);

  /* Secondary colors */
  --color-secondary:         var(--color-80);
  --color-secondary-dark-1:  var(--color-78);
  --color-secondary-dark-2:  var(--color-76);
  --color-secondary-dark-3:  var(--color-74);
  --color-secondary-dark-4:  var(--color-72);
  --color-secondary-dark-5:  var(--color-70);
  --color-secondary-dark-6:  var(--color-68);
  --color-secondary-dark-7:  var(--color-66);
  --color-secondary-dark-8:  var(--color-64);
  --color-secondary-dark-9:  var(--color-62);
  --color-secondary-dark-10: var(--color-60);
  --color-secondary-dark-11: var(--color-58);
  --color-secondary-dark-12: var(--color-56);
  --color-secondary-dark-13: var(--color-54);
  --color-secondary-light-1: var(--color-92);
  --color-secondary-light-2: var(--color-93);
  --color-secondary-light-3: var(--color-94);
  --color-secondary-light-4: var(--color-95);

  --color-secondary-alpha-10: rgba(var(--color-rgb-80), 0.10);
  --color-secondary-alpha-20: rgba(var(--color-rgb-80), 0.20);
  --color-secondary-alpha-30: rgba(var(--color-rgb-80), 0.30);
  --color-secondary-alpha-40: rgba(var(--color-rgb-80), 0.40);
  --color-secondary-alpha-50: rgba(var(--color-rgb-80), 0.50);
  --color-secondary-alpha-60: rgba(var(--color-rgb-80), 0.60);
  --color-secondary-alpha-70: rgba(var(--color-rgb-80), 0.70);
  --color-secondary-alpha-80: rgba(var(--color-rgb-80), 0.80);
  --color-secondary-alpha-90: rgba(var(--color-rgb-80), 0.90);

  --color-secondary-button:  var(--color-secondary-dark-4);
  --color-secondary-hover:   var(--color-secondary-dark-5);
  --color-secondary-active:  var(--color-secondary-dark-6);

  /* Console Colors */
  --color-console-fg:         var(--color-98);
  --color-console-fg-subtle:  var(--color-85);
  --color-console-bg:         var(--color-10);
  --color-console-border:     var(--color-40);
  --color-console-hover-bg:   var(--color-42);
  --color-console-active-bg:  var(--color-40);
  --color-console-menu-bg:    var(--color-38);
  --color-console-menu-border:var(--color-45);

  /* Body, Text, and Miscellaneous Colors */
  --color-white:      var(--color-99);
  --color-grey:       var(--color-60);
  --color-grey-light: var(--color-65);

  --color-body:       var(--color-white);
  --color-text-dark:  var(--color-10);
  --color-text:       var(--color-40);
  --color-text-light: var(--color-60);
  --color-text-light-1: var(--color-65);
  --color-text-light-2: var(--color-70);
  --color-text-light-3: var(--color-75);

  --color-footer:     var(--color-nav-bg);
  --color-timeline:   var(--color-80);

  /* Input Colors */
  --color-input-text: var(--color-10);
  --color-input-background: var(--color-white);
  --color-input-toggle-background: var(--color-80);
  --color-input-border: var(--color-secondary);
  --color-input-border-hover: var(--color-secondary-dark-1);

  /* Effects */
  --color-light: var(--color-05);
  --color-light-mimic-enabled: rgba(var(--color-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
  --color-light-border: var(--color-05);
  --color-hover: var(--color-05);
  --color-hover-opaque: var(--color-95);
  --color-active: var(--color-05);

  /* Menu, Card, and Markup Colors */
  --color-menu: var(--color-99);
  --color-card: var(--color-99);
  --color-markup-table-row: var(--color-01);
  --color-markup-code-block: var(--color-01);
  --color-markup-code-inline: var(--color-01);
  --color-button: var(--color-99);
  --color-code-bg: var(--color-99);
  --color-shadow: var(--color-05);
  --color-shadow-opaque: var(--color-85);
  --color-secondary-bg: var(--color-95);
  --color-expand-button: var(--color-98);
  --color-placeholder-text: var(--color-text-light-3);
  --color-editor-line-highlight: var(--color-primary-light-6);
  --color-project-column-bg: var(--color-secondary-light-4);
  --color-caret: var(--color-10);

  /* Reaction and Tooltip Colors */
  --color-reaction-bg: var(--color-05);
  --color-reaction-hover-bg: var(--color-primary-light-5);
  --color-reaction-active-bg: var(--color-primary-light-6);
  --color-tooltip-text: var(--color-99);
  --color-tooltip-bg: var(--color-05);

  /* Navigation Colors */
  --color-nav-bg: var(--color-99);
  --color-nav-hover-bg: var(--color-secondary-light-1);
  --color-nav-text: var(--color-40);
  --color-secondary-nav-bg: var(--color-99);

  /* Label and Accent Colors */
  --color-label-text: var(--color-40);
  --color-label-bg: var(--color-50);
  --color-label-hover-bg: var(--color-60);
  --color-label-active-bg: var(--color-70);
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-6);
  --color-highlight-fg: var(--color-10);
  --color-highlight-bg: var(--color-99);
  --color-overlay-backdrop: var(--color-05);
}

/* Keycloak */
:root{
  /* --- Palette Black (Graustufen) --- */
  --pf-v5-global--palette--black-100:   var(--color-95);  /* #fafafa */
  --pf-v5-global--palette--black-150:   var(--color-90);  /* #f5f5f5 */
  --pf-v5-global--palette--black-200:   var(--color-85);  /* #f0f0f0 */
  --pf-v5-global--palette--black-300:   var(--color-75);  /* #d2d2d2 */
  --pf-v5-global--palette--black-400:   var(--color-65);  /* #b8bbbe */
  --pf-v5-global--palette--black-500:   var(--color-50);  /* #8a8d90 */
  --pf-v5-global--palette--black-600:   var(--color-40);  /* #6a6e73 */
  --pf-v5-global--palette--black-700:   var(--color-30);  /* #4f5255 */
  --pf-v5-global--palette--black-800:   var(--color-25);  /* #3c3f42 */
  --pf-v5-global--palette--black-850:   var(--color-20);  /* #212427 */
  --pf-v5-global--palette--black-900:   var(--color-10);  /* #151515 */
  --pf-v5-global--palette--black-1000:  var(--color-05);  /* #030303 */

  /* --- White --- */
  --pf-v5-global--palette--white:      var(--color-99);

  /* --- Background Colors --- */
  --pf-v5-global--BackgroundColor--100:              var(--color-99);
  --pf-v5-global--BackgroundColor--150:              var(--color-95);
  --pf-v5-global--BackgroundColor--200:              var(--color-85);
  --pf-v5-global--BackgroundColor--300:              var(--color-75);
  --pf-v5-global--BackgroundColor--400:              var(--color-65);
  --pf-v5-global--BackgroundColor--light-100:        var(--color-99);
  --pf-v5-global--BackgroundColor--light-200:        var(--color-95);
  --pf-v5-global--BackgroundColor--light-300:        var(--color-85);
  --pf-v5-global--BackgroundColor--dark-100:         var(--color-10);
  --pf-v5-global--BackgroundColor--dark-200:         var(--color-25);
  --pf-v5-global--BackgroundColor--dark-300:         var(--color-20);
  --pf-v5-global--BackgroundColor--dark-400:         var(--color-30);
  --pf-v5-global--BackgroundColor--dark-transparent-100: var(--color-05);
  --pf-v5-global--BackgroundColor--dark-transparent-200: var(--color-05);

  /* --- Color Variables --- */
  --pf-v5-global--Color--100:           var(--color-10);
  --pf-v5-global--Color--200:           var(--color-40);
  --pf-v5-global--Color--300:           var(--color-25);
  --pf-v5-global--Color--400:           var(--color-50);
  --pf-v5-global--Color--light-100:     var(--color-99);
  --pf-v5-global--Color--light-200:     var(--color-85);
  --pf-v5-global--Color--light-300:     var(--color-75);
  --pf-v5-global--Color--dark-100:      var(--color-10);
  --pf-v5-global--Color--dark-200:      var(--color-40);

  /* --- Active Colors --- */
  --pf-v5-global--active-color--100:    var(--color-65);
  --pf-v5-global--active-color--200:    var(--color-95);
  --pf-v5-global--active-color--300:    var(--color-75);
  --pf-v5-global--active-color--400:    var(--color-85);

  /* --- Disabled Colors --- */
  --pf-v5-global--disabled-color--100:  var(--color-40);
  --pf-v5-global--disabled-color--200:  var(--color-75);
  --pf-v5-global--disabled-color--300:  var(--color-85);

  /* --- Primary Colors --- */
  --pf-v5-global--primary-color--100:   var(--color-65);
  --pf-v5-global--primary-color--200:   var(--color-40);
  --pf-v5-global--primary-color--light-100: var(--color-75);
  --pf-v5-global--primary-color--dark-100:  var(--color-65);

  /* --- Secondary Colors --- */
  --pf-v5-global--secondary-color--100: var(--color-40);

  /* --- Custom Colors --- */
  --pf-v5-global--custom-color--100:    var(--color-65);
  --pf-v5-global--custom-color--200:    var(--color-65);
  --pf-v5-global--custom-color--300:    var(--color-30);

  /* --- Link Colors --- */
  --pf-v5-global--link--Color:                  var(--color-65);
  --pf-v5-global--link--Color--hover:           var(--color-40);
  --pf-v5-global--link--Color--light:           var(--color-75);
  --pf-v5-global--link--Color--light--hover:    var(--color-85);
  --pf-v5-global--link--Color--dark:            var(--color-65);
  --pf-v5-global--link--Color--dark--hover:     var(--color-40);
  --pf-v5-global--link--Color--visited:         var(--color-40);

  /* --- Border Colors --- */
  --pf-v5-global--BorderColor--100:             var(--color-75);
  --pf-v5-global--BorderColor--200:             var(--color-50);
  --pf-v5-global--BorderColor--300:             var(--color-85);
  --pf-v5-global--BorderColor--400:             var(--color-65);
  --pf-v5-global--BorderColor--dark-100:        var(--color-75);
  --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--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);
  --pf-v5-global--icon--Color--dark--dark:     var(--color-10);

}

/* Additional Keykloak Configuration */
a.pf-v5-c-nav__link{
    --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-rgb-56), 0.4);
}

/* LAM */
:root {
--lam-background-color-default: var(--color-99); {# from #FFFFFF (very bright white) #}
--lam-input-bg-color: var(--color-98); {# from #fcfcfc (almost white) #}
--lam-text-color-default: var(--color-01); {# from #000000 (pure black) #}
--lam-border-color: var(--color-90); {# from #e8e8e8 (light grey) #}
--lam-border-color-primary: var(--color-15); {# from #01689e (dark blue) #}
--lam-border-color-secondary: var(--color-85); {# from #ffcb1d (bright yellow) #}
--lam-background-color-primary: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-background-color-secondary: var(--color-90); {# from #ffe233 (bright yellow) #}
--lam-text-color-primary: var(--color-99); {# from #ffffff (pure white) #}
--lam-text-color-secondary: var(--color-01); {# from #000000 (pure black) #}
--lam-text-color-ok: var(--color-10); {# from #237d0c (dark green) #}
--lam-table-background-color-bright: var(--color-98); {# from #fbfbfb (very light grey) #}
--lam-table-background-color-dark: var(--color-92); {# from #e8f3ff (light blue) #}
--lam-table-background-color-hover: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-table-text-color-hover: var(--color-99); {# from #ffffff (pure white) #}
--lam-table-border-color: var(--color-50); {# from #3daee9 (mid-tone blue) #}
}

/** Mastodon Overrides **/
div#mastodon, div#admin-wrapper {
  /* Dropdown */
  --dropdown-border-color: var(--color-35);
  --dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
  --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
                       0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);

  /* Modal */
  --modal-background-color: rgba(var(--color-rgb-03), 0.7);
  --modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
  --modal-border-color: var(--color-35);

  /* Background */
  --background-border-color: var(--color-82);
  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
  --background-color: var(--color-93);
  --background-color-tint: rgba(var(--color-rgb-03), 0.9);

  /* Surface */
  --surface-background-color: var(--color-90);
  --surface-variant-background-color: var(--color-89);
  --surface-variant-active-background-color: var(--color-35);
  --on-surface-color: rgba(var(--color-rgb-05), 0.5);

  /* Media & Overlay */
  --media-outline-color: rgba(var(--color-rgb-99), 0.15);
  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
}

/* Modal Overwrittes */ 
div.modal div.modal-content {
  /* Colors – adjusted to the existing scheme */
  --bs-modal-color: var(--color-21);                /* Text color: dark contrast against the light modal background */
  --bs-modal-bg: var(--color-82);                   /* Background color, as desired */
  --bs-modal-border-color: var(--color-82);         /* A slightly darker border than the background */
  --bs-modal-header-border-color: var(--color-87);  /* Same shade as the modal border */
  --bs-modal-footer-bg: var(--color-87);            /* A slightly offset footer background (a bit darker than the main area) */
  --bs-modal-footer-border-color: var(--color-87);
}

/** Nextcloud Specific**/
:root{
    --color-main-background:        var(--color-84);
    --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(--color-73); /** Days which aren't in the current month **/
    --color-primary-element-light:  var(--color-65);
}

/** Peertube **/
:root {
    --mainColor: var(--color-50);
}

/** Pixelfed **/

:root {
    /* Base Colors */
    --light:                  var(--color-05);    /* Very dark (was #000) */
    --dark:                   var(--color-99);   /* Very light (was #fff) */
    
    /* Backgrounds */
    --body-bg:                var(--color-05);    /* Main background: very dark */
    --nav-bg:                 var(--color-05);    /* Navigation background: very dark */
    
    /* Text Colors */
    --body-color:             var(--color-70);    /* Main text – mid brightness */
    --text-lighter:           var(--color-60);    /* Lighter text for less prominent elements */
    
    /* Section Backgrounds and Cards */
    --bg-light:               var(--color-95);    /* Lighter background areas */
    --card-bg:                var(--color-90);    /* Card background */
    --light-gray:             var(--color-75);    /* For less dominant elements */
    --light-hover-bg:         var(--color-85);    /* Slightly lighter hover background */
    
    /* Borders and Input Fields */
    --btn-light-border:       var(--color-10);    /* Dark border for buttons */
    --input-border:           var(--color-10);    /* Border color for inputs */
    --border-color:           var(--color-85);    /* General border: slightly lighter than background */
    
    /* Other Areas */
    --comment-bg:             var(--color-85);    /* Background for comments */
    --card-header-accent:     var(--color-85);    /* Accent color in card headers */
    
    /* Dropdown Menus */
    --dropdown-item-hover-bg: var(--color-05);    /* Hover background: very dark */
    --dropdown-item-hover-color: var(--color-60);  /* Hover text: a bit lighter */
    --dropdown-item-color:     var(--color-70);    /* Regular dropdown item text */
    --dropdown-item-active-color: var(--color-99);/* Active state: very light (white) */
}

/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
    background-color: var(--color-93);
    background: linear-gradient(45deg, var(--color-93), var(--color-91), var(--color-95), var(--color-93));
    color: var(--color-40);
    /* Use the corporate-design font family */
    font-family: "Liberation Sans", Arial, sans-serif;
}

{# All links (applies to all anchor elements regardless of state) #}
a {
    color: var(--color-50);
}

{# Unvisited links (applies only to links that have not been visited) #}
a:link {
    color: var(--color-55);
}

{# Visited links (applies only to links that have been visited) #}
a:visited {
    color: var(--color-45);
}

{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
    color: var(--color-60);
}

{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
    color: var(--color-65);
}

/* Buttons (Background, Text, Border, and Shadow)
   Now using a button background that is only slightly darker than the overall background */
html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
    background-color: var(--color-87);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-91), var(--color-95), var(--color-95));
    color: var(--color-50);
    border-color: var(--color-80);
    cursor: pointer;
}

button:hover, .btn:hover {
    filter: brightness(0.9);
}

/* {# Invalid state: when the input value fails validation criteria. Use danger color for error indication. #} */
input:invalid,
textarea:invalid,
select:invalid {
    background-color: var(--color-01);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01), var(--color-10));
    /* Use Bootstrap danger color for error messages */
    color: var(--bs-danger);
    border-color: var(--color-20);
}

/* {# Valid state: when the input value meets all validation criteria. Use success color for confirmation. #} */
input:valid,
textarea:valid,
select:valid {
    background-color: var(--color-80);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-80), var(--color-90));
    /* Use Bootstrap success color for confirmation messages */
    color: var(--bs-success);
    border-color: var(--color-70);
}

/* {# Required field: applied to elements that must be filled out by the user. Use warning color for emphasis. #} */
input:required,
textarea:required,
select:required {
    background-color: var(--color-50);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-50), var(--color-60));
    /* Use Bootstrap warning color to indicate a required field */
    color: var(--bs-warning);
    border-color: var(--color-70);
}

/* {# Optional field: applied to elements that are not mandatory. Use info color to denote additional information. #} */
input:optional,
textarea:optional,
select:optional {
    background-color: var(--color-60);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-70));
    /* Use Bootstrap info color to indicate optional information */
    color: var(--bs-info);
    border-color: var(--color-70);
}

/* {# Read-only state: when an element is not editable by the user. #} */
input:read-only,
textarea:read-only,
select:read-only {
    background-color: var(--color-80);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-70));
    color: var(--color-20);
    border-color: var(--color-50);
}

/* {# Read-write state: when an element is editable by the user. #} */
input:read-write,
textarea:read-write,
select:read-write {
    background-color: var(--color-70);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-80));
    color: var(--color-40);
    border-color: var(--color-70);
}

/* {# In-range: for inputs with a defined range, when the value is within the allowed limits. #} */
input:in-range,
textarea:in-range,
select:in-range {
    background-color: var(--color-70);
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-85));
    color: var(--color-40);
    border-color: var(--color-70);
}

/* {# Out-of-range: for inputs with a defined range, when the value falls outside the allowed limits. #} */
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
    background-color: var(--color-10);
    background: linear-gradient(45deg, var(--color-10), var(--color-30));
    color: var(--color-10);
    border-color: var(--color-50);
}

/* {# Placeholder-shown: when the input field is displaying its placeholder text. #} */
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
    background-color: var(--color-82);
    background: linear-gradient(45deg, var(--color-82), var(--color-90));
    color: var(--color-40);
    border-color: var(--color-70);
}

/* {# Focus state: when the element is focused by the user. #} */
input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-75);
    background: linear-gradient(45deg, var(--color-75), var(--color-85));
    color: var(--color-40);
    border-color: var(--color-50);
}

/* {# Hover state: when the mouse pointer is over the element. #} */
input:hover,
textarea:hover,
select:hover {
    background-color: var(--color-78);
    background: linear-gradient(45deg, var(--color-78), var(--color-88));
    color: var(--color-40);
    border-color: var(--color-65);
}

/* {# Active state: when the element is being activated (e.g., clicked). #} */
input:active,
textarea:active,
select:active {
    background-color: var(--color-68);
    background: linear-gradient(45deg, var(--color-68), var(--color-78));
    color: var(--color-40);
    border-color: var(--color-60);
}

/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
    background-color: var(--color-90);
    background: linear-gradient(45deg, var(--color-90), var(--color-99));
    color: var(--color-40);
    border-color: var(--color-70);
}

/* Tables (Borders and Header Colors) */
th, td {
    border-color: var(--color-70);
}

thead {
    background-color: var(--color-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
    color: var(--color-40);
}

/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
    color: var(--color-10);
}

/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
    background-color: var(--color-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
    color: var(--color-50);
    border-color: var(--color-85);
}

.navbar a {
    color: var(--color-40);
}

.navbar a.dropdown-item {
    color: var(--color-43);
}

/* Cards / Containers (Background, Border, and Shadow)
   Cards now use a slightly lighter background and a bold, clear shadow */
.card {
    background-color: var(--color-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
    border-color: var(--color-85);
}

.card-body {
    color: var(--color-40);
}

/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
    background-color: var(--color-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
    color: var(--color-40);
}

.dropdown-item {
    color: var(--color-40);
    background-color: var(--color-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-65);
    /* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-65), var(--color-66), var(--color-70));
    color: var(--color-40);
}

/* Keycloak Header */
div#app header, div#app header *{
    background-color: var(--color-60);
    /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
    color: var(--color-98);
}

/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
    background-color: transparent;
    /* New Gradient with transparent values */
    background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
    border-color: transparent;
}

/* Not changable due to inline css */
.roundedShadowBox {
    color: #000000;
}

.titleBar {
    background-image: linear-gradient(var(--color-83), var(--color-92));
    /* New Gradient based on original background (83 -5, 83, 83 +1, 83 +5) */
    background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-78), var(--color-83), var(--color-84), var(--color-88));
    border-top-color: var(--color-78);
    border-left-color: var(--color-87);
    border-right-color: var(--color-87);
}

div.statusInfo {
    background-color: var(--color-81);
    /* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-76), var(--color-81), var(--color-82), var(--color-86));
    color: var(--color-23);
}

/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
    background-color: var(--color-90);
    /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
}

div.statusError {
    background-color: var(--color-60);
    /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
}

/** Nextcloud specific **/
html.ng-csp header#header{
    background-color: var(--color-80);
    /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
    color: var(--color-90);
}

html.ng-csp div#postsetupchecks ul.info{
    background-color: transparent;
    /* New Gradient with transparent values */
    background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}

div#mastodon .column-link{
    color: var(--color-55); 
}

div#mastodon .column-back-button {
    color: var(--color-58);
}

div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
    background-color: var(--color-89);
    /* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-84), var(--color-89), var(--color-90), var(--color-94));
    color: var(--color-19);
}

div#mastodon .status-card__title, div#mastodon .display-name strong{
    color: var(--color-33);
}

div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
    color: var(--color-29);
}
div#mastodon .dropdown-button{
    border: 1px solid #8c8dff;
}

div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
    background-color: var(--color-71);
    /* New Gradient based on original background (71 -5, 71, 71 +1, 71 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-66), var(--color-71), var(--color-72), var(--color-76));
}

.compose-form__actions .icon-button {
    color: var(--color-28);
}

/** OpenProject **/
header.op-app-header{
    background-color: var(--color-40);
    /* New Gradient based on original background (40 -5, 40, 40 +1, 40 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-35), var(--color-40), var(--color-41), var(--color-45));
    color: var(--color-40);
}

/** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
    background-color: transparent;
    /* New Gradient with transparent values */
    background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}

 /* Peertube specific configuration */
.peertube-container button {
    background-color: transparent;
    /* New Gradient with transparent values */
    background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}

/* Pixelfed */
div.page-wrapper{
    background: none;
    background-color: none;
}

/** Taiga specific configuration  **/

section.main.kanban{
    background-color: transparent;
    /* New Gradient with transparent values */
    background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}

div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
    background-color: var(--color-92);
    /* New Gradient based on original background (92 -5, 92, 92 +1, 92 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-87), var(--color-92), var(--color-93), var(--color-97));
    color: var(--color-40);
}

section.kanban h1, section.kanban h2{
    color: var(--color-40);
}

.home-project {
    background: var(--color-88);
    /* New Gradient based on original background (88 -5, 88, 88 +1, 88 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-83), var(--color-88), var(--color-89), var(--color-93));
    border-color: var(--color-60);
    color: var(--color-12);
}

.home-wrapper .title-bar {
    background: var(--color-75);
    /* New Gradient based on original background (75 -5, 75, 75 +1, 75 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-75), var(--color-76), var(--color-80));
}