/***
Global Theming Styles – Color and Shadow Variables
HINT:
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.
*/
{% if design.font.import_url %}
@import url('{{design.font.import_url}}');
{% endif %}
:root {
/** Derived Colors from the Base Color **/
{% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
{% endfor %}
}
@media (prefers-color-scheme: dark) {
:root {
/** Dark Mode Derived Colors from the Base Color **/
{% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
{% endfor %}
}
}
:root, ::after, ::before, ::backdrop {
/* For Dark Mode Plugin
* @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
*/
--native-dark-accent-color: var(--color-60); /* was #a9a9a9 */
--native-dark-bg-color: var(--color-10); /* was #292929 */
--native-dark-bg-image-color: rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
--native-dark-border-color: var(--color-40); /* was #555555 */
--native-dark-box-shadow: 0 0 0 1px rgb(var(--color-rgb-99), / 10%);
--native-dark-cite-color: var(--color-70); /* was #92de92 – you might adjust if a green tone is needed */
--native-dark-fill-color: var(--color-50); /* was #7d7d7d */
--native-dark-font-color: var(--color-95); /* was #dcdcdc */
--native-dark-link-color: var(--color-80); /* was #8db2e5 */
--native-dark-visited-link-color: var(--color-85); /* was #c76ed7 */
}
/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
--bs-black: var(--color-01); /* Original tone: Black (#000) */
--bs-white: var(--color-99); /* Original tone: White (#fff) */
--bs-gray: var(--color-50); /* Original tone: Gray (#6c757d) */
--bs-gray-dark: var(--color-20); /* Original tone: Dark Gray (#343a40) */
{% 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 }});
{% 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-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-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}
/* Discourse */
:root section#main{
/* Base Colors */
--primary: var(--color-20); /* originally #203243 */
--secondary: var(--color-95); /* originally #eef4f7 */
--tertiary: var(--color-40); /* originally #416376 */
--quaternary: var(--color-50); /* originally #5e99b9 */
/* Header & Highlight */
--header_background: var(--color-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 */
/* Normally refers to secondary. Somehow this reference does not work.*/
--d-sidebar-background: var(--color-92);
--d-sidebar-footer-fade: var(--color-92);
/* RGB values */
--always-black-rgb: var(--color-rgb-01);
--primary-rgb: var(--color-rgb-20);
--primary-low-rgb: var(--color-rgb-95);
--primary-very-low-rgb: var(--color-rgb-99);
--secondary-rgb: var(--color-rgb-95);
--header_background-rgb: var(--color-rgb-70);
--tertiary-rgb: var(--color-rgb-40);
--highlight-rgb: var(--color-rgb-70);
--success-rgb: var(--color-rgb-50);
/* Primary Scale */
--primary-very-low: var(--color-99); /* originally #f7f9fb */
--primary-low: var(--color-95); /* originally #e3ebf2 */
--primary-low-mid: var(--color-75); /* originally #acc2d7 */
--primary-medium: var(--color-60); /* originally #7499bd */
--primary-high: var(--color-40); /* originally #487096 */
--primary-very-high: var(--color-20); /* originally #34516d */
--primary-50: var(--color-99); /* originally #f7f9fb */
{% 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 }});
{% 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) */
/* Secondary Scale */
--secondary-low: var(--color-20); /* originally #2f5163 */
--secondary-medium: var(--color-40); /* originally #4e88a5 */
--secondary-high: var(--color-60); /* originally #7ba9c1 */
--secondary-very-high: var(--color-90); /* originally #d7e5ec */
/* Tertiary Scale */
--tertiary-very-low: var(--color-99); /* originally #eaf0f3 */
--tertiary-low: var(--color-95); /* originally #dfe8ee */
--tertiary-medium: var(--color-60); /* originally #96b4c5 */
--tertiary-high: var(--color-40); /* originally #5886a0 */
--tertiary-hover: var(--color-20); /* originally #314a59 */
--tertiary-50: var(--color-99); /* originally #eaf0f3 */
{% 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 }});
{% endfor %}
/* Quaternary */
--quaternary-low: var(--color-80); /* originally #cfe0ea */
/* Highlight */
--highlight-bg: var(--color-90); /* originally #dbebf4 */
--highlight-low: var(--color-90); /* originally #dbebf4 */
--highlight-medium: var(--color-80); /* originally #c3deed */
--highlight-high: var(--color-30); /* originally #286688 */
/* Combination Variables */
--blend-primary-secondary-5: rgb(var(--color-rgb-95)); /* originally rgb(232, 238, 241) */
--primary-med-or-secondary-med: var(--color-60); /* originally #7499bd */
--primary-med-or-secondary-high: var(--color-60); /* originally #7499bd */
--primary-high-or-secondary-low: var(--color-40); /* originally #487096 */
--primary-low-mid-or-secondary-high: var(--color-75); /* originally #acc2d7 */
--primary-low-mid-or-secondary-low: var(--color-75); /* originally #acc2d7 */
--primary-or-primary-low-mid: var(--color-20); /* originally #203243 */
--highlight-low-or-medium: var(--color-90); /* originally #dbebf4 */
--tertiary-or-tertiary-low: var(--color-40); /* originally #416376 */
--tertiary-low-or-tertiary-high: var(--color-95); /* originally #dfe8ee */
--tertiary-med-or-tertiary: var(--color-60); /* originally #96b4c5 */
--secondary-or-primary: var(--color-95); /* originally #eef4f7 */
--tertiary-or-white: var(--color-40); /* originally #416376 */
/* Float Kit */
--float-kit-arrow-stroke-color: var(--primary-low); /* already mapped above */
--float-kit-arrow-fill-color: var(--secondary); /* already mapped above */
}
/* gitea */
:root {
/* Base and derived colors are now referenced from the computed scale */
--color-primary: var(--color-50);
--color-primary-contrast: var(--color-99);
--color-primary-dark-1: var(--color-48);
--color-primary-dark-2: var(--color-47);
--color-primary-dark-3: var(--color-46);
--color-primary-dark-4: var(--color-45);
--color-primary-dark-5: var(--color-44);
--color-primary-dark-6: var(--color-43);
--color-primary-dark-7: var(--color-42);
--color-primary-light-1: var(--color-52);
--color-primary-light-2: var(--color-53);
--color-primary-light-3: var(--color-54);
--color-primary-light-4: var(--color-55);
--color-primary-light-5: var(--color-57);
--color-primary-light-6: var(--color-59);
--color-primary-light-7: var(--color-61);
/* Alpha variants reference the base RGB variable */
{% 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 }});
{% endfor %}
--color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2);
/* Secondary colors */
--color-secondary: var(--color-80);
--color-secondary-dark-1: var(--color-78);
--color-secondary-dark-2: var(--color-76);
--color-secondary-dark-3: var(--color-74);
--color-secondary-dark-4: var(--color-72);
--color-secondary-dark-5: var(--color-70);
--color-secondary-dark-6: var(--color-68);
--color-secondary-dark-7: var(--color-66);
--color-secondary-dark-8: var(--color-64);
--color-secondary-dark-9: var(--color-62);
--color-secondary-dark-10: var(--color-60);
--color-secondary-dark-11: var(--color-58);
--color-secondary-dark-12: var(--color-56);
--color-secondary-dark-13: var(--color-54);
--color-secondary-light-1: var(--color-92);
--color-secondary-light-2: var(--color-93);
--color-secondary-light-3: var(--color-94);
--color-secondary-light-4: var(--color-95);
{% 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 }});
{% 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);
/* Console Colors */
--color-console-fg: var(--color-98);
--color-console-fg-subtle: var(--color-85);
--color-console-bg: var(--color-10);
--color-console-border: var(--color-40);
--color-console-hover-bg: var(--color-42);
--color-console-active-bg: var(--color-40);
--color-console-menu-bg: var(--color-38);
--color-console-menu-border:var(--color-45);
/* Body, Text, and Miscellaneous Colors */
--color-white: var(--color-99);
--color-grey: var(--color-60);
--color-grey-light: var(--color-65);
--color-body: var(--color-white);
--color-text-dark: var(--color-10);
--color-text: var(--color-40);
--color-text-light: var(--color-60);
--color-text-light-1: var(--color-65);
--color-text-light-2: var(--color-70);
--color-text-light-3: var(--color-75);
--color-footer: var(--color-nav-bg);
--color-timeline: var(--color-80);
/* Input Colors */
--color-input-text: var(--color-10);
--color-input-background: var(--color-white);
--color-input-toggle-background: var(--color-80);
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
/* Effects */
--color-light: var(--color-05);
--color-light-mimic-enabled: rgba(var(--color-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
--color-light-border: var(--color-05);
--color-hover: var(--color-05);
--color-hover-opaque: var(--color-95);
--color-active: var(--color-05);
/* Menu, Card, and Markup Colors */
--color-menu: var(--color-99);
--color-card: var(--color-99);
--color-markup-table-row: var(--color-01);
--color-markup-code-block: var(--color-01);
--color-markup-code-inline: var(--color-01);
--color-button: var(--color-99);
--color-code-bg: var(--color-99);
--color-shadow: var(--color-05);
--color-shadow-opaque: var(--color-85);
--color-secondary-bg: var(--color-95);
--color-expand-button: var(--color-98);
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-column-bg: var(--color-secondary-light-4);
--color-caret: var(--color-10);
/* Reaction and Tooltip Colors */
--color-reaction-bg: var(--color-05);
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: var(--color-99);
--color-tooltip-bg: var(--color-05);
/* Navigation Colors */
--color-nav-bg: var(--color-99);
--color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-40);
--color-secondary-nav-bg: var(--color-99);
/* Label and Accent Colors */
--color-label-text: var(--color-40);
--color-label-bg: var(--color-50);
--color-label-hover-bg: var(--color-60);
--color-label-active-bg: var(--color-70);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
--color-highlight-fg: var(--color-10);
--color-highlight-bg: var(--color-99);
--color-overlay-backdrop: var(--color-05);
}
/* Keycloak */
:root{
/* --- Palette Black (Graustufen) --- */
{% for i in range(1, 21) %}
{# @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 }});
{% endfor %}
/* --- White --- */
--pf-v5-global--palette--white: var(--color-99);
/* --- Background Colors --- */
--pf-v5-global--BackgroundColor--100: var(--color-99);
--pf-v5-global--BackgroundColor--150: var(--color-95);
--pf-v5-global--BackgroundColor--200: var(--color-85);
--pf-v5-global--BackgroundColor--300: var(--color-75);
--pf-v5-global--BackgroundColor--400: var(--color-65);
--pf-v5-global--BackgroundColor--light-100: var(--color-99);
--pf-v5-global--BackgroundColor--light-200: var(--color-95);
--pf-v5-global--BackgroundColor--light-300: var(--color-85);
--pf-v5-global--BackgroundColor--dark-100: var(--color-10);
--pf-v5-global--BackgroundColor--dark-200: var(--color-25);
--pf-v5-global--BackgroundColor--dark-300: var(--color-20);
--pf-v5-global--BackgroundColor--dark-400: var(--color-30);
--pf-v5-global--BackgroundColor--dark-transparent-100: rgba(var(--color-rgb-10),0.7);
--pf-v5-global--BackgroundColor--dark-transparent-200: rgba(var(--color-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);
/* --- Active Colors --- */
--pf-v5-global--active-color--100: var(--color-65);
--pf-v5-global--active-color--200: var(--color-95);
--pf-v5-global--active-color--300: var(--color-75);
--pf-v5-global--active-color--400: var(--color-85);
/* --- Disabled Colors --- */
--pf-v5-global--disabled-color--100: var(--color-40);
--pf-v5-global--disabled-color--200: var(--color-75);
--pf-v5-global--disabled-color--300: var(--color-85);
/* --- Primary Colors --- */
--pf-v5-global--primary-color--100: var(--color-65);
--pf-v5-global--primary-color--200: var(--color-40);
--pf-v5-global--primary-color--light-100: var(--color-75);
--pf-v5-global--primary-color--dark-100: var(--color-65);
/* --- Secondary Colors --- */
--pf-v5-global--secondary-color--100: var(--color-40);
/* --- Custom Colors --- */
--pf-v5-global--custom-color--100: var(--color-65);
--pf-v5-global--custom-color--200: var(--color-65);
--pf-v5-global--custom-color--300: var(--color-30);
/* --- Link Colors --- */
--pf-v5-global--link--Color: var(--color-65);
--pf-v5-global--link--Color--hover: var(--color-40);
--pf-v5-global--link--Color--light: var(--color-75);
--pf-v5-global--link--Color--light--hover: var(--color-85);
--pf-v5-global--link--Color--dark: var(--color-65);
--pf-v5-global--link--Color--dark--hover: var(--color-40);
--pf-v5-global--link--Color--visited: var(--color-40);
/* --- Border Colors --- */
--pf-v5-global--BorderColor--100: var(--color-75);
--pf-v5-global--BorderColor--200: var(--color-50);
--pf-v5-global--BorderColor--300: var(--color-85);
--pf-v5-global--BorderColor--400: var(--color-65);
--pf-v5-global--BorderColor--dark-100: var(--color-75);
--pf-v5-global--BorderColor--light-100: var(--color-65);
/* --- Icon Colors --- */
--pf-v5-global--icon--Color--light: var(--color-40);
--pf-v5-global--icon--Color--dark: var(--color-10);
--pf-v5-global--icon--Color--light--light: var(--color-85);
--pf-v5-global--icon--Color--dark--light: var(--color-99);
--pf-v5-global--icon--Color--light--dark: var(--color-40);
--pf-v5-global--icon--Color--dark--dark: var(--color-10);
}
.pf-v5-c-button.pf-m-tertiary {
--pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-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);
}
/* LAM */
:root {
--lam-background-color-default: var(--color-99); {# from #FFFFFF (very bright white) #}
--lam-input-bg-color: var(--color-98); {# from #fcfcfc (almost white) #}
--lam-text-color-default: var(--color-01); {# from #000000 (pure black) #}
--lam-border-color: var(--color-90); {# from #e8e8e8 (light grey) #}
--lam-border-color-primary: var(--color-15); {# from #01689e (dark blue) #}
--lam-border-color-secondary: var(--color-85); {# from #ffcb1d (bright yellow) #}
--lam-background-color-primary: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-background-color-secondary: var(--color-90); {# from #ffe233 (bright yellow) #}
--lam-text-color-primary: var(--color-99); {# from #ffffff (pure white) #}
--lam-text-color-secondary: var(--color-01); {# from #000000 (pure black) #}
--lam-text-color-ok: var(--color-10); {# from #237d0c (dark green) #}
--lam-table-background-color-bright: var(--color-98); {# from #fbfbfb (very light grey) #}
--lam-table-background-color-dark: var(--color-92); {# from #e8f3ff (light blue) #}
--lam-table-background-color-hover: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-table-text-color-hover: var(--color-99); {# from #ffffff (pure white) #}
--lam-table-border-color: var(--color-50); {# from #3daee9 (mid-tone blue) #}
}
/** Mastodon Overrides **/
div#mastodon, div#admin-wrapper {
/* Dropdown */
--dropdown-border-color: var(--color-35);
--dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
--dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);
/* Modal */
--modal-background-color: rgba(var(--color-rgb-03), 0.7);
--modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
--modal-border-color: var(--color-35);
/* Background */
--background-border-color: var(--color-82);
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: var(--color-93);
--background-color-tint: rgba(var(--color-rgb-03), 0.9);
/* Surface */
--surface-background-color: var(--color-90);
--surface-variant-background-color: var(--color-89);
--surface-variant-active-background-color: var(--color-35);
--on-surface-color: rgba(var(--color-rgb-05), 0.5);
/* Media & Overlay */
--media-outline-color: rgba(var(--color-rgb-99), 0.15);
--overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
}
.swal2-popup {
color: #000;
}
/* Modal Overwrittes */
div.modal div.modal-content {
/* Colors – adjusted to the existing scheme */
--bs-modal-color: var(--color-21); /* Text color: dark contrast against the light modal background */
--bs-modal-bg: var(--color-82); /* Background color, as desired */
--bs-modal-border-color: var(--color-82); /* A slightly darker border than the background */
--bs-modal-header-border-color: var(--color-87); /* Same shade as the modal border */
--bs-modal-footer-bg: var(--color-87); /* A slightly offset footer background (a bit darker than the main area) */
--bs-modal-footer-border-color: var(--color-87);
}
/** Nextcloud Specific**/
:root{
--color-main-background: var(--color-84);
--color-main-background-rgb: rgba(var(--color-rgb-84),0.83);
--color-primary-element: var(--color-80);
--color-main-text: var(--color-40);
--color-background-hover: var(--color-65);
/** Calendar **/
--color-background-dark: var(--color-73); /** Days which aren't in the current month **/
--color-primary-element-light: var(--color-65);
}
/** Peertube **/
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 */
--supportButtonColor: var(--actionButtonColor); /* Original tone: same as actionButtonColor (#585858) */
--activatedActionButtonColor: var(--color-10); /* Original tone: #212529 – dark gray */
color: var(--mainForegroundColor);
background-color: var(--mainBackgroundColor);
}
div.searchbox input.autocomplete-input{
background-position: 12px;
background-repeat: no-repeat;
}
html[native-dark-active] my-app button, button {
background-color: transparent;
}
/** Pixelfed **/
:root {
/* Base Colors */
--light: var(--color-05); /* Very dark (was #000) */
--dark: var(--color-99); /* Very light (was #fff) */
/* Backgrounds */
--body-bg: var(--color-05); /* Main background: very dark */
--nav-bg: var(--color-05); /* Navigation background: very dark */
/* Text Colors */
--body-color: var(--color-70); /* Main text – mid brightness */
--text-lighter: var(--color-60); /* Lighter text for less prominent elements */
/* Section Backgrounds and Cards */
--bg-light: var(--color-95); /* Lighter background areas */
--card-bg: var(--color-90); /* Card background */
--light-gray: var(--color-75); /* For less dominant elements */
--light-hover-bg: var(--color-85); /* Slightly lighter hover background */
/* Borders and Input Fields */
--btn-light-border: var(--color-10); /* Dark border for buttons */
--input-border: var(--color-10); /* Border color for inputs */
--border-color: var(--color-85); /* General border: slightly lighter than background */
/* Other Areas */
--comment-bg: var(--color-85); /* Background for comments */
--card-header-accent: var(--color-85); /* Accent color in card headers */
/* Dropdown Menus */
--dropdown-item-hover-bg: var(--color-05); /* Hover background: very dark */
--dropdown-item-hover-color: var(--color-60); /* Hover text: a bit lighter */
--dropdown-item-color: var(--color-70); /* Regular dropdown item text */
--dropdown-item-active-color: var(--color-99); /* Active state: very light (white) */
}
/** Sphinx **/
.bg-background\/95 {
background-color: var(--color-96);
}
.border-border {
border-color: var(--color-85);
}
{# Hide Toogle Button #}
nav.flex.items-center.space-x-1{
display:none;
}
/** 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);
}
/* 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-attachment: fixed;
color: var(--color-40);
font-family: {{design.font.type}};
}
{# All links (applies to all anchor elements regardless of state) #}
a {
color: var(--color-50);
}
{# Unvisited links (applies only to links that have not been visited) #}
a:link {
color: var(--color-55);
}
{# Visited links (applies only to links that have been visited) #}
a:visited {
color: var(--color-45);
}
{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
color: var(--color-60);
}
{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
color: var(--color-65);
}
/** Set default buttons transparent **/
html[native-dark-active] button, button{
background-color: var(--color-87);
}
button:hover, .btn:hover {
filter: brightness(0.9);
}
/* {# Invalid state: when the input value fails validation criteria. Use danger color for error indication. #} */
input:invalid,
textarea:invalid,
select:invalid {
background-color: var(--color-01);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01), var(--color-10));
/* Use Bootstrap danger color for error messages */
color: var(--bs-danger);
border-color: var(--color-20);
}
/* {# Valid state: when the input value meets all validation criteria. Use success color for confirmation. #} */
input:valid,
textarea:valid,
select:valid {
background-color: var(--color-80);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-80), var(--color-90));
/* Use Bootstrap success color for confirmation messages */
color: var(--bs-success);
border-color: var(--color-70);
}
/* {# Required field: applied to elements that must be filled out by the user. Use warning color for emphasis. #} */
input:required,
textarea:required,
select:required {
background-color: var(--color-50);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-50), var(--color-60));
/* Use Bootstrap warning color to indicate a required field */
color: var(--bs-warning);
border-color: var(--color-70);
}
/* {# Optional field: applied to elements that are not mandatory. Use info color to denote additional information. #} */
input:optional,
textarea:optional,
select:optional {
background-color: var(--color-60);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-70));
/* Use Bootstrap info color to indicate optional information */
color: var(--bs-info);
border-color: var(--color-70);
}
/* {# Read-only state: when an element is not editable by the user. #} */
input:read-only,
textarea:read-only,
select:read-only {
background-color: var(--color-80);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-70));
color: var(--color-20);
border-color: var(--color-50);
}
/* {# Read-write state: when an element is editable by the user. #} */
input:read-write,
textarea:read-write,
select:read-write {
background-color: var(--color-70);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-80));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# In-range: for inputs with a defined range, when the value is within the allowed limits. #} */
input:in-range,
textarea:in-range,
select:in-range {
background-color: var(--color-70);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-85));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# Out-of-range: for inputs with a defined range, when the value falls outside the allowed limits. #} */
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
background-color: var(--color-10);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-10), var(--color-30));
color: var(--color-10);
border-color: var(--color-50);
}
/* {# Placeholder-shown: when the input field is displaying its placeholder text. #} */
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
background-color: var(--color-82);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-82), var(--color-90));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# Focus state: when the element is focused by the user. #} */
input:focus,
textarea:focus,
select:focus {
background-color: var(--color-75);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-85));
color: var(--color-40);
border-color: var(--color-50);
}
/* {# Hover state: when the mouse pointer is over the element. #} */
input:hover,
textarea:hover,
select:hover {
background-color: var(--color-78);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-78), var(--color-88));
color: var(--color-40);
border-color: var(--color-65);
}
/* {# Active state: when the element is being activated (e.g., clicked). #} */
input:active,
textarea:active,
select:active {
background-color: var(--color-68);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-68), var(--color-78));
color: var(--color-40);
border-color: var(--color-60);
}
/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
background-color: var(--color-90);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-99));
color: var(--color-40);
border-color: var(--color-70);
}
option {
background-color: var(--color-82);
color: var(--color-99);
}
/* Tables (Borders and Header Colors) */
th, td {
border-color: var(--color-70);
}
thead {
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
color: var(--color-10);
}
/* 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);
cursor: pointer;
}
/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark, .navbar.bg-light {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
color: var(--color-50);
border-color: var(--color-85);
}
.navbar a {
color: var(--color-40);
}
.navbar a.dropdown-item {
color: var(--color-43);
}
/* Cards / Containers (Background, Border, and Shadow)
Cards now use a slightly lighter background and a bold, clear shadow */
.card {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
border-color: var(--color-85);
color: var(--color-12);
}
.card-body {
color: var(--color-40);
}
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
}
.navbar-nav {
--bs-nav-link-hover-color: var(--color-17);
}
.dropdown-item {
color: var(--color-40);
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-65);
/* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-65), var(--color-66), var(--color-70));
color: var(--color-40);
}
/* Keycloak */
div#app header{
background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
color: var(--color-98);
}
/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
background-color: transparent !important;
border-color: transparent;
}
ul.lam-tab-navigation {
background: rgba(var(--color-rgb-90), 0.1);
border-color: transparent;
}
/* Not changable due to inline css */
.roundedShadowBox {
color: #000000;
}
.titleBar {
background-image: linear-gradient(var(--color-83), var(--color-92));
/* New Gradient based on original background (83 -5, 83, 83 +1, 83 +5) */
background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-78), var(--color-83), var(--color-84), var(--color-88));
border-top-color: var(--color-78);
border-left-color: var(--color-87);
border-right-color: var(--color-87);
}
div.statusInfo {
background-color: var(--color-81);
/* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-76), var(--color-81), var(--color-82), var(--color-86));
color: var(--color-23);
}
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
}
div.statusError {
background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
}
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);
}
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
background: none;
}
html.dark-mode #taskmenu a.selected, html.dark-mode .menu.toolbar a.selected {
background-color: rgba(var(--color-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);
}
html.dark-mode .message-htmlpart {
background-color: rgba(var(--color-rgb-99), 0.08);
color: var(--color-15);
}
/** Nextcloud specific **/
html.ng-csp header#header{
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-17);
}
.files-list__row-name button, button.button-vue{
background: transparent;
}
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent;
}
div#mastodon .column-link{
color: var(--color-55);
}
div#mastodon .column-back-button {
color: var(--color-58);
}
div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
background-color: var(--color-89);
/* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-84), var(--color-89), var(--color-90), var(--color-94));
color: var(--color-19);
}
div#mastodon .status-card__title, div#mastodon .display-name strong{
color: var(--color-33);
}
div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
color: var(--color-29);
}
div#mastodon .dropdown-button{
border: 1px solid #8c8dff;
}
div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
background-color: var(--color-71);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-66), var(--color-71), var(--color-72), var(--color-76));
}
.compose-form__actions .icon-button {
color: var(--color-28);
}
/** OpenProject **/
header.op-app-header{
background-color: var(--color-40);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-35), var(--color-40), var(--color-41), var(--color-45));
color: var(--color-40);
}
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
background-color: transparent;
}
/* 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);
}
.subtitle {
color: inherit;
}
.has-background-light {
background-color: var(--color-96) !important;
}
/* Pixelfed */
div.page-wrapper{
background: none;
background-color: none;
}
.card-header-title {
color: var(--color-37);
}
/* PHP MyAdmin */
#pma_navigation {
background: linear-gradient(to right, var(--color-95), var(--color-85));
color: var(--color-05);
}
#pma_navigation_tree a {
color: var(--color-05);
}
#pma_navigation_tree li.activePointer, #pma_navigation_tree li.selected {
color: var(--color-05);
background-color: var(--color-70);
}
.breadcrumb-navbar {
background-color: var(--color-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);
}
.result_query div.sqlOuter {
background: var(--color-50);
}
/** Taiga specific configuration **/
section.main.kanban{
background-color: transparent;
}
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);
}
section.kanban h1, section.kanban h2{
color: var(--color-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);
}
.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));
}
.kanban.swimlane .kanban-header {
background: none;
}
.kanban-table-header .task-colum-name {
background-color: var(--color-70);
color: var(--color-10);
}
input.ng-empty::placeholder,.ng-empty::placeholder {
color: rgba(var(--color-rgb-03),0.6); /* Beispiel: roter Platzhaltertext */
}
.lightbox {
background: rgba(var(--color-rgb-97), .93);
color: var(--color-03);
}
.kanban-filter tg-filter {
border-color: var(--color-70);
}
/* Portfolio */
.card-img-top i {
filter: drop-shadow(4px 4px 4px rgba(var(--color-rgb-23), 0.6));
}
.kanban-table-body .kanban-uses-box {
background-color: var(--color-81);
}
.kanban-swimlane-title {
border-bottom: none;
}