From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id F19B391E3F for ; Wed, 5 Apr 2023 10:08:11 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id DA93624627 for ; Wed, 5 Apr 2023 10:08:11 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Wed, 5 Apr 2023 10:08:10 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 5728845B91 for ; Wed, 5 Apr 2023 10:08:10 +0200 (CEST) From: Stefan Sterz To: pve-devel@lists.proxmox.com Date: Wed, 5 Apr 2023 10:08:03 +0200 Message-Id: <20230405080805.525170-3-s.sterz@proxmox.com> X-Mailer: git-send-email 2.30.2 In-Reply-To: <20230405080805.525170-1-s.sterz@proxmox.com> References: <20230405080805.525170-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -0.105 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH widget-toolkit 2/4] dark-mode: fix the focused state for background image grid icons X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Wed, 05 Apr 2023 08:08:12 -0000 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 --- 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