diff --git a/Selector.Web/CSS/index.scss b/Selector.Web/CSS/index.scss
index 14133fa..39e42c5 100644
--- a/Selector.Web/CSS/index.scss
+++ b/Selector.Web/CSS/index.scss
@@ -1,5 +1,85 @@
@import "now.scss";
body {
- background-color: #c6c6c6;
-}
\ No newline at end of file
+ background-color: #121212;
+ color: #efefef;
+}
+
+.navbar-bg {
+ background-color: #232323;
+}
+
+.form-element {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.menu-icon {
+ vertical-align: middle;
+ float: right;
+}
+
+.unselected img {
+ filter: brightness(0.4);
+}
+
+.black-img {
+ filter: brightness(0);
+}
+
+.central {
+ vertical-align: middle;
+}
+
+.data-value {
+ color: grey;
+}
+
+.separator-border {
+ border-bottom: 1px solid #191919;
+}
+
+.dash-underline {
+ text-decoration: dotted;
+ text-decoration-line: underline;
+ text-decoration-thickness: 2px;
+ text-underline-offset: 5px;
+
+ &:hover {
+ text-decoration: solid;
+ text-decoration-line: underline;
+ text-decoration-thickness: 1.5px;
+ }
+}
+
+.dash-underline-lg {
+ font-size: 24px;
+ text-decoration: dotted;
+ text-decoration-line: underline;
+ text-decoration-thickness: 4px;
+ text-underline-offset: 5px;
+
+ &:hover {
+ text-decoration: solid;
+ text-decoration-line: underline;
+ text-decoration-thickness: 3.4px;
+ }
+}
+
+.link-dark {
+ color: #a3a3a3;
+
+ &:hover {
+ color: #a3a3a3;
+ }
+}
+
+input[type=text], input[type=email], input[type=tel], input[type=password] {
+ background-color: #444444 !important;
+ border-color: #545454;
+ color: $text-color;
+
+ &:focus {
+ color: $text-color;
+ }
+}
diff --git a/Selector.Web/CSS/now.scss b/Selector.Web/CSS/now.scss
index 1b57a6e..c697c0e 100644
--- a/Selector.Web/CSS/now.scss
+++ b/Selector.Web/CSS/now.scss
@@ -3,13 +3,14 @@
}
$text-color: white;
+$shadow-color: #1e1e1e;
.card {
- background-color: grey;
+ background-color: #333232;
color: $text-color;
margin: 5px;
padding: 15px;
- box-shadow: 4px 4px 2px #5e5e5e;
+ box-shadow: 4px 4px 2px $shadow-color;
transition: box-shadow 0.5s;
&:hover {
@@ -21,10 +22,10 @@ $text-color: white;
.now-playing-card {
// max-width: 300px;
- text-shadow: 2px 2px 2px #5e5e5e;
+ text-shadow: 2px 2px 2px $shadow-color;
.cover-art {
- box-shadow: 4px 4px 2px #5e5e5e;
+ box-shadow: 4px 4px 2px $shadow-color;
margin-bottom: 15px;
}
@@ -85,7 +86,7 @@ $text-color: white;
.popularity-progress {
margin-top: 10px;
margin-bottom: 20px;
- box-shadow: 2px 2px 2px #5e5e5e;
+ box-shadow: 2px 2px 2px $shadow-color;
}
.subtle-link {
diff --git a/Selector.Web/Pages/Index.cshtml b/Selector.Web/Pages/Index.cshtml
index 70ebfeb..cda4653 100644
--- a/Selector.Web/Pages/Index.cshtml
+++ b/Selector.Web/Pages/Index.cshtml
@@ -6,4 +6,8 @@
Welcome
+
+
Selector is a tool for monitoring Spotify usage.
+
+
Now Playing
\ No newline at end of file
diff --git a/Selector.Web/Pages/Shared/_Layout.cshtml b/Selector.Web/Pages/Shared/_Layout.cshtml
index da68f40..27d5f52 100644
--- a/Selector.Web/Pages/Shared/_Layout.cshtml
+++ b/Selector.Web/Pages/Shared/_Layout.cshtml
@@ -9,17 +9,13 @@