WebUI: Replace canvas in MochaUI window with native CSS

src/webui/www/private/css/Window.css

@@ -20,6 +20,8 @@ Required by:
 
 .mocha {
     background-color: var(--color-background-default);
+    border-radius: 5px;
+    box-shadow: rgb(51 51 51) 0 1px 5px;
     display: none;
     overflow: hidden;
 }
@@ -123,31 +125,15 @@ div.mochaToolbarWrapper.bottom {
     width: 20px;
 }
 
-.mochaCanvasHeader {
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    z-index: -1;
-}
-
 .mochaControls {
     height: 14px;
     position: absolute;
-    right: 8px;
-    top: 8px;
+    right: 6px;
+    top: 6px;
     width: 52px;
     z-index: 4;
 }
 
-.mochaCanvasControls {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    z-index: 3;
-}
-
 /*
 	To use images for these buttons:
 	1. Set the useCanvasControls window option to false.
@@ -159,17 +145,44 @@ div.mochaToolbarWrapper.bottom {
 .mochaMinimizeButton,
 .mochaMaximizeButton,
 .mochaCloseButton {
-    background-color: var(--color-background-default);
-    color: var(--color-text-default);
     cursor: pointer;
     float: right;
-    font-size: 1px;
     height: 14px;
     margin-left: 5px;
+    position: relative;
     width: 14px;
     z-index: 4;
 }
 
+.mochaMaximizeButton::before,
+.mochaMaximizeButton::after,
+.mochaMinimizeButton::before,
+.mochaCloseButton::before,
+.mochaCloseButton::after {
+    background-color: var(--color-text-default);
+    border-radius: 1px;
+    content: "";
+    height: 2px;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 9px;
+}
+
+.mochaMaximizeButton::after {
+    height: 9px;
+    width: 2px;
+}
+
+.mochaCloseButton::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.mochaCloseButton::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+
 .mochaMinimizeButton {
     margin-left: 0;
 }
@@ -250,16 +263,6 @@ div.mochaToolbarWrapper.bottom {
     position: absolute;
 }
 
-/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
-
-.mocha.replaced,
-.mochaTitlebar.replaced,
-.mochaMinimizeButton.replaced,
-.mochaMaximizeButton.replaced,
-.mochaCloseButton.replaced {
-    background-color: transparent !important;
-}
-
 .windowClosed {
     display: none;
     left: -20000px;
@@ -273,8 +276,7 @@ div.mochaToolbarWrapper.bottom {
 .windowClosed .mochaContentBorder,
 .windowClosed .mochaToolbarWrapper,
 .windowClosed .mochaTitlebar,
-.windowClosed .mochaControls,
-.windowClosed .mochaCanvasControls {
+.windowClosed .mochaControls {
     display: none;
     left: 0;
     position: absolute;
@@ -345,14 +347,6 @@ div.mochaToolbarWrapper.bottom {
     background: #ffffff;
 }
 
-/* Workaround to make invisible buttons clickable */
-
-.mochaMinimizeButton.replaced,
-.mochaMaximizeButton.replaced,
-.mochaCloseButton.replaced {
-    background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
-}
-
 /* iOS iframe scrolling */
 .windowFrame .mochaContentWrapper {
     /* scroll the Window content. !important required. */

src/webui/www/private/scripts/monkeypatch.js

@@ -40,6 +40,7 @@ window.qBittorrent.MonkeyPatch ??= (() => {
     const patch = () => {
         patchMootoolsDocumentId();
         patchMochaGetAsset();
+        patchMochaWindowOptions();
     };
 
     const patchMootoolsDocumentId = () => {
@@ -123,6 +124,17 @@ window.qBittorrent.MonkeyPatch ??= (() => {
         };
     };
 
+    /**
+     * Disable canvas in MochaUI windows
+     */
+    const patchMochaWindowOptions = () => {
+        const options = MUI.Window.prototype.options;
+        options.shadowBlur = 0;
+        options.shadowOffset = { x: 0, y: 0 };
+        options.useCanvas = false;
+        options.useCanvasControls = false;
+    };
+
     return exports();
 })();
 Object.freeze(window.qBittorrent.MonkeyPatch);