diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss index 13e0edb40..dddbc886e 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 ae5874f9a..0afdea961 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 a8679b5dc..770c1dfd7 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 d49e5d0b8..8fe4d9569 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 */