nelle/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2025-03-04 07:18:50 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ⚗️ ripple effect

Browse source
This commit is contained in:
ThatOneCalculator 2022-08-16 00:00:36 -07:00
parent 03eccb8098
commit 57f4e2319b
2 changed files with 50 additions and 37 deletions
packages/client/src
pages
timeline.vue
ui
universal.vue

9
packages/client/src/pages/timeline.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header <template #header>
><MkPageHeader <MkPageHeader
v-model:tab="src" v-model:tab="src"
:actions="headerActions" :actions="headerActions"
:tabs="headerTabs" :tabs="headerTabs"
:display-my-avatar="true" :display-my-avatar="true"
/></template> />
</template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial <XTutorial
@ -72,7 +73,6 @@ const DESKTOP_THRESHOLD = 1100;
const MOBILE_THRESHOLD = 500; const MOBILE_THRESHOLD = 500;
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const isMobile = ref( const isMobile = ref(
deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
); );
@ -297,6 +297,7 @@ if (isMobile.value) {
/* reset values */ /* reset values */
xDown = null; xDown = null;
yDown = null; yDown = null;
return;
} }
} }
</script> </script>

12
packages/client/src/ui/universal.vue
View file

@ -304,8 +304,20 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
height: 64px; height: 64px;
border-radius: 8px; border-radius: 8px;
background: var(--panel); background: var(--panel);
background-position: center;
transition: background 0.6s;
color: var(--fg); color: var(--fg);
&:hover {
background: var(--panelHover) radial-gradient(circle, transparent 1%, var(--panelHover) 1%) center/15000%;
}
&:active {
background-color: var(--accentedBg);
background-size: 100%;
transition: background 0s;
}
&:not(:last-child) { &:not(:last-child) {
margin-right: 12px; margin-right: 12px;
} }