From 4588959b762952fd1890cfab4006be6acb1bcba1 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 1 Jul 2024 09:45:33 +0200 Subject: [PATCH 1/2] chore: update server color scheme (from stable29) Signed-off-by: Maksim Sukharev --- src/shared/assets/default/default.css | 29 +++++++++++++++------------ 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/shared/assets/default/default.css b/src/shared/assets/default/default.css index daf91f84..93da4a4f 100644 --- a/src/shared/assets/default/default.css +++ b/src/shared/assets/default/default.css @@ -26,29 +26,30 @@ /** @deprecated use `--color-text-maxcontrast` instead */ --color-text-lighter: var(--color-text-maxcontrast); --color-scrollbar: rgba(34,34,34, .15); - --color-error: #d91812; - --color-error-rgb: 217,24,18; - --color-error-hover: #dd342f; - --color-error-text: #c61610; - --color-warning: #c28900; - --color-warning-rgb: 194,137,0; - --color-warning-hover: #cea032; - --color-warning-text: #8f6500; + --color-error: #DB0606; + --color-error-rgb: 219,6,6; + --color-error-hover: #df2525; + --color-error-text: #c20505; + --color-warning: #A37200; + --color-warning-rgb: 163,114,0; + --color-warning-hover: #8a6000; + --color-warning-text: #7f5900; --color-success: #2d7b41; --color-success-rgb: 45,123,65; - --color-success-hover: #448955; + --color-success-hover: #428854; --color-success-text: #286c39; --color-info: #0071ad; --color-info-rgb: 0,113,173; --color-info-hover: #197fb5; --color-info-text: #006499; + --color-favorite: #A37200; --color-loading-light: #cccccc; --color-loading-dark: #444444; --color-box-shadow-rgb: 77,77,77; --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5); --color-border: #ededed; --color-border-dark: #dbdbdb; - --color-border-maxcontrast: #949494; + --color-border-maxcontrast: #7d7d7d; --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --default-font-size: 15px; --animation-quick: 100ms; @@ -72,7 +73,9 @@ --background-invert-if-dark: no; --background-invert-if-bright: invert(100%); --background-image-invert-if-bright: no; + --background-image-color-text: #ffffff; --primary-invert-if-bright: no; + --primary-invert-if-dark: invert(100%); --color-primary: #00679e; --color-primary-default: #0082c9; --color-primary-text: #ffffff; @@ -81,13 +84,13 @@ --color-primary-light-text: #00293f; --color-primary-light-hover: #dbe4ea; --color-primary-element: #00679e; - --color-primary-element-hover: #1674a6; + --color-primary-element-hover: #005a8a; --color-primary-element-text: #ffffff; - --color-primary-element-text-dark: #f0f0f0; + --color-primary-element-text-dark: #f5f5f5; --color-primary-element-light: #e5eff5; --color-primary-element-light-hover: #dbe4ea; --color-primary-element-light-text: #00293f; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --image-background-default: url('./img/background/kamil-porembinski-clouds.jpg'); - --color-background-plain: #0082c9; + --color-background-plain: #00679e; } From 497dcd441f119cc20467979d43b90bf4f21853d3 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 1 Jul 2024 10:27:45 +0200 Subject: [PATCH 2/2] 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">