ash/iceshrimp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change color of the hovered navbar element, remove underline on all navbar elements

Browse source
This commit is contained in:
Jeder 2023-09-03 22:15:15 +02:00 committed by Laura Hausmann
parent bfc452658a
commit fb4848f960
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
1 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
packages/client/src/ui/_common_/navbar.vue
View file

@ -388,6 +388,10 @@ function more(ev: MouseEvent) {
> .middle { > .middle {
flex: 0.1; flex: 0.1;
> a {
text-decoration: none;
}
> .divider { > .divider {
margin: 16px 16px; margin: 16px 16px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
@ -427,17 +431,6 @@ function more(ev: MouseEvent) {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&:hover,
&:focus-within {
text-decoration: none;
color: var(--navHoverFg);
transition: all 0.4s ease;
}
&.active {
color: var(--navActive);
}
&:hover, &:hover,
&:focus-within, &:focus-within,
&.active { &.active {
@ -456,6 +449,18 @@ function more(ev: MouseEvent) {
right: 0; right: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
}
}
&:hover,
&:focus-within {
&:before {
background: var(--panelHighlight);
}
}
&.active {
&:before {
background: var(--accentedBg); background: var(--accentedBg);
} }
} }
@ -568,6 +573,10 @@ function more(ev: MouseEvent) {
> .middle { > .middle {
flex: 0.1; flex: 0.1;
> a {
text-decoration: none;
}
> .divider { > .divider {
margin: 8px auto; margin: 8px auto;
width: calc(100% - 32px); width: calc(100% - 32px);
@ -620,7 +629,6 @@ function more(ev: MouseEvent) {
right: 0; right: 0;
bottom: 0; bottom: 0;
border-radius: 999px; border-radius: 999px;
background: var(--accentedBg);
} }
> .icon, > .icon,
@ -628,6 +636,19 @@ function more(ev: MouseEvent) {
opacity: 1; opacity: 1;
} }
} }
&:hover,
&:focus-within {
&:before {
background: var(--panelHighlight);
}
}
&.active {
&:before {
background: var(--accentedBg);
}
}
} }
} }
} }