[pve-devel] [PATCH widget-toolkit 0/5] Proxmox Dark Theme Fixups - Round 4

[pve-devel] [PATCH widget-toolkit 0/5] Proxmox Dark Theme Fixups - Round 4

[Stefan Sterz]

this round of fixups improves the contrast ratios on several icons and
the mask message. it also fixes the background of boundlists which
appeared to brightly in certain contexts and fixes #4610. #4610 is
fixed by adding a white padding to the totp qr code so most
(hopefully, all) qr code scanners can scan it again.

Stefan Sterz (5):
  dark-mode: improve contrast on split buttons
  dark-mode: color the custom grid and tree icons
  dark-mode: set boundlist background
  dark-mode: improve contrast ratios on the mask message
  fix #4610: add a small white padding to the totp qr code

 src/proxmox-dark/scss/extjs/_presentation.scss       |  3 +--
 src/proxmox-dark/scss/extjs/form/_button.scss        | 12 ++++++------
 src/proxmox-dark/scss/extjs/form/_combobox.scss      |  1 +
 src/proxmox-dark/scss/other/_icons.scss              |  2 ++
 src/proxmox-dark/scss/proxmox/_loadingindicator.scss |  2 +-
 src/window/AddTotp.js                                |  4 ++--
 6 files changed, 13 insertions(+), 11 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/5] dark-mode: improve contrast on split buttons

[Stefan Sterz]

this improves the contrast of the little triangle in split buttons,
making it stand out more especially when focused.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/form/_button.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/proxmox-dark/scss/extjs/form/_button.scss b/src/proxmox-dark/scss/extjs/form/_button.scss
index bf02135..e48eccc 100644
--- a/src/proxmox-dark/scss/extjs/form/_button.scss
+++ b/src/proxmox-dark/scss/extjs/form/_button.scss
@@ -32,16 +32,16 @@
     color: $neutral-button-icon-color;
   }
 
+  // the little arrow in certain toolbar buttons with dropdowns
+  .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after,
+  .x-btn-wrap-default-toolbar-small.x-btn-split-right::after {
+    filter: brightness(150%);
+  }
+
   &.x-btn-over,
   .x-keyboard-mode &.x-btn-focus {
     background-color: $neutral-button-color-alt;
     border-color: $neutral-button-color-alt;
-
-    // the little arrow in certain toolbar buttons with dropdowns
-    .x-btn-wrap-default-toolbar-small.x-btn-arrow-right::after,
-    .x-btn-wrap-default-toolbar-small.x-btn-split-right::after {
-      filter: invert($icon-brightness);
-    }
   }
 
   &.x-btn.x-btn-disabled {
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/5] dark-mode: color the custom grid and tree icons

[Stefan Sterz]

this wasn't noticed before because usually vms would either be running
or stopped/offline/unknown etc. and there the colors are set
separately. however, in e.g., the backup view's missing backups
window these weren't colored properly. so this commit sets a default
color.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/other/_icons.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/proxmox-dark/scss/other/_icons.scss b/src/proxmox-dark/scss/other/_icons.scss
index 164cd35..9aef511 100644
--- a/src/proxmox-dark/scss/other/_icons.scss
+++ b/src/proxmox-dark/scss/other/_icons.scss
@@ -117,6 +117,8 @@
 
 .x-tree-icon-custom,
 .x-grid-icon-custom {
+  color: $icon-color;
+
   &::after {
     color: $icon-color;
     text-shadow: -1px 0 1px $background-darker;
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 3/5] dark-mode: set boundlist background

[Stefan Sterz]

this is only visible when no boundlist items are present, which only
occurs when loading elements for the boundlist (e.g., when adding a
nfs storage)

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/extjs/form/_combobox.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/proxmox-dark/scss/extjs/form/_combobox.scss b/src/proxmox-dark/scss/extjs/form/_combobox.scss
index a6405a1..d6119db 100644
--- a/src/proxmox-dark/scss/extjs/form/_combobox.scss
+++ b/src/proxmox-dark/scss/extjs/form/_combobox.scss
@@ -4,6 +4,7 @@
 }
 
 .x-boundlist {
+  background-color: $form-field-body-color;
   border-color: $form-field-body-color;
 }
 
-- 
2.30.2

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

[Stefan Sterz]

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

[pve-devel] [PATCH widget-toolkit 5/5] fix #4610: add a small white padding to the totp qr code

[Stefan Sterz]

some qr code readers need a white "quiet zone" around the main qr
code. otherwise, they won't be able to scan it at all which made it
impossible to scan the totp qr code on certain devices.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/window/AddTotp.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/window/AddTotp.js b/src/window/AddTotp.js
index 080b361..53fdaad 100644
--- a/src/window/AddTotp.js
+++ b/src/window/AddTotp.js
@@ -224,11 +224,11 @@ Ext.define('Proxmox.window.AddTotp', {
 			visible: '{!secretEmpty}',
 		    },
 		    style: {
-			'margin-left': 'auto',
-			'margin-right': 'auto',
+			margin: '5px auto',
 			padding: '5px',
 			width: '266px',
 			height: '266px',
+			'background-color': 'white',
 		    },
 		},
 		{
-- 
2.30.2

[pve-devel] applied-series: [PATCH widget-toolkit 0/5] Proxmox Dark Theme Fixups - Round 4

[Thomas Lamprecht]

Am 23/03/2023 um 16:26 schrieb Stefan Sterz:
> this round of fixups improves the contrast ratios on several icons and
> the mask message. it also fixes the background of boundlists which
> appeared to brightly in certain contexts and fixes #4610. #4610 is
> fixed by adding a white padding to the totp qr code so most
> (hopefully, all) qr code scanners can scan it again.
> 
> Stefan Sterz (5):
>   dark-mode: improve contrast on split buttons
>   dark-mode: color the custom grid and tree icons
>   dark-mode: set boundlist background
>   dark-mode: improve contrast ratios on the mask message
>   fix #4610: add a small white padding to the totp qr code
> 
>  src/proxmox-dark/scss/extjs/_presentation.scss       |  3 +--
>  src/proxmox-dark/scss/extjs/form/_button.scss        | 12 ++++++------
>  src/proxmox-dark/scss/extjs/form/_combobox.scss      |  1 +
>  src/proxmox-dark/scss/other/_icons.scss              |  2 ++
>  src/proxmox-dark/scss/proxmox/_loadingindicator.scss |  2 +-
>  src/window/AddTotp.js                                |  4 ++--
>  6 files changed, 13 insertions(+), 11 deletions(-)
> 


applied series, thanks!