diff --git a/css/_variables.scss b/css/_variables.scss
index 0c8a54d33..b923e3745 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -46,6 +46,8 @@ $dominantSpeakerBg: #165ecc;
$raiseHandBg: #D6D61E;
$audioLevelBg: #44A5FF;
$audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $tooltipBg;
/**
* Feedback Modal
diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 71879a7a8..8f4f59984 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -546,16 +546,24 @@
0px 0px 1px rgba(0,0,0,0.3);
}
+.video-state-indicator {
+ background: $videoStateIndicatorBackground;
+ color: $videoStateIndicatorColor;
+ font-size: 13px;
+ line-height: 1.4;
+ text-align: center;
+ display: block;
+ min-width: 37px;
+ padding: 10px 0;
+ border-radius: 50%;
+}
+
#videoResolutionLabel {
display: none;
position: absolute;
- top: 5px;
- right: 5px;
- background: rgba(0,0,0,.5);
- padding: 10px;
- color: rgba(255,255,255,.5);
+ top: 30px;
+ right: 30px;
z-index: 1011;
- border-radius: 50%;
}
.centeredVideoLabel {
@@ -580,8 +588,8 @@
}
.moveToCorner {
- top: 5px;
- right: 50px; /*leave free space for the HD label*/
+ top: 30px;
+ right: 80px; /*leave free space for the HD label*/
margin-right: 0px;
margin-left: auto;
background: rgba(0,0,0,.3);
diff --git a/index.html b/index.html
index 1bb4941a5..3d6c68348 100644
--- a/index.html
+++ b/index.html
@@ -240,7 +240,7 @@
- HD
+ HD