Merge pull request #2711 from nextcloud/bugfix/noid/remove-unused-scss-files

Remove unused SCSS files

5 files changed, 0 insertions, 2789 deletions

diff --git a/css/chatview.scss b/css/chatview.scss
deleted file mode 100644
index 8e5fadd22..000000000
--- a/css/chatview.scss
+++ /dev/null
@@ -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: " ↗";
-}
diff --git a/css/files.scss b/css/files.scss
deleted file mode 100644
index c091b3762..000000000
--- a/css/files.scss
+++ /dev/null
@@ -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;
-}
diff --git a/css/publicshare.scss b/css/publicshare.scss
deleted file mode 100644
index f1d68635a..000000000
--- a/css/publicshare.scss
+++ /dev/null
@@ -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;
-}
diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss
deleted file mode 100644
index b845a0baf..000000000
--- a/css/publicshareauth.scss
+++ /dev/null
@@ -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;
-}
diff --git a/css/style.scss b/css/style.scss
deleted file mode 100644
index 2a4061276..000000000
--- a/css/style.scss
+++ /dev/null
@@ -1,1312 +0,0 @@
-/* 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-wrapper {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	flex-grow: 1;
-
-	@media (max-width: $breakpoint-mobile) {
-		/* In narrow screens force the app content width to the full viewport
-		 * width to prevent the app content from being compressed when the
-		 * sidebar is shown. */
-		width: 100vw;
-	}
-}
-
-.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;
-}
-
-
-
-/**
- * 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;
-		}
-	}
-}
-
-.menuitem input[type="text"],
-.menuitem input[type="password"] {
-	& + .icon-confirm + .icon-loading-small {
-		/* Mimic size set in server for inputs in menu items. */
-		min-width: 44px;
-		max-height: 40px;
-		margin: 2px 0;
-
-		/* Override padding set in server for icons in menu items. */
-		padding: 7px 6px;
-	}
-}
-
-
-
-/**
- * Sidebar styles
- */
-
-#select2-drop {
-	margin-top: -44px !important;
-}
-#oca-spreedme-add-room .select2-container {
-	border-bottom: 1px solid var(--color-border);
-
-	&.select2-container-active {
-		border-bottom-color: var(--color-border-dark);
-		border-right: 1px solid var(--color-border-dark);
-
-		.select2-choice,
-		.select2-default {
-			color: var(--color-text-light) !important;
-		}
-	}
-}
-.oca-spreedme-add-person .select2-container {
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius);
-
-	&.select2-container-active {
-		border-color: var(--color-border-dark);
-
-		.select2-choice,
-		.select2-default {
-			color: var(--color-text-light) !important;
-		}
-	}
-}
-#oca-spreedme-add-room .select2-container,
-.oca-spreedme-add-person .select2-container {
-	width: 100%;
-	margin: 0 !important;
-	padding: 9px;
-}
-#oca-spreedme-add-room .select2-container .select2-choice,
-.oca-spreedme-add-person .select2-container .select2-choice {
-	border: none;
-	color: var(--color-text-maxcontrast) !important;
-}
-#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 .app-navigation-entry-link > .avatar {
-	position: absolute;
-	left: 6px;
-	top: 6px;
-}
-
-#app-navigation li > a:first-child img {
-	width: 32px !important;
-	height: 32px !important;
-	margin: 0 !important;
-}
-
-.participantWithList .contactsmenu-popover {
-	margin-left: 7px;
-}
-
-.select2-result .avatar.icon,
-.atwho-view-ul .avatar.icon,
-#app-navigation .app-navigation-entry-link .avatar.icon {
-	border-radius: 50%;
-	width: 32px;
-	height: 32px;
-	background-color: var(--color-background-darker);
-}
-
-.icon-file-white {
-	@include icon-color('text', 'filetypes', $color-white, 1, true);
-}
-
-.icon-changelog {
-	background-image: url('../img/changelog.svg');
-}
-
-#app-navigation .favorite-mark {
-	position: absolute;
-	/* 44px is the padding of the main entry link, and 16px the size (size, not
-	 * background size) of the icon, both defined in the server. */
-	left: calc(44px - 16px);
-	line-height: 100%;
-
-	.icon-favorite {
-		display: inline-block;
-		vertical-align: middle;
-
-		/* Show favorite icon in yellow instead of default black. */
-		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
-	}
-}
-
-#app-navigation .app-navigation-entry-utils-counter {
-	overflow: hidden;
-	text-align: right;
-	font-size: 9pt;
-	padding: 0 12px; /* Same padding as all li > a in the app-navigation */
-
-	span {
-		padding: 2px 5px;
-		border-radius: 10px;
-		font-weight: bold;
-		background-color: var(--color-background-dark);
-	}
-
-	&.highlighted {
-		padding-right: 0;
-		text-align: center;
-		width: 22px !important;
-
-		span {
-			background-color: var(--color-primary);
-			color: var(--color-primary-text);
-		}
-	}
-}
-
-.hidden-important {
-	display: none !important;
-}
-
-/**
- * Main view chat styles
- */
-#app-content-wrapper {
-	height: 100%;
-}
-
-#app-content-wrapper #chatView {
-	width: 100%;
-	height: 100%;
-
-	display: flex;
-	flex-direction: column;
-}
-
-/* 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 #chatView .newCommentRow {
-	padding-left: 44px;
-	padding-right: 44px;
-}
-
-#app-content-wrapper #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;
-
-	padding-left: 44px;
-	padding-right: 44px;
-}
-
-
-#app-content-wrapper #chatView .comments .wrapper-background,
-#app-content-wrapper #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: 44px;
-	right: 44px;
-}
-
-/* Hide all siblings of the chat view when shown as the main view */
-#app-content-wrapper #chatView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
-	display: none !important;
-}
-
-#emptycontent {
-	position: absolute;
-	z-index: 40;
-}
-
-#emptycontent-icon {
-	width: 128px;
-	margin: 0 auto;
-	padding-bottom: 20px;
-}
-
-
-#app-content ~ #app-sidebar-wrapper .icon-menu-people,
-#app-content .icon-fullscreen {
-	opacity: .5;
-
-	&:hover,
-	&:focus {
-		opacity: 1;
-	}
-}
-
-#app-content.incall .force-icon-white-in-call,
-#app-content.screensharing .force-icon-white-in-call,
-#app-content.incall ~ #app-sidebar-wrapper .force-icon-white-in-call,
-#app-content.screensharing ~ #app-sidebar-wrapper .force-icon-white-in-call {
-	/*
-	 * Force the white icon, independent from white/dark mode selection,
-	 * because those icons are presented on our black calling-screen.
-	 */
-	&.icon-menu-people {
-		background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1, false));
-	}
-	&.icon-fullscreen {
-		background-image: url(icon-color-path('fullscreen', 'actions', 'fff', 1, true));
-	}
-
-	/* ".force-icon-white-in-call" can be combined with ".icon-shadow" just like
-	 * ".icon-white". */
-	&.icon-shadow {
-		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-	}
-}
-
-/* Use white icon for the app navigation toggle when in a call; this can not be
- * integrated above because the navigation toggle is created by the core and
- * does not include the Talk-specific "force-icon-white-in-call" CSS class. */
-#app-content.incall .icon-menu,
-#app-content.screensharing .icon-menu {
-	background-image: url(icon-color-path('menu', 'actions', 'fff', 1, true));
-	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-}
-
-#video-fullscreen {
-	position: absolute;
-	top: 44px;
-	right: 0;
-	z-index: 90;
-}
-
-#video-fullscreen,
-#app-sidebar-trigger {
-	background-color: transparent;
-	border: none;
-	margin: 0 10px 0 0;
-	width: 44px;
-	height: 44px;
-}
-
-
-
-/* Fullscreen handling */
-
-/* No switching between rooms in fullscreen, focus on the current call. */
-#content:-webkit-full-screen #app-navigation-toggle {
-	display: none !important;
-}
-#content:-moz-full-screen #app-navigation-toggle {
-	display: none !important;
-}
-#content:-ms-fullscreen #app-navigation-toggle {
-	display: none !important;
-}
-#content:fullscreen #app-navigation-toggle {
-	display: none !important;
-}
-
-#content:-webkit-full-screen #app-navigation {
-	display: none;
-}
-#content:-moz-full-screen #app-navigation {
-	display: none;
-}
-#content:-ms-fullscreen #app-navigation {
-	display: none;
-}
-#content:fullscreen #app-navigation {
-	display: none;
-}
-
-#content:-webkit-full-screen #app-content {
-	margin-left: 0;
-}
-#content:-moz-full-screen #app-content {
-	margin-left: 0;
-}
-#content:-ms-fullscreen #app-content {
-	margin-left: 0 !important;
-}
-#content:fullscreen #app-content {
-	margin-left: 0;
-}
-
-#content:-ms-fullscreen #app-sidebar {
-	/* The sidebar height is unset in Talk to override the "100vh-50px" set in
-	 * server and force it to get the full height in fullscreen mode. However,
-	 * IE11 does not support "unset", so the height needs to be explicitly set
-	 * to 100%. */
-	height: 100%;
-	/* Remove the space added when IE is used to not overlap with the header. */
-	top: 0;
-}
-
-/* Set the background of the content to the same colour as the app content and
- * the app sidebar to prevent a black background from appearing when the sidebar
- * is shown or hidden.
- * During a call the background of the app content is black, but as the
- * background of the content has the same colour of the sidebar and is a
- * placeholder on its position it looks acceptable. */
-#content:-webkit-full-screen {
-	background-color: var(--color-main-background);
-}
-#content:-moz-full-screen {
-	background-color: var(--color-main-background);
-}
-#content:-ms-fullscreen {
-	background-color: var(--color-main-background);
-}
-#content:fullscreen {
-	background-color: var(--color-main-background);
-}
-
-
-.localmediaerror h2 {
-	color: red;
-	font-weight: bold;
-}
-
-.localmediaerror .emptycontent-additional {
-	display: none;
-}
-
-#app-navigation .utils {
-	padding: 0;
-}
-#app-navigation .utils .action {
-	display: inline-block;
-	padding: 22px;
-	cursor: pointer;
-	opacity: .3;
-}
-
-#app-navigation .app-navigation-entry-menu li {
-	width: auto !important;
-	float: inherit;
-}
-
-#app-navigation .app-navigation-entry-menu li.active {
-	box-shadow: inset 4px 0 var(--color-primary);
-	margin-left: -1px;
-	padding-left: 1px;
-}
-
-.room-moderation-button .menu li div.separator,
-#app-navigation .app-navigation-entry-menu li div.separator {
-	border-bottom: 1px solid var(--color-border-dark);
-	margin: 0 10px;
-	width: 100%;
-}
-
-
-#app-navigation .app-navigation-entry-menu li button {
-	float: inherit !important;
-	margin: 0;
-	padding: 0;
-	width: 100% !important;
-	min-height: 44px;
-}
-
-#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-caption   {
-	font-weight: bold;
-	line-height: 44px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	padding: 0 36px 0 36px;
-	// !important to overwrite specific hover and focus
-	opacity: .7;
-	box-shadow: none !important;
-	user-select: none;
-	pointer-events: none;
-}
-
-#app-navigation .app-navigation-entry-menu input.first-option {
-	margin-top: 5px;
-}
-
-#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;
-	box-sizing: border-box;
-	width: 36px;
-}
-
-#app-navigation .app-navigation-entry-utils-menu-button {
-	display: inline-block;
-}
-
-/* The sidebar wrapper contains the trigger for the sidebar and the sidebar
- * itself placed in columns. To prevent the trigger from taking up space for the
- * app content the trigger width is removed from the wrapper by pushing its left
- * margin. */
-#app-sidebar-wrapper {
-	display: flex;
-	margin-left: -44px;
-}
-
-#app-sidebar-trigger {
-	/* Higher than the z-index of the app-content */
-	z-index: 1050;
-	cursor: pointer;
-}
-
-/* Override server definitions to ensure that the sidebar is vertically
- * stretched, as the header is part of the flex layout and its height does not
- * need to be removed from the sidebar (specially in fullscreen mode where there
- * is no header). */
-#app-sidebar {
-	position: static;
-	height: unset;
-	top: 0;
-}
-
-/* The server sets the position of the sidebar as fixed when IE is used, so it
- * needs to be pulled down to not overlap with the header. */
-.ie #app-sidebar {
-	top: $header-height;
-}
-
-@include icon-black-white('menu-people', 'spreed', 1);
-@include icon-black-white('no-password', 'spreed', 1);
-@include icon-black-white('share-window', 'spreed', 1);
-@include icon-black-white('lobby', 'spreed', 1);
-
-#app-sidebar .close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: 22px;
-	opacity: .3;
-	/* Higher index than the trigger to hide it when the sidebar is open */
-	z-index: 20;
-}
-
-#app-sidebar .close:hover,
-#app-sidebar .close:focus {
-	opacity: 1;
-}
-
-/* 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 {
-	display: inline-block;
-}
-
-/* START: move padding fixes and icons-for-tabs capability into core */
-.tabHeaders {
-	display: flex;
-	margin-top: 0;
-	margin-bottom: 10px;
-	min-height: 44px;
-
-	/* Prevent the chat view from vertically compressing the tab headers */
-	flex-shrink: 0;
-}
-
-.tabHeaders .tabHeader {
-	flex-basis: 50%;
-	flex-grow: 0;
-	padding: 12px;
-	text-align: center;
-	border-bottom: 1px solid var(--color-border);
-	margin-bottom: 0;
-
-	.icon, a {
-		color: var(--color-main-text);
-		opacity: .5;
-	}
-}
-
-.tabHeaders .tabHeader.selected,
-.tabHeaders .tabHeader:hover,
-.tabHeaders .tabHeader:focus {
-	.icon, a {
-		opacity: 1;
-	}
-}
-/* END: move padding fixes and icons-for-tabs capability into core */
-
-/* In Talk clicking on the selected tab header has no effect, so the pointer
- * cursor should not be used. */
-.tabHeaders .tabHeader.selected,
-.tabHeaders .tabHeader.selected .icon,
-.tabHeaders .tabHeader.selected a {
-	cursor: default;
-}
-
-#app-sidebar.hidden {
-	display: none !important;
-}
-
-.participantWithList .participant-moderator-indicator {
-	color: var(--color-text-maxcontrast);
-	font-weight: 300;
-	padding-left: 5px;
-}
-
-.participantWithList .icon {
-	width: 16px;
-	display: inline-block;
-	opacity: .4;
-	margin-left: 5px;
-	margin-bottom: -4px;
-
-	&.hidden {
-		display: none;
-	}
-}
-
-.participantWithList .participant-offline {
-	& > span {
-		color: var(--color-text-maxcontrast);
-	}
-	.avatar {
-		opacity: .4;
-	}
-}
-
-.participantWithList > li {
-	position: relative;
-	width: 100%;
-	box-sizing: border-box;
-}
-
-.participantWithList > li > span {
-	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: no-repeat 14px center;
-}
-
-.participantWithList > li > span > .avatar-wrapper {
-	position: absolute;
-	top: 6px;
-	left: 6px;
-
-	&:focus,
-	&:active {
-		border: 1px solid var(--color-border-dark);
-		border-radius: 50%;
-
-		/* Separate the border slightly from the avatar to make it more
-		 * noticeable. */
-		padding: 3px;
-
-		/* Compensate position for the border and the increased size. */
-		top: 2px;
-		left: 2px;
-	}
-}
-
-body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.guestUser) {
-	.avatar,
-	.avatar img {
-		cursor: pointer;
-	}
-}
-
-
-
-/**
- * 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 li {
-	width: 44px;
-	height: 44px;
-}
-
-.participantWithList .participant-entry-utils button,
-.participantWithList .participant-entry-utils button + .icon-loading-small {
-	height: 100%;
-	width: 100%;
-	margin: 0;
-	box-shadow: none;
-}
-
-.participantWithList .participant-entry-utils-menu-button button {
-	border: 0;
-	opacity: .5;
-	background-color: transparent;
-}
-
-.participantWithList .participant-entry-utils-menu-button button:hover,
-.participantWithList .participant-entry-utils-menu-button button:focus {
-	opacity: 1;
-}
-
-/**
- * Sidebar details view
- */
-.detailCallInfoContainer,
-.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;
-		}
-	}
-
-	.room-name-container {
-		display: flex;
-
-		/* Prevent the room name from overlapping the button to close the
-		 * sidebar. */
-		margin-right: 29px;
-
-		a {
-			opacity: .6;
-
-			&:hover,
-			&:focus,
-			&:active {
-				opacity: 1;
-			}
-
-			/* The container height is 42px (line height of 30px and bottom
-			 * margin of 12px, both defined for h2 in the server), so clear the
-			 * extra height of the link below the icon; this limits the
-			 * clickable area to 44x44px, as otherwise it was too near the call
-			 * button. */
-			margin-bottom: 5px;
-
-			.icon {
-				display: block;
-
-				width: 44px;
-				height: 44px;
-
-				background-size: 24px;
-
-				/* Pull up the icon slightly to align it vertically with the
-				 * label, which has a line height of 30px (defined in the
-				 * server). */
-				margin-top: -7px;
-			}
-		}
-	}
-
-	.room-name {
-		display: block;
-
-		flex-grow: 1;
-
-		/* Limit the room name to the container width and prevent it from
-		 * wrapping the full label when using a flex display; this is needed for
-		 * the edit button and the ellipsis in the name to work as expected. */
-		overflow: hidden;
-
-		.label-wrapper {
-			.label {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-
-			.edit-button {
-				/* Use the same bottom margin as h2 (defined in the server) to
-				 * align the button vertically with the label. */
-				margin-bottom: 12px;
-			}
-		}
-
-		.input-wrapper {
-			position: relative;
-
-			.username {
-				width: 100%;
-				margin: 4px 0 4px 0 !important;
-				font-size: 15px;
-				font-weight: 300;
-				text-overflow: ellipsis;
-			}
-
-			input[type="text"] {
-				padding-right: 44px;
-			}
-
-			.icon-confirm,
-			.icon-loading-small {
-				top: 4px;
-				right: 0;
-
-				padding: 12px 21px;
-				margin: 0;
-			}
-		}
-	}
-
-	.guest-name p {
-		display: inline-block;
-		padding: 9px 0;
-	}
-
-	.call-controls-container {
-		display: flex;
-		align-items: center;
-
-		.call-button {
-			flex-grow: 0;
-			flex-basis: 50%;
-
-			.join-call,
-			.leave-call {
-				width: 100%;
-				padding: 12px;
-			}
-
-			.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;
-				}
-			}
-		}
-	}
-
-	.room-moderation-button {
-		/* Needed for proper positioning of the menu. */
-		position: relative;
-
-		/* Position the button to the right end of its flex parent. */
-		margin-left: auto;
-	}
-
-	.clipboard-button button {
-		display: flex;
-		align-items: center;
-
-		> span {
-			cursor: pointer;
-
-			/* Override reduced opacity set for button icons in server, as the
-			* button is already dimmed. */
-			opacity: 1;
-		}
-
-		/* Override appearance set for button text in server, as this button has
-		 * no background. */
-		padding: 0;
-
-		> span {
-			color: var(--color-main-text);
-			font-weight: normal;
-		}
-	}
-
-	.clipboard-button button,
-	.room-moderation-button .button {
-		background-color: transparent;
-		border: none;
-		margin: 0;
-		opacity: .5;
-
-		&:hover,
-		&:focus,
-		&:active {
-			opacity: 1;
-		}
-	}
-
-	.clipboard-button .icon,
-	.room-moderation-button .button {
-		width: 44px;
-		height: 44px;
-	}
-
-	.room-moderation-button .menu {
-		/* Values copied from apps.scss in server. */
-		$popoveritem-height: 44px;
-		$popovericon-size: 16px;
-		$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
-
-		/* The server sets a top/bottom margin to forms and inputs of the
-		 * first/last item in a menu, but that misaligns the left icon; this
-		 * sets the top/bottom margin to the whole item instead of only to the
-		 * forms or inputs. */
-		li:first-of-type {
-			> .menuitem.password-option {
-
-				margin-top: $outter-margin - 2px; // minus the input margin
-
-				> form, > input {
-					margin-top: 0;
-				}
-			}
-		}
-		li:last-of-type {
-			> .menuitem.password-option {
-
-				margin-bottom: $outter-margin - 2px; // minus the input margin
-
-				> form, > input {
-					margin-bottom: 0;
-				}
-			}
-		}
-
-		li {
-			> .separator {
-
-				margin-top: $outter-margin - 2px; // minus the input margin
-			}
-		}
-
-		li.item-has-details {
-			flex-direction: column;
-
-			> .menuitem-details {
-				/* Show it closer to its menu item, but further away than the
-				 * following menu item. */
-				margin-top: -($outter-margin - 2px); // minus the input margin
-				margin-bottom: $outter-margin - 2px; // minus the input margin
-
-				/* Lower size and opacity than regular menu items. */
-				font-size: small;
-				opacity: 0.5;
-
-				/* Padding based on the icon. */
-				padding-left: $popoveritem-height;
-			}
-		}
-
-		.menuitem.caption,
-		.menuitem.caption > span {
-			/* Override rule for menu items from server, as in this case the
-			 * caption is not clickable. */
-			cursor: default;
-		}
-
-		.menuitem.caption {
-			font-weight: bold;
-
-			&:hover,
-			&:focus,
-			&:active {
-				opacity: 0.7 !important;
-			}
-		}
-
-		.menuitem.password-option,
-		.menuitem.lobby-timer-option {
-			/* Override rule for menu items from server, as in this case
-			 * only the button in the password field is clickable, so the
-			 * pointer cursor should not be used for the whole item. */
-			cursor: default;
-
-			form {
-				position: relative;
-
-				.icon-confirm,
-				.icon-loading-small {
-					/* Inputs in menu items do not have a right margin, so
-					 * it does not need to be compensated. */
-					right: 0;
-				}
-
-				.icon-confirm {
-					/* Needed to override an important rule set in the
-					 * server. */
-					background-color: transparent !important;
-				}
-			}
-		}
-	}
-
-	/* 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;
-		}
-	}
-}
-
-/**
- * Cascade parent element height to the chat view in the sidebar to limit the
- * vertical scroll bar only to the list of messages. Otherwise, the vertical
- * scroll bar would be shown for the whole sidebar and everything would be
- * moved when scrolling to see overflown messages.
- *
- * The list of messages should stretch to fill the available space at the bottom
- * of the right sidebar, so the height is cascaded using flex boxes.
- *
- * It is horrible, I know (but better than using JavaScript ;-) ). Please
- * improve it if you know how :-)
- */
-#app-sidebar {
-	display: flex;
-	flex-direction: column;
-}
-
-#app-sidebar .tabs {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	flex-grow: 1;
-}
-
-#app-sidebar .tabsContainer {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	flex-grow: 1;
-}
-
-#app-sidebar .tab {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	flex-grow: 1;
-}
-
-#app-sidebar #chatView {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	flex-grow: 1;
-}
-
-#app-sidebar .comments {
-	overflow-y: auto;
-
-	/* Needed for proper calculation of comment positions in the scrolling
-	   container (as otherwise the comment position is calculated with respect
-	   to the closest ancestor with a relative position) */
-	position: relative;
-}
-
-/**
- * Place the scroll bar of the message list on the right edge of the sidebar,
- * but keeping the padding of the tab view.
- *
- * The padding must be set on the left too to ensure that the contacts menu
- * shown when clicking on an author name does not overflow the tab (as it would
- * be hidden).
- *
- * The bottom padding is removed to extend the chat view to the bottom edge of
- * the sidebar.
- */
-#app-sidebar .tab-chat {
-	padding-left: 0;
-	padding-right: 0;
-	padding-bottom: 0;
-}
-
-#app-sidebar #chatView .newCommentRow,
-#app-sidebar #chatView .comments {
-	padding-left: 15px;
-	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. */
-	left: 15px;
-	right: 15px;
-}
-
-#app-sidebar #chatView .newCommentForm.with-add-button {
-	/* Make room to show the "Add" button if needed when chat is shown in the
-	 * sidebar. */
-	margin-right: 44px;
-}
-
-/**
- * Limiting the scroll bar in the sidebar to the list of chat messages causes
- * the scroll bar to be removed from the whole sidebar in other tabs too.
- * Therefore, the scroll bars must be explicitly enabled in the other tab
- * contents that need them.
- */
-#app-sidebar #participantsTabView {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-#app-sidebar .participantWithList {
-	overflow-y: auto;
-	padding-top: 8px;
-}
-
-#app-sidebar .participantWithList .participant:last-child {
-	/* Add room for the popovermenu on last user */
-	padding-bottom: 94px;
-}
-
-/**
- * Place the scroll bar of the participants list on the right edge of the
- * sidebar, but keeping the padding of the tab view.
- *
- * The bottom padding is removed to extend the participant view to the bottom
- * edge of the sidebar.
- */
-#app-sidebar .tab-participants {
-	padding-right: 0;
-	padding-bottom: 0;
-}
-
-/* Form needs margin, participant list needs padding
- * So the form has margin from the right side, but the scroll bar of the
- * participant list is directly on the right.
- */
-#app-sidebar #participantsTabView form {
-	margin-right: 15px;
-}
-#app-sidebar #participantsTabView .participantWithList {
-	padding-right: 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;
-}
-
-/**
- * Dark-Theme fixes
- */
-// We always want to use the white icons, this is why we don't use var(--color-white) here.
-.avatar.icon {
-	&.icon-public {
-		background-image: url(icon-color-path('public', 'actions', 'fff', 1, true));
-	}
-	&.icon-contacts {
-		background-image: url(icon-color-path('contacts', 'places', 'fff', 1, true));
-	}
-	&.icon-password {
-		background-image: url(icon-color-path('password', 'actions', 'fff', 1, true));
-	}
-	&.icon-file {
-		background-image: url(icon-color-path('text', 'filetypes', 'fff', 1, true));
-	}
-	&.icon-mail {
-		background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true));
-	}
-}
-
-#app-navigation > ul > li > a:first-child {
-	img {
-		filter: none !important;
-	}
-}