905 lines
35 KiB
Plaintext
Raw Normal View History

2025-02-13 10:52:20 +01:00
/***
Global Theming Styles Color and Shadow Variables
2025-02-18 11:59:17 +01:00
HINT:
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.
2025-02-13 10:52:20 +01:00
*/
2025-02-07 13:39:46 +01:00
: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 %}
2025-02-07 13:39:46 +01:00
}
@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
*/
2025-02-17 14:56:16 +01:00
--native-dark-accent-color: var(--color-60); /* was #a9a9a9 */
--native-dark-bg-color: var(--color-10); /* was #292929 */
2025-02-18 11:20:56 +01:00
--native-dark-bg-image-color: rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
2025-02-17 14:56:16 +01:00
--native-dark-border-color: var(--color-40); /* was #555555 */
2025-02-18 11:20:56 +01:00
--native-dark-box-shadow: 0 0 0 1px rgb(var(--color-rgb-99), / 10%);
2025-02-17 14:56:16 +01:00
--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) */
2025-02-07 13:39:46 +01:00
: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);
2025-02-07 13:39:46 +01:00
}
2025-02-17 16:53:56 +01:00
/* Discourse */
2025-02-18 11:20:56 +01:00
:root section#main{
2025-02-17 16:53:56 +01:00
/* 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 */
2025-02-18 11:20:56 +01:00
/* 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);
2025-02-17 16:53:56 +01:00
/* Primary Scale */
2025-02-18 09:26:13 +01:00
--primary-very-low: var(--color-99); /* originally #f7f9fb */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 09:26:13 +01:00
--primary-50: var(--color-99); /* originally #f7f9fb */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 11:20:56 +01:00
--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) */
2025-02-17 16:53:56 +01:00
/* 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 */
2025-02-18 09:26:13 +01:00
--tertiary-very-low: var(--color-99); /* originally #eaf0f3 */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 09:26:13 +01:00
--tertiary-50: var(--color-99); /* originally #eaf0f3 */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 11:20:56 +01:00
--blend-primary-secondary-5: rgb(var(--color-rgb-95)); /* originally rgb(232, 238, 241) */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 11:20:56 +01:00
--primary-low-mid-or-secondary-high: var(--color-75); /* originally #acc2d7 */
--primary-low-mid-or-secondary-low: var(--color-75); /* originally #acc2d7 */
2025-02-17 16:53:56 +01:00
--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 */
2025-02-18 11:20:56 +01:00
--tertiary-low-or-tertiary-high: var(--color-95); /* originally #dfe8ee */
--tertiary-med-or-tertiary: var(--color-60); /* originally #96b4c5 */
2025-02-17 16:53:56 +01:00
--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 */
}
2025-02-18 12:33:00 +01:00
/* 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);
}
2025-02-20 17:07:39 +01:00
/* 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) #}
}
2025-02-18 09:26:13 +01:00
/** Mastodon Overrides **/
2025-02-18 14:21:33 +01:00
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));
2025-02-18 09:26:13 +01:00
}
2025-02-18 11:59:17 +01:00
/* 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);
}
2025-02-18 09:26:13 +01:00
/** Nextcloud Specific**/
:root{
2025-02-18 11:20:56 +01:00
--color-main-background: var(--color-84);
--color-main-background-rgb: rgba(var(--color-rgb-84),0.83);
2025-02-18 09:26:13 +01:00
--color-primary-element: var(--color-80);
--color-main-text: var(--color-40);
--color-background-hover: var(--color-65);
/** Calendar **/
2025-02-18 11:20:56 +01:00
--color-background-dark: var(--color-73); /** Days which aren't in the current month **/
2025-02-18 09:26:13 +01:00
--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) */
2025-02-17 14:39:38 +01:00
body, html[native-dark-active] {
2025-02-18 11:59:17 +01:00
background-color: var(--color-93);
2025-02-20 18:52:52 +01:00
background: linear-gradient(45deg, var(--color-93), var(--color-91), var(--color-95), var(--color-93));
2025-02-18 11:59:17 +01:00
color: var(--color-40);
2025-02-07 14:08:18 +01:00
/* Use the corporate-design font family */
font-family: "Liberation Sans", Arial, sans-serif;
2025-02-07 13:39:46 +01:00
}
2025-02-20 17:07:39 +01:00
{# All links (applies to all anchor elements regardless of state) #}
2025-02-07 13:39:46 +01:00
a {
2025-02-18 11:59:17 +01:00
color: var(--color-50);
2025-02-07 13:39:46 +01:00
}
2025-02-20 17:07:39 +01:00
{# 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 */
2025-02-17 16:53:56 +01:00
html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
2025-02-18 11:59:17 +01:00
background-color: var(--color-87);
2025-02-20 18:52:52 +01:00
background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-70), var(--color-91), var(--color-95), var(--color-95));
2025-02-18 11:59:17 +01:00
color: var(--color-50);
border-color: var(--color-80);
2025-02-07 13:39:46 +01:00
cursor: pointer;
}
2025-02-07 13:39:46 +01:00
button:hover, .btn:hover {
filter: brightness(0.9);
}
2025-02-20 18:52:52 +01:00
/* {# 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(45deg, 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(45deg, 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(45deg, 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(45deg, 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(45deg, 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(45deg, 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(45deg, 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));
2025-02-18 11:59:17 +01:00
color: var(--color-40);
border-color: var(--color-70);
}
2025-02-20 18:52:52 +01:00
/* {# 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);
2025-02-18 11:59:17 +01:00
border-color: var(--color-50);
}
2025-02-20 18:52:52 +01:00
/* {# 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);
}
2025-02-18 11:59:17 +01:00
/* 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) */
2025-02-07 13:39:46 +01:00
.navbar, .navbar-light, .navbar-dark {
2025-02-18 09:26:13 +01:00
background-color: var(--color-90) !important;
color: var(--color-50) !important;
border-color: var(--color-85) !important;
2025-02-07 13:39:46 +01:00
}
2025-02-07 17:25:53 +01:00
2025-02-07 13:39:46 +01:00
.navbar a {
color: var(--color-40) !important;
2025-02-07 13:39:46 +01:00
}
.navbar a.dropdown-item {
color: var(--color-40) !important;
2025-02-07 17:25:53 +01:00
}
/* Cards / Containers (Background, Border, and Shadow)
Cards now use a slightly lighter background and a bold, clear shadow */
2025-02-07 13:39:46 +01:00
.card {
background-color: var(--color-90) !important;
border-color: var(--color-85) !important;
2025-02-07 13:39:46 +01:00
}
2025-02-18 11:59:17 +01:00
.card-body {
color: var(--color-40) !important;
}
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
2025-02-07 14:08:18 +01:00
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
background-color: var(--color-80) !important;
color: var(--color-40) !important;
2025-02-07 14:08:18 +01:00
}
.dropdown-item {
color: var(--color-40) !important;
background-color: var(--color-80) !important;
2025-02-07 14:08:18 +01:00
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-65) !important;
color: var(--color-40) !important;
2025-02-07 14:08:18 +01:00
}
2025-02-17 15:12:04 +01:00
/* Keycloak Header */
2025-02-11 13:26:32 +01:00
div#app header, div#app header *{
2025-02-17 15:12:04 +01:00
background-color: var(--color-60) !important;
color: var(--color-98);
2025-02-11 13:26:32 +01:00
}
2025-02-11 11:43:24 +01:00
/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
background-color: transparent !important;
border-color: transparent !important;
}
2025-02-20 17:07:39 +01:00
/* Not changable due to inline css */
.roundedShadowBox {
color: #000000;
}
2025-02-20 18:52:52 +01:00
.titleBar {
background-image: linear-gradient(var(--color-83), var(--color-92));
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);
color: var(--color-23);
}
2025-02-13 10:52:20 +01:00
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90) !important;
2025-02-13 10:52:20 +01:00
}
2025-02-20 18:52:52 +01:00
/** Lead to errors in portfolio
2025-02-20 15:48:01 +01:00
.content-wrapper, .main-footer {
background-color: var(--color-92);
color: var(--color-18);
2025-02-20 18:52:52 +01:00
} */
div.statusError {
background-color: var(--color-60);
2025-02-20 15:48:01 +01:00
}
2025-02-10 17:17:43 +01:00
/** Nextcloud specific **/
html.ng-csp header#header{
2025-02-18 09:26:13 +01:00
color: var(--color-90) !important;
background-color: var(--color-80) !important;
2025-02-10 17:17:43 +01:00
}
2025-02-11 01:38:24 +01:00
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent !important;
}
2025-02-18 14:21:33 +01:00
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);
}
2025-02-10 14:49:37 +01:00
/** OpenProject **/
header.op-app-header{
background-color: var(--color-40) !important;
color: var(--color-40) !important;
2025-02-10 14:49:37 +01:00
}
/** 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;
2025-02-08 11:19:44 +01:00
}
/* Pixelfed */
div.page-wrapper{
background: none !important;
background-color: none !important;
}
2025-02-08 11:19:44 +01:00
/** Taiga specific configuration **/
section.main.kanban{
background-color: transparent !important;
}
2025-02-08 11:58:56 +01:00
div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
2025-02-20 10:21:52 +01:00
background-color: var(--color-92) !important;
color: var(--color-40) !important;
2025-02-08 11:58:56 +01:00
}
section.kanban h1, section.kanban h2{
color: var(--color-40) !important;
2025-02-08 11:58:56 +01:00
}
2025-02-20 17:07:39 +01:00
.home-project {
background: var(--color-88);
border-color: var(--color-60);
color: var(--color-12);
}
.home-wrapper .title-bar {
background: var(--color-75);
}