[PATCH datacenter-manager v2 2/4] ui: css: use mask for svg icons

[Dominik Csapak <d.csapak@proxmox.com>]

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 <d.csapak@proxmox.com>
---
 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