From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 3BC461FF136 for ; Mon, 23 Mar 2026 12:07:13 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 77FCB12A60; Mon, 23 Mar 2026 12:07:32 +0100 (CET) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [PATCH datacenter-manager 2/4] ui: css: use mask for svg icons Date: Mon, 23 Mar 2026 12:03:39 +0100 Message-ID: <20260323110728.1500528-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260323110728.1500528-1-d.csapak@proxmox.com> References: <20260323110728.1500528-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.041 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: 33KZVLH5AGX7Q7K3XYDEPEONMYPI57KB X-Message-ID-Hash: 33KZVLH5AGX7Q7K3XYDEPEONMYPI57KB 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