diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2019-12-12 10:59:28 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2019-12-13 23:05:26 +0300 |
commit | 7cbdb48be3ae38e14b3909e3104b763aa89043ab (patch) | |
tree | be4803e12f3754376d758ba5195f761dcaa3f8a6 /css | |
parent | 4715abecf74e85936e66854dbf79a8c7e02d1bfe (diff) |
Import CSS for calls
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Diffstat (limited to 'css')
-rw-r--r-- | css/files.scss | 55 | ||||
-rw-r--r-- | css/publicshare.scss | 108 | ||||
-rw-r--r-- | css/publicshareauth.scss | 30 | ||||
-rw-r--r-- | css/video.scss | 784 |
4 files changed, 535 insertions, 442 deletions
diff --git a/css/files.scss b/css/files.scss index 2d76d3300..c091b3762 100644 --- a/css/files.scss +++ b/css/files.scss @@ -68,20 +68,20 @@ } /* Video in Talk sidebar */ -.talkCallInfoView #call-container-wrapper #videos { +.talkCallInfoView #call-container-wrapper #call-container #videos { position: absolute; flex-grow: 1; } -.talkCallInfoView #call-container-wrapper .videoContainer { +.talkCallInfoView #call-container-wrapper #call-container .videoContainer { /* The video container has some small padding to prevent the video from * reaching the edges, but it also uses "width: 100%", so the padding should * be included in the full width of the element. */ box-sizing: border-box; } -.talkCallInfoView #call-container-wrapper .videoContainer.promoted video { +.talkCallInfoView #call-container-wrapper #call-container .videoContainer.promoted video { /* Base the size of the video on its width instead of on its height; * otherwise the video could appear in full height but cropped on the sides * due to the space available in the sidebar being typically larger in @@ -90,7 +90,7 @@ height: auto; } -.talkCallInfoView #call-container-wrapper .nameIndicator { +.talkCallInfoView #call-container-wrapper #call-container .nameIndicator { /* The name indicator has some small padding to prevent the name from * reaching the edges, but it also uses "width: 100%", so the padding should * be included in the full width of the element. */ @@ -98,15 +98,26 @@ } /* Screensharing in Talk sidebar */ -.talkCallInfoView #call-container-wrapper #screens { - display: none; +.talkCallInfoView #call-container-wrapper #call-container.screensharing #screens { + /* The row with the participants is shorter in the Talk sidebar to make room + * for the promoted video and the shared screens. */ + height: calc(100% - 100px); } +.talkCallInfoView #call-container-wrapper #call-container.screensharing .videoContainer { + max-height: 100px; + + /* Avatars slightly overflow the container; although they overlap the shared + * screen it is not too bad and it is better than compressing even further + * the shared screen. */ + overflow: visible; +} -.talkCallInfoView #videos .videoContainer:not(.promoted) video { + +.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) video { /* Make the unpromoted videos smaller to not overlap too much the promoted * video */ max-height: 100px; @@ -114,16 +125,32 @@ /* The avatars are requested with a size of 128px, so reduce it to not overlap * too much the promoted video */ -.talkCallInfoView #videos .videoContainer:not(.promoted) .avatar, -.talkCallInfoView #videos .videoContainer:not(.promoted) .avatar img { +.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv, +.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv img { width: 64px !important; height: 64px !important; + line-height: 64px !important; + /* imageplaceholder() sets font-size to "height * 0.55" */ + font-size: 35.2px !important; +} + +/* Text avatars need to be forced to 128px when promoted, as imageplaceholder() + * overrides the given size with the actual height of the element it was called + * on, so the text avatar may have a hardcoded height of 64px. Note that this + * does not apply to regular image avatars, as in that case they are always + * requested with a size of 128px. */ +.talkCallInfoView #call-container #videos .videoContainer.promoted .avatardiv { + width: 128px !important; + height: 128px !important; + line-height: 128px !important; + /* imageplaceholder() sets font-size to "height * 0.55" */ + font-size: 70.4px !important; } -.talkCallInfoView .participants-1 .videoView, -.talkCallInfoView .participants-2 .videoView { +.talkCallInfoView #call-container.participants-1 .videoView, +.talkCallInfoView #call-container.participants-2 .videoView { /* Do not force the width to 200px, as otherwise the video is too tall and * overlaps too much with the promoted video. */ min-width: initial; @@ -133,21 +160,21 @@ -.talkCallInfoView .nameIndicator { +.talkCallInfoView #call-container .nameIndicator { /* Reduce padding to bring the name closer to the bottom */ padding: 3px; /* Use default font size, as it takes too much space otherwise */ font-size: initial; } -.talkCallInfoView .participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { +.talkCallInfoView #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { /* Reduce padding to bring the name closer to the bottom */ padding: 3px 35%; } -.talkCallInfoView .mediaIndicator { +.talkCallInfoView #call-container .mediaIndicator { /* Move the media indicator closer to the bottom */ bottom: 16px; } diff --git a/css/publicshare.scss b/css/publicshare.scss index e8cc68bb8..f1d68635a 100644 --- a/css/publicshare.scss +++ b/css/publicshare.scss @@ -58,6 +58,28 @@ +.icon-menu-people { + @include icon-color('menu-people', 'spreed', $color-primary-text, 1); +} + +#talk-sidebar-trigger { + width: 44px; + height: 44px; + + background-color: transparent; + border-color: transparent; + + opacity: 0.6; + + &:hover, + &:focus, + &:active { + opacity: 1; + } +} + + + /* Properties based on the app-sidebar */ #talk-sidebar { position: relative; @@ -72,8 +94,8 @@ overflow-y: auto; z-index: 500; - transition: 300ms width ease-in-out, - 300ms min-width ease-in-out; + transition: var(--animation-quick) width ease-in-out, + var(--animation-quick) min-width ease-in-out; } #talk-sidebar.disappear { @@ -91,6 +113,33 @@ justify-content: center; } +#talk-sidebar .emptycontent.room-not-joined { + /* Override "margin-top: 30vh" set in server, as the message is already + * centered in the Talk sidebar. */ + margin-top: unset; + + button { + padding-left: 24px; + padding-right: 24px; + + .icon-loading-small { + /* Prevent the text from being moved when the icon is shown. */ + position: absolute; + + margin-left: 5px; + margin-top: 1px; + + /* Unset the size set by the server for icons in empty content */ + width: unset; + height: unset; + + &.hidden { + display: none; + } + } + } +} + #talk-sidebar #emptycontent { position: relative; @@ -146,11 +195,11 @@ } /* Video in Talk sidebar */ -#talk-sidebar #call-container-wrapper #videos { +#talk-sidebar #call-container-wrapper #call-container #videos { flex-grow: 1; } -#talk-sidebar #call-container-wrapper .videoContainer.promoted video { +#talk-sidebar #call-container-wrapper #call-container .videoContainer.promoted video { /* Base the size of the video on its width instead of on its height; * otherwise the video could appear in full height but cropped on the sides * due to the space available in the sidebar being typically larger in @@ -160,13 +209,24 @@ } /* Screensharing in Talk sidebar */ -#talk-sidebar #call-container-wrapper #screens { - display: none; +#talk-sidebar #call-container-wrapper #call-container.screensharing #screens { + /* The row with the participants is shorter in the Talk sidebar to make room + * for the promoted video and the shared screens. */ + height: calc(100% - 100px); } +#talk-sidebar #call-container-wrapper #call-container.screensharing .videoContainer { + max-height: 100px; + + /* Avatars slightly overflow the container; although they overlap the shared + * screen it is not too bad and it is better than compressing even further + * the shared screen. */ + overflow: visible; +} -#talk-sidebar #videos .videoContainer:not(.promoted) video { + +#talk-sidebar #call-container #videos .videoContainer:not(.promoted) video { /* Make the unpromoted videos smaller to not overlap too much the promoted * video */ max-height: 100px; @@ -174,14 +234,30 @@ /* The avatars are requested with a size of 128px, so reduce it to not overlap * too much the promoted video */ -#talk-sidebar #videos .videoContainer:not(.promoted) .avatar, -#talk-sidebar #videos .videoContainer:not(.promoted) .avatar img { +#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv, +#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv img { width: 64px !important; height: 64px !important; -} - -#talk-sidebar .participants-1 .videoView, -#talk-sidebar .participants-2 .videoView { + line-height: 64px !important; + /* imageplaceholder() sets font-size to "height * 0.55" */ + font-size: 35.2px !important; +} + +/* Text avatars need to be forced to 128px when promoted, as imageplaceholder() + * overrides the given size with the actual height of the element it was called + * on, so the text avatar may have a hardcoded height of 64px. Note that this + * does not apply to regular image avatars, as in that case they are always + * requested with a size of 128px. */ +#talk-sidebar #call-container #videos .videoContainer.promoted .avatardiv { + width: 128px !important; + height: 128px !important; + line-height: 128px !important; + /* imageplaceholder() sets font-size to "height * 0.55" */ + font-size: 70.4px !important; +} + +#talk-sidebar #call-container.participants-1 .videoView, +#talk-sidebar #call-container.participants-2 .videoView { /* Do not force the width to 200px, as otherwise the video is too tall and * overlaps too much with the promoted video. */ min-width: initial; @@ -189,19 +265,19 @@ z-index: 1; } -#talk-sidebar .nameIndicator { +#talk-sidebar #call-container .nameIndicator { /* Reduce padding to bring the name closer to the bottom */ padding: 3px; /* Use default font size, as it takes too much space otherwise */ font-size: initial; } -#talk-sidebar .participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { +#talk-sidebar #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { /* Reduce padding to bring the name closer to the bottom */ padding: 3px 35%; } -#talk-sidebar .mediaIndicator { +#talk-sidebar #call-container .mediaIndicator { /* Move the media indicator closer to the bottom */ bottom: 16px; } diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss index 2e5cee455..b845a0baf 100644 --- a/css/publicshareauth.scss +++ b/css/publicshareauth.scss @@ -115,20 +115,20 @@ input#request-password-button:disabled ~ .icon { } /* Video in Talk sidebar */ -#talk-sidebar #videos { +#talk-sidebar #call-container #videos { position: relative; flex-grow: 1; } -#talk-sidebar .videoContainer { +#talk-sidebar #call-container .videoContainer { /* The video container has some small padding to prevent the video from * reaching the edges, but it also uses "width: 100%", so the padding should * be included in the full width of the element. */ box-sizing: border-box; } -#talk-sidebar .videoContainer.promoted video { +#talk-sidebar #call-container .videoContainer.promoted video { /* Base the size of the video on its width instead of on its height; * otherwise the video could appear in full height but cropped on the sides * due to the space available in the sidebar being typically larger in @@ -137,35 +137,13 @@ input#request-password-button:disabled ~ .icon { height: auto; } -#talk-sidebar .nameIndicator { +#talk-sidebar #call-container .nameIndicator { /* The name indicator has some small padding to prevent the name from * reaching the edges, but it also uses "width: 100%", so the padding should * be included in the full width of the element. */ box-sizing: border-box; } -/* Screensharing in Talk sidebar */ -#talk-sidebar #call-container.screensharing #videos .videoContainer video { - max-height: 200px; - background-color: transparent; - box-shadow: 0; -} - -#talk-sidebar #call-container.screensharing #screens { - position: absolute; - width: 100%; - height: calc(100% - 200px); - top: 0; - background-color: transparent; -} - -#talk-sidebar #call-container.screensharing .screenContainer { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} - /** * Cascade parent element height to the chat view in the sidebar to limit the * vertical scroll bar only to the list of messages. Otherwise, the vertical diff --git a/css/video.scss b/css/video.scss index bd06645b9..8abe3e222 100644 --- a/css/video.scss +++ b/css/video.scss @@ -1,479 +1,491 @@ -#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; -} +#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; + } -.videoContainer, -#app-content.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; -} + #videos.hidden { + display: none; + } -.videoContainer.hidden, -#app-content.screensharing .videoContainer.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; + } -#app-content.screensharing .videoContainer { - max-height: 200px; -} + .videoContainer.hidden, + &.participants-1.screensharing .videoContainer.hidden, + &.participants-2.screensharing .videoContainer.hidden { + display: none; + } -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 { + max-height: 200px; + } -#app-content.screensharing .videoContainer video { - max-height: 200px; - background-color: transparent; - box-shadow: none; -} + 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 */ + } -#screens video { - width: 100%; - -webkit-filter: none; - filter: none; -} + &.screensharing .videoContainer video { + max-height: 200px; + background-color: transparent; + box-shadow: none; + } -#videos .videoContainer.not-connected { - video, - .avatar { - opacity: 0.5; + #screens video { + width: 100%; + -webkit-filter: none; + filter: none; } -} -#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.not-connected { + video, + .avatardiv { + opacity: 0.5; + } + } -#videos .videoContainer .avatar { - box-shadow: 0 0 15px $color-box-shadow; -} + #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; + } -.participants-1 #videos .videoContainer video, -.participants-2 #videos .videoContainer video { - padding: 0; -} + #videos .videoContainer .avatardiv { + box-shadow: 0 0 15px $color-box-shadow; + } -.videoContainer .avatar-container { - display: flex; - margin-bottom: 50px; -} -.videoContainer .avatar-container.hidden { - display: none; -} -.videoContainer .avatar-container .avatar { - display: inline-block; -} -.videoContainer.promoted .avatar-container { - top: 30%; -} -.videoContainer.promoted .avatar-container + .nameIndicator { - display: none; -} + &.participants-1 #videos .videoContainer video, + &.participants-2 #videos .videoContainer video { + padding: 0; + } -.videoContainer.promoted .mediaIndicator { - display: none !important; -} + .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; + } -#shareRoomContainer { - position: relative; -} -#shareRoomInput { - width: 250px; - padding-right: 32px; - text-overflow: ellipsis; -} -#shareRoomClipboardButton { - position: absolute; - right: 0; - padding: 18px; - background-size: 16px !important; - height: 16px !important; - width: 16px !important; - margin: 0 !important; - opacity: .8 !important; -} + .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; -} + &.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%; + + + /* 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%); } -} -.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, -#app-content.incall, -#app-content.screensharing { - background-color: #000; -} + /* 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; + } -#app-content.screensharing #screens { - position: absolute; - width: 100%; - height: calc(100% - 200px); - top: 0; - overflow-y: scroll; - background-color: transparent; -} -#app-content.screensharing .screenContainer { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} + &.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; -} + .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; + } -.participants-1 .videoView .nameIndicator, -.participants-2 .videoView .nameIndicator { - left: initial; - right: 0; -} + .videoView .nameIndicator { + padding: 0; + overflow: visible; + } -.participants-1 .videoView .avatar-container, -.participants-2 .videoView .avatar-container { - left: initial; - right: 0; -} + &.participants-1 .videoView .nameIndicator, + &.participants-2 .videoView .nameIndicator { + left: initial; + right: 0; + } -/* ellipsize name in 1on1 calls */ -.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { - padding: 12px 35%; -} + &.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 button { - background-size: 24px; -} + .nameIndicator button { + background-color: transparent; + border: none; + margin: 0; + width: 44px; + height: 44px; + } -.nameIndicator button.audio-disabled, -.nameIndicator button.video-disabled, -.nameIndicator button.screensharing-disabled { - opacity: .7; -} + .nameIndicator #screensharing-menu button { + width: 100%; + height: auto; + } -.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 { + background-size: 24px; } -} -.nameIndicator button.no-audio-available, -.nameIndicator button.no-video-available { - opacity: .7; - cursor: not-allowed; -} + .nameIndicator button.audio-disabled, + .nameIndicator button.video-disabled, + .nameIndicator button.screensharing-disabled { + opacity: .7; + } -.nameIndicator button.no-audio-available:active, -.nameIndicator button.no-video-available:active { - background-color: transparent; -} + .nameIndicator button.audio-disabled:not(.no-audio-available), + .nameIndicator button.video-disabled:not(.no-video-available), + .nameIndicator button.screensharing-disabled { + &:hover, + &:focus { + opacity: 1; + } + } -.mediaIndicator { - position: absolute; - width: 100%; - bottom: 44px; - left: 0; - background-size: 22px; - text-align: center; -} + .nameIndicator button.no-audio-available, + .nameIndicator button.no-video-available { + opacity: .7; + cursor: not-allowed; + } -.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; + .nameIndicator button.no-audio-available:active, + .nameIndicator button.no-video-available:active { + background-color: transparent; } -} -.muteIndicator.audio-on, -.screensharingIndicator.screen-off, -.iceFailedIndicator.not-failed { - display: none; -} + .mediaIndicator { + position: absolute; + width: 100%; + bottom: 44px; + left: 0; + background-size: 22px; + text-align: center; + } -.muteIndicator.audio-off, -.hideRemoteVideo.icon-video-off { - opacity: .7; -} + .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; + } + } -.hideRemoteVideo.icon-video-off { - &:hover, - &:focus { - opacity: 1; + .muteIndicator.audio-on, + .muteIndicator:not(.audio-on):not(.audio-off), + .screensharingIndicator.screen-off, + .iceFailedIndicator.not-failed { + display: none; } -} -.iceFailedIndicator { - opacity: .8 !important; -} + .muteIndicator.audio-off, + .hideRemoteVideo.icon-video-off { + opacity: .7; + } + .hideRemoteVideo.icon-video-off { + &:hover, + &:focus { + opacity: 1; + } + } + .iceFailedIndicator { + opacity: .8 !important; + } -#app-content:not(.incall):not(.screensharing) .force-icon-white-in-call, -#call-container:not(.incall):not(.screensharing) .force-icon-white-in-call { - /* - * Also force the white icons, when the video of the local participant is shown, - * because the black icons are not visible on videos, especially when your camera is covered. - */ - &#hideVideo:not(.local-video-disabled) { - &.icon-video { - background-image: url(icon-color-path('video', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + + + &:not(.incall):not(.screensharing) .force-icon-white-in-call { + /* + * Also force the white icons, when the video of the local participant is shown, + * because the black icons are not visible on videos, especially when your camera is covered. + */ + &#hideVideo:not(.local-video-disabled) { + &.icon-video { + background-image: url(icon-color-path('video', 'actions', 'fff', 1, true)); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + } + &.icon-video-off { + background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + } } - &.icon-video-off { - background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); + &#mute:not(.local-video-disabled) { + &.icon-audio { + background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + } + &.icon-audio-off { + background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true)); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + } + } + &#screensharing-button:not(.local-video-disabled) { + background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } } - &#mute:not(.local-video-disabled) { + + &.incall .force-icon-white-in-call, + &.screensharing .force-icon-white-in-call { + /* + * Force the white icon, independent from white/dark mode selection, + * because those icons are presented on our black calling-screen. + */ &.icon-audio { background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } &.icon-audio-off { background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } - } - &#screensharing-button:not(.local-video-disabled) { - background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); - } -} - -.incall .force-icon-white-in-call, -.screensharing .force-icon-white-in-call { - /* - * Force the white icon, independent from white/dark mode selection, - * because those icons are presented on our black calling-screen. - */ - &.icon-audio { - background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); - } - &.icon-audio-off { - background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true)); - } - &.icon-video { - background-image: url(icon-color-path('video', 'actions', 'fff', 1, true)); - } - &.icon-video-off { - background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); - } - &.icon-screen { - background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true)); - } - &.icon-screen-off { - background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); - } - &.icon-error { - background-image: url(icon-color-path('error', 'actions', 'fff', 1, true)); - } + &.icon-video { + background-image: url(icon-color-path('video', 'actions', 'fff', 1, true)); + } + &.icon-video-off { + background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); + } + &.icon-screen { + background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true)); + } + &.icon-screen-off { + background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); + } + &.icon-error { + background-image: url(icon-color-path('error', 'actions', 'fff', 1, true)); + } - /* ".force-icon-white-in-call" can be combined with ".icon-shadow" just like - * ".icon-white". */ - &.icon-shadow { - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + /* ".force-icon-white-in-call" can be combined with ".icon-shadow" just like + * ".icon-white". */ + &.icon-shadow { + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); + } } -} -#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; + #videos .videoContainer.speaking:not(.videoView) .nameIndicator, + #videos .videoContainer.videoView.speaking .nameIndicator .icon-audio { + animation: pulse 1s; + animation-iteration-count: infinite; } - 50% { - opacity: .3; - } - 100% { - opacity: 1; + + @keyframes pulse { + 0% { + opacity: 1; + } + 50% { + opacity: .3; + } + 100% { + opacity: 1; + } } -} -#muteWrapper { - display: inline-block; + #muteWrapper { + display: inline-block; - /* Make the wrapper the positioning context of the volume indicator. */ - position: relative; -} + /* Make the wrapper the positioning context of the volume indicator. */ + position: relative; + } -#muteWrapper .volume-indicator { - position: absolute; + #muteWrapper .volume-indicator { + position: absolute; - width: 3px; - right: 0px; + 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; + /* 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); + background: linear-gradient(0deg, green, yellow, red 36px); - opacity: 0.7; -} + opacity: 0.7; + } -#muteWrapper .icon-audio-off + .volume-indicator { - background: linear-gradient(0deg, gray, white 36px); + #muteWrapper .icon-audio-off + .volume-indicator { + background: linear-gradient(0deg, gray, white 36px); + } } |