[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 at 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