From 2743fae0b4567981ed564a7654d178020bfcb841 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 15 May 2022 13:00:09 +0200 Subject: [PATCH] Use CSS variable to apply the dialog offset --- ts/WoltLabSuite/Core/Ui/Dialog.ts | 2 +- wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js | 2 +- wcfsetup/install/files/style/ui/dialog.scss | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts index ee349cd6a6..a0ac4c163b 100644 --- a/ts/WoltLabSuite/Core/Ui/Dialog.ts +++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts @@ -414,7 +414,7 @@ const UiDialog = { : entry.contentBoxSize; const offset = Math.floor(contentBoxSize.inlineSize / 2); - dialog.style.setProperty("transform", `translateX(-${offset}px)`); + dialog.style.setProperty("--translate-x", `-${offset}px`); } } }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js index 65c330e1fd..4e574134c1 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js @@ -341,7 +341,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S ? entry.contentBoxSize[0] : entry.contentBoxSize; const offset = Math.floor(contentBoxSize.inlineSize / 2); - dialog.style.setProperty("transform", `translateX(-${offset}px)`); + dialog.style.setProperty("--translate-x", `-${offset}px`); } } }); diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss index 42f0504f68..648a923ea8 100644 --- a/wcfsetup/install/files/style/ui/dialog.scss +++ b/wcfsetup/install/files/style/ui/dialog.scss @@ -53,9 +53,6 @@ position: fixed; right: 0 !important; top: 0 !important; - - // Remove the offsets for the dialog position. - transform: none !important; } @include screen-sm-up { @@ -76,6 +73,7 @@ // this causes a blurry text rendering in Chromium. // The offset is calculated using a `ResizeObserver`. left: 50%; + transform: translateX(var(--translate-x, 0)); &[aria-hidden="false"] { animation: wcfDialog 0.3s; -- 2.20.1