Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2025-02-17 13:58:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui): animate song rows and sidebar menu items

Browse source
This commit is contained in:
Phan An 2024-01-25 19:02:10 +01:00
parent 5c5c538478
commit 35df3a6826
2 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
View file

@ -167,17 +167,21 @@ nav {
color: var(--color-text-primary);
}
&::before {
content: '';
right: -1.5rem;
top: 25%;
width: 4px;
height: 50%;
position: absolute;
transition: box-shadow .5s ease-in-out, background-color .5s ease-in-out;
border-radius: 9999rem;
}
&.active {
&::before {
content: '';
position: absolute;
top: 25%;
right: -1.5rem;
width: 4px;
height: 50%;
background-color: var(--color-highlight);
box-shadow: 0 0 40px 10px var(--color-highlight);
border-radius: 9999rem;
}
}

5
resources/assets/js/components/song/SongListItem.vue
View file

@ -83,9 +83,10 @@ const play = () => {
height: 64px;
display: flex;
align-items: center;
transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
&:focus, &:focus-within {
box-shadow: 0 0 1px 1px var(--color-accent) inset;
box-shadow: 0 0 1px 1px var(--color-accent) inset !important;
border-radius: 4px;
}
@ -110,6 +111,8 @@ const play = () => {
&:hover {
background: rgba(255, 255, 255, .05);
box-shadow: 0 0 1px 1px rgba(255, 255, 255, .1) inset;
border-radius: 5px;
}
&.selected {