diff options
Diffstat (limited to 'css/style.scss')
| -rw-r--r-- | css/style.scss | 1312 |
1 files changed, 0 insertions, 1312 deletions
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; - } -} |