Embed CSS style in CallView

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

1 files changed, 0 insertions, 421 deletions

diff --git a/css/video.scss b/css/video.scss
deleted file mode 100644
index a0d6d9a9e..000000000
--- a/css/video.scss
+++ /dev/null
@@ -1,421 +0,0 @@
-#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;
-	}
-
-	#videos.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;
-	}
-
-	.videoContainer.hidden,
-	&.participants-1.screensharing .videoContainer.hidden,
-	&.participants-2.screensharing .videoContainer.hidden {
-		display: none;
-	}
-
-	&.screensharing .videoContainer {
-		max-height: 200px;
-	}
-
-	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 video {
-		max-height: 200px;
-		background-color: transparent;
-		box-shadow: none;
-	}
-
-	#screens video {
-		width: 100%;
-		-webkit-filter: none;
-		filter: none;
-	}
-
-	#videos .videoContainer.not-connected {
-		video,
-		.avatardiv {
-			opacity: 0.5;
-		}
-	}
-
-	#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 .avatardiv {
-		box-shadow: 0 0 15px $color-box-shadow;
-	}
-
-	&.participants-1 #videos .videoContainer video,
-	&.participants-2 #videos .videoContainer video {
-		padding: 0;
-	}
-
-	.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;
-	}
-
-	.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;
-	}
-
-
-
-
-	/* 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%;
-		}
-	}
-	&.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;
-	}
-
-
-
-
-	&.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;
-	}
-
-	&.participants-1 .videoView .nameIndicator,
-	&.participants-2 .videoView .nameIndicator {
-		left: initial;
-		right: 0;
-	}
-
-	&.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 #screensharing-menu button {
-		width: 100%;
-		height: auto;
-	}
-
-	.nameIndicator button {
-		background-size: 24px;
-	}
-
-	.nameIndicator button.audio-disabled,
-	.nameIndicator button.video-disabled,
-	.nameIndicator button.screensharing-disabled {
-		opacity: .7;
-	}
-
-	.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.no-audio-available,
-	.nameIndicator button.no-video-available {
-		opacity: .7;
-		cursor: not-allowed;
-	}
-
-	.nameIndicator button.no-audio-available:active,
-	.nameIndicator button.no-video-available:active {
-		background-color: transparent;
-	}
-
-	.mediaIndicator {
-		position: absolute;
-		width: 100%;
-		bottom: 44px;
-		left: 0;
-		background-size: 22px;
-		text-align: center;
-	}
-
-	.muteIndicator,
-	.hideRemoteVideo,
-	.screensharingIndicator,
-	.iceFailedIndicator {
-		position: relative;
-		display: inline-block;
-		background-color: transparent !important;
-		border: none;
-		width: 32px;
-		height: 32px;
-		background-size: 22px;
-
-		&.hidden {
-			display: none;
-		}
-	}
-
-	.muteIndicator.audio-on,
-	.muteIndicator:not(.audio-on):not(.audio-off),
-	.screensharingIndicator.screen-off,
-	.iceFailedIndicator.not-failed {
-		display: none;
-	}
-
-	.muteIndicator.audio-off,
-	.hideRemoteVideo.icon-video-off {
-		opacity: .7;
-	}
-
-	.hideRemoteVideo.icon-video-off {
-		&:hover,
-		&:focus {
-			opacity: 1;
-		}
-	}
-
-	.iceFailedIndicator {
-		opacity: .8 !important;
-	}
-
-
-
-
-
-	#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
-	#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
-		animation: pulse 1s;
-		animation-iteration-count: infinite;
-	}
-
-	@keyframes pulse {
-		0% {
-			opacity: 1;
-		}
-		50% {
-			opacity: .3;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-
-
-
-	#muteWrapper {
-		display: inline-block;
-
-		/* Make the wrapper the positioning context of the volume indicator. */
-		position: relative;
-	}
-
-	#muteWrapper .volume-indicator {
-		position: absolute;
-
-		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;
-
-		background: linear-gradient(0deg, green, yellow, red 36px);
-
-		opacity: 0.7;
-	}
-
-	#muteWrapper .icon-audio-off + .volume-indicator {
-		background: linear-gradient(0deg, gray, white 36px);
-	}
-}