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 36B491FF140 for ; Fri, 10 Apr 2026 09:57:48 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D69F51681B; Fri, 10 Apr 2026 09:58:31 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [PATCH datacenter-manager v4 2/4] ui: css: use mask for svg icons Date: Fri, 10 Apr 2026 09:56:55 +0200 Message-ID: <20260410075827.820438-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260410075827.820438-1-d.csapak@proxmox.com> References: <20260410075827.820438-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.048 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 RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. 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: 77VCOSYL2HUHWNHA7VWMDLV4SVBB3NE2 X-Message-ID-Hash: 77VCOSYL2HUHWNHA7VWMDLV4SVBB3NE2 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 Reviewed-by: Lukas Wagner Tested-by: Lukas Wagner --- 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