[pve-devel] [PATCH widget-toolkit 4/5] dark-mode: improve contrast ratios on the mask message

Stefan Sterz s.sterz at proxmox.com
Thu Mar 23 16:26:55 CET 2023


this removes the transparent background of the masks message box. this
should help improve the contrast between the background and text.
also sets an appropriate border color to make it stand out more.

Signed-off-by: Stefan Sterz <s.sterz at proxmox.com>
---
interestingly, sassc removes the alpha value from something like
`rgba(38, 38, 38, 0.5)` but keeps it in this case. so
`rgba($background-darker, 0.5)` works, but `rgba(38, 38, 38, 0.5)`
does not.

 src/proxmox-dark/scss/extjs/_presentation.scss       | 3 +--
 src/proxmox-dark/scss/proxmox/_loadingindicator.scss | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 6be322a..6bf1ab5 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -1,8 +1,7 @@
 // The mask that is applied when the window is unaccessible (Login
 // screen, Loading, ...)
 .x-mask {
-  background-color: $background-darker;
-  opacity: 0.5;
+  background-color: rgba($background-darker, 0.5);
 }
 
 // Shadows of floating windows like window modals, form selectors and
diff --git a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
index 5c320b3..3b58917 100644
--- a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
+++ b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
@@ -10,5 +10,5 @@
 
 .x-mask-msg {
   background-color: $form-field-body-color;
-  border: solid 1px mix(black, $form-field-body-color, 25%);
+  border: solid 1px $border-color-alt;
 }
-- 
2.30.2






More information about the pve-devel mailing list