worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change css module

Browse source
This commit is contained in:
mappi 2023-06-09 19:13:35 +09:00
parent e999fa0ed4
commit 6df88eda11
2 changed files with 13 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend/src/components/MkUserInfo.vue
View file

@ -27,10 +27,10 @@
</template>
<template v-else>
<div :class="$style.statusItem">
<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{ [$style.animation]: animation }"></i></span>
<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="[$style.keywigglearea, { [$style.animation]: animation }]"></i></span>
</div>
<div :class="$style.statusItem">
<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock" :class="{ [$style.animation]: animation }"></i></span>
<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue"><i class="ti ti-lock keywigglearea" :class="[$style.keywigglearea, { [$style.animation]: animation }]"></i></span>
</div>
</template>
</div>
@ -142,10 +142,6 @@ const animation = $ref(defaultStore.state.animation);
.statusItemValue {
font-size: 1em;
color: var(--accent);
> i {
display: block;
}
}
.follow {
@ -154,6 +150,10 @@ const animation = $ref(defaultStore.state.animation);
right: 8px;
}
.keywigglearea {
display: block;
}
@keyframes keywiggle {
0% { transform: translate(-3px,-1px) rotate(-8deg); }
5% { transform: translateY(-1px) rotate(-10deg); }

16
packages/frontend/src/components/MkUserPopup.vue
View file

@ -43,11 +43,11 @@
<template v-else>
<div :class="$style.statusItem">
<div :class="$style.statusItemLabel">{{ i18n.ts.following }}</div>
<div><i class="ti ti-lock" :class="{ [$style.animation]: animation }"></i></div>
<div><i class="ti ti-lock" :class="[$style.keywigglearea, { [$style.animation]: animation }]"></i></div>
</div>
<div :class="$style.statusItem">
<div :class="$style.statusItemLabel">{{ i18n.ts.followers }}</div>
<div><i class="ti ti-lock" :class="{ [$style.animation]: animation }"></i></div>
<div><i class="ti ti-lock" :class="[$style.keywigglearea, { [$style.animation]: animation }]"></i></div>
</div>
</template>
</div>
@ -223,13 +223,6 @@ onMounted(() => {
display: inline-block;
width: 33%;
text-align: center;
> div {
> i {
display: block;
margin: 0 auto;
}
}
}
.statusItemLabel {
@ -252,6 +245,11 @@ onMounted(() => {
right: 8px;
}
.keywigglearea {
display: block;
margin: 0 auto;
}
@keyframes keywiggle {
0% { transform: translate(-3px,-1px) rotate(-8deg); }
5% { transform: translateY(-1px) rotate(-10deg); }