From 567622f52364b0400ee86f10b77a3aef9c176308 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Wed, 16 Apr 2025 00:56:29 +0200
Subject: [PATCH] Solved OpenProject build bug
---
ansible.cfg | 2 +
lookup_plugins/colorscheme.py | 9 +
requirements.txt | 1 +
roles/docker-openproject/handlers/main.yml | 8 -
roles/docker-openproject/tasks/main.yml | 6 +-
.../templates/docker-compose.yml.j2 | 3 +
roles/nginx-modifier-css/README.md | 44 +-
.../filter_plugins/color_filters.py | 94 --
roles/nginx-modifier-css/meta/main.yml | 29 +-
roles/nginx-modifier-css/tasks/main.yml | 23 +-
.../templates/global.css.j2 | 1140 ++++++++---------
roles/nginx-modifier-css/vars/main.yml | 5 +-
12 files changed, 659 insertions(+), 705 deletions(-)
create mode 100644 ansible.cfg
create mode 100644 lookup_plugins/colorscheme.py
create mode 100644 requirements.txt
delete mode 100644 roles/docker-openproject/handlers/main.yml
delete mode 100644 roles/nginx-modifier-css/filter_plugins/color_filters.py
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