spreed/css/style.scss

1313 строки
30 KiB
SCSS

/* 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;
}
}