diff --git a/group_vars/all/13_theming.yml b/group_vars/all/13_theming.yml index 38f2de7c..06836bd6 100644 --- a/group_vars/all/13_theming.yml +++ b/group_vars/all/13_theming.yml @@ -6,15 +6,15 @@ global_theming: base: "#001f3f" # Sucess Color - success: "#B2D3B2" + success: "#B2D3B2" # As the warning color – a light brown (earth) - warning: "#D2B48C" + warning: "#D2B48C" # For error messages (standard red) - error: "#DC3545" + error: "#DC3545" # As the info color – a very light blue (symbolizing the sky) - info: "#F0F8FF" + info: "#F0F8FF" filters: - saturation_change: 50 + saturation_change: 0 hue_shift: 0 # Global Theming is default enabled for all roles diff --git a/roles/nginx-global-css/templates/global.css.j2 b/roles/nginx-global-css/templates/global.css.j2 index e66bc2eb..377d84bf 100644 --- a/roles/nginx-global-css/templates/global.css.j2 +++ b/roles/nginx-global-css/templates/global.css.j2 @@ -196,92 +196,6 @@ HINT: --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); @@ -337,23 +251,6 @@ HINT: --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); @@ -533,8 +430,33 @@ HINT: } /** Mastodon Overrides **/ -:root{ - --surface-variant-background-color: var(--color-80); +div#mastodon, div#admin-wrapper { + /* Dropdown */ + --dropdown-border-color: var(--color-35); + --dropdown-background-color: rgba(var(--color-rgb-03), 0.9); + --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25), + 0 8px 10px -6px rgba(var(--color-rgb-01), 0.25); + + /* Modal */ + --modal-background-color: rgba(var(--color-rgb-03), 0.7); + --modal-background-variant-color: rgba(var(--color-rgb-05), 0.7); + --modal-border-color: var(--color-35); + + /* Background */ + --background-border-color: var(--color-82); + --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); + --background-color: var(--color-93); + --background-color-tint: rgba(var(--color-rgb-03), 0.9); + + /* Surface */ + --surface-background-color: var(--color-90); + --surface-variant-background-color: var(--color-89); + --surface-variant-active-background-color: var(--color-35); + --on-surface-color: rgba(var(--color-rgb-05), 0.5); + + /* Media & Overlay */ + --media-outline-color: rgba(var(--color-rgb-99), 0.15); + --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25)); } /* Modal Overwrittes */ @@ -719,11 +641,6 @@ h1, h2, h3, h4, h5, h6, p{ 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; @@ -741,16 +658,6 @@ div#app header, div#app header *{ 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; @@ -765,6 +672,38 @@ html.ng-csp div#postsetupchecks ul.info{ background-color: transparent !important; } +div#mastodon .column-link{ + color: var(--color-55); +} + +div#mastodon .column-back-button { + color: var(--color-58); +} + +div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable { + background-color: var(--color-89); + color: var(--color-19); +} + +div#mastodon .status-card__title, div#mastodon .display-name strong{ + color: var(--color-33); +} + +div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{ + color: var(--color-29); +} +div#mastodon .dropdown-button{ + border: 1px solid #8c8dff; +} + +div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{ + background-color: var(--color-71); +} + +.compose-form__actions .icon-button { + color: var(--color-28); +} + /** OpenProject **/ header.op-app-header{ background-color: var(--color-40) !important;