Differential D1447 Diff 4471 src/resources/sass/meet.scss

Changeset View

Standalone View

src/resources/sass/meet.scss

This file was added.

				.meet-video {
				position: relative;
				background: $menu-bg-color;
				// Use flexbox for centering .watermark
				display: flex;
				align-items: center;
				justify-content: center;

				.watermark {
				color: darken($menu-bg-color, 20%);
				width: 50%;
				height: 50%;
				}

				video {
				// To make object-fit:cover working we have to set the height in pixels
				// on the wrapper element. This is what javascript method will do.
				object-fit: cover;
				width: 100%;
				height: 100%;
				background: #000;

				& + .watermark {
				display: none;
				}
				}

				&.fullscreen {
				video {
				// We don't want the video to be cut in fullscreen
				// This will preserve the aspect ratio of the video stream
				object-fit: contain;
				}
				}

				.controls {
				position: absolute;
				bottom: 0;
				right: 0;
				margin: 0.5em;
				padding: 0 0.05em;
				line-height: 2em;
				border-radius: 1em;
				background: rgba(#000, 0.7);

				button {
				line-height: 2;
				border-radius: 50%;
				padding: 0;
				width: 2em;
				}
				}

				.status {
				position: absolute;
				bottom: 0;
				left: 0;
				margin: 0.5em;
				line-height: 2em;

				span {
				display: inline-block;
				color: #fff;
				border-radius: 50%;
				width: 2em;
				text-align: center;
				margin-right: 0.25em;
				}
				}

				.nickname {
				position: absolute;
				top: 0;
				left: 0;
				margin: 0.5em;
				padding: 0 1em;
				line-height: 2em;
				border-radius: 1em;
				max-width: calc(100% - 1em);
				background: rgba(#fff, 0.8);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				button {
				display: none;
				}

				span {
				outline: none;
				}
				}

				&.publisher .nickname {
				cursor: pointer;
				background: rgba($main-color, 0.9);

				&:focus-within {
				box-shadow: $btn-focus-box-shadow;
				}

				span:empty {
				display: block;
				height: 2em;

				&:not(:focus) + button {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 2em;
				height: 2em;
				border-radius: 50%;
				padding: 0;
				color: $menu-gray;
				}
				}
				}
				}

				#meet-component {
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				& + .filler {
				display: none;
				}
				}

				#app.meet {
				height: 100%;

				#meet-component {
				overflow: hidden;
				}
				}

				#meet-setup {
				max-width: 720px;
				}

				#meet-auth {
				margin-top: 2rem;
				margin-bottom: 2rem;
				flex: 1;
				}

				#meet-session-toolbar {
				display: flex;
				justify-content: center;
				}

				#meet-session-menu {
				button {
				font-size: 1.3em;
				padding: 0 0.25em;
				margin: 0.5em;
				position: relative;

				.badge {
				font-size: 0.5em;
				position: absolute;
				right: -0.5em;

				&:empty {
				display: none;
				}
				}
				}
				}

				#meet-session-layout {
				flex: 1;
				overflow: hidden;
				}

				#meet-session {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				flex: 1;
				//overflow: hidden;
				}

				#meet-chat {
				width: 0;
				display: none;
				flex-direction: column;

				&.open {
				width: 30%;
				display: flex !important;

				.mobile & {
				width: 100%;
				z-index: 1;
				background: $body-bg;
				}
				}

				.chat {
				flex: 1;
				overflow-y: auto;
				}

				.message {
				margin: 0 0.5em 0.5em 0.5em;
				padding: 0.25em 0.5em;
				border-radius: 1em;
				background: $menu-bg-color;
				overflow-wrap: break-word;

				&.self {
				background: lighten($main-color, 30%);
				}
				}

				.nickname {
				font-size: 80%;
				color: $secondary;
				text-align: right;
				}

				// TODO: mobile mode
				}

				#setup-preview {
				display: flex;

				video {
				width: 100%;
				transform: rotateY(180deg);
				background: #000;
				}

				.volume {
				height: 50%;
				position: absolute;
				bottom: 1em;
				right: 2em;
				width: 0.5em;
				background: rgba(0, 0, 0, 0.5);

				.bar {
				width: 100%;
				position: absolute;
				bottom: 0;
				}
				}
				}