From d195b0dec72f392c5840aabd6cc7441ab7ec072b Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Thu, 9 Feb 2023 10:11:33 +0900 Subject: [PATCH] refactor(client): use css modules --- .../frontend/src/components/MkMediaImage.vue | 143 +++++++++--------- 1 file changed, 68 insertions(+), 75 deletions(-) diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue index 8dbcfc6fa..6ac56f3ce 100644 --- a/packages/frontend/src/components/MkMediaImage.vue +++ b/packages/frontend/src/components/MkMediaImage.vue @@ -1,22 +1,23 @@ <template> -<div v-if="hide" class="qjewsnkg" @click="hide = false"> - <ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/> - <div class="text"> - <div class="wrapper"> +<div v-if="hide" :class="$style.hidden" @click="hide = false"> + <ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/> + <div :class="$style.hiddenText"> + <div :class="$style.hiddenTextWrapper"> <b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b> <span style="display: block;">{{ $ts.clickToShow }}</span> </div> </div> </div> -<div v-else class="gqnyydlz"> +<div v-else :class="$style.visible"> <a + :class="$style.imageContainer" :href="image.url" :title="image.name" > <ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :cover="false"/> - <div v-if="image.type === 'image/gif'" class="gif">GIF</div> + <div v-if="image.type === 'image/gif'" :class="$style.gif">GIF</div> </a> - <button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button> + <button v-tooltip="$ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button> </div> </template> @@ -49,85 +50,77 @@ watch(() => props.image, () => { }); </script> -<style lang="scss" scoped> -.qjewsnkg { +<style lang="scss" module> +.hidden { position: relative; - - > .bg { - filter: brightness(0.5); - } - - > .text { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - - > .wrapper { - display: table-cell; - text-align: center; - font-size: 0.8em; - color: #fff; - } - } } -.gqnyydlz { +.hiddenText { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; +} + +.hiddenTextWrapper { + display: table-cell; + text-align: center; + font-size: 0.8em; + color: #fff; +} + +.visible { position: relative; //box-shadow: 0 0 0 1px var(--divider) inset; background: var(--bg); --c: rgb(0 0 0 / 2%); background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%); background-size: 16px 16px; +} - > .hide { - display: block; - position: absolute; - border-radius: 6px; - background-color: var(--accentedBg); - -webkit-backdrop-filter: var(--blur, blur(15px)); - backdrop-filter: var(--blur, blur(15px)); - color: var(--accent); - font-size: 0.8em; - padding: 6px 8px; - text-align: center; - top: 12px; - right: 12px; +.hide { + display: block; + position: absolute; + border-radius: 6px; + background-color: var(--accentedBg); + -webkit-backdrop-filter: var(--blur, blur(15px)); + backdrop-filter: var(--blur, blur(15px)); + color: var(--accent); + font-size: 0.8em; + padding: 6px 8px; + text-align: center; + top: 12px; + right: 12px; +} - > i { - display: block; - } - } +.imageContainer { + display: block; + cursor: zoom-in; + overflow: hidden; + width: 100%; + height: 100%; + background-position: center; + background-size: contain; + background-repeat: no-repeat; +} - > a { - display: block; - cursor: zoom-in; - overflow: hidden; - width: 100%; - height: 100%; - background-position: center; - background-size: contain; - background-repeat: no-repeat; - - > .gif { - background-color: var(--fg); - border-radius: 6px; - color: var(--accentLighten); - display: inline-block; - font-size: 14px; - font-weight: bold; - left: 12px; - opacity: .5; - padding: 0 6px; - text-align: center; - top: 12px; - pointer-events: none; - } - } +.gif { + background-color: var(--fg); + border-radius: 6px; + color: var(--accentLighten); + display: inline-block; + font-size: 14px; + font-weight: bold; + left: 12px; + opacity: .5; + padding: 0 6px; + text-align: center; + top: 12px; + pointer-events: none; } </style>