haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjusted styles for "Live Streaming" indicator.

This commit is contained in:
Maxim Voloshin 2016-10-19 19:36:10 +03:00
parent 88be44b472
commit d09a8b1896
5 changed files with 23 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/_recording.scss
View File

@ -1,4 +1,4 @@
.recordingSpinner { .recordingSpinner {
display: none; display: none;
vertical-align: text-bottom; vertical-align: top;
} }

2
css/_toolbars.scss
View File

@ -1,5 +1,5 @@
.toolbar { .toolbar {
background-color: rgba(0,0,0,0.5); background-color: $toolbarBackground;
position: relative; position: relative;
z-index: $toolbarZ; z-index: $toolbarZ;
height: 100%; height: 100%;

3
css/_variables.scss
View File

@ -27,6 +27,7 @@ $defaultBackground: #474747;
$tooltipBg: rgba(0,0,0, 0.7); $tooltipBg: rgba(0,0,0, 0.7);
// Toolbar // Toolbar
$toolbarBackground: rgba(0, 0, 0, 0.5);
$toolbarSelectBackground: rgba(0, 0, 0, .6); $toolbarSelectBackground: rgba(0, 0, 0, .6);
$toolbarBadgeBackground: #165ECC; $toolbarBadgeBackground: #165ECC;
$toolbarBadgeColor: #FFFFFF; $toolbarBadgeColor: #FFFFFF;
@ -47,7 +48,7 @@ $raiseHandBg: #D6D61E;
$audioLevelBg: #44A5FF; $audioLevelBg: #44A5FF;
$audioLevelShadow: rgba(9, 36, 77, 0.9); $audioLevelShadow: rgba(9, 36, 77, 0.9);
$videoStateIndicatorColor: $defaultColor; $videoStateIndicatorColor: $defaultColor;
$videoStateIndicatorBackground: $tooltipBg; $videoStateIndicatorBackground: $toolbarBackground;
/** /**
* Feedback Modal * Feedback Modal

46
css/_videolayout_default.scss
View File

@ -550,51 +550,39 @@
background: $videoStateIndicatorBackground; background: $videoStateIndicatorBackground;
color: $videoStateIndicatorColor; color: $videoStateIndicatorColor;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 20px;
text-align: center; text-align: center;
display: block; min-width: 40px;
min-width: 37px; height: 40px;
padding: 10px 0; padding: 10px 5px;
border-radius: 50%; border-radius: 50%;
position: absolute;
box-sizing: border-box;
} }
#videoResolutionLabel { #videoResolutionLabel,
.centeredVideoLabel {
display: none; display: none;
position: absolute;
top: 30px;
right: 30px;
z-index: 1011; z-index: 1011;
} }
.centeredVideoLabel { .centeredVideoLabel {
display: none;
position: absolute;
bottom: 45%; bottom: 45%;
top: auto;
right: auto;
left: auto;
line-height: 28px;
height: 28px;
width: auto;
padding: 5px;
margin-right: auto;
margin-left: auto;
background: rgba(0,0,0,.5);
color: #FFF;
z-index: 1011;
border-radius: 2px; border-radius: 2px;
-webkit-transition: all 2s 2s linear; -webkit-transition: all 2s 2s linear;
transition: all 2s 2s linear; transition: all 2s 2s linear;
&.moveToCorner {
bottom: auto;
}
} }
.moveToCorner { .moveToCorner {
position: absolute;
top: 30px; top: 30px;
right: 80px; /*leave free space for the HD label*/ right: 30px;
margin-right: 0px;
margin-left: auto;
background: rgba(0,0,0,.3);
color: rgba(255,255,255,.5);
} }
.hidden { .moveToCorner + .moveToCorner {
} right: 80px;
}

4
index.html
View File

@ -240,8 +240,8 @@
<video id="largeVideo" muted="true" autoplay></video> <video id="largeVideo" muted="true" autoplay></video>
</div> </div>
<span id="localConnectionMessage"></span> <span id="localConnectionMessage"></span>
<span id="videoResolutionLabel" class="video-state-indicator">HD</span> <span id="videoResolutionLabel" class="video-state-indicator moveToCorner">HD</span>
<span id="recordingLabel" class="centeredVideoLabel"> <span id="recordingLabel" class="video-state-indicator centeredVideoLabel">
<span id="recordingLabelText"></span> <span id="recordingLabelText"></span>
<img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img> <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
</span> </span>