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 F04DF1FF13C for ; Thu, 02 Apr 2026 15:21:18 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 8943D1A031; Thu, 2 Apr 2026 15:21:48 +0200 (CEST) From: Dominik Csapak To: pdm-devel@lists.proxmox.com Subject: [PATCH datacenter-manager v3 2/4] ui: css: use mask for svg icons Date: Thu, 2 Apr 2026 15:18:29 +0200 Message-ID: <20260402132111.3221890-3-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260402132111.3221890-1-d.csapak@proxmox.com> References: <20260402132111.3221890-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL -1.453 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 1 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 1 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 1 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: 4B5AQOHHB4KSFR5KKH4QNB3O3WCPB2UO X-Message-ID-Hash: 4B5AQOHHB4KSFR5KKH4QNB3O3WCPB2UO 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