merge: fix notification indicator

This commit is contained in:
Marie 2023-11-02 00:40:41 +01:00 committed by GitHub
commit f29d85de0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions

View file

@ -188,10 +188,10 @@ hr {
font-weight: 700; font-weight: 700;
background: var(--indicator); background: var(--indicator);
height: 1.5em; height: 1.5em;
min-width: 1.5em; min-width: 1em;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 99rem; border-radius: var(--radius-ellipse);
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
} }

View file

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
> >
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span> <i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator"> <span v-if="navbarItemDef[item].indicated" :class="[$style.itemIndicator, { [$style.hasItemIndicateValueIcon]: navbarItemDef[item].indicateValue }]">
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span> <span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
<i v-else class="_indicatorCircle"></i> <i v-else class="_indicatorCircle"></i>
</span> </span>
@ -311,12 +311,12 @@ function more(ev: MouseEvent) {
.itemIndicator { .itemIndicator {
position: absolute; position: absolute;
top: 0; top: 0;
right: 20px; left: 20px;
color: var(--navIndicator); color: var(--navIndicator);
font-size: 8px; font-size: 8px;
animation: blink 1s infinite; animation: blink 1s infinite;
&:has(.itemIndicateValueIcon) { &.hasItemIndicateValueIcon {
animation: none; animation: none;
left: auto; left: auto;
right: 40px; right: 40px;