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/publicshare.scss | |
parent | 4715abecf74e85936e66854dbf79a8c7e02d1bfe (diff) |
Import CSS for calls
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Diffstat (limited to 'css/publicshare.scss')
-rw-r--r-- | css/publicshare.scss | 108 |
1 files changed, 92 insertions, 16 deletions
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; } |