diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-12-13 19:29:55 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2019-12-13 23:10:54 +0300 |
commit | 6a96cb76693edc35ba7dfc70b22f25f2f62ea9d9 (patch) | |
tree | cd1edc372818e0d4620509d823481524f5319e0e /css | |
parent | a21f6ba28b379b1f7293502c972b17023ce23dcb (diff) |
Embed CSS style in CallView
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Diffstat (limited to 'css')
-rw-r--r-- | css/video.scss | 421 |
1 files changed, 0 insertions, 421 deletions
diff --git a/css/video.scss b/css/video.scss deleted file mode 100644 index a0d6d9a9e..000000000 --- a/css/video.scss +++ /dev/null @@ -1,421 +0,0 @@ -#call-container { - #videos { - position: absolute; - width: 100%; - height: 100%; - top: 0; - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -webkit-justify-content: space-around; - justify-content: space-around; - -webkit-align-items: flex-end; - align-items: flex-end; - } - - #videos.hidden { - display: none; - } - - .videoContainer, - /* Force regular rules on "big speaker video" when screensharing is enabled. */ - &.participants-1.screensharing .videoContainer, - &.participants-2.screensharing .videoContainer { - position: relative; - width: 100%; - padding: 0 2%; - -webkit-box-flex: auto; - -moz-box-flex: auto; - -webkit-flex: auto; - -ms-flex: auto; - flex: auto; - z-index: 2; - display: flex; - justify-content: center; - align-items: flex-end; - } - - .videoContainer.hidden, - &.participants-1.screensharing .videoContainer.hidden, - &.participants-2.screensharing .videoContainer.hidden { - display: none; - } - - &.screensharing .videoContainer { - max-height: 200px; - } - - video { - z-index: 0; - max-height: 100%; - /* default filter for slightly better look */ - -webkit-filter: contrast(1.1) saturate(1.1) sepia(.1); - filter: contrast(1.1) saturate(1.1) sepia(.1); - vertical-align: top; /* fix white line below video */ - } - - &.screensharing .videoContainer video { - max-height: 200px; - background-color: transparent; - box-shadow: none; - } - - #screens video { - width: 100%; - -webkit-filter: none; - filter: none; - } - - #videos .videoContainer.not-connected { - video, - .avatardiv { - opacity: 0.5; - } - } - - #videos .videoContainer:not(.promoted) video { - max-height: 200px; - max-width: 100%; - background-color: transparent; - border-radius: $border-radius $border-radius 0 0; - box-shadow: 0 0 15px $color-box-shadow; - } - - #videos .videoContainer .avatardiv { - box-shadow: 0 0 15px $color-box-shadow; - } - - &.participants-1 #videos .videoContainer video, - &.participants-2 #videos .videoContainer video { - padding: 0; - } - - .videoContainer .avatar-container { - position: absolute; - bottom: 44px; - left: 0; - width: 100%; - } - - .videoContainer .avatar-container .avatardiv--unknown { - // Force grey background for guest avatars - background-color: #b9b9b9 !important; - } - - /* Text avatars need to be forced to 128px, as imageplaceholder() overrides - * the given size with the actual height of the element it was called on, so - * the text avatar may have any hardcoded height. Note that this does not - * apply to regular image avatars, as in that case they are always requested - * with a size of 128px. */ - .videoContainer .avatar-container .avatardiv { - width: 128px !important; - height: 128px !important; - line-height: 128px !important; - /* imageplaceholder() sets font-size to "height * 0.55" */ - font-size: 70.4px !important; - } - - .videoContainer .avatar-container .avatardiv { - display: block; - margin-left: auto; - margin-right: auto; - } - .videoContainer.promoted .avatar-container { - top: 30%; - } - .videoContainer.promoted .avatar-container + .nameIndicator { - display: none; - } - - .videoContainer.promoted .mediaIndicator { - display: none !important; - } - - - - - &.participants-1:not(.screensharing) ~ #emptycontent { - display: block !important; - } - - #screensharing-menu { - bottom: 44px; - left: calc(50% - 40px); - right: initial; - color: initial; - text-shadow: initial; - font-size: 13px; - } - - #screensharing-menu.app-navigation-entry-menu:after { - top: 100%; - left: calc(50% - 5px); - border-top-color: #fff; - border-bottom-color: transparent; - } - - - - - /* big speaker video */ - &.participants-1 .videoContainer, - &.participants-2 .videoContainer, - .videoContainer.promoted { - position: absolute; - width: 100%; - height: 100%; - overflow: hidden; - left: 0; - top: 0; - z-index: 1; - } - .videoContainer.promoted video, - &.participants-2 .videoContainer:not(.videoView) video { - position: absolute; - width: initial; - height: 100%; - left: 50%; - top: 50%; - transform: translateY(-50%) translateX(-50%); - } - - /* own video */ - &.participants-1 .videoView, - &.participants-2 .videoView { - position: absolute; - width: 22%; - min-width: 200px; - overflow:visible; - right: 0; - bottom: 0; - top: initial; - left: initial; - z-index: 10; - } - @media only screen and (max-width: 768px) { - &.participants-1 .videoView, - &.participants-2 .videoView { - max-height: 35%; - } - } - &.participants-1 .videoView video, - &.participants-2 .videoView video { - position: absolute; - max-height: 100% !important; - bottom: 0; - border-top-right-radius: 3px; - right: 0; - } - - .videoContainer.promoted { - background-color: #000; - } - - - - - &.screensharing #screens { - position: absolute; - width: 100%; - height: calc(100% - 200px); - top: 0; - background-color: transparent; - } - - &.screensharing .screenContainer { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - } - - - - - .nameIndicator { - position: absolute; - bottom: 0; - left: 0; - padding: 12px; - color: #fff; - text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5); - width: 100%; - text-align: center; - font-size: 20px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .videoView .nameIndicator { - padding: 0; - overflow: visible; - } - - &.participants-1 .videoView .nameIndicator, - &.participants-2 .videoView .nameIndicator { - left: initial; - right: 0; - } - - &.participants-1 .videoView .avatar-container, - &.participants-2 .videoView .avatar-container { - left: initial; - right: 0; - } - - /* ellipsize name in 1on1 calls */ - &.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { - padding: 12px 35%; - } - - - - - .nameIndicator button { - background-color: transparent; - border: none; - margin: 0; - width: 44px; - height: 44px; - } - - .nameIndicator #screensharing-menu button { - width: 100%; - height: auto; - } - - .nameIndicator button { - background-size: 24px; - } - - .nameIndicator button.audio-disabled, - .nameIndicator button.video-disabled, - .nameIndicator button.screensharing-disabled { - opacity: .7; - } - - .nameIndicator button.audio-disabled:not(.no-audio-available), - .nameIndicator button.video-disabled:not(.no-video-available), - .nameIndicator button.screensharing-disabled { - &:hover, - &:focus { - opacity: 1; - } - } - - .nameIndicator button.no-audio-available, - .nameIndicator button.no-video-available { - opacity: .7; - cursor: not-allowed; - } - - .nameIndicator button.no-audio-available:active, - .nameIndicator button.no-video-available:active { - background-color: transparent; - } - - .mediaIndicator { - position: absolute; - width: 100%; - bottom: 44px; - left: 0; - background-size: 22px; - text-align: center; - } - - .muteIndicator, - .hideRemoteVideo, - .screensharingIndicator, - .iceFailedIndicator { - position: relative; - display: inline-block; - background-color: transparent !important; - border: none; - width: 32px; - height: 32px; - background-size: 22px; - - &.hidden { - display: none; - } - } - - .muteIndicator.audio-on, - .muteIndicator:not(.audio-on):not(.audio-off), - .screensharingIndicator.screen-off, - .iceFailedIndicator.not-failed { - display: none; - } - - .muteIndicator.audio-off, - .hideRemoteVideo.icon-video-off { - opacity: .7; - } - - .hideRemoteVideo.icon-video-off { - &:hover, - &:focus { - opacity: 1; - } - } - - .iceFailedIndicator { - opacity: .8 !important; - } - - - - - - #videos .videoContainer.speaking:not(.videoView) .nameIndicator, - #videos .videoContainer.videoView.speaking .nameIndicator .icon-audio { - animation: pulse 1s; - animation-iteration-count: infinite; - } - - @keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: .3; - } - 100% { - opacity: 1; - } - } - - - - #muteWrapper { - display: inline-block; - - /* Make the wrapper the positioning context of the volume indicator. */ - position: relative; - } - - #muteWrapper .volume-indicator { - position: absolute; - - width: 3px; - right: 0px; - - /* The button height is 44px; the volume indicator button is 36px at - * maximum, but its value will be changed based on the current volume; the - * height change will reveal more or less of the gradient, which has - * absolute dimensions and thus does not change when the height changes. */ - height: 36px; - bottom: 4px; - - background: linear-gradient(0deg, green, yellow, red 36px); - - opacity: 0.7; - } - - #muteWrapper .icon-audio-off + .volume-indicator { - background: linear-gradient(0deg, gray, white 36px); - } -} |