minor color refactors

This commit is contained in:
geoffrey45
2022-02-22 09:58:09 +03:00
parent 92c2443c7c
commit 5e48496ccb
22 changed files with 20 additions and 29 deletions
+1 -1
View File
@@ -14,7 +14,7 @@
<AlbumArt :collapsed="collapsed" /> <AlbumArt :collapsed="collapsed" />
</div> </div>
</div> </div>
<div class="content card-dark"> <div class="content">
<div class="search-box"></div> <div class="search-box"></div>
<router-view /> <router-view />
</div> </div>
-1
View File
@@ -1,6 +1,5 @@
.right-search { .right-search {
position: relative; position: relative;
background-color: $card-dark;
display: grid; display: grid;
grid-template-rows: min-content 1fr; grid-template-rows: min-content 1fr;
overflow: hidden; overflow: hidden;
+3 -4
View File
@@ -11,7 +11,7 @@
body { body {
margin: 0; margin: 0;
background: #0d0e0e; background-color: $card-dark;
color: #fff; color: #fff;
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";
@@ -58,7 +58,7 @@ a {
} }
.card-dark { .card-dark {
background-color: $card-dark; background-color: #fff;
} }
.hidden { .hidden {
@@ -93,14 +93,13 @@ button {
"bottom-bar bottom-bar bottom-bar"; "bottom-bar bottom-bar bottom-bar";
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: rgba(0, 0, 0, 0.575);
} }
.l-sidebar { .l-sidebar {
width: 15rem; width: 15rem;
grid-area: l-sidebar; grid-area: l-sidebar;
padding-top: 0.5rem; padding-top: 0.5rem;
background-color: $card-dark; // background-color: $card-dark;
} }
.bottom-bar { .bottom-bar {
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="al-bio rounded border card-dark"> <div class="al-bio rounded border">
<div class="left rounded border"> <div class="left rounded border">
<div class="rect rounded"></div> <div class="rect rounded"></div>
<div class="circle"></div> <div class="circle"></div>
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="album-h"> <div class="album-h">
<div class="a-header rounded card-dark"> <div class="a-header rounded">
<div class="info"> <div class="info">
<div class="top"> <div class="top">
<div class="h">Album</div> <div class="h">Album</div>
@@ -122,7 +122,6 @@ export default {
padding: $small; padding: $small;
margin-top: $small; margin-top: $small;
overflow: hidden; overflow: hidden;
background-color: $card-dark;
.all-albums { .all-albums {
height: calc(100% - 4rem); height: calc(100% - 4rem);
@@ -55,7 +55,6 @@ export default {
.top-albums { .top-albums {
height: 14rem; height: 14rem;
border-radius: $small; border-radius: $small;
background-color: $card-dark;
padding: $small; padding: $small;
.heading { .heading {
@@ -54,7 +54,6 @@ export default {
padding: $small; padding: $small;
margin-top: $small; margin-top: $small;
overflow: hidden; overflow: hidden;
background-color: $card-dark;
.all-albums { .all-albums {
height: calc(100% - 4rem); height: calc(100% - 4rem);
@@ -50,7 +50,6 @@ export default {
.top-artists { .top-artists {
height: 14rem; height: 14rem;
border-radius: $small; border-radius: $small;
background-color: $card-dark;
padding: $small; padding: $small;
.heading { .heading {
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="b-bar border card-dark"> <div class="b-bar border">
<div class="grid"> <div class="grid">
<SongCard :collapsed="props.collapsed" /> <SongCard :collapsed="props.collapsed" />
<div class="controlsx rounded"> <div class="controlsx rounded">
-1
View File
@@ -91,7 +91,6 @@ function loadAlbum(title, albumartist) {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: $card-dark;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@@ -56,7 +56,6 @@ export default {
position: relative; position: relative;
height: 15em; height: 15em;
width: calc(100%); width: calc(100%);
background-color: $card-dark;
padding: $small; padding: $small;
border-radius: $small; border-radius: $small;
user-select: none; user-select: none;
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="p-header rounded"> <div class="p-header rounded">
<div class="info card-dark"> <div class="info">
<div> <div>
<div class="name">Makaveli Radio</div> <div class="name">Makaveli Radio</div>
<div class="metrics rounded border">45 Tracks 3 Hours 4 Minutes</div> <div class="metrics rounded border">45 Tracks 3 Hours 4 Minutes</div>
@@ -7,7 +7,6 @@
<style lang="scss"> <style lang="scss">
.r-home { .r-home {
height: calc(100% - 1rem); height: calc(100% - 1rem);
background-color: $card-dark;
padding: 0 $small $small 0; padding: 0 $small $small 0;
} }
</style> </style>
+1 -1
View File
@@ -13,7 +13,7 @@
<UpNext /> <UpNext />
</div> </div>
</div> </div>
<div class="tab-keys card-dark border"> <div class="tab-keys border">
<Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" /> <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
</div> </div>
</div> </div>
+1 -2
View File
@@ -56,7 +56,6 @@ export default {
<style lang="scss"> <style lang="scss">
.up-next { .up-next {
background-color: $card-dark;
padding: $small $small $small 0; padding: $small $small $small 0;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
@@ -118,7 +117,7 @@ export default {
height: 100%; height: 100%;
padding: $small; padding: $small;
overflow: auto; overflow: auto;
background-color: $card-dark; // background-color: $card-dark;
scrollbar-color: grey transparent; scrollbar-color: grey transparent;
} }
} }
@@ -38,7 +38,6 @@ export default {
<style lang="scss"> <style lang="scss">
.r-tracks { .r-tracks {
margin-top: 0.5rem; margin-top: 0.5rem;
background-color: $card-dark;
padding: 0.5rem; padding: 0.5rem;
} }
+1 -1
View File
@@ -31,7 +31,6 @@ export default {
padding: $small; padding: $small;
border-radius: .75rem; border-radius: .75rem;
text-align: left !important; text-align: left !important;
background-color: #726c7227;
&:hover { &:hover {
background-color: #1b3688cb; background-color: #1b3688cb;
@@ -48,6 +47,7 @@ export default {
width: 7rem; width: 7rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: bold;
} }
.artistsx { .artistsx {
+3 -4
View File
@@ -34,13 +34,12 @@ export default {
.artist-image { .artist-image {
width: 7em; width: 7em;
height: 7em; height: 7em;
border-radius: 50%; border: solid;
border-radius: 60%;
margin-bottom: $small; margin-bottom: $small;
background-size: 7rem 7rem; background-size: 7rem 7rem;
background: url("../../assets/images/null.webp"); background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
border: solid 1px rgba(5, 5, 5, 0.055); border: solid 1px rgba(5, 5, 5, 0.055);
box-shadow: 0 0 80px rgb(0, 0, 0); box-shadow: 0 0 80px rgb(0, 0, 0);
-1
View File
@@ -81,7 +81,6 @@ export default {
.songs { .songs {
padding: $small; padding: $small;
background-color: $card-dark;
min-height: calc(100% - 30rem); min-height: calc(100% - 30rem);
} }
+6 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div id="f-view-parent" class="border rounded card-dark"> <div id="f-view-parent" class="border rounded">
<div class="fixed"> <div class="fixed">
<Header :path="path" :first_song="songs[0]" @search="updateQueryString" /> <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
</div> </div>
@@ -131,6 +131,11 @@ export default {
padding: 4rem $small 0 $small; padding: 4rem $small 0 $small;
overflow: hidden; overflow: hidden;
margin: $small; margin: $small;
.h {
font-size: 2rem;
font-weight: bold;
}
} }
#f-view-parent .fixed { #f-view-parent .fixed {
-1
View File
@@ -50,7 +50,6 @@ export default {
display: none; display: none;
} }
.songlist { .songlist {
background-color: $card-dark;
padding: $small; padding: $small;
min-height: 100%; min-height: 100%;
} }