public inbox for pve-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Stefan Sterz <s.sterz@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH widget-toolkit 4/5] dark-mode: improve contrast ratios on the mask message
Date: Thu, 23 Mar 2023 16:26:55 +0100	[thread overview]
Message-ID: <20230323152656.1399307-5-s.sterz@proxmox.com> (raw)
In-Reply-To: <20230323152656.1399307-1-s.sterz@proxmox.com>

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@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





  parent reply	other threads:[~2023-03-23 15:27 UTC|newest]

Thread overview: 7+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-03-23 15:26 [pve-devel] [PATCH widget-toolkit 0/5] Proxmox Dark Theme Fixups - Round 4 Stefan Sterz
2023-03-23 15:26 ` [pve-devel] [PATCH widget-toolkit 1/5] dark-mode: improve contrast on split buttons Stefan Sterz
2023-03-23 15:26 ` [pve-devel] [PATCH widget-toolkit 2/5] dark-mode: color the custom grid and tree icons Stefan Sterz
2023-03-23 15:26 ` [pve-devel] [PATCH widget-toolkit 3/5] dark-mode: set boundlist background Stefan Sterz
2023-03-23 15:26 ` Stefan Sterz [this message]
2023-03-23 15:26 ` [pve-devel] [PATCH widget-toolkit 5/5] fix #4610: add a small white padding to the totp qr code Stefan Sterz
2023-03-23 16:14 ` [pve-devel] applied-series: [PATCH widget-toolkit 0/5] Proxmox Dark Theme Fixups - Round 4 Thomas Lamprecht

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20230323152656.1399307-5-s.sterz@proxmox.com \
    --to=s.sterz@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal