diff --git a/ansible.cfg b/ansible.cfg new file mode 100644 index 00000000..99c620d9 --- /dev/null +++ b/ansible.cfg @@ -0,0 +1,2 @@ +[defaults] +lookup_plugins = ./lookup_plugins \ No newline at end of file diff --git a/lookup_plugins/colorscheme.py b/lookup_plugins/colorscheme.py new file mode 100644 index 00000000..94debe25 --- /dev/null +++ b/lookup_plugins/colorscheme.py @@ -0,0 +1,9 @@ +from colorscheme_generator import generate_full_palette + +class LookupModule(object): + def run(self, terms, variables=None, **kwargs): + base_color = terms[0] + count = kwargs.get('count', 100) + shades = kwargs.get('shades', True) + + return [generate_full_palette(base_color, count=count, shades=shades)] \ No newline at end of file diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 00000000..e87753ca --- /dev/null +++ b/requirements.txt @@ -0,0 +1 @@ +colorscheme-generator @ https://github.com/kevinveenbirkenbach/colorscheme-generator/archive/refs/tags/v0.2.0.zip \ No newline at end of file diff --git a/roles/docker-openproject/handlers/main.yml b/roles/docker-openproject/handlers/main.yml deleted file mode 100644 index 076068ce..00000000 --- a/roles/docker-openproject/handlers/main.yml +++ /dev/null @@ -1,8 +0,0 @@ ---- -- name: rebuild custom openproject docker image - command: - cmd: docker build --no-cache -t {{custom_openproject_image}} . - chdir: "{{openproject_plugins_service}}" - environment: - COMPOSE_HTTP_TIMEOUT: 600 - DOCKER_CLIENT_TIMEOUT: 600 \ No newline at end of file diff --git a/roles/docker-openproject/tasks/main.yml b/roles/docker-openproject/tasks/main.yml index 4c29b646..77f942ef 100644 --- a/roles/docker-openproject/tasks/main.yml +++ b/roles/docker-openproject/tasks/main.yml @@ -21,16 +21,14 @@ src: Gemfile.plugins dest: "{{openproject_plugins_service}}Gemfile.plugins" notify: - - docker compose project setup - - rebuild custom openproject docker image + - docker compose project build and setup - name: "Transfering Dockerfile to {{openproject_plugins_service}}Dockerfile" template: src: Dockerfile dest: "{{openproject_plugins_service}}Dockerfile" notify: - - docker compose project setup - - rebuild custom openproject docker image + - docker compose project build and setup - name: "include role docker-repository-setup for {{application_id}}" include_role: diff --git a/roles/docker-openproject/templates/docker-compose.yml.j2 b/roles/docker-openproject/templates/docker-compose.yml.j2 index 0f004a03..368b0de7 100644 --- a/roles/docker-openproject/templates/docker-compose.yml.j2 +++ b/roles/docker-openproject/templates/docker-compose.yml.j2 @@ -6,6 +6,9 @@ x-op-app: &app volumes: - "data:/var/openproject/assets" - "{{dummy_volume}}:/var/openproject/pgdata" # This mount is unnecessary and just done to prevent anonymous volumes + build: + context: {{openproject_plugins_service}} + dockerfile: Dockerfile services: {% include 'roles/docker-central-database/templates/services/' + database_type + '.yml.j2' %} diff --git a/roles/nginx-modifier-css/README.md b/roles/nginx-modifier-css/README.md index a1eb4fa3..bc50fa14 100644 --- a/roles/nginx-modifier-css/README.md +++ b/roles/nginx-modifier-css/README.md @@ -1,26 +1,34 @@ -# 🌍 Nginx Global Theming Role +# 🌍 Global CSS Injection for Nginx -This **Ansible role** provides a **global theming solution** for Nginx-based web applications. It ensures a **consistent look and feel** across multiple applications by injecting a **unified global.css** with customizable theming options. ---- +## Description -## 🚀 Features -✅ **Automatic CSS Deployment** – Injects `global.css` into all Nginx-served applications. -✅ **Dynamic Theming** – Uses `design.css.colors` from Ansible variables for **full customization**. -✅ **Bootstrap Override Support** – Ensures Bootstrap-based apps use the **unified global styles**. -✅ **Versioning System** – Prevents caching issues with automatic **timestamp-based versioning**. -✅ **Dark Mode Support** – Automatically adapts to user preferences. -✅ **Runs Once Per Deployment** – Avoids redundant executions with `run_once_nginx_global_css`. +This Ansible role ensures **consistent global theming** across all Nginx-served applications by injecting a unified `global.css` file. +The role leverages [`colorscheme-generator`](https://github.com/kevinveenbirkenbach/colorscheme-generator/) to generate a dynamic, customizable color palette for light and dark mode, compatible with popular web tools like **Bootstrap**, **Keycloak**, **Nextcloud**, **Taiga**, **Mastodon**, and many more. ---- +## Overview -## 🎨 Theming Details +This role deploys a centralized global stylesheet (`global.css`) that overrides the default theming of web applications served via Nginx. It's optimized to run only once per deployment and generates a **cache-busting version number** based on file modification timestamps. +It includes support for **dark mode**, **custom fonts**, and **extensive Bootstrap and UI component overrides**. -The **CSS template (`global.css.j2`)** dynamically applies the defined theme colors and ensures **Bootstrap, buttons, alerts, forms, and other UI elements** follow the **unified design**. +## Purpose -## 🛠️ Contribution -Feel free to **fork, modify, and improve** this role! Contributions are always welcome. 🛠️🔥 +The goal of this role is to provide a **single source of truth for theming** across your infrastructure. +It makes all applications feel like part of the same ecosystem — visually and functionally. ---- +## Features -🚀 **Happy Theming!** 🎨✨ -*Created by [Kevin Veen-Birkenbach](https://www.veen.world) with the assistance of [ChatGPT](https://chatgpt.com/share/67a5fea3-4d5c-800f-8bc4-605712c02c9b). \ No newline at end of file +- 🎨 **Dynamic Theming** via [`colorscheme-generator`](https://github.com/kevinveenbirkenbach/colorscheme-generator/) +- 📁 **Unified global.css** deployment for all Nginx applications +- 🌒 **Dark mode support** out of the box +- 🚫 **No duplication** – tasks run once per deployment +- ⏱️ **Versioning logic** to bust browser cache +- 🎯 **Bootstrap override compatibility** +- 🧩 **Theme support for Keycloak, Nextcloud, Gitea, LAM, Peertube, and more** + +## Credits 📝 + +Developed and maintained by **Kevin Veen-Birkenbach**. +Learn more at [www.veen.world](https://www.veen.world) + +Part of the [CyMaIS Project](https://github.com/kevinveenbirkenbach/cymais) +License: [CyMaIS NonCommercial License (CNCL)](https://s.veen.world/cncl) diff --git a/roles/nginx-modifier-css/filter_plugins/color_filters.py b/roles/nginx-modifier-css/filter_plugins/color_filters.py deleted file mode 100644 index 48f21a7f..00000000 --- a/roles/nginx-modifier-css/filter_plugins/color_filters.py +++ /dev/null @@ -1,94 +0,0 @@ -import colorsys - -def adjust_color(hex_color, target_lightness=None, lightness_change=0, hue_shift=0, saturation_change=0): - """ - Adjust a HEX color in HSL space. - - - target_lightness: If provided (0 to 1), the lightness is set absolutely to this value. - Otherwise, lightness_change is applied additively (in percentage points, where 100 => 1 in HSL). - - lightness_change: Percentage points to add or subtract from lightness (if target_lightness is None). - - hue_shift: Degrees to shift hue (e.g., +180 for complementary). - - saturation_change: Percentage points to add or subtract from saturation. - - Uses a 'cyclical' approach for lightness and saturation if no target_lightness is provided: - If the new value goes above 1, it wraps around (subtract 1). - If it goes below 0, it wraps around (add 1). - """ - - # Strip leading '#' if present - hex_color = hex_color.lstrip('#') - - # Parse the original RGB values - r = int(hex_color[0:2], 16) - g = int(hex_color[2:4], 16) - b = int(hex_color[4:6], 16) - - # Convert from [0..255] range to [0..1] for colorsys - r /= 255.0 - g /= 255.0 - b /= 255.0 - - # Convert RGB -> HLS (colorsys uses HLS, also hier: Hue, Lightness, Saturation) - h, l, s = colorsys.rgb_to_hls(r, g, b) - - # Shift hue by (hue_shift / 360) - h = (h + (hue_shift / 360.0)) % 1.0 - - # Adjust saturation (cyclically) - s_new = s + (saturation_change / 100.0) - if s_new > 1: - s_new -= 1 - elif s_new < 0: - s_new += 1 - - # Adjust lightness: either set to a target or change it additively (cyclically) - if target_lightness is not None: - l_new = target_lightness - else: - l_new = l + (lightness_change / 100.0) - if l_new > 1: - l_new -= 1 - elif l_new < 0: - l_new += 1 - - # Convert back to RGB - new_r, new_g, new_b = colorsys.hls_to_rgb(h, l_new, s_new) - - # Scale back to [0..255] and format as HEX - new_r = int(new_r * 255) - new_g = int(new_g * 255) - new_b = int(new_b * 255) - - 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, - } diff --git a/roles/nginx-modifier-css/meta/main.yml b/roles/nginx-modifier-css/meta/main.yml index 1688bdc1..56795ea7 100644 --- a/roles/nginx-modifier-css/meta/main.yml +++ b/roles/nginx-modifier-css/meta/main.yml @@ -1,2 +1,29 @@ +--- +galaxy_info: + author: "Kevin Veen-Birkenbach" + description: "Global CSS injection for Nginx-based apps using dynamic colorschemes." + license: "CyMaIS NonCommercial License (CNCL)" + license_url: "https://s.veen.world/cncl" + company: | + Kevin Veen-Birkenbach + Consulting & Coaching Solutions + https://www.veen.world + min_ansible_version: "2.9" + platforms: + - name: Archlinux + versions: + - rolling + galaxy_tags: + - nginx + - css + - colors + - bootstrap + - theming + - dynamic + - frontend + - global + repository: https://s.veen.world/cymais + issue_tracker_url: https://s.veen.world/cymaisissues + documentation: https://s.veen.world/cymais dependencies: - - nginx \ No newline at end of file + - role: nginx \ No newline at end of file diff --git a/roles/nginx-modifier-css/tasks/main.yml b/roles/nginx-modifier-css/tasks/main.yml index c52e74e6..64e0fd98 100644 --- a/roles/nginx-modifier-css/tasks/main.yml +++ b/roles/nginx-modifier-css/tasks/main.yml @@ -1,26 +1,33 @@ # Load this role via nginx-modifier-all for consistency -- name: Deploy global.css from template +# roles/nginx-modifier-css/tasks/main.yml + +- name: Generate color palette with colorscheme-generator + set_fact: + color_palette: "{{ lookup('colorscheme', global_css_base_color, count=global_css_count, shades=global_css_shades) }}" + when: run_once_nginx_global_css is not defined + +- name: Deploy global.css template: src: global.css.j2 - dest: "{{global_css_destination}}" - owner: "{{nginx.user}}" - group: "{{nginx.user}}" + dest: "{{ global_css_destination }}" + owner: "{{ nginx.user }}" + group: "{{ nginx.user }}" mode: '0644' when: run_once_nginx_global_css is not defined -- name: Get stat for global.css destination file +- name: Get stat for global.css stat: path: "{{ global_css_destination }}" register: global_css_stat when: run_once_nginx_global_css is not defined -- name: Set global_css_version to file modification time +- name: Set global_css_version set_fact: global_css_version: "{{ global_css_stat.stat.mtime }}" when: run_once_nginx_global_css is not defined -- name: Mark global css tasks as run once +- name: Mark css as done set_fact: run_once_nginx_global_css: true - when: run_once_nginx_global_css is not defined \ No newline at end of file + when: run_once_nginx_global_css is not defined diff --git a/roles/nginx-modifier-css/templates/global.css.j2 b/roles/nginx-modifier-css/templates/global.css.j2 index 5fc3425b..ffb1f2b8 100644 --- a/roles/nginx-modifier-css/templates/global.css.j2 +++ b/roles/nginx-modifier-css/templates/global.css.j2 @@ -13,93 +13,91 @@ HINT: {% endif %} +{# roles/nginx-modifier-css/templates/global.css.j2 #} +/* Auto-generated by colorscheme-generator */ + :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 %} + {% for var_name, color in color_palette.items() %} + {{ var_name }}: {{ color }}; + {% 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 { + {% for var_name, color in color_palette.items() %} + {{ var_name }}: {{ color }}; + {% 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 */ + --native-dark-accent-color: var(--color-1-60); /* was #a9a9a9 */ + --native-dark-bg-color: var(--color-1-10); /* was #292929 */ + --native-dark-bg-image-color: rgba(var(--color-1-rgb-01), 0.10); /* remains the same, or adjust if needed */ + --native-dark-border-color: var(--color-1-40); /* was #555555 */ + --native-dark-box-shadow: 0 0 0 1px rgb(var(--color-1-rgb-99), / 10%); + --native-dark-cite-color: var(--color-1-70); /* was #92de92 – you might adjust if a green tone is needed */ + --native-dark-fill-color: var(--color-1-50); /* was #7d7d7d */ + --native-dark-font-color: var(--color-1-95); /* was #dcdcdc */ + --native-dark-link-color: var(--color-1-80); /* was #8db2e5 */ + --native-dark-visited-link-color: var(--color-1-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-black: var(--color-1-01); /* Original tone: Black (#000) */ + --bs-white: var(--color-1-99); /* Original tone: White (#fff) */ + --bs-gray: var(--color-1-50); /* Original tone: Gray (#6c757d) */ + --bs-gray-dark: var(--color-1-20); /* Original tone: Dark Gray (#343a40) */ {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set gray = i * 100 %} {% set color = 100 - i * 10 %} - --bs-gray-{{ gray }}: var(--color-{{ "%02d" % color }}); + --bs-gray-{{ gray }}: var(--color-1-{{ "%02d" % color }}); {% endfor %} - --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); - --bs-emphasis-color: var(--color-01); /* Gemappt von #000 */ - --bs-emphasis-color-rgb: var(--color-rgb-01); /* Gemappt von 0, 0, 0 */ - --bs-secondary-color: rgba(var(--color-rgb-10), 0.75); /* Gemappt von rgba(33, 37, 41, 0.75) */ - --bs-secondary-color-rgb: var(--color-rgb-10); /* Gemappt von 33, 37, 41 */ - --bs-secondary-bg: var(--color-90); /* Gemappt von #e9ecef */ - --bs-secondary-bg-rgb: var(--color-rgb-90); /* Gemappt von 233, 236, 239 */ - --bs-tertiary-color: rgba(var(--color-rgb-10), 0.5); /* Gemappt von rgba(33, 37, 41, 0.5) */ - --bs-tertiary-color-rgb: var(--color-rgb-10); /* Gemappt von 33, 37, 41 */ - --bs-tertiary-bg: var(--color-95); /* Gemappt von #f8f9fa */ - --bs-tertiary-bg-rgb: var(--color-rgb-95); /* Gemappt von 248, 249, 250 */ - --bs-link-color-rgb: var(--color-rgb-65); /* Gemappt von 13, 110, 253 */ - --bs-link-hover-color-rgb: var(--color-rgb-60); /* Gemappt von 10, 88, 202 */ - --bs-highlight-color: var(--color-10); /* Gemappt von #212529 */ - --bs-border-color-translucent: rgba(var(--color-rgb-01), 0.175); /* Gemappt von rgba(0, 0, 0, 0.175) */ - --bs-focus-ring-color: rgba(var(--color-rgb-65), 0.25); /* Gemappt von rgba(13, 110, 253, 0.25) */ + --bs-primary: var(--color-1-65); /* Original tone: Blue (#0d6efd) */ + --bs-light: var(--color-1-95); /* Original tone: Light (#f8f9fa) */ + --bs-dark: var(--color-1-10); /* Original tone: Dark (#212529) */ + --bs-primary-rgb: var(--color-1-rgb-65); /* Original tone: Blue (13, 110, 253) */ + --bs-secondary-rgb: var(--color-1-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */ + --bs-light-rgb: var(--color-1-rgb-95); /* Original tone: Light (248, 249, 250) */ + --bs-dark-rgb: var(--color-1-rgb-10); /* Original tone: Dark (33, 37, 41) */ + --bs-white-rgb: var(--color-1-rgb-99); /* Original tone: White (255, 255, 255) */ + --bs-black-rgb: var(--color-1-rgb-01); /* Original tone: Black (0, 0, 0) */ + --bs-body-color-rgb: var(--color-1-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */ + --bs-body-bg-rgb: var(--color-1-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */ + --bs-body-color: var(--color-1-10); /* Original tone: Dark (#212529) */ + --bs-body-bg: var(--color-1-99); /* Original tone: White (#fff) */ + --bs-border-color: var(--color-1-85); /* Original tone: Gray (#dee2e6) */ + --bs-link-color: var(--color-1-65); /* Original tone: Blue (#0d6efd) */ + --bs-link-hover-color: var(--color-1-60); /* Original tone: Darker Blue (#0a58ca) */ + --bs-code-color: var(--color-1-55); /* Original tone: Pink (#d63384) */ + --bs-highlight-bg: var(--color-1-93); /* Original tone: Light Yellow (#fff3cd) */ + --bs-list-group-bg: var(--color-1-40); + --bs-emphasis-color: var(--color-1-01); /* Gemappt von #000 */ + --bs-emphasis-color-rgb: var(--color-1-rgb-01); /* Gemappt von 0, 0, 0 */ + --bs-secondary-color: rgba(var(--color-1-rgb-10), 0.75); /* Gemappt von rgba(33, 37, 41, 0.75) */ + --bs-secondary-color-rgb: var(--color-1-rgb-10); /* Gemappt von 33, 37, 41 */ + --bs-secondary-bg: var(--color-1-90); /* Gemappt von #e9ecef */ + --bs-secondary-bg-rgb: var(--color-1-rgb-90); /* Gemappt von 233, 236, 239 */ + --bs-tertiary-color: rgba(var(--color-1-rgb-10), 0.5); /* Gemappt von rgba(33, 37, 41, 0.5) */ + --bs-tertiary-color-rgb: var(--color-1-rgb-10); /* Gemappt von 33, 37, 41 */ + --bs-tertiary-bg: var(--color-1-95); /* Gemappt von #f8f9fa */ + --bs-tertiary-bg-rgb: var(--color-1-rgb-95); /* Gemappt von 248, 249, 250 */ + --bs-link-color-rgb: var(--color-1-rgb-65); /* Gemappt von 13, 110, 253 */ + --bs-link-hover-color-rgb: var(--color-1-rgb-60); /* Gemappt von 10, 88, 202 */ + --bs-highlight-color: var(--color-1-10); /* Gemappt von #212529 */ + --bs-border-color-translucent: rgba(var(--color-1-rgb-01), 0.175); /* Gemappt von rgba(0, 0, 0, 0.175) */ + --bs-focus-ring-color: rgba(var(--color-1-rgb-65), 0.25); /* Gemappt von rgba(13, 110, 253, 0.25) */ --bs-table-color: var(--bs-emphasis-color); - --bs-table-bg: var(--color-99); /* White (#fff) */ - --bs-table-border-color: var(--color-99); /* White (#fff) */ - --bs-table-striped-bg: var(--color-85); /* Light Gray (entspricht ca. #dee2e6) */ - --bs-table-hover-color: var(--color-01); /* Black (#000) */ + --bs-table-bg: var(--color-1-99); /* White (#fff) */ + --bs-table-border-color: var(--color-1-99); /* White (#fff) */ + --bs-table-striped-bg: var(--color-1-85); /* Light Gray (entspricht ca. #dee2e6) */ + --bs-table-hover-color: var(--color-1-01); /* Black (#000) */ --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); } @@ -107,100 +105,100 @@ HINT: /* 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 */ + --primary: var(--color-1-20); /* originally #203243 */ + --secondary: var(--color-1-95); /* originally #eef4f7 */ + --tertiary: var(--color-1-40); /* originally #416376 */ + --quaternary: var(--color-1-50); /* originally #5e99b9 */ /* Header & Highlight */ - --header_background: var(--color-86); /* 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 */ + --header_background: var(--color-1-86); /* originally #86bddb */ + --header_primary: var(--color-1-20); /* same as --primary */ + --highlight: var(--color-1-70); /* same as header_background */ + --d-selected: var(--color-1-85); /* originally #bee0f2 */ + --d-hover: var(--color-1-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); + --d-sidebar-background: var(--color-1-92); + --d-sidebar-footer-fade: var(--color-1-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); + --always-black-rgb: var(--color-1-rgb-01); + --primary-rgb: var(--color-1-rgb-20); + --primary-low-rgb: var(--color-1-rgb-95); + --primary-very-low-rgb: var(--color-1-rgb-99); + --secondary-rgb: var(--color-1-rgb-95); + --header_background-rgb: var(--color-1-rgb-70); + --tertiary-rgb: var(--color-1-rgb-40); + --highlight-rgb: var(--color-1-rgb-70); + --success-rgb: var(--color-1-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-very-low: var(--color-1-99); /* originally #f7f9fb */ + --primary-low: var(--color-1-95); /* originally #e3ebf2 */ + --primary-low-mid: var(--color-1-75); /* originally #acc2d7 */ + --primary-medium: var(--color-1-60); /* originally #7499bd */ + --primary-high: var(--color-1-40); /* originally #487096 */ + --primary-very-high: var(--color-1-20); /* originally #34516d */ + --primary-50: var(--color-1-99); /* originally #f7f9fb */ {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set primary = i * 100 %} {% set color = 100 - i * 8 %} - --primary-{{ primary }}: var(--color-{{ "%02d" % color }}); + --primary-{{ primary }}: var(--color-1-{{ "%02d" % color }}); {% endfor %} /* 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) */ + --header_primary-low: rgb(var(--color-1-rgb-75)); /* rgb(128, 180, 209) */ + --header_primary-low-mid: rgb(var(--color-1-rgb-70)); /* rgb(110, 155, 181) */ + --header_primary-medium: rgb(var(--color-1-rgb-60)); /* rgb(93, 132, 155) */ + --header_primary-high: rgb(var(--color-1-rgb-50)); /* rgb(78, 112, 132) */ + --header_primary-very-high: rgb(var(--color-1-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 */ + --secondary-low: var(--color-1-20); /* originally #2f5163 */ + --secondary-medium: var(--color-1-40); /* originally #4e88a5 */ + --secondary-high: var(--color-1-60); /* originally #7ba9c1 */ + --secondary-very-high: var(--color-1-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-very-low: var(--color-1-99); /* originally #eaf0f3 */ + --tertiary-low: var(--color-1-95); /* originally #dfe8ee */ + --tertiary-medium: var(--color-1-60); /* originally #96b4c5 */ + --tertiary-high: var(--color-1-40); /* originally #5886a0 */ + --tertiary-hover: var(--color-1-20); /* originally #314a59 */ + --tertiary-50: var(--color-1-99); /* originally #eaf0f3 */ {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set tertiary = i * 100 %} {% set color = 100 - i * 5 %} - --tertiary-{{ tertiary }}: var(--color-{{ "%02d" % color }}); + --tertiary-{{ tertiary }}: var(--color-1-{{ "%02d" % color }}); {% endfor %} /* Quaternary */ - --quaternary-low: var(--color-80); /* originally #cfe0ea */ + --quaternary-low: var(--color-1-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 */ + --highlight-bg: var(--color-1-90); /* originally #dbebf4 */ + --highlight-low: var(--color-1-90); /* originally #dbebf4 */ + --highlight-medium: var(--color-1-80); /* originally #c3deed */ + --highlight-high: var(--color-1-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 */ + --blend-primary-secondary-5: rgb(var(--color-1-rgb-95)); /* originally rgb(232, 238, 241) */ + --primary-med-or-secondary-med: var(--color-1-60); /* originally #7499bd */ + --primary-med-or-secondary-high: var(--color-1-60); /* originally #7499bd */ + --primary-high-or-secondary-low: var(--color-1-40); /* originally #487096 */ + --primary-low-mid-or-secondary-high: var(--color-1-75); /* originally #acc2d7 */ + --primary-low-mid-or-secondary-low: var(--color-1-75); /* originally #acc2d7 */ + --primary-or-primary-low-mid: var(--color-1-20); /* originally #203243 */ + --highlight-low-or-medium: var(--color-1-90); /* originally #dbebf4 */ + --tertiary-or-tertiary-low: var(--color-1-40); /* originally #416376 */ + --tertiary-low-or-tertiary-high: var(--color-1-95); /* originally #dfe8ee */ + --tertiary-med-or-tertiary: var(--color-1-60); /* originally #96b4c5 */ + --secondary-or-primary: var(--color-1-95); /* originally #eef4f7 */ + --tertiary-or-white: var(--color-1-40); /* originally #416376 */ /* Float Kit */ --float-kit-arrow-stroke-color: var(--primary-low); /* already mapped above */ @@ -210,144 +208,144 @@ HINT: /* 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); + --color-1-primary: var(--color-1-50); + --color-1-primary-contrast: var(--color-1-99); + --color-1-primary-dark-1: var(--color-1-48); + --color-1-primary-dark-2: var(--color-1-47); + --color-1-primary-dark-3: var(--color-1-46); + --color-1-primary-dark-4: var(--color-1-45); + --color-1-primary-dark-5: var(--color-1-44); + --color-1-primary-dark-6: var(--color-1-43); + --color-1-primary-dark-7: var(--color-1-42); + --color-1-primary-light-1: var(--color-1-52); + --color-1-primary-light-2: var(--color-1-53); + --color-1-primary-light-3: var(--color-1-54); + --color-1-primary-light-4: var(--color-1-55); + --color-1-primary-light-5: var(--color-1-57); + --color-1-primary-light-6: var(--color-1-59); + --color-1-primary-light-7: var(--color-1-61); /* Alpha variants reference the base RGB variable */ {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set alpha = i * 10 %} - --color-primary-alpha-{{ alpha }}: rgba(var(--color-rgb-50), 0.{{ alpha }}); + --color-1-primary-alpha-{{ alpha }}: rgba(var(--color-1-rgb-50), 0.{{ alpha }}); {% endfor %} - --color-primary-hover: var(--color-primary-dark-1); - --color-primary-active: var(--color-primary-dark-2); + --color-1-primary-hover: var(--color-1-primary-dark-1); + --color-1-primary-active: var(--color-1-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-1-secondary: var(--color-1-80); + --color-1-secondary-dark-1: var(--color-1-78); + --color-1-secondary-dark-2: var(--color-1-76); + --color-1-secondary-dark-3: var(--color-1-74); + --color-1-secondary-dark-4: var(--color-1-72); + --color-1-secondary-dark-5: var(--color-1-70); + --color-1-secondary-dark-6: var(--color-1-68); + --color-1-secondary-dark-7: var(--color-1-66); + --color-1-secondary-dark-8: var(--color-1-64); + --color-1-secondary-dark-9: var(--color-1-62); + --color-1-secondary-dark-10: var(--color-1-60); + --color-1-secondary-dark-11: var(--color-1-58); + --color-1-secondary-dark-12: var(--color-1-56); + --color-1-secondary-dark-13: var(--color-1-54); + --color-1-secondary-light-1: var(--color-1-92); + --color-1-secondary-light-2: var(--color-1-93); + --color-1-secondary-light-3: var(--color-1-94); + --color-1-secondary-light-4: var(--color-1-95); {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set alpha = i * 10 %} - --color-secondary-alpha-{{ alpha }}: rgba(var(--color-rgb-80), 0.{{ alpha }}); + --color-1-secondary-alpha-{{ alpha }}: rgba(var(--color-1-rgb-80), 0.{{ alpha }}); {% endfor %} - --color-secondary-button: var(--color-secondary-dark-4); - --color-secondary-hover: var(--color-secondary-dark-5); - --color-secondary-active: var(--color-secondary-dark-6); + --color-1-secondary-button: var(--color-1-secondary-dark-4); + --color-1-secondary-hover: var(--color-1-secondary-dark-5); + --color-1-secondary-active: var(--color-1-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); + --color-1-console-fg: var(--color-1-98); + --color-1-console-fg-subtle: var(--color-1-85); + --color-1-console-bg: var(--color-1-10); + --color-1-console-border: var(--color-1-40); + --color-1-console-hover-bg: var(--color-1-42); + --color-1-console-active-bg: var(--color-1-40); + --color-1-console-menu-bg: var(--color-1-38); + --color-1-console-menu-border:var(--color-1-45); /* Body, Text, and Miscellaneous Colors */ - --color-white: var(--color-99); - --color-grey: var(--color-60); - --color-grey-light: var(--color-65); + --color-1-white: var(--color-1-99); + --color-1-grey: var(--color-1-60); + --color-1-grey-light: var(--color-1-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-1-body: var(--color-1-white); + --color-1-text-dark: var(--color-1-10); + --color-1-text: var(--color-1-40); + --color-1-text-light: var(--color-1-60); + --color-1-text-light-1: var(--color-1-65); + --color-1-text-light-2: var(--color-1-70); + --color-1-text-light-3: var(--color-1-75); - --color-footer: var(--color-nav-bg); - --color-timeline: var(--color-80); + --color-1-footer: var(--color-1-nav-bg); + --color-1-timeline: var(--color-1-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); + --color-1-input-text: var(--color-1-10); + --color-1-input-background: var(--color-1-white); + --color-1-input-toggle-background: var(--color-1-80); + --color-1-input-border: var(--color-1-secondary); + --color-1-input-border-hover: var(--color-1-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); + --color-1-light: var(--color-1-05); + --color-1-light-mimic-enabled: rgba(var(--color-1-rgb-05), calc(6 / 255 * 222 / 255 / 0.55)); + --color-1-light-border: var(--color-1-05); + --color-1-hover: var(--color-1-05); + --color-1-hover-opaque: var(--color-1-95); + --color-1-active: var(--color-1-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); + --color-1-menu: var(--color-1-99); + --color-1-card: var(--color-1-99); + --color-1-markup-table-row: var(--color-1-01); + --color-1-markup-code-block: var(--color-1-01); + --color-1-markup-code-inline: var(--color-1-01); + --color-1-button: var(--color-1-99); + --color-1-code-bg: var(--color-1-99); + --color-1-shadow: var(--color-1-05); + --color-1-shadow-opaque: var(--color-1-85); + --color-1-secondary-bg: var(--color-1-95); + --color-1-expand-button: var(--color-1-98); + --color-1-placeholder-text: var(--color-1-text-light-3); + --color-1-editor-line-highlight: var(--color-1-primary-light-6); + --color-1-project-column-bg: var(--color-1-secondary-light-4); + --color-1-caret: var(--color-1-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); + --color-1-reaction-bg: var(--color-1-05); + --color-1-reaction-hover-bg: var(--color-1-primary-light-5); + --color-1-reaction-active-bg: var(--color-1-primary-light-6); + --color-1-tooltip-text: var(--color-1-99); + --color-1-tooltip-bg: var(--color-1-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); + --color-1-nav-bg: var(--color-1-99); + --color-1-nav-hover-bg: var(--color-1-secondary-light-1); + --color-1-nav-text: var(--color-1-40); + --color-1-secondary-nav-bg: var(--color-1-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); + --color-1-label-text: var(--color-1-40); + --color-1-label-bg: var(--color-1-50); + --color-1-label-hover-bg: var(--color-1-60); + --color-1-label-active-bg: var(--color-1-70); + --color-1-accent: var(--color-1-primary-light-1); + --color-1-small-accent: var(--color-1-primary-light-6); + --color-1-highlight-fg: var(--color-1-10); + --color-1-highlight-bg: var(--color-1-99); + --color-1-overlay-backdrop: var(--color-1-05); } /* Keycloak */ @@ -357,150 +355,150 @@ HINT: {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set black = i * 50 %} {% set color = 100 - i * 5 %} - --pf-v5-global--palette--black-{{ black }}: var(--color-{{ "%02d" % color }}); + --pf-v5-global--palette--black-{{ black }}: var(--color-1-{{ "%02d" % color }}); {% endfor %} /* --- White --- */ - --pf-v5-global--palette--white: var(--color-99); + --pf-v5-global--palette--white: var(--color-1-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: rgba(var(--color-rgb-10),0.7); - --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-rgb-20),0.8); + --pf-v5-global--BackgroundColor--100: var(--color-1-99); + --pf-v5-global--BackgroundColor--150: var(--color-1-95); + --pf-v5-global--BackgroundColor--200: var(--color-1-85); + --pf-v5-global--BackgroundColor--300: var(--color-1-75); + --pf-v5-global--BackgroundColor--400: var(--color-1-65); + --pf-v5-global--BackgroundColor--light-100: var(--color-1-99); + --pf-v5-global--BackgroundColor--light-200: var(--color-1-95); + --pf-v5-global--BackgroundColor--light-300: var(--color-1-85); + --pf-v5-global--BackgroundColor--dark-100: var(--color-1-10); + --pf-v5-global--BackgroundColor--dark-200: var(--color-1-25); + --pf-v5-global--BackgroundColor--dark-300: var(--color-1-20); + --pf-v5-global--BackgroundColor--dark-400: var(--color-1-30); + --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(var(--color-1-rgb-10),0.7); + --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-1-rgb-20),0.8); /* --- 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); + --pf-v5-global--color-1--100: var(--color-1-10); + --pf-v5-global--color-1--200: var(--color-1-40); + --pf-v5-global--color-1--300: var(--color-1-25); + --pf-v5-global--color-1--400: var(--color-1-50); + --pf-v5-global--color-1--light-100: var(--color-1-99); + --pf-v5-global--color-1--light-200: var(--color-1-85); + --pf-v5-global--color-1--light-300: var(--color-1-75); + --pf-v5-global--color-1--dark-100: var(--color-1-10); + --pf-v5-global--color-1--dark-200: var(--color-1-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); + --pf-v5-global--active-color--100: var(--color-1-65); + --pf-v5-global--active-color--200: var(--color-1-95); + --pf-v5-global--active-color--300: var(--color-1-75); + --pf-v5-global--active-color--400: var(--color-1-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); + --pf-v5-global--disabled-color--100: var(--color-1-40); + --pf-v5-global--disabled-color--200: var(--color-1-75); + --pf-v5-global--disabled-color--300: var(--color-1-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); + --pf-v5-global--primary-color--100: var(--color-1-65); + --pf-v5-global--primary-color--200: var(--color-1-40); + --pf-v5-global--primary-color--light-100: var(--color-1-75); + --pf-v5-global--primary-color--dark-100: var(--color-1-65); /* --- Secondary Colors --- */ - --pf-v5-global--secondary-color--100: var(--color-40); + --pf-v5-global--secondary-color--100: var(--color-1-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); + --pf-v5-global--custom-color--100: var(--color-1-65); + --pf-v5-global--custom-color--200: var(--color-1-65); + --pf-v5-global--custom-color--300: var(--color-1-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); + --pf-v5-global--link--Color: var(--color-1-65); + --pf-v5-global--link--color-1--hover: var(--color-1-40); + --pf-v5-global--link--color-1--light: var(--color-1-75); + --pf-v5-global--link--color-1--light--hover: var(--color-1-85); + --pf-v5-global--link--color-1--dark: var(--color-1-65); + --pf-v5-global--link--color-1--dark--hover: var(--color-1-40); + --pf-v5-global--link--color-1--visited: var(--color-1-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); + --pf-v5-global--BorderColor--100: var(--color-1-75); + --pf-v5-global--BorderColor--200: var(--color-1-50); + --pf-v5-global--BorderColor--300: var(--color-1-85); + --pf-v5-global--BorderColor--400: var(--color-1-65); + --pf-v5-global--BorderColor--dark-100: var(--color-1-75); + --pf-v5-global--BorderColor--light-100: var(--color-1-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); + --pf-v5-global--icon--color-1--light: var(--color-1-40); + --pf-v5-global--icon--color-1--dark: var(--color-1-10); + --pf-v5-global--icon--color-1--light--light: var(--color-1-85); + --pf-v5-global--icon--color-1--dark--light: var(--color-1-99); + --pf-v5-global--icon--color-1--light--dark: var(--color-1-40); + --pf-v5-global--icon--color-1--dark--dark: var(--color-1-10); } .pf-v5-c-button.pf-m-tertiary { - --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-70); + --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-1-70); {# Assume that the following line is necessary due to load order #} background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor); } /* Additional Keykloak Configuration */ a.pf-v5-c-nav__link{ - --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-rgb-56), 0.4); + --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-1-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) #} +--lam-background-color-default: var(--color-1-99); {# from #FFFFFF (very bright white) #} +--lam-input-bg-color: var(--color-1-98); {# from #fcfcfc (almost white) #} +--lam-text-color-default: var(--color-1-01); {# from #000000 (pure black) #} +--lam-border-color: var(--color-1-90); {# from #e8e8e8 (light grey) #} +--lam-border-color-primary: var(--color-1-15); {# from #01689e (dark blue) #} +--lam-border-color-secondary: var(--color-1-85); {# from #ffcb1d (bright yellow) #} +--lam-background-color-primary: var(--color-1-50); {# from #3daee9 (mid-tone blue) #} +--lam-background-color-secondary: var(--color-1-90); {# from #ffe233 (bright yellow) #} +--lam-text-color-primary: var(--color-1-99); {# from #ffffff (pure white) #} +--lam-text-color-secondary: var(--color-1-01); {# from #000000 (pure black) #} +--lam-text-color-ok: var(--color-1-10); {# from #237d0c (dark green) #} +--lam-table-background-color-bright: var(--color-1-98); {# from #fbfbfb (very light grey) #} +--lam-table-background-color-dark: var(--color-1-92); {# from #e8f3ff (light blue) #} +--lam-table-background-color-hover: var(--color-1-50); {# from #3daee9 (mid-tone blue) #} +--lam-table-text-color-hover: var(--color-1-99); {# from #ffffff (pure white) #} +--lam-table-border-color: var(--color-1-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); + --dropdown-border-color: var(--color-1-35); + --dropdown-background-color: rgba(var(--color-1-rgb-03), 0.9); + --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-1-rgb-01), 0.25), + 0 8px 10px -6px rgba(var(--color-1-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); + --modal-background-color: rgba(var(--color-1-rgb-03), 0.7); + --modal-background-variant-color: rgba(var(--color-1-rgb-05), 0.7); + --modal-border-color: var(--color-1-35); /* Background */ - --background-border-color: var(--color-82); + --background-border-color: var(--color-1-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); + --background-color: var(--color-1-93); + --background-color-tint: rgba(var(--color-1-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); + --surface-background-color: var(--color-1-90); + --surface-variant-background-color: var(--color-1-89); + --surface-variant-active-background-color: var(--color-1-35); + --on-surface-color: rgba(var(--color-1-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)); + --media-outline-color: rgba(var(--color-1-rgb-99), 0.15); + --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-1-rgb-01), 0.25)); } .swal2-popup { @@ -510,54 +508,54 @@ div#mastodon, div#admin-wrapper { /* 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); + --bs-modal-color: var(--color-1-21); /* Text color: dark contrast against the light modal background */ + --bs-modal-bg: var(--color-1-82); /* Background color, as desired */ + --bs-modal-border-color: var(--color-1-82); /* A slightly darker border than the background */ + --bs-modal-header-border-color: var(--color-1-87); /* Same shade as the modal border */ + --bs-modal-footer-bg: var(--color-1-87); /* A slightly offset footer background (a bit darker than the main area) */ + --bs-modal-footer-border-color: var(--color-1-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); + --color-1-main-background: var(--color-1-84); + --color-1-main-background-rgb: rgba(var(--color-1-rgb-84),0.83); + --color-1-primary-element: var(--color-1-80); + --color-1-main-text: var(--color-1-40); + --color-1-background-hover: var(--color-1-65); /** Calendar **/ - --color-background-dark: var(--color-73); /** Days which aren't in the current month **/ - --color-primary-element-light: var(--color-65); + --color-1-background-dark: var(--color-1-73); /** Days which aren't in the current month **/ + --color-1-primary-element-light: var(--color-1-65); } /** Peertube **/ body#custom-css { - --mainColor: var(--color-60); /* Original tone: hsl(24, 90%, 50%) – vibrant orange */ - --mainColorLighter: var(--color-70); /* Original tone: #f5873d – lighter orange */ - --mainColorLightest: var(--color-90); /* Original tone: #fce1cf – very light orange/beige */ - --mainColorVeryLight: var(--color-95); /* Original tone: #fff5eb – almost white */ - --mainHoverColor: var(--color-64); /* Original tone: #f47825 – hover orange */ - --mainBackgroundHoverColor: var(--color-92); /* Original tone: #e9ecef – light gray */ - --mainBackgroundColor: var(--color-99); /* Original tone: #fff – white */ - --mainForegroundColor: var(--color-10); /* Original tone: #212529 – dark gray/black */ - --greyForegroundColor: var(--color-50); /* Original tone: #585858 – medium gray */ - --greyBackgroundColor: var(--color-90); /* Original tone: #E5E5E5 – light gray */ - --greySecondaryBackgroundColor: var(--color-91); /* Original tone: #EFEFEF – very light gray */ - --menuBackgroundColor: var(--color-82); /* Original tone: #000 – black */ - --menuForegroundColor: var(--color-99); /* Original tone: #fff – white */ - --submenuBackgroundColor: var(--color-95); /* Original tone: #F7F7F7 – off-white/light gray */ - --channelBackgroundColor: var(--color-93); /* Original tone: #f6ede8 – warm light beige */ - --inputForegroundColor: var(--color-10); /* Original tone: #212529 – dark gray */ - --inputBackgroundColor: var(--color-99); /* Original tone: #fff – white */ - --inputPlaceholderColor: var(--color-55); /* Original tone: #797676 – medium gray */ - --inputBorderColor: var(--color-80); /* Original tone: #C6C6C6 – light gray */ - --textareaForegroundColor: var(--color-10); /* Original tone: #212529 – dark gray */ - --textareaBackgroundColor: var(--color-99); /* Original tone: #fff – white */ - --markdownTextareaBackgroundColor: var(--color-91); /* Original tone: #EFEFEF – very light gray */ - --actionButtonColor: var(--color-50); /* Original tone: #585858 – medium gray */ + --mainColor: var(--color-1-60); /* Original tone: hsl(24, 90%, 50%) – vibrant orange */ + --mainColorLighter: var(--color-1-70); /* Original tone: #f5873d – lighter orange */ + --mainColorLightest: var(--color-1-90); /* Original tone: #fce1cf – very light orange/beige */ + --mainColorVeryLight: var(--color-1-95); /* Original tone: #fff5eb – almost white */ + --mainHoverColor: var(--color-1-64); /* Original tone: #f47825 – hover orange */ + --mainBackgroundHoverColor: var(--color-1-92); /* Original tone: #e9ecef – light gray */ + --mainBackgroundColor: var(--color-1-99); /* Original tone: #fff – white */ + --mainForegroundColor: var(--color-1-10); /* Original tone: #212529 – dark gray/black */ + --greyForegroundColor: var(--color-1-50); /* Original tone: #585858 – medium gray */ + --greyBackgroundColor: var(--color-1-90); /* Original tone: #E5E5E5 – light gray */ + --greySecondaryBackgroundColor: var(--color-1-91); /* Original tone: #EFEFEF – very light gray */ + --menuBackgroundColor: var(--color-1-82); /* Original tone: #000 – black */ + --menuForegroundColor: var(--color-1-99); /* Original tone: #fff – white */ + --submenuBackgroundColor: var(--color-1-95); /* Original tone: #F7F7F7 – off-white/light gray */ + --channelBackgroundColor: var(--color-1-93); /* Original tone: #f6ede8 – warm light beige */ + --inputForegroundColor: var(--color-1-10); /* Original tone: #212529 – dark gray */ + --inputBackgroundColor: var(--color-1-99); /* Original tone: #fff – white */ + --inputPlaceholderColor: var(--color-1-55); /* Original tone: #797676 – medium gray */ + --inputBorderColor: var(--color-1-80); /* Original tone: #C6C6C6 – light gray */ + --textareaForegroundColor: var(--color-1-10); /* Original tone: #212529 – dark gray */ + --textareaBackgroundColor: var(--color-1-99); /* Original tone: #fff – white */ + --markdownTextareaBackgroundColor: var(--color-1-91); /* Original tone: #EFEFEF – very light gray */ + --actionButtonColor: var(--color-1-50); /* Original tone: #585858 – medium gray */ --supportButtonColor: var(--actionButtonColor); /* Original tone: same as actionButtonColor (#585858) */ - --activatedActionButtonColor: var(--color-10); /* Original tone: #212529 – dark gray */ + --activatedActionButtonColor: var(--color-1-10); /* Original tone: #212529 – dark gray */ color: var(--mainForegroundColor); background-color: var(--mainBackgroundColor); } @@ -575,46 +573,46 @@ html[native-dark-active] my-app button, button { :root { /* Base Colors */ - --light: var(--color-05); /* Very dark (was #000) */ - --dark: var(--color-99); /* Very light (was #fff) */ + --light: var(--color-1-05); /* Very dark (was #000) */ + --dark: var(--color-1-99); /* Very light (was #fff) */ /* Backgrounds */ - --body-bg: var(--color-05); /* Main background: very dark */ - --nav-bg: var(--color-05); /* Navigation background: very dark */ + --body-bg: var(--color-1-05); /* Main background: very dark */ + --nav-bg: var(--color-1-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 */ + --body-color: var(--color-1-70); /* Main text – mid brightness */ + --text-lighter: var(--color-1-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 */ + --bg-light: var(--color-1-95); /* Lighter background areas */ + --card-bg: var(--color-1-90); /* Card background */ + --light-gray: var(--color-1-75); /* For less dominant elements */ + --light-hover-bg: var(--color-1-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 */ + --btn-light-border: var(--color-1-10); /* Dark border for buttons */ + --input-border: var(--color-1-10); /* Border color for inputs */ + --border-color: var(--color-1-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 */ + --comment-bg: var(--color-1-85); /* Background for comments */ + --card-header-accent: var(--color-1-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) */ + --dropdown-item-hover-bg: var(--color-1-05); /* Hover background: very dark */ + --dropdown-item-hover-color: var(--color-1-60); /* Hover text: a bit lighter */ + --dropdown-item-color: var(--color-1-70); /* Regular dropdown item text */ + --dropdown-item-active-color: var(--color-1-99); /* Active state: very light (white) */ } /** Sphinx **/ .bg-background\/95 { - background-color: var(--color-96); + background-color: var(--color-1-96); } .border-border { - border-color: var(--color-85); + border-color: var(--color-1-85); } {# Hide Toogle Button #} @@ -624,58 +622,58 @@ nav.flex.items-center.space-x-1{ /** Taiga **/ :host, :root { - --color-solid-primary: var(--color-83); - --color-link-primary: var(--color-44); - --color-link-tertiary: var(--color-45); - --color-gray100: var(--color-97); - --color-gray200: var(--color-93); - --color-gray300: var(--color-90); - --color-gray400: var(--color-86); - --color-black600: var(--color-34); - --color-black700: var(--color-30); - --color-black800: var(--color-26); - --color-black900: var(--color-21); - --color-black: var(--color-01); - --color-white: var(--color-99); + --color-1-solid-primary: var(--color-1-83); + --color-1-link-primary: var(--color-1-44); + --color-1-link-tertiary: var(--color-1-45); + --color-1-gray100: var(--color-1-97); + --color-1-gray200: var(--color-1-93); + --color-1-gray300: var(--color-1-90); + --color-1-gray400: var(--color-1-86); + --color-1-black600: var(--color-1-34); + --color-1-black700: var(--color-1-30); + --color-1-black800: var(--color-1-26); + --color-1-black900: var(--color-1-21); + --color-1-black: var(--color-1-01); + --color-1-white: var(--color-1-99); } /* Global Defaults (Colors Only) */ body, html[native-dark-active] { - background-color: var(--color-93); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-93), var(--color-91), var(--color-95), var(--color-93)); + background-color: var(--color-1-93); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-93), var(--color-1-91), var(--color-1-95), var(--color-1-93)); background-attachment: fixed; - color: var(--color-40); + color: var(--color-1-40); font-family: {{design.font.type}}; } {# All links (applies to all anchor elements regardless of state) #} a { - color: var(--color-50); + color: var(--color-1-50); } {# Unvisited links (applies only to links that have not been visited) #} a:link { - color: var(--color-55); + color: var(--color-1-55); } {# Visited links (applies only to links that have been visited) #} a:visited { - color: var(--color-45); + color: var(--color-1-45); } {# Hover state (applies when the mouse pointer is over the link) #} a:hover { - color: var(--color-60); + color: var(--color-1-60); } {# Active state (applies during the time the link is being activated, e.g., on click) #} a:active { - color: var(--color-65); + color: var(--color-1-65); } /** Set default buttons transparent **/ html[native-dark-active] button, button{ - background-color: var(--color-87); + background-color: var(--color-1-87); } button:hover, .btn:hover { @@ -686,231 +684,231 @@ button:hover, .btn:hover { 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)); + background-color: var(--color-1-01); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-01), var(--color-1-10)); /* Use Bootstrap danger color for error messages */ color: var(--bs-danger); - border-color: var(--color-20); + border-color: var(--color-1-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)); + background-color: var(--color-1-80); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-80), var(--color-1-90)); /* Use Bootstrap success color for confirmation messages */ color: var(--bs-success); - border-color: var(--color-70); + border-color: var(--color-1-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)); + background-color: var(--color-1-50); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-50), var(--color-1-60)); /* Use Bootstrap warning color to indicate a required field */ color: var(--bs-warning); - border-color: var(--color-70); + border-color: var(--color-1-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)); + background-color: var(--color-1-60); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-60), var(--color-1-70)); /* Use Bootstrap info color to indicate optional information */ color: var(--bs-info); - border-color: var(--color-70); + border-color: var(--color-1-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); + background-color: var(--color-1-80); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-90), var(--color-1-70)); + color: var(--color-1-20); + border-color: var(--color-1-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); + background-color: var(--color-1-70); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-70), var(--color-1-80)); + color: var(--color-1-40); + border-color: var(--color-1-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); + background-color: var(--color-1-70); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-70), var(--color-1-85)); + color: var(--color-1-40); + border-color: var(--color-1-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({{ range(0, 361) | random }}deg, var(--color-10), var(--color-30)); - color: var(--color-10); - border-color: var(--color-50); + background-color: var(--color-1-10); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-10), var(--color-1-30)); + color: var(--color-1-10); + border-color: var(--color-1-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({{ range(0, 361) | random }}deg, var(--color-82), var(--color-90)); - color: var(--color-40); - border-color: var(--color-70); + background-color: var(--color-1-82); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-82), var(--color-1-90)); + color: var(--color-1-40); + border-color: var(--color-1-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({{ range(0, 361) | random }}deg, var(--color-75), var(--color-85)); - color: var(--color-40); - border-color: var(--color-50); + background-color: var(--color-1-75); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-85)); + color: var(--color-1-40); + border-color: var(--color-1-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({{ range(0, 361) | random }}deg, var(--color-78), var(--color-88)); - color: var(--color-40); - border-color: var(--color-65); + background-color: var(--color-1-78); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-78), var(--color-1-88)); + color: var(--color-1-40); + border-color: var(--color-1-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({{ range(0, 361) | random }}deg, var(--color-68), var(--color-78)); - color: var(--color-40); - border-color: var(--color-60); + background-color: var(--color-1-68); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-68), var(--color-1-78)); + color: var(--color-1-40); + border-color: var(--color-1-60); } /* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */ input:checked { - background-color: var(--color-90); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-99)); - color: var(--color-40); - border-color: var(--color-70); + background-color: var(--color-1-90); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-90), var(--color-1-99)); + color: var(--color-1-40); + border-color: var(--color-1-70); } option { - background-color: var(--color-82); - color: var(--color-07); + background-color: var(--color-1-82); + color: var(--color-1-07); } /* Tables (Borders and Header Colors) */ th, td { - border-color: var(--color-70); + border-color: var(--color-1-70); } thead { - background-color: var(--color-80); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-80), var(--color-1-81), var(--color-1-85)); + color: var(--color-1-40); } /* Headings (Text Color) */ h1, h2, h3, h4, h5, h6, p{ - color: var(--color-10); + color: var(--color-1-10); } /* Buttons (Background, Text, Border, and Shadow) Now using a button background that is only slightly darker than the overall background */ html[native-dark-active] .btn, .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); + background-color: var(--color-1-87); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-70), var(--color-1-91), var(--color-1-95), var(--color-1-95)); + color: var(--color-1-50); + border-color: var(--color-1-80); cursor: pointer; } /* Navigation (Background and Text Colors) */ .navbar, .navbar-light, .navbar-dark, .navbar.bg-light { - background-color: var(--color-90); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-85), var(--color-1-90), var(--color-1-91), var(--color-1-95)); + color: var(--color-1-50); + border-color: var(--color-1-85); } .navbar a { - color: var(--color-40); + color: var(--color-1-40); } .navbar a.dropdown-item { - color: var(--color-43); + color: var(--color-1-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); + background-color: var(--color-1-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); - color: var(--color-12); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-85), var(--color-1-90), var(--color-1-91), var(--color-1-95)); + border-color: var(--color-1-85); + color: var(--color-1-12); } .card-body { - color: var(--color-40); + color: var(--color-1-40); } /* Dropdown Menu and Submenu (Background, Text, and Shadow) */ .navbar .dropdown-menu, .nav-item .dropdown-menu { - background-color: var(--color-80); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-80), var(--color-1-81), var(--color-1-85)); + color: var(--color-1-40); } .navbar-nav { - --bs-nav-link-hover-color: var(--color-17); + --bs-nav-link-hover-color: var(--color-1-17); } .dropdown-item { - color: var(--color-40); - background-color: var(--color-80); + color: var(--color-1-40); + background-color: var(--color-1-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)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-80), var(--color-1-81), var(--color-1-85)); } .dropdown-item:hover, .dropdown-item:focus { - background-color: var(--color-65); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-60), var(--color-1-65), var(--color-1-66), var(--color-1-70)); + color: var(--color-1-40); } /* Keycloak */ div#app header{ - background-color: var(--color-60); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-55), var(--color-1-60), var(--color-1-61), var(--color-1-65)); + color: var(--color-1-98); } /** LAM Specific **/ @@ -920,7 +918,7 @@ div#app header{ } ul.lam-tab-navigation { - background: rgba(var(--color-rgb-90), 0.1); + background: rgba(var(--color-1-rgb-90), 0.1); border-color: transparent; } @@ -930,38 +928,38 @@ ul.lam-tab-navigation { } .titleBar { - background-image: linear-gradient(var(--color-83), var(--color-92)); + background-image: linear-gradient(var(--color-1-83), var(--color-1-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); + background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-78), var(--color-1-83), var(--color-1-84), var(--color-1-88)); + border-top-color: var(--color-1-78); + border-left-color: var(--color-1-87); + border-right-color: var(--color-1-87); } div.statusInfo { - background-color: var(--color-81); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-76), var(--color-1-81), var(--color-1-82), var(--color-1-86)); + color: var(--color-1-23); } /** Mailu **/ [class*=sidebar-dark-], .bg-mailu-logo { - background-color: var(--color-90); + background-color: var(--color-1-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)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-85), var(--color-1-90), var(--color-1-91), var(--color-1-95)); } div.statusError { - background-color: var(--color-60); + background-color: var(--color-1-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)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-55), var(--color-1-60), var(--color-1-61), var(--color-1-65)); } div.wrapper footer.main-footer, div.wrapper div.content-wrapper{ - background-color: var(--color-85); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-89), var(--color-85), var(--color-80), var(--color-79)); - color: var(--color-39); + background-color: var(--color-1-85); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-89), var(--color-1-85), var(--color-1-80), var(--color-1-79)); + color: var(--color-1-39); } html.dark-mode #layout-menu .special-buttons a:not(:focus) { @@ -969,25 +967,25 @@ html.dark-mode #layout-menu .special-buttons a:not(:focus) { } html.dark-mode #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected { - background-color: rgba(var(--color-rgb-82), 0.5); + background-color: rgba(var(--color-1-rgb-82), 0.5); } html.dark-mode .listing li.selected, html.dark-mode .listing li.selected>a, html.dark-mode .listing li.selected>div>a, html.dark-mode .listing tr.selected td { - color: var(--color-30); - background-color: rgba(var(--color-rgb-82), 0.5); + color: var(--color-1-30); + background-color: rgba(var(--color-1-rgb-82), 0.5); } html.dark-mode .message-htmlpart { - background-color: rgba(var(--color-rgb-99), 0.08); - color: var(--color-15); + background-color: rgba(var(--color-1-rgb-99), 0.08); + color: var(--color-1-15); } /** Nextcloud specific **/ html.ng-csp header#header{ - background-color: var(--color-80); + background-color: var(--color-1-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-17); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-80), var(--color-1-81), var(--color-1-85)); + color: var(--color-1-17); } .files-list__row-name button, button.button-vue{ @@ -999,45 +997,45 @@ html.ng-csp div#postsetupchecks ul.info{ } div#mastodon .column-link{ - color: var(--color-55); + color: var(--color-1-55); } div#mastodon .column-back-button { - color: var(--color-58); + color: var(--color-1-58); } div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable { - background-color: var(--color-89); + background-color: var(--color-1-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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-84), var(--color-1-89), var(--color-1-90), var(--color-1-94)); + color: var(--color-1-19); } div#mastodon .status-card__title, div#mastodon .display-name strong{ - color: var(--color-33); + color: var(--color-1-33); } div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{ - color: var(--color-29); + color: var(--color-1-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); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-66), var(--color-71), var(--color-72), var(--color-76)); + background-color: var(--color-1-71); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-66), var(--color-1-71), var(--color-1-72), var(--color-1-76)); } .compose-form__actions .icon-button { - color: var(--color-28); + color: var(--color-1-28); } /** OpenProject **/ header.op-app-header{ - background-color: var(--color-40); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-35), var(--color-40), var(--color-41), var(--color-45)); - color: var(--color-40); + background-color: var(--color-1-40); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-35), var(--color-1-40), var(--color-1-41), var(--color-1-45)); + color: var(--color-1-40); } div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{ @@ -1047,8 +1045,8 @@ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-s /* OAuth2 Proxy */ {# The variables look like they are bootstrap variables. @todo Verify and generalize if possible #} .box { - background-color: var(--color-92); - color: var(--color-10); + background-color: var(--color-1-92); + color: var(--color-1-10); } .subtitle { @@ -1056,7 +1054,7 @@ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-s } .has-background-light { - background-color: var(--color-96) !important; + background-color: var(--color-1-96) !important; } /* Pixelfed */ @@ -1066,68 +1064,68 @@ div.page-wrapper{ } .card-header-title { - color: var(--color-37); + color: var(--color-1-37); } /* PHP MyAdmin */ #pma_navigation { - background: linear-gradient(to right, var(--color-95), var(--color-85)); - color: var(--color-05); + background: linear-gradient(to right, var(--color-1-95), var(--color-1-85)); + color: var(--color-1-05); } #pma_navigation_tree a { - color: var(--color-05); + color: var(--color-1-05); } #pma_navigation_tree li.activePointer, #pma_navigation_tree li.selected { - color: var(--color-05); - background-color: var(--color-70); + color: var(--color-1-05); + background-color: var(--color-1-70); } .breadcrumb-navbar { - background-color: var(--color-86); + background-color: var(--color-1-86); } .navbar-nav .nav-item { - background: linear-gradient(var(--color-99), var(--color-85)); - border-right-color: var(--color-99); - border-left-color: var(--color-80); - border-bottom-color: var(--color-80); + background: linear-gradient(var(--color-1-99), var(--color-1-85)); + border-right-color: var(--color-1-99); + border-left-color: var(--color-1-80); + border-bottom-color: var(--color-1-80); } .result_query div.sqlOuter { - background: var(--color-50); + background: var(--color-1-50); } .table { - --bs-table-bg: var(--color-99); /* #fff → white */ - --bs-table-border-color: var(--color-99); /* #fff → white */ - --bs-table-striped-bg: var(--color-90); /* #dfdfdf → light gray */ - --bs-table-hover-color: var(--color-01); /* #000 → black */ + --bs-table-bg: var(--color-1-99); /* #fff → white */ + --bs-table-border-color: var(--color-1-99); /* #fff → white */ + --bs-table-striped-bg: var(--color-1-90); /* #dfdfdf → light gray */ + --bs-table-hover-color: var(--color-1-01); /* #000 → black */ } .table thead th { - background-image: linear-gradient(var(--color-90), var(--color-80)); - border-color: var(--color-99); + background-image: linear-gradient(var(--color-1-90), var(--color-1-80)); + border-color: var(--color-1-99); } .table th, .table td { - text-shadow: 0 1px 0 var(--color-60); + text-shadow: 0 1px 0 var(--color-1-60); } div.tools, .tblFooters { - color: var(--color-01); - background: var(--color-62); + color: var(--color-1-01); + background: var(--color-1-62); } .navigation { - background: linear-gradient(var(--color-87), var(--color-69)); + background: linear-gradient(var(--color-1-87), var(--color-1-69)); } .pma-fieldset { - border-color: var(--color-17); - background: var(--color-80); + border-color: var(--color-1-17); + background: var(--color-1-80); } /** Taiga specific configuration **/ @@ -1137,25 +1135,25 @@ section.main.kanban{ } div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{ - background-color: var(--color-92); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-87), var(--color-92), var(--color-93), var(--color-97)); - color: var(--color-40); + background-color: var(--color-1-92); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-87), var(--color-1-92), var(--color-1-93), var(--color-1-97)); + color: var(--color-1-40); } section.kanban h1, section.kanban h2{ - color: var(--color-40); + color: var(--color-1-40); } .home-project { - background: var(--color-88); - 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); + background: var(--color-1-88); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-83), var(--color-1-88), var(--color-1-89), var(--color-1-93)); + border-color: var(--color-1-60); + color: var(--color-1-12); } .home-wrapper .title-bar { - background: var(--color-75); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-75), var(--color-76), var(--color-80)); + background: var(--color-1-75); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-70), var(--color-1-75), var(--color-1-76), var(--color-1-80)); } .kanban.swimlane .kanban-header { @@ -1163,21 +1161,21 @@ section.kanban h1, section.kanban h2{ } .kanban-table-header .task-colum-name { - background-color: var(--color-70); - color: var(--color-10); + background-color: var(--color-1-70); + color: var(--color-1-10); } input.ng-empty::placeholder,.ng-empty::placeholder { - color: rgba(var(--color-rgb-03),0.6); + color: rgba(var(--color-1-rgb-03),0.6); } .lightbox { - background: rgba(var(--color-rgb-97), .93); - color: var(--color-03); + background: rgba(var(--color-1-rgb-97), .93); + color: var(--color-1-03); } .kanban-filter tg-filter { - border-color: var(--color-70); + border-color: var(--color-1-70); } .discover-header { @@ -1186,11 +1184,11 @@ input.ng-empty::placeholder,.ng-empty::placeholder { /* Portfolio */ .card-img-top i { - filter: drop-shadow(4px 4px 4px rgba(var(--color-rgb-23), 0.6)); + filter: drop-shadow(4px 4px 4px rgba(var(--color-1-rgb-23), 0.6)); } .kanban-table-body .kanban-uses-box { - background-color: var(--color-81); + background-color: var(--color-1-81); } .kanban-swimlane-title { diff --git a/roles/nginx-modifier-css/vars/main.yml b/roles/nginx-modifier-css/vars/main.yml index 632b2142..e6e10075 100644 --- a/roles/nginx-modifier-css/vars/main.yml +++ b/roles/nginx-modifier-css/vars/main.yml @@ -1 +1,4 @@ -global_css_destination: "{{nginx.directories.data.global}}global.css" \ No newline at end of file +global_css_destination: "{{nginx.directories.data.global}}global.css" +global_css_base_color: "{{ design.css.colors.base }}" +global_css_count: 100 +global_css_shades: true \ No newline at end of file