WIP: client: remove blinking animation from notification indicator #172

Closed
toast wants to merge 2 commits from indicator-circle into main
9 changed files with 3 additions and 23 deletions

View File

@ -153,7 +153,6 @@ function help(ev: MouseEvent) {
left: 32px;
color: var(--indicator);
font-size: 8px;
animation: blink 1s infinite;
@media (max-width: 500px) {
top: 16px;

View File

@ -243,7 +243,6 @@ function focusDown() {
left: 13px;
color: var(--indicator);
font-size: 12px;
animation: blink 1s infinite;
}
}

View File

@ -481,12 +481,6 @@ hr {
transform: scale(0.9);
}
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.5); }
}
@keyframes tada {
from {
transform: scale3d(1, 1, 1);

View File

@ -110,7 +110,6 @@ function more(): void {
left: 20px;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
> .text {

View File

@ -9,18 +9,16 @@
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" class="item _button" :class="[item, { active: menuDef[item].active, indicated: menuDef[item].indicated }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ i18n.ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
</MkA>
<button class="item _button" @click="more">
<button class="item _button" :class="{ indicated: otherMenuItemIndicated }" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<MkA class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
@ -137,13 +135,8 @@ function more(ev: MouseEvent) {
vertical-align: middle;
}
> .indicator {
position: absolute;
top: 0;
left: 20px;
&.indicated {
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
> .text {

View File

@ -135,7 +135,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
&:hover {

View File

@ -220,7 +220,6 @@ function openAccountMenuWrapper(ev: MouseEvent): void {
left: 0;
color: var(--navIndicator);
font-size: 8px;
animation: blink 1s infinite;
}
&:hover {

View File

@ -251,7 +251,6 @@ function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
}
&:first-child {

View File

@ -350,7 +350,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
}
&:first-child {