diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkMediaList.vue | 23 |
1 files changed, 13 insertions, 10 deletions
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index fafa0bd232..c768a086cd 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -13,7 +13,7 @@ </template> <script lang="ts" setup> -import { onMounted, ref } from 'vue'; +import { onMounted, ref, useCssModule } from 'vue'; import * as misskey from 'misskey-js'; import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipe from 'photoswipe'; @@ -29,8 +29,11 @@ const props = defineProps<{ raw?: boolean; }>(); +const $style = useCssModule(); + const gallery = ref(null); const pswpZIndex = os.claimZIndex('middle'); +document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); onMounted(() => { @@ -54,17 +57,18 @@ onMounted(() => { return item; }), gallery: gallery.value, + mainClass: $style.pswp, children: '.image', thumbSelector: '.image', loop: false, padding: window.innerWidth > 500 ? { top: 32, - bottom: 32, + bottom: 90, left: 32, right: 32, } : { top: 0, - bottom: 0, + bottom: 78, left: 0, right: 0, }, @@ -82,6 +86,7 @@ onMounted(() => { const id = element.dataset.id; const file = props.mediaList.find(media => media.id === id); + if (!file) return; itemData.src = file.url; itemData.w = Number(file.properties.width); @@ -198,16 +203,14 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { overflow: hidden; // clipにするとバグる border-radius: 8px; } -</style> -<style lang="scss"> .pswp { - // なぜか機能しない - //z-index: v-bind(pswpZIndex); - z-index: 2000000; - --pswp-bg: var(--modalBg); + --pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important; + --pswp-bg: var(--modalBg) !important; } +</style> +<style lang="scss"> .pswp__bg { background: var(--modalBg); backdrop-filter: var(--modalBgFilter); @@ -219,7 +222,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { align-items: center; position: absolute; - bottom: 30px; + bottom: 20px; left: 50%; transform: translateX(-50%); |