tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-08 20:25:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

convert $small padding -> $smaller padding

Browse Source
This commit is contained in:
geoffrey45 2022-02-12 10:13:33 +03:00
parent 25e6c5ce0c
commit 88e1d42ab5
12 changed files with 58 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/Search/Search.scss
View File

@ -1,6 +1,5 @@
.right-search { .right-search {
position: relative; position: relative;
border-radius: $small;
background-color: #03000eab; background-color: #03000eab;
display: grid; display: grid;
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;

9
src/assets/css/global.scss
View File

@ -16,6 +16,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
overflow: hidden;
} }
.heading { .heading {
@ -39,7 +40,7 @@ a {
} }
.border { .border {
border: solid 1px rgba(39, 38, 38, 0.329); border: solid 1px #27262654;
} }
.separator { .separator {
@ -88,9 +89,6 @@ button {
"bottom-bar bottom-bar bottom-bar"; "bottom-bar bottom-bar bottom-bar";
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background: rgba(0, 0, 0, 0.575); background: rgba(0, 0, 0, 0.575);
} }
@ -133,8 +131,9 @@ button {
.content { .content {
grid-area: content; grid-area: content;
border-radius: 0.25rem;
overflow: hidden; overflow: hidden;
padding: 0;
border-left: solid 1px #27262654;
} }
.r-sidebar { .r-sidebar {

2
src/components/AlbumsExplorer/AlbumList.vue
View File

@ -153,7 +153,7 @@ export default {
} }
&:hover { &:hover {
background-color: rgb(87, 74, 74); background-color: #574a4a;
.play { .play {
transition: 0.5s all ease; transition: 0.5s all ease;

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

@ -24,6 +24,7 @@ const props = defineProps({
<style lang="scss"> <style lang="scss">
.f-container { .f-container {
padding: $small 0 $smaller 0; padding: $small 0 $smaller 0;
overflow: hidden;
} }
.no_f { .no_f {

4
src/components/RightSideBar/Home/Main.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="r-home rounded border"> <div class="r-home border">
<NowPlaying /> <NowPlaying />
<Recommendations /> <Recommendations />
</div> </div>
@ -10,7 +10,7 @@
height: 100%; height: 100%;
width: 31rem; width: 31rem;
background-color: $card-dark; background-color: $card-dark;
padding: $small; padding: $smaller $small;
} }
</style> </style>

38
src/components/RightSideBar/Main.vue
View File

@ -13,7 +13,7 @@
<UpNext /> <UpNext />
</div> </div>
</div> </div>
<div class="tab-keys card-dark border"> <div class="tab-keys card-dark">
<Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" /> <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
</div> </div>
</div> </div>
@ -26,6 +26,7 @@ import Search from "../Search.vue";
import UpNext from "./Queue.vue"; import UpNext from "./Queue.vue";
import Tabs from "./Tabs.vue"; import Tabs from "./Tabs.vue";
import Main from "./Home/Main.vue"; import Main from "./Home/Main.vue";
import perks from "../../composables/perks";
const DashBoard = Main; const DashBoard = Main;
@ -40,22 +41,29 @@ const default_tab = tabs.home;
const current_tab = ref(default_tab); const current_tab = ref(default_tab);
function changeTab(tab) { function changeTab(tab) {
new Promise((resolve) => {
current_tab.value = tab; current_tab.value = tab;
resolve();
setTimeout(() => {}, 300);
}).then(() => {
if (tab === tabs.queue) {
perks.focusCurrent();
}
});
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.r-sidebar { .r-sidebar {
width: 34.5em; width: 34em;
margin: $small 0 $small 0;
@include phone-only { // @include phone-only {
display: none; // display: none;
} // }
@include tablet-landscape { // @include tablet-landscape {
width: 3rem; // width: 3rem;
} // }
.grid { .grid {
height: 100%; height: 100%;
@ -66,9 +74,9 @@ function changeTab(tab) {
grid-area: content; grid-area: content;
width: 31rem; width: 31rem;
@include tablet-landscape { // @include tablet-landscape {
display: none; // display: none;
} // }
.r-search { .r-search {
height: 100%; height: 100%;
@ -84,12 +92,14 @@ function changeTab(tab) {
} }
.tab-keys { .tab-keys {
width: 3rem;
right: 0; right: 0;
height: 100%; height: 100%;
position: absolute; position: absolute;
grid-area: tabs; grid-area: tabs;
padding: $small; // padding: $small 0;
border-radius: $small 0 0 $small; border-radius: 0;
overflow: hidden;
} }
} }
} }

1
src/components/RightSideBar/Queue.vue
View File

@ -71,7 +71,6 @@ export default {
<style lang="scss"> <style lang="scss">
.up-next { .up-next {
background-color: $card-dark; background-color: $card-dark;
border-radius: 0.5rem;
padding: $small; padding: $small;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;

27
src/components/RightSideBar/Tabs.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="r-tabs"> <div class="r-tabs">
<button v-for="tab in props.tabs" <div v-for="tab in props.tabs"
@click="changeTab(tab)" @click="changeTab(tab)"
:key="tab" :key="tab"
class="image t-item rounded" class="image t-item"
:class="{ active_tab: props.current_tab == tab }, `${tab}`" :class="{ active_tab: props.current_tab == tab }, `${tab}`"
></button> ></div>
<div> <div>
</div> </div>
</div> </div>
@ -33,31 +33,40 @@ function changeTab(tab) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $small; gap: $small;
margin-top: $small;
margin-left: $small;
.t-item { .t-item {
width: 2rem; float: right;
height: 2rem; width: 100%;
height: 2.45rem;
background-size: 1.5rem; background-size: 1.5rem;
border-radius: 0;
border-radius: $small 0 0 $small;
&:hover {
background-color: rgba(128, 128, 128, 0.281);
}
} }
.active_tab { .active_tab {
border-right: solid; border-right: solid;
border-radius: $small 0 0 $small; background-color: rgba(17, 123, 223, 0.192);
} }
.search { .search {
background-image: url("../../assets/icons/search.svg"); background-image: url("../../assets/icons/search.svg");
background-color: rgba(35, 35, 66, 0.247); // background-color: rgba(35, 35, 66, 0.247);
} }
.queue { .queue {
background-image: url("../../assets/icons/queue.svg"); background-image: url("../../assets/icons/queue.svg");
background-color: rgba(46, 25, 33, 0.445); // background-color: rgba(46, 25, 33, 0.445);
} }
.home { .home {
background-image: url("../../assets/icons/dashboard.svg"); background-image: url("../../assets/icons/dashboard.svg");
background-color: rgba(148, 102, 50, 0.445); // background-color: rgba(148, 102, 50, 0.445);
} }
} }
</style> </style>

2
src/components/shared/SongItem.vue
View File

@ -150,7 +150,7 @@ export default {
} }
& { & {
& td { & td {
background-color: rgb(5, 80, 150); background-color: #3131313b;
} }
td:first-child { td:first-child {

1
src/components/shared/TrackItem.vue
View File

@ -66,7 +66,6 @@ const playThis = (song) => {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: $blue;
} }
hr { hr {

2
src/views/FolderView.vue
View File

@ -131,7 +131,7 @@ export default {
background-color: $card-dark; background-color: $card-dark;
padding: 4rem $small 0 $small; padding: 4rem $small 0 $small;
overflow: hidden; overflow: hidden;
margin: $small 0 $small 0; margin: $smaller;
} }
#f-view-parent .fixed { #f-view-parent .fixed {

6
src/views/PlaylistView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="playlist-view rounded"> <div class="playlist-view">
<Header :playlist_info="playlist_info" /> <Header :playlist_info="playlist_info" />
<div class="separator no-border"></div> <div class="separator no-border"></div>
@ -40,8 +40,8 @@ export default {
<style lang="scss"> <style lang="scss">
.playlist-view { .playlist-view {
height: calc(100% - 1rem); height: calc(100% - $small);
margin-top: $small; margin: $smaller $smaller 0 $smaller;
overflow: auto; overflow: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {