From 497dcd441f119cc20467979d43b90bf4f21853d3 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 1 Jul 2024 10:27:45 +0200 Subject: [PATCH] fix: apply contrast color to header elements Signed-off-by: Maksim Sukharev --- src/talk/renderer/DesktopHeader.vue | 2 +- src/talk/renderer/assets/styles.css | 9 +++++++++ src/talk/renderer/components/MainMenu.vue | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/talk/renderer/DesktopHeader.vue b/src/talk/renderer/DesktopHeader.vue index 8e4e027c..3f86145e 100644 --- a/src/talk/renderer/DesktopHeader.vue +++ b/src/talk/renderer/DesktopHeader.vue @@ -83,7 +83,7 @@ export default { height: 50px; box-sizing: border-box; margin-bottom: -50px; - color: #FFF; + color: var(--color-header-contrast); user-select: none; } diff --git a/src/talk/renderer/assets/styles.css b/src/talk/renderer/assets/styles.css index 61a3059e..646ee6fa 100644 --- a/src/talk/renderer/assets/styles.css +++ b/src/talk/renderer/assets/styles.css @@ -15,3 +15,12 @@ :focus-visible { outline-color: var(--color-main-text); } + +#header { + /* + Adjusting of text and icons appearing on Nextcloud header to contrast with. + Nextcloud (28-29) server has a workaround with '--background-image-color-text' variable. + Starting from Nextcloud 30 server has '--color-background-plain-text' variable. + */ + --color-header-contrast: var(--color-background-plain-text, var(--background-image-color-text, #ffffff)) +} diff --git a/src/talk/renderer/components/MainMenu.vue b/src/talk/renderer/components/MainMenu.vue index d5c6882b..89be4e4f 100644 --- a/src/talk/renderer/components/MainMenu.vue +++ b/src/talk/renderer/components/MainMenu.vue @@ -32,7 +32,7 @@ const reload = () => window.location.reload() type="tertiary-no-background" container="body">