tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-10 21:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

add recommended tracks

Browse Source
This commit is contained in:
geoffrey45 2021-12-01 11:11:53 +03:00
parent 6ef31c4d82
commit 53b9ebdb60
11 changed files with 243 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.vue
View File

@ -24,6 +24,7 @@
<Search :collapser="collapser"/> <Search :collapser="collapser"/>
<NowPlaying /> <NowPlaying />
<UpNext :collapser="collapser" @updateCollapser="updateCollapser"/> <UpNext :collapser="collapser" @updateCollapser="updateCollapser"/>
<RecommendedArtist/>
</div> </div>
</div> </div>
</template> </template>
@ -37,6 +38,7 @@ import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
import Search from "./components/RightSideBar/Search.vue"; import Search from "./components/RightSideBar/Search.vue";
import NowPlaying from "./components/RightSideBar/NowPlaying.vue"; import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
import UpNext from "./components/RightSideBar/UpNext.vue"; import UpNext from "./components/RightSideBar/UpNext.vue";
import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"
export default { export default {
components: { components: {
@ -44,7 +46,8 @@ export default {
PinnedStuff, PinnedStuff,
Search, Search,
NowPlaying, NowPlaying,
UpNext UpNext,
RecommendedArtist
}, },
setup() { setup() {
const collapsed = ref(true); const collapsed = ref(true);
@ -68,9 +71,9 @@ export default {
<style> <style>
.logo { .logo {
height: 2em; height: 2rem;
width: 9em; width: 9rem;
margin-left: 2.25em; margin-left: 2.25rem;
background: url(./assets/logo.svg); background: url(./assets/logo.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -79,6 +82,7 @@ export default {
animation-duration: 2s; animation-duration: 2s;
animation-iteration-count: 1; animation-iteration-count: 1;
} }
.nav-container .in { .nav-container .in {
display: flex; display: flex;
align-items: center; align-items: center;
@ -89,11 +93,11 @@ export default {
} }
#logo-container { #logo-container {
height: 3.6em; height: 3.6rem;
margin-left: 1em; margin-left: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
} }
.l-sidebar { .l-sidebar {
@ -102,15 +106,15 @@ export default {
.l-container #toggle { .l-container #toggle {
position: fixed; position: fixed;
top: 1em; top: 1rem;
width: 1.75em; width: 1.75rem;
height: 3.75em; height: 3.75rem;
background: url(./assets/icons/menu.svg); background: url(./assets/icons/menu.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
cursor: pointer; cursor: pointer;
margin-left: 0.25em; margin-left: 0.25rem;
} }
.l-container #settings-button { .l-container #settings-button {
@ -135,14 +139,11 @@ export default {
} }
.l-container #settings-button #settings-icon { .l-container #settings-button #settings-icon {
margin-left: 1em; margin-left: 1rem;
margin-right: 0.25em; margin-right: 0.25rem;
width: 1.5em; width: 1.5rem;
height: 1.5em; height: 1.5rem;
background-image: url(./assets/icons/settings.svg); background-image: url(./assets/icons/settings.svg);
/* background-size: contain;
background-repeat: no-repeat;
background-position: center; */
} }
.collapsed #settings-button #settings-icon { .collapsed #settings-button #settings-icon {

34
src/assets/css/global.css
View File

@ -8,8 +8,16 @@ body {
background: #0d0e0e; background: #0d0e0e;
color: #fff; color: #fff;
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
font-size: 1rem;
} }
.heading {
font-size: small;
font-weight: bold;
color: #ffffffb2;
display: flex;
align-items: center;
}
a { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
@ -18,7 +26,7 @@ a {
.seperator { .seperator {
border: 1px solid; border: 1px solid;
color: transparent; color: transparent;
margin: 0em; margin: 0rem;
} }
.hidden { .hidden {
@ -27,8 +35,8 @@ a {
.l-container { .l-container {
display: grid; display: grid;
grid-template-columns: min-content 4fr 30em; grid-template-columns: min-content 4fr 30rem;
grid-template-rows: 4em 1fr 1fr; grid-template-rows: 4rem 1fr 1fr;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar"; grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
width: 100vw; width: 100vw;
@ -61,9 +69,9 @@ a {
.l-sidebar { .l-sidebar {
width: 250px; width: 250px;
grid-area: l-sidebar; grid-area: l-sidebar;
padding-top: 0.5em; padding-top: 0.5rem;
margin: .5em 0 .5em .5em; margin: .5rem 0 .5rem .5rem;
border-radius: .5em; border-radius: .5rem;
background-color: #131313b2; background-color: #131313b2;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: 0.3s; transition-duration: 0.3s;
@ -84,16 +92,16 @@ a {
.content { .content {
grid-area: content; grid-area: content;
border-radius: .25em; border-radius: .25rem;
padding: .5em; padding: .5rem;
overflow: hidden; overflow: hidden;
} }
.r-sidebar { .r-sidebar {
grid-area: r-sidebar; grid-area: r-sidebar;
border-radius: 5px; border-radius: 5px;
margin-right: .5em; margin-right: .5rem;
overflow-y: scroll; overflow-y: auto;
} }
.image { .image {
@ -115,7 +123,7 @@ a {
/* width */ /* width */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: .5em; width: .5rem;
} }
@ -123,7 +131,7 @@ a {
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: rgba(51, 51, 51, 0.459); background: rgba(51, 51, 51, 0.459);
border-radius: 1em; border-radius: 1rem;
} }
@ -131,7 +139,7 @@ a {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: grey; background: grey;
border-radius: 1em; border-radius: 1rem;
} }

18
src/components/FolderView/FolderList.vue
View File

@ -25,36 +25,36 @@ export default {
<style> <style>
.f-container { .f-container {
margin-bottom: 1em; margin-bottom: 1rem;
background: rgba(31, 30, 30, 0.521); background: rgba(31, 30, 30, 0.521);
padding: 1em; padding: 1rem;
} }
#f-items { #f-items {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 1px solid var(--seperator); border-top: 1px solid var(--seperator);
gap: 1em; gap: 1rem;
padding-top: 1em; padding-top: 1rem;
} }
.f-container p { .f-container p {
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
color: rgba(255, 255, 255, 0.438); color: rgba(255, 255, 255, 0.438);
margin-bottom: 1em; margin-bottom: 1rem;
} }
.f-container .f-item { .f-container .f-item {
min-width: 15em; min-width: 14.4rem;
min-height: 5em; min-height: 5rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
background-image: url(../../assets/icons/folder.svg); background-image: url(../../assets/icons/folder.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 1em; background-position: 1rem;
background-size: 10% 100%; background-size: 10% 100%;
background-color: rgba(80, 80, 80, 0.247); background-color: rgba(80, 80, 80, 0.247);
} }
@ -65,7 +65,7 @@ export default {
.f-container .f-item-text { .f-container .f-item-text {
position: absolute; position: absolute;
left: 3em; left: 3rem;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

20
src/components/FolderView/SearchBox.vue
View File

@ -17,8 +17,8 @@ export default {};
<style> <style>
.folder-top { .folder-top {
padding-bottom: 1em; padding-bottom: 1rem;
margin-bottom: 1em; margin-bottom: 1rem;
border-bottom: 1px solid var(--seperator); border-bottom: 1px solid var(--seperator);
} }
@ -27,12 +27,12 @@ export default {};
color: rgba(255, 255, 255, 0.438); color: rgba(255, 255, 255, 0.438);
text-transform: uppercase; text-transform: uppercase;
display: flex; display: flex;
align-items: center; align-itrems: center;
} }
.folder-top .fsearch { .folder-top .fsearch {
width: 50%; width: 50%;
margin-right: 1em; margin-right: 1rem;
} }
.folder-top .fsearch div { .folder-top .fsearch div {
@ -42,14 +42,14 @@ export default {};
} }
.folder-top .fsearch input { .folder-top .fsearch input {
width: 30em; width: 30rem;
border: none; border: none;
border-radius: .5em; border-radius: .5rem;
padding-left: 1em; padding-left: 1rem;
background-color: #4645456c; background-color: #4645456c;
color: rgba(255, 255, 255, 0.521); color: rgba(255, 255, 255, 0.521);
font-size: 1em; font-size: 1rem;
line-height: 3em; line-height: 3rem;
outline: none; outline: none;
} }
@ -63,6 +63,6 @@ export default {};
.folder-top .fsearch input:focus { .folder-top .fsearch input:focus {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
outline: 0.1em solid #fafafa52; outline: 0.1rem solid #fafafa52;
} }
</style> </style>

16
src/components/FolderView/SongList.vue
View File

@ -87,22 +87,22 @@ export default {
} }
.folder .table table td .album-art { .folder .table table td .album-art {
width: 3em; width: 3rem;
height: 3em; height: 3rem;
margin-right: 1em; margin-right: 1rem;
background-color: #ccc; background-color: #ccc;
background-image: url(../../assets/images/Jim_Reeves.png); background-image: url(../../assets/images/Jim_Reeves.png);
} }
.folder .table .flex { .folder .table .flex {
position: relative; position: relative;
align-items: center; align-itrems: center;
} }
.folder .table .flex > div > span { .folder .table .flex > div > span {
position: absolute; position: absolute;
bottom: 1.5em; bottom: 1.5rem;
width: calc(100% - 6em); width: calc(100% - 6rem);
} }
td, td,
@ -124,12 +124,12 @@ th {
} }
.folder { .folder {
padding-bottom: 1em; padding-bottom: 1rem;
} }
td .artist { td .artist {
color: #b1b1b1fd; color: #b1b1b1fd;
font-weight: lighter; font-weight: lighter;
margin-right: 0.5em; margin-right: 0.5rem;
} }
</style> </style>

2
src/components/LeftSidebar/Navigation.vue
View File

@ -104,7 +104,7 @@ export default {
.side-nav-container .nav-button .nav-icon { .side-nav-container .nav-button .nav-icon {
height: 24px; height: 24px;
width: 24px; width: 24px;
margin-right: 0.5em; margin-right: 0.5rem;
margin-left: 10px; margin-left: 10px;
} }

26
src/components/RightSideBar/NowPlaying.vue
View File

@ -22,10 +22,10 @@ export default {};
<style> <style>
.now-playing { .now-playing {
height: 5em; height: 5rem;
border-radius: 0.5em; border-radius: 0.5rem;
margin-top: 1em; margin-top: 1rem;
padding: 0.5em; padding: 0.5rem;
background-color: #131313b2; background-color: #131313b2;
display: grid; display: grid;
@ -38,21 +38,21 @@ export default {};
} }
.now-playing .art-tags .album-art { .now-playing .art-tags .album-art {
width: 4.5em; width: 4.5rem;
height: 4.5em; height: 4.5rem;
border-radius: 0.5em; border-radius: 0.5rem;
margin-right: 0.5em; margin-right: 0.5rem;
background-color: #ad1717a8; background-color: #ad1717a8;
background-image: url(../../assets/images/tk.jpg); background-image: url(../../assets/images/tk.jpg);
} }
.now-playing .art-tags hr { .now-playing .art-tags hr {
border: none; border: none;
margin: 0.3em; margin: 0.3rem;
} }
.now-playing .art-tags #title { .now-playing .art-tags #title {
margin: 0; margin: 0;
width: 14em; width: 14rem;
color: #fff; color: #fff;
} }
@ -69,11 +69,11 @@ export default {};
} }
.now-playing .controls * { .now-playing .controls * {
height: 3em; height: 3rem;
width: 3em; width: 3rem;
background-size: 50%; background-size: 50%;
cursor: pointer; cursor: pointer;
border-radius: 0.5em; border-radius: 0.5rem;
} }
.now-playing .controls *:hover { .now-playing .controls *:hover {

79
src/components/RightSideBar/Recommendation.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div class="r-tracks rounded">
<p class="heading">RECOMMENDED TRACKS</p>
<div class="tracks">
<div class="song-item" v-for="song in songs" :key="song">
<div class="album-art image"></div>
<div class="tags">
<p class="title">{{ song.title }}</p>
<hr />
<p class="artist">{{ song.artist }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
setup() {
const songs = [
{
title: "Mockingbird",
artist: "Eminem",
},
{
title: "Slim shady",
artist: "Eminem"
}
];
return { songs };
},
};
</script>
<style>
.r-tracks {
margin-top: .5rem;
background-color: #131313b2;
padding: .5rem;
}
.r-tracks .tracks .song-item {
display: flex;
align-items: center;
padding: 0.5rem;
border-radius: 0.5rem;
}
.r-tracks .tracks .song-item:hover {
background-color: #3a39393d;
cursor: pointer;
}
.r-tracks .tracks .song-item hr {
border: none;
margin: 0.1rem;
}
.r-tracks .tracks .song-item .album-art {
width: 3rem;
height: 3rem;
background-color: #ccc;
margin: 0 0.5rem 0 0;
border-radius: 0.5rem;
background-image: url(../../assets/images/Jim_Reeves.png);
}
.r-tracks .tracks .song-item .artist {
font-size: small;
color: rgba(255, 255, 255, 0.637);
margin: 0;
}
.r-tracks .tracks .song-item .title {
margin: 0;
}
</style>

72
src/components/RightSideBar/Search.vue
View File

@ -86,15 +86,15 @@ export default {
<style> <style>
.right-search { .right-search {
position: relative; position: relative;
border-radius: 1em; border-radius: 1rem;
margin: 0.5em 0 0 0; margin: 0.5rem 0 0 0;
padding: 0.75em; padding: 0.75rem;
background-color: #131313b2; background-color: #131313b2;
overflow: hidden; overflow: hidden;
} }
.right-search .scrollable { .right-search .scrollable {
height: 26em; height: 26rem;
overflow-y: scroll; overflow-y: scroll;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
@ -106,61 +106,61 @@ export default {
.right-search .heading { .right-search .heading {
font-size: small; font-size: small;
position: relative; position: relative;
padding: 1em; padding: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.right-search .heading .more { .right-search .heading .more {
position: absolute; position: absolute;
right: 1em; right: 1rem;
padding: 0.5em; padding: 0.5rem;
user-select: none; user-select: none;
} }
.right-search .heading .more:hover { .right-search .heading .more:hover {
background: rgb(62, 69, 77); background: rgb(62, 69, 77);
border-radius: 0.5em; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
} }
.right-search input { .right-search input {
width: 100%; width: 100%;
border: none; border: none;
border-radius: .5em; border-radius: .5rem;
padding-left: 1em; padding-left: 1rem;
background-color: #4645456c; background-color: #4645456c;
color: rgba(255, 255, 255, 0.479); color: rgba(255, 255, 255, 0.479);
font-size: 1em; font-size: 1rem;
line-height: 3em; line-height: 3rem;
outline: none; outline: none;
} }
.right-search input:focus { .right-search input:focus {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
outline: 0.1em solid #fafafa52; outline: 0.1rem solid #fafafa52;
} }
.right-search input::-webkit-search-cancel-button { .right-search input::-webkit-search-cancel-button {
position: relative; position: relative;
right: 1em; right: 1rem;
cursor: pointer; cursor: pointer;
} }
/* */ /* */
.right-search .tracks-results { .right-search .tracks-results {
border-radius: 0.5em; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
} }
.right-search .tracks-results .heading { .right-search .tracks-results .heading {
padding: 0.5em; padding: 0.5rem;
} }
.right-search .tracks-results .result-item { .right-search .tracks-results .result-item {
display: flex; display: flex;
align-items: center; align-items: center;
height: 4.5em; height: 4.5rem;
background-color: rgba(20, 20, 20, 0.733); background-color: rgba(20, 20, 20, 0.733);
} }
@ -168,16 +168,16 @@ export default {
background-color: rgba(27, 26, 27, 0.589); background-color: rgba(27, 26, 27, 0.589);
} }
.right-search .tracks-results .result-item .album-art { .right-search .tracks-results .result-item .album-art {
width: 4em; width: 4rem;
height: 4em; height: 4rem;
background-color: rgb(27, 150, 74); background-color: rgb(27, 150, 74);
border-radius: 0.5em; border-radius: 0.5rem;
margin: 0 0.5em 0 0.25em; margin: 0 0.5rem 0 0.25rem;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../../assets/images/thriller.jpg);
} }
.right-search hr { .right-search hr {
margin: 0.1em; margin: 0.1rem;
border: none; border: none;
} }
@ -188,9 +188,9 @@ export default {
/* */ /* */
.right-search .albums-results { .right-search .albums-results {
border-radius: 0.5em; border-radius: 0.5rem;
background-color: rgba(8, 3, 1, 0.274); background-color: rgba(8, 3, 1, 0.274);
margin-top: 1em; margin-top: 1rem;
} }
.right-search .albums-results .grid { .right-search .albums-results .grid {
@ -205,24 +205,24 @@ export default {
} }
.right-search .albums-results .result-item .album-art { .right-search .albums-results .result-item .album-art {
height: 7em; height: 7rem;
width: 7em; width: 7rem;
background-color: rgba(26, 26, 26, 0.452); background-color: rgba(26, 26, 26, 0.452);
border-radius: 0.5em; border-radius: 0.5rem;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../../assets/images/thriller.jpg);
} }
.right-search .albums-results .result-item .title { .right-search .albums-results .result-item .title {
width: 7em; width: 7rem;
text-align: center; text-align: center;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
} }
/* */ /* */
.right-search .artists-results { .right-search .artists-results {
border-radius: 0.5em; border-radius: 0.5rem;
background-color: rgba(8, 3, 1, 0.274); background-color: rgba(8, 3, 1, 0.274);
} }
@ -232,11 +232,11 @@ export default {
} }
.right-search .artists-results .result-item .image { .right-search .artists-results .result-item .image {
height: 7em; height: 7rem;
width: 7em; width: 7rem;
border-radius: 50%; border-radius: 50%;
background-color: rgba(16, 65, 14, 0.356); background-color: rgba(16, 65, 14, 0.356);
margin-bottom: 0.5em; margin-bottom: 0.5rem;
background-image: url(../../assets/icons/logo-small.svg); background-image: url(../../assets/icons/logo-small.svg);
background-size: 50%; background-size: 50%;
background-image: url(../../assets/images/thriller.jpg); background-image: url(../../assets/images/thriller.jpg);
@ -244,8 +244,8 @@ export default {
} }
.right-search .artists-results .result-item .name { .right-search .artists-results .result-item .name {
width: 7em; width: 7rem;
text-align: center; text-align: center;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
} }
</style> </style>

81
src/components/RightSideBar/UpNext.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div class="up-next"> <div class="up-next">
<p>COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span></p> <p class="heading">
COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
</p>
<div class="main-item"> <div class="main-item">
<div class="album-art image"></div> <div class="album-art image"></div>
<div class="tags"> <div class="tags">
@ -25,10 +27,10 @@
</template> </template>
<script> <script>
import { ref } from '@vue/reactivity'; import { ref } from "@vue/reactivity";
export default { export default {
props: ["collapser"], props: ["collapser"],
emits: ['updateCollapser'], emits: ["updateCollapser"],
setup(props, context) { setup(props, context) {
const songs = [ const songs = [
{ {
@ -109,13 +111,13 @@ export default {
}, },
]; ];
const collapsed = ref(false) const collapsed = ref(false);
const another_is_open = ref(props.collapser) const another_is_open = ref(props.collapser);
let collapse = () => { let collapse = () => {
collapsed.value = !collapsed.value; collapsed.value = !collapsed.value;
context.emit('updateCollapser') context.emit("updateCollapser");
} };
return { songs, collapsed, collapse, another_is_open }; return { songs, collapsed, collapse, another_is_open };
}, },
@ -124,27 +126,22 @@ export default {
<style> <style>
.up-next { .up-next {
padding: 0.5em; padding: 0.5rem;
margin-top: 1em; margin-top: 1rem;
background-color: #131313b2; background-color: #131313b2;
border-radius: 0.5em; border-radius: 0.5rem;
} }
.up-next > p { .up-next .heading {
position: relative; position: relative;
font-size: small; margin: 0.5rem 0 1rem 0rem;
font-weight: bold;
color: #ffffffb2;
margin: 0.5em 0 1em 1em;
display: flex;
align-items: center;
} }
.up-next > p > span { .up-next > p > span {
position: absolute; position: absolute;
right: 0.5em; right: 0.5rem;
padding: 0.5em; padding: 0.5rem;
border-radius: 0.5em; border-radius: 0.5rem;
user-select: none; user-select: none;
} }
@ -156,37 +153,37 @@ export default {
.up-next .main-item { .up-next .main-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5em; padding: 0.5rem;
border-radius: 0.5em; border-radius: 0.5rem;
cursor: pointer; cursor: pointer;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
} }
.up-next .main-item:hover { .up-next .main-item:hover {
background-color: #aa343441; background-color: #3a39393d;
} }
.up-next .main-item .album-art { .up-next .main-item .album-art {
width: 4.5em; width: 4.5rem;
height: 4.5em; height: 4.5rem;
background-color: #ccc; background-color: #ccc;
margin: 0 0.5em 0 0; margin: 0 0.5rem 0 0;
border-radius: 0.5em; border-radius: 0.5rem;
background-image: url(../../assets/images/htf.jpeg); background-image: url(../../assets/images/htf.jpeg);
} }
.up-next .main-item .tags hr { .up-next .main-item .tags hr {
border: none; border: none;
margin: 0.3em; margin: 0.3rem;
} }
.up-next .main-item .tags .title { .up-next .main-item .tags .title {
width: 20em; width: 20rem;
margin: 0; margin: 0;
} }
.up-next .main-item .tags .artist { .up-next .main-item .tags .artist {
width: 20em; width: 20rem;
margin: 0; margin: 0;
font-size: small; font-size: small;
color: rgba(255, 255, 255, 0.61); color: rgba(255, 255, 255, 0.61);
@ -197,12 +194,12 @@ export default {
} }
.up-next .all-items .scrollable { .up-next .all-items .scrollable {
height: 20em; height: 20rem;
overflow-y: scroll; overflow-y: scroll;
padding: 0.5em; padding: 0.5rem;
margin-top: 0.5em; margin-top: 0.5rem;
background-color: rgba(2, 6, 14, 0.425); background-color: rgba(2, 6, 14, 0.425);
border-radius: 0.5em; border-radius: 0.5rem;
} }
.up-next .all-items p { .up-next .all-items p {
@ -212,8 +209,8 @@ export default {
.up-next .all-items .scrollable .song-item { .up-next .all-items .scrollable .song-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5em; padding: 0.5rem;
border-radius: 0.5em; border-radius: 0.5rem;
} }
.up-next .all-items .scrollable .song-item:hover { .up-next .all-items .scrollable .song-item:hover {
@ -223,15 +220,15 @@ export default {
.up-next .all-items .scrollable .song-item hr { .up-next .all-items .scrollable .song-item hr {
border: none; border: none;
margin: 0.1em; margin: 0.1rem;
} }
.up-next .all-items .album-art { .up-next .all-items .album-art {
width: 3em; width: 3rem;
height: 3em; height: 3rem;
background-color: #ccc; background-color: #ccc;
margin: 0 0.5em 0 0; margin: 0 0.5rem 0 0;
border-radius: 0.5em; border-radius: 0.5rem;
background-image: url(../../assets/images/htf.jpeg); background-image: url(../../assets/images/htf.jpeg);
} }

14
src/views/FolderView.vue
View File

@ -34,21 +34,21 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: #131313b2; background-color: #131313b2;
padding-left: 1em; padding-left: 1rem;
padding-right: 1em; padding-right: 1rem;
padding-top: 5em; padding-top: 5rem;
} }
#f-view-parent .fixed { #f-view-parent .fixed {
position: absolute; position: absolute;
height: min-content; height: min-content;
width: calc(100% - 2em); width: calc(100% - 2rem);
top: .5em; top: .5rem;
} }
#scrollable { #scrollable {
overflow-y: scroll; overflow-y: scroll;
height: calc(100% - 5em); height: calc(100% - 5rem);
padding-right: 1em; padding-right: 1rem;
} }
</style> </style>