CSS optimizations for HW acceleration disabled

src/main/cider-base.js

@@ -108,6 +108,10 @@ const CiderBase = {
             event.returnValue = process.platform
         })
 
+        ipcMain.on("get-gpu-mode", (event) => {
+            event.returnValue = process.platform
+        })
+
         ipcMain.on("is-dev", (event) => {
             event.returnValue = !app.isPackaged
         })

src/renderer/index.js

@@ -340,6 +340,9 @@ const app = new Vue({
             if(this.isDev) {
                 this.mk.privateEnabled = true
             }
+            if(this.cfg.visual.hw_acceleration == "disabled") {
+                document.body.classList.add("no-gpu")
+            }
             this.mk._services.timing.mode = 0
             this.platform = ipcRenderer.sendSync('cider-platform');
             // Set profile name

src/renderer/style.less

@@ -3174,4 +3174,28 @@ input[type=checkbox][switch]:checked:active::before {
 
 .albums-square-container {
   text-align: center;
+}
+
+body.no-gpu {
+  #navigation-bar {
+    backdrop-filter: unset;
+    mix-blend-mode: unset;
+    background: rgb(0 0 0);
+  }
+
+  .app-drawer {
+    backdrop-filter: unset;
+    mix-blend-mode: unset;
+    background: #1c1c1c;
+  }
+
+  .wpfade-enter-active,
+  .wpfade-leave-active {
+    transition: opacity 0s var(--appleEase);
+  }
+
+  .wpfade-enter,
+  .wpfade-leave-to {
+    opacity: 0;
+  }
 }