Fix scss-lint error QualifyingElement.

src/styles/components/_audiovideo.scss

@@ -274,7 +274,7 @@
   width: 40px;
   z-index: 5;
 
-  button {
+  .btn {
     color: #ccc;
     cursor: pointer;
     display: block;
@@ -283,27 +283,6 @@
     width: 40px;
   }
 
-  button.renderer-auditorium {
-    position: relative;
-
-    span:before {
-      content: '\f183';
-      left: 50%;
-      margin-left: -.8em;
-      margin-top: -.5em;
-      position: absolute;
-      top: 50%;
-    }
-
-    span:after {
-      content: '\f183';
-      margin-right: -.9em;
-      margin-top: -.5em;
-      position: absolute;
-      right: 50%;
-      top: 50%;
-    }
-  }
 }
 
 .remoteVideo {
@@ -346,6 +325,28 @@
   }
 }
 
+.renderer-auditorium {
+  position: relative;
+
+  span:before {
+    content: '\f183';
+    left: 50%;
+    margin-left: -.8em;
+    margin-top: -.5em;
+    position: absolute;
+    top: 50%;
+  }
+
+  span:after {
+    content: '\f183';
+    margin-right: -.9em;
+    margin-top: -.5em;
+    position: absolute;
+    right: 50%;
+    top: 50%;
+  }
+}
+
 .renderer-smally {
   background: #000;
   border-right: 0;

src/styles/components/_presentation.scss

@@ -112,7 +112,7 @@
   max-width: 100%;
 }
 
-.presentation .overlaybar a.overlaybar-button {
+.presentation .overlaybar .overlaybar-button {
   font-size: 20px;
   line-height: 28px;
   padding: 4px 6px;
@@ -124,11 +124,11 @@
   height: 30px;
 }
 
-.presentation .overlaybar a.btn-prev {
+.presentation .overlaybar .btn-prev {
   left: 40px;
 }
 
-.presentation .overlaybar a.btn-next {
+.presentation .overlaybar .btn-next {
   left: auto;
   right: 0;
 }

src/styles/components/_youtubevideo.scss

@@ -145,7 +145,7 @@
   vertical-align: middle;
 }
 
-.volumebar input[type="range"] {
+.volumebar .bar {
   -webkit-appearance: none;
   background-color: #aaa;
   border: 1px solid #aaa;
@@ -154,26 +154,26 @@
   width: 100px;
 }
 
-.volumebar input[type="range"]::-webkit-slider-thumb {
+.volumebar .bar::-webkit-slider-thumb {
   -webkit-appearance: none;
   background-color: #fff;
   height: 20px;
   width: 6px;
 }
 
-.volumebar input[type="range"]::-moz-range-track {
+.volumebar .bar::-moz-range-track {
   background: #aaa;
   border: 0;
 }
 
-.volumebar input[type="range"]::-moz-range-thumb {
+.volumebar .bar::-moz-range-thumb {
   background-color: #fff;
   border-radius: 0;
   height: 20px;
   width: 6px;
 }
 
-.volumebar input[type="range"]::-moz-focusring {
+.volumebar .bar::-moz-focusring {
   outline: 1px solid #aaa;
   outline-offset: -1px;
 }

src/styles/global/_overlaybar.scss

@@ -33,6 +33,7 @@
 }
 
 .overlaybar {
+  // scss-lint:disable QualifyingElement
   &:hover {
     background: $componentfg2;
   }

static/partials/youtubevideo.html

@@ -40,7 +40,7 @@
 						<div class="volumecontrol">
 							<button class="btn volume-button" ng-class="{'active': volumebarVisible}" ng-click="volumebarVisible=!volumebarVisible"><i class="fa fa-volume-up" ng-class="{'fa-volume-up': volume &gt;= 60, 'fa-volume-down': volume &lt; 60}"></i></button>
 							<div ng-show="volumebarVisible" class="volumebar">
-								<input type="range" min="0" max="100" step="1" ng-model="volume" />
+								<input type="range" class="bar" min="0" max="100" step="1" ng-model="volume" />
 							</div>
 						</div>
 					</div>