From e92e6ada275bc9f1bdf84e7b3d1bb44698d42ffd Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 3 Dec 2018 18:54:20 -0800
Subject: [PATCH] Start using Winamp colors

---
 src/App.css | 41 +++++++++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 336454fd..bc9db3c3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,7 +17,7 @@ $color5: rgba(104, 75, 58, 1);
 
 body {
   margin: 0;
-  background-color: rgba(59, 83, 90, 0.9);
+  background-color: rgb(0, 0, 0);
 }
 
 h1 a {
@@ -28,7 +28,7 @@ button {
   border: none;
   padding: 0;
   margin: 0;
-  background-color: rgba(247, 181, 76, 1);
+  background-color: rgb(176, 195, 205);
   margin-right: 25px;
   border: none;
   font-size: 100%;
@@ -40,11 +40,25 @@ button {
   padding-right: 1rem;
   border-radius: 9999px;
   outline: none;
-  color: #4e4102;
+  color: rgb(35, 41, 60);
   font-weight: 550;
   cursor: pointer;
+  border-left: 2px solid rgb(235, 255, 255);
+  border-top: 2px solid rgb(235, 255, 255);
+  border-bottom: 2px solid rgb(58, 71, 88);
+  border-right: 2px solid rgb(58, 71, 88);
 }
 
+/*
+We need to move the text before we can enable this.
+button:active {
+  border-right: 2px solid rgb(235, 255, 255);
+  border-bottom: 2px solid rgb(235, 255, 255);
+  border-top: 2px solid rgb(58, 71, 88);
+  border-left: 2px solid rgb(58, 71, 88);
+}
+*/
+
 .zoom-on-hover {
   transition: transform 200ms ease-in-out;
 }
@@ -57,7 +71,13 @@ button {
   width: 100%;
   position: fixed;
   top: 0;
-  background: #4c84b2;
+  background: rgb(17, 17, 25);
+  background: linear-gradient(
+    90deg,
+    rgba(17, 17, 25, 1) 0%,
+    rgba(40, 39, 66, 1) 66%,
+    rgba(25, 25, 39, 1) 100%
+  );
   text-align: left;
   height: 40px; /* This matches the margin-top for #infinite-skins */
   z-index: 5;
@@ -69,6 +89,7 @@ button {
   display: flex;
   flex-direction: row;
   align-items: center;
+  border-bottom: 2px solid rgb(32, 31, 51);
 }
 
 #search h1 #logo {
@@ -89,7 +110,6 @@ button {
   border: none;
   font-size: 100%;
   box-sizing: border-box;
-  border-width: 0.125rem;
   line-height: 1.15;
   height: 100%;
   padding-left: 1rem;
@@ -97,7 +117,16 @@ button {
   border-radius: 9999px;
   outline: none;
   flex-grow: 1;
-  color: rgba(59, 83, 90, 0.9);
+  background-color: rgb(0, 0, 0);
+  color: rgb(29, 226, 5);
+  border-top: 2px solid rgb(32, 31, 51);
+  border-left: 2px solid rgb(32, 31, 51);
+  border-bottom: 2px solid rgb(87, 86, 102);
+  border-right: 2px solid rgb(87, 86, 102);
+}
+
+#search input::placeholder {
+  color: rgb(35, 41, 60);
 }
 
 #infinite-skins {