weekend werk

app/styles/app.scss

@@ -17,11 +17,32 @@ html {
 }
 
 body {
+  font-family: 'Slabo 27px', serif;
   margin-bottom: $footerHeight;
   position: static;
   height: auto;
 }
 
+#groupControlToggle {
+  padding: 30px;
+  float: left;
+  cursor: pointer;
+  position: relative;
+  right: 50px;
+}
+
+#groupControlToggle md-icon {
+  margin: 0;
+}
+
+#groupControlToggle.on md-icon.md-default-theme  {
+  color: #F12B24 !important;
+}
+
+#groupControlToggle:hover md-icon {
+  color: black !important;
+}
+
 .ember-app {
   padding-bottom: 50px;
 }
@@ -49,7 +70,6 @@ body {
 }
 
 .bridgeFinder .title {
-  font-family: 'Slabo 27px', serif;
   font-size: 30px;
   margin-bottom: 30px;
 }
@@ -60,6 +80,7 @@ body {
     margin: 0 auto;
   }
 }
+
 md-progress-circular {
   margin: 0 auto 20px auto !important;
 }
@@ -76,20 +97,16 @@ md-progress-circular {
 
 // BRIDGE CONTROLS
 .bridgeControls {
+  max-width: 1000px;
   position: relative;
 }
 
-.groupControl {
-
-}
-
 .navigation {
-  margin: 0 auto 0 auto;
+  text-align: center;
   padding: 30px 0 30px 0;
 }
 
 .navigationItem {
-  font-family: 'Slabo 27px', serif;
   font-size: 18px;
   padding: 0 10px 0 10px;
 }
@@ -113,8 +130,25 @@ md-progress-circular {
   overflow: visible;
 }
 
-.groupControl {
+.groupControls {
-  //border-right: 1px solid black;
+  display: none;
+  border-left: 1px solid #C5C5C5;
+  border-bottom: 1px solid #C5C5C5;
+  border-right: 1px solid #C5C5C5;
+  box-shadow: 5px 10px 15px 5px rgba(0,0,0,.1);
+  border-radius: 0 0 5px 5px;
+}
+
+.groupControls.on {
+  width: 300px;
+  top: 48px;
+  left: -5px;
+  position: absolute;
+  display: block;
+  z-index: 1;
+  background-color: white;
+  max-height: 400px;
+  overflow: auto;
 }
 
 .lightGroup {
@@ -184,7 +218,7 @@ md-icon.menu {
 
 .sideNavTitle {
   margin-left: 16px;
-  font-family: 'Slabo 27px', serif;
+  margin-top: 10px;
 }
 
 md-toolbar {
@@ -231,7 +265,7 @@ md-toolbar {
   color: darken(white, 20%) !important;
 }
 
-.groupRow  * .close:hover {
+.close:hover {
   color: darken(#333333, 20%) !important;
 }
 
@@ -261,8 +295,9 @@ md-toolbar {
 }
 
 #playerTimeControls {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
-  font-size: 12px;
+  font-size: 14px;
   top: 0.167em;
   margin-left: 0.833em;
 }
@@ -282,6 +317,32 @@ md-toolbar {
   color: white !important;
 }
 
+#playerArea:before {
+  position: relative;
+  color: white;
+  top: 45%;
+  left: 45%;
+  animation-duration: 1s;
+  opacity: 0;
+  animation-name: fadeOut;
+}
+
+#playerArea.blockAnimation:before{
+  animation-name: none !important;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 0.8;
+    font-size: 24px;
+  }
+
+  to {
+    opacity: 0;
+    font-size: 50px;
+  }
+}
+
 #playerArea {
   height: $playerHeight;
   background-color: black;
@@ -325,10 +386,10 @@ md-toolbar {
 }
 
 .noUi-horizontal .noUi-handle {
-  width: 0.500em;
+  width: 0.400em;
   height: 1.500em;
   left: -0.071em;
-  top: -0.571em;
+  top: -0.500em;
   transition-duration: 0.1s;
   background: $playerDefaultIconColor !important;
 }
@@ -380,6 +441,19 @@ md-toolbar {
   height: 333px;
   margin: 10px auto 0 auto;
   border-radius: 5px;
+  #dragHere {
+    position: absolute;
+    top: 41%;
+    right: 18%;
+    font-size: 20px;
+  }
+  .library-music {
+    position: absolute;
+    top: 50%;
+    right: 34%;
+    font-size: 100px;
+    opacity: 0.5;
+  }
 }
 
 #fileInput {
@@ -389,8 +463,27 @@ md-toolbar {
 }
 
 .playlistItem {
+  height: 45px;
+  font-family: 'Open Sans', sans-serif;
+  padding: 5px;
+  position: relative;
   color: darken(white, 20%);
-  margin: 0.714em 0.357em 0.714em 0.357em;
+  .close {
+    position: absolute;
+    top: 25%;
+    right: 10px;
+  }
+}
+
+.playlistItem.active {
+  background-color: lighten($playListBackgroundColor, 30%);
+}
+
+.playlistItem:hover {
+  background-color: lighten($playListBackgroundColor, 40%);
+  .close {
+    display: block;
+  }
 }
 
 #beatArea {
@@ -404,11 +497,13 @@ md-toolbar {
 
 #beatArea * .noUi-base, #beatArea * .noUi-background {
   background-color: #3F3F3F;
+  cursor: pointer;
 }
 
 #beatArea * .noUi-vertical  {
   height: 170px;
   margin-top: 20px;
+  margin-bottom: 5px;
 }
 
 .beatOption {
@@ -421,12 +516,19 @@ md-toolbar {
 }
 
 #beatSpeakerContainer {
-  position: relative;
   height: $playerBeatAreaHeight;
   padding: 0;
 }
 
+#beatSpeakerContainer md-switch {
+  bottom: 0;
+  position: absolute;
+  margin-left: 0;
+  z-index: 3;
+}
+
 #beatSpeaker {
+  position: relative;
   margin: 20px auto 0 auto;
   background-image: url('images/speaker-outer.png');
   width: 284px;
@@ -438,7 +540,7 @@ md-toolbar {
   height: 186px;
   background-image: url('images/speaker-inner.png');
   position: absolute;
-  top: 21%;
+  top: 16%;
   left: 18%;
 }
 
@@ -465,9 +567,20 @@ md-toolbar {
 
 #vertDivider {
   position: absolute;
-  right: 2.857em;
+  right: 0;
   top: 25%;
-  width: 0.071em;
+  width: 2px;
   height: 50%;
   background-color: white;
 }
+
+#beatHistory {
+  height: 250px;
+  background-color: #CFCFCF;
+  border-radius: 10px;
+  width: 80%;
+  margin: 20px auto;
+  overflow: auto;
+  padding: 10px;
+  box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);
+}