diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue index ad3beee73f..5a3e0f66a5 100644 --- a/src/client/components/ui/modal.vue +++ b/src/client/components/ui/modal.vue @@ -1,5 +1,5 @@ <template> -<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }"> +<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear> <div class="bg _modalBg" v-if="showing" @click="onBgClick"></div> </transition> @@ -153,7 +153,7 @@ export default defineComponent({ <style> .modal-popup-content-enter-active, .modal-popup-content-leave-active, .modal-content-enter-from, .modal-content-leave-to { - transform-origin: v-bind(transformOrigin); + transform-origin: var(--transformOrigin); } </style> diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index c58f2841ff..25f1c5f00c 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -1,5 +1,5 @@ <template> -<div class="fdidabkb"> +<div class="fdidabkb" :style="`--height:${height};`"> <transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear> <button class="_button back" v-if="withBack && canBack" @click.stop="back()"><Fa :icon="faChevronLeft"/></button> </transition> @@ -79,24 +79,24 @@ export default defineComponent({ text-align: center; > .back { - height: v-bind(height); - width: v-bind(height); + height: var(--height); + width: var(--height); } > .action { - height: v-bind(height); - width: v-bind(height); + height: var(--height); + width: var(--height); } > .titleContainer { - width: calc(100% - (v-bind(height) * 2)); + width: calc(100% - (var(--height) * 2)); > .title { - height: v-bind(height); + height: var(--height); > .avatar { $size: 32px; - margin: calc((v-bind(height) - #{$size}) / 2) 8px calc((v-bind(height) - #{$size}) / 2) 0; + margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0; pointer-events: none; } }