tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-09 04:35:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

animate album cards on hover in playlist view

Browse Source
This commit is contained in:
geoffrey45 2021-12-08 11:54:09 +03:00
parent d060a4c927
commit 42be78ffbf
3 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.vue
View File

@ -93,11 +93,18 @@ export default {
}; };
</script> </script>
<style> <style lang="scss">
#logo-container {
position: relative;
height: 3.6rem;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.logo { .logo {
height: 2rem; height: 2rem;
width: 9rem; width: 9rem;
margin-left: 2.25rem; margin-left: 4rem;
background: url(./assets/logo.svg); background: url(./assets/logo.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -116,39 +123,31 @@ export default {
flex-direction: column; flex-direction: column;
} }
#logo-container {
height: 3.6rem;
margin-left: 1rem;
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.l-sidebar { .l-sidebar {
position: relative; position: relative;
} }
.l-container #toggle { .l-container #toggle {
position: fixed; position: absolute;
top: 1rem; left: 0.2rem;
width: 1.75rem; width: 4rem;
height: 3.75rem; height: 100%;
background: url(./assets/icons/menu.svg); background: url(./assets/icons/menu.svg);
background-size: contain; background-size: 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
margin-left: 0.25rem;
} }
.l-container #settings-button { .l-container #settings-button {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
display: flex; display: flex;
color: #fff;
height: 50px; height: 50px;
width: 100%; width: 100%;
border-top: 1px solid var(--seperator); cursor: pointer;
border-radius: 0 0 $small $small;
border-top: solid .1rem $seperator
} }
#settings-button .in { #settings-button .in {
@ -157,13 +156,8 @@ export default {
justify-content: center; justify-content: center;
} }
.l-container #settings-button:hover {
background: #17c93d7c;
cursor: pointer;
}
.l-container #settings-button #settings-icon { .l-container #settings-button #settings-icon {
margin-left: 1rem; margin-left: 1.5rem;
margin-right: 0.25rem; margin-right: 0.25rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

2
src/assets/css/_variables.scss
View File

@ -4,7 +4,7 @@ $card-dark: #131313b2;
$red: #df4646; $red: #df4646;
$blue: #00a8ff; $blue: #00a8ff;
$green: rgb(67, 148, 67); $green: rgb(67, 148, 67);
$seperator: #ffffff46;
// sizes // sizes
$small: .5em; $small: .5em;

20
src/components/PlaylistView/Header.vue
View File

@ -3,7 +3,8 @@
<div class="info rounded"> <div class="info rounded">
<p class="name">Because I Got High Radio</p> <p class="name">Because I Got High Radio</p>
<p class="text"> <p class="text">
The best music to fade to while doing my thing. Featuring artists like Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ... The best music to fade to while doing my thing. Featuring artists like
Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
</p> </p>
<div class="lower"> <div class="lower">
<div class="statistics"> <div class="statistics">
@ -52,7 +53,7 @@
overflow: hidden; overflow: hidden;
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
margin: 0.2em 0 .5em 0; margin: 0.2em 0 0.5em 0;
} }
.p-header .info .text { .p-header .info .text {
@ -123,7 +124,7 @@
grid-gap: 0.5rem; grid-gap: 0.5rem;
// border: solid; // border: solid;
position: absolute; position: absolute;
bottom: -.5em; bottom: -0.5em;
right: -1em; right: -1em;
} }
@ -132,12 +133,14 @@
width: 5em; width: 5em;
background-color: $blue; background-color: $blue;
border-radius: $small; border-radius: $small;
transition: transform 0.5s;
transform: scale(1.1);
} }
.p-header .info .albums .first { .p-header .info .albums .first {
position: absolute; position: absolute;
transform: rotate(-30deg); transform: rotate(-30deg);
right: .5em; right: 0.5em;
bottom: 0em; bottom: 0em;
background-color: $red; background-color: $red;
background-image: url(../../assets/images/girl2.jpg); background-image: url(../../assets/images/girl2.jpg);
@ -149,7 +152,7 @@
right: 4em; right: 4em;
bottom: -1em !important; bottom: -1em !important;
background-color: $green; background-color: $green;
background-image: url(../../assets/images/tk.jpg); background-image: url(../../assets/images/girl1.jpg);
z-index: 1; z-index: 1;
} }
@ -162,4 +165,11 @@
background-image: url(../../assets/images/girl3.jpg); background-image: url(../../assets/images/girl3.jpg);
z-index: 2; z-index: 2;
} }
.p-header .info .albums .item:hover {
transition: transform 1s;
transform: scale(1.5);
cursor: pointer;
z-index: 3;
}
</style> </style>