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 A64BE1FF191 for ; Tue, 9 Sep 2025 12:08:42 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 2677C5A37; Tue, 9 Sep 2025 12:08:44 +0200 (CEST) From: Stefan Hanreich To: pdm-devel@lists.proxmox.com Date: Tue, 9 Sep 2025 12:08:32 +0200 Message-ID: <20250909100838.234778-6-s.hanreich@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20250909100838.234778-1-s.hanreich@proxmox.com> References: <20250909100838.234778-1-s.hanreich@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL -0.183 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 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 | 27 ++++++++++++++-- ui/images/icon-sdn.svg | 70 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 3 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..63095c3 100644 --- a/ui/css/pdm.scss +++ b/ui/css/pdm.scss @@ -59,15 +59,36 @@ .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 { + background-color: var(--pwt-accent-color); +} + +.pwt-panel-header-text .fa-sdn:before { + background-color: var(--pwt-accent-color-background); +} + :root.pwt-dark-mode { .fa-memory, .fa-cpu, 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