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

820 lines
35 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) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
{% endfor %}
/** Special Action Colors **/
--success-color: {{ global_theming.css.colors.success }};
--warning-color: {{ global_theming.css.colors.warning }};
--error-color: {{ global_theming.css.colors.error }};
--info-color: {{ global_theming.css.colors.info }};
}
@media (prefers-color-scheme: dark) {
:root {
/** Dark Mode Derived Colors from the Base Color **/
{% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
--color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
{% endfor %}
/** Special Action Colors **/
--success-color: {{ global_theming.css.colors.success | adjust_color(target_lightness=(1 - 0.2)) }};
--warning-color: {{ global_theming.css.colors.warning | adjust_color(target_lightness=(1 - 0.3)) }};
--error-color: {{ global_theming.css.colors.error | adjust_color(target_lightness=(1 - 0.3)) }};
--info-color: {{ global_theming.css.colors.info | adjust_color(target_lightness=(1 - 0.2)) }};
}
}
: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-danger: var(--error-color);
--bs-warning: var(--warning-color);
--bs-success: var(--success-color);
--bs-info: var(--info-color);
--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 */
}
/* 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 */
/* --- Blue Palette --- */
--pf-v5-global--palette--blue-50: var(--color-98); /* #e7f1fa */
--pf-v5-global--palette--blue-100: var(--color-95); /* #bee1f4 */
--pf-v5-global--palette--blue-200: var(--color-85); /* #73bcf7 */
--pf-v5-global--palette--blue-300: var(--color-75); /* #2b9af3 */
--pf-v5-global--palette--blue-400: var(--color-65); /* #06c */
--pf-v5-global--palette--blue-500: var(--color-40); /* #004080 */
--pf-v5-global--palette--blue-600: var(--color-30); /* #002952 */
--pf-v5-global--palette--blue-700: var(--color-10); /* #001223 */
/* --- Cyan Palette --- */
--pf-v5-global--palette--cyan-50: var(--color-98); /* #f2f9f9 */
--pf-v5-global--palette--cyan-100: var(--color-85); /* #a2d9d9 */
--pf-v5-global--palette--cyan-200: var(--color-75); /* #73c5c5 */
--pf-v5-global--palette--cyan-300: var(--color-65); /* #009596 */
--pf-v5-global--palette--cyan-400: var(--color-40); /* #005f60 */
--pf-v5-global--palette--cyan-500: var(--color-30); /* #003737 */
--pf-v5-global--palette--cyan-600: var(--color-20); /* #002323 */
--pf-v5-global--palette--cyan-700: var(--color-10); /* #000f0f */
/* --- Gold Palette --- */
--pf-v5-global--palette--gold-50: var(--color-98); /* #fdf7e7 */
--pf-v5-global--palette--gold-100: var(--color-90); /* #f9e0a2 */
--pf-v5-global--palette--gold-200: var(--color-80); /* #f6d173 */
--pf-v5-global--palette--gold-300: var(--color-70); /* #f4c145 */
--pf-v5-global--palette--gold-400: var(--color-60); /* #f0ab00 */
--pf-v5-global--palette--gold-500: var(--color-50); /* #c58c00 */
--pf-v5-global--palette--gold-600: var(--color-40); /* #795600 */
--pf-v5-global--palette--gold-700: var(--color-30); /* #3d2c00 */
/* --- Green Palette --- */
--pf-v5-global--palette--green-50: var(--color-98); /* #f3faf2 */
--pf-v5-global--palette--green-100: var(--color-85); /* #bde5b8 */
--pf-v5-global--palette--green-200: var(--color-75); /* #95d58e */
--pf-v5-global--palette--green-300: var(--color-65); /* #6ec664 */
--pf-v5-global--palette--green-400: var(--color-60); /* #5ba352 */
--pf-v5-global--palette--green-500: var(--color-50); /* #3e8635 */
--pf-v5-global--palette--green-600: var(--color-40); /* #1e4f18 */
--pf-v5-global--palette--green-700: var(--color-20); /* #0f280d */
/* --- Light Blue Palette --- */
--pf-v5-global--palette--light-blue-100: var(--color-95); /* #beedf9 */
--pf-v5-global--palette--light-blue-200: var(--color-85); /* #7cdbf3 */
--pf-v5-global--palette--light-blue-300: var(--color-75); /* #35caed */
--pf-v5-global--palette--light-blue-400: var(--color-65); /* #00b9e4 */
--pf-v5-global--palette--light-blue-500: var(--color-50); /* #008bad */
--pf-v5-global--palette--light-blue-600: var(--color-40); /* #005c73 */
--pf-v5-global--palette--light-blue-700: var(--color-20); /* #002d39 */
/* --- Light Green Palette --- */
--pf-v5-global--palette--light-green-100: var(--color-95); /* #e4f5bc */
--pf-v5-global--palette--light-green-200: var(--color-85); /* #c8eb79 */
--pf-v5-global--palette--light-green-300: var(--color-75); /* #ace12e */
--pf-v5-global--palette--light-green-400: var(--color-65); /* #92d400 */
--pf-v5-global--palette--light-green-500: var(--color-50); /* #6ca100 */
--pf-v5-global--palette--light-green-600: var(--color-40); /* #486b00 */
--pf-v5-global--palette--light-green-700: var(--color-20); /* #253600 */
/* --- Orange Palette --- */
--pf-v5-global--palette--orange-50: var(--color-98); /* #fff6ec */
--pf-v5-global--palette--orange-100: var(--color-85); /* #f4b678 */
--pf-v5-global--palette--orange-200: var(--color-75); /* #ef9234 */
--pf-v5-global--palette--orange-300: var(--color-65); /* #ec7a08 */
--pf-v5-global--palette--orange-400: var(--color-50); /* #c46100 */
--pf-v5-global--palette--orange-500: var(--color-40); /* #8f4700 */
--pf-v5-global--palette--orange-600: var(--color-30); /* #773d00 */
--pf-v5-global--palette--orange-700: var(--color-20); /* #3b1f00 */
/* --- Purple Palette --- */
--pf-v5-global--palette--purple-50: var(--color-98); /* #f2f0fc */
--pf-v5-global--palette--purple-100: var(--color-90); /* #cbc1ff */
--pf-v5-global--palette--purple-200: var(--color-80); /* #b2a3ff */
--pf-v5-global--palette--purple-300: var(--color-70); /* #a18fff */
--pf-v5-global--palette--purple-400: var(--color-60); /* #8476d1 */
--pf-v5-global--palette--purple-500: var(--color-50); /* #6753ac */
--pf-v5-global--palette--purple-600: var(--color-40); /* #40199a */
--pf-v5-global--palette--purple-700: var(--color-20); /* #1f0066 */
/* --- Red Palette --- */
--pf-v5-global--palette--red-50: var(--color-98); /* #faeae8 */
--pf-v5-global--palette--red-100: var(--color-70); /* #c9190b */
--pf-v5-global--palette--red-200: var(--color-50); /* #a30000 */
--pf-v5-global--palette--red-300: var(--color-40); /* #7d1007 */
--pf-v5-global--palette--red-400: var(--color-30); /* #470000 */
--pf-v5-global--palette--red-500: var(--color-20); /* #2c0000 */
/* --- 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);
/* --- Success Colors --- */
--pf-v5-global--success-color--100: var(--color-50);
--pf-v5-global--success-color--200: var(--color-40);
/* --- Info Colors --- */
--pf-v5-global--info-color--100: var(--color-75);
--pf-v5-global--info-color--200: var(--color-30);
/* --- Warning Colors --- */
--pf-v5-global--warning-color--100: var(--color-60);
--pf-v5-global--warning-color--200: var(--color-40);
/* --- Danger Colors --- */
--pf-v5-global--danger-color--100: var(--color-70);
--pf-v5-global--danger-color--200: var(--color-50);
--pf-v5-global--danger-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);
}
/* 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);
}
/** Mastodon Overrides **/
:root{
--surface-variant-background-color: var(--color-80);
}
/* 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) */
}
/* Wordpress */
:root {
--wp--preset--color--black: var(--color-05);
--wp--preset--color--contrast: var(--color-22);
--wp--preset--color--contrast-2: var(--color-40);
--wp--preset--color--contrast-3: var(--color-50);
--wp--preset--color--base: var(--color-90);
--wp--preset--color--base-2: var(--color-95);
--wp--preset--color--white: var(--color-99);
}
/* 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;
}
/* Links (Color Only) */
a {
color: var(--color-50);
}
/* 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;
}
/* Bootstrap */
/* States: Success, Warning, Error, Info (Background and Text Colors) */
.success, .alert-success {
background-color: var(--success-color) !important;
color: var(--color-40) !important;
}
.warning, .alert-warning {
background-color: var(--warning-color) !important;
color: var(--color-40) !important;
}
.error, .alert-danger {
background-color: var(--error-color) !important;
color: var(--color-40) !important;
}
.info, .alert-info {
background-color: var(--info-color) !important;
color: var(--color-40) !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;
}
/* Ensure the button itself uses the light text color. Occurred in Mastodon */
button.icon-button {
color: var(--color-99) !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;
}
/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
background-color: var(--color-90) !important;
}
/** Mastodon Specific **/
div#mastodon div.compose-panel div.compose-form__highlightable{
background-color: var(--color-90) !important;
}
div#mastodon strong{
color: var(--color-40) !important;
}
/** Nextcloud specific **/
html.ng-csp header#header{
color: var(--color-90) !important;
background-color: var(--color-80) !important;
}
html.ng-csp div#postsetupchecks ul.warnings{
color: var(--error-color) !important;
}
html.ng-csp div#postsetupchecks ul.info{
background-color: transparent !important;
}
/** 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(--info-color) !important;
color: var(--color-40) !important;
}
section.kanban h1, section.kanban h2{
color: var(--color-40) !important;
}
/* Wordpress */
.has-contrast-background-color{
color: var(--color-90) !important;
}
Reference in New Issue View Git Blame Copy Permalink