2016-11-22 19:03:43 +03:00
|
|
|
#body-public {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2017-03-15 14:11:04 +03:00
|
|
|
.app-spreed #app-content,
|
|
|
|
#body-public #app-content {
|
2018-02-07 20:07:54 +03:00
|
|
|
overflow: hidden;
|
2016-11-17 02:18:07 +03:00
|
|
|
}
|
|
|
|
|
2016-09-22 00:54:06 +03:00
|
|
|
.app-spreed #app-navigation {
|
2018-03-27 16:27:39 +03:00
|
|
|
padding-top: 45px;
|
2016-09-22 00:54:06 +03:00
|
|
|
padding-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2016-09-20 19:47:41 +03:00
|
|
|
#oca-spreedme-add-room {
|
2016-09-22 00:54:06 +03:00
|
|
|
position: absolute;
|
|
|
|
width: 249px;
|
|
|
|
top: 0;
|
|
|
|
border-bottom: 1px solid #eee;
|
2016-09-20 19:47:41 +03:00
|
|
|
}
|
2016-10-19 13:00:17 +03:00
|
|
|
|
2016-11-17 00:10:33 +03:00
|
|
|
.oca-spreedme-add-person {
|
2017-10-23 13:04:28 +03:00
|
|
|
width: 100%;
|
|
|
|
border: 1px solid #eee;
|
2016-11-17 00:10:33 +03:00
|
|
|
}
|
|
|
|
|
2018-04-24 18:37:51 +03:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2016-10-19 13:00:17 +03:00
|
|
|
/**
|
|
|
|
* Sidebar styles
|
|
|
|
*/
|
2016-10-18 19:47:06 +03:00
|
|
|
|
|
|
|
#select2-drop {
|
2016-11-17 18:41:31 +03:00
|
|
|
margin-top: -44px !important;
|
2016-11-17 00:10:33 +03:00
|
|
|
}
|
|
|
|
#oca-spreedme-add-room .select2-container,
|
|
|
|
.oca-spreedme-add-person .select2-container {
|
2016-09-21 19:50:37 +03:00
|
|
|
width: 100%;
|
2016-11-17 18:11:48 +03:00
|
|
|
margin: 0 !important;
|
2016-09-21 19:50:37 +03:00
|
|
|
border: none;
|
2016-10-18 19:47:06 +03:00
|
|
|
padding: 9px;
|
2016-09-20 19:47:41 +03:00
|
|
|
}
|
2016-11-23 21:25:40 +03:00
|
|
|
#oca-spreedme-add-room .select2-container .select2-choice,
|
|
|
|
.oca-spreedme-add-person .select2-container .select2-choice {
|
2018-02-07 20:07:54 +03:00
|
|
|
border: none;
|
2016-11-23 21:25:40 +03:00
|
|
|
}
|
2016-11-17 00:10:33 +03:00
|
|
|
#oca-spreedme-add-room .select2-arrow,
|
|
|
|
.oca-spreedme-add-person .select2-arrow {
|
|
|
|
display: none !important;
|
2016-10-19 13:00:17 +03:00
|
|
|
}
|
2016-11-23 21:25:40 +03:00
|
|
|
#select2-drop .select2-search input {
|
|
|
|
padding: 13px 12px 13px 43px !important;
|
2016-11-17 18:11:48 +03:00
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
margin: 0;
|
2016-11-23 21:25:40 +03:00
|
|
|
border: none;
|
2016-11-17 18:11:48 +03:00
|
|
|
background-image: none !important;
|
|
|
|
}
|
2016-11-23 21:25:40 +03:00
|
|
|
#select2-drop .select2-results .select2-result {
|
|
|
|
padding: 0;
|
|
|
|
}
|
2016-10-18 19:47:06 +03:00
|
|
|
|
2017-02-01 16:08:39 +03:00
|
|
|
.app-navigation-entry-menu li {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .avatar,
|
2016-11-14 16:51:03 +03:00
|
|
|
#app-navigation .avatar,
|
2016-11-18 17:16:15 +03:00
|
|
|
#app-navigation .icon-contacts-dark,
|
|
|
|
#app-navigation .app-navigation-entry-link .icon-public {
|
2016-10-18 19:47:06 +03:00
|
|
|
position: absolute;
|
2016-11-17 18:11:48 +03:00
|
|
|
left: 6px;
|
|
|
|
top: 6px;
|
2016-10-19 13:00:17 +03:00
|
|
|
}
|
2017-03-13 13:37:13 +03:00
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList li > a:first-child img,
|
2017-03-13 13:37:13 +03:00
|
|
|
#app-navigation li > a:first-child img {
|
|
|
|
width: 32px !important;
|
|
|
|
height: 32px !important;
|
|
|
|
margin: 0 !important;
|
|
|
|
}
|
|
|
|
|
2016-11-23 17:23:26 +03:00
|
|
|
#app-navigation .icon-contacts-dark,
|
2016-11-18 17:16:15 +03:00
|
|
|
#app-navigation .app-navigation-entry-link .icon-public,
|
|
|
|
.icon-add {
|
2016-11-14 17:07:02 +03:00
|
|
|
background-color: transparent !important;
|
2016-11-14 17:16:42 +03:00
|
|
|
color: transparent !important;
|
2016-11-14 16:51:03 +03:00
|
|
|
border-radius: 0;
|
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
|
|
|
}
|
2016-10-19 13:00:17 +03:00
|
|
|
|
2018-05-03 12:18:22 +03:00
|
|
|
#app-navigation .app-navigation-entry-utils-counter {
|
|
|
|
overflow: hidden;
|
|
|
|
text-align: right;
|
|
|
|
font-size: 9pt;
|
|
|
|
line-height: 44px;
|
|
|
|
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
|
|
|
|
|
|
|
|
&.highlighted {
|
|
|
|
padding-right: 0;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
span {
|
|
|
|
padding: 2px 5px;
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: $color-primary;
|
|
|
|
color: $color-primary-text;
|
|
|
|
}
|
|
|
|
}
|
2018-04-26 16:33:00 +03:00
|
|
|
}
|
|
|
|
|
2016-11-18 17:16:15 +03:00
|
|
|
.public-room {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
|
2017-01-13 16:26:02 +03:00
|
|
|
.private-room,
|
|
|
|
.hidden-important {
|
2016-11-18 17:16:15 +03:00
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-clippy.public-room {
|
2018-02-07 20:07:54 +03:00
|
|
|
background-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
padding: 16px;
|
2016-11-18 17:16:15 +03:00
|
|
|
}
|
|
|
|
|
2016-11-24 14:18:20 +03:00
|
|
|
.icon-delete.public-room {
|
2018-02-07 20:07:54 +03:00
|
|
|
background-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 4px;
|
|
|
|
padding: 16px;
|
2016-11-25 19:14:41 +03:00
|
|
|
opacity: .5;
|
2016-11-24 14:18:20 +03:00
|
|
|
}
|
|
|
|
|
2017-02-13 17:52:33 +03:00
|
|
|
.icon-clippy.public-room {
|
2018-02-07 20:07:54 +03:00
|
|
|
background-position-y: 8px !important;
|
2017-02-13 17:52:33 +03:00
|
|
|
}
|
|
|
|
|
2017-11-28 18:56:23 +03:00
|
|
|
/**
|
|
|
|
* Main view chat styles
|
|
|
|
*/
|
|
|
|
#app-content-wrapper {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#app-content-wrapper #commentsTabView {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2018-01-09 16:51:44 +03:00
|
|
|
}
|
2017-11-28 20:58:16 +03:00
|
|
|
|
2018-01-09 16:51:44 +03:00
|
|
|
#app-content-wrapper #commentsTabView .comment:first-child {
|
2017-11-28 20:58:16 +03:00
|
|
|
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 {
|
2018-04-04 17:35:39 +03:00
|
|
|
padding-left: 44px;
|
|
|
|
padding-right: 44px;
|
2017-11-28 18:56:23 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-content-wrapper #commentsTabView .comments {
|
|
|
|
overflow-y: auto;
|
2017-11-28 20:58:16 +03:00
|
|
|
|
2018-01-09 16:52:41 +03:00
|
|
|
/* 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;
|
|
|
|
|
2018-04-04 17:35:39 +03:00
|
|
|
padding-left: 44px;
|
|
|
|
padding-right: 44px;
|
2017-11-28 18:56:23 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Hide all siblings of the chat view when shown as the main view */
|
2018-03-28 15:20:30 +03:00
|
|
|
#app-content-wrapper #commentsTabView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
|
2017-11-28 18:56:23 +03:00
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
2017-02-24 20:55:05 +03:00
|
|
|
/**
|
|
|
|
* Video styles
|
|
|
|
*/
|
2016-11-17 03:48:55 +03:00
|
|
|
|
|
|
|
#videos {
|
2016-11-17 04:17:32 +03:00
|
|
|
position: absolute;
|
2016-11-17 04:27:48 +03:00
|
|
|
width: 100%;
|
2016-11-17 05:57:10 +03:00
|
|
|
height: 100%;
|
|
|
|
top: 0;
|
2016-11-17 03:48:55 +03:00
|
|
|
display: -webkit-box;
|
|
|
|
display: -moz-box;
|
|
|
|
display: -ms-flexbox;
|
|
|
|
display: -webkit-flex;
|
|
|
|
display: flex;
|
|
|
|
-webkit-justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
2016-11-17 05:57:10 +03:00
|
|
|
-webkit-align-items: flex-end;
|
|
|
|
align-items: flex-end;
|
2016-11-17 03:48:55 +03:00
|
|
|
}
|
|
|
|
|
2018-01-25 20:18:01 +03:00
|
|
|
.videoContainer,
|
|
|
|
#app-content.screensharing .videoContainer {
|
2016-11-17 04:17:32 +03:00
|
|
|
position: relative;
|
2016-09-05 00:54:11 +03:00
|
|
|
width: 100%;
|
2018-02-07 20:07:54 +03:00
|
|
|
padding: 0 2%;
|
2016-11-17 03:48:55 +03:00
|
|
|
-webkit-box-flex: auto;
|
|
|
|
-moz-box-flex: auto;
|
|
|
|
-webkit-flex: auto;
|
|
|
|
-ms-flex: auto;
|
|
|
|
flex: auto;
|
2016-11-17 06:07:14 +03:00
|
|
|
z-index: 2;
|
2018-02-07 19:50:32 +03:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: flex-end;
|
2016-11-17 03:48:55 +03:00
|
|
|
}
|
|
|
|
|
2018-03-16 13:22:14 +03:00
|
|
|
.videoContainer.hidden,
|
|
|
|
#app-content.screensharing .videoContainer.hidden {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2018-01-25 20:18:01 +03:00
|
|
|
#app-content.screensharing .videoContainer {
|
|
|
|
max-height: 200px;
|
|
|
|
}
|
|
|
|
|
2016-11-17 03:48:55 +03:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2018-01-25 20:18:01 +03:00
|
|
|
#app-content.screensharing .videoContainer video {
|
|
|
|
max-height: 200px;
|
|
|
|
background-color: transparent;
|
|
|
|
box-shadow: 0;
|
|
|
|
}
|
|
|
|
|
2017-08-28 17:14:17 +03:00
|
|
|
#screens video {
|
2018-03-12 19:50:42 +03:00
|
|
|
width: 100%;
|
2017-08-28 17:14:17 +03:00
|
|
|
-webkit-filter: none;
|
|
|
|
filter: none;
|
|
|
|
}
|
|
|
|
|
2018-01-29 20:36:04 +03:00
|
|
|
#videos .videoContainer:not(.promoted) video {
|
2018-02-07 20:07:54 +03:00
|
|
|
max-height: 200px;
|
|
|
|
max-width: 100%;
|
2018-01-29 20:36:04 +03:00
|
|
|
background-color: transparent;
|
2018-02-07 20:07:54 +03:00
|
|
|
border-radius: $border-radius $border-radius 0 0;
|
|
|
|
box-shadow: 0 0 15px $color-box-shadow;
|
2016-11-18 01:01:18 +03:00
|
|
|
}
|
2018-01-29 20:36:04 +03:00
|
|
|
|
2016-11-18 03:13:20 +03:00
|
|
|
#videos .videoContainer .avatar {
|
2018-02-07 20:13:28 +03:00
|
|
|
box-shadow: 0 0 15px $color-box-shadow;
|
2016-11-18 03:13:20 +03:00
|
|
|
}
|
2016-11-18 01:01:18 +03:00
|
|
|
|
|
|
|
.participants-1 #videos .videoContainer video,
|
|
|
|
.participants-2 #videos .videoContainer video {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2016-11-17 06:40:03 +03:00
|
|
|
.videoContainer .avatar-container {
|
2016-11-17 06:31:37 +03:00
|
|
|
position: absolute;
|
|
|
|
text-align: center;
|
2016-11-17 17:13:32 +03:00
|
|
|
bottom: 44px;
|
2017-03-16 20:23:44 +03:00
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
2016-11-17 06:31:37 +03:00
|
|
|
}
|
2016-11-17 06:48:00 +03:00
|
|
|
.videoContainer .avatar-container .avatar {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2016-11-18 03:49:24 +03:00
|
|
|
.videoContainer.promoted .avatar-container {
|
2016-11-17 06:48:00 +03:00
|
|
|
top: 30%;
|
|
|
|
}
|
2016-11-18 03:49:24 +03:00
|
|
|
.videoContainer.promoted .avatar-container + .nameIndicator {
|
2016-11-17 07:17:43 +03:00
|
|
|
display: none;
|
2016-11-17 06:53:55 +03:00
|
|
|
}
|
2017-02-20 18:07:28 +03:00
|
|
|
|
2017-03-29 15:24:58 +03:00
|
|
|
.videoContainer.promoted .mediaIndicator {
|
2017-02-21 19:08:20 +03:00
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
2016-11-25 16:05:34 +03:00
|
|
|
#emptycontent {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 40;
|
|
|
|
}
|
|
|
|
|
2016-12-16 01:50:24 +03:00
|
|
|
#emptycontent-icon {
|
2016-11-24 22:32:02 +03:00
|
|
|
width: 128px;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
2016-11-25 19:12:14 +03:00
|
|
|
|
|
|
|
#shareRoomContainer {
|
|
|
|
position: relative;
|
|
|
|
}
|
2016-11-24 22:32:02 +03:00
|
|
|
#shareRoomInput {
|
2016-11-25 19:12:14 +03:00
|
|
|
width: 250px;
|
|
|
|
padding-right: 32px;
|
|
|
|
text-overflow: ellipsis;
|
2016-11-24 22:32:02 +03:00
|
|
|
}
|
|
|
|
#shareRoomClipboardButton {
|
2016-11-25 19:12:14 +03:00
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
padding: 18px;
|
|
|
|
background-size: 16px !important;
|
|
|
|
height: 16px !important;
|
|
|
|
width: 16px !important;
|
|
|
|
margin: 0 !important;
|
|
|
|
opacity: .8 !important;
|
2016-11-24 22:32:02 +03:00
|
|
|
}
|
|
|
|
|
2018-03-22 17:49:25 +03:00
|
|
|
.participants-1:not(.screensharing) #emptycontent {
|
2016-11-17 03:48:55 +03:00
|
|
|
display: block !important;
|
2016-11-17 03:15:01 +03:00
|
|
|
}
|
|
|
|
|
2017-03-30 13:30:34 +03:00
|
|
|
#screensharing-menu {
|
2018-02-07 20:07:54 +03:00
|
|
|
bottom: 44px;
|
|
|
|
left: calc(50% - 40px);
|
|
|
|
right: initial;
|
|
|
|
color: initial;
|
|
|
|
text-shadow: initial;
|
|
|
|
font-size: 13px;
|
2017-03-30 13:30:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#screensharing-menu.app-navigation-entry-menu:after {
|
2018-02-07 20:07:54 +03:00
|
|
|
top: 100%;
|
|
|
|
left: calc(50% - 5px);
|
|
|
|
border-top-color: #fff;
|
|
|
|
border-bottom-color: transparent;
|
2017-03-30 13:30:34 +03:00
|
|
|
}
|
|
|
|
|
2016-11-17 08:31:53 +03:00
|
|
|
/* big speaker video */
|
2016-11-17 17:46:57 +03:00
|
|
|
.participants-1 .videoContainer,
|
2016-11-17 05:31:14 +03:00
|
|
|
.participants-2 .videoContainer,
|
2016-11-18 03:49:24 +03:00
|
|
|
.videoContainer.promoted {
|
2016-11-17 06:07:14 +03:00
|
|
|
position: absolute;
|
2016-11-17 05:31:14 +03:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
2016-11-17 06:07:14 +03:00
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
z-index: 1;
|
2016-11-17 05:31:14 +03:00
|
|
|
}
|
2016-11-18 03:49:24 +03:00
|
|
|
.videoContainer.promoted video,
|
2016-11-18 03:11:26 +03:00
|
|
|
.participants-2 .videoContainer:not(.videoView) video {
|
2016-11-17 08:31:53 +03:00
|
|
|
position: absolute;
|
|
|
|
width: initial;
|
|
|
|
height: 100%;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%) translateX(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* own video */
|
2016-11-17 04:11:03 +03:00
|
|
|
.participants-1 .videoView,
|
|
|
|
.participants-2 .videoView {
|
|
|
|
position: absolute;
|
|
|
|
width: 33%;
|
2016-11-25 19:12:58 +03:00
|
|
|
min-width: 200px;
|
2018-03-12 20:45:25 +03:00
|
|
|
overflow:visible;
|
2016-11-17 04:11:03 +03:00
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
2016-11-17 07:32:30 +03:00
|
|
|
top: initial;
|
|
|
|
left: initial;
|
2016-11-17 04:11:03 +03:00
|
|
|
z-index: 10;
|
2016-11-17 05:17:22 +03:00
|
|
|
}
|
2017-07-06 17:14:15 +03:00
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
.participants-1 .videoView,
|
|
|
|
.participants-2 .videoView {
|
|
|
|
max-height: 35%;
|
|
|
|
}
|
|
|
|
}
|
2016-11-17 08:54:57 +03:00
|
|
|
.participants-1 .videoView video,
|
|
|
|
.participants-2 .videoView video {
|
|
|
|
position: absolute;
|
2018-01-29 20:36:04 +03:00
|
|
|
max-height: 100% !important;
|
2016-11-17 08:54:57 +03:00
|
|
|
bottom: 0;
|
2016-11-17 17:13:32 +03:00
|
|
|
border-top-right-radius: 3px;
|
2016-11-17 08:54:57 +03:00
|
|
|
}
|
2016-11-17 03:58:25 +03:00
|
|
|
|
2017-04-04 16:16:39 +03:00
|
|
|
.videoContainer.promoted,
|
2017-05-11 18:14:06 +03:00
|
|
|
#app-content.incall,
|
2017-02-24 20:55:05 +03:00
|
|
|
#app-content.screensharing {
|
2016-09-26 21:28:20 +03:00
|
|
|
background-color: #000;
|
|
|
|
}
|
|
|
|
|
2018-01-10 01:08:25 +03:00
|
|
|
/* Use dark icons when not in a call (= white background) */
|
2018-01-19 19:50:52 +03:00
|
|
|
#app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow {
|
2018-01-10 02:37:28 +03:00
|
|
|
/* Still use white icons outside of calls when local video shows */
|
|
|
|
&#hideVideo.video-disabled,
|
2018-03-29 11:25:31 +03:00
|
|
|
&#mute.video-disabled,
|
|
|
|
&#screensharing-button.video-disabled {
|
2018-01-10 01:08:25 +03:00
|
|
|
filter: none;
|
2018-01-10 02:37:28 +03:00
|
|
|
}
|
2018-01-10 01:12:24 +03:00
|
|
|
|
2018-01-10 02:37:28 +03:00
|
|
|
&.icon-menu-people,
|
|
|
|
&.icon-fullscreen {
|
|
|
|
filter: none;
|
|
|
|
opacity: .5;
|
2018-01-10 01:12:24 +03:00
|
|
|
|
2018-01-10 02:37:28 +03:00
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
opacity: 1;
|
2018-01-10 01:12:24 +03:00
|
|
|
}
|
2018-01-10 01:08:25 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-03-21 19:50:06 +03:00
|
|
|
#app-content.screensharing #screens {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
2017-03-14 21:49:57 +03:00
|
|
|
height: calc(100% - 200px);
|
2018-01-25 18:07:55 +03:00
|
|
|
top: 0;
|
2017-03-15 13:17:34 +03:00
|
|
|
overflow-y: scroll;
|
2017-02-24 20:55:05 +03:00
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
2017-03-21 19:50:06 +03:00
|
|
|
#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;
|
2016-11-17 05:45:07 +03:00
|
|
|
bottom: 0;
|
2017-03-16 20:23:44 +03:00
|
|
|
left: 0;
|
2016-11-17 17:39:40 +03:00
|
|
|
padding: 12px;
|
2016-09-20 18:43:23 +03:00
|
|
|
color: #fff;
|
2016-11-17 17:23:22 +03:00
|
|
|
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);
|
2017-03-16 20:23:44 +03:00
|
|
|
width: 100%;
|
2016-09-05 00:54:11 +03:00
|
|
|
text-align: center;
|
2016-09-22 01:13:05 +03:00
|
|
|
font-size: 20px;
|
2016-11-17 02:05:29 +03:00
|
|
|
white-space: nowrap;
|
2017-03-16 20:27:48 +03:00
|
|
|
overflow: hidden;
|
2016-11-17 02:05:29 +03:00
|
|
|
text-overflow: ellipsis;
|
2016-09-05 00:54:11 +03:00
|
|
|
}
|
2017-03-16 20:23:44 +03:00
|
|
|
|
2016-11-17 05:45:07 +03:00
|
|
|
.videoView .nameIndicator {
|
|
|
|
padding: 0;
|
2017-03-16 20:27:48 +03:00
|
|
|
overflow: visible;
|
2016-11-17 05:45:07 +03:00
|
|
|
}
|
2017-02-21 19:08:20 +03:00
|
|
|
|
2017-03-16 20:23:44 +03:00
|
|
|
.participants-1 .videoView .nameIndicator,
|
|
|
|
.participants-2 .videoView .nameIndicator {
|
|
|
|
left: initial;
|
2017-02-21 19:08:20 +03:00
|
|
|
}
|
|
|
|
|
2017-03-16 20:23:44 +03:00
|
|
|
.participants-1 .videoView .avatar-container,
|
|
|
|
.participants-2 .videoView .avatar-container {
|
|
|
|
left: initial;
|
2017-02-21 19:08:20 +03:00
|
|
|
}
|
|
|
|
|
2016-11-17 17:39:40 +03:00
|
|
|
/* ellipsize name in 1on1 calls */
|
2016-11-18 03:49:24 +03:00
|
|
|
.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
|
2016-11-17 17:39:40 +03:00
|
|
|
padding: 12px 35%;
|
|
|
|
}
|
2016-09-20 18:43:23 +03:00
|
|
|
|
2017-02-16 15:24:22 +03:00
|
|
|
#video-fullscreen {
|
|
|
|
position: absolute;
|
2018-01-10 01:25:28 +03:00
|
|
|
top: 44px;
|
2017-10-17 18:20:55 +03:00
|
|
|
right: 0;
|
2017-02-16 15:24:22 +03:00
|
|
|
z-index: 90;
|
|
|
|
}
|
|
|
|
|
|
|
|
#video-fullscreen,
|
2018-01-09 18:46:53 +03:00
|
|
|
.nameIndicator button,
|
|
|
|
#app-sidebar-trigger {
|
2016-09-20 18:43:23 +03:00
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
2018-01-09 18:46:53 +03:00
|
|
|
margin: 0;
|
2016-09-20 18:43:23 +03:00
|
|
|
width: 44px;
|
|
|
|
height: 44px;
|
2018-01-09 18:46:53 +03:00
|
|
|
background-size: 24px;
|
2016-09-20 18:43:23 +03:00
|
|
|
}
|
2017-02-16 17:24:18 +03:00
|
|
|
|
2016-09-20 18:43:23 +03:00
|
|
|
.nameIndicator button.audio-disabled,
|
2017-02-16 17:24:18 +03:00
|
|
|
.nameIndicator button.video-disabled,
|
|
|
|
.nameIndicator button.screensharing-disabled {
|
2016-11-17 17:39:40 +03:00
|
|
|
opacity: .7;
|
2016-09-05 00:54:11 +03:00
|
|
|
}
|
2016-09-21 21:02:18 +03:00
|
|
|
|
2018-03-29 13:54:40 +03:00
|
|
|
.nameIndicator button.no-audio-available,
|
2017-11-23 12:38:32 +03:00
|
|
|
.nameIndicator button.no-video-available {
|
2017-11-30 12:55:35 +03:00
|
|
|
opacity: .7;
|
|
|
|
cursor: not-allowed;
|
2018-03-29 13:54:40 +03:00
|
|
|
}
|
2017-11-30 12:55:35 +03:00
|
|
|
|
2018-03-29 13:54:40 +03:00
|
|
|
.nameIndicator button.no-audio-available:active,
|
2017-11-23 12:38:32 +03:00
|
|
|
.nameIndicator button.no-video-available:active {
|
2017-11-30 12:55:35 +03:00
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
2017-03-29 15:24:58 +03:00
|
|
|
.mediaIndicator {
|
2016-11-17 07:02:42 +03:00
|
|
|
position: absolute;
|
2017-03-16 20:23:44 +03:00
|
|
|
width: 100%;
|
2016-11-17 17:39:40 +03:00
|
|
|
bottom: 44px;
|
2017-03-16 20:23:44 +03:00
|
|
|
left: 0;
|
2016-11-17 07:02:42 +03:00
|
|
|
background-size: 22px;
|
2017-03-29 15:24:58 +03:00
|
|
|
text-align: center;
|
2016-11-17 07:02:42 +03:00
|
|
|
}
|
|
|
|
|
2017-03-29 15:24:58 +03:00
|
|
|
.muteIndicator,
|
2018-06-06 13:17:51 +03:00
|
|
|
.hideRemoteVideo,
|
2017-05-12 16:54:35 +03:00
|
|
|
.screensharingIndicator,
|
|
|
|
.iceFailedIndicator {
|
2017-03-29 15:24:58 +03:00
|
|
|
position: relative;
|
2017-03-30 13:30:34 +03:00
|
|
|
display: inline-block;
|
2017-03-29 15:24:58 +03:00
|
|
|
background-color: transparent !important;
|
|
|
|
border: none;
|
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
|
|
|
background-size: 22px;
|
2016-11-17 07:02:42 +03:00
|
|
|
}
|
|
|
|
|
2017-03-29 15:24:58 +03:00
|
|
|
.muteIndicator.audio-on,
|
2017-05-12 16:54:35 +03:00
|
|
|
.screensharingIndicator.screen-off,
|
|
|
|
.iceFailedIndicator.not-failed {
|
2017-02-21 19:08:20 +03:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.muteIndicator.audio-off {
|
2017-03-29 15:24:58 +03:00
|
|
|
opacity: .7;
|
2017-02-21 19:08:20 +03:00
|
|
|
}
|
|
|
|
|
2017-05-12 16:54:35 +03:00
|
|
|
.iceFailedIndicator {
|
|
|
|
opacity: .8 !important;
|
|
|
|
}
|
|
|
|
|
2018-01-10 01:34:16 +03:00
|
|
|
|
|
|
|
/* 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%;
|
2018-01-10 01:34:16 +03:00
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
&.participants-1 {
|
|
|
|
background: #fff;
|
|
|
|
}
|
2016-09-21 21:02:18 +03:00
|
|
|
}
|
|
|
|
#app-content:-moz-full-screen {
|
|
|
|
width: 100%;
|
2018-01-10 01:34:16 +03:00
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
&.participants-1 {
|
|
|
|
background: #fff;
|
|
|
|
}
|
2016-09-21 21:02:18 +03:00
|
|
|
}
|
|
|
|
#app-content:-ms-fullscreen {
|
|
|
|
width: 100%;
|
2018-01-10 01:34:16 +03:00
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
&.participants-1 {
|
|
|
|
background: #fff;
|
|
|
|
}
|
2016-09-21 21:02:18 +03:00
|
|
|
}
|
|
|
|
#app-content:fullscreen {
|
|
|
|
width: 100%;
|
2018-01-10 01:34:16 +03:00
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
&.participants-1 {
|
|
|
|
background: #fff;
|
|
|
|
}
|
2016-09-21 21:02:18 +03:00
|
|
|
}
|
2018-01-10 01:34:16 +03:00
|
|
|
|
|
|
|
/* No switching between rooms in fullscreen, focus on the current call. */
|
2016-11-15 20:00:36 +03:00
|
|
|
#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;
|
|
|
|
}
|
2016-10-17 18:33:28 +03:00
|
|
|
|
2017-10-30 10:35:13 +03:00
|
|
|
/**
|
|
|
|
* 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;
|
|
|
|
}
|
|
|
|
|
2017-10-27 13:46:06 +03:00
|
|
|
/* 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;
|
|
|
|
}
|
|
|
|
|
2018-01-10 01:34:16 +03:00
|
|
|
|
2016-10-17 18:33:28 +03:00
|
|
|
.localmediaerror h2 {
|
|
|
|
color: red;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.localmediaerror .uploadmessage {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList li > a,
|
2016-11-14 16:30:08 +03:00
|
|
|
#app-navigation li > a {
|
2018-02-07 20:07:54 +03:00
|
|
|
padding-right: 44px !important;
|
2016-11-14 16:30:08 +03:00
|
|
|
}
|
2016-10-19 16:03:55 +03:00
|
|
|
#app-navigation .utils {
|
|
|
|
padding: 0;
|
|
|
|
}
|
2016-10-17 18:33:28 +03:00
|
|
|
#app-navigation .utils .action {
|
|
|
|
display: inline-block;
|
2016-10-19 16:03:55 +03:00
|
|
|
padding: 22px;
|
2016-10-17 18:33:28 +03:00
|
|
|
cursor: pointer;
|
2016-10-19 16:03:55 +03:00
|
|
|
opacity: .3;
|
2016-10-17 18:33:28 +03:00
|
|
|
}
|
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;
|
2017-02-13 18:20:39 +03:00
|
|
|
min-height: 44px;
|
2016-10-18 15:33:10 +03:00
|
|
|
}
|
|
|
|
|
2016-11-17 00:10:33 +03:00
|
|
|
#app-navigation .app-navigation-entry-menu input {
|
2016-11-18 17:16:15 +03:00
|
|
|
margin-left: 5px !important;
|
|
|
|
margin-top: -5px;
|
2017-02-13 18:20:39 +03:00
|
|
|
min-width: 150px;
|
2017-02-13 17:52:33 +03:00
|
|
|
padding-right: 26px;
|
2016-11-18 17:16:15 +03:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
2016-11-17 00:10:33 +03:00
|
|
|
}
|
|
|
|
|
2017-07-13 17:07:42 +03:00
|
|
|
#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;
|
|
|
|
}
|
|
|
|
|
2016-11-18 17:16:15 +03:00
|
|
|
#app-navigation .app-navigation-entry-menu li span[class^='icon-'],
|
|
|
|
#app-navigation .app-navigation-entry-menu li span[class*=' icon-'] {
|
2016-11-23 19:11:01 +03:00
|
|
|
padding: 16px;
|
2016-10-18 15:33:10 +03:00
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
2016-11-14 12:15:45 +03:00
|
|
|
|
|
|
|
#app-navigation .app-navigation-entry-utils-menu-button {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
2016-11-18 03:49:24 +03:00
|
|
|
|
2017-10-12 14:55:15 +03:00
|
|
|
#app-sidebar-trigger {
|
2018-01-12 22:42:00 +03:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
2017-10-12 14:55:15 +03:00
|
|
|
right: 0;
|
|
|
|
/* Higher than the z-index of the emptycontent */
|
|
|
|
z-index: 50;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2018-01-09 18:46:53 +03:00
|
|
|
.icon-menu-people {
|
|
|
|
background-image: url('../img/menu-people.svg?v=1');
|
2017-10-12 14:55:15 +03:00
|
|
|
}
|
|
|
|
|
2018-02-02 16:43:21 +03:00
|
|
|
.icon-no-password {
|
|
|
|
background-image: url('../img/no-password.svg?v=1');
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2016-11-18 12:53:00 +03:00
|
|
|
#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
|
2018-01-08 14:47:54 +03:00
|
|
|
#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
|
2016-11-18 04:06:41 +03:00
|
|
|
animation: pulse 1s;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes pulse {
|
|
|
|
0% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
50% {
|
2016-11-18 04:12:40 +03:00
|
|
|
opacity: .3;
|
2016-11-18 04:06:41 +03:00
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2016-11-18 03:49:24 +03:00
|
|
|
}
|
2016-11-28 01:11:31 +03:00
|
|
|
|
2017-11-28 16:11:55 +03:00
|
|
|
/* The header element contains the header div; as the header div uses a fixed
|
2018-01-10 10:15:12 +03:00
|
|
|
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;
|
2017-11-28 16:11:55 +03:00
|
|
|
}
|
|
|
|
|
2016-11-28 01:11:31 +03:00
|
|
|
/* make blue header bar transparent in shared room */
|
|
|
|
#body-public #app-content:not(.participants-1) #header.spreed-public {
|
|
|
|
background: transparent;
|
|
|
|
}
|
2017-05-19 13:10:44 +03:00
|
|
|
|
2018-01-12 22:42:00 +03:00
|
|
|
/* Correctly position icons below header in public chat. */
|
|
|
|
#body-public {
|
|
|
|
#app-sidebar-trigger {
|
|
|
|
top: 45px;
|
|
|
|
}
|
|
|
|
#video-fullscreen {
|
|
|
|
top: 89px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-10-30 09:09:12 +03:00
|
|
|
/* 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,
|
2018-01-10 01:25:28 +03:00
|
|
|
#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
|
2017-10-30 09:09:12 +03:00
|
|
|
#body-public #app-content:not(.participants-1) #video-fullscreen {
|
|
|
|
top: 0;
|
|
|
|
z-index: 3000;
|
2017-05-19 13:10:44 +03:00
|
|
|
}
|
2018-01-10 01:25:28 +03:00
|
|
|
#body-public #app-content:not(.participants-1) #video-fullscreen {
|
|
|
|
top: 44px;
|
|
|
|
}
|
2017-08-07 17:37:56 +03:00
|
|
|
|
|
|
|
/**
|
2017-08-12 18:30:46 +03:00
|
|
|
* Right sidebar
|
2017-08-07 17:37:56 +03:00
|
|
|
*/
|
|
|
|
|
|
|
|
#app-sidebar .detailCallInfoContainer {
|
|
|
|
padding: 15px;
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
2018-03-22 20:22:03 +03:00
|
|
|
.tabHeaders {
|
2017-08-07 17:37:56 +03:00
|
|
|
display: inline-block;
|
|
|
|
}
|
2017-08-12 18:25:23 +03:00
|
|
|
|
2018-01-09 19:13:14 +03:00
|
|
|
/* START: move padding fixes and icons-for-tabs capability into core */
|
2018-01-09 19:19:36 +03:00
|
|
|
.tabHeaders {
|
2018-01-10 13:41:00 +03:00
|
|
|
display: flex;
|
2018-01-09 19:19:36 +03:00
|
|
|
margin-top: 0;
|
2018-01-10 13:41:00 +03:00
|
|
|
margin-bottom: 10px;
|
2018-01-10 14:46:35 +03:00
|
|
|
min-height: 44px;
|
2018-01-09 19:19:36 +03:00
|
|
|
}
|
|
|
|
|
2018-01-09 19:13:14 +03:00
|
|
|
.tabHeaders .tabHeader {
|
2018-01-10 13:41:00 +03:00
|
|
|
flex-basis: 50%;
|
|
|
|
flex-grow: 0;
|
2018-01-09 19:13:14 +03:00
|
|
|
padding: 12px;
|
2018-01-10 13:41:00 +03:00
|
|
|
text-align: center;
|
|
|
|
border-bottom: 1px solid $color-border;
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
a {
|
|
|
|
padding-left: 32px;
|
2018-05-31 15:41:40 +03:00
|
|
|
background-position: 12px;
|
|
|
|
background-repeat: no-repeat;
|
2018-01-10 13:41:00 +03:00
|
|
|
color: $color-main-text;
|
|
|
|
opacity: .5;
|
|
|
|
}
|
2018-01-09 19:13:14 +03:00
|
|
|
}
|
|
|
|
|
2018-01-10 13:41:00 +03:00
|
|
|
.tabHeaders .tabHeader.selected a,
|
|
|
|
.tabHeaders .tabHeader:hover a,
|
|
|
|
.tabHeaders .tabHeader:focus a {
|
2018-01-09 19:13:14 +03:00
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
/* END: move padding fixes and icons-for-tabs capability into core */
|
|
|
|
|
2017-09-08 16:36:48 +03:00
|
|
|
#app-sidebar.hidden {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .participant-moderator-indicator {
|
2017-08-12 18:30:46 +03:00
|
|
|
opacity: .5;
|
|
|
|
font-weight: 300;
|
2017-09-01 11:03:31 +03:00
|
|
|
padding-left: 5px;
|
2017-08-12 18:30:46 +03:00
|
|
|
}
|
|
|
|
|
2018-04-17 11:53:00 +03:00
|
|
|
.participantWithList .icon {
|
|
|
|
width: 16px;
|
|
|
|
display: inline-block;
|
|
|
|
opacity: 0.4;
|
|
|
|
margin-left: 5px;
|
|
|
|
margin-bottom: -4px;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .participant-offline > a {
|
2017-08-12 18:25:23 +03:00
|
|
|
opacity: .5;
|
|
|
|
}
|
2017-09-01 11:03:31 +03:00
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList li {
|
2017-09-01 11:03:31 +03:00
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList li > a {
|
2017-09-01 11:03:31 +03:00
|
|
|
display: block;
|
|
|
|
width: 100%;
|
|
|
|
line-height: 44px;
|
|
|
|
min-height: 44px;
|
|
|
|
overflow: hidden;
|
|
|
|
box-sizing: border-box;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
2017-10-13 07:22:38 +03:00
|
|
|
padding-left: 44px;
|
|
|
|
background-size: 16px 16px;
|
2018-04-17 11:53:00 +03:00
|
|
|
background: no-repeat 14px center;
|
2017-09-01 11:03:31 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* App navigation utils, buttons and counters for drop down menu
|
|
|
|
*/
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .participant-entry-utils {
|
2017-09-01 11:03:31 +03:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
z-index: 105;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .active > .participant-entry-utils li {
|
2017-09-01 11:03:31 +03:00
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2018-06-01 18:20:59 +03:00
|
|
|
.participantWithList .participant-entry-utils li {
|
|
|
|
width: 44px;
|
|
|
|
height: 44px;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .participant-entry-utils button {
|
2017-09-01 11:03:31 +03:00
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
|
2017-10-13 07:22:38 +03:00
|
|
|
.participantWithList .participant-entry-utils-menu-button button {
|
2017-09-01 11:03:31 +03:00
|
|
|
border: 0;
|
|
|
|
opacity: .5;
|
2018-06-01 18:20:59 +03:00
|
|
|
background-color: transparent;
|
2017-09-01 11:03:31 +03:00
|
|
|
}
|
2017-10-16 18:17:32 +03:00
|
|
|
|
2018-06-04 14:56:40 +03:00
|
|
|
.participantWithList .participant-entry-utils-menu-button button:hover,
|
|
|
|
.participantWithList .participant-entry-utils-menu-button button:focus, {
|
|
|
|
opacity: 1;
|
2017-09-01 11:03:31 +03:00
|
|
|
}
|
2017-10-16 18:17:32 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Sidebar details view
|
|
|
|
*/
|
2018-03-23 19:05:31 +03:00
|
|
|
.detailCallInfoContainer,
|
|
|
|
.authorRow {
|
2018-03-22 20:22:03 +03:00
|
|
|
.room-name {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.guest-name p {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 9px 0;
|
|
|
|
}
|
|
|
|
.editable-text-label {
|
2018-03-23 19:05:31 +03:00
|
|
|
.label-wrapper {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
.edit-button {
|
|
|
|
margin-left: 5px;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
&:hover .edit-button {
|
|
|
|
display: block;
|
|
|
|
}
|
2018-03-22 20:22:03 +03:00
|
|
|
}
|
2018-03-23 19:05:31 +03:00
|
|
|
.input-wrapper {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2018-03-22 20:22:03 +03:00
|
|
|
}
|
2018-03-26 13:43:35 +03:00
|
|
|
.label {
|
|
|
|
margin-left: 5px;
|
|
|
|
}
|
2018-03-22 20:22:03 +03:00
|
|
|
}
|
|
|
|
.share-link-options {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
.link-checkbox-label {
|
|
|
|
margin-left: 6px;
|
|
|
|
}
|
|
|
|
.button {
|
|
|
|
cursor: pointer;
|
|
|
|
width: 44px;
|
|
|
|
height: 44px;
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
.password-button {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
}
|
2018-01-09 18:01:33 +03:00
|
|
|
}
|
2017-11-15 03:09:03 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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;
|
2018-01-09 17:37:27 +03:00
|
|
|
|
|
|
|
flex-grow: 1;
|
2017-11-15 03:09:03 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar .tabsContainer {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
overflow: hidden;
|
2018-01-09 17:37:27 +03:00
|
|
|
|
|
|
|
flex-grow: 1;
|
2017-11-15 03:09:03 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar .tab {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
overflow: hidden;
|
2018-01-09 17:37:27 +03:00
|
|
|
|
|
|
|
flex-grow: 1;
|
2017-11-15 03:09:03 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar #commentsTabView {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
overflow: hidden;
|
2018-01-09 17:37:27 +03:00
|
|
|
|
|
|
|
flex-grow: 1;
|
2017-11-15 03:09:03 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar .comments {
|
|
|
|
overflow-y: auto;
|
2018-01-09 16:52:41 +03:00
|
|
|
|
|
|
|
/* 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;
|
2017-11-15 03:09:03 +03:00
|
|
|
}
|
2017-11-29 20:42:41 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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 {
|
2018-04-17 11:53:00 +03:00
|
|
|
padding-left: 0;
|
|
|
|
padding-right: 0;
|
|
|
|
padding-bottom: 0;
|
2017-11-29 20:42:41 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar #commentsTabView .newCommentRow,
|
|
|
|
#app-sidebar #commentsTabView .comments {
|
|
|
|
padding-left: 15px;
|
|
|
|
padding-right: 15px;
|
|
|
|
}
|
2018-01-09 13:55:58 +03:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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;
|
Fix scrolling on participants list
When using Firefox, the participants tab view requires its overflow to
be hidden to limit its size to the size of its parents. Otherwise, the
participants tab view grows to fit its children; if that happens then no
scroll bar is shown for the participants list, as the participants list
is tall enough to fit all its items (even if they are not visible
because they are in the overflow area). In Chromium, on the other hand,
the participants tab view size is always limited by its parents, no
matter if the overflow is hidden or not.
In a similar way, once the overflow is hidden the bottom padding added
to the participants list has to be added to its last item instead.
Firefox only takes into account the bottom padding in the participants
list when the list has not overflown the participants tab view; it needs
to be added to the last item to be taken into account also when the
participants list is taller than the participants tab view. Chromium, on
the other hand, always takes into account the padding, no matter if it
is added to the participants list or to its last item.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2018-05-11 05:21:46 +03:00
|
|
|
overflow: hidden;
|
2018-01-09 13:55:58 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar .participantWithList {
|
|
|
|
overflow-y: auto;
|
Fix scrolling on participants list
When using Firefox, the participants tab view requires its overflow to
be hidden to limit its size to the size of its parents. Otherwise, the
participants tab view grows to fit its children; if that happens then no
scroll bar is shown for the participants list, as the participants list
is tall enough to fit all its items (even if they are not visible
because they are in the overflow area). In Chromium, on the other hand,
the participants tab view size is always limited by its parents, no
matter if the overflow is hidden or not.
In a similar way, once the overflow is hidden the bottom padding added
to the participants list has to be added to its last item instead.
Firefox only takes into account the bottom padding in the participants
list when the list has not overflown the participants tab view; it needs
to be added to the last item to be taken into account also when the
participants list is taller than the participants tab view. Chromium, on
the other hand, always takes into account the padding, no matter if it
is added to the participants list or to its last item.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
2018-05-11 05:21:46 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-sidebar .participantWithList .participant:last-child {
|
2018-03-23 19:34:58 +03:00
|
|
|
/* Add room for the popovermenu on last user */
|
2018-03-26 17:25:54 +03:00
|
|
|
padding-bottom: 64px;
|
2018-01-09 13:55:58 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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 {
|
2018-04-17 11:53:00 +03:00
|
|
|
padding-right: 0;
|
|
|
|
padding-bottom: 0;
|
2018-01-09 13:55:58 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#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;
|
|
|
|
}
|