Update nicescroll to scss.

Update overlaybar numbers, syntax, and changeout colors for variables.

src/styles/global/_nicescroll.scss

@@ -18,23 +18,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.nicescroll::-webkit-scrollbar {
+
-width: 8px;
+.nicescroll {
-height: 8px;
+  &::-webkit-scrollbar {
     background-color: $background;
     border: solid transparent;
-}
+    height: 8px;
-
+    width: 8px;
-.nicescroll::-webkit-scrollbar:hover {
+    &:hover {
       background-color: $background;
       border-left: 1px solid rgba(0,0,0,.12);
       border-right: 1px solid rgba(0,0,0,.12);
     }
-
-.nicescroll::-webkit-scrollbar-thumb {
-background: rgba(0,0,0,0.2);
   }
-
+  &::-webkit-scrollbar-thumb {
-.nicescroll::-webkit-scrollbar-thumb:active {
+    background: rgba(0,0,0,0.2);
+    &:active {
       background: rgba(0,0,0,0.4);
     }
+  }
+}

src/styles/global/_overlaybar.scss

@@ -1,23 +1,41 @@
+/*
+ * Spreed Speak Freely.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed Speak Freely.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
 .overlaybar {
-	position:absolute;
+  background: $componentfg3;
-	padding:3px 8px 0px 30px;
+  color: $bordercolor;
-	vertical-align:middle;
-	background: rgba(0,0,0,0.2);
   min-height: 36px;
-	color: #ccc;
+  padding: 3px 8px 0 30px;
+  position: absolute;
   text-shadow: 0 0 5px black;
-	input[type="radio"], input[type="checkbox"] {
+  vertical-align: middle;
+  @include user-select(none);
+  input[type="radio"], 
+  input[type="checkbox"] {
     margin-top: 2px;
   }
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
 }
 
 .overlaybar:hover {
-	background: rgba(0,0,0,0.5);
+  background: $componentfg2;
 }
 
 .overlaybar.notvisible {
@@ -44,16 +62,16 @@
   top: 1px;
   padding: 6px;
   display: block;
-	color:#ccc;
+  color: $bordercolor;
   z-index: 15;
-	opacity:0.7;
+  opacity: .7;
   pointer-events: auto;
 }
 
 .overlaybar .overlaybarcontent {
   display: inline-block;
   margin-left: .5em;
-	margin-bottom:0px;
+  margin-bottom: 0;
   max-width: 60%;
 }
 
@@ -71,9 +89,9 @@
 
 .overlaybar .overlaybaroverlay {
   display: none;
-	opacity: 0.7;
+  opacity: .7;
   text-align: left;
-	margin-left:0.5em;
+  margin-left: .5em;
   padding-top: 2px;
 }
 
@@ -88,5 +106,5 @@
 
 .overlaybar .form-group > * {
   float: left;
-	padding-top: 0px;
+  padding-top: 0;
 }