From b1df1f0efb6e0a290cd7376244f01fbbee2ead72 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Sat, 20 Apr 2024 14:51:45 +0200
Subject: [PATCH] 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                     | 3 +++
 src/proxmox-dark/scss/extjs/_window.scss | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 64b815f..9ff596b 100644
--- a/src/css/ext6-pmx.css
+++ b/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;*/
diff --git a/src/proxmox-dark/scss/extjs/_window.scss b/src/proxmox-dark/scss/extjs/_window.scss
index 0fe188d..82b0ded 100644
--- a/src/proxmox-dark/scss/extjs/_window.scss
+++ b/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 {