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;
-height: 8px;
-background-color: $background;
-border: solid transparent;
-}
-
-.nicescroll::-webkit-scrollbar: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);
-}
 
-.nicescroll::-webkit-scrollbar-thumb:active {
-background: rgba(0,0,0,0.4);
+.nicescroll {
+  &::-webkit-scrollbar {
+    background-color: $background;
+    border: solid transparent;
+    height: 8px;
+    width: 8px;
+    &:hover {
+      background-color: $background;
+      border-left: 1px solid rgba(0,0,0,.12);
+      border-right: 1px solid rgba(0,0,0,.12);
+    }
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.2);
+    &:active {
+      background: rgba(0,0,0,0.4);
+    }
+  }
 }

src/styles/global/_overlaybar.scss

@@ -1,92 +1,110 @@
+/*
+ * 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;
-	padding:3px 8px 0px 30px;
-	vertical-align:middle;
-	background: rgba(0,0,0,0.2);
-	min-height:36px;
-	color: #ccc;
-	text-shadow: 0 0 5px black;
-	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;
+  background: $componentfg3;
+  color: $bordercolor;
+  min-height: 36px;
+  padding: 3px 8px 0 30px;
+  position: absolute;
+  text-shadow: 0 0 5px black;
+  vertical-align: middle;
+  @include user-select(none);
+  input[type="radio"], 
+  input[type="checkbox"] {
+    margin-top: 2px;
+  }
 }
 
 .overlaybar:hover {
-	background: rgba(0,0,0,0.5);
+  background: $componentfg2;
 }
 
 .overlaybar.notvisible {
-	background: transparent;
-	pointer-events: none;
+  background: transparent;
+  pointer-events: none;
 }
 .overlaybar.notvisible:hover {
-	background: transparent;
+  background: transparent;
 }
 
 .overlaybar .btn {
-	text-shadow: none;
+  text-shadow: none;
 }
 
 .overlaybar .btn-link {
-	text-shadow: 0 0 5px black;
+  text-shadow: 0 0 5px black;
 }
 
 .overlaybar .overlaybarbutton {
-	font-size:20px;
-	vertical-align:middle;
-	position:absolute;
-	left: 3px;
-	top: 1px;
-	padding:6px;
-	display:block;
-	color:#ccc;
-	z-index:15;
-	opacity:0.7;
-	pointer-events: auto;
+  font-size: 20px;
+  vertical-align: middle;
+  position: absolute;
+  left: 3px;
+  top: 1px;
+  padding: 6px;
+  display: block;
+  color: $bordercolor;
+  z-index: 15;
+  opacity: .7;
+  pointer-events: auto;
 }
 
 .overlaybar .overlaybarcontent {
-	display:inline-block;
-	margin-left:.5em;
-	margin-bottom:0px;
-	max-width:60%;
+  display: inline-block;
+  margin-left: .5em;
+  margin-bottom: 0;
+  max-width: 60%;
 }
 
 .overlaybarcontent > * {
-	padding-right:.5em;
+  padding-right: .5em;
 }
 
 .overlaybarcontent .input-group {
-	max-width:160px;
+  max-width: 160px;
 }
 
 .overlaybar label {
-	padding-top:7px !important;
+  padding-top: 7px !important;
 }
 
 .overlaybar .overlaybaroverlay {
-	display:none;
-	opacity: 0.7;
-	text-align:left;
-	margin-left:0.5em;
-	padding-top:2px;
+  display: none;
+  opacity: .7;
+  text-align: left;
+  margin-left: .5em;
+  padding-top: 2px;
 }
 
 .overlaybar.notvisible {
-	.overlaybarcontent {
-		display: none;
-	}
-	.overlaybaroverlay {
-		display: block;
-	}
+  .overlaybarcontent {
+    display: none;
+  }
+  .overlaybaroverlay {
+    display: block;
+  }
 }
 
 .overlaybar .form-group > * {
-	float: left;
-	padding-top: 0px;
-}
+  float: left;
+  padding-top: 0;
+}