Fix scss-lint error MergeableSelector.

src/styles/components/_audiovideo.scss

@@ -26,9 +26,7 @@
   right: 0;
   top: $minbarheight;
   user-select: none;
-}
 
-#audiovideo {
   @include breakpt($breakpoint-video-small, max-width, only screen) {
     right: 0;
   }
@@ -109,9 +107,7 @@
   video {
     object-fit: cover;
   }
-}
 
-.audiovideo {
   .remoteContainer {
     bottom: 0;
     left: 0;
@@ -159,9 +155,8 @@
     transition-property: opacity;
     width: 100%;
   }
-}
 
-.audiovideo .remoteVideos {
+  .remoteVideos {
     bottom: 0;
     left: 0;
     opacity: 0;
@@ -178,7 +173,30 @@
     }
   }
 
-.audiovideo .remoteVideo {
+  .overlayActions {
+    background: $video-overlayactions;
+    bottom: 0;
+    height: 140px;
+    left: 0;
+    margin: auto 0;
+    opacity: 0;
+    padding: 3px 0;
+    position: absolute;
+    top: 0;
+    width: 40px;
+    z-index: 5;
+
+    .btn {
+      color: #ccc;
+      cursor: pointer;
+      display: block;
+      outline: 0;
+      text-shadow: 0 0 5px #000;
+      width: 40px;
+    }
+  }
+
+  .remoteVideo {
     background: $video-background;
     display: inline-block;
     max-height: 100%;
@@ -196,6 +214,10 @@
     &.onlyaudio {
       background: $video-onlyaudio-background;
       //visibility: visible;
+
+      .onlyaudio {
+        display: block;
+      }
     }
 
     .onlyaudio {
@@ -216,16 +238,12 @@
       visibility: hidden;
     }
 
-  &.onlyaudio .onlyaudio {
-    display: block;
-  }
-
     &.dummy .onlyaudio {
       display: block;
     }
 
     .peerActions {
-    // scss-lint:disable SelectorDepth
+      // scss:lint:disable NestingDepth, SelectorDepth
       bottom: 5%;
       left: 40px;
       opacity: 0;
@@ -262,29 +280,6 @@
       z-index: 8;
     }
   }
-
-.audiovideo .overlayActions {
-  background: $video-overlayactions;
-  bottom: 0;
-  height: 140px;
-  left: 0;
-  margin: auto 0;
-  opacity: 0;
-  padding: 3px 0;
-  position: absolute;
-  top: 0;
-  width: 40px;
-  z-index: 5;
-
-  .btn {
-    color: #ccc;
-    cursor: pointer;
-    display: block;
-    outline: 0;
-    text-shadow: 0 0 5px #000;
-    width: 40px;
-  }
-
 }
 
 .remoteVideo {
@@ -327,28 +322,6 @@
   }
 }
 
-.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 {
   // scss-lint:disable SelectorDepth
   background: #000;
@@ -457,6 +430,26 @@
 }
 
 .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%;
+  }
+
   .remoteContainer {
     border-left: 40px solid #000;
   }
@@ -467,10 +460,6 @@
     top: 180px;
     width: 320px;
 
-    .overlayLogo {
-      display: none;
-    }
-
     video {
       height: 100%;
       margin-top: -9px;

src/styles/components/_buddylist.scss

@@ -76,9 +76,7 @@
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.buddylist {
   &.loading {
     .buddylistloading {
       display: block;
@@ -139,13 +137,11 @@
   position: relative;
   text-align: left;
   width: 100%;
-}
 
-.buddy:hover {
+  &:hover {
     background: $buddylist-action-background;
   }
 
-.buddy {
   &.withSubline .buddy1,
   &.contact .buddy1 {
     top: 15px;
@@ -156,10 +152,17 @@
     display: block;
   }
 
-  &.hovered .buddyactions {
+  &.hovered {
+
+    .buddyactions {
       right: 0;
     }
 
+    .buddysessions {
+      max-height: 999px;
+    }
+  }
+
   .fa.contact:before {
     content: '\f006';
   }
@@ -249,9 +252,8 @@
     white-space: nowrap;
     width: 120px;
   }
-}
 
-.buddy .buddyactions {
+  .buddyactions {
     background: $buddylist-action-background;
     height: 66px;
     line-height: 66px;
@@ -292,25 +294,23 @@
       padding-top: 10px;
     }
 
-  li {
+    ul li {
+      // scss-lint:disable NestingDepth
       list-style-type: none;
       margin-bottom: 2px;
       margin-left: 0;
 
+      .btn-group {
+        visibility: hidden;
+      }
+
       &:hover .btn-group {
         visibility: visible;
       }
     }
 
-  .btn-group {
-    visibility: hidden;
-  }
-
     .currentsession .buddy3 {
       font-weight: bold;
     }
   }
-
-.buddy.hovered .buddysessions {
-  max-height: 999px;
 }

src/styles/components/_buddypicturecapture.scss

@@ -61,11 +61,11 @@
     top: 0;
     visibility: hidden;
     z-index: 5;
-  }
 
-  .videoFlash.flash {
+    &.flash {
       visibility: visible;
     }
+  }
 
   .preview {
     left: 0;

src/styles/components/_buddypictureupload.scss

@@ -39,6 +39,7 @@
   }
 
   .showUploadPicture {
+    // scss-lint:disable NestingDepth
     background-color: $componentbg;
     border: 1px solid $bordercolor;
     height: 200px;
@@ -52,12 +53,16 @@
 
     &.imgData {
       background-color: #000;
-    }
 
-    &.imgData .chooseUploadPicture {
+      .chooseUploadPicture {
         display: none;
       }
 
+      &:hover .imageUtilites {
+        visibility: visible;
+      }
+    }
+
     .chooseUploadPicture {
       color: $componentfg4;
       left: 0;
@@ -95,10 +100,6 @@
     }
   }
 
-  .showUploadPicture.imgData:hover .imageUtilites {
-    visibility: visible;
-  }
-
   .moveHorizontal {
     position: relative;
     top: -4px;

src/styles/components/_chat.scss

@@ -135,6 +135,7 @@
 }
 
 .chat {
+  // scss-lint:disable NestingDepth
   background: $chat-background;
   bottom: 0;
   display: none;
@@ -143,109 +144,106 @@
   position: absolute;
   right: 0;
   top: 0;
+
+  &.newmessage {
+    .chatheadertitle:after {
+      content: '***';
+      position: absolute;
+      right: 32px;
+      top: 2px;
     }
 
-.chat {
-  &.active {
-    &.visible {
-      display: block;
+    .chatheader {
+      animation: newmessage 1s ease -.3s infinite;
+    }
   }
 
-    .chatbody {
-      // nothing
+  &.active.visible {
+    display: block;
   }
 
-    .chatheader {
-      // nothing
+  &.with_pictures .message {
+    &.is_self {
+      padding-right: 54px;
+
+      .timestamp {
+        right: 58px;
+      }
     }
+
+    &.is_remote {
+      padding-left: 58px;
     }
   }
 
-.chatmenu {
-  height: 36px;
+  .chatbodybottom {
+    background: $chat-bottom-background;
+    bottom: 1px;
     left: 0;
-  padding: 2px 4px;
+    margin: 0 auto;
     position: absolute;
     right: 0;
-  top: 36px;
 
     @include breakpt($breakpoint-chat-small, max-height) {
-    display: none;
+      height: auto;
     }
   }
 
-.chatbody {
-  border-left: 1px solid $bordercolor;
-  bottom: -1px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 74px;
+  .typinghint {
+    color: $chat-typing;
+    font-size: .8em;
+    height: 14px;
+    overflow: hidden;
+    padding: 0 6px;
+    white-space: nowrap;
 
     @include breakpt($breakpoint-chat-small, max-height) {
-    border-top: 1px solid $bordercolor;
-    top: 0;
-    top: 0;
+      display: none;
     }
   }
 
-.chatheader {
-  background: $chat-header;
-  border-bottom: 1px solid $bordercolor;
-  border-left: 1px solid $bordercolor;
-  height: 36px;
-  left: 0;
-  line-height: 34px;
-  padding: 0 4px 0 8px;
-  position: absolute;
-  right: 0;
-  top: 0;
+  .inputbox {
+    position: relative;
 
     @include breakpt($breakpoint-chat-small, max-height) {
-    display: none;
+      height: auto;
     }
 
-  .chatstatusicon {
-    cursor: pointer;
-    display: block;
-    font-size: 1.4em;
-    height: 36px;
-    left: 0;
+    .btn {
+      display: none;
+      padding: .5em 1em;
       position: absolute;
-    text-align: center;
-    top: 0;
-    width: 36px;
+      right: 6px;
+      top: 1px;
     }
 
-  .chatheadertitle {
-    display: inline;
-    padding-left: 28px;
+    > div {
+      border-top: 1px solid $bordercolor;
+    }
   }
 
-  .ctrl {
-    color: $chat-ctrl;
-    position: absolute;
-    right: 1px;
-    top: 0;
+  .input {
+    border-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    display: block;
+    height: 54px;
+    margin: 0;
+    max-height: 54px; /* FF hack */
+    resize: none;
+    width: 100%;
 
-    .#{$fa-css-prefix} {
-      cursor: pointer;
-      padding: 6px;
-    }
+    @include breakpt($breakpoint-chat-small, max-height) {
+      max-height: 2.5em;
     }
 
-  span {
-    display: inline-block;
-    max-width: 60%;
-    overflow: hidden;
-    pointer-events: none;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
+    &:active,
+    &:focus {
+      border-color: $chat-input-border-color;
     }
   }
 
-.chat .outputbox {
+  .outputbox {
     bottom: 75px;
     left: 0;
     position: absolute;
@@ -257,7 +255,7 @@
     }
   }
 
-.chat .output {
+  .output {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -278,21 +276,8 @@
     }
   }
 
-.chat.with_pictures .message {
-  &.is_self {
-    padding-right: 54px;
-
-    .timestamp {
-      right: 58px;
-    }
-  }
-
-  &.is_remote {
-    padding-left: 58px;
-  }
-}
-
-.chat .message {
+  .message {
+    // scss-lint:disable DuplicateProperty
     background: $chat-msg-background;
     border: 1px solid $chat-msg-border;
     border-radius: 6px;
@@ -310,23 +295,6 @@
       padding-left: 0;
     }
 
-  li {
-    line-height: 1.1em;
-    margin: 4px 0;
-    padding-left: 1.2em;
-    position: relative;
-
-    &:before {
-      color: $chat-msg-default-icon-color;
-      content: '\f075';
-      font-family: FontAwesome;
-      left: 0;
-      position: absolute;
-      text-align: center;
-      width: 12px;
-    }
-  }
-
     .timestamp {
       color: $chat-timestamp;
       font-size: .8em;
@@ -350,15 +318,23 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-}
 
-.chat .message {
-  &.is_self li:before {
+    li {
+      line-height: 1.1em;
+      margin: 4px 0;
+      padding-left: 1.2em;
+      position: relative;
+
+      &:before {
         color: $chat-msg-default-icon-color;
-    transform: scale(-1, 1);
+        content: '\f075';
+        font-family: FontAwesome;
+        left: 0;
+        position: absolute;
+        text-align: center;
+        width: 12px;
       }
 
-  li {
       &.unread:before {
         color: $chat-msg-unread-icon-color;
         content: $chat-msg-unread-icon;
@@ -389,13 +365,6 @@
         content: $chat-msg-read-icon;
       }
     }
-}
-
-.chat .message {
-  &.is_self .buddyPicture {
-    left: auto;
-    right: 4px;
-  }
 
     .buddyPicture {
       background: $actioncolor1;
@@ -425,10 +394,7 @@
         top: 0;
       }
     }
-}
 
-.chat .message {
-  // scss-lint:disable DuplicateProperty
     &:before,
     &:after {
       border-style: solid;
@@ -479,20 +445,34 @@
         bottom: auto;
         right: -11px;
       }
+
+      li:before {
+        color: $chat-msg-default-icon-color;
+        transform: scale(-1, 1);
+      }
+
+      .buddyPicture {
+        left: auto;
+        right: 4px;
+      }
     }
 
     &.with_name {
       // none
     }
+
     &.with_hoverimage {
+
       .buddyPicture {
         overflow: visible;
         z-index: initial;
+
         &:hover .buddyInfoActions {
           height: 40px;
           opacity: 1;
         }
       }
+
       .buddyInfoActions {
         cursor: default;
         display: inline-block;
@@ -505,14 +485,17 @@
         transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
         white-space: nowrap;
         z-index: 1;
+
         .btn-group {
           display: block;
           margin: 0 auto;
           width: 55px;
         }
+
         .btn-primary {
           padding: 2px 5px;
         }
+
         .fa {
           color: #fff;
           line-height: 24px;
@@ -520,73 +503,89 @@
       }
     }
   }
+}
 
-.chat {
-  .chatbodybottom {
-    background: $chat-bottom-background;
-    bottom: 1px;
+.chatmenu {
+  height: 36px;
   left: 0;
-    margin: 0 auto;
+  padding: 2px 4px;
   position: absolute;
   right: 0;
+  top: 36px;
 
   @include breakpt($breakpoint-chat-small, max-height) {
-      height: auto;
+    display: none;
   }
 }
 
-  .typinghint {
-    color: $chat-typing;
-    font-size: .8em;
-    height: 14px;
-    overflow: hidden;
-    padding: 0 6px;
-    white-space: nowrap;
+.chatbody {
+  border-left: 1px solid $bordercolor;
+  bottom: -1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 74px;
 
   @include breakpt($breakpoint-chat-small, max-height) {
-      display: none;
+    border-top: 1px solid $bordercolor;
+    top: 0;
+    top: 0;
   }
 }
 
-  .inputbox {
-    position: relative;
+.chatheader {
+  background: $chat-header;
+  border-bottom: 1px solid $bordercolor;
+  border-left: 1px solid $bordercolor;
+  height: 36px;
+  left: 0;
+  line-height: 34px;
+  padding: 0 4px 0 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
 
   @include breakpt($breakpoint-chat-small, max-height) {
-      height: auto;
+    display: none;
   }
 
-    .btn {
-      display: none;
-      padding: .5em 1em;
+  .chatstatusicon {
+    cursor: pointer;
+    display: block;
+    font-size: 1.4em;
+    height: 36px;
+    left: 0;
     position: absolute;
-      right: 6px;
-      top: 1px;
+    text-align: center;
+    top: 0;
+    width: 36px;
   }
 
-    > div {
-      border-top: 1px solid $bordercolor;
-    }
+  .chatheadertitle {
+    display: inline;
+    padding-left: 28px;
   }
 
-  .input {
-    border-color: transparent;
-    border-radius: 0;
-    box-shadow: none;
-    display: block;
-    height: 54px;
-    margin: 0;
-    max-height: 54px; /* FF hack */
-    resize: none;
-    width: 100%;
+  .ctrl {
+    color: $chat-ctrl;
+    position: absolute;
+    right: 1px;
+    top: 0;
 
-    @include breakpt($breakpoint-chat-small, max-height) {
-      max-height: 2.5em;
+    .#{$fa-css-prefix} {
+      cursor: pointer;
+      padding: 6px;
     }
-
-    &:active,
-    &:focus {
-      border-color: $chat-input-border-color;
   }
+
+  span {
+    display: inline-block;
+    max-width: 60%;
+    overflow: hidden;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
   }
 }
 
@@ -595,16 +594,3 @@
   50% {background-color: $componentbg;}
   100% {background-color: $actioncolor1;}
 }
-
-.chat.newmessage {
-  .chatheadertitle:after {
-    content: '***';
-    position: absolute;
-    right: 32px;
-    top: 2px;
-  }
-
-  .chatheader {
-    animation: newmessage 1s ease -.3s infinite;
-  }
-}

src/styles/components/_fileinfo.scss

@@ -27,9 +27,23 @@
   padding: 1em;
   position: relative;
   text-align: center;
+
+  &.downloader {
+    .anim {
+      margin-left: -40px;
+    }
+
+    .file-info-size {
+      margin-bottom: 10px;
+    }
+  }
+
+  &.downloading {
+    .file-info-size {
+      border-color: $fileinfo-downloading-size-border;
+    }
   }
 
-.file-info {
   > div {
     position: relative;
     z-index: 3;
@@ -54,6 +68,37 @@
     text-align: left;
     top: 14px;
   }
+
+  .uploader {
+    // scss-lint:disable NestingDepth
+    .file-info-speed {
+      bottom: 6px;
+    }
+
+    .actions {
+      margin-left: 30px;
+      opacity: 0;
+    }
+
+    .anim {
+      margin-left: 0;
+    }
+
+    .hovercontrol {
+      &:hover .anim {
+        margin-left: -50px;
+      }
+
+      &:hover .actions {
+        margin-left: 0;
+        opacity: 1;
+      }
+
+      > div {
+        transition: all .2s ease-in-out;
+      }
+    }
+  }
 }
 
 .is_remote .file-info {
@@ -91,6 +136,7 @@
   }
 
   > div {
+    //scss-lint:disable NestingDepth
     bottom: 0;
     box-shadow: none !important;
     left: 0;
@@ -101,13 +147,14 @@
 
     &.progress-bar {
       opacity: .5;
-    }
 
-    &.progress-bar.download {
+      &.download {
         opacity: 1;
         z-index: 1;
       }
     }
+
+  }
 }
 
 .file-info-speed {
@@ -118,49 +165,3 @@
   right: 0;
   text-align: center;
 }
-
-.file-info.uploader {
-  .file-info-speed {
-    bottom: 6px;
-  }
-
-  .actions {
-    margin-left: 30px;
-    opacity: 0;
-  }
-
-  .anim {
-    margin-left: 0;
-  }
-
-  .hovercontrol {
-    &:hover .anim {
-      margin-left: -50px;
-    }
-
-    &:hover .actions {
-      margin-left: 0;
-      opacity: 1;
-    }
-
-    > div {
-      transition: all .2s ease-in-out;
-    }
-  }
-}
-
-.file-info.downloader {
-  .anim {
-    margin-left: -40px;
-  }
-
-  .file-info-size {
-    margin-bottom: 10px;
-  }
-}
-
-.file-info.downloading {
-  .file-info-size {
-    border-color: $fileinfo-downloading-size-border;
-  }
-}

src/styles/components/_presentation.scss

@@ -19,122 +19,51 @@
  *
  */
 
-.presentation {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .mainPresentation #presentation {
   display: block;
 }
 
-.presentationpane {
+.presentation {
   bottom: 0;
   left: 0;
-  overflow: auto;
   position: absolute;
   right: 0;
   top: 0;
 
-  .welcome {
-    padding: 0;
-
-    .btn {
-      margin-top: 30px;
-    }
-  }
-
-  h1 {
-    white-space: normal;
-  }
-
-  .download-info {
-    color: $text-color;
-    left: 0;
-    position: absolute;
-    text-shadow: 1px 1px 1px #fff;
-    width: 100%;
-  }
-}
-
-.presentationpane {
-  .canvasContainer {
-    height: 100%;
-    width: 100%;
-  }
-
-  canvas {
-    display: block;
-    margin: 0 auto;
-    position: relative;
-  }
-
-  .odfcanvas {
-    cursor: default;
-    user-select: none;
-
-    body {
-      background-color: transparent;
-    }
-
-    document {
-      display: block;
-    }
-  }
-
-  .odfcontainer {
-    display: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .odfcontainer.showonepage {
-    overflow: hidden;
-    text-align: center;
-  }
-}
-
-.presentation .overlaybar {
+  .overlaybar {
     bottom: 0;
     left: 0;
     right: 0;
     text-align: center;
-}
 
-.presentation .overlaybar .overlaybar-content {
+    .overlaybar-content {
+      // scss-lint:disable NestingDepth
       max-width: 100%;
-}
 
-.presentation .overlaybar .overlaybar-button {
-  font-size: 20px;
-  line-height: 28px;
-  padding: 4px 6px;
-  position: absolute;
-  top: 0;
-}
-
-.overlaybar-content .pagecontrol {
+      .pagecontrol {
         height: 30px;
       }
+    }
 
-.presentation .overlaybar .btn-prev {
+    .btn-prev {
       left: 40px;
     }
 
-.presentation .overlaybar .btn-next {
+    .btn-next {
       left: auto;
       right: 0;
     }
 
-.pageinfo input {
-  display: inline;
-  width: 70px;
+    .overlaybar-button {
+      font-size: 20px;
+      line-height: 28px;
+      padding: 4px 6px;
+      position: absolute;
+      top: 0;
+    }
   }
 
-.presentation .thumbnail {
+  .thumbnail {
     color: #333;
     display: inline-block;
     height: 122px;
@@ -144,34 +73,38 @@
     text-shadow: none;
     vertical-align: middle;
     width: 160px;
+
+    &:first-child {
+      margin-left: 0;
     }
 
-.presentation .thumbnail.presentable {
+    &.presentable {
       cursor: pointer;
     }
 
-.presentation .thumbnail:first-child {
-  margin-left: 0;
+    &:hover .presentation-action {
+      display: block;
     }
 
-.presentation .thumbnail .caption {
+    &:hover .notavailable {
+      display: block;
+    }
+
+    .caption {
+      // scss-lint:disable NestingDepth
       overflow: hidden;
       padding-bottom: 0;
       text-overflow: ellipsis;
-}
 
-.presentation .thumbnail .caption .size {
-  // scss-lint:disable SelectorDepth
+      .size {
         font-size: 10px;
       }
 
-.presentation .thumbnail .caption .progress {
-  // scss-lint:disable SelectorDepth
+      .progress {
         position: relative;
       }
 
-.presentation .thumbnail .caption .download-info {
-  // scss-lint:disable SelectorDepth
+      .download-info {
         bottom: 0;
         color: $text-color;
         left: 0;
@@ -181,8 +114,9 @@
         text-shadow: 1px 1px 1px #fff;
         top: 0;
       }
+    }
 
-.presentation .thumbnail .active {
+    .active {
       bottom: 0;
       color: #84b819;
       font-size: 10em;
@@ -194,7 +128,7 @@
       top: 0;
     }
 
-.presentation .thumbnail .notavailable {
+    .notavailable {
       bottom: 0;
       color: #d2322d;
       display: none;
@@ -207,30 +141,97 @@
       top: 0;
     }
 
-.presentation .thumbnail:hover .notavailable {
-  display: block;
-}
-
-.presentation .thumbnail .presentation-action {
+    .presentation-action {
       display: none;
       position: absolute;
       top: 1px;
     }
 
-.presentation .thumbnail .download {
+    .download {
       left: 1px;
     }
 
-.presentation .thumbnail .delete {
+    .delete {
       right: 1px;
     }
 
-.presentation .thumbnail:hover .presentation-action {
+    .filetype {
+      font-size: 5em;
+    }
+  }
+}
+
+.presentationpane {
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  .welcome {
+    padding: 0;
+
+    h1 {
+      white-space: normal;
+    }
+
+    .btn {
+      margin-top: 30px;
+    }
+
+    .progress span {
+      text-shadow: none;
+    }
+
+    .progress .download-info {
+      color: $text-color;
+      left: 0;
+      position: absolute;
+      text-shadow: 1px 1px 1px #fff;
+      width: 100%;
+    }
+  }
+
+  .canvasContainer {
+    height: 100%;
+    width: 100%;
+  }
+
+  canvas {
     display: block;
+    margin: 0 auto;
+    position: relative;
   }
 
-.presentation .thumbnail .filetype {
-  font-size: 5em;
+  .odfcanvas {
+    cursor: default;
+    user-select: none;
+
+    body {
+      background-color: transparent;
+    }
+
+    document {
+      display: block;
+    }
+  }
+
+  .odfcontainer {
+    display: none;
+    margin: 0;
+    padding: 0;
+
+    &.showonepage {
+      overflow: hidden;
+      text-align: center;
+    }
+  }
+}
+
+.pageinfo input {
+  display: inline;
+  width: 70px;
 }
 
 .presentations {

src/styles/components/_rightslide.scss

@@ -28,14 +28,14 @@
   top: $minbarheight;
   transition: right 200ms ease-in-out;
   z-index: 5;
-}
-
-.withBuddylist #rightslide {
-  right: 0;
-}
 
-#rightslide .rightslidepane {
+  .rightslidepane {
     height: 100%;
     position: relative;
     width: 100%;
   }
+}
+
+.withBuddylist #rightslide {
+  right: 0;
+}

src/styles/components/_roombar.scss

@@ -26,12 +26,11 @@
   right: 0;
   top: $minbarheight;
   z-index: 4;
-}
 
-#roombar .roombar {
+  .roombar {
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
   }
-
+}

src/styles/components/_screenshare.scss

@@ -19,16 +19,22 @@
  *
  */
 
+.mainScreenshare #screenshare {
+  display: block;
+}
+
 .screenshare {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.mainScreenshare #screenshare {
-  display: block;
+  .overlaybar {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 }
 
 .screensharepane {
@@ -39,9 +45,6 @@
   position: absolute;
   right: 0;
   top: 0;
-}
-
-.screensharepane {
   .remotescreen {
     position: relative;
   }
@@ -56,9 +59,3 @@
   max-height: none;
   width: auto;
 }
-
-.screenshare .overlaybar {
-  bottom: 0;
-  left: 0;
-  right: 0;
-}

src/styles/components/_settings.scss

@@ -20,6 +20,7 @@
  */
 
 #settings {
+  // scss-lint:disable NestingDepth
   background: $settings-background;
   border-left: 1px solid $bordercolor;
   bottom: 0;
@@ -30,9 +31,8 @@
   transition: right 200ms ease-in-out;
   width: 520px;
   z-index: 50;
-}
 
-#settings.show {
+  &.show {
     right: 0;
 
     @include breakpt($breakpoint-settings-medium, max-width, only screen) {
@@ -54,6 +54,7 @@
       }
     }
   }
+}
 
 .settings {
   background: $settings-background;
@@ -65,9 +66,7 @@
   position: absolute;
   right: 0;
   top: 0;
-}
 
-.settings {
   @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     padding-bottom: 10px;
   }

src/styles/components/_usability.scss

@@ -19,6 +19,16 @@
  *
  */
 
+.withChat #help,
+.withBuddylist #help {
+  right: 260px;
+}
+
+.withChat.withBuddylist #help,
+.withSettings #help {
+  right: 520px;
+}
+
 #help {
   bottom: 10px;
   color: #aaa;
@@ -32,19 +42,7 @@
   transition: right 200ms ease-in-out;
   user-select: none;
   width: 350px;
-}
 
-.withChat #help,
-.withBuddylist #help {
-  right: 260px;
-}
-
-.withChat.withBuddylist #help,
-.withSettings #help {
-  right: 520px;
-}
-
-#help {
   @include breakpt($breakpoint-useability-small, max-width, only screen) {
     display: none;
   }

src/styles/components/_youtubevideo.scss

@@ -19,53 +19,18 @@
  *
  */
 
-.youtubevideo {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+.mainYoutubevideo #youtubevideo {
+  display: block;
 }
 
-.youtubevideopane {
+.youtubevideo {
   bottom: 0;
   left: 0;
-  overflow: auto;
   position: absolute;
   right: 0;
   top: 0;
-}
-
-#youtubecontainer {
-  position: relative;
-}
-
-#youtubeplayerinfo {
-  bottom: 10%;
-  left: 0;
-  opacity: 0;
-  pointer-events: auto;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  transition-duration: .2s;
-  transition-property: opacity;
-  z-index: 10;
-
-  &:hover {
-    opacity: .8;
-  }
-}
 
-#youtubeplayerinfo div {
-  background-color: #f9f2f4;
-  border-radius: 10px;
-  display: inline-block;
-  font-size: 2em;
-  padding: 20px 40px;
-}
-
-.youtubevideo .click-container {
+  .click-container {
     bottom: 0;
     left: 0;
     position: absolute;
@@ -74,48 +39,84 @@
     z-index: 5;
   }
 
-.youtubevideo .welcome {
+  .welcome {
     max-width: 700px;
-}
 
-.youtubevideo .welcome h1 {
+    h1 {
       margin-top: 10px;
     }
 
-.youtubevideo .welcome .welcome-container {
+    .welcome-container {
       max-width: 700px;
     }
 
-.youtubevideo .welcome .welcome-logo {
+    .welcome-logo {
       background: transparent;
       font-size: 10em;
     }
-
-.mainYoutubevideo #youtubevideo {
-  display: block;
   }
 
-.youtubevideo .overlaybar {
+  .overlaybar {
     bottom: 0;
     left: 0;
     right: 0;
   }
 
-.youtubevideo .overlaybar-content {
+  .overlaybar-content {
     max-width: 100%;
     width: 100%;
+
+    form .overlaybar-buttons {
+      position: absolute;
+      right: 23px;
+      top: 6px;
+    }
   }
 
-.youtubevideo .overlaybar-input {
+  .overlaybar-input {
     padding-right: 15px;
     position: relative;
     width: 100%;
   }
 
-.youtubevideo .overlaybar-content .overlaybar-buttons {
+}
+
+.youtubevideopane {
+  bottom: 0;
+  left: 0;
+  overflow: auto;
   position: absolute;
-  right: 23px;
-  top: 6px;
+  right: 0;
+  top: 0;
+}
+
+#youtubecontainer {
+  position: relative;
+}
+
+#youtubeplayerinfo {
+  bottom: 10%;
+  left: 0;
+  opacity: 0;
+  pointer-events: auto;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  transition-duration: .2s;
+  transition-property: opacity;
+  z-index: 10;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  div {
+    background-color: #f9f2f4;
+    border-radius: 10px;
+    display: inline-block;
+    font-size: 2em;
+    padding: 20px 40px;
+  }
 }
 
 .volumecontrol {
@@ -143,37 +144,37 @@
   display: inline-block;
   padding: 6px 8px;
   vertical-align: middle;
-}
 
-.volumebar .bar {
+  .bar {
     -webkit-appearance: none;
     background-color: #aaa;
     border: 1px solid #aaa;
     height: 3px;
     outline: 0;
     width: 100px;
-}
 
-.volumebar .bar::-webkit-slider-thumb {
+    &::-webkit-slider-thumb {
       -webkit-appearance: none;
       background-color: #fff;
       height: 20px;
       width: 6px;
     }
 
-.volumebar .bar::-moz-range-track {
+    &::-moz-range-track {
       background: #aaa;
       border: 0;
     }
 
-.volumebar .bar::-moz-range-thumb {
+    &::-moz-range-thumb {
       background-color: #fff;
       border-radius: 0;
       height: 20px;
       width: 6px;
     }
 
-.volumebar .bar::-moz-focusring {
+    &::-moz-focusring {
       outline: 1px solid #aaa;
       outline-offset: -1px;
     }
+  }
+}

src/styles/global/_overlaybar.scss

@@ -20,6 +20,7 @@
  */
 
 .overlaybar {
+  // scss-lint:disable QualifyingElement
   background: $overlaybar-background;
   border-bottom: 1px solid #222;
   border-top: 1px solid #222;
@@ -30,14 +31,30 @@
   text-shadow: 0 0 5px #000;
   user-select: none;
   vertical-align: middle;
-}
 
-.overlaybar {
-  // scss-lint:disable QualifyingElement
   &:hover {
     background: $componentfg2;
   }
 
+  &.notvisible {
+    background: transparent;
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    pointer-events: none;
+
+    &:hover {
+      background: transparent;
+    }
+
+    .overlaybar-content {
+      display: none;
+    }
+
+    .overlaybar-overlay {
+      display: block;
+    }
+  }
+
   .btn {
     text-shadow: none;
   }
@@ -59,27 +76,6 @@
   label {
     padding-top: 6px !important;
   }
-}
-
-.overlaybar {
-  &.notvisible {
-    background: transparent;
-    border-bottom: 1px solid transparent;
-    border-top: 1px solid transparent;
-    pointer-events: none;
-
-    &:hover {
-      background: transparent;
-    }
-
-    .overlaybar-content {
-      display: none;
-    }
-
-    .overlaybar-overlay {
-      display: block;
-    }
-  }
 
   .overlaybar-button {
     color: $overlaybar-btn;