[pve-devel] [PATCH 1/3] Revert "dark-theme: let the background "shine through" mask more"

[pve-devel] [PATCH 1/3] Revert "dark-theme: let the background "shine through" mask more"

[Wolfgang Bumiller]

This looks horrible.

A *much* *much* better way to improve readability is to
simply set the opacity down to 0.5.

This reverts commit 2c837f5766b48629a835c62d4b7af6c3ae4dc1c0.
---
I can't stand this.
Seriously.

 src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 5fd35a9..2503368 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -1,8 +1,8 @@
 // The mask that is applied when the window is unaccessible (Login
 // screen, Loading, ...)
 .x-mask {
-  background-color: $background-darker;
-  opacity: 0.75;
+  background-color: black;
+  opacity: 0.85;
 }
 
 // Shadows of floating windows like window modals, form selectors and
@@ -10,5 +10,5 @@
 .x-css-shadow {
   // the additional styling from the pve css overwrites the setting on
   // the element with "!important", that's why we need it here.
-  box-shadow: $background-dark 0 -1px 15px 7px !important;
+  box-shadow: $background-darkest 0 0 5px !important;
 }
-- 
2.30.2

[pve-devel] [PATCH 2/3] dark-mode: reduce background mask opacity to 0.5

[Wolfgang Bumiller]

Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_presentation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 2503368..236dbe9 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -2,7 +2,7 @@
 // screen, Loading, ...)
 .x-mask {
   background-color: black;
-  opacity: 0.85;
+  opacity: 0.5;
 }
 
 // Shadows of floating windows like window modals, form selectors and
-- 
2.30.2

[pve-devel] [PATCH 3/3] dark-mode: make shadow black

[Wolfgang Bumiller]

Better have a barely visible shadow than a backlight.

Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
---
 src/proxmox-dark/scss/extjs/_presentation.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/proxmox-dark/scss/extjs/_presentation.scss b/src/proxmox-dark/scss/extjs/_presentation.scss
index 236dbe9..6e463da 100644
--- a/src/proxmox-dark/scss/extjs/_presentation.scss
+++ b/src/proxmox-dark/scss/extjs/_presentation.scss
@@ -10,5 +10,5 @@
 .x-css-shadow {
   // the additional styling from the pve css overwrites the setting on
   // the element with "!important", that's why we need it here.
-  box-shadow: $background-darkest 0 0 5px !important;
+  box-shadow: black 0 0 10px !important;
 }
-- 
2.30.2

[pve-devel] applied: [PATCH 1/3] Revert "dark-theme: let the background "shine through" mask more"

[Thomas Lamprecht]

Am 21/03/2023 um 11:04 schrieb Wolfgang Bumiller:
> This looks horrible.
> 
> A *much* *much* better way to improve readability is to
> simply set the opacity down to 0.5.
> 
> This reverts commit 2c837f5766b48629a835c62d4b7af6c3ae4dc1c0.
> ---
> I can't stand this.
> Seriously.
> 
>  src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
>  1 file changed, 3 insertions(+), 3 deletions(-)
> 
>

applied all three patches, they actually fulfil my request to be able to still
read the stuff in the bg even a bit better and look fine enough otherwise, thanks!

FWIW, just from a aesthetic POV the best way to make modal windows stand out would
be to blur the background, i.e.:

.x-mask {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}

(backdrop-filter + opacity doesn't work, so one needs to use rgba instead)

But I prefer usability/accessibility over aesthetics here.

Re: [pve-devel] applied: [PATCH 1/3] Revert "dark-theme: let the background "shine through" mask more"

[Stefan Sterz]

On 3/21/23 14:05, Thomas Lamprecht wrote:
> Am 21/03/2023 um 11:04 schrieb Wolfgang Bumiller:
>> This looks horrible.
>>
>> A *much* *much* better way to improve readability is to
>> simply set the opacity down to 0.5.
>>
>> This reverts commit 2c837f5766b48629a835c62d4b7af6c3ae4dc1c0.
>> ---
>> I can't stand this.
>> Seriously.
>>
>>  src/proxmox-dark/scss/extjs/_presentation.scss | 6 +++---
>>  1 file changed, 3 insertions(+), 3 deletions(-)
>>
>>
> 
> applied all three patches, they actually fulfil my request to be able to still
> read the stuff in the bg even a bit better and look fine enough otherwise, thanks!
> 
> FWIW, just from a aesthetic POV the best way to make modal windows stand out would
> be to blur the background, i.e.:
> 
> .x-mask {
>     background-color: rgba(0,0,0,0.5);
>     backdrop-filter: blur(2px);
> }
> 
> (backdrop-filter + opacity doesn't work, so one needs to use rgba instead)
> 
> But I prefer usability/accessibility over aesthetics here.
> 

well rgba values sadly don't work properly with sassc. so that will
become a solid black background.

also as discussed off-list, setting the background of the mask to black
looks awkward/less consistent with crisp in several situation (e.g., the
retention tab of a zfs storage or the quarantine mail preview panel).

however @Wolfgang and i agreed on the following:

.x-mask {
  background-color: $background-darker;
  opacity: 0.5;
}

.x-css-shadow {
  box-shadow: black 0 -1px 15px 5px !important;
}

that should hopefully fullfill all three requirements (see-through,
contrast to background, not looking strange in the given situations).

> 
> _______________________________________________
> pve-devel mailing list
> pve-devel@lists.proxmox.com
> https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
> 
>