#body-public { height: 100%; } .app-spreed #app-content, #body-public #app-content { overflow: hidden; } .app-spreed #app-navigation { padding-top: 46px; padding-bottom: 0; } #oca-spreedme-add-room { position: absolute; width: 249px; top: 0; border-bottom: 1px solid #eee; } .oca-spreedme-add-person { width: 100%; border: 1px solid #eee; } /** * Sidebar styles */ #select2-drop { margin-top: -44px !important; } #oca-spreedme-add-room .select2-container, .oca-spreedme-add-person .select2-container { width: 100%; margin: 0 !important; border: none; padding: 9px; } #oca-spreedme-add-room .select2-container .select2-choice, .oca-spreedme-add-person .select2-container .select2-choice { border: none; } #oca-spreedme-add-room .select2-arrow, .oca-spreedme-add-person .select2-arrow { display: none !important; } #select2-drop .select2-search input { padding: 13px 12px 13px 43px !important; width: 100%; box-sizing: border-box; margin: 0; border: none; background-image: none !important; } #select2-drop .select2-results .select2-result { padding: 0; } .app-navigation-entry-menu li { display: block !important; } .participantWithList .avatar, #app-navigation .avatar, #app-navigation .icon-contacts-dark, #app-navigation .app-navigation-entry-link .icon-public { position: absolute; left: 6px; top: 6px; } .participantWithList li > a:first-child img, #app-navigation li > a:first-child img { width: 32px !important; height: 32px !important; margin: 0 !important; } #app-navigation .icon-contacts-dark, #app-navigation .app-navigation-entry-link .icon-public, .icon-add { background-color: transparent !important; color: transparent !important; border-radius: 0; width: 32px; height: 32px; } .public-room { display: block !important; } .private-room, .hidden-important { display: none !important; } .icon-clippy.public-room { background-size: 16px; position: absolute; right: 0; bottom: 0; padding: 16px; } .icon-delete.public-room { background-size: 16px; position: absolute; right: 0; top: 4px; padding: 16px; opacity: .5; } .password-input, .editable-text-label input { margin-top: 0 !important; margin-bottom: 4px !important; } .icon-confirm.password-confirm, .icon-confirm.confirm-button { background-size: 16px; background-color: transparent; border: none; position: absolute; right: 0; bottom: 3px; padding: 16px; opacity: .5; } .icon-confirm.password-confirm:hover, .icon-confirm.confirm-button:hover { opacity: 1; } .icon-clippy.public-room { background-position-y: 8px !important; } /** * Main view chat styles */ #app-content-wrapper { height: 100%; } #app-content-wrapper #commentsTabView { width: 100%; height: 100%; display: flex; flex-direction: column; } #app-content-wrapper #commentsTabView .comment:first-child { padding-top: 15px; } /* The lateral padding is set for each child instead of for the chat view as a whole to prevent showing the scroll bar padded from the border of the chat view (which could be fixed by using a negative margin and a positive padding in the list of messages) and to ensure that the contacts menu is not clipped due to overflowing the chat view on its left (much harder to fix). */ #app-content-wrapper #commentsTabView .newCommentRow { padding-left: 15px; padding-right: 15px; } #app-content-wrapper #commentsTabView .comments { overflow-y: auto; /* Needed for proper calculation of comment positions in the scrolling container (as otherwise the comment position is calculated with respect to the closest ancestor with a relative position) */ position: relative; padding-left: 15px; padding-right: 15px; } /* Hide all siblings of the chat view when shown as the main view */ #app-content-wrapper #commentsTabView ~ * { display: none !important; } /** * Video styles */ #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 { 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; } video { width: 100%; 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 { -webkit-filter: none; filter: none; } #videos .videoContainer video { border-top-left-radius: 3px; border-top-right-radius: 3px; background-color: #000; } #videos .videoContainer.promoted video { border-top-left-radius: 0; border-top-right-radius: 0; } #videos .videoContainer video, #videos .videoContainer .avatar { box-shadow: 0 0 15px rgba(0, 0, 0, .5); } .participants-1 #videos .videoContainer video, .participants-2 #videos .videoContainer video { padding: 0; } .videoContainer .avatar-container { position: absolute; text-align: center; bottom: 44px; left: 0; width: 100%; } .videoContainer .avatar-container .avatar { display: inline-block; } .videoContainer.promoted .avatar-container { top: 30%; } .videoContainer.promoted .avatar-container + .nameIndicator { display: none; } .videoContainer.promoted .mediaIndicator { display: none !important; } #emptycontent { position: absolute; z-index: 40; } #emptycontent-icon { width: 128px; margin: 0 auto; padding-bottom: 20px; } #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; } .participants-1 #emptycontent { display: block !important; } .participants-1 #video-fullscreen { display: none; } .participants-1 #screensharing-button { display: none; } #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: 33%; min-width: 200px; 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; bottom: 0; border-top-right-radius: 3px; } .videoContainer.promoted, #app-content.incall, #app-content.screensharing { background-color: #000; } /* Use dark icons when not in a call (= white background) */ #app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow { /* Still use white icons outside of calls when local video shows */ &#hideVideo.video-disabled, &#mute.video-disabled { filter: none; } &.icon-menu-people, &.icon-fullscreen { filter: none; opacity: .5; &:hover, &:focus { opacity: 1; } } } #app-content.screensharing .videoContainer video { max-height: 200px; background-color: transparent; box-shadow: 0; } #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; } .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; } .participants-1 .videoView .avatar-container, .participants-2 .videoView .avatar-container { left: initial; } /* ellipsize name in 1on1 calls */ .participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { padding: 12px 35%; } #video-fullscreen { position: absolute; top: 44px; right: 0; z-index: 90; } #video-fullscreen.public { top: 89px; } #video-fullscreen, .nameIndicator button, #app-sidebar-trigger { background-color: transparent; border: none; margin: 0; width: 44px; height: 44px; background-size: 24px; } .nameIndicator button.audio-disabled, .nameIndicator button.video-disabled, .nameIndicator button.screensharing-disabled { opacity: .7; } .nameIndicator button.no-video-available { opacity: .7; cursor: not-allowed; } .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, .screensharingIndicator, .iceFailedIndicator { position: relative; display: inline-block; background-color: transparent !important; border: none; width: 32px; height: 32px; background-size: 22px; } .muteIndicator.audio-on, .screensharingIndicator.screen-off, .iceFailedIndicator.not-failed { display: none; } .muteIndicator.audio-off { opacity: .7; } .iceFailedIndicator { opacity: .8 !important; } /* Fullscreen handling */ /** * Different browsers handle fullscreen elements with a margin in different * ways: Firefox ignores the margin and uses the full width, while Chromium uses * a strange mix which is neither the full width nor the full margin. Due to * this the margin is removed to unify the appearance across browsers; visually, * this causes the sidebar to slide on the content instead of "pushing" it to * the left. */ #app-content:-webkit-full-screen { width: 100%; margin-right: 0; &.participants-1 { background: #fff; } } #app-content:-moz-full-screen { width: 100%; margin-right: 0; &.participants-1 { background: #fff; } } #app-content:-ms-fullscreen { width: 100%; margin-right: 0; &.participants-1 { background: #fff; } } #app-content:fullscreen { width: 100%; margin-right: 0; &.participants-1 { background: #fff; } } /* No switching between rooms in fullscreen, focus on the current call. */ #app-content:-webkit-full-screen #app-navigation-toggle { display: none !important; } #app-content:-moz-full-screen #app-navigation-toggle { display: none !important; } #app-content:-ms-fullscreen #app-navigation-toggle { display: none !important; } #app-content:fullscreen #app-navigation-toggle { display: none !important; } /** * In fullscreen mode there is no header, so the sidebar has to be moved to the * top. */ #app-content:-webkit-full-screen #app-sidebar { top: 0; } #app-content:-moz-full-screen #app-sidebar { top: 0; } #app-content:-ms-fullscreen #app-sidebar { top: 0; } #app-content:fullscreen #app-sidebar { top: 0; } /* In the public page the header is inside the app-content, so it has to be hidden explicitly. */ #app-content:-webkit-full-screen #header { display: none !important; } #app-content:-moz-full-screen #header { display: none !important; } #app-content:-ms-fullscreen #header { display: none !important; } #app-content:fullscreen #header { display: none !important; } /* As there is no header in fullscreen the buttons can be moved to the top. */ #app-content:-webkit-full-screen #app-sidebar-trigger { top: 0; } #app-content:-moz-full-screen #app-sidebar-trigger { top: 0; } #app-content:-ms-fullscreen #app-sidebar-trigger { top: 0; } #app-content:fullscreen #app-sidebar-trigger { top: 0; } #app-content:-webkit-full-screen #video-fullscreen { top: 44px; } #app-content:-moz-full-screen #video-fullscreen { top: 44px; } #app-content:-ms-fullscreen #video-fullscreen { top: 44px; } #app-content:fullscreen #video-fullscreen { top: 44px; } .localmediaerror h2 { color: red; font-weight: bold; } .localmediaerror .uploadmessage { display: none; } .participantWithList li > a, #app-navigation li > a { padding-right: 44px !important; } #app-navigation .utils { padding: 0; } #app-navigation .utils .action { display: inline-block; padding: 22px; cursor: pointer; opacity: .3; } .bubble, #app-navigation .app-navigation-entry-menu { right: 4px; } #app-navigation .app-navigation-entry-menu li { width: auto !important; float: inherit; } #app-navigation .app-navigation-entry-menu li button { float: inherit !important; margin: 0; padding: 0; width: 100% !important; min-height: 44px; } #app-navigation .app-navigation-entry-menu input { margin-left: 5px !important; margin-top: -5px; min-width: 150px; padding-right: 26px; text-overflow: ellipsis; overflow: hidden; } #app-navigation .app-navigation-entry-menu input.first-option { margin-top: 5px; } #app-navigation .app-navigation-entry-menu li span { display: inline-block; height: 36px; line-height: 36px; padding-right: 10px; font-weight: 400; float: left; } #app-navigation .app-navigation-entry-menu li span[class^='icon-'], #app-navigation .app-navigation-entry-menu li span[class*=' icon-'] { padding: 16px; box-sizing: border-box; } #app-navigation .app-navigation-entry-utils-menu-button { display: inline-block; } #app-sidebar-trigger { position: fixed; top: 45px; right: 0; /* Higher than the z-index of the emptycontent */ z-index: 50; cursor: pointer; } .icon-menu-people { background-image: url('../img/menu-people.svg?v=1'); } #app-sidebar .close { position: absolute; top: 0; right: 0; /* The app uses border-box sizing, so the padding is 15px like in the Files * app plus 8px of half the size of the icon */ padding: 23px; opacity: 0.5; /* Higher index than the trigger to hide it when the sidebar is open */ z-index: 20; } #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; } } /* The header element contains the header div; as the header div uses a fixed position the header element has no height, and as #app-content-wrapper uses a "100%" height its contents must be padded to prevent them from overlapping with the header element */ #body-public #app-content-wrapper { padding-top: 45px; } /* make blue header bar transparent in shared room */ #body-public #app-content:not(.participants-1) #header.spreed-public { background: transparent; } /* As the header is hidden (except for the logo), move the fullscreen button and * sidebar to the top during calls */ #body-public #app-content:not(.participants-1) #app-sidebar, #body-public #app-content:not(.participants-1) #app-sidebar-trigger, #body-public #app-content:not(.participants-1) #video-fullscreen { top: 0; z-index: 3000; } #body-public #app-content:not(.participants-1) #video-fullscreen { top: 44px; } /** * Right sidebar */ #app-sidebar .detailCallInfoContainer { padding: 15px; clear: both; } .tabHeaders, #app-sidebar .icon { display: inline-block; } /* START: move padding fixes and icons-for-tabs capability into core */ .tabHeaders { display: flex; margin-top: 0; margin-bottom: 10px; min-height: 44px; } .tabHeaders .tabHeader { flex-basis: 50%; flex-grow: 0; padding: 12px; text-align: center; border-bottom: 1px solid $color-border; margin-bottom: 0; a { padding-left: 32px; background-position: 12px; background-repeat: no-repeat; color: $color-main-text; opacity: .5; } } .tabHeaders .tabHeader.selected a, .tabHeaders .tabHeader:hover a, .tabHeaders .tabHeader:focus a { opacity: 1; } /* END: move padding fixes and icons-for-tabs capability into core */ #app-sidebar.hidden { display: none !important; } .participantWithList .participant-moderator-indicator { opacity: .5; font-weight: 300; padding-left: 5px; } .participantWithList .participant-offline > a { opacity: .5; } .participantWithList li { position: relative; width: 100%; box-sizing: border-box; } .participantWithList li > a { display: block; width: 100%; line-height: 44px; min-height: 44px; overflow: hidden; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; padding-left: 44px; background-size: 16px 16px; background-position: 14px center; background-repeat: no-repeat; } /** * App navigation utils, buttons and counters for drop down menu */ .participantWithList .participant-entry-utils { position: absolute; top: 0; right: 0; z-index: 105; } .participantWithList .active > .participant-entry-utils li { display: inline-block; } .participantWithList .participant-entry-utils button { height: 100%; width: 100%; margin: 0; box-shadow: none; } .participantWithList .participant-entry-utils-menu-button button { border: 0; opacity: .5; } /** * Sidebar details view */ .detailCallInfoContainer .room-name { display: inline-block; } .detailCallInfoContainer h3, .detailCallInfoContainer .guest-name p { display: inline-block; } .detailCallInfoContainer .guest-name p { padding: 9px 0; } .detailCallInfoContainer .editable-text-label .edit-button { display: none; } .detailCallInfoContainer .clipboard-button, .detailCallInfoContainer .password-button, .detailCallInfoContainer .editable-text-label:hover .edit-button { display: inline-block; } .detailCallInfoContainer .clipboard-button .icon, .detailCallInfoContainer .password-button .icon, .detailCallInfoContainer .editable-text-label .edit-button .icon { cursor: pointer; padding: 22px; vertical-align: middle; margin-left: -5px; margin-top: -5px; } .detailCallInfoContainer .editable-text-label .input-wrapper, .detailCallInfoContainer .password-option { position: relative; display: inline-block; } .detailCallInfoContainer .editable-text-label input, .detailCallInfoContainer .password-input { width: 100%; } .detailCallInfoContainer #link-checkbox+label { display: inline-block; padding: 12px 0; } /** * 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 * scroll bar would be shown for the whole sidebar and everything would be * moved when scrolling to see overflown messages. * * The list of messages should stretch to fill the available space at the bottom * of the right sidebar, so the height is cascaded using flex boxes. * * It is horrible, I know (but better than using JavaScript ;-) ). Please * improve it if you know how :-) */ #app-sidebar { display: flex; flex-direction: column; } #app-sidebar .tabs { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; } #app-sidebar .tabsContainer { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; } #app-sidebar .tab { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; } #app-sidebar #commentsTabView { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; } #app-sidebar .comments { overflow-y: auto; /* Needed for proper calculation of comment positions in the scrolling container (as otherwise the comment position is calculated with respect to the closest ancestor with a relative position) */ position: relative; } /** * Place the scroll bar of the message list on the right edge of the sidebar, * but keeping the padding of the tab view. * * The padding must be set on the left too to ensure that the contacts menu * shown when clicking on an author name does not overflow the tab (as it would * be hidden). * * The bottom padding is removed to extend the chat view to the bottom edge of * the sidebar. */ #app-sidebar .tab-chat { padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } #app-sidebar #commentsTabView .newCommentRow, #app-sidebar #commentsTabView .comments { padding-left: 15px; padding-right: 15px; } /** * Limiting the scroll bar in the sidebar to the list of chat messages causes * the scroll bar to be removed from the whole sidebar in other tabs too. * Therefore, the scroll bars must be explicitly enabled in the other tab * contents that need them. */ #app-sidebar #participantsTabView { display: flex; flex-direction: column; overflow: hidden; } #app-sidebar .participantWithList { overflow-y: auto; } /** * Place the scroll bar of the participants list on the right edge of the * sidebar, but keeping the padding of the tab view. * * The bottom padding is removed to extend the participant view to the bottom * edge of the sidebar. */ #app-sidebar .tab-participants { padding-right: 0px; padding-bottom: 0px; } #app-sidebar #participantsTabView form, #app-sidebar #participantsTabView .participantWithList { padding-right: 15px; } /** * Add a little margin so the participants do not "touch" the form when they are * scrolled, in the same way that the chat messages do not disappear directly * below the new message input. */ #app-sidebar #participantsTabView form { margin-bottom: 15px; } /** * Add a little margin to the last participant so the list is nicely framed with * the sides when fully scrolled to the bottom. */ #app-sidebar #participantsTabView .participant:last-child { margin-bottom: 15px; }