diff --git a/src/webui/www/private/css/Window.css b/src/webui/www/private/css/Window.css index 7876180fb..3035b1995 100644 --- a/src/webui/www/private/css/Window.css +++ b/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. */ diff --git a/src/webui/www/private/scripts/monkeypatch.js b/src/webui/www/private/scripts/monkeypatch.js index 683ea7ed0..08399be9d 100644 --- a/src/webui/www/private/scripts/monkeypatch.js +++ b/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);