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

666 lines
28 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.
*/
: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) }};
{% 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) }};
{% 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-blend-mode: multiply;
--native-dark-bg-color: var(--color-10); /* was #292929 */
--native-dark-bg-image-color: rgba(0, 0, 0, 0.10); /* remains the same, or adjust if needed */
--native-dark-bg-image-filter: brightness(50%) contrast(200%);
--native-dark-border-color: var(--color-40); /* was #555555 */
--native-dark-box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
--native-dark-brightness: 0.85;
--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-opacity: 0.85;
--native-dark-text-shadow: none;
--native-dark-transparent-color: transparent;
--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 {
--scheme-type: light;
/* 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 */
/* RGB values remain unchanged */
--always-black-rgb: 0, 0, 0;
--primary-rgb: 32, 50, 67;
--primary-low-rgb: 227, 235, 242;
--primary-very-low-rgb: 247, 249, 251;
--secondary-rgb: 238, 244, 247;
--header_background-rgb: 134, 189, 219;
--tertiary-rgb: 65, 99, 118;
--highlight-rgb: 134, 189, 219;
--success-rgb: 112, 219, 130;
/* 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: var(--color-75); /* rgb(128, 180, 209) */
--header_primary-low-mid: var(--color-70); /* rgb(110, 155, 181) */
--header_primary-medium: var(--color-60); /* rgb(93, 132, 155) */
--header_primary-high: var(--color-50); /* rgb(78, 112, 132) */
--header_primary-very-high: var(--color-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: var(--color-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);
}
/** Mastodon Overrides **/
:root{
--surface-variant-background-color: var(--color-80);
}
/** Nextcloud Specific**/
:root{
--color-main-background: None;
--color-main-background-rgb: None;
--color-primary-element: var(--color-80);
--color-main-text: var(--color-40);
--color-background-hover: var(--color-65);
/** Calendar **/
--color-background-dark: var(--info-color); /** 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) !important;
background-image: none !important;
color: var(--color-40) !important;
/* Use the corporate-design font family */
font-family: "Liberation Sans", Arial, sans-serif;
}
/* Links (Color Only) */
a {
color: var(--color-50) !important;
}
/* 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) !important;
color: var(--color-50) !important;
border-color: var(--color-80) !important;
cursor: pointer;
}
button:hover, .btn:hover {
filter: brightness(0.9);
}
/* 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;
}
/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
input, textarea, select {
background-color: var(--color-82) !important; /* Instead of var(--color-90) */
color: var(--color-40) !important;
border-color: var(--color-70) !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--color-50) !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;
}
.card-body {
color: var(--color-40) !important;
}
/* 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;
}
/* 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;
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
color: var(--color-10) !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 button.files-list__row-name-link, html.ng-csp button.button-vue{
background-color: transparent !important;
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;
}
html.ng-csp div#header-menu-user-menu{
--color-main-background: var(--color-78) !important;
}
div#content-vue p, div#content-vue span{
color: var(--color-40) !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