spreed/css/style.scss

1091 строка
22 KiB
SCSS
Исходник Обычный вид История

#body-public {
height: 100%;
}
.app-spreed #app-content,
#body-public #app-content {
overflow: hidden;
}
2016-09-22 00:54:06 +03:00
.app-spreed #app-navigation {
padding-top: 46px;
padding-bottom: 0;
}
#oca-spreedme-add-room {
2016-09-22 00:54:06 +03:00
position: absolute;
width: 249px;
top: 0;
border-bottom: 1px solid #eee;
}
.oca-spreedme-add-person {
width: 100%;
border: 1px solid #eee;
}
/**
* Sidebar styles
*/
#select2-drop {
margin-top: -44px !important;
}
#oca-spreedme-add-room .select2-container,
.oca-spreedme-add-person .select2-container {
2016-09-21 19:50:37 +03:00
width: 100%;
margin: 0 !important;
2016-09-21 19:50:37 +03:00
border: none;
padding: 9px;
}
#oca-spreedme-add-room .select2-container .select2-choice,
.oca-spreedme-add-person .select2-container .select2-choice {
border: none;
}
#oca-spreedme-add-room .select2-arrow,
.oca-spreedme-add-person .select2-arrow {
display: none !important;
}
#select2-drop .select2-search input {
padding: 13px 12px 13px 43px !important;
width: 100%;
box-sizing: border-box;
margin: 0;
border: none;
background-image: none !important;
}
#select2-drop .select2-results .select2-result {
padding: 0;
}
.app-navigation-entry-menu li {
display: block !important;
}
.participantWithList .avatar,
#app-navigation .avatar,
#app-navigation .icon-contacts-dark,
#app-navigation .app-navigation-entry-link .icon-public {
position: absolute;
left: 6px;
top: 6px;
}
.participantWithList li > a:first-child img,
#app-navigation li > a:first-child img {
width: 32px !important;
height: 32px !important;
margin: 0 !important;
}
#app-navigation .icon-contacts-dark,
#app-navigation .app-navigation-entry-link .icon-public,
.icon-add {
background-color: transparent !important;
2016-11-14 17:16:42 +03:00
color: transparent !important;
border-radius: 0;
width: 32px;
height: 32px;
}
.public-room {
display: block !important;
}
.private-room,
.hidden-important {
display: none !important;
}
.icon-clippy.public-room {
background-size: 16px;
position: absolute;
right: 0;
bottom: 0;
padding: 16px;
}
.icon-delete.public-room {
background-size: 16px;
position: absolute;
right: 0;
top: 4px;
padding: 16px;
opacity: .5;
}
.password-input,
.editable-text-label input {
margin-top: 0 !important;
margin-bottom: 4px !important;
}
.icon-confirm.password-confirm,
.icon-confirm.confirm-button {
background-size: 16px;
background-color: transparent;
border: none;
position: absolute;
right: 0;
bottom: 3px;
padding: 16px;
opacity: .5;
}
.icon-confirm.password-confirm:hover,
.icon-confirm.confirm-button:hover {
opacity: 1;
}
.icon-clippy.public-room {
background-position-y: 8px !important;
}
/**
* Main view chat styles
*/
#app-content-wrapper {
height: 100%;
}
#app-content-wrapper #commentsTabView {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#app-content-wrapper #commentsTabView .comment:first-child {
padding-top: 15px;
}
/* The lateral padding is set for each child instead of for the chat view as a
whole to prevent showing the scroll bar padded from the border of the chat
view (which could be fixed by using a negative margin and a positive padding
in the list of messages) and to ensure that the contacts menu is not clipped
due to overflowing the chat view on its left (much harder to fix). */
#app-content-wrapper #commentsTabView .newCommentRow {
padding-left: 15px;
padding-right: 15px;
}
#app-content-wrapper #commentsTabView .comments {
overflow-y: auto;
/* Needed for proper calculation of comment positions in the scrolling
container (as otherwise the comment position is calculated with respect
to the closest ancestor with a relative position) */
position: relative;
padding-left: 15px;
padding-right: 15px;
}
/* Hide all siblings of the chat view when shown as the main view */
#app-content-wrapper #commentsTabView ~ * {
display: none !important;
}
/**
* Video styles
*/
#videos {
position: absolute;
width: 100%;
height: 100%;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.videoContainer,
#app-content.screensharing .videoContainer {
position: relative;
2016-09-05 00:54:11 +03:00
width: 100%;
padding: 0 2%;
-webkit-box-flex: auto;
-moz-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
z-index: 2;
display: flex;
justify-content: center;
align-items: flex-end;
}
#app-content.screensharing .videoContainer {
max-height: 200px;
}
video {
z-index: 0;
max-height: 100%;
/* default filter for slightly better look */
-webkit-filter: contrast(1.1) saturate(1.1) sepia(.1);
filter: contrast(1.1) saturate(1.1) sepia(.1);
vertical-align: top; /* fix white line below video */
2016-09-20 18:43:23 +03:00
}
#app-content.screensharing .videoContainer video {
max-height: 200px;
background-color: transparent;
box-shadow: 0;
}
#screens video {
-webkit-filter: none;
filter: none;
}
#videos .videoContainer:not(.promoted) video {
max-height: 200px;
max-width: 100%;
background-color: transparent;
border-radius: $border-radius $border-radius 0 0;
box-shadow: 0 0 15px $color-box-shadow;
}
#videos .videoContainer .avatar {
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
}
.participants-1 #videos .videoContainer video,
.participants-2 #videos .videoContainer video {
padding: 0;
}
.videoContainer .avatar-container {
position: absolute;
text-align: center;
bottom: 44px;
left: 0;
width: 100%;
}
.videoContainer .avatar-container .avatar {
display: inline-block;
}
.videoContainer.promoted .avatar-container {
top: 30%;
}
.videoContainer.promoted .avatar-container + .nameIndicator {
display: none;
}
.videoContainer.promoted .mediaIndicator {
display: none !important;
}
#emptycontent {
position: absolute;
z-index: 40;
}
#emptycontent-icon {
width: 128px;
margin: 0 auto;
padding-bottom: 20px;
}
#shareRoomContainer {
position: relative;
}
#shareRoomInput {
width: 250px;
padding-right: 32px;
text-overflow: ellipsis;
}
#shareRoomClipboardButton {
position: absolute;
right: 0;
padding: 18px;
background-size: 16px !important;
height: 16px !important;
width: 16px !important;
margin: 0 !important;
opacity: .8 !important;
}
.participants-1 #emptycontent {
display: block !important;
}
.participants-1 #video-fullscreen {
display: none;
}
.participants-1 #screensharing-button {
display: none;
}
#screensharing-menu {
bottom: 44px;
left: calc(50% - 40px);
right: initial;
color: initial;
text-shadow: initial;
font-size: 13px;
}
#screensharing-menu.app-navigation-entry-menu:after {
top: 100%;
left: calc(50% - 5px);
border-top-color: #fff;
border-bottom-color: transparent;
}
/* big speaker video */
.participants-1 .videoContainer,
.participants-2 .videoContainer,
.videoContainer.promoted {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
z-index: 1;
}
.videoContainer.promoted video,
.participants-2 .videoContainer:not(.videoView) video {
position: absolute;
width: initial;
height: 100%;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
/* own video */
.participants-1 .videoView,
.participants-2 .videoView {
position: absolute;
width: 33%;
min-width: 200px;
right: 0;
bottom: 0;
top: initial;
left: initial;
z-index: 10;
}
@media only screen and (max-width: 768px) {
.participants-1 .videoView,
.participants-2 .videoView {
max-height: 35%;
}
}
.participants-1 .videoView video,
.participants-2 .videoView video {
position: absolute;
max-height: 100% !important;
bottom: 0;
border-top-right-radius: 3px;
}
.videoContainer.promoted,
#app-content.incall,
#app-content.screensharing {
background-color: #000;
}
/* Use dark icons when not in a call (= white background) */
#app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow {
/* Still use white icons outside of calls when local video shows */
&#hideVideo.video-disabled,
&#mute.video-disabled {
filter: none;
}
&.icon-menu-people,
&.icon-fullscreen {
filter: none;
opacity: .5;
&:hover,
&:focus {
opacity: 1;
}
}
}
#app-content.screensharing #screens {
position: absolute;
width: 100%;
height: calc(100% - 200px);
top: 0;
overflow-y: scroll;
background-color: transparent;
}
#app-content.screensharing .screenContainer {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
2016-09-05 00:54:11 +03:00
.nameIndicator {
2016-09-20 18:43:23 +03:00
position: absolute;
bottom: 0;
left: 0;
padding: 12px;
2016-09-20 18:43:23 +03:00
color: #fff;
text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5);
width: 100%;
2016-09-05 00:54:11 +03:00
text-align: center;
2016-09-22 01:13:05 +03:00
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2016-09-05 00:54:11 +03:00
}
.videoView .nameIndicator {
padding: 0;
overflow: visible;
}
.participants-1 .videoView .nameIndicator,
.participants-2 .videoView .nameIndicator {
left: initial;
}
.participants-1 .videoView .avatar-container,
.participants-2 .videoView .avatar-container {
left: initial;
}
/* ellipsize name in 1on1 calls */
.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
padding: 12px 35%;
}
2016-09-20 18:43:23 +03:00
#video-fullscreen {
position: absolute;
top: 44px;
right: 0;
z-index: 90;
}
#video-fullscreen.public {
top: 89px;
}
#video-fullscreen,
.nameIndicator button,
#app-sidebar-trigger {
2016-09-20 18:43:23 +03:00
background-color: transparent;
border: none;
margin: 0;
2016-09-20 18:43:23 +03:00
width: 44px;
height: 44px;
background-size: 24px;
2016-09-20 18:43:23 +03:00
}
2016-09-20 18:43:23 +03:00
.nameIndicator button.audio-disabled,
.nameIndicator button.video-disabled,
.nameIndicator button.screensharing-disabled {
opacity: .7;
2016-09-05 00:54:11 +03:00
}
2016-09-21 21:02:18 +03:00
.nameIndicator button.no-video-available {
opacity: .7;
cursor: not-allowed;
}
.nameIndicator button.no-video-available:active {
background-color: transparent;
}
.mediaIndicator {
position: absolute;
width: 100%;
bottom: 44px;
left: 0;
background-size: 22px;
text-align: center;
}
.muteIndicator,
.screensharingIndicator,
.iceFailedIndicator {
position: relative;
display: inline-block;
background-color: transparent !important;
border: none;
width: 32px;
height: 32px;
background-size: 22px;
}
.muteIndicator.audio-on,
.screensharingIndicator.screen-off,
.iceFailedIndicator.not-failed {
display: none;
}
.muteIndicator.audio-off {
opacity: .7;
}
.iceFailedIndicator {
opacity: .8 !important;
}
/* Fullscreen handling */
/**
* Different browsers handle fullscreen elements with a margin in different
* ways: Firefox ignores the margin and uses the full width, while Chromium uses
* a strange mix which is neither the full width nor the full margin. Due to
* this the margin is removed to unify the appearance across browsers; visually,
* this causes the sidebar to slide on the content instead of "pushing" it to
* the left.
*/
#app-content:-webkit-full-screen {
2016-09-21 21:02:18 +03:00
width: 100%;
margin-right: 0;
&.participants-1 {
background: #fff;
}
2016-09-21 21:02:18 +03:00
}
#app-content:-moz-full-screen {
width: 100%;
margin-right: 0;
&.participants-1 {
background: #fff;
}
2016-09-21 21:02:18 +03:00
}
#app-content:-ms-fullscreen {
width: 100%;
margin-right: 0;
&.participants-1 {
background: #fff;
}
2016-09-21 21:02:18 +03:00
}
#app-content:fullscreen {
width: 100%;
margin-right: 0;
&.participants-1 {
background: #fff;
}
2016-09-21 21:02:18 +03:00
}
/* No switching between rooms in fullscreen, focus on the current call. */
#app-content:-webkit-full-screen #app-navigation-toggle {
display: none !important;
}
#app-content:-moz-full-screen #app-navigation-toggle {
display: none !important;
}
#app-content:-ms-fullscreen #app-navigation-toggle {
display: none !important;
}
#app-content:fullscreen #app-navigation-toggle {
display: none !important;
}
/**
* In fullscreen mode there is no header, so the sidebar has to be moved to the
* top.
*/
#app-content:-webkit-full-screen #app-sidebar {
top: 0;
}
#app-content:-moz-full-screen #app-sidebar {
top: 0;
}
#app-content:-ms-fullscreen #app-sidebar {
top: 0;
}
#app-content:fullscreen #app-sidebar {
top: 0;
}
/* In the public page the header is inside the app-content, so it has to be
hidden explicitly. */
#app-content:-webkit-full-screen #header {
display: none !important;
}
#app-content:-moz-full-screen #header {
display: none !important;
}
#app-content:-ms-fullscreen #header {
display: none !important;
}
#app-content:fullscreen #header {
display: none !important;
}
/* As there is no header in fullscreen the buttons can be moved to the top. */
#app-content:-webkit-full-screen #app-sidebar-trigger {
top: 0;
}
#app-content:-moz-full-screen #app-sidebar-trigger {
top: 0;
}
#app-content:-ms-fullscreen #app-sidebar-trigger {
top: 0;
}
#app-content:fullscreen #app-sidebar-trigger {
top: 0;
}
#app-content:-webkit-full-screen #video-fullscreen {
top: 44px;
}
#app-content:-moz-full-screen #video-fullscreen {
top: 44px;
}
#app-content:-ms-fullscreen #video-fullscreen {
top: 44px;
}
#app-content:fullscreen #video-fullscreen {
top: 44px;
}
.localmediaerror h2 {
color: red;
font-weight: bold;
}
.localmediaerror .uploadmessage {
display: none;
}
.participantWithList li > a,
#app-navigation li > a {
padding-right: 44px !important;
}
#app-navigation .utils {
padding: 0;
}
#app-navigation .utils .action {
display: inline-block;
padding: 22px;
cursor: pointer;
opacity: .3;
}
2016-10-18 15:33:10 +03:00
.bubble,
#app-navigation .app-navigation-entry-menu {
right: 4px;
}
2016-10-18 15:33:10 +03:00
#app-navigation .app-navigation-entry-menu li {
width: auto !important;
float: inherit;
}
#app-navigation .app-navigation-entry-menu li button {
float: inherit !important;
margin: 0;
padding: 0;
width: 100% !important;
min-height: 44px;
2016-10-18 15:33:10 +03:00
}
#app-navigation .app-navigation-entry-menu input {
margin-left: 5px !important;
margin-top: -5px;
min-width: 150px;
padding-right: 26px;
text-overflow: ellipsis;
overflow: hidden;
}
#app-navigation .app-navigation-entry-menu input.first-option {
margin-top: 5px;
}
2016-10-18 15:33:10 +03:00
#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;
2016-10-18 15:33:10 +03:00
box-sizing: border-box;
}
#app-navigation .app-navigation-entry-utils-menu-button {
display: inline-block;
}
Add Marionette view for the right sidebar The right sidebar is an area that can be shown or hidden from the right border of the document. It is a core element from Nextcloud, and SidebarView is a Marionette wrapper around it. Therefore, it has to be used along an "#app-content" element that takes into account the "with-app-sidebar" CSS class. However, this right sidebar extends the standard right sidebar with an icon shown on the right border of the screen that makes possible for the user to show it when hidden (as there is no other element in the UI suitable for that purpose). That icon is just a right-pointing triangle created with a CSS trick (a zero-sized div with width borders, but all of them transparent except for the left one). However, as the icon will be shown on different coloured backgrounds it can not have just a single colour; it must provide a border on its own too, which is achieved with another triangle slightly larger underneath. The triangle border is 2px instead of just 1px used in other UI elements (like in the sidebar itself) to make it more noticeable on a white background. The triangle used for the icon is a large one, with a width of 24px and a height of 48px. Using this trick has an added benefit, as its clickable area is larger than the triangle itself (48x48px), which improves its usability on touchable screens (and does not negatively affect the experience on other devices). Currently the SidebarView is empty. The content will be added in following commits. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2017-10-12 14:55:15 +03:00
#app-sidebar-trigger {
position: fixed;
top: 45px;
Add Marionette view for the right sidebar The right sidebar is an area that can be shown or hidden from the right border of the document. It is a core element from Nextcloud, and SidebarView is a Marionette wrapper around it. Therefore, it has to be used along an "#app-content" element that takes into account the "with-app-sidebar" CSS class. However, this right sidebar extends the standard right sidebar with an icon shown on the right border of the screen that makes possible for the user to show it when hidden (as there is no other element in the UI suitable for that purpose). That icon is just a right-pointing triangle created with a CSS trick (a zero-sized div with width borders, but all of them transparent except for the left one). However, as the icon will be shown on different coloured backgrounds it can not have just a single colour; it must provide a border on its own too, which is achieved with another triangle slightly larger underneath. The triangle border is 2px instead of just 1px used in other UI elements (like in the sidebar itself) to make it more noticeable on a white background. The triangle used for the icon is a large one, with a width of 24px and a height of 48px. Using this trick has an added benefit, as its clickable area is larger than the triangle itself (48x48px), which improves its usability on touchable screens (and does not negatively affect the experience on other devices). Currently the SidebarView is empty. The content will be added in following commits. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2017-10-12 14:55:15 +03:00
right: 0;
/* Higher than the z-index of the emptycontent */
z-index: 50;
cursor: pointer;
}
.icon-menu-people {
background-image: url('../img/menu-people.svg?v=1');
Add Marionette view for the right sidebar The right sidebar is an area that can be shown or hidden from the right border of the document. It is a core element from Nextcloud, and SidebarView is a Marionette wrapper around it. Therefore, it has to be used along an "#app-content" element that takes into account the "with-app-sidebar" CSS class. However, this right sidebar extends the standard right sidebar with an icon shown on the right border of the screen that makes possible for the user to show it when hidden (as there is no other element in the UI suitable for that purpose). That icon is just a right-pointing triangle created with a CSS trick (a zero-sized div with width borders, but all of them transparent except for the left one). However, as the icon will be shown on different coloured backgrounds it can not have just a single colour; it must provide a border on its own too, which is achieved with another triangle slightly larger underneath. The triangle border is 2px instead of just 1px used in other UI elements (like in the sidebar itself) to make it more noticeable on a white background. The triangle used for the icon is a large one, with a width of 24px and a height of 48px. Using this trick has an added benefit, as its clickable area is larger than the triangle itself (48x48px), which improves its usability on touchable screens (and does not negatively affect the experience on other devices). Currently the SidebarView is empty. The content will be added in following commits. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2017-10-12 14:55:15 +03:00
}
#app-sidebar .close {
position: absolute;
top: 0;
right: 0;
/* The app uses border-box sizing, so the padding is 15px like in the Files
* app plus 8px of half the size of the icon */
padding: 23px;
opacity: 0.5;
/* Higher index than the trigger to hide it when the sidebar is open */
z-index: 20;
}
#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
animation: pulse 1s;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: .3;
}
100% {
opacity: 1;
}
}
/* The header element contains the header div; as the header div uses a fixed
position the header element has no height, and as #app-content-wrapper uses a
"100%" height its contents must be padded to prevent them from overlapping
with the header element */
#body-public #app-content-wrapper {
padding-top: 45px;
}
/* make blue header bar transparent in shared room */
#body-public #app-content:not(.participants-1) #header.spreed-public {
background: transparent;
}
/* As the header is hidden (except for the logo), move the fullscreen button and
* sidebar to the top during calls */
#body-public #app-content:not(.participants-1) #app-sidebar,
#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
#body-public #app-content:not(.participants-1) #video-fullscreen {
top: 0;
z-index: 3000;
}
#body-public #app-content:not(.participants-1) #video-fullscreen {
top: 44px;
}
/**
* Right sidebar
*/
#app-sidebar .detailCallInfoContainer {
padding: 15px;
clear: both;
}
.tabHeaders,
#app-sidebar .icon {
display: inline-block;
}
/* START: move padding fixes and icons-for-tabs capability into core */
.tabHeaders {
display: flex;
margin-top: 0;
margin-bottom: 10px;
min-height: 44px;
}
.tabHeaders .tabHeader {
flex-basis: 50%;
flex-grow: 0;
padding: 12px;
text-align: center;
border-bottom: 1px solid $color-border;
margin-bottom: 0;
a {
padding-left: 32px;
background-position: 12px;
background-repeat: no-repeat;
color: $color-main-text;
opacity: .5;
}
}
.tabHeaders .tabHeader.selected a,
.tabHeaders .tabHeader:hover a,
.tabHeaders .tabHeader:focus a {
opacity: 1;
}
/* END: move padding fixes and icons-for-tabs capability into core */
#app-sidebar.hidden {
display: none !important;
}
.participantWithList .participant-moderator-indicator {
opacity: .5;
font-weight: 300;
padding-left: 5px;
}
.participantWithList .participant-offline > a {
opacity: .5;
}
.participantWithList li {
position: relative;
width: 100%;
box-sizing: border-box;
}
.participantWithList li > a {
display: block;
width: 100%;
line-height: 44px;
min-height: 44px;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 44px;
background-size: 16px 16px;
background-position: 14px center;
background-repeat: no-repeat;
}
/**
* App navigation utils, buttons and counters for drop down menu
*/
.participantWithList .participant-entry-utils {
position: absolute;
top: 0;
right: 0;
z-index: 105;
}
.participantWithList .active > .participant-entry-utils li {
display: inline-block;
}
.participantWithList .participant-entry-utils button {
height: 100%;
width: 100%;
margin: 0;
box-shadow: none;
}
.participantWithList .participant-entry-utils-menu-button button {
border: 0;
opacity: .5;
}
/**
* Sidebar details view
*/
.detailCallInfoContainer .room-name {
display: inline-block;
}
.detailCallInfoContainer h3,
.detailCallInfoContainer .guest-name p {
display: inline-block;
}
.detailCallInfoContainer .guest-name p {
padding: 9px 0;
}
.detailCallInfoContainer .editable-text-label .edit-button {
display: none;
}
.detailCallInfoContainer .clipboard-button,
.detailCallInfoContainer .editable-text-label:hover .edit-button {
display: inline-block;
}
.detailCallInfoContainer .clipboard-button .icon,
.detailCallInfoContainer .editable-text-label .edit-button .icon {
cursor: pointer;
padding: 22px;
vertical-align: middle;
margin-left: -5px;
margin-top: -5px;
}
.detailCallInfoContainer .editable-text-label .input-wrapper,
.detailCallInfoContainer .password-option {
position: relative;
display: inline-block;
}
.detailCallInfoContainer .editable-text-label input,
.detailCallInfoContainer .password-input {
width: 100%;
}
.detailCallInfoContainer #link-checkbox+label {
display: inline-block;
padding: 12px 0;
}
/**
* Cascade parent element height to the chat view in the sidebar to limit the
* vertical scroll bar only to the list of messages. Otherwise, the vertical
* scroll bar would be shown for the whole sidebar and everything would be
* moved when scrolling to see overflown messages.
*
* The list of messages should stretch to fill the available space at the bottom
* of the right sidebar, so the height is cascaded using flex boxes.
*
* It is horrible, I know (but better than using JavaScript ;-) ). Please
* improve it if you know how :-)
*/
#app-sidebar {
display: flex;
flex-direction: column;
}
#app-sidebar .tabs {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
}
#app-sidebar .tabsContainer {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
}
#app-sidebar .tab {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
}
#app-sidebar #commentsTabView {
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
}
#app-sidebar .comments {
overflow-y: auto;
/* Needed for proper calculation of comment positions in the scrolling
container (as otherwise the comment position is calculated with respect
to the closest ancestor with a relative position) */
position: relative;
}
/**
* Place the scroll bar of the message list on the right edge of the sidebar,
* but keeping the padding of the tab view.
*
* The padding must be set on the left too to ensure that the contacts menu
* shown when clicking on an author name does not overflow the tab (as it would
* be hidden).
*
* The bottom padding is removed to extend the chat view to the bottom edge of
* the sidebar.
*/
#app-sidebar .tab-chat {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#app-sidebar #commentsTabView .newCommentRow,
#app-sidebar #commentsTabView .comments {
padding-left: 15px;
padding-right: 15px;
}
/**
* Limiting the scroll bar in the sidebar to the list of chat messages causes
* the scroll bar to be removed from the whole sidebar in other tabs too.
* Therefore, the scroll bars must be explicitly enabled in the other tab
* contents that need them.
*/
#app-sidebar #participantsTabView {
display: flex;
flex-direction: column;
overflow: hidden;
}
#app-sidebar .participantWithList {
overflow-y: auto;
}
/**
* Place the scroll bar of the participants list on the right edge of the
* sidebar, but keeping the padding of the tab view.
*
* The bottom padding is removed to extend the participant view to the bottom
* edge of the sidebar.
*/
#app-sidebar .tab-participants {
padding-right: 0px;
padding-bottom: 0px;
}
#app-sidebar #participantsTabView form,
#app-sidebar #participantsTabView .participantWithList {
padding-right: 15px;
}
/**
* Add a little margin so the participants do not "touch" the form when they are
* scrolled, in the same way that the chat messages do not disappear directly
* below the new message input.
*/
#app-sidebar #participantsTabView form {
margin-bottom: 15px;
}
/**
* Add a little margin to the last participant so the list is nicely framed with
* the sides when fully scrolled to the bottom.
*/
#app-sidebar #participantsTabView .participant:last-child {
margin-bottom: 15px;
}