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

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

[Stefan Sterz]

this series fixes some more icons (e.g., the maintenance mode icon in
pbs), sets appropriates styles for tabs in focus and focus-over
states, fixes focused states for grid elements and improves contrats
for the apt group headers.

Stefan Sterz (4):
  dark-mode: fix focus and focus-over states for tabs
  dark-mode: fix the focused state for background image grid icons
  dark-mode: style the icon for the maintenance mode in pbs
  dark-mode: improve apt repo group header contrast ratios

 src/proxmox-dark/scss/extjs/_tabbar.scss      |  2 ++
 src/proxmox-dark/scss/other/_icons.scss       | 30 +++++++++++++++----
 .../scss/proxmox/_loadingindicator.scss       |  8 +++++
 src/proxmox-dark/scss/proxmox/_nodes.scss     |  4 +--
 4 files changed, 36 insertions(+), 8 deletions(-)

-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 1/4] dark-mode: fix focus and focus-over states for tabs

[Stefan Sterz]

previously the focus and focus-over states weren't styled so the crisp
styling was used, which made them appear too brightly.

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

diff --git a/src/proxmox-dark/scss/extjs/_tabbar.scss b/src/proxmox-dark/scss/extjs/_tabbar.scss
index e1b5f66..6fe945e 100644
--- a/src/proxmox-dark/scss/extjs/_tabbar.scss
+++ b/src/proxmox-dark/scss/extjs/_tabbar.scss
@@ -26,6 +26,8 @@
     color: $text-color;
   }
 
+  .x-keyboard-mode &.x-tab-focus,
+  .x-keyboard-mode &.x-tab-focus.x-tab-over,
   .x-keyboard-mode &.x-tab-focus.x-tab-active {
     background-color: $primary-color;
     border-color: $primary-color;
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 2/4] dark-mode: fix the focused state for background image grid icons

[Stefan Sterz]

some icons in grids are background images for the whole grid element.
so we need to filter the entire element, which also means that any
background or inner border color would get filtered too. this inverts
the focused border on inner elements and the focused background so
that it looks correct when inverted again.

Signed-off-by: Stefan Sterz <s.sterz@proxmox.com>
---
 src/proxmox-dark/scss/other/_icons.scss          | 16 ++++++++++------
 .../scss/proxmox/_loadingindicator.scss          |  8 ++++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/proxmox-dark/scss/other/_icons.scss b/src/proxmox-dark/scss/other/_icons.scss
index 691ea75..df81969 100644
--- a/src/proxmox-dark/scss/other/_icons.scss
+++ b/src/proxmox-dark/scss/other/_icons.scss
@@ -90,12 +90,16 @@
     color: black;
   }
 
-  .x-grid-cell-inner::before {
-    // this is a somewhat hacky work-around for the focus borders on
-    // these elements. since we use the invert filter to fix the icon
-    // color we need to also invert the border color first too, not
-    // just the text. add "!important" to properly override.
-    border-color: invert($primary-color, $weight: 90%) !important;
+  // this is a somewhat hacky work-around for the focus borders and
+  // background on these elements. since we use the invert filter to
+  // fix the icon color we need to also invert the border color first
+  // too, not just the text.
+  .x-keyboard-mode &.x-grid-item-focused {
+    background-color: invert($selection-background-color, $weight: 90%);
+
+    .x-grid-cell-inner::before {
+      border-color: invert($primary-color, $weight: 90%);
+    }
   }
 }
 
diff --git a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
index 3b58917..69fd962 100644
--- a/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
+++ b/src/proxmox-dark/scss/proxmox/_loadingindicator.scss
@@ -8,6 +8,14 @@
   color: black;
 }
 
+.x-keyboard-mode .x-grid-item-focused.x-grid-row-loading {
+  background-color: invert($selection-background-color, $weight: 90%);
+
+  .x-grid-cell-inner::before {
+    border-color: invert($primary-color, $weight: 90%) !important;
+  }
+}
+
 .x-mask-msg {
   background-color: $form-field-body-color;
   border: solid 1px $border-color-alt;
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 3/4] dark-mode: style the icon for the maintenance mode in pbs

[Stefan Sterz]

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

diff --git a/src/proxmox-dark/scss/other/_icons.scss b/src/proxmox-dark/scss/other/_icons.scss
index df81969..d4dc316 100644
--- a/src/proxmox-dark/scss/other/_icons.scss
+++ b/src/proxmox-dark/scss/other/_icons.scss
@@ -156,6 +156,20 @@
   }
 }
 
+.pmx-tree-icon-custom {
+  &::after {
+    text-shadow: -1px 0 1px $background-darker;
+  }
+
+  &.maintenance::before {
+    color: $icon-color-alt;
+  }
+
+  &.maintenance::after {
+    color: $icon-color;
+  }
+}
+
 // icons for templates in the storages view
 .x-treelist-item-icon {
   &.lxc::after,
-- 
2.30.2

[pve-devel] [PATCH widget-toolkit 4/4] dark-mode: improve apt repo group header contrast ratios

[Stefan Sterz]

make the group headers darker, so that they have some contrast with
the surrounding rows. also add back the border at the bottom. both
changes improve the legibility of the table.

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

diff --git a/src/proxmox-dark/scss/proxmox/_nodes.scss b/src/proxmox-dark/scss/proxmox/_nodes.scss
index 02b15f9..84f9127 100644
--- a/src/proxmox-dark/scss/proxmox/_nodes.scss
+++ b/src/proxmox-dark/scss/proxmox/_nodes.scss
@@ -1,7 +1,7 @@
 // Table headers under Node > "Updates" > "Repositories"
 .proxmox-apt-repos .x-grid-group-hd {
-  background-color: $background-darker;
-  border-bottom-width: 0;
+  background-color: $background-darkest;
+  border-color: $border-color-alt;
 }
 
 .proxmox-apt-repos .x-grid-group-title {
-- 
2.30.2

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

[Thomas Lamprecht]

Am 05/04/2023 um 10:08 schrieb Stefan Sterz:
> this series fixes some more icons (e.g., the maintenance mode icon in
> pbs), sets appropriates styles for tabs in focus and focus-over
> states, fixes focused states for grid elements and improves contrats
> for the apt group headers.
> 
> Stefan Sterz (4):
>   dark-mode: fix focus and focus-over states for tabs
>   dark-mode: fix the focused state for background image grid icons
>   dark-mode: style the icon for the maintenance mode in pbs
>   dark-mode: improve apt repo group header contrast ratios
> 
>  src/proxmox-dark/scss/extjs/_tabbar.scss      |  2 ++
>  src/proxmox-dark/scss/other/_icons.scss       | 30 +++++++++++++++----
>  .../scss/proxmox/_loadingindicator.scss       |  8 +++++
>  src/proxmox-dark/scss/proxmox/_nodes.scss     |  4 +--
>  4 files changed, 36 insertions(+), 8 deletions(-)
> 


applied, thanks!