Differential D1912 Diff 5296 src/resources/themes/meet.scss

Changeset View

Standalone View

src/resources/themes/meet.scss

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

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

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

& + .watermark {		& + .watermark {
display: none;		display: none;
}		}
}		}

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

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

		.dropdown {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		}

.controls {		.controls {
position: absolute;		position: absolute;
bottom: 0;		bottom: 0;
right: 0;		right: 0;
margin: 0.5em;		margin: 0.5em;
padding: 0 0.05em;		padding: 0 0.05em;
line-height: 2em;		line-height: 2em;
border-radius: 1em;		border-radius: 1em;
Show All 29 Lines	.nickname {
top: 0;		top: 0;
left: 0;		left: 0;
margin: 0.5em;		margin: 0.5em;
padding: 0 1em;		padding: 0 1em;
line-height: 2em;		line-height: 2em;
border-radius: 1em;		border-radius: 1em;
max-width: calc(100% - 1em);		max-width: calc(100% - 1em);
background: rgba(#fff, 0.8);		background: rgba(#fff, 0.8);
		color: $body-color;
		text-decoration: none !important;
overflow: hidden;		overflow: hidden;
text-overflow: ellipsis;		text-overflow: ellipsis;
white-space: nowrap;		white-space: nowrap;
		display: flex;

button {		.icon {
display: none;		display: none;
		width: 2em;
		margin: 0 -1em;
}		}

span {		.content {
outline: none;		outline: none;
}		}
}		}

		&.moderated .nickname {
		display: flex;

		.content {
		order: 1;

		&:not(:empty) + .icon {
		margin-right: 0;
		}
		}

		.icon {
		display: inline-block;
		}
		}

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

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

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

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

#meet-component {		#meet-component {
flex-grow: 1;		flex-grow: 1;
display: flex;		display: flex;
▲ Show 20 Lines • Show All 124 Lines • ▼ Show 20 Lines	.volume {

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

		.toast.join-request {
		.toast-header {
		color: #eee;
		}

		.toast-body {
		display: flex;
		}

		.picture {
		margin-right: 1em;

		img {
		width: 64px;
		height: 64px;
		border: 1px solid #555;
		border-radius: 50%;
		object-fit: cover;
		}
		}

		.content {
		flex: 1;
		}
		}