зеркало из https://github.com/nextcloud/spreed.git
1313 строки
30 KiB
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;
|
|
}
|
|
}
|