diff --git a/lookup_plugins/colorscheme.py b/lookup_plugins/colorscheme.py index 6b6366f1..50243996 100644 --- a/lookup_plugins/colorscheme.py +++ b/lookup_plugins/colorscheme.py @@ -6,4 +6,5 @@ class LookupModule(LookupBase): base_color = terms[0] count = kwargs.get('count') shades = kwargs.get('shades') - return [generate_full_palette(base_color, count=count, shades=shades)] + shades = kwargs.get('invert_lightness') + return [generate_full_palette(base_color, count=count, shades=shades, invert_lightness=invert_lightness)] diff --git a/requirements.txt b/requirements.txt index e87753ca..8422302e 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1 +1 @@ -colorscheme-generator @ https://github.com/kevinveenbirkenbach/colorscheme-generator/archive/refs/tags/v0.2.0.zip \ No newline at end of file +colorscheme-generator @ https://github.com/kevinveenbirkenbach/colorscheme-generator/archive/refs/tags/v0.3.0.zip \ 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 64e0fd98..0af9fe7c 100644 --- a/roles/nginx-modifier-css/tasks/main.yml +++ b/roles/nginx-modifier-css/tasks/main.yml @@ -1,12 +1,15 @@ # Load this role via nginx-modifier-all for consistency -# 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: Generate inverted color palette with colorscheme-generator + set_fact: + inverted_color_palette: "{{ lookup('colorscheme', global_css_base_color, count=global_css_count, shades=global_css_shades, invert_lightness=True) }}" + when: run_once_nginx_global_css is not defined + - name: Deploy global.css template: src: global.css.j2 diff --git a/roles/nginx-modifier-css/templates/global.css.j2 b/roles/nginx-modifier-css/templates/global.css.j2 index ffb1f2b8..e3b2286d 100644 --- a/roles/nginx-modifier-css/templates/global.css.j2 +++ b/roles/nginx-modifier-css/templates/global.css.j2 @@ -24,7 +24,7 @@ HINT: @media (prefers-color-scheme: dark) { :root { - {% for var_name, color in color_palette.items() %} + {% for var_name, color in inverted_color_palette.items() %} {{ var_name }}: {{ color }}; {% endfor %} } @@ -34,70 +34,70 @@ HINT: /* For Dark Mode Plugin * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj */ - --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 */ + --native-dark-accent-color: var(--color-01-60); /* was #a9a9a9 */ + --native-dark-bg-color: var(--color-01-10); /* was #292929 */ + --native-dark-bg-image-color: rgba(var(--color-01-rgb-01), 0.10); /* remains the same, or adjust if needed */ + --native-dark-border-color: var(--color-01-40); /* was #555555 */ + --native-dark-box-shadow: 0 0 0 1px rgb(var(--color-01-rgb-99), / 10%); + --native-dark-cite-color: var(--color-01-70); /* was #92de92 – you might adjust if a green tone is needed */ + --native-dark-fill-color: var(--color-01-50); /* was #7d7d7d */ + --native-dark-font-color: var(--color-01-95); /* was #dcdcdc */ + --native-dark-link-color: var(--color-01-80); /* was #8db2e5 */ + --native-dark-visited-link-color: var(--color-01-85); /* was #c76ed7 */ } /* Bootstrap Overrides (Color/Shadow Variables Only) */ :root { - --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) */ + --bs-black: var(--color-01-01); /* Original tone: Black (#000) */ + --bs-white: var(--color-01-99); /* Original tone: White (#fff) */ + --bs-gray: var(--color-01-50); /* Original tone: Gray (#6c757d) */ + --bs-gray-dark: var(--color-01-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-1-{{ "%02d" % color }}); + --bs-gray-{{ gray }}: var(--color-01-{{ "%02d" % color }}); {% endfor %} - --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-primary: var(--color-01-65); /* Original tone: Blue (#0d6efd) */ + --bs-light: var(--color-01-95); /* Original tone: Light (#f8f9fa) */ + --bs-dark: var(--color-01-10); /* Original tone: Dark (#212529) */ + --bs-primary-rgb: var(--color-01-rgb-65); /* Original tone: Blue (13, 110, 253) */ + --bs-secondary-rgb: var(--color-01-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */ + --bs-light-rgb: var(--color-01-rgb-95); /* Original tone: Light (248, 249, 250) */ + --bs-dark-rgb: var(--color-01-rgb-10); /* Original tone: Dark (33, 37, 41) */ + --bs-white-rgb: var(--color-01-rgb-99); /* Original tone: White (255, 255, 255) */ + --bs-black-rgb: var(--color-01-rgb-01); /* Original tone: Black (0, 0, 0) */ + --bs-body-color-rgb: var(--color-01-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */ + --bs-body-bg-rgb: var(--color-01-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */ + --bs-body-color: var(--color-01-10); /* Original tone: Dark (#212529) */ + --bs-body-bg: var(--color-01-99); /* Original tone: White (#fff) */ + --bs-border-color: var(--color-01-85); /* Original tone: Gray (#dee2e6) */ + --bs-link-color: var(--color-01-65); /* Original tone: Blue (#0d6efd) */ + --bs-link-hover-color: var(--color-01-60); /* Original tone: Darker Blue (#0a58ca) */ + --bs-code-color: var(--color-01-55); /* Original tone: Pink (#d63384) */ + --bs-highlight-bg: var(--color-01-93); /* Original tone: Light Yellow (#fff3cd) */ + --bs-list-group-bg: var(--color-01-40); + --bs-emphasis-color: var(--color-01-01); /* Gemappt von #000 */ + --bs-emphasis-color-rgb: var(--color-01-rgb-01); /* Gemappt von 0, 0, 0 */ + --bs-secondary-color: rgba(var(--color-01-rgb-10), 0.75); /* Gemappt von rgba(33, 37, 41, 0.75) */ + --bs-secondary-color-rgb: var(--color-01-rgb-10); /* Gemappt von 33, 37, 41 */ + --bs-secondary-bg: var(--color-01-90); /* Gemappt von #e9ecef */ + --bs-secondary-bg-rgb: var(--color-01-rgb-90); /* Gemappt von 233, 236, 239 */ + --bs-tertiary-color: rgba(var(--color-01-rgb-10), 0.5); /* Gemappt von rgba(33, 37, 41, 0.5) */ + --bs-tertiary-color-rgb: var(--color-01-rgb-10); /* Gemappt von 33, 37, 41 */ + --bs-tertiary-bg: var(--color-01-95); /* Gemappt von #f8f9fa */ + --bs-tertiary-bg-rgb: var(--color-01-rgb-95); /* Gemappt von 248, 249, 250 */ + --bs-link-color-rgb: var(--color-01-rgb-65); /* Gemappt von 13, 110, 253 */ + --bs-link-hover-color-rgb: var(--color-01-rgb-60); /* Gemappt von 10, 88, 202 */ + --bs-highlight-color: var(--color-01-10); /* Gemappt von #212529 */ + --bs-border-color-translucent: rgba(var(--color-01-rgb-01), 0.175); /* Gemappt von rgba(0, 0, 0, 0.175) */ + --bs-focus-ring-color: rgba(var(--color-01-rgb-65), 0.25); /* Gemappt von rgba(13, 110, 253, 0.25) */ --bs-table-color: var(--bs-emphasis-color); - --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-bg: var(--color-01-99); /* White (#fff) */ + --bs-table-border-color: var(--color-01-99); /* White (#fff) */ + --bs-table-striped-bg: var(--color-01-85); /* Light Gray (entspricht ca. #dee2e6) */ + --bs-table-hover-color: var(--color-01-01); /* Black (#000) */ --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); } @@ -105,100 +105,100 @@ HINT: /* Discourse */ :root section#main{ /* Base Colors */ - --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 */ + --primary: var(--color-01-20); /* originally #203243 */ + --secondary: var(--color-01-95); /* originally #eef4f7 */ + --tertiary: var(--color-01-40); /* originally #416376 */ + --quaternary: var(--color-01-50); /* originally #5e99b9 */ /* Header & Highlight */ - --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 */ + --header_background: var(--color-01-86); /* originally #86bddb */ + --header_primary: var(--color-01-20); /* same as --primary */ + --highlight: var(--color-01-70); /* same as header_background */ + --d-selected: var(--color-01-85); /* originally #bee0f2 */ + --d-hover: var(--color-01-90); /* originally #d2efff */ /* Normally refers to secondary. Somehow this reference does not work.*/ - --d-sidebar-background: var(--color-1-92); - --d-sidebar-footer-fade: var(--color-1-92); + --d-sidebar-background: var(--color-01-92); + --d-sidebar-footer-fade: var(--color-01-92); /* RGB values */ - --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); + --always-black-rgb: var(--color-01-rgb-01); + --primary-rgb: var(--color-01-rgb-20); + --primary-low-rgb: var(--color-01-rgb-95); + --primary-very-low-rgb: var(--color-01-rgb-99); + --secondary-rgb: var(--color-01-rgb-95); + --header_background-rgb: var(--color-01-rgb-70); + --tertiary-rgb: var(--color-01-rgb-40); + --highlight-rgb: var(--color-01-rgb-70); + --success-rgb: var(--color-01-rgb-50); /* Primary Scale */ - --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 */ + --primary-very-low: var(--color-01-99); /* originally #f7f9fb */ + --primary-low: var(--color-01-95); /* originally #e3ebf2 */ + --primary-low-mid: var(--color-01-75); /* originally #acc2d7 */ + --primary-medium: var(--color-01-60); /* originally #7499bd */ + --primary-high: var(--color-01-40); /* originally #487096 */ + --primary-very-high: var(--color-01-20); /* originally #34516d */ + --primary-50: var(--color-01-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-1-{{ "%02d" % color }}); + --primary-{{ primary }}: var(--color-01-{{ "%02d" % color }}); {% endfor %} /* Header Primary Scale */ - --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) */ + --header_primary-low: rgb(var(--color-01-rgb-75)); /* rgb(128, 180, 209) */ + --header_primary-low-mid: rgb(var(--color-01-rgb-70)); /* rgb(110, 155, 181) */ + --header_primary-medium: rgb(var(--color-01-rgb-60)); /* rgb(93, 132, 155) */ + --header_primary-high: rgb(var(--color-01-rgb-50)); /* rgb(78, 112, 132) */ + --header_primary-very-high: rgb(var(--color-01-rgb-20)); /* rgb(52, 76, 94) */ /* Secondary Scale */ - --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 */ + --secondary-low: var(--color-01-20); /* originally #2f5163 */ + --secondary-medium: var(--color-01-40); /* originally #4e88a5 */ + --secondary-high: var(--color-01-60); /* originally #7ba9c1 */ + --secondary-very-high: var(--color-01-90); /* originally #d7e5ec */ /* Tertiary Scale */ - --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 */ + --tertiary-very-low: var(--color-01-99); /* originally #eaf0f3 */ + --tertiary-low: var(--color-01-95); /* originally #dfe8ee */ + --tertiary-medium: var(--color-01-60); /* originally #96b4c5 */ + --tertiary-high: var(--color-01-40); /* originally #5886a0 */ + --tertiary-hover: var(--color-01-20); /* originally #314a59 */ + --tertiary-50: var(--color-01-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-1-{{ "%02d" % color }}); + --tertiary-{{ tertiary }}: var(--color-01-{{ "%02d" % color }}); {% endfor %} /* Quaternary */ - --quaternary-low: var(--color-1-80); /* originally #cfe0ea */ + --quaternary-low: var(--color-01-80); /* originally #cfe0ea */ /* Highlight */ - --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 */ + --highlight-bg: var(--color-01-90); /* originally #dbebf4 */ + --highlight-low: var(--color-01-90); /* originally #dbebf4 */ + --highlight-medium: var(--color-01-80); /* originally #c3deed */ + --highlight-high: var(--color-01-30); /* originally #286688 */ /* Combination Variables */ - --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 */ + --blend-primary-secondary-5: rgb(var(--color-01-rgb-95)); /* originally rgb(232, 238, 241) */ + --primary-med-or-secondary-med: var(--color-01-60); /* originally #7499bd */ + --primary-med-or-secondary-high: var(--color-01-60); /* originally #7499bd */ + --primary-high-or-secondary-low: var(--color-01-40); /* originally #487096 */ + --primary-low-mid-or-secondary-high: var(--color-01-75); /* originally #acc2d7 */ + --primary-low-mid-or-secondary-low: var(--color-01-75); /* originally #acc2d7 */ + --primary-or-primary-low-mid: var(--color-01-20); /* originally #203243 */ + --highlight-low-or-medium: var(--color-01-90); /* originally #dbebf4 */ + --tertiary-or-tertiary-low: var(--color-01-40); /* originally #416376 */ + --tertiary-low-or-tertiary-high: var(--color-01-95); /* originally #dfe8ee */ + --tertiary-med-or-tertiary: var(--color-01-60); /* originally #96b4c5 */ + --secondary-or-primary: var(--color-01-95); /* originally #eef4f7 */ + --tertiary-or-white: var(--color-01-40); /* originally #416376 */ /* Float Kit */ --float-kit-arrow-stroke-color: var(--primary-low); /* already mapped above */ @@ -208,144 +208,144 @@ HINT: /* gitea */ :root { /* Base and derived colors are now referenced from the computed scale */ - --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); + --color-01-primary: var(--color-01-50); + --color-01-primary-contrast: var(--color-01-99); + --color-01-primary-dark-1: var(--color-01-48); + --color-01-primary-dark-2: var(--color-01-47); + --color-01-primary-dark-3: var(--color-01-46); + --color-01-primary-dark-4: var(--color-01-45); + --color-01-primary-dark-5: var(--color-01-44); + --color-01-primary-dark-6: var(--color-01-43); + --color-01-primary-dark-7: var(--color-01-42); + --color-01-primary-light-1: var(--color-01-52); + --color-01-primary-light-2: var(--color-01-53); + --color-01-primary-light-3: var(--color-01-54); + --color-01-primary-light-4: var(--color-01-55); + --color-01-primary-light-5: var(--color-01-57); + --color-01-primary-light-6: var(--color-01-59); + --color-01-primary-light-7: var(--color-01-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-1-primary-alpha-{{ alpha }}: rgba(var(--color-1-rgb-50), 0.{{ alpha }}); + --color-01-primary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-50), 0.{{ alpha }}); {% endfor %} - --color-1-primary-hover: var(--color-1-primary-dark-1); - --color-1-primary-active: var(--color-1-primary-dark-2); + --color-01-primary-hover: var(--color-01-primary-dark-1); + --color-01-primary-active: var(--color-01-primary-dark-2); /* Secondary colors */ - --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); + --color-01-secondary: var(--color-01-80); + --color-01-secondary-dark-1: var(--color-01-78); + --color-01-secondary-dark-2: var(--color-01-76); + --color-01-secondary-dark-3: var(--color-01-74); + --color-01-secondary-dark-4: var(--color-01-72); + --color-01-secondary-dark-5: var(--color-01-70); + --color-01-secondary-dark-6: var(--color-01-68); + --color-01-secondary-dark-7: var(--color-01-66); + --color-01-secondary-dark-8: var(--color-01-64); + --color-01-secondary-dark-9: var(--color-01-62); + --color-01-secondary-dark-10: var(--color-01-60); + --color-01-secondary-dark-11: var(--color-01-58); + --color-01-secondary-dark-12: var(--color-01-56); + --color-01-secondary-dark-13: var(--color-01-54); + --color-01-secondary-light-1: var(--color-01-92); + --color-01-secondary-light-2: var(--color-01-93); + --color-01-secondary-light-3: var(--color-01-94); + --color-01-secondary-light-4: var(--color-01-95); {% for i in range(1, 10) %} {# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #} {% set alpha = i * 10 %} - --color-1-secondary-alpha-{{ alpha }}: rgba(var(--color-1-rgb-80), 0.{{ alpha }}); + --color-01-secondary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-80), 0.{{ alpha }}); {% endfor %} - --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); + --color-01-secondary-button: var(--color-01-secondary-dark-4); + --color-01-secondary-hover: var(--color-01-secondary-dark-5); + --color-01-secondary-active: var(--color-01-secondary-dark-6); /* Console Colors */ - --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); + --color-01-console-fg: var(--color-01-98); + --color-01-console-fg-subtle: var(--color-01-85); + --color-01-console-bg: var(--color-01-10); + --color-01-console-border: var(--color-01-40); + --color-01-console-hover-bg: var(--color-01-42); + --color-01-console-active-bg: var(--color-01-40); + --color-01-console-menu-bg: var(--color-01-38); + --color-01-console-menu-border:var(--color-01-45); /* Body, Text, and Miscellaneous Colors */ - --color-1-white: var(--color-1-99); - --color-1-grey: var(--color-1-60); - --color-1-grey-light: var(--color-1-65); + --color-01-white: var(--color-01-99); + --color-01-grey: var(--color-01-60); + --color-01-grey-light: var(--color-01-65); - --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-01-body: var(--color-01-white); + --color-01-text-dark: var(--color-01-10); + --color-01-text: var(--color-01-40); + --color-01-text-light: var(--color-01-60); + --color-01-text-light-1: var(--color-01-65); + --color-01-text-light-2: var(--color-01-70); + --color-01-text-light-3: var(--color-01-75); - --color-1-footer: var(--color-1-nav-bg); - --color-1-timeline: var(--color-1-80); + --color-01-footer: var(--color-01-nav-bg); + --color-01-timeline: var(--color-01-80); /* Input Colors */ - --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); + --color-01-input-text: var(--color-01-10); + --color-01-input-background: var(--color-01-white); + --color-01-input-toggle-background: var(--color-01-80); + --color-01-input-border: var(--color-01-secondary); + --color-01-input-border-hover: var(--color-01-secondary-dark-1); /* Effects */ - --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); + --color-01-light: var(--color-01-05); + --color-01-light-mimic-enabled: rgba(var(--color-01-rgb-05), calc(6 / 255 * 222 / 255 / 0.55)); + --color-01-light-border: var(--color-01-05); + --color-01-hover: var(--color-01-05); + --color-01-hover-opaque: var(--color-01-95); + --color-01-active: var(--color-01-05); /* Menu, Card, and Markup Colors */ - --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); + --color-01-menu: var(--color-01-99); + --color-01-card: var(--color-01-99); + --color-01-markup-table-row: var(--color-01-01); + --color-01-markup-code-block: var(--color-01-01); + --color-01-markup-code-inline: var(--color-01-01); + --color-01-button: var(--color-01-99); + --color-01-code-bg: var(--color-01-99); + --color-01-shadow: var(--color-01-05); + --color-01-shadow-opaque: var(--color-01-85); + --color-01-secondary-bg: var(--color-01-95); + --color-01-expand-button: var(--color-01-98); + --color-01-placeholder-text: var(--color-01-text-light-3); + --color-01-editor-line-highlight: var(--color-01-primary-light-6); + --color-01-project-column-bg: var(--color-01-secondary-light-4); + --color-01-caret: var(--color-01-10); /* Reaction and Tooltip Colors */ - --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); + --color-01-reaction-bg: var(--color-01-05); + --color-01-reaction-hover-bg: var(--color-01-primary-light-5); + --color-01-reaction-active-bg: var(--color-01-primary-light-6); + --color-01-tooltip-text: var(--color-01-99); + --color-01-tooltip-bg: var(--color-01-05); /* Navigation Colors */ - --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); + --color-01-nav-bg: var(--color-01-99); + --color-01-nav-hover-bg: var(--color-01-secondary-light-1); + --color-01-nav-text: var(--color-01-40); + --color-01-secondary-nav-bg: var(--color-01-99); /* Label and Accent Colors */ - --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); + --color-01-label-text: var(--color-01-40); + --color-01-label-bg: var(--color-01-50); + --color-01-label-hover-bg: var(--color-01-60); + --color-01-label-active-bg: var(--color-01-70); + --color-01-accent: var(--color-01-primary-light-1); + --color-01-small-accent: var(--color-01-primary-light-6); + --color-01-highlight-fg: var(--color-01-10); + --color-01-highlight-bg: var(--color-01-99); + --color-01-overlay-backdrop: var(--color-01-05); } /* Keycloak */ @@ -355,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-1-{{ "%02d" % color }}); + --pf-v5-global--palette--black-{{ black }}: var(--color-01-{{ "%02d" % color }}); {% endfor %} /* --- White --- */ - --pf-v5-global--palette--white: var(--color-1-99); + --pf-v5-global--palette--white: var(--color-01-99); /* --- Background Colors --- */ - --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); + --pf-v5-global--BackgroundColor--100: var(--color-01-99); + --pf-v5-global--BackgroundColor--150: var(--color-01-95); + --pf-v5-global--BackgroundColor--200: var(--color-01-85); + --pf-v5-global--BackgroundColor--300: var(--color-01-75); + --pf-v5-global--BackgroundColor--400: var(--color-01-65); + --pf-v5-global--BackgroundColor--light-100: var(--color-01-99); + --pf-v5-global--BackgroundColor--light-200: var(--color-01-95); + --pf-v5-global--BackgroundColor--light-300: var(--color-01-85); + --pf-v5-global--BackgroundColor--dark-100: var(--color-01-10); + --pf-v5-global--BackgroundColor--dark-200: var(--color-01-25); + --pf-v5-global--BackgroundColor--dark-300: var(--color-01-20); + --pf-v5-global--BackgroundColor--dark-400: var(--color-01-30); + --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(var(--color-01-rgb-10),0.7); + --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-01-rgb-20),0.8); /* --- Color Variables --- */ - --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); + --pf-v5-global--color-01--100: var(--color-01-10); + --pf-v5-global--color-01--200: var(--color-01-40); + --pf-v5-global--color-01--300: var(--color-01-25); + --pf-v5-global--color-01--400: var(--color-01-50); + --pf-v5-global--color-01--light-100: var(--color-01-99); + --pf-v5-global--color-01--light-200: var(--color-01-85); + --pf-v5-global--color-01--light-300: var(--color-01-75); + --pf-v5-global--color-01--dark-100: var(--color-01-10); + --pf-v5-global--color-01--dark-200: var(--color-01-40); /* --- Active Colors --- */ - --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); + --pf-v5-global--active-color--100: var(--color-01-65); + --pf-v5-global--active-color--200: var(--color-01-95); + --pf-v5-global--active-color--300: var(--color-01-75); + --pf-v5-global--active-color--400: var(--color-01-85); /* --- Disabled Colors --- */ - --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); + --pf-v5-global--disabled-color--100: var(--color-01-40); + --pf-v5-global--disabled-color--200: var(--color-01-75); + --pf-v5-global--disabled-color--300: var(--color-01-85); /* --- Primary Colors --- */ - --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); + --pf-v5-global--primary-color--100: var(--color-01-65); + --pf-v5-global--primary-color--200: var(--color-01-40); + --pf-v5-global--primary-color--light-100: var(--color-01-75); + --pf-v5-global--primary-color--dark-100: var(--color-01-65); /* --- Secondary Colors --- */ - --pf-v5-global--secondary-color--100: var(--color-1-40); + --pf-v5-global--secondary-color--100: var(--color-01-40); /* --- Custom Colors --- */ - --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); + --pf-v5-global--custom-color--100: var(--color-01-65); + --pf-v5-global--custom-color--200: var(--color-01-65); + --pf-v5-global--custom-color--300: var(--color-01-30); /* --- Link Colors --- */ - --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); + --pf-v5-global--link--Color: var(--color-01-65); + --pf-v5-global--link--color-01--hover: var(--color-01-40); + --pf-v5-global--link--color-01--light: var(--color-01-75); + --pf-v5-global--link--color-01--light--hover: var(--color-01-85); + --pf-v5-global--link--color-01--dark: var(--color-01-65); + --pf-v5-global--link--color-01--dark--hover: var(--color-01-40); + --pf-v5-global--link--color-01--visited: var(--color-01-40); /* --- Border Colors --- */ - --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); + --pf-v5-global--BorderColor--100: var(--color-01-75); + --pf-v5-global--BorderColor--200: var(--color-01-50); + --pf-v5-global--BorderColor--300: var(--color-01-85); + --pf-v5-global--BorderColor--400: var(--color-01-65); + --pf-v5-global--BorderColor--dark-100: var(--color-01-75); + --pf-v5-global--BorderColor--light-100: var(--color-01-65); /* --- Icon Colors --- */ - --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-global--icon--color-01--light: var(--color-01-40); + --pf-v5-global--icon--color-01--dark: var(--color-01-10); + --pf-v5-global--icon--color-01--light--light: var(--color-01-85); + --pf-v5-global--icon--color-01--dark--light: var(--color-01-99); + --pf-v5-global--icon--color-01--light--dark: var(--color-01-40); + --pf-v5-global--icon--color-01--dark--dark: var(--color-01-10); } .pf-v5-c-button.pf-m-tertiary { - --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-1-70); + --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-01-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-1-rgb-56), 0.4); + --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-01-rgb-56), 0.4); } /* LAM */ :root { ---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) #} +--lam-background-color-default: var(--color-01-99); {# from #FFFFFF (very bright white) #} +--lam-input-bg-color: var(--color-01-98); {# from #fcfcfc (almost white) #} +--lam-text-color-default: var(--color-01-01); {# from #000000 (pure black) #} +--lam-border-color: var(--color-01-90); {# from #e8e8e8 (light grey) #} +--lam-border-color-primary: var(--color-01-15); {# from #01689e (dark blue) #} +--lam-border-color-secondary: var(--color-01-85); {# from #ffcb1d (bright yellow) #} +--lam-background-color-primary: var(--color-01-50); {# from #3daee9 (mid-tone blue) #} +--lam-background-color-secondary: var(--color-01-90); {# from #ffe233 (bright yellow) #} +--lam-text-color-primary: var(--color-01-99); {# from #ffffff (pure white) #} +--lam-text-color-secondary: var(--color-01-01); {# from #000000 (pure black) #} +--lam-text-color-ok: var(--color-01-10); {# from #237d0c (dark green) #} +--lam-table-background-color-bright: var(--color-01-98); {# from #fbfbfb (very light grey) #} +--lam-table-background-color-dark: var(--color-01-92); {# from #e8f3ff (light blue) #} +--lam-table-background-color-hover: var(--color-01-50); {# from #3daee9 (mid-tone blue) #} +--lam-table-text-color-hover: var(--color-01-99); {# from #ffffff (pure white) #} +--lam-table-border-color: var(--color-01-50); {# from #3daee9 (mid-tone blue) #} } /** Mastodon Overrides **/ div#mastodon, div#admin-wrapper { /* Dropdown */ - --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); + --dropdown-border-color: var(--color-01-35); + --dropdown-background-color: rgba(var(--color-01-rgb-03), 0.9); + --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-01-rgb-01), 0.25), + 0 8px 10px -6px rgba(var(--color-01-rgb-01), 0.25); /* Modal */ - --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); + --modal-background-color: rgba(var(--color-01-rgb-03), 0.7); + --modal-background-variant-color: rgba(var(--color-01-rgb-05), 0.7); + --modal-border-color: var(--color-01-35); /* Background */ - --background-border-color: var(--color-1-82); + --background-border-color: var(--color-01-82); --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); - --background-color: var(--color-1-93); - --background-color-tint: rgba(var(--color-1-rgb-03), 0.9); + --background-color: var(--color-01-93); + --background-color-tint: rgba(var(--color-01-rgb-03), 0.9); /* Surface */ - --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); + --surface-background-color: var(--color-01-90); + --surface-variant-background-color: var(--color-01-89); + --surface-variant-active-background-color: var(--color-01-35); + --on-surface-color: rgba(var(--color-01-rgb-05), 0.5); /* Media & Overlay */ - --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)); + --media-outline-color: rgba(var(--color-01-rgb-99), 0.15); + --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-01-rgb-01), 0.25)); } .swal2-popup { @@ -508,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-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); + --bs-modal-color: var(--color-01-21); /* Text color: dark contrast against the light modal background */ + --bs-modal-bg: var(--color-01-82); /* Background color, as desired */ + --bs-modal-border-color: var(--color-01-82); /* A slightly darker border than the background */ + --bs-modal-header-border-color: var(--color-01-87); /* Same shade as the modal border */ + --bs-modal-footer-bg: var(--color-01-87); /* A slightly offset footer background (a bit darker than the main area) */ + --bs-modal-footer-border-color: var(--color-01-87); } /** Nextcloud Specific**/ :root{ - --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); + --color-01-main-background: var(--color-01-84); + --color-01-main-background-rgb: rgba(var(--color-01-rgb-84),0.83); + --color-01-primary-element: var(--color-01-80); + --color-01-main-text: var(--color-01-40); + --color-01-background-hover: var(--color-01-65); /** Calendar **/ - --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); + --color-01-background-dark: var(--color-01-73); /** Days which aren't in the current month **/ + --color-01-primary-element-light: var(--color-01-65); } /** Peertube **/ body#custom-css { - --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 */ + --mainColor: var(--color-01-60); /* Original tone: hsl(24, 90%, 50%) – vibrant orange */ + --mainColorLighter: var(--color-01-70); /* Original tone: #f5873d – lighter orange */ + --mainColorLightest: var(--color-01-90); /* Original tone: #fce1cf – very light orange/beige */ + --mainColorVeryLight: var(--color-01-95); /* Original tone: #fff5eb – almost white */ + --mainHoverColor: var(--color-01-64); /* Original tone: #f47825 – hover orange */ + --mainBackgroundHoverColor: var(--color-01-92); /* Original tone: #e9ecef – light gray */ + --mainBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */ + --mainForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray/black */ + --greyForegroundColor: var(--color-01-50); /* Original tone: #585858 – medium gray */ + --greyBackgroundColor: var(--color-01-90); /* Original tone: #E5E5E5 – light gray */ + --greySecondaryBackgroundColor: var(--color-01-91); /* Original tone: #EFEFEF – very light gray */ + --menuBackgroundColor: var(--color-01-82); /* Original tone: #000 – black */ + --menuForegroundColor: var(--color-01-99); /* Original tone: #fff – white */ + --submenuBackgroundColor: var(--color-01-95); /* Original tone: #F7F7F7 – off-white/light gray */ + --channelBackgroundColor: var(--color-01-93); /* Original tone: #f6ede8 – warm light beige */ + --inputForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray */ + --inputBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */ + --inputPlaceholderColor: var(--color-01-55); /* Original tone: #797676 – medium gray */ + --inputBorderColor: var(--color-01-80); /* Original tone: #C6C6C6 – light gray */ + --textareaForegroundColor: var(--color-01-10); /* Original tone: #212529 – dark gray */ + --textareaBackgroundColor: var(--color-01-99); /* Original tone: #fff – white */ + --markdownTextareaBackgroundColor: var(--color-01-91); /* Original tone: #EFEFEF – very light gray */ + --actionButtonColor: var(--color-01-50); /* Original tone: #585858 – medium gray */ --supportButtonColor: var(--actionButtonColor); /* Original tone: same as actionButtonColor (#585858) */ - --activatedActionButtonColor: var(--color-1-10); /* Original tone: #212529 – dark gray */ + --activatedActionButtonColor: var(--color-01-10); /* Original tone: #212529 – dark gray */ color: var(--mainForegroundColor); background-color: var(--mainBackgroundColor); } @@ -573,46 +573,46 @@ html[native-dark-active] my-app button, button { :root { /* Base Colors */ - --light: var(--color-1-05); /* Very dark (was #000) */ - --dark: var(--color-1-99); /* Very light (was #fff) */ + --light: var(--color-01-05); /* Very dark (was #000) */ + --dark: var(--color-01-99); /* Very light (was #fff) */ /* Backgrounds */ - --body-bg: var(--color-1-05); /* Main background: very dark */ - --nav-bg: var(--color-1-05); /* Navigation background: very dark */ + --body-bg: var(--color-01-05); /* Main background: very dark */ + --nav-bg: var(--color-01-05); /* Navigation background: very dark */ /* Text Colors */ - --body-color: var(--color-1-70); /* Main text – mid brightness */ - --text-lighter: var(--color-1-60); /* Lighter text for less prominent elements */ + --body-color: var(--color-01-70); /* Main text – mid brightness */ + --text-lighter: var(--color-01-60); /* Lighter text for less prominent elements */ /* Section Backgrounds and Cards */ - --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 */ + --bg-light: var(--color-01-95); /* Lighter background areas */ + --card-bg: var(--color-01-90); /* Card background */ + --light-gray: var(--color-01-75); /* For less dominant elements */ + --light-hover-bg: var(--color-01-85); /* Slightly lighter hover background */ /* Borders and Input Fields */ - --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 */ + --btn-light-border: var(--color-01-10); /* Dark border for buttons */ + --input-border: var(--color-01-10); /* Border color for inputs */ + --border-color: var(--color-01-85); /* General border: slightly lighter than background */ /* Other Areas */ - --comment-bg: var(--color-1-85); /* Background for comments */ - --card-header-accent: var(--color-1-85); /* Accent color in card headers */ + --comment-bg: var(--color-01-85); /* Background for comments */ + --card-header-accent: var(--color-01-85); /* Accent color in card headers */ /* Dropdown Menus */ - --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) */ + --dropdown-item-hover-bg: var(--color-01-05); /* Hover background: very dark */ + --dropdown-item-hover-color: var(--color-01-60); /* Hover text: a bit lighter */ + --dropdown-item-color: var(--color-01-70); /* Regular dropdown item text */ + --dropdown-item-active-color: var(--color-01-99); /* Active state: very light (white) */ } /** Sphinx **/ .bg-background\/95 { - background-color: var(--color-1-96); + background-color: var(--color-01-96); } .border-border { - border-color: var(--color-1-85); + border-color: var(--color-01-85); } {# Hide Toogle Button #} @@ -622,58 +622,58 @@ nav.flex.items-center.space-x-1{ /** Taiga **/ :host, :root { - --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); + --color-01-solid-primary: var(--color-01-83); + --color-01-link-primary: var(--color-01-44); + --color-01-link-tertiary: var(--color-01-45); + --color-01-gray100: var(--color-01-97); + --color-01-gray200: var(--color-01-93); + --color-01-gray300: var(--color-01-90); + --color-01-gray400: var(--color-01-86); + --color-01-black600: var(--color-01-34); + --color-01-black700: var(--color-01-30); + --color-01-black800: var(--color-01-26); + --color-01-black900: var(--color-01-21); + --color-01-black: var(--color-01-01); + --color-01-white: var(--color-01-99); } /* Global Defaults (Colors Only) */ body, html[native-dark-active] { - 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-color: var(--color-01-93); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-93), var(--color-01-91), var(--color-01-95), var(--color-01-93)); background-attachment: fixed; - color: var(--color-1-40); + color: var(--color-01-40); font-family: {{design.font.type}}; } {# All links (applies to all anchor elements regardless of state) #} a { - color: var(--color-1-50); + color: var(--color-01-50); } {# Unvisited links (applies only to links that have not been visited) #} a:link { - color: var(--color-1-55); + color: var(--color-01-55); } {# Visited links (applies only to links that have been visited) #} a:visited { - color: var(--color-1-45); + color: var(--color-01-45); } {# Hover state (applies when the mouse pointer is over the link) #} a:hover { - color: var(--color-1-60); + color: var(--color-01-60); } {# Active state (applies during the time the link is being activated, e.g., on click) #} a:active { - color: var(--color-1-65); + color: var(--color-01-65); } /** Set default buttons transparent **/ html[native-dark-active] button, button{ - background-color: var(--color-1-87); + background-color: var(--color-01-87); } button:hover, .btn:hover { @@ -684,231 +684,231 @@ button:hover, .btn:hover { input:invalid, textarea:invalid, select:invalid { - background-color: var(--color-1-01); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-01), var(--color-1-10)); + background-color: var(--color-01-01); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-01), var(--color-01-10)); /* Use Bootstrap danger color for error messages */ color: var(--bs-danger); - border-color: var(--color-1-20); + border-color: var(--color-01-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-1-80); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-80), var(--color-1-90)); + background-color: var(--color-01-80); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-80), var(--color-01-90)); /* Use Bootstrap success color for confirmation messages */ color: var(--bs-success); - border-color: var(--color-1-70); + border-color: var(--color-01-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-1-50); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-50), var(--color-1-60)); + background-color: var(--color-01-50); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-50), var(--color-01-60)); /* Use Bootstrap warning color to indicate a required field */ color: var(--bs-warning); - border-color: var(--color-1-70); + border-color: var(--color-01-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-1-60); - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-60), var(--color-1-70)); + background-color: var(--color-01-60); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-60), var(--color-01-70)); /* Use Bootstrap info color to indicate optional information */ color: var(--bs-info); - border-color: var(--color-1-70); + border-color: var(--color-01-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-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); + background-color: var(--color-01-80); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-90), var(--color-01-70)); + color: var(--color-01-20); + border-color: var(--color-01-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-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); + background-color: var(--color-01-70); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-80)); + color: var(--color-01-40); + border-color: var(--color-01-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-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); + background-color: var(--color-01-70); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-85)); + color: var(--color-01-40); + border-color: var(--color-01-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-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); + background-color: var(--color-01-10); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-10), var(--color-01-30)); + color: var(--color-01-10); + border-color: var(--color-01-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-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); + background-color: var(--color-01-82); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-82), var(--color-01-90)); + color: var(--color-01-40); + border-color: var(--color-01-70); } /* {# Focus state: when the element is focused by the user. #} */ input:focus, textarea:focus, select:focus { - 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); + background-color: var(--color-01-75); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-85)); + color: var(--color-01-40); + border-color: var(--color-01-50); } /* {# Hover state: when the mouse pointer is over the element. #} */ input:hover, textarea:hover, select:hover { - 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); + background-color: var(--color-01-78); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-78), var(--color-01-88)); + color: var(--color-01-40); + border-color: var(--color-01-65); } /* {# Active state: when the element is being activated (e.g., clicked). #} */ input:active, textarea:active, select:active { - 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); + background-color: var(--color-01-68); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-68), var(--color-01-78)); + color: var(--color-01-40); + border-color: var(--color-01-60); } /* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */ input:checked { - 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); + background-color: var(--color-01-90); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-90), var(--color-01-99)); + color: var(--color-01-40); + border-color: var(--color-01-70); } option { - background-color: var(--color-1-82); - color: var(--color-1-07); + background-color: var(--color-01-82); + color: var(--color-01-07); } /* Tables (Borders and Header Colors) */ th, td { - border-color: var(--color-1-70); + border-color: var(--color-01-70); } thead { - background-color: var(--color-1-80); + background-color: var(--color-01-80); /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)); + color: var(--color-01-40); } /* Headings (Text Color) */ h1, h2, h3, h4, h5, h6, p{ - color: var(--color-1-10); + color: var(--color-01-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-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); + background-color: var(--color-01-87); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-91), var(--color-01-95), var(--color-01-95)); + color: var(--color-01-50); + border-color: var(--color-01-80); cursor: pointer; } /* Navigation (Background and Text Colors) */ .navbar, .navbar-light, .navbar-dark, .navbar.bg-light { - background-color: var(--color-1-90); + background-color: var(--color-01-90); /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95)); + color: var(--color-01-50); + border-color: var(--color-01-85); } .navbar a { - color: var(--color-1-40); + color: var(--color-01-40); } .navbar a.dropdown-item { - color: var(--color-1-43); + color: var(--color-01-43); } /* Cards / Containers (Background, Border, and Shadow) Cards now use a slightly lighter background and a bold, clear shadow */ .card { - background-color: var(--color-1-90); + background-color: var(--color-01-90); /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95)); + border-color: var(--color-01-85); + color: var(--color-01-12); } .card-body { - color: var(--color-1-40); + color: var(--color-01-40); } /* Dropdown Menu and Submenu (Background, Text, and Shadow) */ .navbar .dropdown-menu, .nav-item .dropdown-menu { - background-color: var(--color-1-80); + background-color: var(--color-01-80); /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)); + color: var(--color-01-40); } .navbar-nav { - --bs-nav-link-hover-color: var(--color-1-17); + --bs-nav-link-hover-color: var(--color-01-17); } .dropdown-item { - color: var(--color-1-40); - background-color: var(--color-1-80); + color: var(--color-01-40); + background-color: var(--color-01-80); /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */ - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-75), var(--color-1-80), var(--color-1-81), var(--color-1-85)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)); } .dropdown-item:hover, .dropdown-item:focus { - background-color: var(--color-1-65); + background-color: var(--color-01-65); /* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-60), var(--color-01-65), var(--color-01-66), var(--color-01-70)); + color: var(--color-01-40); } /* Keycloak */ div#app header{ - background-color: var(--color-1-60); + background-color: var(--color-01-60); /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65)); + color: var(--color-01-98); } /** LAM Specific **/ @@ -918,7 +918,7 @@ div#app header{ } ul.lam-tab-navigation { - background: rgba(var(--color-1-rgb-90), 0.1); + background: rgba(var(--color-01-rgb-90), 0.1); border-color: transparent; } @@ -928,38 +928,38 @@ ul.lam-tab-navigation { } .titleBar { - background-image: linear-gradient(var(--color-1-83), var(--color-1-92)); + background-image: linear-gradient(var(--color-01-83), var(--color-01-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-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); + background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-78), var(--color-01-83), var(--color-01-84), var(--color-01-88)); + border-top-color: var(--color-01-78); + border-left-color: var(--color-01-87); + border-right-color: var(--color-01-87); } div.statusInfo { - background-color: var(--color-1-81); + background-color: var(--color-01-81); /* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-76), var(--color-01-81), var(--color-01-82), var(--color-01-86)); + color: var(--color-01-23); } /** Mailu **/ [class*=sidebar-dark-], .bg-mailu-logo { - background-color: var(--color-1-90); + background-color: var(--color-01-90); /* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */ - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-85), var(--color-1-90), var(--color-1-91), var(--color-1-95)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-85), var(--color-01-90), var(--color-01-91), var(--color-01-95)); } div.statusError { - background-color: var(--color-1-60); + background-color: var(--color-01-60); /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */ - background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-1-55), var(--color-1-60), var(--color-1-61), var(--color-1-65)); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65)); } div.wrapper footer.main-footer, div.wrapper div.content-wrapper{ - 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); + background-color: var(--color-01-85); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-89), var(--color-01-85), var(--color-01-80), var(--color-01-79)); + color: var(--color-01-39); } html.dark-mode #layout-menu .special-buttons a:not(:focus) { @@ -967,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-1-rgb-82), 0.5); + background-color: rgba(var(--color-01-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-1-30); - background-color: rgba(var(--color-1-rgb-82), 0.5); + color: var(--color-01-30); + background-color: rgba(var(--color-01-rgb-82), 0.5); } html.dark-mode .message-htmlpart { - background-color: rgba(var(--color-1-rgb-99), 0.08); - color: var(--color-1-15); + background-color: rgba(var(--color-01-rgb-99), 0.08); + color: var(--color-01-15); } /** Nextcloud specific **/ html.ng-csp header#header{ - background-color: var(--color-1-80); + background-color: var(--color-01-80); /* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85)); + color: var(--color-01-17); } .files-list__row-name button, button.button-vue{ @@ -997,45 +997,45 @@ html.ng-csp div#postsetupchecks ul.info{ } div#mastodon .column-link{ - color: var(--color-1-55); + color: var(--color-01-55); } div#mastodon .column-back-button { - color: var(--color-1-58); + color: var(--color-01-58); } div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable { - background-color: var(--color-1-89); + background-color: var(--color-01-89); /* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */ - 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); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-84), var(--color-01-89), var(--color-01-90), var(--color-01-94)); + color: var(--color-01-19); } div#mastodon .status-card__title, div#mastodon .display-name strong{ - color: var(--color-1-33); + color: var(--color-01-33); } div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{ - color: var(--color-1-29); + color: var(--color-01-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-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)); + background-color: var(--color-01-71); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-66), var(--color-01-71), var(--color-01-72), var(--color-01-76)); } .compose-form__actions .icon-button { - color: var(--color-1-28); + color: var(--color-01-28); } /** OpenProject **/ header.op-app-header{ - 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); + background-color: var(--color-01-40); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-35), var(--color-01-40), var(--color-01-41), var(--color-01-45)); + color: var(--color-01-40); } div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{ @@ -1045,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-1-92); - color: var(--color-1-10); + background-color: var(--color-01-92); + color: var(--color-01-10); } .subtitle { @@ -1054,7 +1054,7 @@ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-s } .has-background-light { - background-color: var(--color-1-96) !important; + background-color: var(--color-01-96) !important; } /* Pixelfed */ @@ -1064,68 +1064,68 @@ div.page-wrapper{ } .card-header-title { - color: var(--color-1-37); + color: var(--color-01-37); } /* PHP MyAdmin */ #pma_navigation { - background: linear-gradient(to right, var(--color-1-95), var(--color-1-85)); - color: var(--color-1-05); + background: linear-gradient(to right, var(--color-01-95), var(--color-01-85)); + color: var(--color-01-05); } #pma_navigation_tree a { - color: var(--color-1-05); + color: var(--color-01-05); } #pma_navigation_tree li.activePointer, #pma_navigation_tree li.selected { - color: var(--color-1-05); - background-color: var(--color-1-70); + color: var(--color-01-05); + background-color: var(--color-01-70); } .breadcrumb-navbar { - background-color: var(--color-1-86); + background-color: var(--color-01-86); } .navbar-nav .nav-item { - 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); + background: linear-gradient(var(--color-01-99), var(--color-01-85)); + border-right-color: var(--color-01-99); + border-left-color: var(--color-01-80); + border-bottom-color: var(--color-01-80); } .result_query div.sqlOuter { - background: var(--color-1-50); + background: var(--color-01-50); } .table { - --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 */ + --bs-table-bg: var(--color-01-99); /* #fff → white */ + --bs-table-border-color: var(--color-01-99); /* #fff → white */ + --bs-table-striped-bg: var(--color-01-90); /* #dfdfdf → light gray */ + --bs-table-hover-color: var(--color-01-01); /* #000 → black */ } .table thead th { - background-image: linear-gradient(var(--color-1-90), var(--color-1-80)); - border-color: var(--color-1-99); + background-image: linear-gradient(var(--color-01-90), var(--color-01-80)); + border-color: var(--color-01-99); } .table th, .table td { - text-shadow: 0 1px 0 var(--color-1-60); + text-shadow: 0 1px 0 var(--color-01-60); } div.tools, .tblFooters { - color: var(--color-1-01); - background: var(--color-1-62); + color: var(--color-01-01); + background: var(--color-01-62); } .navigation { - background: linear-gradient(var(--color-1-87), var(--color-1-69)); + background: linear-gradient(var(--color-01-87), var(--color-01-69)); } .pma-fieldset { - border-color: var(--color-1-17); - background: var(--color-1-80); + border-color: var(--color-01-17); + background: var(--color-01-80); } /** Taiga specific configuration **/ @@ -1135,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-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); + background-color: var(--color-01-92); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-87), var(--color-01-92), var(--color-01-93), var(--color-01-97)); + color: var(--color-01-40); } section.kanban h1, section.kanban h2{ - color: var(--color-1-40); + color: var(--color-01-40); } .home-project { - 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); + background: var(--color-01-88); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-83), var(--color-01-88), var(--color-01-89), var(--color-01-93)); + border-color: var(--color-01-60); + color: var(--color-01-12); } .home-wrapper .title-bar { - 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)); + background: var(--color-01-75); + background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-70), var(--color-01-75), var(--color-01-76), var(--color-01-80)); } .kanban.swimlane .kanban-header { @@ -1161,21 +1161,21 @@ section.kanban h1, section.kanban h2{ } .kanban-table-header .task-colum-name { - background-color: var(--color-1-70); - color: var(--color-1-10); + background-color: var(--color-01-70); + color: var(--color-01-10); } input.ng-empty::placeholder,.ng-empty::placeholder { - color: rgba(var(--color-1-rgb-03),0.6); + color: rgba(var(--color-01-rgb-03),0.6); } .lightbox { - background: rgba(var(--color-1-rgb-97), .93); - color: var(--color-1-03); + background: rgba(var(--color-01-rgb-97), .93); + color: var(--color-01-03); } .kanban-filter tg-filter { - border-color: var(--color-1-70); + border-color: var(--color-01-70); } .discover-header { @@ -1184,11 +1184,11 @@ input.ng-empty::placeholder,.ng-empty::placeholder { /* Portfolio */ .card-img-top i { - filter: drop-shadow(4px 4px 4px rgba(var(--color-1-rgb-23), 0.6)); + filter: drop-shadow(4px 4px 4px rgba(var(--color-01-rgb-23), 0.6)); } .kanban-table-body .kanban-uses-box { - background-color: var(--color-1-81); + background-color: var(--color-01-81); } .kanban-swimlane-title { diff --git a/roles/update-docker/templates/update-docker.py.j2 b/roles/update-docker/templates/update-docker.py.j2 index 6df0f8d8..e190d828 100644 --- a/roles/update-docker/templates/update-docker.py.j2 +++ b/roles/update-docker/templates/update-docker.py.j2 @@ -115,6 +115,7 @@ def update_docker(directory): need_to_build = True if need_to_build: + # @todo Here a pull for openproject should be placed. run_command("docker-compose build") start_docker(directory) else: