usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
tamaina 2025-08-31 03:51:17 +09:00
parent 24338f2473
commit ad3c22de5e
1 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/frontend/src/pages/qr.read.vue
View File

@ -13,6 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)', '--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
}" }"
> >
<MkStickyContainer>
<template #header>
<div :class="$style.view"> <div :class="$style.view">
<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video> <video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
<div ref="overlayEl" :class="$style.overlay"></div> <div ref="overlayEl" :class="$style.overlay"></div>
@ -27,24 +29,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton> <MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
</div> </div>
</div> </div>
</template>
<div <div
class="_spacer" :class="['_spacer', $style.contents]"
:style="{ :style="{
'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
'--MI_SPACER-w': '800px' '--MI_SPACER-w': '800px'
}" }"
> >
<MkStickyContainer>
<template #header>
<MkTab v-model="tab" :class="$style.tab"> <MkTab v-model="tab" :class="$style.tab">
<option value="users">{{ i18n.ts.users }}</option> <option value="users">{{ i18n.ts.users }}</option>
<option value="notes">{{ i18n.ts.notes }}</option> <option value="notes">{{ i18n.ts.notes }}</option>
</MkTab> </MkTab>
</template>
<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);"> <div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
<MkUserInfo v-for="user in users" :key="user.id" :user="user"/> <MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
</div> </div>
<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);"> <div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/> <MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
</div> </div>
</MkStickyContainer>
</div> </div>
</MkStickyContainer>
</div> </div>
</template> </template>
@ -340,6 +347,15 @@ html[data-color-scheme=light] .view {
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%); background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
} }
.contents {
padding-top: calc(var(--MI-margin) / 2);
}
.tab {
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.users { .users {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));