fix: fix filmstrip-only toolbar

css/_always_on_top.scss → css/_mini_toolbox.scss

@@ -1,13 +1,8 @@
-
+.filmstrip-toolbox,
 .always-on-top-toolbox {
     background-color: $newToolbarBackgroundColor;
     border-radius: 3px;
     display: flex;
-    flex-direction: row;
-    left: 50%;
-    position: absolute;
-    top: 10px;
-    transform: translateX(-50%);
     z-index: $toolbarZ;
 
     .toolbox-icon {
@@ -23,6 +18,23 @@
         }
     }
 
+    .toolbox-button {
+        &:nth-child(2) {
+            svg {
+                fill: $hangupColor;
+            }
+        }
+    }
+
+}
+
+.always-on-top-toolbox {
+    flex-direction: row;
+    left: 50%;
+    position: absolute;
+    top: 10px;
+    transform: translateX(-50%);
+
     .toolbox-button {
         &:first-child {
             .toolbox-icon {
@@ -31,12 +43,6 @@
             }
         }
 
-        &:nth-child(2) {
-            svg {
-                fill: $hangupColor;
-            }
-        }
-
         &:last-child {
             .toolbox-icon {
                 border-top-right-radius: 3px;
@@ -44,5 +50,14 @@
             }
         }
     }
-    
+}
+
+.filmstrip-toolbox {
+    flex-direction: column;
+
+    .toolbox-button {
+        .toolbox-icon {
+            border-radius: 3px;
+        }
+    }
 }

css/_toolbars.scss

@@ -270,58 +270,6 @@
     }
 }
 
-.filmstrip-toolbox {
-    background-color: $newToolbarBackgroundColor;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    z-index: $toolbarZ;
-
-    i {
-        cursor: pointer;
-        display: block;
-    }
-
-    i:hover {
-        background-color: $AOTToolbarButtonHoverColor;
-    }
-
-    i.toggled {
-        background: $AOTToolbarButtonToggleColor;
-    }
-
-    i.toggled:hover:not(.disabled) {
-        background-color: $AOTToolbarButtonHoverColor;
-    }
-
-    .toolbox-button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
-        text-align: center;
-    }
-
-    border-radius: 3px;
-}
-
-.filmstrip-toolbox {
-    i {
-        font-size: 1.9em;
-        height: 37px;
-        line-height: 37px;
-        width: 37px;
-    }
-
-    .toolbox-button:first-child i {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-
-    .toolbox-button:last-child i {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-}
-
 /**
  * START of fade in animation for main toolbar
  */

css/main.scss

@@ -26,13 +26,13 @@ $flagsImagePath: "../images/";
 /* Modules BEGIN */
 
 @import 'aui_reset';
-@import 'always_on_top';
 @import 'atlaskit_overrides';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
+@import 'mini_toolbox';
 @import 'modals/desktop-picker/desktop-picker';
 @import 'modals/device-selection/device-selection';
 @import 'modals/dialog';