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

refactor colors

Browse Source
This commit is contained in:
geoffrey45 2022-03-15 10:38:53 +03:00
parent 33a9aa2c30
commit f11005e523
22 changed files with 157 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
padding: $small;
.grid {
background-color: $gray;
background-color: $primary;
display: grid;
height: 100%;
padding-right: $small;

62
src/assets/css/ProgressBar.scss
View File

@ -5,36 +5,44 @@ input[type="range"] {
height: 0.3rem;
border-radius: 5px;
background-size: 0 100%;
background: $black linear-gradient($blue, $blue) no-repeat;
background: $gray linear-gradient($accent, $accent) no-repeat;
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 0.9rem;
width: 0.9rem;
border-radius: 0 50% 50% 0;
background: $accent;
}
&::-moz-range-thumb {
-webkit-appearance: none;
height: 0rem;
border-radius: 50%;
background: $accent;
border: none;
}
&:hover {
&::-moz-range-thumb {
height: .8rem;
}
}
&::-ms-thumb {
-webkit-appearance: none;
display: none;
height: 0.9rem;
width: 0.9rem;
border-radius: 0 50% 50% 0;
background: $accent;
border: none;
}
}
/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 0.8rem;
width: 0.8rem;
border-radius: 50%;
background: $blue;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
height: 0.8rem;
width: 0.8rem;
border-radius: 50%;
background: $blue;
border: none;
}
input[type="range"]::-ms-thumb {
-webkit-appearance: none;
height: 0.8rem;
width: 0.8rem;
border-radius: 50%;
background: $blue;
border: none;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: $pink;
}

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

@ -1,48 +0,0 @@
.right-search {
position: relative;
display: grid;
grid-template-rows: min-content 1fr;
overflow: hidden;
width: auto;
height: 100%;
padding: $small $small 0 0;
.no-res {
text-align: center;
display: grid;
height: calc(100% - $small);
place-items: center;
font-size: 2rem;
transition: all 0.3s ease;
line-height: 4rem !important;
.highlight {
padding: $small;
background-color: rgb(29, 26, 26);
}
}
.heading {
padding: $medium;
border-radius: $small;
margin-bottom: $small;
text-align: center !important;
font-size: 2rem;
color: $white;
}
.input {
display: flex;
align-items: center;
position: relative;
}
}
.right-search .scrollable {
overflow-y: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}

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

@ -36,9 +36,12 @@ $indigo: rgb(94, 92, 230);
$teal: rgb(64, 200, 224);
// 60 30 10
$primary: $blue;
$primary: $gray4;
$accent: $indigo;
$cta: $red;
$cta: $blue;
$danger: $red;
$track-hover: $gray4;
$context: $gray4;
// media query mixins
@mixin phone-only {

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

@ -11,7 +11,7 @@
body {
margin: 0;
background-color: #171c28;
background-color: #0f1218;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,

13
src/components/AlbumView/Header.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="album-h" @contextmenu="hideShowContext" id="album-h">
<div class="a-header">
<div class="album-h">
<div class="a-header rounded">
<div
class="image art shadow-lg"
class="image art shadow-lg rounded"
:style="{
backgroundImage: `url(&quot;${props.album_info.image}&quot;)`,
}"
@ -49,12 +49,6 @@ function playAlbum() {
<style lang="scss">
.album-h {
@include tablet-landscape {
grid-template-columns: 1fr;
}
gap: $small;
position: relative;
height: 14rem;
}
@ -64,6 +58,7 @@ function playAlbum() {
align-items: center;
padding: 1rem;
height: 100%;
background-color: $gray4;
background-image: linear-gradient(
to bottom,
$gray3 0%,

2
src/components/FolderView/FolderItem.vue
View File

@ -28,7 +28,7 @@ const props = defineProps({
display: flex;
align-items: center;
position: relative;
background-color: $gray;
background-color: $gray4;
transition: all 0.2s ease;
border-radius: .75rem;

3
src/components/FolderView/Header.vue
View File

@ -18,7 +18,7 @@
</div>
<input
type="text"
class="search-input border"
class="search-input"
placeholder="Search this folder"
v-model="query"
/>
@ -85,6 +85,7 @@ export default {
font-size: 1rem;
line-height: 2.2rem;
outline: none;
border: 1px solid $gray3;
}
}

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

@ -8,7 +8,7 @@
<div class="album-header">Album</div>
<div class="duration-header">Duration</div>
</div>
<div>
<div class="songlist">
<SongItem
v-for="(song, index) in props.songs"
:key="song"
@ -138,5 +138,12 @@ function loadAlbum(title, albumartist) {
display: none;
}
}
.songlist {
.context-on {
background-color: $gray4;
color: $white !important;
}
}
}
</style>

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

@ -140,3 +140,54 @@ search.$subscribe((mutation, state) => {
});
});
</script>
<style lang="scss">
.right-search {
position: relative;
display: grid;
grid-template-rows: min-content 1fr;
overflow: hidden;
width: auto;
height: 100%;
padding: $small $small 0 0;
.no-res {
text-align: center;
display: grid;
height: calc(100% - $small);
place-items: center;
font-size: 2rem;
transition: all 0.3s ease;
line-height: 4rem !important;
.highlight {
padding: $small;
background-color: rgb(29, 26, 26);
}
}
.heading {
padding: $medium;
border-radius: $small;
margin-bottom: $small;
text-align: center !important;
font-size: 2rem;
color: $white;
}
.input {
display: flex;
align-items: center;
position: relative;
}
}
.right-search .scrollable {
overflow-y: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
</style>

13
src/components/RightSideBar/SearchInput.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="gsearch-input">
<Filters :filters="search.filters" @removeFilter="removeFilter" />
<div class="input-loader border">
<div class="input-loader">
<input
id="search"
class="rounded"
v-model="search.query"
placeholder="Aretha Franklin"
placeholder="Search"
type="text"
@keyup.backspace="removeLastFilter"
/>
@ -44,8 +45,7 @@ function removeLastFilter() {
<style lang="scss">
.gsearch-input {
margin-top: $small;
padding: 0 $small;
padding: $small;
display: flex;
@include tablet-landscape {
@ -59,7 +59,7 @@ function removeLastFilter() {
._loader {
position: absolute;
top: -0.25rem;
top: -0.15rem;
right: 2rem;
}
@ -68,7 +68,8 @@ function removeLastFilter() {
align-items: center;
width: 100%;
border: none;
line-height: 2rem;
border: solid 1px $primary;
line-height: 2.25rem;
background-color: transparent;
color: rgb(255, 255, 255);
font-size: 1rem;

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

@ -25,7 +25,7 @@ const tabs = useTabStore();
padding: $small;
.cont {
background-color: $gray3;
background-color: $primary;
display: flex;
gap: $small;
height: 100%;

5
src/components/Search/AlbumGrid.vue
View File

@ -36,14 +36,13 @@ export default {
<style lang="scss">
.right-search .albums-results {
border-radius: 0.5rem;
background: #0f131b44;
margin-top: $small;
padding: $small;
overflow-x: hidden;
border: solid 1px $gray;
border: solid 1px $gray3;
.result-item:hover {
background-color: $gray3;
background-color: $gray4;
}
.grid {

12
src/components/Search/ArtistGrid.vue
View File

@ -38,22 +38,16 @@ export default {
border-radius: 0.5rem;
padding: $small;
margin-bottom: $small;
border: solid 1px $gray;
background-color: #150d167c;
border: solid 1px $gray3;
.xartist {
background: linear-gradient(
to bottom,
$gray2 20%,
$gray4 50%,
$gray 80%
);
background-color: $gray;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .75rem;
gap: 0.75rem;
}
}
</style>

5
src/components/Search/Filters.vue
View File

@ -29,11 +29,12 @@ export default {
<style lang="scss">
.gsearch-input .filter {
display: flex;
// height: 2rem;
// border: solid;
.item {
transition: all 0.2s ease-in-out;
background-color: $gray3;
height: 2.5rem;
&:hover {
width: 4rem;

6
src/components/Search/LoadMore.vue
View File

@ -33,11 +33,11 @@ export default {
display: grid;
transition: all 0.5s ease;
color: rgba(255, 255, 255, 0.87) !important;
background-color: transparent;
border: solid 1px $gray;
background-color: $accent;
// border: solid 1px $gray;
&:hover {
background-color: $gray !important;
background-color: $blue !important;
width: 50%;
}
}

5
src/components/Search/Options.vue
View File

@ -48,6 +48,8 @@ const options = [
.right-search .options {
display: flex;
margin-bottom: $small;
border: solid 1px $gray3;
// background: $gray3;
.item {
margin: $small;
@ -58,7 +60,7 @@ const options = [
overflow: hidden;
transition: all 0.2s ease-in-out;
position: relative;
background-color: $gray4;
background-color: $gray3;
.title {
position: absolute;
@ -75,6 +77,7 @@ const options = [
&:hover {
width: 5.5rem;
background-color: $gray5;
.title {
visibility: visible;

3
src/components/Search/TracksGrid.vue
View File

@ -45,6 +45,7 @@ function loadMore() {
.right-search .tracks-results {
border-radius: 0.5rem;
padding: $small;
border: 1px solid $gray;
border: 1px solid $gray3;
// background: ;
}
</style>

4
src/components/shared/AlbumCard.vue
View File

@ -4,7 +4,7 @@
name: 'AlbumView',
params: { album: album.album, artist: album.artist },
}"
class="result-item shadow-sm"
class="result-item"
>
<div class="_idk">
<div
@ -34,10 +34,10 @@ export default {
padding: $small;
border-radius: 0.75rem;
text-align: left !important;
border: solid 2px transparent;
background-color: $gray;
color: #ffffffde !important;
transition: all 0.5s ease;
// border: solid 1px $gray3;
._idk {
position: relative;

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

@ -108,10 +108,7 @@ const current = state.current;
</script>
<style lang="scss">
.context-on {
background-color: $gray4;
color: $white !important;
}
//
.songlist-item {
display: grid;

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

@ -2,9 +2,12 @@
<div
class="track-item h-1"
@click="playThis(props.track)"
:class="{
currentInQueue: current.trackid === props.track.trackid,
}"
:class="[
{
currentInQueue: current.trackid === props.track.trackid,
},
{ 'context-on': context_on },
]"
@contextmenu="showContextMenu"
>
<div
@ -39,12 +42,20 @@ import useContextStore from "@/stores/context.js";
import trackContext from "../../composables/track_context";
const contextStore = useContextStore();
const context_on = ref(false);
const showContextMenu = (e) => {
e.preventDefault();
e.stopPropagation();
contextStore.showContextMenu(e, trackContext(props.track));
context_on.value = true;
contextStore.$subscribe((mutation, state) => {
if (!state.visible) {
context_on.value = false;
}
});
};
const props = defineProps({
track: Object,
@ -66,6 +77,11 @@ const playThis = (song) => {
background-color: $gray3;
}
.context-on {
background-color: $gray4;
color: $white !important;
}
.track-item {
width: 26.55rem;
display: flex;
@ -77,7 +93,7 @@ const playThis = (song) => {
&:hover {
cursor: pointer;
background-color: $gray5 !important;
background-color: $gray4 !important;
}
hr {

2
src/views/FolderView.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="f-view-parent" class="border rounded">
<div id="f-view-parent" class="rounded">
<div class="fixed">
<Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
</div>