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 0CEEC1FF191 for ; Tue, 9 Sep 2025 17:54:29 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id F40D6E992; Tue, 9 Sep 2025 17:54:27 +0200 (CEST) From: Stefan Hanreich To: pdm-devel@lists.proxmox.com Date: Tue, 9 Sep 2025 17:54:19 +0200 Message-ID: <20250909155423.526917-8-s.hanreich@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20250909155423.526917-1-s.hanreich@proxmox.com> References: <20250909155423.526917-1-s.hanreich@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL -0.184 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 KAM_LAZY_DOMAIN_SECURITY 1 Sending domain does not have any anti-forgery methods KAM_SHORT 0.001 Use of a URL Shortener for very short URL RDNS_NONE 0.793 Delivered to internal network by a host with no rDNS SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_NONE 0.001 SPF: sender does not publish an SPF Record Subject: [pdm-devel] [PATCH proxmox-datacenter-manager v2 4/5] ui: images: add sdn icon X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" Add the icon used for SDN in Proxmox VE manually, since it isn't included in our distribution of font awesome. SVG icons have the issue that their color cannot be simply changed via the CSS color attribute. This is problematic when showing an icon in the navigation or on the dashboard, where we use the color attribute to change their color. To work around that, use the icon as a mask and fill the background with the desired color. In the future it would make sense to ship our own custom font with those icons to circumvent those issues completely. Signed-off-by: Stefan Hanreich --- ui/Makefile | 1 + ui/css/pdm.scss | 36 +++++++++++++++++++--- ui/images/icon-sdn.svg | 70 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 ui/images/icon-sdn.svg diff --git a/ui/Makefile b/ui/Makefile index 7d2e654..61e5c77 100644 --- a/ui/Makefile +++ b/ui/Makefile @@ -60,6 +60,7 @@ install: $(COMPILED_OUTPUT) index.hbs install -m0644 images/icon-cpu.svg $(DESTDIR)$(UIDIR)/images install -m0644 images/icon-memory.svg $(DESTDIR)$(UIDIR)/images install -m0644 images/icon-sdn-vnet.svg $(DESTDIR)$(UIDIR)/images + install -m0644 images/icon-sdn.svg $(DESTDIR)$(UIDIR)/images install -m0644 images/proxmox_logo.svg $(DESTDIR)$(UIDIR)/images install -m0644 images/proxmox_logo_white.svg $(DESTDIR)$(UIDIR)/images diff --git a/ui/css/pdm.scss b/ui/css/pdm.scss index 6d87b1c..92182a4 100644 --- a/ui/css/pdm.scss +++ b/ui/css/pdm.scss @@ -59,19 +59,45 @@ .fa-sdn-vnet::before { content: " "; - background-image: url(./images/icon-sdn-vnet.svg); - background-size: 16px 16px; - background-repeat: no-repeat; + mask-image: url(./images/icon-sdn-vnet.svg); + mask-size: 16px 16px; + mask-repeat: no-repeat; + background-color: var(--pwt-color); width: 16px; height: 16px; vertical-align: bottom; display: inline-block; } +.fa-sdn:before { + content: " "; + mask-image: url(../images/icon-sdn.svg); + mask-size: 16px 16px; + mask-repeat: no-repeat; + background-color: var(--pwt-color); + width: 16px; + height: 16px; + vertical-align: middle; + display: inline-block; +} + +.pwt-nav-menu .pwt-nav-link.active{ + .fa-sdn:before, + .fa-sdn-vnet:before { + background-color: var(--pwt-accent-color); + } +} + +.pwt-panel-header-text{ + .fa-sdn:before, + .fa-sdn-vnet:before { + background-color: var(--pwt-accent-color-background); + } +} + :root.pwt-dark-mode { .fa-memory, - .fa-cpu, - .fa-sdn-vnet { + .fa-cpu { filter: invert(90%); } } diff --git a/ui/images/icon-sdn.svg b/ui/images/icon-sdn.svg new file mode 100644 index 0000000..9782e8b --- /dev/null +++ b/ui/images/icon-sdn.svg @@ -0,0 +1,70 @@ + + + + + + + +sdn + + +a + + + + +b + + + + +a--b + + + + +d + + + + +a--d + + + + +c + + + + +a--c + + + + +e + + + + +a--e + + + + +b--d + + + + +c--d + + + + -- 2.47.3 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel