mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-22 19:54:03 +02:00
Code Releases Activity

🎨

Browse Source
This commit is contained in:
syuilo
2026-04-16 08:05:39 +09:00
parent 750a48df62
commit 24c0504cb0
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/pages/room.vue
View File

@@ -8,11 +8,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="[$style.screen, { [$style.zen]: isZenMode }]"> <div :class="[$style.screen, { [$style.zen]: isZenMode }]">
<canvas ref="canvas" :class="$style.canvas" tabindex="-1" :style="{ visibility: controller.isReady.value ? 'visible' : 'hidden' }"></canvas> <canvas ref="canvas" :class="$style.canvas" tabindex="-1" :style="{ visibility: controller.isReady.value ? 'visible' : 'hidden' }"></canvas>
<div v-if="!controller.isReady.value" :class="$style.loading"> <Transition
<div :class="$style.progressBar"> :enterActiveClass="$style.transition_fade_enterActive"
<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div> :leaveActiveClass="$style.transition_fade_leaveActive"
:enterFromClass="$style.transition_fade_enterFrom"
:leaveToClass="$style.transition_fade_leaveTo"
>
<div v-if="!controller.isReady.value" :class="$style.loading">
<div :class="$style.progressBar">
<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
</div>
</div> </div>
</div> </Transition>
<template v-if="!isZenMode"> <template v-if="!isZenMode">
<div v-if="controller.isReady.value" class="_buttonsCenter" :class="$style.overlayControls"> <div v-if="controller.isReady.value" class="_buttonsCenter" :class="$style.overlayControls">
@@ -386,6 +393,7 @@ definePage(() => ({
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
background: var(--MI_THEME-bg);
} }
.progressBar { .progressBar {
@@ -401,4 +409,13 @@ definePage(() => ({
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB)); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
transition: all 0.5s cubic-bezier(0,.5,.5,1); transition: all 0.5s cubic-bezier(0,.5,.5,1);
} }
.transition_fade_enterActive,
.transition_fade_leaveActive {
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.transition_fade_enterFrom,
.transition_fade_leaveTo {
opacity: 0;
}
</style> </style>