spreed/css/style.scss

934 строки
18 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;
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;
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 {
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;
}
video {
width: 100%;
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
}
#screens video {
-webkit-filter: none;
filter: none;
}
#videos .videoContainer video {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: #000;
}
#videos .videoContainer.promoted video {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#videos .videoContainer video,
#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;
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),
#app-content:not(.screensharing) {
.icon-white.icon-shadow {
filter: none;
&.icon-menu-people,
&.icon-fullscreen {
opacity: .5;
&:hover,
&:focus {
opacity: 1;
}
}
}
}
#app-content.screensharing .videoContainer video {
max-height: 200px;
background-color: transparent;
box-shadow: 0;
}
#app-content.screensharing #screens {
position: absolute;
width: 100%;
height: calc(100% - 200px);
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;
}
2016-09-21 21:02:18 +03:00
#app-content:-webkit-full-screen {
width: 100%;
}
#app-content:-moz-full-screen {
width: 100%;
}
#app-content:-ms-fullscreen {
width: 100%;
}
#app-content:fullscreen {
width: 100%;
}
#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;
}
/**
* 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 {
margin-right: 0;
}
#app-content:-moz-full-screen {
margin-right: 0;
}
#app-content:-ms-fullscreen {
margin-right: 0;
}
#app-content:fullscreen {
margin-right: 0;
}
/**
* 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, so it must be explicitly set to
prevent #app-content-wrapper from overlapping with the header element */
#body-public header {
height: 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 {
margin-top: 0;
}
.tabHeaders .tabHeader {
padding: 12px;
padding-left: 32px;
background-position: 12px;
background-repeat: no-repeat;
opacity: .5;
}
.tabHeaders .tabHeader a {
color: $color-main-text;
}
.tabHeaders .tabHeader.selected,
.tabHeaders .tabHeader:hover,
.tabHeaders .tabHeader:focus {
opacity: 1;
}
#tabHeaderChat {
background-image: url('../../../core/img/actions/comment.svg?v=1');
}
#tabHeaderParticipants {
background-image: url('../../../core/img/places/contacts-dark.svg?v=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;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-image: url('../../../core/img/actions/more.svg?v=1');
}
/**
* 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;
}