kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-02-23 04:49:40 +01:00
Code Issues Packages Projects Releases Wiki Activity
computer-playbook/roles/nginx-modifier-css/templates/global.css.j2

971 lines
42 KiB
Django/Jinja
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/***
Global Theming Styles – Color and Shadow Variables
HINT:
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.
*/
:root {
/** Derived Colors from the Base Color **/
{% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
{% endfor %}
}
@media (prefers-color-scheme: dark) {
:root {
/** Dark Mode Derived Colors from the Base Color **/
{% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ design.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=design.css.filters.saturation_change,hue_shift=design.css.filters.hue_shift) }};
{% endfor %}
}
}
:root, ::after, ::before, ::backdrop {
/* For Dark Mode Plugin
* @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
*/
--native-dark-accent-color: var(--color-60); /* was #a9a9a9 */
--native-dark-bg-color: var(--color-10); /* was #292929 */
--native-dark-bg-image-color: rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
--native-dark-border-color: var(--color-40); /* was #555555 */
--native-dark-box-shadow: 0 0 0 1px rgb(var(--color-rgb-99), / 10%);
--native-dark-cite-color: var(--color-70); /* was #92de92 – you might adjust if a green tone is needed */
--native-dark-fill-color: var(--color-50); /* was #7d7d7d */
--native-dark-font-color: var(--color-95); /* was #dcdcdc */
--native-dark-link-color: var(--color-80); /* was #8db2e5 */
--native-dark-visited-link-color: var(--color-85); /* was #c76ed7 */
}
/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
--bs-black: var(--color-01); /* Original tone: Black (#000) */
--bs-white: var(--color-99); /* Original tone: White (#fff) */
--bs-gray: var(--color-50); /* Original tone: Gray (#6c757d) */
--bs-gray-dark: var(--color-20); /* Original tone: Dark Gray (#343a40) */
--bs-gray-100: var(--color-95); /* Original tone: Very Light Gray (#f8f9fa) */
--bs-gray-200: var(--color-90); /* Original tone: Lighter Gray (#e9ecef) */
--bs-gray-300: var(--color-85); /* Original tone: Light Gray (#dee2e6) */
--bs-gray-400: var(--color-80); /* Original tone: Gray (#ced4da) */
--bs-gray-500: var(--color-70); /* Original tone: Medium Gray (#adb5bd) */
--bs-gray-600: var(--color-50); /* Original tone: Gray (#6c757d) */
--bs-gray-700: var(--color-40); /* Original tone: Darker Gray (#495057) */
--bs-gray-800: var(--color-20); /* Original tone: Dark Gray (#343a40) */
--bs-gray-900: var(--color-10); /* Original tone: Very Dark Gray (#212529) */
--bs-primary: var(--color-65); /* Original tone: Blue (#0d6efd) */
--bs-light: var(--color-95); /* Original tone: Light (#f8f9fa) */
--bs-dark: var(--color-10); /* Original tone: Dark (#212529) */
--bs-primary-rgb: var(--color-rgb-65); /* Original tone: Blue (13, 110, 253) */
--bs-secondary-rgb: var(--color-rgb-50); /* Original tone: Grayish (#6c757d / 108, 117, 125) */
--bs-light-rgb: var(--color-rgb-95); /* Original tone: Light (248, 249, 250) */
--bs-dark-rgb: var(--color-rgb-10); /* Original tone: Dark (33, 37, 41) */
--bs-white-rgb: var(--color-rgb-99); /* Original tone: White (255, 255, 255) */
--bs-black-rgb: var(--color-rgb-01); /* Original tone: Black (0, 0, 0) */
--bs-body-color-rgb: var(--color-rgb-10); /* Original tone: Dark (#212529 / 33, 37, 41) */
--bs-body-bg-rgb: var(--color-rgb-99); /* Original tone: White (#fff / 255, 255, 255) */
--bs-body-color: var(--color-10); /* Original tone: Dark (#212529) */
--bs-body-bg: var(--color-99); /* Original tone: White (#fff) */
--bs-border-color: var(--color-85); /* Original tone: Gray (#dee2e6) */
--bs-link-color: var(--color-65); /* Original tone: Blue (#0d6efd) */
--bs-link-hover-color: var(--color-60); /* Original tone: Darker Blue (#0a58ca) */
--bs-code-color: var(--color-55); /* Original tone: Pink (#d63384) */
--bs-highlight-bg: var(--color-93); /* Original tone: Light Yellow (#fff3cd) */
--bs-list-group-bg: var(--color-40);
}
/* Discourse */
:root section#main{
/* Base Colors */
--primary: var(--color-20); /* originally #203243 */
--secondary: var(--color-95); /* originally #eef4f7 */
--tertiary: var(--color-40); /* originally #416376 */
--quaternary: var(--color-50); /* originally #5e99b9 */
/* Header & Highlight */
--header_background: var(--color-70); /* originally #86bddb */
--header_primary: var(--color-20); /* same as --primary */
--highlight: var(--color-70); /* same as header_background */
--d-selected: var(--color-85); /* originally #bee0f2 */
--d-hover: var(--color-90); /* originally #d2efff */
/* Normally refers to secondary. Somehow this reference does not work.*/
--d-sidebar-background: var(--color-92);
--d-sidebar-footer-fade: var(--color-92);
/* RGB values */
--always-black-rgb: var(--color-rgb-01);
--primary-rgb: var(--color-rgb-20);
--primary-low-rgb: var(--color-rgb-95);
--primary-very-low-rgb: var(--color-rgb-99);
--secondary-rgb: var(--color-rgb-95);
--header_background-rgb: var(--color-rgb-70);
--tertiary-rgb: var(--color-rgb-40);
--highlight-rgb: var(--color-rgb-70);
--success-rgb: var(--color-rgb-50);
/* Primary Scale */
--primary-very-low: var(--color-99); /* originally #f7f9fb */
--primary-low: var(--color-95); /* originally #e3ebf2 */
--primary-low-mid: var(--color-75); /* originally #acc2d7 */
--primary-medium: var(--color-60); /* originally #7499bd */
--primary-high: var(--color-40); /* originally #487096 */
--primary-very-high: var(--color-20); /* originally #34516d */
--primary-50: var(--color-99); /* originally #f7f9fb */
--primary-100: var(--color-95); /* originally #eef3f7 */
--primary-200: var(--color-90); /* originally #e3ebf2 */
--primary-300: var(--color-80); /* originally #c7d6e4 */
--primary-400: var(--color-75); /* originally #acc2d7 */
--primary-500: var(--color-70); /* originally #90aeca */
--primary-600: var(--color-60); /* originally #7499bd */
--primary-700: var(--color-50); /* originally #5381ad */
--primary-800: var(--color-40); /* originally #487096 */
--primary-900: var(--color-20); /* originally #34516d */
/* Header Primary Scale */
--header_primary-low: rgb(var(--color-rgb-75)); /* rgb(128, 180, 209) */
--header_primary-low-mid: rgb(var(--color-rgb-70)); /* rgb(110, 155, 181) */
--header_primary-medium: rgb(var(--color-rgb-60)); /* rgb(93, 132, 155) */
--header_primary-high: rgb(var(--color-rgb-50)); /* rgb(78, 112, 132) */
--header_primary-very-high: rgb(var(--color-rgb-20)); /* rgb(52, 76, 94) */
/* Secondary Scale */
--secondary-low: var(--color-20); /* originally #2f5163 */
--secondary-medium: var(--color-40); /* originally #4e88a5 */
--secondary-high: var(--color-60); /* originally #7ba9c1 */
--secondary-very-high: var(--color-90); /* originally #d7e5ec */
/* Tertiary Scale */
--tertiary-very-low: var(--color-99); /* originally #eaf0f3 */
--tertiary-low: var(--color-95); /* originally #dfe8ee */
--tertiary-medium: var(--color-60); /* originally #96b4c5 */
--tertiary-high: var(--color-40); /* originally #5886a0 */
--tertiary-hover: var(--color-20); /* originally #314a59 */
--tertiary-50: var(--color-99); /* originally #eaf0f3 */
--tertiary-100: var(--color-95); /* originally #e6edf1 */
--tertiary-200: var(--color-90); /* originally #e4ebf0 */
--tertiary-300: var(--color-85); /* originally #dfe8ee */
--tertiary-400: var(--color-75); /* originally #c8d8e1 */
--tertiary-500: var(--color-65); /* originally #b1c7d4 */
--tertiary-600: var(--color-60); /* originally #96b4c5 */
--tertiary-700: var(--color-55); /* originally #80a5b9 */
--tertiary-800: var(--color-50); /* originally #6b96ae */
--tertiary-900: var(--color-40); /* originally #5886a0 */
/* Quaternary */
--quaternary-low: var(--color-80); /* originally #cfe0ea */
/* Highlight */
--highlight-bg: var(--color-90); /* originally #dbebf4 */
--highlight-low: var(--color-90); /* originally #dbebf4 */
--highlight-medium: var(--color-80); /* originally #c3deed */
--highlight-high: var(--color-30); /* originally #286688 */
/* Combination Variables */
--blend-primary-secondary-5: rgb(var(--color-rgb-95)); /* originally rgb(232, 238, 241) */
--primary-med-or-secondary-med: var(--color-60); /* originally #7499bd */
--primary-med-or-secondary-high: var(--color-60); /* originally #7499bd */
--primary-high-or-secondary-low: var(--color-40); /* originally #487096 */
--primary-low-mid-or-secondary-high: var(--color-75); /* originally #acc2d7 */
--primary-low-mid-or-secondary-low: var(--color-75); /* originally #acc2d7 */
--primary-or-primary-low-mid: var(--color-20); /* originally #203243 */
--highlight-low-or-medium: var(--color-90); /* originally #dbebf4 */
--tertiary-or-tertiary-low: var(--color-40); /* originally #416376 */
--tertiary-low-or-tertiary-high: var(--color-95); /* originally #dfe8ee */
--tertiary-med-or-tertiary: var(--color-60); /* originally #96b4c5 */
--secondary-or-primary: var(--color-95); /* originally #eef4f7 */
--tertiary-or-white: var(--color-40); /* originally #416376 */
/* Float Kit */
--float-kit-arrow-stroke-color: var(--primary-low); /* already mapped above */
--float-kit-arrow-fill-color: var(--secondary); /* already mapped above */
}
/* gitea */
:root {
/* Base and derived colors are now referenced from the computed scale */
--color-primary: var(--color-50);
--color-primary-contrast: var(--color-99);
--color-primary-dark-1: var(--color-48);
--color-primary-dark-2: var(--color-47);
--color-primary-dark-3: var(--color-46);
--color-primary-dark-4: var(--color-45);
--color-primary-dark-5: var(--color-44);
--color-primary-dark-6: var(--color-43);
--color-primary-dark-7: var(--color-42);
--color-primary-light-1: var(--color-52);
--color-primary-light-2: var(--color-53);
--color-primary-light-3: var(--color-54);
--color-primary-light-4: var(--color-55);
--color-primary-light-5: var(--color-57);
--color-primary-light-6: var(--color-59);
--color-primary-light-7: var(--color-61);
/* Alpha variants reference the base RGB variable */
--color-primary-alpha-10: rgba(var(--color-rgb-50), 0.10);
--color-primary-alpha-20: rgba(var(--color-rgb-50), 0.20);
--color-primary-alpha-30: rgba(var(--color-rgb-50), 0.30);
--color-primary-alpha-40: rgba(var(--color-rgb-50), 0.40);
--color-primary-alpha-50: rgba(var(--color-rgb-50), 0.50);
--color-primary-alpha-60: rgba(var(--color-rgb-50), 0.60);
--color-primary-alpha-70: rgba(var(--color-rgb-50), 0.70);
--color-primary-alpha-80: rgba(var(--color-rgb-50), 0.80);
--color-primary-alpha-90: rgba(var(--color-rgb-50), 0.90);
--color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2);
/* Secondary colors */
--color-secondary: var(--color-80);
--color-secondary-dark-1: var(--color-78);
--color-secondary-dark-2: var(--color-76);
--color-secondary-dark-3: var(--color-74);
--color-secondary-dark-4: var(--color-72);
--color-secondary-dark-5: var(--color-70);
--color-secondary-dark-6: var(--color-68);
--color-secondary-dark-7: var(--color-66);
--color-secondary-dark-8: var(--color-64);
--color-secondary-dark-9: var(--color-62);
--color-secondary-dark-10: var(--color-60);
--color-secondary-dark-11: var(--color-58);
--color-secondary-dark-12: var(--color-56);
--color-secondary-dark-13: var(--color-54);
--color-secondary-light-1: var(--color-92);
--color-secondary-light-2: var(--color-93);
--color-secondary-light-3: var(--color-94);
--color-secondary-light-4: var(--color-95);
--color-secondary-alpha-10: rgba(var(--color-rgb-80), 0.10);
--color-secondary-alpha-20: rgba(var(--color-rgb-80), 0.20);
--color-secondary-alpha-30: rgba(var(--color-rgb-80), 0.30);
--color-secondary-alpha-40: rgba(var(--color-rgb-80), 0.40);
--color-secondary-alpha-50: rgba(var(--color-rgb-80), 0.50);
--color-secondary-alpha-60: rgba(var(--color-rgb-80), 0.60);
--color-secondary-alpha-70: rgba(var(--color-rgb-80), 0.70);
--color-secondary-alpha-80: rgba(var(--color-rgb-80), 0.80);
--color-secondary-alpha-90: rgba(var(--color-rgb-80), 0.90);
--color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-5);
--color-secondary-active: var(--color-secondary-dark-6);
/* Console Colors */
--color-console-fg: var(--color-98);
--color-console-fg-subtle: var(--color-85);
--color-console-bg: var(--color-10);
--color-console-border: var(--color-40);
--color-console-hover-bg: var(--color-42);
--color-console-active-bg: var(--color-40);
--color-console-menu-bg: var(--color-38);
--color-console-menu-border:var(--color-45);
/* Body, Text, and Miscellaneous Colors */
--color-white: var(--color-99);
--color-grey: var(--color-60);
--color-grey-light: var(--color-65);
--color-body: var(--color-white);
--color-text-dark: var(--color-10);
--color-text: var(--color-40);
--color-text-light: var(--color-60);
--color-text-light-1: var(--color-65);
--color-text-light-2: var(--color-70);
--color-text-light-3: var(--color-75);
--color-footer: var(--color-nav-bg);
--color-timeline: var(--color-80);
/* Input Colors */
--color-input-text: var(--color-10);
--color-input-background: var(--color-white);
--color-input-toggle-background: var(--color-80);
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
/* Effects */
--color-light: var(--color-05);
--color-light-mimic-enabled: rgba(var(--color-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
--color-light-border: var(--color-05);
--color-hover: var(--color-05);
--color-hover-opaque: var(--color-95);
--color-active: var(--color-05);
/* Menu, Card, and Markup Colors */
--color-menu: var(--color-99);
--color-card: var(--color-99);
--color-markup-table-row: var(--color-01);
--color-markup-code-block: var(--color-01);
--color-markup-code-inline: var(--color-01);
--color-button: var(--color-99);
--color-code-bg: var(--color-99);
--color-shadow: var(--color-05);
--color-shadow-opaque: var(--color-85);
--color-secondary-bg: var(--color-95);
--color-expand-button: var(--color-98);
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-column-bg: var(--color-secondary-light-4);
--color-caret: var(--color-10);
/* Reaction and Tooltip Colors */
--color-reaction-bg: var(--color-05);
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: var(--color-99);
--color-tooltip-bg: var(--color-05);
/* Navigation Colors */
--color-nav-bg: var(--color-99);
--color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-40);
--color-secondary-nav-bg: var(--color-99);
/* Label and Accent Colors */
--color-label-text: var(--color-40);
--color-label-bg: var(--color-50);
--color-label-hover-bg: var(--color-60);
--color-label-active-bg: var(--color-70);
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
--color-highlight-fg: var(--color-10);
--color-highlight-bg: var(--color-99);
--color-overlay-backdrop: var(--color-05);
}
/* Keycloak */
:root{
/* --- Palette Black (Graustufen) --- */
--pf-v5-global--palette--black-100: var(--color-95); /* #fafafa */
--pf-v5-global--palette--black-150: var(--color-90); /* #f5f5f5 */
--pf-v5-global--palette--black-200: var(--color-85); /* #f0f0f0 */
--pf-v5-global--palette--black-300: var(--color-75); /* #d2d2d2 */
--pf-v5-global--palette--black-400: var(--color-65); /* #b8bbbe */
--pf-v5-global--palette--black-500: var(--color-50); /* #8a8d90 */
--pf-v5-global--palette--black-600: var(--color-40); /* #6a6e73 */
--pf-v5-global--palette--black-700: var(--color-30); /* #4f5255 */
--pf-v5-global--palette--black-800: var(--color-25); /* #3c3f42 */
--pf-v5-global--palette--black-850: var(--color-20); /* #212427 */
--pf-v5-global--palette--black-900: var(--color-10); /* #151515 */
--pf-v5-global--palette--black-1000: var(--color-05); /* #030303 */
/* --- White --- */
--pf-v5-global--palette--white: var(--color-99);
/* --- Background Colors --- */
--pf-v5-global--BackgroundColor--100: var(--color-99);
--pf-v5-global--BackgroundColor--150: var(--color-95);
--pf-v5-global--BackgroundColor--200: var(--color-85);
--pf-v5-global--BackgroundColor--300: var(--color-75);
--pf-v5-global--BackgroundColor--400: var(--color-65);
--pf-v5-global--BackgroundColor--light-100: var(--color-99);
--pf-v5-global--BackgroundColor--light-200: var(--color-95);
--pf-v5-global--BackgroundColor--light-300: var(--color-85);
--pf-v5-global--BackgroundColor--dark-100: var(--color-10);
--pf-v5-global--BackgroundColor--dark-200: var(--color-25);
--pf-v5-global--BackgroundColor--dark-300: var(--color-20);
--pf-v5-global--BackgroundColor--dark-400: var(--color-30);
--pf-v5-global--BackgroundColor--dark-transparent-100: var(--color-05);
--pf-v5-global--BackgroundColor--dark-transparent-200: var(--color-05);
/* --- Color Variables --- */
--pf-v5-global--Color--100: var(--color-10);
--pf-v5-global--Color--200: var(--color-40);
--pf-v5-global--Color--300: var(--color-25);
--pf-v5-global--Color--400: var(--color-50);
--pf-v5-global--Color--light-100: var(--color-99);
--pf-v5-global--Color--light-200: var(--color-85);
--pf-v5-global--Color--light-300: var(--color-75);
--pf-v5-global--Color--dark-100: var(--color-10);
--pf-v5-global--Color--dark-200: var(--color-40);
/* --- Active Colors --- */
--pf-v5-global--active-color--100: var(--color-65);
--pf-v5-global--active-color--200: var(--color-95);
--pf-v5-global--active-color--300: var(--color-75);
--pf-v5-global--active-color--400: var(--color-85);
/* --- Disabled Colors --- */
--pf-v5-global--disabled-color--100: var(--color-40);
--pf-v5-global--disabled-color--200: var(--color-75);
--pf-v5-global--disabled-color--300: var(--color-85);
/* --- Primary Colors --- */
--pf-v5-global--primary-color--100: var(--color-65);
--pf-v5-global--primary-color--200: var(--color-40);
--pf-v5-global--primary-color--light-100: var(--color-75);
--pf-v5-global--primary-color--dark-100: var(--color-65);
/* --- Secondary Colors --- */
--pf-v5-global--secondary-color--100: var(--color-40);
/* --- Custom Colors --- */
--pf-v5-global--custom-color--100: var(--color-65);
--pf-v5-global--custom-color--200: var(--color-65);
--pf-v5-global--custom-color--300: var(--color-30);
/* --- Link Colors --- */
--pf-v5-global--link--Color: var(--color-65);
--pf-v5-global--link--Color--hover: var(--color-40);
--pf-v5-global--link--Color--light: var(--color-75);
--pf-v5-global--link--Color--light--hover: var(--color-85);
--pf-v5-global--link--Color--dark: var(--color-65);
--pf-v5-global--link--Color--dark--hover: var(--color-40);
--pf-v5-global--link--Color--visited: var(--color-40);
/* --- Border Colors --- */
--pf-v5-global--BorderColor--100: var(--color-75);
--pf-v5-global--BorderColor--200: var(--color-50);
--pf-v5-global--BorderColor--300: var(--color-85);
--pf-v5-global--BorderColor--400: var(--color-65);
--pf-v5-global--BorderColor--dark-100: var(--color-75);
--pf-v5-global--BorderColor--light-100: var(--color-65);
/* --- Icon Colors --- */
--pf-v5-global--icon--Color--light: var(--color-40);
--pf-v5-global--icon--Color--dark: var(--color-10);
--pf-v5-global--icon--Color--light--light: var(--color-85);
--pf-v5-global--icon--Color--dark--light: var(--color-99);
--pf-v5-global--icon--Color--light--dark: var(--color-40);
--pf-v5-global--icon--Color--dark--dark: var(--color-10);
}
/* Additional Keykloak Configuration */
a.pf-v5-c-nav__link{
--pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-rgb-56), 0.4);
}
/* LAM */
:root {
--lam-background-color-default: var(--color-99); {# from #FFFFFF (very bright white) #}
--lam-input-bg-color: var(--color-98); {# from #fcfcfc (almost white) #}
--lam-text-color-default: var(--color-01); {# from #000000 (pure black) #}
--lam-border-color: var(--color-90); {# from #e8e8e8 (light grey) #}
--lam-border-color-primary: var(--color-15); {# from #01689e (dark blue) #}
--lam-border-color-secondary: var(--color-85); {# from #ffcb1d (bright yellow) #}
--lam-background-color-primary: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-background-color-secondary: var(--color-90); {# from #ffe233 (bright yellow) #}
--lam-text-color-primary: var(--color-99); {# from #ffffff (pure white) #}
--lam-text-color-secondary: var(--color-01); {# from #000000 (pure black) #}
--lam-text-color-ok: var(--color-10); {# from #237d0c (dark green) #}
--lam-table-background-color-bright: var(--color-98); {# from #fbfbfb (very light grey) #}
--lam-table-background-color-dark: var(--color-92); {# from #e8f3ff (light blue) #}
--lam-table-background-color-hover: var(--color-50); {# from #3daee9 (mid-tone blue) #}
--lam-table-text-color-hover: var(--color-99); {# from #ffffff (pure white) #}
--lam-table-border-color: var(--color-50); {# from #3daee9 (mid-tone blue) #}
}
/** Mastodon Overrides **/
div#mastodon, div#admin-wrapper {
/* Dropdown */
--dropdown-border-color: var(--color-35);
--dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
--dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);
/* Modal */
--modal-background-color: rgba(var(--color-rgb-03), 0.7);
--modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
--modal-border-color: var(--color-35);
/* Background */
--background-border-color: var(--color-82);
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: var(--color-93);
--background-color-tint: rgba(var(--color-rgb-03), 0.9);
/* Surface */
--surface-background-color: var(--color-90);
--surface-variant-background-color: var(--color-89);
--surface-variant-active-background-color: var(--color-35);
--on-surface-color: rgba(var(--color-rgb-05), 0.5);
/* Media & Overlay */
--media-outline-color: rgba(var(--color-rgb-99), 0.15);
--overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
}
/* Modal Overwrittes */
div.modal div.modal-content {
/* Colors – adjusted to the existing scheme */
--bs-modal-color: var(--color-21); /* Text color: dark contrast against the light modal background */
--bs-modal-bg: var(--color-82); /* Background color, as desired */
--bs-modal-border-color: var(--color-82); /* A slightly darker border than the background */
--bs-modal-header-border-color: var(--color-87); /* Same shade as the modal border */
--bs-modal-footer-bg: var(--color-87); /* A slightly offset footer background (a bit darker than the main area) */
--bs-modal-footer-border-color: var(--color-87);
}
/** Nextcloud Specific**/
:root{
--color-main-background: var(--color-84);
--color-main-background-rgb: rgba(var(--color-rgb-84),0.83);
--color-primary-element: var(--color-80);
--color-main-text: var(--color-40);
--color-background-hover: var(--color-65);
/** Calendar **/
--color-background-dark: var(--color-73); /** Days which aren't in the current month **/
--color-primary-element-light: var(--color-65);
}
/** Peertube **/
:root {
--mainColor: var(--color-50);
}
/** Pixelfed **/
:root {
/* Base Colors */
--light: var(--color-05); /* Very dark (was #000) */
--dark: var(--color-99); /* Very light (was #fff) */
/* Backgrounds */
--body-bg: var(--color-05); /* Main background: very dark */
--nav-bg: var(--color-05); /* Navigation background: very dark */
/* Text Colors */
--body-color: var(--color-70); /* Main text – mid brightness */
--text-lighter: var(--color-60); /* Lighter text for less prominent elements */
/* Section Backgrounds and Cards */
--bg-light: var(--color-95); /* Lighter background areas */
--card-bg: var(--color-90); /* Card background */
--light-gray: var(--color-75); /* For less dominant elements */
--light-hover-bg: var(--color-85); /* Slightly lighter hover background */
/* Borders and Input Fields */
--btn-light-border: var(--color-10); /* Dark border for buttons */
--input-border: var(--color-10); /* Border color for inputs */
--border-color: var(--color-85); /* General border: slightly lighter than background */
/* Other Areas */
--comment-bg: var(--color-85); /* Background for comments */
--card-header-accent: var(--color-85); /* Accent color in card headers */
/* Dropdown Menus */
--dropdown-item-hover-bg: var(--color-05); /* Hover background: very dark */
--dropdown-item-hover-color: var(--color-60); /* Hover text: a bit lighter */
--dropdown-item-color: var(--color-70); /* Regular dropdown item text */
--dropdown-item-active-color: var(--color-99);/* Active state: very light (white) */
}
/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
background-color: var(--color-93);
background: linear-gradient(45deg, var(--color-93), var(--color-91), var(--color-95), var(--color-93));
color: var(--color-40);
/* Use the corporate-design font family */
font-family: "Liberation Sans", Arial, sans-serif;
}
{# All links (applies to all anchor elements regardless of state) #}
a {
color: var(--color-50);
}
{# Unvisited links (applies only to links that have not been visited) #}
a:link {
color: var(--color-55);
}
{# Visited links (applies only to links that have been visited) #}
a:visited {
color: var(--color-45);
}
{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
color: var(--color-60);
}
{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
color: var(--color-65);
}
/* Buttons (Background, Text, Border, and Shadow)
Now using a button background that is only slightly darker than the overall background */
html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
background-color: var(--color-87);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-91), var(--color-95), var(--color-95));
color: var(--color-50);
border-color: var(--color-80);
cursor: pointer;
}
button:hover, .btn:hover {
filter: brightness(0.9);
}
/* {# Invalid state: when the input value fails validation criteria. Use danger color for error indication. #} */
input:invalid,
textarea:invalid,
select:invalid {
background-color: var(--color-01);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01), var(--color-10));
/* Use Bootstrap danger color for error messages */
color: var(--bs-danger);
border-color: var(--color-20);
}
/* {# Valid state: when the input value meets all validation criteria. Use success color for confirmation. #} */
input:valid,
textarea:valid,
select:valid {
background-color: var(--color-80);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-80), var(--color-90));
/* Use Bootstrap success color for confirmation messages */
color: var(--bs-success);
border-color: var(--color-70);
}
/* {# Required field: applied to elements that must be filled out by the user. Use warning color for emphasis. #} */
input:required,
textarea:required,
select:required {
background-color: var(--color-50);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-50), var(--color-60));
/* Use Bootstrap warning color to indicate a required field */
color: var(--bs-warning);
border-color: var(--color-70);
}
/* {# Optional field: applied to elements that are not mandatory. Use info color to denote additional information. #} */
input:optional,
textarea:optional,
select:optional {
background-color: var(--color-60);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-70));
/* Use Bootstrap info color to indicate optional information */
color: var(--bs-info);
border-color: var(--color-70);
}
/* {# Read-only state: when an element is not editable by the user. #} */
input:read-only,
textarea:read-only,
select:read-only {
background-color: var(--color-80);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-90), var(--color-70));
color: var(--color-20);
border-color: var(--color-50);
}
/* {# Read-write state: when an element is editable by the user. #} */
input:read-write,
textarea:read-write,
select:read-write {
background-color: var(--color-70);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-80));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# In-range: for inputs with a defined range, when the value is within the allowed limits. #} */
input:in-range,
textarea:in-range,
select:in-range {
background-color: var(--color-70);
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-85));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# Out-of-range: for inputs with a defined range, when the value falls outside the allowed limits. #} */
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
background-color: var(--color-10);
background: linear-gradient(45deg, var(--color-10), var(--color-30));
color: var(--color-10);
border-color: var(--color-50);
}
/* {# Placeholder-shown: when the input field is displaying its placeholder text. #} */
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
background-color: var(--color-82);
background: linear-gradient(45deg, var(--color-82), var(--color-90));
color: var(--color-40);
border-color: var(--color-70);
}
/* {# Focus state: when the element is focused by the user. #} */
input:focus,
textarea:focus,
select:focus {
background-color: var(--color-75);
background: linear-gradient(45deg, var(--color-75), var(--color-85));
color: var(--color-40);
border-color: var(--color-50);
}
/* {# Hover state: when the mouse pointer is over the element. #} */
input:hover,
textarea:hover,
select:hover {
background-color: var(--color-78);
background: linear-gradient(45deg, var(--color-78), var(--color-88));
color: var(--color-40);
border-color: var(--color-65);
}
/* {# Active state: when the element is being activated (e.g., clicked). #} */
input:active,
textarea:active,
select:active {
background-color: var(--color-68);
background: linear-gradient(45deg, var(--color-68), var(--color-78));
color: var(--color-40);
border-color: var(--color-60);
}
/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
background-color: var(--color-90);
background: linear-gradient(45deg, var(--color-90), var(--color-99));
color: var(--color-40);
border-color: var(--color-70);
}
/* Tables (Borders and Header Colors) */
th, td {
border-color: var(--color-70);
}
thead {
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
color: var(--color-10);
}
/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
color: var(--color-50);
border-color: var(--color-85);
}
.navbar a {
color: var(--color-40);
}
.navbar a.dropdown-item {
color: var(--color-43);
}
/* Cards / Containers (Background, Border, and Shadow)
Cards now use a slightly lighter background and a bold, clear shadow */
.card {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
border-color: var(--color-85);
}
.card-body {
color: var(--color-40);
}
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-40);
}
.dropdown-item {
color: var(--color-40);
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-65);
/* New Gradient based on original background (65 -5, 65, 65 +1, 65 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-60), var(--color-65), var(--color-66), var(--color-70));
color: var(--color-40);
}
/* Keycloak Header */
div#app header, div#app header *{
background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
color: var(--color-98);
}
/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
border-color: transparent;
}
/* Not changable due to inline css */
.roundedShadowBox {
color: #000000;
}
.titleBar {
background-image: linear-gradient(var(--color-83), var(--color-92));
/* New Gradient based on original background (83 -5, 83, 83 +1, 83 +5) */
background-image: linear-gradient({{ range(0, 361) | random }}deg, var(--color-78), var(--color-83), var(--color-84), var(--color-88));
border-top-color: var(--color-78);
border-left-color: var(--color-87);
border-right-color: var(--color-87);
}
div.statusInfo {
background-color: var(--color-81);
/* New Gradient based on original background (81 -5, 81, 81 +1, 81 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-76), var(--color-81), var(--color-82), var(--color-86));
color: var(--color-23);
}
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90);
/* New Gradient based on original background (90 -5, 90, 90 +1, 90 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-85), var(--color-90), var(--color-91), var(--color-95));
}
div.statusError {
background-color: var(--color-60);
/* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-55), var(--color-60), var(--color-61), var(--color-65));
}
/** Nextcloud specific **/
html.ng-csp header#header{
background-color: var(--color-80);
/* New Gradient based on original background (80 -5, 80, 80 +1, 80 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-75), var(--color-80), var(--color-81), var(--color-85));
color: var(--color-90);
}
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}
div#mastodon .column-link{
color: var(--color-55);
}
div#mastodon .column-back-button {
color: var(--color-58);
}
div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
background-color: var(--color-89);
/* New Gradient based on original background (89 -5, 89, 89 +1, 89 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-84), var(--color-89), var(--color-90), var(--color-94));
color: var(--color-19);
}
div#mastodon .status-card__title, div#mastodon .display-name strong{
color: var(--color-33);
}
div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
color: var(--color-29);
}
div#mastodon .dropdown-button{
border: 1px solid #8c8dff;
}
div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
background-color: var(--color-71);
/* New Gradient based on original background (71 -5, 71, 71 +1, 71 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-66), var(--color-71), var(--color-72), var(--color-76));
}
.compose-form__actions .icon-button {
color: var(--color-28);
}
/** OpenProject **/
header.op-app-header{
background-color: var(--color-40);
/* New Gradient based on original background (40 -5, 40, 40 +1, 40 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-35), var(--color-40), var(--color-41), var(--color-45));
color: var(--color-40);
}
/** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}
/* Peertube specific configuration */
.peertube-container button {
background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}
/* Pixelfed */
div.page-wrapper{
background: none;
background-color: none;
}
/** Taiga specific configuration **/
section.main.kanban{
background-color: transparent;
/* New Gradient with transparent values */
background: linear-gradient({{ range(0, 361) | random }}deg, transparent, transparent, transparent, transparent);
}
div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
background-color: var(--color-92);
/* New Gradient based on original background (92 -5, 92, 92 +1, 92 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-87), var(--color-92), var(--color-93), var(--color-97));
color: var(--color-40);
}
section.kanban h1, section.kanban h2{
color: var(--color-40);
}
.home-project {
background: var(--color-88);
/* New Gradient based on original background (88 -5, 88, 88 +1, 88 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-83), var(--color-88), var(--color-89), var(--color-93));
border-color: var(--color-60);
color: var(--color-12);
}
.home-wrapper .title-bar {
background: var(--color-75);
/* New Gradient based on original background (75 -5, 75, 75 +1, 75 +5) */
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-75), var(--color-76), var(--color-80));
}
Reference in New Issue View Git Blame Copy Permalink