changed colors

src/renderer/less/pages.less

@@ -820,9 +820,88 @@
   }
 }
 
+//Home
+.home-page {
+  top: 0;
+  padding-top: var(--navbarHeight);
+
+  .md-btn-replay {
+    background: var(--replayGradient);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+  .md-btn-replay--hero {
+    font-size: 1em;
+    padding: 16px;
+    background: var(--replayGradient);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+    margin-top: 1em;
+    font-size: 0.9em;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  .artist-feed-card {
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    z-index: 1;
+    background: black;
+    width: 80%;
+    height: 96%;
+    overflow: scroll;
+    border-radius: 10px;
+  }
+
+  .col.madeforyou-col {
+    width: 420px;
+    min-width: 0px;
+    max-width: 420px;
+  }
+
+  .well.artistfeed-well {
+    margin-top: 0px;
+    height: 392px;
+    align-content: flex-start;
+  }
+
+  .hint-text {
+    font-size: 0.9rem;
+    color: rgb(200 200 200 / 70%);
+  }
+
+  .user-icon {
+    border-radius: 100%;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+    box-shadow: var(--mediaItemShadow-Shadow);
+    margin: 16px;
+  }
+
+  .well.profile-well {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .name {
+      margin: 4px;
+      font-weight: 500;
+    }
+
+    .handle {
+      margin: 4px;
+      opacity: 0.7;
+      font-weight: 500;
+    }
+  }
+}
+
 // Replay
 .replay-page {
-  --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
   --replayTextShadow: 0px 3px 2px #6f3f52;
 
   .replay-viewport {

src/renderer/style.less

@@ -38,6 +38,7 @@
   --songProgressColor: var(--keyColor);
   --songProgressBackground: #333;
   --textColor: #eee;
+  --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
 }
 
 html,
@@ -1646,85 +1647,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 100%;
 }
 
-.home-page {
-  top: 0;
-  padding-top: var(--navbarHeight);
-
-  .md-btn-replay {
-    background: linear-gradient(143deg, #6e006b, #6e6600);
-    border: 0px;
-    box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
-    text-transform: uppercase;
-    font-weight: bold;
-  }
-  .md-btn-replay--hero {
-    font-size: 1em;
-    padding: 16px;
-    background: linear-gradient(45deg, #6e006b, #6e6600);
-    border: 0px;
-    box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
-    margin-top: 1em;
-    font-size: 0.9em;
-    text-transform: uppercase;
-    font-weight: bold;
-  }
-
-  .artist-feed-card {
-    position: absolute;
-    bottom: 0;
-    left: 10%;
-    z-index: 1;
-    background: black;
-    width: 80%;
-    height: 96%;
-    overflow: scroll;
-    border-radius: 10px;
-  }
-
-  .col.madeforyou-col {
-    width: 420px;
-    min-width: 0px;
-    max-width: 420px;
-  }
-
-  .well.artistfeed-well {
-    margin-top: 0px;
-    height: 392px;
-    align-content: flex-start;
-  }
-
-  .hint-text {
-    font-size: 0.9rem;
-    color: rgb(200 200 200 / 70%);
-  }
-
-  .user-icon {
-    border-radius: 100%;
-    width: 128px;
-    height: 128px;
-    overflow: hidden;
-    box-shadow: var(--mediaItemShadow-Shadow);
-    margin: 16px;
-  }
-
-  .well.profile-well {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .name {
-      margin: 4px;
-      font-weight: 500;
-    }
-
-    .handle {
-      margin: 4px;
-      opacity: 0.7;
-      font-weight: 500;
-    }
-  }
-}
-
 /* Cider */
 
 .more-btn-round {