diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index df07b3fb1..1f7b97434 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -65,16 +65,20 @@
z-index: 1;
width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width.
- height: $thumbnailToolbarHeight;
- padding: 0 5px 0 5px;
}
.videocontainer__toolbar {
bottom: 0;
+ padding: 0 5px 0 5px;
+ height: $thumbnailToolbarHeight;
}
.videocontainer__toptoolbar {
+ $toolbarPadding: 5px;
top: 0;
+ padding: $toolbarPadding;
+ padding-bottom: 0;
+ height: $thumbnailIndicatorSize + $toolbarPadding;
}
#remoteVideos .videocontainer.videoContainerFocused,
@@ -277,6 +281,7 @@
}
.videocontainer__toptoolbar span.indicator {
+ position: relative;
font-size: 8pt;
text-align: center;
line-height: $thumbnailToolbarHeight;
@@ -292,10 +297,13 @@
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
.indicatoricon {
- width: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
- height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
- line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
- margin-left: 5px; // TOP toolbar padding;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ @include transform(translateY(-50%));
+ width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
+ height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
+ line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
}
.connection.connection_empty
diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index 3a491a81f..535995d67 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/modules/UI/videolayout/SmallVideo.js
@@ -498,10 +498,12 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
}
let indicatorSpanId = "dominantspeakerindicator";
+ let content = ``;
let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
videoSpanId: this.videoSpanId,
indicatorId: indicatorSpanId,
- content: '',
+ content,
tooltip: 'speaker'
});
@@ -524,10 +526,12 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
}
let indicatorSpanId = "raisehandindicator";
+ let content = ``;
let indicatorSpan = UIUtil.getVideoThumbnailIndicatorSpan({
indicatorId: indicatorSpanId,
videoSpanId: this.videoSpanId,
- content: '',
+ content,
tooltip: 'raisedHand'
});