mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-03 20:13:02 +00:00
minor color refactors
This commit is contained in:
+1
-1
@@ -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,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;
|
||||||
|
|||||||
@@ -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,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,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,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">
|
||||||
|
|||||||
@@ -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,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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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%;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user