From 1604fa65849d75b83ec636138763c6b7b6035ce2 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Mon, 9 Jan 2017 15:32:25 -0600
Subject: [PATCH] Fixes and adjustments of UI layout

---
 css/_filmstrip.scss           | 13 ++++++++-----
 css/_variables.scss           |  8 ++++----
 css/_videolayout_default.scss |  9 ++++++---
 css/themes/_light.scss        |  3 +++
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss
index 13e0edb40c..dddbc886ea 100644
--- a/css/_filmstrip.scss
+++ b/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;
             }
diff --git a/css/_variables.scss b/css/_variables.scss
index ae5874f9a3..0afdea9612 100644
--- a/css/_variables.scss
+++ b/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;
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index a8679b5dc1..770c1dfd7f 100644
--- a/css/_videolayout_default.scss
+++ b/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 {
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index d49e5d0b8a..8fe4d95698 100644
--- a/css/themes/_light.scss
+++ b/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
  */