css: correctly mask disabled elements inside headers

The mask ExtJS uses to add a disabled look is using the general
default background color of panels as base color, i.e. white for light
mode and almost black for the dark mode.

But as the top header of windows uses a darker variant, having a mask
applied on some icons that is rendered directly in the header, without
any (button) element that provides its own background color, will make
that element show off.

This mostly happens for Tools, which we do not have many besides the
"Close" on, which is almost never disabled.

This was noticed when trying out to move the reset button inside the
window header tool bar, when that was disabled (e.g., form was not
dirty) it stuck out quite a bit in an odd way.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

src/css/ext6-pmx.css

@@ -66,6 +66,9 @@
 .x-mask-msg-text {
     text-align: center;
 }
+.x-window-header-default-top .x-mask {
+    background-color: #f5f5f5B4; /* ~ 0.7 opacity */
+}
 
 .proxmox-disabled-row, .proxmox-disabled-row td {
     /*color: #a0a0a0;*/

src/proxmox-dark/scss/extjs/_window.scss

@@ -12,6 +12,12 @@
   // make the color transparent so the border doesn't appear visibly,
   // like in crisp, but keep to keep the layout intact
   border-color: transparent;
+
+  // relevant for (disabled) elements that are rendered directly on the header bar like tools
+  // As otherwise, a too light mask is used, which then makes the element stand out in an odd way
+  .x-mask {
+    background-color: rgba($background-darker, 0.7);
+  }
 }
 
 .x-window-header-title-default {