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

765 lines
31 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-primary: var(--color-50);
--bs-secondary: var(--color-65);
--bs-body-bg: var(--color-90);
--bs-body-color: var(--color-40);
--bs-link-color: var(--color-50);
--bs-btn-color: 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-image: none;
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);
color: var(--color-50);
border-color: var(--color-80);
cursor: pointer;
}
button:hover, .btn:hover {
filter: brightness(0.9);
}
/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
input, textarea, select {
background-color: var(--color-82); /* Instead of var(--color-90) */
color: var(--color-40);
border-color: var(--color-70);
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-50);
}
/* Tables (Borders and Header Colors) */
th, td {
border-color: var(--color-70) !important;
}
thead {
background-color: var(--color-80) !important;
color: var(--color-40) !important;
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
color: var(--color-10) !important;
}
/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
background-color: var(--color-90) !important;
color: var(--color-50) !important;
border-color: var(--color-85) !important;
}
.navbar a {
color: var(--color-40) !important;
}
.navbar a.dropdown-item {
color: var(--color-40) !important;
}
/* Cards / Containers (Background, Border, and Shadow)
Cards now use a slightly lighter background and a bold, clear shadow */
.card {
background-color: var(--color-90) !important;
border-color: var(--color-85) !important;
}
.card-body {
color: var(--color-40) !important;
}
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
background-color: var(--color-80) !important;
color: var(--color-40) !important;
}
.dropdown-item {
color: var(--color-40) !important;
background-color: var(--color-80) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-65) !important;
color: var(--color-40) !important;
}
/* Keycloak Header */
div#app header, div#app header *{
background-color: var(--color-60) !important;
color: var(--color-98);
}
/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
background-color: transparent !important;
border-color: transparent !important;
}
/* Not changable due to inline css */
.roundedShadowBox {
color: #000000;
}
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90) !important;
}
.content-wrapper, .main-footer {
background-color: var(--color-92);
color: var(--color-18);
}
/** Nextcloud specific **/
html.ng-csp header#header{
color: var(--color-90) !important;
background-color: var(--color-80) !important;
}
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent !important;
}
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);
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);
}
.compose-form__actions .icon-button {
color: var(--color-28);
}
/** OpenProject **/
header.op-app-header{
background-color: var(--color-40) !important;
color: var(--color-40) !important;
}
/** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
background-color: transparent !important;
}
/* Peertube specific configuration */
.peertube-container button {
background-color: transparent !important;
}
/* Pixelfed */
div.page-wrapper{
background: none !important;
background-color: none !important;
}
/** Taiga specific configuration **/
section.main.kanban{
background-color: transparent !important;
}
div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
background-color: var(--color-92) !important;
color: var(--color-40) !important;
}
section.kanban h1, section.kanban h2{
color: var(--color-40) !important;
}
.home-project {
background: var(--color-88);
border-color: var(--color-60);
color: var(--color-12);
}
.home-wrapper .title-bar {
background: var(--color-75);
}
Reference in New Issue View Git Blame Copy Permalink