fix(core): Make sure correct colors are used on blurred background

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
index 21c6088f36faced2535d994707af0b6ab25ab117..33a2e90cc5019a9e8de1def5c7858650aa3a3884 100644 (file)
--- a/apps/dashboard/src/DashboardApp.vue
+++ b/apps/dashboard/src/DashboardApp.vue
@@ -485,6 +485,9 @@ export default {
 }
 
 .panel, .panels > div {
+       // Ensure the maxcontrast color is set for the background
+       --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
        width: 320px;
        max-width: 100%;
        margin: 16px;
@@ -591,6 +594,9 @@ export default {
 .edit-panels,
 .statuses ::v-deep .action-item .action-item__menutoggle,
 .statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+       // Ensure the maxcontrast color is set for the background
+       --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
        background-color: var(--color-main-background-blur);
        -webkit-backdrop-filter: var(--filter-background-blur);
        backdrop-filter: var(--filter-background-blur);

diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue
index 77a8b6c3bc9d3e89eaac141d19b23efbca07c3b7..2ec5e05acd4287750791bfad0fc0184ab0cb6d42 100644 (file)
--- a/apps/user_status/src/UserStatus.vue
+++ b/apps/user_status/src/UserStatus.vue
@@ -176,6 +176,9 @@ export default {
 
 <style lang="scss" scoped>
 .user-status-menu-item {
+       // Ensure the maxcontrast color is set for the background
+       --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
        width: auto;
        min-width: 44px;
        height: 44px;

diff --git a/core/css/apps.scss b/core/css/apps.scss
index f688ab05139552dcc65ab4fa22d1b1236e8682cb..f047e7dae43e78666b77acb1cb20e062cc61c181 100644 (file)
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -121,6 +121,8 @@ kbd {
 #app-navigation:not(.vue) {
        // We use fixed variable for the pill style as we have larger containers around nested list entries
        --border-radius-pill: calc(var(--default-clickable-area) / 2);
+       // Ensure the maxcontrast color is set for the background
+       --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
 
        width: variables.$navigation-width;
        z-index: 500;

diff --git a/core/css/guest.scss b/core/css/guest.scss
index de13bfd6fdab5e3bf48f9677ba73e4dfc933b5c9..7669ff01588e05a80208abe42bbcb525327db43d 100644 (file)
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -803,6 +803,9 @@ a.legal {
 }
 
 .guest-box, .body-login-container {
+       // Ensure the maxcontrast color is set for the background
+       --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
+
        color: var(--color-main-text);
        background-color: var(--color-main-background-blur);
        padding: $guest-container-padding;