Import CSS for calls

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

4 files changed, 535 insertions, 442 deletions

diff --git a/css/files.scss b/css/files.scss
index 2d76d3300..c091b3762 100644
--- a/css/files.scss
+++ b/css/files.scss
@@ -68,20 +68,20 @@
 }
 
 /* Video in Talk sidebar */
-.talkCallInfoView #call-container-wrapper #videos {
+.talkCallInfoView #call-container-wrapper #call-container #videos {
 	position: absolute;
 
 	flex-grow: 1;
 }
 
-.talkCallInfoView #call-container-wrapper .videoContainer {
+.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 .videoContainer.promoted video {
+.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
@@ -90,7 +90,7 @@
 	height: auto;
 }
 
-.talkCallInfoView #call-container-wrapper .nameIndicator {
+.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. */
@@ -98,15 +98,26 @@
 }
 
 /* Screensharing in Talk sidebar */
-.talkCallInfoView #call-container-wrapper #screens {
-	display: none;
+.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 #videos .videoContainer:not(.promoted) video {
+
+.talkCallInfoView #call-container #videos .videoContainer:not(.promoted) video {
 	/* Make the unpromoted videos smaller to not overlap too much the promoted
 	 * video */
 	max-height: 100px;
@@ -114,16 +125,32 @@
 
 /* The avatars are requested with a size of 128px, so reduce it to not overlap
  * too much the promoted video */
-.talkCallInfoView #videos .videoContainer:not(.promoted) .avatar,
-.talkCallInfoView #videos .videoContainer:not(.promoted) .avatar img {
+.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 .participants-1 .videoView,
-.talkCallInfoView .participants-2 .videoView {
+.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;
@@ -133,21 +160,21 @@
 
 
 
-.talkCallInfoView .nameIndicator {
+.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 .participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
+.talkCallInfoView #call-container.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
 	/* Reduce padding to bring the name closer to the bottom */
 	padding: 3px 35%;
 }
 
 
 
-.talkCallInfoView .mediaIndicator {
+.talkCallInfoView #call-container .mediaIndicator {
 	/* Move the media indicator closer to the bottom */
 	bottom: 16px;
 }
diff --git a/css/publicshare.scss b/css/publicshare.scss
index e8cc68bb8..f1d68635a 100644
--- a/css/publicshare.scss
+++ b/css/publicshare.scss
@@ -58,6 +58,28 @@
 
 
 
+.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;
@@ -72,8 +94,8 @@
 	overflow-y: auto;
 	z-index: 500;
 
-	transition: 300ms width ease-in-out,
-				300ms min-width ease-in-out;
+	transition: var(--animation-quick) width ease-in-out,
+				var(--animation-quick) min-width ease-in-out;
 }
 
 #talk-sidebar.disappear {
@@ -91,6 +113,33 @@
 	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;
 
@@ -146,11 +195,11 @@
 }
 
 /* Video in Talk sidebar */
-#talk-sidebar #call-container-wrapper #videos {
+#talk-sidebar #call-container-wrapper #call-container #videos {
 	flex-grow: 1;
 }
 
-#talk-sidebar #call-container-wrapper .videoContainer.promoted video {
+#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
@@ -160,13 +209,24 @@
 }
 
 /* Screensharing in Talk sidebar */
-#talk-sidebar #call-container-wrapper #screens {
-	display: none;
+#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 #videos .videoContainer:not(.promoted) video {
+
+#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;
@@ -174,14 +234,30 @@
 
 /* The avatars are requested with a size of 128px, so reduce it to not overlap
  * too much the promoted video */
-#talk-sidebar #videos .videoContainer:not(.promoted) .avatar,
-#talk-sidebar #videos .videoContainer:not(.promoted) .avatar img {
+#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;
-}
-
-#talk-sidebar .participants-1 .videoView,
-#talk-sidebar .participants-2 .videoView {
+	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;
@@ -189,19 +265,19 @@
 	z-index: 1;
 }
 
-#talk-sidebar .nameIndicator {
+#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 .participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
+#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 .mediaIndicator {
+#talk-sidebar #call-container .mediaIndicator {
 	/* Move the media indicator closer to the bottom */
 	bottom: 16px;
 }
diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss
index 2e5cee455..b845a0baf 100644
--- a/css/publicshareauth.scss
+++ b/css/publicshareauth.scss
@@ -115,20 +115,20 @@ input#request-password-button:disabled ~ .icon {
 }
 
 /* Video in Talk sidebar */
-#talk-sidebar #videos {
+#talk-sidebar #call-container #videos {
 	position: relative;
 
 	flex-grow: 1;
 }
 
-#talk-sidebar .videoContainer {
+#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 .videoContainer.promoted video {
+#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
@@ -137,35 +137,13 @@ input#request-password-button:disabled ~ .icon {
 	height: auto;
 }
 
-#talk-sidebar .nameIndicator {
+#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;
 }
 
-/* Screensharing in Talk sidebar */
-#talk-sidebar #call-container.screensharing #videos .videoContainer video {
-	max-height: 200px;
-	background-color: transparent;
-	box-shadow: 0;
-}
-
-#talk-sidebar #call-container.screensharing #screens {
-	position: absolute;
-	width: 100%;
-	height: calc(100% - 200px);
-	top: 0;
-	background-color: transparent;
-}
-
-#talk-sidebar #call-container.screensharing .screenContainer {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-
 /**
  * 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
diff --git a/css/video.scss b/css/video.scss
index bd06645b9..8abe3e222 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -1,479 +1,491 @@
-#videos {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	display: -webkit-box;
-	display: -moz-box;
-	display: -ms-flexbox;
-	display: -webkit-flex;
-	display: flex;
-	-webkit-justify-content: space-around;
-	justify-content: space-around;
-	-webkit-align-items: flex-end;
-	align-items: flex-end;
-}
+#call-container {
+	#videos {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: -webkit-box;
+		display: -moz-box;
+		display: -ms-flexbox;
+		display: -webkit-flex;
+		display: flex;
+		-webkit-justify-content: space-around;
+		justify-content: space-around;
+		-webkit-align-items: flex-end;
+		align-items: flex-end;
+	}
 
-.videoContainer,
-#app-content.screensharing .videoContainer {
-	position: relative;
-	width: 100%;
-	padding: 0 2%;
-	-webkit-box-flex: auto;
-	-moz-box-flex: auto;
-	-webkit-flex: auto;
-	-ms-flex: auto;
-	flex: auto;
-	z-index: 2;
-	display: flex;
-	justify-content: center;
-	align-items: flex-end;
-}
+	#videos.hidden {
+		display: none;
+	}
 
-.videoContainer.hidden,
-#app-content.screensharing .videoContainer.hidden {
-	display: none;
-}
+	.videoContainer,
+	/* Force regular rules on "big speaker video" when screensharing is enabled. */
+	&.participants-1.screensharing .videoContainer,
+	&.participants-2.screensharing .videoContainer {
+		position: relative;
+		width: 100%;
+		padding: 0 2%;
+		-webkit-box-flex: auto;
+		-moz-box-flex: auto;
+		-webkit-flex: auto;
+		-ms-flex: auto;
+		flex: auto;
+		z-index: 2;
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+	}
 
-#app-content.screensharing .videoContainer {
-	max-height: 200px;
-}
+	.videoContainer.hidden,
+	&.participants-1.screensharing .videoContainer.hidden,
+	&.participants-2.screensharing .videoContainer.hidden {
+		display: none;
+	}
 
-video {
-	z-index: 0;
-	max-height: 100%;
-	/* default filter for slightly better look */
-	-webkit-filter: contrast(1.1) saturate(1.1) sepia(.1);
-	filter: contrast(1.1) saturate(1.1) sepia(.1);
-	vertical-align: top; /* fix white line below video */
-}
+	&.screensharing .videoContainer {
+		max-height: 200px;
+	}
 
-#app-content.screensharing .videoContainer video {
-	max-height: 200px;
-	background-color: transparent;
-	box-shadow: none;
-}
+	video {
+		z-index: 0;
+		max-height: 100%;
+		/* default filter for slightly better look */
+		-webkit-filter: contrast(1.1) saturate(1.1) sepia(.1);
+		filter: contrast(1.1) saturate(1.1) sepia(.1);
+		vertical-align: top; /* fix white line below video */
+	}
 
-#screens video {
-	width: 100%;
-	-webkit-filter: none;
-	filter: none;
-}
+	&.screensharing .videoContainer video {
+		max-height: 200px;
+		background-color: transparent;
+		box-shadow: none;
+	}
 
-#videos .videoContainer.not-connected {
-	video,
-	.avatar {
-		opacity: 0.5;
+	#screens video {
+		width: 100%;
+		-webkit-filter: none;
+		filter: none;
 	}
-}
 
-#videos .videoContainer:not(.promoted) video {
-	max-height: 200px;
-	max-width: 100%;
-	background-color: transparent;
-	border-radius: $border-radius $border-radius 0 0;
-	box-shadow: 0 0 15px $color-box-shadow;
-}
+	#videos .videoContainer.not-connected {
+		video,
+		.avatardiv {
+			opacity: 0.5;
+		}
+	}
 
-#videos .videoContainer .avatar {
-	box-shadow: 0 0 15px $color-box-shadow;
-}
+	#videos .videoContainer:not(.promoted) video {
+		max-height: 200px;
+		max-width: 100%;
+		background-color: transparent;
+		border-radius: $border-radius $border-radius 0 0;
+		box-shadow: 0 0 15px $color-box-shadow;
+	}
 
-.participants-1 #videos .videoContainer video,
-.participants-2 #videos .videoContainer video {
-	padding: 0;
-}
+	#videos .videoContainer .avatardiv {
+		box-shadow: 0 0 15px $color-box-shadow;
+	}
 
-.videoContainer .avatar-container {
-	display: flex;
-	margin-bottom: 50px;
-}
-.videoContainer .avatar-container.hidden {
-	display: none;
-}
-.videoContainer .avatar-container .avatar {
-	display: inline-block;
-}
-.videoContainer.promoted .avatar-container {
-	top: 30%;
-}
-.videoContainer.promoted .avatar-container + .nameIndicator {
-	display: none;
-}
+	&.participants-1 #videos .videoContainer video,
+	&.participants-2 #videos .videoContainer video {
+		padding: 0;
+	}
 
-.videoContainer.promoted .mediaIndicator {
-	display: none !important;
-}
+	.videoContainer .avatar-container {
+		position: absolute;
+		bottom: 44px;
+		left: 0;
+		width: 100%;
+	}
 
+	.videoContainer .avatar-container .avatardiv--unknown {
+		// Force grey background for guest avatars
+		background-color: #b9b9b9 !important;
+	}
 
+	/* Text avatars need to be forced to 128px, as imageplaceholder() overrides
+	 * the given size with the actual height of the element it was called on, so
+	 * the text avatar may have any hardcoded height. Note that this does not
+	 * apply to regular image avatars, as in that case they are always requested
+	 * with a size of 128px. */
+	.videoContainer .avatar-container .avatardiv {
+		width: 128px !important;
+		height: 128px !important;
+		line-height: 128px !important;
+		/* imageplaceholder() sets font-size to "height * 0.55" */
+		font-size: 70.4px !important;
+	}
 
+	.videoContainer .avatar-container .avatardiv {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.videoContainer.promoted .avatar-container {
+		top: 30%;
+	}
+	.videoContainer.promoted .avatar-container + .nameIndicator {
+		display: none;
+	}
 
-#shareRoomContainer {
-	position: relative;
-}
-#shareRoomInput {
-	width: 250px;
-	padding-right: 32px;
-	text-overflow: ellipsis;
-}
-#shareRoomClipboardButton {
-	position: absolute;
-	right: 0;
-	padding: 18px;
-	background-size: 16px !important;
-	height: 16px !important;
-	width: 16px !important;
-	margin: 0 !important;
-	opacity: .8 !important;
-}
+	.videoContainer.promoted .mediaIndicator {
+		display: none !important;
+	}
 
-.participants-1:not(.screensharing) #emptycontent {
-	display: block !important;
-}
 
-#screensharing-menu {
-	bottom: 44px;
-	left: calc(50% - 40px);
-	right: initial;
-	color: initial;
-	text-shadow: initial;
-	font-size: 13px;
-}
 
-#screensharing-menu.app-navigation-entry-menu:after {
-	top: 100%;
-	left: calc(50% - 5px);
-	border-top-color: #fff;
-	border-bottom-color: transparent;
-}
 
+	&.participants-1:not(.screensharing) ~ #emptycontent {
+		display: block !important;
+	}
 
+	#screensharing-menu {
+		bottom: 44px;
+		left: calc(50% - 40px);
+		right: initial;
+		color: initial;
+		text-shadow: initial;
+		font-size: 13px;
+	}
 
+	#screensharing-menu.app-navigation-entry-menu:after {
+		top: 100%;
+		left: calc(50% - 5px);
+		border-top-color: #fff;
+		border-bottom-color: transparent;
+	}
 
-/* big speaker video */
-.participants-1 .videoContainer,
-.participants-2 .videoContainer,
-.videoContainer.promoted {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	left: 0;
-	top: 0;
-	z-index: 1;
-}
-.videoContainer.promoted video,
-.participants-2 .videoContainer:not(.videoView) video {
-	position: absolute;
-	width: initial;
-	height: 100%;
-	left: 50%;
-	top: 50%;
-	transform: translateY(-50%) translateX(-50%);
-}
 
-/* own video */
-.participants-1 .videoView,
-.participants-2 .videoView {
-	position: absolute;
-	width: 22%;
-	min-width: 200px;
-	overflow:visible;
-	right: 0;
-	bottom: 0;
-	top: initial;
-	left: initial;
-	z-index: 10;
-}
-@media only screen and (max-width: 768px) {
-	.participants-1 .videoView,
-	.participants-2 .videoView {
-		max-height: 35%;
+
+
+	/* big speaker video */
+	&.participants-1 .videoContainer,
+	&.participants-2 .videoContainer,
+	.videoContainer.promoted {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		left: 0;
+		top: 0;
+		z-index: 1;
+	}
+	.videoContainer.promoted video,
+	&.participants-2 .videoContainer:not(.videoView) video {
+		position: absolute;
+		width: initial;
+		height: 100%;
+		left: 50%;
+		top: 50%;
+		transform: translateY(-50%) translateX(-50%);
 	}
-}
-.participants-1 .videoView video,
-.participants-2 .videoView video {
-	position: absolute;
-	max-height: 100% !important;
-	bottom: 0;
-	border-top-right-radius: 3px;
-	right: 0;
-}
 
-.videoContainer.promoted,
-#app-content.incall,
-#app-content.screensharing {
-	background-color: #000;
-}
+	/* own video */
+	&.participants-1 .videoView,
+	&.participants-2 .videoView {
+		position: absolute;
+		width: 22%;
+		min-width: 200px;
+		overflow:visible;
+		right: 0;
+		bottom: 0;
+		top: initial;
+		left: initial;
+		z-index: 10;
+	}
+	@media only screen and (max-width: 768px) {
+		&.participants-1 .videoView,
+		&.participants-2 .videoView {
+			max-height: 35%;
+		}
+	}
+	&.participants-1 .videoView video,
+	&.participants-2 .videoView video {
+		position: absolute;
+		max-height: 100% !important;
+		bottom: 0;
+		border-top-right-radius: 3px;
+		right: 0;
+	}
 
+	.videoContainer.promoted {
+		background-color: #000;
+	}
 
 
 
-#app-content.screensharing #screens {
-	position: absolute;
-	width: 100%;
-	height: calc(100% - 200px);
-	top: 0;
-	overflow-y: scroll;
-	background-color: transparent;
-}
 
-#app-content.screensharing .screenContainer {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
+	&.screensharing #screens {
+		position: absolute;
+		width: 100%;
+		height: calc(100% - 200px);
+		top: 0;
+		background-color: transparent;
+	}
 
+	&.screensharing .screenContainer {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
 
 
 
-.nameIndicator {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	padding: 12px;
-	color: #fff;
-	text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5);
-	width: 100%;
-	text-align: center;
-	font-size: 20px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
 
-.videoView .nameIndicator {
-	padding: 0;
-	overflow: visible;
-}
+	.nameIndicator {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		padding: 12px;
+		color: #fff;
+		text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5);
+		width: 100%;
+		text-align: center;
+		font-size: 20px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
-.participants-1 .videoView .nameIndicator,
-.participants-2 .videoView .nameIndicator {
-	left: initial;
-	right: 0;
-}
+	.videoView .nameIndicator {
+		padding: 0;
+		overflow: visible;
+	}
 
-.participants-1 .videoView .avatar-container,
-.participants-2 .videoView .avatar-container {
-	left: initial;
-	right: 0;
-}
+	&.participants-1 .videoView .nameIndicator,
+	&.participants-2 .videoView .nameIndicator {
+		left: initial;
+		right: 0;
+	}
 
-/* ellipsize name in 1on1 calls */
-.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
-	padding: 12px 35%;
-}
+	&.participants-1 .videoView .avatar-container,
+	&.participants-2 .videoView .avatar-container {
+		left: initial;
+		right: 0;
+	}
 
+	/* ellipsize name in 1on1 calls */
+	&.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
+		padding: 12px 35%;
+	}
 
 
 
-.nameIndicator button {
-	background-color: transparent;
-	border: none;
-	margin: 0;
-	width: 44px;
-	height: 44px;
-}
 
-.nameIndicator button {
-	background-size: 24px;
-}
+	.nameIndicator button {
+		background-color: transparent;
+		border: none;
+		margin: 0;
+		width: 44px;
+		height: 44px;
+	}
 
-.nameIndicator button.audio-disabled,
-.nameIndicator button.video-disabled,
-.nameIndicator button.screensharing-disabled {
-	opacity: .7;
-}
+	.nameIndicator #screensharing-menu button {
+		width: 100%;
+		height: auto;
+	}
 
-.nameIndicator button.audio-disabled:not(.no-audio-available),
-.nameIndicator button.video-disabled:not(.no-video-available),
-.nameIndicator button.screensharing-disabled {
-	&:hover,
-	&:focus {
-		opacity: 1;
+	.nameIndicator button {
+		background-size: 24px;
 	}
-}
 
-.nameIndicator button.no-audio-available,
-.nameIndicator button.no-video-available {
-	opacity: .7;
-	cursor: not-allowed;
-}
+	.nameIndicator button.audio-disabled,
+	.nameIndicator button.video-disabled,
+	.nameIndicator button.screensharing-disabled {
+		opacity: .7;
+	}
 
-.nameIndicator button.no-audio-available:active,
-.nameIndicator button.no-video-available:active {
-	background-color: transparent;
-}
+	.nameIndicator button.audio-disabled:not(.no-audio-available),
+	.nameIndicator button.video-disabled:not(.no-video-available),
+	.nameIndicator button.screensharing-disabled {
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
 
-.mediaIndicator {
-	position: absolute;
-	width: 100%;
-	bottom: 44px;
-	left: 0;
-	background-size: 22px;
-	text-align: center;
-}
+	.nameIndicator button.no-audio-available,
+	.nameIndicator button.no-video-available {
+		opacity: .7;
+		cursor: not-allowed;
+	}
 
-.muteIndicator,
-.hideRemoteVideo,
-.screensharingIndicator,
-.iceFailedIndicator {
-	position: relative;
-	display: inline-block;
-	background-color: transparent !important;
-	border: none;
-	width: 32px;
-	height: 32px;
-	background-size: 22px;
-
-	&.hidden {
-		display: none;
+	.nameIndicator button.no-audio-available:active,
+	.nameIndicator button.no-video-available:active {
+		background-color: transparent;
 	}
-}
 
-.muteIndicator.audio-on,
-.screensharingIndicator.screen-off,
-.iceFailedIndicator.not-failed {
-	display: none;
-}
+	.mediaIndicator {
+		position: absolute;
+		width: 100%;
+		bottom: 44px;
+		left: 0;
+		background-size: 22px;
+		text-align: center;
+	}
 
-.muteIndicator.audio-off,
-.hideRemoteVideo.icon-video-off {
-	opacity: .7;
-}
+	.muteIndicator,
+	.hideRemoteVideo,
+	.screensharingIndicator,
+	.iceFailedIndicator {
+		position: relative;
+		display: inline-block;
+		background-color: transparent !important;
+		border: none;
+		width: 32px;
+		height: 32px;
+		background-size: 22px;
+
+		&.hidden {
+			display: none;
+		}
+	}
 
-.hideRemoteVideo.icon-video-off {
-	&:hover,
-	&:focus {
-		opacity: 1;
+	.muteIndicator.audio-on,
+	.muteIndicator:not(.audio-on):not(.audio-off),
+	.screensharingIndicator.screen-off,
+	.iceFailedIndicator.not-failed {
+		display: none;
 	}
-}
 
-.iceFailedIndicator {
-	opacity: .8 !important;
-}
+	.muteIndicator.audio-off,
+	.hideRemoteVideo.icon-video-off {
+		opacity: .7;
+	}
 
+	.hideRemoteVideo.icon-video-off {
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
 
+	.iceFailedIndicator {
+		opacity: .8 !important;
+	}
 
 
 
-#app-content:not(.incall):not(.screensharing) .force-icon-white-in-call,
-#call-container:not(.incall):not(.screensharing) .force-icon-white-in-call {
-	/*
-	 * Also force the white icons, when the video of the local participant is shown,
-	 * because the black icons are not visible on videos, especially when your camera is covered.
-	 */
-	&#hideVideo:not(.local-video-disabled) {
-		&.icon-video {
-			background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
-			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+
+
+	&:not(.incall):not(.screensharing) .force-icon-white-in-call {
+		/*
+		* Also force the white icons, when the video of the local participant is shown,
+		* because the black icons are not visible on videos, especially when your camera is covered.
+		*/
+		&#hideVideo:not(.local-video-disabled) {
+			&.icon-video {
+				background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
+				filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+			}
+			&.icon-video-off {
+				background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
+				filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+			}
 		}
-		&.icon-video-off {
-			background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
+		&#mute:not(.local-video-disabled) {
+			&.icon-audio {
+				background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
+				filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+			}
+			&.icon-audio-off {
+				background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
+				filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
+			}
+		}
+		&#screensharing-button:not(.local-video-disabled) {
+			background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
 			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 		}
 	}
-	&#mute:not(.local-video-disabled) {
+
+	&.incall .force-icon-white-in-call,
+	&.screensharing .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-audio {
 			background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
-			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 		}
 		&.icon-audio-off {
 			background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
-			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
 		}
-	}
-	&#screensharing-button:not(.local-video-disabled) {
-		background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
-		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
-	}
-}
-
-.incall .force-icon-white-in-call,
-.screensharing .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-audio {
-		background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
-	}
-	&.icon-audio-off {
-		background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
-	}
-	&.icon-video {
-		background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
-	}
-	&.icon-video-off {
-		background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
-	}
-	&.icon-screen {
-		background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
-	}
-	&.icon-screen-off {
-		background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
-	}
-	&.icon-error {
-		background-image: url(icon-color-path('error', 'actions', 'fff', 1, true));
-	}
+		&.icon-video {
+			background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
+		}
+		&.icon-video-off {
+			background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
+		}
+		&.icon-screen {
+			background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
+		}
+		&.icon-screen-off {
+			background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
+		}
+		&.icon-error {
+			background-image: url(icon-color-path('error', '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));
+		/* ".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));
+		}
 	}
-}
 
 
 
 
 
-#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
-#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
-	animation: pulse 1s;
-	animation-iteration-count: infinite;
-}
-
-@keyframes pulse {
-	0% {
-		opacity: 1;
+	#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
+	#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
+		animation: pulse 1s;
+		animation-iteration-count: infinite;
 	}
-	50% {
-		opacity: .3;
-	}
-	100% {
-		opacity: 1;
+
+	@keyframes pulse {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: .3;
+		}
+		100% {
+			opacity: 1;
+		}
 	}
-}
 
 
 
-#muteWrapper {
-	display: inline-block;
+	#muteWrapper {
+		display: inline-block;
 
-	/* Make the wrapper the positioning context of the volume indicator. */
-	position: relative;
-}
+		/* Make the wrapper the positioning context of the volume indicator. */
+		position: relative;
+	}
 
-#muteWrapper .volume-indicator {
-	position: absolute;
+	#muteWrapper .volume-indicator {
+		position: absolute;
 
-	width: 3px;
-	right: 0px;
+		width: 3px;
+		right: 0px;
 
-	/* The button height is 44px; the volume indicator button is 36px at
-	 * maximum, but its value will be changed based on the current volume; the
-	 * height change will reveal more or less of the gradient, which has
-	 * absolute dimensions and thus does not change when the height changes. */
-	height: 36px;
-	bottom: 4px;
+		/* The button height is 44px; the volume indicator button is 36px at
+		* maximum, but its value will be changed based on the current volume; the
+		* height change will reveal more or less of the gradient, which has
+		* absolute dimensions and thus does not change when the height changes. */
+		height: 36px;
+		bottom: 4px;
 
-	background: linear-gradient(0deg, green, yellow, red 36px);
+		background: linear-gradient(0deg, green, yellow, red 36px);
 
-	opacity: 0.7;
-}
+		opacity: 0.7;
+	}
 
-#muteWrapper .icon-audio-off + .volume-indicator {
-	background: linear-gradient(0deg, gray, white 36px);
+	#muteWrapper .icon-audio-off + .volume-indicator {
+		background: linear-gradient(0deg, gray, white 36px);
+	}
 }