зеркало из https://github.com/nextcloud/spreed.git
269 строки
6.4 KiB
SCSS
269 строки
6.4 KiB
SCSS
/* Request password button has the appearance of the log in button */
|
|
.request-password-wrapper {
|
|
position: relative;
|
|
width: 280px;
|
|
margin: 16px auto;
|
|
}
|
|
|
|
.request-password-wrapper .icon {
|
|
position: absolute;
|
|
top: 23px;
|
|
right: 23px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
input#request-password-button {
|
|
width: 269px;
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
input#request-password-button:disabled ~ .icon {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
|
|
|
|
/* Special layout to include the Talk sidebar */
|
|
/* The original style of the body is kept until the layout has been adjusted to
|
|
* include the Talk sidebar. If only "#body-login" was used, immediately after
|
|
* load and before the sidebar was injected the original elements would be using
|
|
* the style for the adjusted layout, which is not the proper one for them, and
|
|
* this would cause the elements to "jump" to their final position once the
|
|
* layout was adjusted. */
|
|
#body-login.talk-sidebar-enabled {
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* #body-login should be used to override the #content rules set in server. */
|
|
#body-login #content {
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
height: auto;
|
|
|
|
overflow-x: hidden;
|
|
|
|
/* Override "padding-top: 50px" set in server. */
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Properties based on the app-sidebar */
|
|
#talk-sidebar {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 27vw;
|
|
min-width: 300px;
|
|
height: 100vh;
|
|
|
|
background: var(--color-main-background);
|
|
border-left: 1px solid var(--color-border);
|
|
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
z-index: 500;
|
|
|
|
transition: 300ms width ease-in-out,
|
|
300ms min-width ease-in-out;
|
|
}
|
|
|
|
#talk-sidebar.disappear {
|
|
width: 0;
|
|
min-width: 0;
|
|
border-left-width: 0;
|
|
}
|
|
|
|
|
|
|
|
/* Talk sidebar */
|
|
#talk-sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
#talk-sidebar #emptycontent {
|
|
position: relative;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#talk-sidebar #call-container.incall ~ #emptycontent {
|
|
display: none;
|
|
}
|
|
|
|
#talk-sidebar #call-container:not(.incall) {
|
|
display: none;
|
|
}
|
|
|
|
#talk-sidebar #call-container {
|
|
position: relative;
|
|
|
|
flex-grow: 1;
|
|
|
|
/* Prevent shadows of videos from leaking on other elements. */
|
|
overflow: hidden;
|
|
|
|
/* Distribute available height between call container and chat view. */
|
|
height: 50%;
|
|
|
|
/* Ensure that the background will be black also in voice only calls. */
|
|
background-color: #000;
|
|
}
|
|
|
|
/* Video in Talk sidebar */
|
|
#talk-sidebar #call-container #videos {
|
|
position: relative;
|
|
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#talk-sidebar #call-container .videoContainer {
|
|
/* The video container has some small padding to prevent the video from
|
|
* reaching the edges, but it also uses "width: 100%", so the padding should
|
|
* be included in the full width of the element. */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#talk-sidebar #call-container .videoContainer.promoted video {
|
|
/* Base the size of the video on its width instead of on its height;
|
|
* otherwise the video could appear in full height but cropped on the sides
|
|
* due to the space available in the sidebar being typically larger in
|
|
* vertical than in horizontal. */
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#talk-sidebar #call-container .nameIndicator {
|
|
/* The name indicator has some small padding to prevent the name from
|
|
* reaching the edges, but it also uses "width: 100%", so the padding should
|
|
* be included in the full width of the element. */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
#talk-sidebar #chatView {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
flex-grow: 1;
|
|
|
|
/* Distribute available height between call container and chat view. */
|
|
height: 50%;
|
|
}
|
|
|
|
#talk-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;
|
|
}
|
|
|
|
#talk-sidebar #chatView .newCommentRow,
|
|
#talk-sidebar #chatView .comments {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
#talk-sidebar #chatView .comments .wrapper-background,
|
|
#talk-sidebar #chatView .comments .wrapper {
|
|
/* Padding is not respected in the comment wrapper due to its absolute
|
|
* positioning, so it must be set through its position. */
|
|
left: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
#talk-sidebar #chatView .comments .wrapper {
|
|
/* Reset the rules set for ".wrapper" elements by "guest.scss" in server, as
|
|
* they affect too the virtual list wrapper when they should not. */
|
|
width: auto;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#talk-sidebar #chatView .comments .message {
|
|
/* The messages are left padded, but they also use "width: calc(100%...", so
|
|
* the padding should be included in the full width of the element. */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#talk-sidebar #chatView .newCommentForm.with-add-button {
|
|
/* Make room to show the "Add" button if needed. */
|
|
margin-right: 44px;
|
|
}
|
|
|
|
/* Unset conflicting rules from guest.css for the sidebar */
|
|
#talk-sidebar {
|
|
text-align: left;
|
|
}
|
|
|
|
#talk-sidebar form {
|
|
width: unset;
|
|
margin: 0;
|
|
}
|
|
|
|
#talk-sidebar .button {
|
|
display: unset;
|
|
}
|
|
|
|
/* Restore rules from input.scss overriden by guest.css for the sidebar */
|
|
#talk-sidebar input:not([type='range']) {
|
|
margin: 3px 3px 3px 0;
|
|
padding: 7px 6px;
|
|
font-size: 13px;
|
|
border: 1px solid var(--color-border-dark);
|
|
box-sizing: border-box;
|
|
|
|
&:not(:disabled):not(.primary) {
|
|
&:hover,
|
|
&:focus {
|
|
border-color: var(--color-primary-element);
|
|
}
|
|
}
|
|
}
|
|
|
|
#talk-sidebar input[type="text"],
|
|
#talk-sidebar input[type="password"] {
|
|
width: 130px;
|
|
|
|
padding-right: 34px;
|
|
}
|
|
|
|
/* Restore rules from style.scss (core) overriden by guest.css for the
|
|
* sidebar */
|
|
#body-login #talk-sidebar a {
|
|
color: var(--color-main-text);
|
|
font-weight: inherit;
|
|
}
|
|
|
|
/* Unset conflicting rules from publicshareauth.css (core) for the sidebar */
|
|
#talk-sidebar input[type="submit"],
|
|
#talk-sidebar input.icon-confirm[type="submit"] {
|
|
top: unset;
|
|
}
|
|
|
|
#talk-sidebar .guest-name input.icon-confirm[type="submit"] {
|
|
top: -5px;
|
|
right: 0px;
|
|
border: none;
|
|
}
|
|
|
|
/* Unset conflicting rules from guest.css for the sidebar */
|
|
#talk-sidebar input[type="submit"].hidden,
|
|
#talk-sidebar input.icon-confirm[type="submit"].hidden {
|
|
display: none;
|
|
}
|