diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js
index d0c3a09..5cbcb8f 100644
--- a/src/js/Playlist/PlaylistsView.js
+++ b/src/js/Playlist/PlaylistsView.js
@@ -90,12 +90,10 @@ class PlaylistsView extends Component {
render() {
- const table =
-
- ;
+ const table = ;
const loadingMessage = loading...
;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 05d0c93..75bcc5a 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -4,6 +4,7 @@ $ui-colour: #131313;
$light-ui: #575757;
$text-colour: white;
$ui-element: #505050;
+$ui-shadow: #404040;
$pad-px: 20px;
@@ -54,7 +55,7 @@ p {
display: inline-block;
- border-radius: 5px;
+ border-radius: 3px;
border: none;
margin: 4px auto;
padding: 15px;
@@ -66,6 +67,7 @@ p {
box-shadow: 0 9px #383838;
text: {
+ shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.14);
align: center;
decoration: none;
}
@@ -77,10 +79,10 @@ p {
}
input[type=text], input[type=password], input[type=number], select {
- padding: 10px;
+ padding: 15px;
background-color: $ui-element;
border: black;
- border-radius: 4px;
+ border-radius: 3px;
color: white;
}
@@ -186,34 +188,48 @@ h1.sectiontitle {
ul.navbar {
list-style-type: none;
- border-radius: 5px 5px;
- /*box-shadow: 3px 3px 1px grey;*/
+ background-color: $light-ui;
margin: 10px;
+ border-radius: 5px;
+ /*box-shadow: 3px 3px 1px grey;*/
padding: 0;
overflow: hidden;
- background-color: $light-ui;
+
+
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-drag: none;
+ -khtml-user-drag: none;
+ -moz-user-drag: none;
+ -o-user-drag: none;
+
+ box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
li {
float: left;
position: -webkit-sticky;
position: sticky;
top: 0;
-
a {
display: block;
color: $text-colour;
text-align: center;
padding: 14px 16px;
+ // padding: 10px;
+ margin: 2px;
+ border-radius: 5px;
text-decoration: none;
- text-shadow: 1px 1px 2px black;
+ text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
&:hover {
- background-color: #080808;
+ background-color: $ui-shadow;
}
}
}
@@ -223,13 +239,24 @@ ul.navbar {
.sidebar {
- background-color: $light-ui;
list-style-type: none;
+ background-color: $light-ui;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
- padding-top: 10px;
- padding-bottom: 10px;
+ // padding-top: 10px;
+ // padding-bottom: 10px;
+
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-drag: none;
+ -khtml-user-drag: none;
+ -moz-user-drag: none;
+ -o-user-drag: none;
+
+ box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black;
tr {
top: 0;
@@ -237,7 +264,7 @@ ul.navbar {
td {
- height: 50px;
+ // height: 50px;
text-align: center;
vertical-align: center;
@@ -253,13 +280,13 @@ ul.navbar {
padding: 10px;
text-decoration: none;
- text-shadow: 1px 1px 2px black;
+ text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
&:hover {
- background-color: black;
+ background-color: $ui-shadow;
}
}
}