зеркало из https://github.com/nextcloud/spreed.git
Merge pull request #2711 from nextcloud/bugfix/noid/remove-unused-scss-files
Remove unused SCSS files
This commit is contained in:
Joas Schilling
GitHub
Коммит
ba5df362cd
|
|
@ -1,381 +0,0 @@
|
|||
/*
|
||||
* Copyright (c) 2016
|
||||
*
|
||||
* This file is licensed under the Affero General Public License version 3
|
||||
* or later.
|
||||
*
|
||||
* See the COPYING-README file.
|
||||
*
|
||||
*/
|
||||
|
||||
#chatView .comments,
|
||||
#chatView .emptycontent {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#chatView .emptycontent {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .message {
|
||||
width: calc(100% - 36px);
|
||||
margin-left: 36px;
|
||||
padding-right: 30px;
|
||||
/**
|
||||
* The div needs to be inline-block, so Chrome/Chromium correctly insert
|
||||
* div-ed multi-line-text with new lines.
|
||||
* Otherwise they are just chained together on posting.
|
||||
*
|
||||
* See https://stackoverflow.com/a/24689420
|
||||
* See https://github.com/nextcloud/spreed/issues/1561
|
||||
*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .submit,
|
||||
#chatView .newCommentForm .submitLoading,
|
||||
#chatView .newCommentForm .share,
|
||||
#chatView .newCommentForm .shareLoading {
|
||||
position: absolute;
|
||||
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
bottom: -1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .submit,
|
||||
#chatView .newCommentForm .submitLoading {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .share,
|
||||
#chatView .newCommentForm .shareLoading {
|
||||
right: -44px;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .message:focus + .submit:not(:hover):not(:focus) {
|
||||
opacity: .6;
|
||||
}
|
||||
#chatView .newCommentForm .submit,
|
||||
#chatView .newCommentForm .share {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .3;
|
||||
}
|
||||
#chatView .newCommentForm .submit:hover:not(:disabled),
|
||||
#chatView .newCommentForm .submit:focus:not(:disabled),
|
||||
#chatView .newCommentForm .share:hover:not(:disabled),
|
||||
#chatView .newCommentForm .share:focus:not(:disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm .cancel {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm div.message {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#chatView .newCommentForm div.message:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* Internal wrappers used by the virtual list. */
|
||||
#chatView .comments .wrapper-background,
|
||||
#chatView .comments .wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#chatView .comment {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#chatView .comment .avatar,
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#chatView .comment .message .avatar,
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatView .comment.collapsed .message {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#chatView .comment.collapsed .message {
|
||||
max-height: 70px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#chatView .comment .message-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatView .comment.collapsed .message-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#chatView .authorRow>div {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#chatView .authorRow>div.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
|
||||
#chatView .comment .authorRow {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chatView .comment .authorRow .contactsmenu-popover {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.guestUser) {
|
||||
.avatar,
|
||||
.avatar img,
|
||||
.author {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper,
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar,
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#chatView .comment .author,
|
||||
#chatView .comment .date {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
#chatView .comment .author {
|
||||
margin-left: 5px;
|
||||
}
|
||||
#chatView .comment .date {
|
||||
/* "margin-left: auto" aligns the block to the right, while
|
||||
* "text-align: right" aligns the text inside the block to the right, for
|
||||
* example, when it uses two lines due to a limited width. */
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#chatView .comment.systemMessage:not(.grouped) {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
#chatView .comment:not(.systemMessage):not(.grouped):not(.same-author) .date {
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
||||
#chatView .comment.grouped .date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatView .comments .authorRow,
|
||||
#chatView .comments li .message {
|
||||
/* Makes the container slightly narrower in order not to cover the date on
|
||||
* the right side, thus allowing the date tooltip to be shown properly. */
|
||||
width: calc(100% - 80px)
|
||||
}
|
||||
|
||||
#chatView .comments li .message {
|
||||
padding-left: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatView .comment .action {
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatView .comment:hover .action {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#chatView .comment .action:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#chatView .comment .action.delete {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#chatView .comment.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#chatView .comment.disabled .action {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#chatView .message.error {
|
||||
color: #e9322d;
|
||||
border-color: #e9322d;
|
||||
box-shadow: 0 0 6px #f8b9b7;
|
||||
}
|
||||
|
||||
#chatView .comment.grouped .authorRow,
|
||||
#chatView .comment.same-author .authorRow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chatView .comment.grouped,
|
||||
#chatView .comment.same-author {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
#chatView .comment.showDate {
|
||||
margin-top: 40px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#chatView .comment.showDate:before {
|
||||
content: attr(data-date);
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
padding: 0 7px 0 7px;
|
||||
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
color: var(--color-text-maxcontrast);
|
||||
background-color: var(--color-main-background);
|
||||
}
|
||||
|
||||
#chatView .comment.showDate .authorRow {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
#chatView .comment .message .mention-call,
|
||||
#chatView .comment .message .mention-user {
|
||||
/* Make the mention the positioning context of its child contacts menu */
|
||||
position: relative;
|
||||
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
background-color: var(--color-background-dark);
|
||||
border-radius: 50vh;
|
||||
padding: 1px 7px 1px 1px;
|
||||
|
||||
/* Ensure that the avatar and the user name will be kept together;
|
||||
* otherwise a line break could be added between them when the wrapper
|
||||
* is close to the right border of the message. */
|
||||
white-space: nowrap;
|
||||
|
||||
.avatar {
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
padding: 1px;
|
||||
margin-top: -4px;
|
||||
margin-left: 0;
|
||||
margin-right: 2px;
|
||||
|
||||
&.icon {
|
||||
margin-top: -2px;
|
||||
margin-left: 1px;
|
||||
background-color: var(--color-background-darker);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chatView .comment:not(.systemMessage) .message .mention-call,
|
||||
#chatView .comment:not(.systemMessage) .message .mention-user {
|
||||
font-weight: bold;
|
||||
|
||||
&.currentUser {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-text);
|
||||
}
|
||||
}
|
||||
|
||||
#chatView .comment.systemMessage .message .mention-call,
|
||||
#chatView .comment.systemMessage .message .mention-user {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
#chatView .comment.systemMessage .message {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser),
|
||||
body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar,
|
||||
body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chatView .comment .message .contactsmenu-popover {
|
||||
left: -6px;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
#chatView .comment .message .filePreviewContainer .filePreview {
|
||||
/* The file preview can not be a block; otherwise it would fill the whole
|
||||
* width of the container and the loading icon would not be centered on the
|
||||
* image. */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#chatView .comment .message .filePreviewContainer strong {
|
||||
/* As the file preview is an inline block the name is set as a block to
|
||||
* force it to be on its own line below the preview. */
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chatView .comment .message .external:after {
|
||||
content: " ↗";
|
||||
}
|
||||
339
css/files.scss
339
css/files.scss
|
|
@ -1,339 +0,0 @@
|
|||
#talkChatTabView .call-button {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
button {
|
||||
padding-left: 26px;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.icon-loading-small {
|
||||
/* Prevent the text from being moved when the icon is shown. */
|
||||
position: absolute;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
|
||||
/* Unset the background image set by the server for loading icons inside
|
||||
* buttons, as in this case the pure CSS icon can be used instead of the
|
||||
* image. */
|
||||
background-image: unset;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#talkChatTabView .file-not-shared button {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.talkCallInfoView #call-container-wrapper {
|
||||
/* Overlap the padding from the sidebar itself to maximize the area of the
|
||||
* video as much as possible */
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #emptycontent-icon {
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #call-container.incall ~ #emptycontent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #call-container:not(.incall) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #call-container {
|
||||
position: relative;
|
||||
|
||||
/* Show the call container in a 16/9 proportion based on the sidebar
|
||||
* width. This is the same proportion used for previews of images by the
|
||||
* SidebarPreviewManager. */
|
||||
padding-bottom: 56.25%;
|
||||
max-height: 56.25%;
|
||||
|
||||
/* Ensure that the background will be black also in voice only calls. */
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* Video in Talk sidebar */
|
||||
.talkCallInfoView #call-container-wrapper #call-container #videos {
|
||||
position: absolute;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #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;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #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;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #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;
|
||||
}
|
||||
|
||||
/* Screensharing in Talk sidebar */
|
||||
.talkCallInfoView #call-container-wrapper #call-container.screensharing #screens {
|
||||
/* The row with the participants is shorter in the Talk sidebar to make room
|
||||
* for the promoted video and the shared screens. */
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container-wrapper #call-container.screensharing .videoContainer {
|
||||
max-height: 100px;
|
||||
|
||||
/* Avatars slightly overflow the container; although they overlap the shared
|
||||
* screen it is not too bad and it is better than compressing even further
|
||||
* the shared screen. */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) video {
|
||||
/* Make the unpromoted videos smaller to not overlap too much the promoted
|
||||
* video */
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
/* The avatars are requested with a size of 128px, so reduce it to not overlap
|
||||
* too much the promoted video */
|
||||
.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv,
|
||||
.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) .avatardiv img {
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
/* imageplaceholder() sets font-size to "height * 0.55" */
|
||||
font-size: 35.2px !important;
|
||||
}
|
||||
|
||||
/* Text avatars need to be forced to 128px when promoted, as imageplaceholder()
|
||||
* overrides the given size with the actual height of the element it was called
|
||||
* on, so the text avatar may have a hardcoded height of 64px. Note that this
|
||||
* does not apply to regular image avatars, as in that case they are always
|
||||
* requested with a size of 128px. */
|
||||
.talkCallInfoView #call-container #videos .videoContainer.promoted .avatardiv {
|
||||
width: 128px !important;
|
||||
height: 128px !important;
|
||||
line-height: 128px !important;
|
||||
/* imageplaceholder() sets font-size to "height * 0.55" */
|
||||
font-size: 70.4px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.talkCallInfoView #call-container.participants-1 .videoView,
|
||||
.talkCallInfoView #call-container.participants-2 .videoView {
|
||||
/* Do not force the width to 200px, as otherwise the video is too tall and
|
||||
* overlaps too much with the promoted video. */
|
||||
min-width: initial;
|
||||
/* z-index of 10 would put the video on top of the close button. */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.talkCallInfoView #call-container .nameIndicator {
|
||||
/* Reduce padding to bring the name closer to the bottom */
|
||||
padding: 3px;
|
||||
/* Use default font size, as it takes too much space otherwise */
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
.talkCallInfoView #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
|
||||
/* Reduce padding to bring the name closer to the bottom */
|
||||
padding: 3px 35%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.talkCallInfoView #call-container .mediaIndicator {
|
||||
/* Move the media indicator closer to the bottom */
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Helper class to hide other info views during a call; this makes possible to
|
||||
* restore their previous visibility once the call stops without having to keep
|
||||
* track of their previous visibility. */
|
||||
#app-sidebar .hidden-by-call {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Force the white icon during calls, independent from white/dark mode
|
||||
* selection, because it is shown on the black calling screen. */
|
||||
#app-sidebar .icon-close.force-icon-white-in-call.icon-shadow {
|
||||
background-image: url(icon-color-path('close', 'actions', 'fff', 1, true));
|
||||
filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
/* Override "display: block" set inline by jQuery. */
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#app-sidebar.disappear {
|
||||
/* Override "display: flex !important" when the sidebar has to be hidden. */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#app-sidebar .detailFileInfoContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#app-sidebar .tabsContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#app-sidebar .tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#app-sidebar .tabsContainer.with-inner-scroll-bars,
|
||||
#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Force a minimum height to ensure that the chat view will be at least 300px
|
||||
* height, even if the info view is large and the screen short; in that case a
|
||||
* scroll bar will be shown for the sidebar, but even if that looks really bad
|
||||
* it is better than an unusable chat view. */
|
||||
#app-sidebar .tabsContainer.force-minimum-height {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
#app-sidebar .tab.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView .comments {
|
||||
overflow-y: auto;
|
||||
|
||||
/* Needed for proper calculation of comment positions in the scrolling
|
||||
container (as otherwise the comment position is calculated with respect
|
||||
to the closest ancestor with a relative position) */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Place the scroll bar of the message list on the right edge of the sidebar,
|
||||
* but keeping the padding of the tab view.
|
||||
*
|
||||
* The padding must be set on the left too to ensure that the contacts menu
|
||||
* shown when clicking on an author name does not overflow the tab (as it would
|
||||
* be hidden).
|
||||
*
|
||||
* The bottom padding is removed to extend the chat view to the bottom edge of
|
||||
* the sidebar.
|
||||
*/
|
||||
#app-sidebar .tab-chat {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Hack needed to overcome the padding of the tab container and move the scroll
|
||||
* bar of the messages list to the right border of the sidebar. */
|
||||
#app-sidebar .tabsContainer.with-inner-scroll-bars .tab {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder {
|
||||
/* Make the placeholder take the full tab height until the UI is ready. */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Hide other UI elements when there is a "UI not ready" placeholder. */
|
||||
#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ div,
|
||||
/* #chatView needs to be set explicitly to override the display property of
|
||||
* "#app-sidebar #chatView". */
|
||||
#app-sidebar .tabsContainer .tab .ui-not-ready-placeholder ~ #chatView {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView .comments {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView .comments .wrapper-background,
|
||||
#app-sidebar #chatView .comments .wrapper {
|
||||
/* Padding is not respected in the comment wrapper due to its absolute
|
||||
* positioning, so it must be set through its position. */
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView .newCommentRow {
|
||||
/* The details view in the Files app has a bottom padding of 15px, so the
|
||||
* general bottom margin used for comments should be reduced for the new
|
||||
* comment form. */
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#app-sidebar #chatView .newCommentForm {
|
||||
/* Make room to show the "Add" button when chat is shown in the sidebar. */
|
||||
margin-right: 44px;
|
||||
}
|
||||
|
|
@ -1,489 +0,0 @@
|
|||
/* Special layout to include the Talk sidebar */
|
||||
|
||||
/* The standard layout defined in the server includes a fixed header with a
|
||||
* sticky sidebar. This causes the scroll bar for the main area to appear to the
|
||||
* right of the sidebar, which looks confusing for the chat. Thus that layout is
|
||||
* overridden with a full set of flex containers to cascade parent element
|
||||
* height to the main view to limit the vertical scroll bar only to it (same
|
||||
* thing done for the sidebar and the chat view). */
|
||||
#body-user,
|
||||
#body-public {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#body-user #header,
|
||||
#body-public #header {
|
||||
/* Override fixed position from server to include it in the flex layout */
|
||||
position: static;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
/* Override "min-height: 100%" and "padding-top: 50px" set in server, as the
|
||||
* header is part of the flex layout and thus the whole body is not
|
||||
* available for the content. */
|
||||
min-height: 0;
|
||||
padding-top: 0;
|
||||
|
||||
/* Does not change anything in normal mode, but ensures that the element
|
||||
* will stretch to the full width in full screen mode. */
|
||||
width: 100%;
|
||||
|
||||
/* Override margin used in server, as the header is part of the flex layout
|
||||
* and thus the content does not need to be pushed down. */
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#files-public-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon-menu-people {
|
||||
@include icon-color('menu-people', 'spreed', $color-primary-text, 1);
|
||||
}
|
||||
|
||||
#talk-sidebar-trigger {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Properties based on the app-sidebar */
|
||||
#talk-sidebar {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 27vw;
|
||||
min-width: 300px;
|
||||
|
||||
background: var(--color-main-background);
|
||||
border-left: 1px solid var(--color-border);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 500;
|
||||
|
||||
transition: var(--animation-quick) width ease-in-out,
|
||||
var(--animation-quick) 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.room-not-joined {
|
||||
/* Override "margin-top: 30vh" set in server, as the message is already
|
||||
* centered in the Talk sidebar. */
|
||||
margin-top: unset;
|
||||
|
||||
button {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
.icon-loading-small {
|
||||
/* Prevent the text from being moved when the icon is shown. */
|
||||
position: absolute;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
|
||||
/* Unset the size set by the server for icons in empty content */
|
||||
width: unset;
|
||||
height: unset;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#talk-sidebar #emptycontent {
|
||||
position: relative;
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper {
|
||||
/* Overlap the padding from the sidebar itself to maximize the area of the
|
||||
* video as much as possible */
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #emptycontent {
|
||||
/* Compensate for the removed margins above. */
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
|
||||
/* Override "width: 100%" set in server so margins are respected. */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #emptycontent-icon {
|
||||
width: 128px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #call-container.incall ~ #emptycontent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #call-container:not(.incall) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #call-container {
|
||||
position: relative;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
/* Prevent shadows of videos from leaking on other elements. */
|
||||
overflow: hidden;
|
||||
|
||||
/* Show the call container in a 16/9 proportion based on the sidebar
|
||||
* width. This is the same proportion used for previews of images by the
|
||||
* SidebarPreviewManager. */
|
||||
padding-bottom: 56.25%;
|
||||
max-height: 56.25%;
|
||||
|
||||
/* Ensure that the background will be black also in voice only calls. */
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* Video in Talk sidebar */
|
||||
#talk-sidebar #call-container-wrapper #call-container #videos {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #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;
|
||||
}
|
||||
|
||||
/* Screensharing in Talk sidebar */
|
||||
#talk-sidebar #call-container-wrapper #call-container.screensharing #screens {
|
||||
/* The row with the participants is shorter in the Talk sidebar to make room
|
||||
* for the promoted video and the shared screens. */
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container-wrapper #call-container.screensharing .videoContainer {
|
||||
max-height: 100px;
|
||||
|
||||
/* Avatars slightly overflow the container; although they overlap the shared
|
||||
* screen it is not too bad and it is better than compressing even further
|
||||
* the shared screen. */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#talk-sidebar #call-container #videos .videoContainer:not(.promoted) video {
|
||||
/* Make the unpromoted videos smaller to not overlap too much the promoted
|
||||
* video */
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
/* The avatars are requested with a size of 128px, so reduce it to not overlap
|
||||
* too much the promoted video */
|
||||
#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv,
|
||||
#talk-sidebar #call-container #videos .videoContainer:not(.promoted) .avatardiv img {
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
/* imageplaceholder() sets font-size to "height * 0.55" */
|
||||
font-size: 35.2px !important;
|
||||
}
|
||||
|
||||
/* Text avatars need to be forced to 128px when promoted, as imageplaceholder()
|
||||
* overrides the given size with the actual height of the element it was called
|
||||
* on, so the text avatar may have a hardcoded height of 64px. Note that this
|
||||
* does not apply to regular image avatars, as in that case they are always
|
||||
* requested with a size of 128px. */
|
||||
#talk-sidebar #call-container #videos .videoContainer.promoted .avatardiv {
|
||||
width: 128px !important;
|
||||
height: 128px !important;
|
||||
line-height: 128px !important;
|
||||
/* imageplaceholder() sets font-size to "height * 0.55" */
|
||||
font-size: 70.4px !important;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container.participants-1 .videoView,
|
||||
#talk-sidebar #call-container.participants-2 .videoView {
|
||||
/* Do not force the width to 200px, as otherwise the video is too tall and
|
||||
* overlaps too much with the promoted video. */
|
||||
min-width: initial;
|
||||
/* z-index of 10 would put the video on top of the close button. */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container .nameIndicator {
|
||||
/* Reduce padding to bring the name closer to the bottom */
|
||||
padding: 3px;
|
||||
/* Use default font size, as it takes too much space otherwise */
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
|
||||
/* Reduce padding to bring the name closer to the bottom */
|
||||
padding: 3px 35%;
|
||||
}
|
||||
|
||||
#talk-sidebar #call-container .mediaIndicator {
|
||||
/* Move the media indicator closer to the bottom */
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#talk-sidebar .call-button {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
padding-left: 26px;
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
.icon-loading-small {
|
||||
/* Prevent the text from being moved when the icon is shown. */
|
||||
position: absolute;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
|
||||
/* Unset the background image set by the server for loading icons inside
|
||||
* buttons, as in this case the pure CSS icon can be used instead of the
|
||||
* image. */
|
||||
background-image: unset;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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 .newCommentForm.with-add-button {
|
||||
/* Make room to show the "Add" button if needed. */
|
||||
margin-right: 44px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Confirm icon inside input field.
|
||||
*
|
||||
* The input and the icon should be direct children of a wrapper with a relative
|
||||
* position. The input is expected to be as wide as its wrapper.
|
||||
*
|
||||
* It is assumed that the icon will have the standard width for buttons in
|
||||
* inputs of 34px. However, further adjustments may be needed for the input and
|
||||
* the padding depending on the context where they are used.
|
||||
*
|
||||
* The confirm icon can have a sibling loading icon to switch to (by hiding one
|
||||
* icon and showing the other) while the operation is in progress.
|
||||
*/
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
padding-right: 34px;
|
||||
|
||||
/* When the input is focused it is expected that pressing enter will confirm
|
||||
* the input just like clicking on the icon would do. To hint this behaviour
|
||||
* the opacity of the confirm icon is slightly increased in this case.
|
||||
*/
|
||||
&:focus + .icon-confirm:not(:disabled) {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
& + .icon-confirm {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/* Compensate for right margin of inputs set in the server. */
|
||||
right: 3px;
|
||||
|
||||
/* Border and background color are removed to show only the icon inside
|
||||
* the input. */
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
opacity: .3;
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus:not(:disabled),
|
||||
&:active:not(:disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
+ .icon-loading-small {
|
||||
/* Mimic size set in server for confirm button. */
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 7px 6px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.authorRow {
|
||||
.editable-text-label {
|
||||
.label-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.edit-button .icon {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 13px 22px;
|
||||
margin: 0;
|
||||
|
||||
opacity: .3;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
|
||||
.icon-confirm {
|
||||
/* Needed to override an important rule set in the
|
||||
* server. */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.guest-name p {
|
||||
display: inline-block;
|
||||
padding: 9px 0;
|
||||
}
|
||||
|
||||
/* The specific locator is needed to have higher priority than other
|
||||
* important rules set in the server. */
|
||||
input.checkbox + label.checkbox-label,
|
||||
input.radio + label {
|
||||
/* If ".icon-loading-small" is set hide the checkbox and show a
|
||||
* loading icon instead. */
|
||||
&.icon-loading-small:before {
|
||||
background-image: none !important;
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
&.icon-loading-small:after {
|
||||
top: 22px;
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hidden-important {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -1,268 +0,0 @@
|
|||
/* 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;
|
||||
}
|
||||
1312
css/style.scss
1312
css/style.scss
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче