From a9423b40c56fcdebaf9f6ae045069969c53c71bb Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Fri, 10 Jan 2020 09:34:37 +0100 Subject: Remove unused SCSS files Signed-off-by: Joas Schilling --- css/chatview.scss | 381 -------------- css/files.scss | 339 ------------ css/publicshare.scss | 489 ----------------- css/publicshareauth.scss | 268 ---------- css/style.scss | 1312 ---------------------------------------------- 5 files changed, 2789 deletions(-) delete mode 100644 css/chatview.scss delete mode 100644 css/files.scss delete mode 100644 css/publicshare.scss delete mode 100644 css/publicshareauth.scss delete mode 100644 css/style.scss (limited to 'css') diff --git a/css/chatview.scss b/css/chatview.scss deleted file mode 100644 index 8e5fadd22..000000000 --- a/css/chatview.scss +++ /dev/null @@ -1,381 +0,0 @@ -/* - * Copyright (c) 2016 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -#chatView .comments, -#chatView .emptycontent { - flex-grow: 1; -} - -#chatView .emptycontent { - margin-top: 0; -} - -#chatView .newCommentForm { - position: relative; -} - -#chatView .newCommentForm .message { - width: calc(100% - 36px); - margin-left: 36px; - padding-right: 30px; - /** - * The div needs to be inline-block, so Chrome/Chromium correctly insert - * div-ed multi-line-text with new lines. - * Otherwise they are just chained together on posting. - * - * See https://stackoverflow.com/a/24689420 - * See https://github.com/nextcloud/spreed/issues/1561 - */ - display: inline-block; -} - -#chatView .newCommentForm .submit, -#chatView .newCommentForm .submitLoading, -#chatView .newCommentForm .share, -#chatView .newCommentForm .shareLoading { - position: absolute; - - width: 44px; - height: 44px; - - bottom: -1px; - margin: 0; -} - -#chatView .newCommentForm .submit, -#chatView .newCommentForm .submitLoading { - right: 0; -} - -#chatView .newCommentForm .share, -#chatView .newCommentForm .shareLoading { - right: -44px; -} - -#chatView .newCommentForm .message:focus + .submit:not(:hover):not(:focus) { - opacity: .6; -} -#chatView .newCommentForm .submit, -#chatView .newCommentForm .share { - background-color: transparent; - border: none; - opacity: .3; -} -#chatView .newCommentForm .submit:hover:not(:disabled), -#chatView .newCommentForm .submit:focus:not(:disabled), -#chatView .newCommentForm .share:hover:not(:disabled), -#chatView .newCommentForm .share:focus:not(:disabled) { - opacity: 1; -} - -#chatView .newCommentForm .cancel { - margin-right: 6px; -} - -#chatView .newCommentForm div.message { - resize: none; -} - -#chatView .newCommentForm div.message:empty:before { - content: attr(data-placeholder); - color: grey; -} - -/* Internal wrappers used by the virtual list. */ -#chatView .comments .wrapper-background, -#chatView .comments .wrapper { - position: absolute; - left: 0; - right: 0; -} - -#chatView .comment { - position: relative; - margin-bottom: 20px; - word-wrap: break-word; - overflow-wrap: break-word; -} - -#chatView .comment .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar{ - width: 32px; - height: 32px; - line-height: 32px; - margin-right: 5px; -} - -#chatView .comment .message .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar -{ - display: inline-block; -} - -#chatView .comment.collapsed .message { - white-space: pre-wrap; -} - -#chatView .comment.collapsed .message { - max-height: 70px; - overflow: hidden; -} - -#chatView .comment .message-overlay { - display: none; -} - -#chatView .comment.collapsed .message-overlay { - display: block; - position: absolute; - z-index: 2; - height: 50px; - pointer-events: none; - left: 0; - right: 0; - bottom: 0; - background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF'); - background-repeat: no-repeat; -} - -#chatView .authorRow>div { - display: inline-block; - vertical-align: middle; -} - -#chatView .authorRow>div.hidden { - display: none !important; -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, -#chatView .comment .authorRow { - position: relative; - display: inline-flex; - align-items: center; - width: 100%; -} - -#chatView .comment .authorRow .contactsmenu-popover { - top: 32px; -} - -body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.guestUser) { - .avatar, - .avatar img, - .author { - cursor: pointer; - } -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img { - cursor: pointer; -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper { - white-space: nowrap; -} - -#chatView .comment .author, -#chatView .comment .date { - color: var(--color-text-maxcontrast); -} -#chatView .comment .author { - margin-left: 5px; -} -#chatView .comment .date { - /* "margin-left: auto" aligns the block to the right, while - * "text-align: right" aligns the text inside the block to the right, for - * example, when it uses two lines due to a limited width. */ - margin-left: auto; - text-align: right; - display: inline-block; - vertical-align: top; -} - -#chatView .comment.systemMessage:not(.grouped) { - margin-top: -10px; -} - -#chatView .comment:not(.systemMessage):not(.grouped):not(.same-author) .date { - margin-top: -32px; -} - -#chatView .comment.grouped .date { - display: none; -} - -#chatView .comments .authorRow, -#chatView .comments li .message { - /* Makes the container slightly narrower in order not to cover the date on - * the right side, thus allowing the date tooltip to be shown properly. */ - width: calc(100% - 80px) -} - -#chatView .comments li .message { - padding-left: 40px; - display: inline-block; -} - -#chatView .comment .action { - opacity: 0; - vertical-align: middle; - display: inline-block; -} - -#chatView .comment:hover .action { - opacity: 0.3; -} - -#chatView .comment .action:hover { - opacity: 1; -} - -#chatView .comment .action.delete { - position: absolute; - right: 0; -} - -#chatView .comment.disabled { - opacity: 0.3; -} - -#chatView .comment.disabled .action { - visibility: hidden; -} - -#chatView .message.error { - color: #e9322d; - border-color: #e9322d; - box-shadow: 0 0 6px #f8b9b7; -} - -#chatView .comment.grouped .authorRow, -#chatView .comment.same-author .authorRow { - display: none; -} - -#chatView .comment.grouped, -#chatView .comment.same-author { - margin-top: -15px; -} - -#chatView .comment.showDate { - margin-top: 40px; - border-top: 1px solid var(--color-border); - padding-top: 20px; -} - -#chatView .comment.showDate:before { - content: attr(data-date); - - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%) translateY(-50%); - padding: 0 7px 0 7px; - - text-align: center; - white-space: nowrap; - - color: var(--color-text-maxcontrast); - background-color: var(--color-main-background); -} - -#chatView .comment.showDate .authorRow { - display: inline-flex; -} - -#chatView .comment .message .mention-call, -#chatView .comment .message .mention-user { - /* Make the mention the positioning context of its child contacts menu */ - position: relative; - - display: inline; - vertical-align: top; - background-color: var(--color-background-dark); - border-radius: 50vh; - padding: 1px 7px 1px 1px; - - /* Ensure that the avatar and the user name will be kept together; - * otherwise a line break could be added between them when the wrapper - * is close to the right border of the message. */ - white-space: nowrap; - - .avatar { - img { - vertical-align: top; - } - height: 16px; - width: 16px; - vertical-align: middle; - padding: 1px; - margin-top: -4px; - margin-left: 0; - margin-right: 2px; - - &.icon { - margin-top: -2px; - margin-left: 1px; - background-color: var(--color-background-darker); - } - } -} - -#chatView .comment:not(.systemMessage) .message .mention-call, -#chatView .comment:not(.systemMessage) .message .mention-user { - font-weight: bold; - - &.currentUser { - background-color: var(--color-primary); - color: var(--color-primary-text); - } -} - -#chatView .comment.systemMessage .message .mention-call, -#chatView .comment.systemMessage .message .mention-user { - color: var(--color-main-text); -} - -#chatView .comment.systemMessage .message { - color: var(--color-text-maxcontrast); -} - -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser), -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar, -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img { - cursor: pointer; -} - -#chatView .comment .message .contactsmenu-popover { - left: -6px; - top: 24px; -} - -#chatView .comment .message .filePreviewContainer .filePreview { - /* The file preview can not be a block; otherwise it would fill the whole - * width of the container and the loading icon would not be centered on the - * image. */ - display: inline-block; -} - -#chatView .comment .message .filePreviewContainer strong { - /* As the file preview is an inline block the name is set as a block to - * force it to be on its own line below the preview. */ - display: block; -} - -#chatView .comment .message .external:after { - content: " ↗"; -} diff --git a/css/files.scss b/css/files.scss deleted file mode 100644 index c091b3762..000000000 --- a/css/files.scss +++ /dev/null @@ -1,339 +0,0 @@ -#talkChatTabView .call-button { - text-align: center; - margin-bottom: 10px; - - button { - padding-left: 26px; - padding-right: 26px; - } - - .icon-loading-small { - /* Prevent the text from being moved when the icon is shown. */ - position: absolute; - - margin-left: 5px; - margin-top: 1px; - - /* Unset the background image set by the server for loading icons inside - * buttons, as in this case the pure CSS icon can be used instead of the - * image. */ - background-image: unset; - - &.hidden { - display: none; - } - } -} - -#talkChatTabView .file-not-shared button { - margin-top: 15px; -} - - - - -.talkCallInfoView #call-container-wrapper { - /* Overlap the padding from the sidebar itself to maximize the area of the - * video as much as possible */ - margin-left: -15px; - margin-right: -15px; - margin-top: -15px; -} - -.talkCallInfoView #call-container-wrapper #emptycontent-icon { - width: 128px; - margin: 0 auto; - padding-bottom: 20px; -} - -.talkCallInfoView #call-container-wrapper #call-container.incall ~ #emptycontent { - display: none; -} - -.talkCallInfoView #call-container-wrapper #call-container:not(.incall) { - display: none; -} - -.talkCallInfoView #call-container-wrapper #call-container { - position: relative; - - /* Show the call container in a 16/9 proportion based on the sidebar - * width. This is the same proportion used for previews of images by the - * SidebarPreviewManager. */ - padding-bottom: 56.25%; - max-height: 56.25%; - - /* Ensure that the background will be black also in voice only calls. */ - background-color: #000; -} - -/* Video in Talk sidebar */ -.talkCallInfoView #call-container-wrapper #call-container #videos { - position: absolute; - - flex-grow: 1; -} - -.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 #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 - * vertical than in horizontal. */ - width: 100%; - height: auto; -} - -.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. */ - box-sizing: border-box; -} - -/* Screensharing in Talk sidebar */ -.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 #call-container #videos .videoContainer:not(.promoted) video { - /* Make the unpromoted videos smaller to not overlap too much the promoted - * video */ - max-height: 100px; -} - -/* The avatars are requested with a size of 128px, so reduce it to not overlap - * too much the promoted video */ -.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 #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; - /* z-index of 10 would put the video on top of the close button. */ - z-index: 1; -} - - - -.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 #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { - /* Reduce padding to bring the name closer to the bottom */ - padding: 3px 35%; -} - - - -.talkCallInfoView #call-container .mediaIndicator { - /* Move the media indicator closer to the bottom */ - bottom: 16px; -} - - - - - -/* Helper class to hide other info views during a call; this makes possible to - * restore their previous visibility once the call stops without having to keep - * track of their previous visibility. */ -#app-sidebar .hidden-by-call { - display: none; -} - -/* Force the white icon during calls, independent from white/dark mode - * selection, because it is shown on the black calling screen. */ -#app-sidebar .icon-close.force-icon-white-in-call.icon-shadow { - background-image: url(icon-color-path('close', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - - - - - -/** - * 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 { - /* Override "display: block" set inline by jQuery. */ - display: flex !important; - flex-direction: column; -} - -#app-sidebar.disappear { - /* Override "display: flex !important" when the sidebar has to be hidden. */ - display: none !important; -} - -#app-sidebar .detailFileInfoContainer { - display: flex; - flex-direction: column; - - flex-shrink: 0; -} - -#app-sidebar .tabsContainer { - display: flex; - flex-direction: column; - - flex-grow: 1; -} - -#app-sidebar .tab { - display: flex; - flex-direction: column; - - flex-grow: 1; -} - -#app-sidebar .tabsContainer.with-inner-scroll-bars, -#app-sidebar .tabsContainer.with-inner-scroll-bars .tab { - overflow: hidden; -} - -/* Force a minimum height to ensure that the chat view will be at least 300px - * height, even if the info view is large and the screen short; in that case a - * scroll bar will be shown for the sidebar, but even if that looks really bad - * it is better than an unusable chat view. */ -#app-sidebar .tabsContainer.force-minimum-height { - min-height: 300px; -} - -#app-sidebar .tab.hidden { - display: none; -} - -#app-sidebar #chatView { - display: flex; - flex-direction: column; - overflow: hidden; - - flex-grow: 1; -} - -#app-sidebar #chatView .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: 0; - padding-right: 0; - padding-bottom: 0; -} - -/* Hack needed to overcome the padding of the tab container and move the scroll - * bar of the messages list to the right border of the sidebar. */ -#app-sidebar .tabsContainer.with-inner-scroll-bars .tab { - padding-right: 0px; -} - -#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder { - /* Make the placeholder take the full tab height until the UI is ready. */ - flex-grow: 1; -} - -/* Hide other UI elements when there is a "UI not ready" placeholder. */ -#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ div, -/* #chatView needs to be set explicitly to override the display property of - * "#app-sidebar #chatView". */ -#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ #chatView { - display: none; -} - -#app-sidebar #chatView .comments { - padding-right: 15px; -} - -#app-sidebar #chatView .comments .wrapper-background, -#app-sidebar #chatView .comments .wrapper { - /* Padding is not respected in the comment wrapper due to its absolute - * positioning, so it must be set through its position. */ - right: 15px; -} - -#app-sidebar #chatView .newCommentRow { - /* The details view in the Files app has a bottom padding of 15px, so the - * general bottom margin used for comments should be reduced for the new - * comment form. */ - margin-bottom: 5px; -} - -#app-sidebar #chatView .newCommentForm { - /* Make room to show the "Add" button when chat is shown in the sidebar. */ - margin-right: 44px; -} diff --git a/css/publicshare.scss b/css/publicshare.scss deleted file mode 100644 index f1d68635a..000000000 --- a/css/publicshare.scss +++ /dev/null @@ -1,489 +0,0 @@ -/* Special layout to include the Talk sidebar */ - -/* The standard layout defined in the server includes a fixed header with a - * sticky sidebar. This causes the scroll bar for the main area to appear to the - * right of the sidebar, which looks confusing for the chat. Thus that layout is - * overridden with a full set of flex containers to cascade parent element - * height to the main view to limit the vertical scroll bar only to it (same - * thing done for the sidebar and the chat view). */ -#body-user, -#body-public { - display: flex; - flex-direction: column; -} - -#body-user #header, -#body-public #header { - /* Override fixed position from server to include it in the flex layout */ - position: static; - flex-shrink: 0; -} - -#content { - display: flex; - flex-direction: row; - overflow: hidden; - - flex-grow: 1; - - /* Override "min-height: 100%" and "padding-top: 50px" set in server, as the - * header is part of the flex layout and thus the whole body is not - * available for the content. */ - min-height: 0; - padding-top: 0; - - /* Does not change anything in normal mode, but ensures that the element - * will stretch to the full width in full screen mode. */ - width: 100%; - - /* Override margin used in server, as the header is part of the flex layout - * and thus the content does not need to be pushed down. */ - margin-top: 0; -} - -#app-content { - display: flex; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - - flex-grow: 1; - - margin-right: 0; -} - -#files-public-content { - flex-grow: 1; -} - - - -.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; - flex-shrink: 0; - width: 27vw; - min-width: 300px; - - background: var(--color-main-background); - border-left: 1px solid var(--color-border); - - overflow-x: hidden; - overflow-y: auto; - z-index: 500; - - transition: var(--animation-quick) width ease-in-out, - var(--animation-quick) min-width ease-in-out; -} - -#talk-sidebar.disappear { - width: 0; - min-width: 0; - border-left-width: 0; -} - - - -/* Talk sidebar */ -#talk-sidebar { - display: flex; - flex-direction: column; - 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; - - margin-top: 10px; -} - -#talk-sidebar #call-container-wrapper { - /* Overlap the padding from the sidebar itself to maximize the area of the - * video as much as possible */ - margin-left: -15px; - margin-right: -15px; -} - -#talk-sidebar #call-container-wrapper #emptycontent { - /* Compensate for the removed margins above. */ - margin-left: 30px; - margin-right: 30px; - - /* Override "width: 100%" set in server so margins are respected. */ - width: auto; -} - -#talk-sidebar #call-container-wrapper #emptycontent-icon { - width: 128px; - margin: 0 auto; - padding-bottom: 20px; -} - -#talk-sidebar #call-container-wrapper #call-container.incall ~ #emptycontent { - display: none; -} - -#talk-sidebar #call-container-wrapper #call-container:not(.incall) { - display: none; -} - -#talk-sidebar #call-container-wrapper #call-container { - position: relative; - - flex-grow: 1; - - /* Prevent shadows of videos from leaking on other elements. */ - overflow: hidden; - - /* Show the call container in a 16/9 proportion based on the sidebar - * width. This is the same proportion used for previews of images by the - * SidebarPreviewManager. */ - padding-bottom: 56.25%; - max-height: 56.25%; - - /* Ensure that the background will be black also in voice only calls. */ - background-color: #000; -} - -/* Video in Talk sidebar */ -#talk-sidebar #call-container-wrapper #call-container #videos { - flex-grow: 1; -} - -#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 - * vertical than in horizontal. */ - width: 100%; - height: auto; -} - -/* Screensharing in Talk sidebar */ -#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 #call-container #videos .videoContainer:not(.promoted) video { - /* Make the unpromoted videos smaller to not overlap too much the promoted - * video */ - max-height: 100px; -} - -/* The avatars are requested with a size of 128px, so reduce it to not overlap - * too much the promoted video */ -#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; - 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; - /* z-index of 10 would put the video on top of the close button. */ - z-index: 1; -} - -#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 #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator { - /* Reduce padding to bring the name closer to the bottom */ - padding: 3px 35%; -} - -#talk-sidebar #call-container .mediaIndicator { - /* Move the media indicator closer to the bottom */ - bottom: 16px; -} - - - -#talk-sidebar .call-button { - text-align: center; - margin-top: 20px; - margin-bottom: 20px; - - button { - padding-left: 26px; - padding-right: 26px; - } - - .icon-loading-small { - /* Prevent the text from being moved when the icon is shown. */ - position: absolute; - - margin-left: 5px; - margin-top: 1px; - - /* Unset the background image set by the server for loading icons inside - * buttons, as in this case the pure CSS icon can be used instead of the - * image. */ - background-image: unset; - - &.hidden { - display: none; - } - } -} - - - -/** - * 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. - */ -#talk-sidebar #chatView { - display: flex; - flex-direction: column; - overflow: hidden; - - flex-grow: 1; - - /* Distribute available height between call container and chat view. */ - height: 50%; -} - -#talk-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; -} - -#talk-sidebar #chatView .newCommentRow, -#talk-sidebar #chatView .comments { - padding-left: 15px; - padding-right: 15px; -} - -#talk-sidebar #chatView .comments .wrapper-background, -#talk-sidebar #chatView .comments .wrapper { - /* Padding is not respected in the comment wrapper due to its absolute - * positioning, so it must be set through its position. */ - left: 15px; - right: 15px; -} - -#talk-sidebar #chatView .newCommentForm.with-add-button { - /* Make room to show the "Add" button if needed. */ - margin-right: 44px; -} - - - -/** - * Confirm icon inside input field. - * - * The input and the icon should be direct children of a wrapper with a relative - * position. The input is expected to be as wide as its wrapper. - * - * It is assumed that the icon will have the standard width for buttons in - * inputs of 34px. However, further adjustments may be needed for the input and - * the padding depending on the context where they are used. - * - * The confirm icon can have a sibling loading icon to switch to (by hiding one - * icon and showing the other) while the operation is in progress. - */ -input[type="text"], -input[type="password"] { - padding-right: 34px; - - /* When the input is focused it is expected that pressing enter will confirm - * the input just like clicking on the icon would do. To hint this behaviour - * the opacity of the confirm icon is slightly increased in this case. - */ - &:focus + .icon-confirm:not(:disabled) { - opacity: .6; - } - - & + .icon-confirm { - position: absolute; - top: 0; - /* Compensate for right margin of inputs set in the server. */ - right: 3px; - - /* Border and background color are removed to show only the icon inside - * the input. */ - border: none; - background-color: transparent; - - opacity: .3; - - &:hover:not(:disabled), - &:focus:not(:disabled), - &:active:not(:disabled) { - opacity: 1; - } - - + .icon-loading-small { - /* Mimic size set in server for confirm button. */ - width: 34px; - height: 34px; - padding: 7px 6px; - margin-top: 3px; - margin-bottom: 3px; - - position: absolute; - top: 0; - right: 3px; - } - } -} - - - -.authorRow { - .editable-text-label { - .label-wrapper { - display: flex; - align-items: center; - .edit-button .icon { - background-color: transparent; - border: none; - padding: 13px 22px; - margin: 0; - - opacity: .3; - - &:hover, - &:focus, - &:active { - opacity: 1; - } - } - } - .input-wrapper { - position: relative; - - .icon-confirm { - /* Needed to override an important rule set in the - * server. */ - background-color: transparent !important; - } - } - .label { - margin-left: 5px; - } - } - - .guest-name p { - display: inline-block; - padding: 9px 0; - } - - /* The specific locator is needed to have higher priority than other - * important rules set in the server. */ - input.checkbox + label.checkbox-label, - input.radio + label { - /* If ".icon-loading-small" is set hide the checkbox and show a - * loading icon instead. */ - &.icon-loading-small:before { - background-image: none !important; - background-color: transparent !important; - border-color: transparent !important; - } - &.icon-loading-small:after { - top: 22px; - left: 21px; - } - } -} - - - -.hidden-important { - display: none !important; -} diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss deleted file mode 100644 index b845a0baf..000000000 --- a/css/publicshareauth.scss +++ /dev/null @@ -1,268 +0,0 @@ -/* Request password button has the appearance of the log in button */ -.request-password-wrapper { - position: relative; - width: 280px; - margin: 16px auto; -} - -.request-password-wrapper .icon { - position: absolute; - top: 23px; - right: 23px; - pointer-events: none; -} - -input#request-password-button { - width: 269px; - padding: 10px 10px; -} - -input#request-password-button:disabled ~ .icon { - opacity: 0.5; -} - - - -/* Special layout to include the Talk sidebar */ -/* The original style of the body is kept until the layout has been adjusted to - * include the Talk sidebar. If only "#body-login" was used, immediately after - * load and before the sidebar was injected the original elements would be using - * the style for the adjusted layout, which is not the proper one for them, and - * this would cause the elements to "jump" to their final position once the - * layout was adjusted. */ -#body-login.talk-sidebar-enabled { - flex-direction: row; - align-items: stretch; -} - -/* #body-login should be used to override the #content rules set in server. */ -#body-login #content { - flex-grow: 1; - - display: flex; - flex-direction: column; - align-items: center; - - height: auto; - - overflow-x: hidden; - - /* Override "padding-top: 50px" set in server. */ - padding-top: 0; -} - -/* Properties based on the app-sidebar */ -#talk-sidebar { - position: relative; - flex-shrink: 0; - width: 27vw; - min-width: 300px; - height: 100vh; - - background: var(--color-main-background); - border-left: 1px solid var(--color-border); - - overflow-x: hidden; - overflow-y: auto; - z-index: 500; - - transition: 300ms width ease-in-out, - 300ms min-width ease-in-out; -} - -#talk-sidebar.disappear { - width: 0; - min-width: 0; - border-left-width: 0; -} - - - -/* Talk sidebar */ -#talk-sidebar { - display: flex; - flex-direction: column; - justify-content: center; -} - -#talk-sidebar #emptycontent { - position: relative; - - margin-top: 10px; -} - -#talk-sidebar #call-container.incall ~ #emptycontent { - display: none; -} - -#talk-sidebar #call-container:not(.incall) { - display: none; -} - -#talk-sidebar #call-container { - position: relative; - - flex-grow: 1; - - /* Prevent shadows of videos from leaking on other elements. */ - overflow: hidden; - - /* Distribute available height between call container and chat view. */ - height: 50%; - - /* Ensure that the background will be black also in voice only calls. */ - background-color: #000; -} - -/* Video in Talk sidebar */ -#talk-sidebar #call-container #videos { - position: relative; - - flex-grow: 1; -} - -#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 #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 - * vertical than in horizontal. */ - width: 100%; - height: auto; -} - -#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; -} - -/** - * 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. - */ -#talk-sidebar #chatView { - display: flex; - flex-direction: column; - overflow: hidden; - - flex-grow: 1; - - /* Distribute available height between call container and chat view. */ - height: 50%; -} - -#talk-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; -} - -#talk-sidebar #chatView .newCommentRow, -#talk-sidebar #chatView .comments { - padding-left: 15px; - padding-right: 15px; -} - -#talk-sidebar #chatView .comments .wrapper-background, -#talk-sidebar #chatView .comments .wrapper { - /* Padding is not respected in the comment wrapper due to its absolute - * positioning, so it must be set through its position. */ - left: 15px; - right: 15px; -} - -#talk-sidebar #chatView .comments .wrapper { - /* Reset the rules set for ".wrapper" elements by "guest.scss" in server, as - * they affect too the virtual list wrapper when they should not. */ - width: auto; - margin-top: 0; -} - -#talk-sidebar #chatView .comments .message { - /* The messages are left padded, but they also use "width: calc(100%...", so - * the padding should be included in the full width of the element. */ - box-sizing: border-box; -} - -#talk-sidebar #chatView .newCommentForm.with-add-button { - /* Make room to show the "Add" button if needed. */ - margin-right: 44px; -} - -/* Unset conflicting rules from guest.css for the sidebar */ -#talk-sidebar { - text-align: left; -} - -#talk-sidebar form { - width: unset; - margin: 0; -} - -#talk-sidebar .button { - display: unset; -} - -/* Restore rules from input.scss overriden by guest.css for the sidebar */ -#talk-sidebar input:not([type='range']) { - margin: 3px 3px 3px 0; - padding: 7px 6px; - font-size: 13px; - border: 1px solid var(--color-border-dark); - box-sizing: border-box; - - &:not(:disabled):not(.primary) { - &:hover, - &:focus { - border-color: var(--color-primary-element); - } - } -} - -#talk-sidebar input[type="text"], -#talk-sidebar input[type="password"] { - width: 130px; - - padding-right: 34px; -} - -/* Restore rules from style.scss (core) overriden by guest.css for the - * sidebar */ -#body-login #talk-sidebar a { - color: var(--color-main-text); - font-weight: inherit; -} - -/* Unset conflicting rules from publicshareauth.css (core) for the sidebar */ -#talk-sidebar input[type="submit"], -#talk-sidebar input.icon-confirm[type="submit"] { - top: unset; -} - -#talk-sidebar .guest-name input.icon-confirm[type="submit"] { - top: -5px; - right: 0px; - border: none; -} - -/* Unset conflicting rules from guest.css for the sidebar */ -#talk-sidebar input[type="submit"].hidden, -#talk-sidebar input.icon-confirm[type="submit"].hidden { - display: none; -} diff --git a/css/style.scss b/css/style.scss deleted file mode 100644 index 2a4061276..000000000 --- a/css/style.scss +++ /dev/null @@ -1,1312 +0,0 @@ -/* The standard layout defined in the server includes a fixed header with a - * sticky sidebar. This causes the scroll bar for the main area to appear to the - * right of the sidebar, which looks confusing for the chat. Thus that layout is - * overridden with a full set of flex containers to cascade parent element - * height to the main view to limit the vertical scroll bar only to it (same - * thing done for the sidebar and the chat view). */ -#body-user, -#body-public { - display: flex; - flex-direction: column; -} - -#body-user #header, -#body-public #header { - /* Override fixed position from server to include it in the flex layout */ - position: static; - flex-shrink: 0; -} - -#content { - display: flex; - flex-direction: row; - overflow: hidden; - - flex-grow: 1; - - /* Override "min-height: 100%" and "padding-top: 50px" set in server, as the - * header is part of the flex layout and thus the whole body is not - * available for the content. */ - min-height: 0; - padding-top: 0; - - /* Does not change anything in normal mode, but ensures that the element - * will stretch to the full width in full screen mode. */ - width: 100%; - - /* Override margin used in server, as the header is part of the flex layout - * and thus the content does not need to be pushed down. */ - margin-top: 0; -} - -#app-content-wrapper { - display: flex; - flex-direction: column; - overflow: hidden; - - flex-grow: 1; - - @media (max-width: $breakpoint-mobile) { - /* In narrow screens force the app content width to the full viewport - * width to prevent the app content from being compressed when the - * sidebar is shown. */ - width: 100vw; - } -} - -.contactsmenu-popover li > a > img { - /* The app uses border-box sizing, so the size of the icon is the - * width/height plus the padding set by default in the server - * (16px + 11px*2). */ - width: 38px; - height: 38px; -} - - - -/** - * Confirm icon inside input field. - * - * The input and the icon should be direct children of a wrapper with a relative - * position. The input is expected to be as wide as its wrapper. - * - * It is assumed that the icon will have the standard width for buttons in - * inputs of 34px. However, further adjustments may be needed for the input and - * the padding depending on the context where they are used. - * - * The confirm icon can have a sibling loading icon to switch to (by hiding one - * icon and showing the other) while the operation is in progress. - */ -input[type="text"], -input[type="password"] { - padding-right: 34px; - - /* When the input is focused it is expected that pressing enter will confirm - * the input just like clicking on the icon would do. To hint this behaviour - * the opacity of the confirm icon is slightly increased in this case. - */ - &:focus + .icon-confirm:not(:disabled) { - opacity: .6; - } - - & + .icon-confirm { - position: absolute; - top: 0; - /* Compensate for right margin of inputs set in the server. */ - right: 3px; - - /* Border and background color are removed to show only the icon inside - * the input. */ - border: none; - background-color: transparent; - - opacity: .3; - - &:hover:not(:disabled), - &:focus:not(:disabled), - &:active:not(:disabled) { - opacity: 1; - } - - + .icon-loading-small { - /* Mimic size set in server for confirm button. */ - width: 34px; - height: 34px; - padding: 7px 6px; - margin-top: 3px; - margin-bottom: 3px; - - position: absolute; - top: 0; - right: 3px; - } - } -} - -.menuitem input[type="text"], -.menuitem input[type="password"] { - & + .icon-confirm + .icon-loading-small { - /* Mimic size set in server for inputs in menu items. */ - min-width: 44px; - max-height: 40px; - margin: 2px 0; - - /* Override padding set in server for icons in menu items. */ - padding: 7px 6px; - } -} - - - -/** - * Sidebar styles - */ - -#select2-drop { - margin-top: -44px !important; -} -#oca-spreedme-add-room .select2-container { - border-bottom: 1px solid var(--color-border); - - &.select2-container-active { - border-bottom-color: var(--color-border-dark); - border-right: 1px solid var(--color-border-dark); - - .select2-choice, - .select2-default { - color: var(--color-text-light) !important; - } - } -} -.oca-spreedme-add-person .select2-container { - border: 1px solid var(--color-border); - border-radius: var(--border-radius); - - &.select2-container-active { - border-color: var(--color-border-dark); - - .select2-choice, - .select2-default { - color: var(--color-text-light) !important; - } - } -} -#oca-spreedme-add-room .select2-container, -.oca-spreedme-add-person .select2-container { - width: 100%; - margin: 0 !important; - padding: 9px; -} -#oca-spreedme-add-room .select2-container .select2-choice, -.oca-spreedme-add-person .select2-container .select2-choice { - border: none; - color: var(--color-text-maxcontrast) !important; -} -#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 .app-navigation-entry-link > .avatar { - position: absolute; - left: 6px; - top: 6px; -} - -#app-navigation li > a:first-child img { - width: 32px !important; - height: 32px !important; - margin: 0 !important; -} - -.participantWithList .contactsmenu-popover { - margin-left: 7px; -} - -.select2-result .avatar.icon, -.atwho-view-ul .avatar.icon, -#app-navigation .app-navigation-entry-link .avatar.icon { - border-radius: 50%; - width: 32px; - height: 32px; - background-color: var(--color-background-darker); -} - -.icon-file-white { - @include icon-color('text', 'filetypes', $color-white, 1, true); -} - -.icon-changelog { - background-image: url('../img/changelog.svg'); -} - -#app-navigation .favorite-mark { - position: absolute; - /* 44px is the padding of the main entry link, and 16px the size (size, not - * background size) of the icon, both defined in the server. */ - left: calc(44px - 16px); - line-height: 100%; - - .icon-favorite { - display: inline-block; - vertical-align: middle; - - /* Show favorite icon in yellow instead of default black. */ - @include icon-color('star-dark', 'actions', 'FC0', 1, true); - } -} - -#app-navigation .app-navigation-entry-utils-counter { - overflow: hidden; - text-align: right; - font-size: 9pt; - padding: 0 12px; /* Same padding as all li > a in the app-navigation */ - - span { - padding: 2px 5px; - border-radius: 10px; - font-weight: bold; - background-color: var(--color-background-dark); - } - - &.highlighted { - padding-right: 0; - text-align: center; - width: 22px !important; - - span { - background-color: var(--color-primary); - color: var(--color-primary-text); - } - } -} - -.hidden-important { - display: none !important; -} - -/** - * Main view chat styles - */ -#app-content-wrapper { - height: 100%; -} - -#app-content-wrapper #chatView { - width: 100%; - height: 100%; - - display: flex; - flex-direction: column; -} - -/* 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 #chatView .newCommentRow { - padding-left: 44px; - padding-right: 44px; -} - -#app-content-wrapper #chatView .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: 44px; - padding-right: 44px; -} - - -#app-content-wrapper #chatView .comments .wrapper-background, -#app-content-wrapper #chatView .comments .wrapper { - /* Padding is not respected in the comment wrapper due to its absolute - * positioning, so it must be set through its position. */ - left: 44px; - right: 44px; -} - -/* Hide all siblings of the chat view when shown as the main view */ -#app-content-wrapper #chatView ~ *:not(#video-fullscreen):not([id^=tooltip]) { - display: none !important; -} - -#emptycontent { - position: absolute; - z-index: 40; -} - -#emptycontent-icon { - width: 128px; - margin: 0 auto; - padding-bottom: 20px; -} - - -#app-content ~ #app-sidebar-wrapper .icon-menu-people, -#app-content .icon-fullscreen { - opacity: .5; - - &:hover, - &:focus { - opacity: 1; - } -} - -#app-content.incall .force-icon-white-in-call, -#app-content.screensharing .force-icon-white-in-call, -#app-content.incall ~ #app-sidebar-wrapper .force-icon-white-in-call, -#app-content.screensharing ~ #app-sidebar-wrapper .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-menu-people { - background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1, false)); - } - &.icon-fullscreen { - background-image: url(icon-color-path('fullscreen', '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)); - } -} - -/* Use white icon for the app navigation toggle when in a call; this can not be - * integrated above because the navigation toggle is created by the core and - * does not include the Talk-specific "force-icon-white-in-call" CSS class. */ -#app-content.incall .icon-menu, -#app-content.screensharing .icon-menu { - background-image: url(icon-color-path('menu', 'actions', 'fff', 1, true)); - filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); -} - -#video-fullscreen { - position: absolute; - top: 44px; - right: 0; - z-index: 90; -} - -#video-fullscreen, -#app-sidebar-trigger { - background-color: transparent; - border: none; - margin: 0 10px 0 0; - width: 44px; - height: 44px; -} - - - -/* Fullscreen handling */ - -/* No switching between rooms in fullscreen, focus on the current call. */ -#content:-webkit-full-screen #app-navigation-toggle { - display: none !important; -} -#content:-moz-full-screen #app-navigation-toggle { - display: none !important; -} -#content:-ms-fullscreen #app-navigation-toggle { - display: none !important; -} -#content:fullscreen #app-navigation-toggle { - display: none !important; -} - -#content:-webkit-full-screen #app-navigation { - display: none; -} -#content:-moz-full-screen #app-navigation { - display: none; -} -#content:-ms-fullscreen #app-navigation { - display: none; -} -#content:fullscreen #app-navigation { - display: none; -} - -#content:-webkit-full-screen #app-content { - margin-left: 0; -} -#content:-moz-full-screen #app-content { - margin-left: 0; -} -#content:-ms-fullscreen #app-content { - margin-left: 0 !important; -} -#content:fullscreen #app-content { - margin-left: 0; -} - -#content:-ms-fullscreen #app-sidebar { - /* The sidebar height is unset in Talk to override the "100vh-50px" set in - * server and force it to get the full height in fullscreen mode. However, - * IE11 does not support "unset", so the height needs to be explicitly set - * to 100%. */ - height: 100%; - /* Remove the space added when IE is used to not overlap with the header. */ - top: 0; -} - -/* Set the background of the content to the same colour as the app content and - * the app sidebar to prevent a black background from appearing when the sidebar - * is shown or hidden. - * During a call the background of the app content is black, but as the - * background of the content has the same colour of the sidebar and is a - * placeholder on its position it looks acceptable. */ -#content:-webkit-full-screen { - background-color: var(--color-main-background); -} -#content:-moz-full-screen { - background-color: var(--color-main-background); -} -#content:-ms-fullscreen { - background-color: var(--color-main-background); -} -#content:fullscreen { - background-color: var(--color-main-background); -} - - -.localmediaerror h2 { - color: red; - font-weight: bold; -} - -.localmediaerror .emptycontent-additional { - display: none; -} - -#app-navigation .utils { - padding: 0; -} -#app-navigation .utils .action { - display: inline-block; - padding: 22px; - cursor: pointer; - opacity: .3; -} - -#app-navigation .app-navigation-entry-menu li { - width: auto !important; - float: inherit; -} - -#app-navigation .app-navigation-entry-menu li.active { - box-shadow: inset 4px 0 var(--color-primary); - margin-left: -1px; - padding-left: 1px; -} - -.room-moderation-button .menu li div.separator, -#app-navigation .app-navigation-entry-menu li div.separator { - border-bottom: 1px solid var(--color-border-dark); - margin: 0 10px; - width: 100%; -} - - -#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-caption { - font-weight: bold; - line-height: 44px; - white-space: nowrap; - text-overflow: ellipsis; - padding: 0 36px 0 36px; - // !important to overwrite specific hover and focus - opacity: .7; - box-shadow: none !important; - user-select: none; - pointer-events: none; -} - -#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; - width: 36px; -} - -#app-navigation .app-navigation-entry-utils-menu-button { - display: inline-block; -} - -/* The sidebar wrapper contains the trigger for the sidebar and the sidebar - * itself placed in columns. To prevent the trigger from taking up space for the - * app content the trigger width is removed from the wrapper by pushing its left - * margin. */ -#app-sidebar-wrapper { - display: flex; - margin-left: -44px; -} - -#app-sidebar-trigger { - /* Higher than the z-index of the app-content */ - z-index: 1050; - cursor: pointer; -} - -/* Override server definitions to ensure that the sidebar is vertically - * stretched, as the header is part of the flex layout and its height does not - * need to be removed from the sidebar (specially in fullscreen mode where there - * is no header). */ -#app-sidebar { - position: static; - height: unset; - top: 0; -} - -/* The server sets the position of the sidebar as fixed when IE is used, so it - * needs to be pulled down to not overlap with the header. */ -.ie #app-sidebar { - top: $header-height; -} - -@include icon-black-white('menu-people', 'spreed', 1); -@include icon-black-white('no-password', 'spreed', 1); -@include icon-black-white('share-window', 'spreed', 1); -@include icon-black-white('lobby', 'spreed', 1); - -#app-sidebar .close { - position: absolute; - top: 0; - right: 0; - padding: 22px; - opacity: .3; - /* Higher index than the trigger to hide it when the sidebar is open */ - z-index: 20; -} - -#app-sidebar .close:hover, -#app-sidebar .close:focus { - opacity: 1; -} - -/* 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 { - 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; - - /* Prevent the chat view from vertically compressing the tab headers */ - flex-shrink: 0; -} - -.tabHeaders .tabHeader { - flex-basis: 50%; - flex-grow: 0; - padding: 12px; - text-align: center; - border-bottom: 1px solid var(--color-border); - margin-bottom: 0; - - .icon, a { - color: var(--color-main-text); - opacity: .5; - } -} - -.tabHeaders .tabHeader.selected, -.tabHeaders .tabHeader:hover, -.tabHeaders .tabHeader:focus { - .icon, a { - opacity: 1; - } -} -/* END: move padding fixes and icons-for-tabs capability into core */ - -/* In Talk clicking on the selected tab header has no effect, so the pointer - * cursor should not be used. */ -.tabHeaders .tabHeader.selected, -.tabHeaders .tabHeader.selected .icon, -.tabHeaders .tabHeader.selected a { - cursor: default; -} - -#app-sidebar.hidden { - display: none !important; -} - -.participantWithList .participant-moderator-indicator { - color: var(--color-text-maxcontrast); - font-weight: 300; - padding-left: 5px; -} - -.participantWithList .icon { - width: 16px; - display: inline-block; - opacity: .4; - margin-left: 5px; - margin-bottom: -4px; - - &.hidden { - display: none; - } -} - -.participantWithList .participant-offline { - & > span { - color: var(--color-text-maxcontrast); - } - .avatar { - opacity: .4; - } -} - -.participantWithList > li { - position: relative; - width: 100%; - box-sizing: border-box; -} - -.participantWithList > li > span { - 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: no-repeat 14px center; -} - -.participantWithList > li > span > .avatar-wrapper { - position: absolute; - top: 6px; - left: 6px; - - &:focus, - &:active { - border: 1px solid var(--color-border-dark); - border-radius: 50%; - - /* Separate the border slightly from the avatar to make it more - * noticeable. */ - padding: 3px; - - /* Compensate position for the border and the increased size. */ - top: 2px; - left: 2px; - } -} - -body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.guestUser) { - .avatar, - .avatar img { - cursor: pointer; - } -} - - - -/** - * 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 li { - width: 44px; - height: 44px; -} - -.participantWithList .participant-entry-utils button, -.participantWithList .participant-entry-utils button + .icon-loading-small { - height: 100%; - width: 100%; - margin: 0; - box-shadow: none; -} - -.participantWithList .participant-entry-utils-menu-button button { - border: 0; - opacity: .5; - background-color: transparent; -} - -.participantWithList .participant-entry-utils-menu-button button:hover, -.participantWithList .participant-entry-utils-menu-button button:focus { - opacity: 1; -} - -/** - * Sidebar details view - */ -.detailCallInfoContainer, -.authorRow { - .editable-text-label { - .label-wrapper { - display: flex; - align-items: center; - .edit-button .icon { - background-color: transparent; - border: none; - padding: 13px 22px; - margin: 0; - - opacity: .3; - - &:hover, - &:focus, - &:active { - opacity: 1; - } - } - } - .input-wrapper { - position: relative; - - .icon-confirm { - /* Needed to override an important rule set in the - * server. */ - background-color: transparent !important; - } - } - .label { - margin-left: 5px; - } - } - - .room-name-container { - display: flex; - - /* Prevent the room name from overlapping the button to close the - * sidebar. */ - margin-right: 29px; - - a { - opacity: .6; - - &:hover, - &:focus, - &:active { - opacity: 1; - } - - /* The container height is 42px (line height of 30px and bottom - * margin of 12px, both defined for h2 in the server), so clear the - * extra height of the link below the icon; this limits the - * clickable area to 44x44px, as otherwise it was too near the call - * button. */ - margin-bottom: 5px; - - .icon { - display: block; - - width: 44px; - height: 44px; - - background-size: 24px; - - /* Pull up the icon slightly to align it vertically with the - * label, which has a line height of 30px (defined in the - * server). */ - margin-top: -7px; - } - } - } - - .room-name { - display: block; - - flex-grow: 1; - - /* Limit the room name to the container width and prevent it from - * wrapping the full label when using a flex display; this is needed for - * the edit button and the ellipsis in the name to work as expected. */ - overflow: hidden; - - .label-wrapper { - .label { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .edit-button { - /* Use the same bottom margin as h2 (defined in the server) to - * align the button vertically with the label. */ - margin-bottom: 12px; - } - } - - .input-wrapper { - position: relative; - - .username { - width: 100%; - margin: 4px 0 4px 0 !important; - font-size: 15px; - font-weight: 300; - text-overflow: ellipsis; - } - - input[type="text"] { - padding-right: 44px; - } - - .icon-confirm, - .icon-loading-small { - top: 4px; - right: 0; - - padding: 12px 21px; - margin: 0; - } - } - } - - .guest-name p { - display: inline-block; - padding: 9px 0; - } - - .call-controls-container { - display: flex; - align-items: center; - - .call-button { - flex-grow: 0; - flex-basis: 50%; - - .join-call, - .leave-call { - width: 100%; - padding: 12px; - } - - .icon-loading-small { - /* Prevent the text from being moved when the icon is shown. */ - position: absolute; - - margin-left: 5px; - margin-top: 1px; - - /* Unset the background image set by the server for loading - * icons inside buttons, as in this case the pure CSS icon can - * be used instead of the image. */ - background-image: unset; - - &.hidden { - display: none; - } - } - } - } - - .room-moderation-button { - /* Needed for proper positioning of the menu. */ - position: relative; - - /* Position the button to the right end of its flex parent. */ - margin-left: auto; - } - - .clipboard-button button { - display: flex; - align-items: center; - - > span { - cursor: pointer; - - /* Override reduced opacity set for button icons in server, as the - * button is already dimmed. */ - opacity: 1; - } - - /* Override appearance set for button text in server, as this button has - * no background. */ - padding: 0; - - > span { - color: var(--color-main-text); - font-weight: normal; - } - } - - .clipboard-button button, - .room-moderation-button .button { - background-color: transparent; - border: none; - margin: 0; - opacity: .5; - - &:hover, - &:focus, - &:active { - opacity: 1; - } - } - - .clipboard-button .icon, - .room-moderation-button .button { - width: 44px; - height: 44px; - } - - .room-moderation-button .menu { - /* Values copied from apps.scss in server. */ - $popoveritem-height: 44px; - $popovericon-size: 16px; - $outter-margin: ($popoveritem-height - $popovericon-size) / 2; - - /* The server sets a top/bottom margin to forms and inputs of the - * first/last item in a menu, but that misaligns the left icon; this - * sets the top/bottom margin to the whole item instead of only to the - * forms or inputs. */ - li:first-of-type { - > .menuitem.password-option { - - margin-top: $outter-margin - 2px; // minus the input margin - - > form, > input { - margin-top: 0; - } - } - } - li:last-of-type { - > .menuitem.password-option { - - margin-bottom: $outter-margin - 2px; // minus the input margin - - > form, > input { - margin-bottom: 0; - } - } - } - - li { - > .separator { - - margin-top: $outter-margin - 2px; // minus the input margin - } - } - - li.item-has-details { - flex-direction: column; - - > .menuitem-details { - /* Show it closer to its menu item, but further away than the - * following menu item. */ - margin-top: -($outter-margin - 2px); // minus the input margin - margin-bottom: $outter-margin - 2px; // minus the input margin - - /* Lower size and opacity than regular menu items. */ - font-size: small; - opacity: 0.5; - - /* Padding based on the icon. */ - padding-left: $popoveritem-height; - } - } - - .menuitem.caption, - .menuitem.caption > span { - /* Override rule for menu items from server, as in this case the - * caption is not clickable. */ - cursor: default; - } - - .menuitem.caption { - font-weight: bold; - - &:hover, - &:focus, - &:active { - opacity: 0.7 !important; - } - } - - .menuitem.password-option, - .menuitem.lobby-timer-option { - /* Override rule for menu items from server, as in this case - * only the button in the password field is clickable, so the - * pointer cursor should not be used for the whole item. */ - cursor: default; - - form { - position: relative; - - .icon-confirm, - .icon-loading-small { - /* Inputs in menu items do not have a right margin, so - * it does not need to be compensated. */ - right: 0; - } - - .icon-confirm { - /* Needed to override an important rule set in the - * server. */ - background-color: transparent !important; - } - } - } - } - - /* The specific locator is needed to have higher priority than other - * important rules set in the server. */ - input.checkbox + label.checkbox-label, - input.radio + label { - /* If ".icon-loading-small" is set hide the checkbox and show a - * loading icon instead. */ - &.icon-loading-small:before { - background-image: none !important; - background-color: transparent !important; - border-color: transparent !important; - } - &.icon-loading-small:after { - top: 22px; - left: 21px; - } - } -} - -/** - * 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 #chatView { - 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: 0; - padding-right: 0; - padding-bottom: 0; -} - -#app-sidebar #chatView .newCommentRow, -#app-sidebar #chatView .comments { - padding-left: 15px; - padding-right: 15px; -} - -#app-sidebar #chatView .comments .wrapper-background, -#app-sidebar #chatView .comments .wrapper { - /* Padding is not respected in the comment wrapper due to its absolute - * positioning, so it must be set through its position. */ - left: 15px; - right: 15px; -} - -#app-sidebar #chatView .newCommentForm.with-add-button { - /* Make room to show the "Add" button if needed when chat is shown in the - * sidebar. */ - margin-right: 44px; -} - -/** - * 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; - padding-top: 8px; -} - -#app-sidebar .participantWithList .participant:last-child { - /* Add room for the popovermenu on last user */ - padding-bottom: 94px; -} - -/** - * 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: 0; - padding-bottom: 0; -} - -/* Form needs margin, participant list needs padding - * So the form has margin from the right side, but the scroll bar of the - * participant list is directly on the right. - */ -#app-sidebar #participantsTabView form { - margin-right: 15px; -} -#app-sidebar #participantsTabView .participantWithList { - padding-right: 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; -} - -/** - * Dark-Theme fixes - */ -// We always want to use the white icons, this is why we don't use var(--color-white) here. -.avatar.icon { - &.icon-public { - background-image: url(icon-color-path('public', 'actions', 'fff', 1, true)); - } - &.icon-contacts { - background-image: url(icon-color-path('contacts', 'places', 'fff', 1, true)); - } - &.icon-password { - background-image: url(icon-color-path('password', 'actions', 'fff', 1, true)); - } - &.icon-file { - background-image: url(icon-color-path('text', 'filetypes', 'fff', 1, true)); - } - &.icon-mail { - background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true)); - } -} - -#app-navigation > ul > li > a:first-child { - img { - filter: none !important; - } -} -- cgit v1.2.3