mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-07-25 07:25:04 +02:00
Code Releases Activity

refactor(frontend): メディアメニューのメニューボタンのスタイルを統一 (#17742)

Browse Source 
* fix

* fix

* refactor
This commit is contained in:
かっこかり
2026-07-18 23:04:21 +09:00
committed by GitHub
parent fca7859c89
commit bdf1547a42
2 changed files with 20 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/frontend/src/components/MkMediaImage.vue
View File

@@ -61,8 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="image.comment" :class="$style.indicator">ALT</div>
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
<button :class="[$style.menu, $style.menuBottom]" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<button :class="[$style.menu, $style.menuTop]" class="_button" @click.stop="hide = true"><i class="ti ti-eye-off" style="vertical-align: middle;"></i></button>
</template>
</div>
</template>
@@ -174,23 +174,6 @@ function onContextmenu(ev: PointerEvent) {
cursor: pointer;
}
.hide {
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 0 0 0 9px;
color: #fff;
font-size: 12px;
opacity: .5;
padding: 5px 8px;
text-align: center;
cursor: pointer;
top: 0;
right: 0;
}
.hiddenTextWrapper {
display: table-cell;
text-align: center;
@@ -221,16 +204,25 @@ html[data-color-scheme=light] .visible {
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 9px 0 0 0;
color: #fff;
font-size: 0.8em;
width: 28px;
height: 28px;
text-align: center;
}
.menuBottom {
border-radius: 8px 0 8px 0;
bottom: 0;
right: 0;
}
.menuTop {
border-radius: 0 8px 0 8px;
top: 0;
right: 0;
}
.imageContainer {
display: block;
overflow: hidden;

24
packages/frontend/src/components/MkMediaVideo.vue
View File

@@ -42,8 +42,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-player-play"></i>
</div>
</div>
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
<button :class="[$style.menu, $style.menuBottom]" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<button :class="[$style.menu, $style.menuTop]" class="_button" @click.stop="hide = true"><i class="ti ti-eye-off" style="vertical-align: middle;"></i></button>
</div>
</div>
</template>
@@ -184,29 +184,21 @@ function onContextmenu(ev: PointerEvent) {
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 9px 0 0 0;
color: #fff;
font-size: 0.8em;
width: 28px;
height: 28px;
text-align: center;
}
.menuBottom {
border-radius: 8px 0 8px 0;
bottom: 0;
right: 0;
}
.hide {
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 0 0 0 9px;
color: #fff;
font-size: 12px;
opacity: .5;
padding: 5px 8px;
text-align: center;
cursor: pointer;
.menuTop {
border-radius: 0 8px 0 8px;
top: 0;
right: 0;
}