minor color refactors

2026-06-03 20:13:02 +00:00 · 2022-02-22 09:58:09 +03:00
parent 92c2443c7c
commit 5e48496ccb
22 changed files with 20 additions and 29 deletions
@@ -14,7 +14,7 @@
        <AlbumArt :collapsed="collapsed" />
      </div>
    </div>
-    <div class="content card-dark">
+    <div class="content">
      <div class="search-box"></div>
      <router-view />
    </div>
@@ -1,6 +1,5 @@
 .right-search {
  position: relative;
-  background-color: $card-dark;
  display: grid;
  grid-template-rows: min-content 1fr;
  overflow: hidden;
@@ -11,7 +11,7 @@

 body {
  margin: 0;
-  background: #0d0e0e;
+  background-color: $card-dark;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -58,7 +58,7 @@ a {
 }

 .card-dark {
-  background-color: $card-dark;
+  background-color: #fff;
 }

 .hidden {
@@ -93,14 +93,13 @@ button {
    "bottom-bar bottom-bar bottom-bar";
  width: 100vw;
  height: 100vh;
-  background: rgba(0, 0, 0, 0.575);
 }

 .l-sidebar {
  width: 15rem;
  grid-area: l-sidebar;
  padding-top: 0.5rem;
-  background-color: $card-dark;
+  // background-color: $card-dark;
 }

 .bottom-bar {
@@ -1,5 +1,5 @@
 <template>
-  <div class="al-bio rounded border card-dark">
+  <div class="al-bio rounded border">
    <div class="left rounded border">
      <div class="rect rounded"></div>
      <div class="circle"></div>
@@ -1,6 +1,6 @@
 <template>
  <div class="album-h">
-    <div class="a-header rounded card-dark">
+    <div class="a-header rounded">
      <div class="info">
        <div class="top">
          <div class="h">Album</div>
@@ -122,7 +122,6 @@ export default {
  padding: $small;
  margin-top: $small;
  overflow: hidden;
-  background-color: $card-dark;

  .all-albums {
    height: calc(100% - 4rem);
@@ -55,7 +55,6 @@ export default {
 .top-albums {
  height: 14rem;
  border-radius: $small;
-  background-color: $card-dark;
  padding: $small;

  .heading {
@@ -54,7 +54,6 @@ export default {
  padding: $small;
  margin-top: $small;
  overflow: hidden;
-  background-color: $card-dark;

  .all-albums {
    height: calc(100% - 4rem);
@@ -50,7 +50,6 @@ export default {
 .top-artists {
  height: 14rem;
  border-radius: $small;
-  background-color: $card-dark;
  padding: $small;

  .heading {
@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar border card-dark">
+  <div class="b-bar border">
    <div class="grid">
      <SongCard :collapsed="props.collapsed" />
      <div class="controlsx rounded">
@@ -91,7 +91,6 @@ function loadAlbum(title, albumartist) {
  width: 100%;
  height: 100%;
  overflow-y: auto;
-  background-color: $card-dark;

  &::-webkit-scrollbar {
    display: none;
@@ -56,7 +56,6 @@ export default {
  position: relative;
  height: 15em;
  width: calc(100%);
-  background-color: $card-dark;
  padding: $small;
  border-radius: $small;
  user-select: none;
@@ -1,6 +1,6 @@
 <template>
  <div class="p-header rounded">
-    <div class="info card-dark">
+    <div class="info">
      <div>
        <div class="name">Makaveli Radio</div>
        <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
@@ -7,7 +7,6 @@
 <style lang="scss">
 .r-home {
  height: calc(100% - 1rem);
-  background-color: $card-dark;
  padding: 0 $small $small 0;
 }
 </style>
@@ -13,7 +13,7 @@
          <UpNext />
        </div>
      </div>
-      <div class="tab-keys card-dark border">
+      <div class="tab-keys border">
        <Tabs :current_tab="current_tab" :tabs="tabs" @changeTab="changeTab" />
      </div>
    </div>
@@ -56,7 +56,6 @@ export default {

 <style lang="scss">
 .up-next {
-  background-color: $card-dark;
  padding: $small $small $small 0;
  overflow: hidden;
  height: 100%;
@@ -118,7 +117,7 @@ export default {
      height: 100%;
      padding: $small;
      overflow: auto;
-      background-color: $card-dark;
+      // background-color: $card-dark;
      scrollbar-color: grey transparent;
    }
  }
@@ -38,7 +38,6 @@ export default {
 <style lang="scss">
 .r-tracks {
  margin-top: 0.5rem;
-  background-color: $card-dark;
  padding: 0.5rem;
 }

@@ -31,7 +31,6 @@ export default {
  padding: $small;
  border-radius: .75rem;
  text-align: left !important;
-  background-color: #726c7227;

  &:hover {
    background-color: #1b3688cb;
@@ -48,6 +47,7 @@ export default {
    width: 7rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
+    font-weight: bold;
  }

  .artistsx {
@@ -34,13 +34,12 @@ export default {
  .artist-image {
    width: 7em;
    height: 7em;
-    border-radius: 50%;
+    border: solid;
+    border-radius: 60%;
    margin-bottom: $small;
    background-size: 7rem 7rem;
-    background: url("../../assets/images/null.webp");
-    background-size: 100% 100%;
+    background-position: center;
    background-repeat: no-repeat;
-    background-position: top;
    transition: all 0.5s ease-in-out;
    border: solid 1px rgba(5, 5, 5, 0.055);
    box-shadow: 0 0 80px rgb(0, 0, 0);
@@ -81,7 +81,6 @@ export default {

  .songs {
    padding: $small;
-    background-color: $card-dark;
    min-height: calc(100% - 30rem);
  }

@@ -1,5 +1,5 @@
 <template>
-  <div id="f-view-parent" class="border rounded card-dark">
+  <div id="f-view-parent" class="border rounded">
    <div class="fixed">
      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
    </div>
@@ -131,6 +131,11 @@ export default {
  padding: 4rem $small 0 $small;
  overflow: hidden;
  margin: $small;
+
+  .h {
+    font-size: 2rem;
+    font-weight: bold;
+  }
 }

 #f-view-parent .fixed {
@@ -50,7 +50,6 @@ export default {
    display: none;
  }
  .songlist {
-    background-color: $card-dark;
    padding: $small;
    min-height: 100%;
  }