Merge pull request #1232 from jitsi/fix-adjust-layout

Fixes and adjustments of UI layout

css/_filmstrip.scss

@@ -50,14 +50,17 @@
         position:relative;
         height:196px;
         padding: 0;
-        padding-left: 17px;
+        /*The filmstrip should not be covered by the left toolbar*/
+        padding-left: $defaultToolbarSize + 5;
         bottom: 0;
         width:auto;
         border: $thumbnailsBorder solid transparent;
         z-index: 5;
         transition: bottom 2s;
         overflow: visible !important;
-        font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
+        /*!!!Removes the gap between the local video container and the remote
+        videos.*/
+        font-size: 0pt;
 
         &.hidden {
             bottom: -196px;
@@ -67,8 +70,8 @@
             display: none;
             position: relative;
             background-size: contain;
-            border: $thumbnailVideoBorder solid transparent;
-            border-radius:1px;
+            border: $thumbnailVideoBorder solid $thumbnailBorderColor;
+            border-radius: $borderRadius;
             margin: 0 $thumbnailVideoMargin;
 
             &.videoContainerFocused, &:hover {
@@ -112,7 +115,7 @@
             & > video,
             & > object {
                 cursor: hand;
-                border-radius:1px;
+                border-radius: $borderRadius;
                 object-fit: cover;
                 overflow: hidden;
             }

css/_variables.scss

@@ -14,9 +14,9 @@ $defaultToolbarSize: 50px;
 
 // Video layout.
 $thumbnailToolbarHeight: 22px;
-$thumbnailIndicatorBorder: 0;
-$thumbnailIndicatorSize: 3em;
-$thumbnailVideoMargin: 2px;
+$thumbnailIndicatorBorder: 2px;
+$thumbnailIndicatorSize: $thumbnailToolbarHeight;
+$thumbnailVideoMargin: 5px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
 $hideFilmstripButtonWidth: 17px;
@@ -95,7 +95,7 @@ $notificationWidth: 215px;
 /**
  * Misc.
  */
-$borderRadius: 3px;
+$borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
 $sidebarWidth: 220px;
 $popoverMenuPadding: 13px;

css/_videolayout_default.scss

@@ -18,9 +18,10 @@
 
     &__background {
         @include topLeft();
+        background-color: black;
+        border-radius: $borderRadius - 1;
         width: 100%;
         height: 100%;
-        background-color: black;
     }
 
     /**
@@ -106,11 +107,12 @@
     }
 
     &__hoverOverlay {
+        background: rgba(0,0,0,.6);
+        border-radius: $borderRadius;
         position: relative;
         width: 100%;
         height: 100%;
         visibility: hidden;
-        background: rgba(0,0,0,.6);
         z-index: 2;
     }
 }
@@ -128,8 +130,8 @@
 
 #localVideoWrapper>video,
 #localVideoWrapper>object {
+    border-radius: $borderRadius !important;
     cursor: hand;
-    border-radius:1px !important;
     object-fit: cover;
 }
 
@@ -211,6 +213,7 @@
 
 .videocontainer .displayname {
     pointer-events: none;
+    padding: 0 3px 0 3px;
 }
 
 .videocontainer .editdisplayname {

css/themes/_light.scss

@@ -85,6 +85,9 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 // Toolbar
 $splitterColor: #ccc;
 
+// Thumbnail
+$thumbnailBorderColor: rgba(71, 71, 71, .7);
+
 /**
  * Forms
  */