From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id E2ADA1FF141 for ; Mon, 30 Mar 2026 15:10:21 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 4F24F30676; Mon, 30 Mar 2026 15:10:48 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [PATCH datacenter-manager v2 2/4] ui: css: use mask for svg icons Date: Mon, 30 Mar 2026 15:07:38 +0200 Message-ID: <20260330131044.693709-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260330131044.693709-1-d.csapak@proxmox.com> References: <20260330131044.693709-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.042 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 Message-ID-Hash: I5B2DH76NRLRA5RXAO6AMBJ5FOCU63ZP X-Message-ID-Hash: I5B2DH76NRLRA5RXAO6AMBJ5FOCU63ZP X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: That way the color can be overwritten instead of relying on the svg color and using invert for dark mode. We already did this (somewhat) for the sdn icons, so do it here too. Aligning of the icons to text isn't always perfect, but that is something we can improve later too. Signed-off-by: Dominik Csapak --- ui/css/pdm.scss | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss index a15b4e8e..a6f25210 100644 --- a/ui/css/pdm.scss +++ b/ui/css/pdm.scss @@ -37,35 +37,38 @@ .fa-cpu::before { content: " "; - background-image: url(./images/icon-cpu.svg); - background-size: 16px 16px; - background-repeat: no-repeat; + mask-image: url(./images/icon-cpu.svg); + mask-size: 16px 16px; + mask-repeat: no-repeat; width: 16px; height: 16px; vertical-align: bottom; display: inline-block; + background-color: var(--pwt-color); } .fa-memory::before { content: " "; - background-image: url(./images/icon-memory.svg); - background-size: 16px 16px; - background-repeat: no-repeat; + mask-image: url(./images/icon-memory.svg); + mask-size: 16px 16px; + mask-repeat: no-repeat; width: 16px; height: 16px; vertical-align: bottom; display: inline-block; + background-color: var(--pwt-color); } .fa-cdrom::before { content: " "; - background-image: url(./images/icon-cd-drive.svg); - background-size: 16px 16px; - background-repeat: no-repeat; + mask-image: url(./images/icon-cd-drive.svg); + mask-size: 16px 16px; + mask-repeat: no-repeat; width: 16px; height: 16px; vertical-align: bottom; display: inline-block; + background-color: var(--pwt-color); } .fa-sdn-vnet::before { @@ -93,6 +96,9 @@ } .pwt-nav-menu .pwt-nav-link.active{ + .fa-cdrom:before, + .fa-memory:before, + .fa-cpu:before, .fa-sdn:before, .fa-sdn-vnet:before { background-color: var(--pwt-accent-color); @@ -100,20 +106,15 @@ } .pwt-panel-header-text{ + .fa-cdrom:before, + .fa-memory:before, + .fa-cpu:before, .fa-sdn:before, .fa-sdn-vnet:before { background-color: var(--pwt-accent-color-background); } } -:root.pwt-dark-mode { - .fa-cdrom, - .fa-memory, - .fa-cpu { - filter: invert(90%); - } -} - .proxmox-content-spacer { @include color-scheme-vars("surface"); color: var(--pwt-color); -- 2.47.3