meet.scss
No OneTemporary
Actions

Authored By

Unknown

Size

10 KB

Referenced Files

None

Subscribers

None

meet.scss
View Options

	@mixin range-track() {
	background-color: $link-color !important;
	height: 0.2em;
	border: 0;
	border-radius: 0.1em;
	}

	@mixin range-thumb() {
	appearance: none;
	background-color: $link-color;
	width: 0.75em;
	height: 0.75em;
	border: none;
	border-radius: 0.5em;
	}

	.meet-nickname {
	padding: 0;
	line-height: 2em;
	border-radius: 1em;
	max-width: 100%;
	white-space: nowrap;
	display: inline-flex;

	.icon {
	display: inline-block;
	min-width: 2em;
	}

	.content {
	order: 1;
	height: 2em;
	outline: none;
	overflow: hidden;
	text-overflow: ellipsis;

	&:not(:empty) {
	margin-left: 0.5em;
	padding-right: 0.5em;

	& + .icon {
	margin-right: -0.75em;
	}
	}
	}

	.self & {
	.content {
	&:focus {
	min-width: 0.5em;
	}
	}
	}

	& + .dropdown-menu {
	.permissions > label {
	padding-left: 3.5rem;
	}
	}
	}

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

	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;
	}
	}

	&.screen video {
	/* For shared screen videos we use the original aspect ratio */
	object-fit: scale-down;
	background: 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;
	}
	}

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

	.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;
	}
	}

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

	.meet-nickname {
	margin: 0.5em;
	max-width: calc(100% - 1em);
	border: 0;

	&:not(:hover) {
	background-color: rgba(#fff, 0.8);
	}
	}

	&:not(.moderated):not(.self) .meet-nickname {
	.icon {
	display: none;
	}
	}

	.volume {
	position: absolute;
	bottom: 2.15em;
	right: 2em;
	border-radius: 1em;
	background: rgba(#000, 0.7);
	width: 2em;
	height: 4em;
	overflow: hidden; // for Edge

	input {
	appearance: none;
	cursor: pointer;
	width: 3em;
	height: 2em;
	margin-top: 3.5em;
	transform-origin: 0 0;
	transform: rotate(-90deg);
	background: transparent;
	outline: 0;

	&::-ms-track { @include range-track; }
	&::-moz-range-track { @include range-track; }
	&::-webkit-slider-runnable-track { @include range-track; }

	&::-ms-thumb { @include range-thumb; }
	&::-moz-range-thumb { @include range-thumb; }
	&::-webkit-slider-thumb { @include range-thumb; margin-top: -0.25em; }

	&::-ms-tooltip { display: none; }
	}
	}
	}

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

	& + .filler {
	display: none;
	}
	}

	#app.meet {
	height: 100%;

	#meet-component {
	overflow: hidden;
	}

	nav.navbar {
	display: none;
	}
	}

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

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

	#meet-counter {
	position: absolute;
	left: 0;
	padding: 1.1em 0.6em;
	color: #808c99;

	svg {
	font-size: 1.4em;
	vertical-align: text-bottom;
	}
	}

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

	#meet-session-menu {
	background: $menu-bg-color;
	border-radius: 0 2em 2em 0;
	margin: 0.25em 0;
	padding-right: 0.5em;

	button {
	font-size: 1.3em;
	margin: 0.4em;
	position: relative;
	color: #4f5963;
	width: 1.75em;
	height: 1.75em;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&.on:not(:disabled) {
	background: #4f5963;
	color: white;
	}

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

	&:empty {
	display: none;
	}
	}

	svg {
	width: 1em;
	}
	}

	#meet-component:fullscreen & {
	background: transparent;

	button {
	color: $main-color;

	&.on:not(:disabled) {
	background: $main-color;
	color: #000;
	}
	}
	}
	}

	#meet-session-logo {
	background: #e9e7e2;
	border-radius: 2em 0 0 2em;
	margin: 0.25em 0;
	display: flex;
	flex-direction: column;
	justify-content: center;

	img {
	height: 1.25em;
	padding: 0 1em 0 1.5em;
	}

	#meet-component:fullscreen & {
	background: transparent;
	}
	}

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

	#meet-publishers {
	height: 100%;
	position: relative;
	}

	#meet-subscribers {
	padding: 0.15em;
	overflow-y: auto;

	.meet-subscriber {
	margin: 0.15em;
	max-width: calc(25% - 0.4em);
	}

	// Language interpreters will be displayed as subscribers, but will have still
	// the video element that we will hide
	video {
	display: none;
	}
	}

	#meet-session {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;

	& > div {
	display: flex;
	flex-wrap: wrap;
	width: 100%;

	&:empty {
	display: none;
	}
	}

	#meet-publishers:empty {
	& + #meet-subscribers {
	justify-content: center;
	align-content: center;
	flex: 1;
	}
	}
	}

	#meet-chat {
	width: 0;
	display: none;
	flex-direction: column;
	background: $menu-bg-color;
	padding-top: 0.25em;

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

	.mobile & {
	width: 100%;
	z-index: 1;
	}
	}

	#meet-component:fullscreen & {
	background: transparent;
	}

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

	.message {
	margin: 0 0.5em 0.5em 0.5em;
	padding: 0.25em 0.5em;
	border-radius: 1em;
	background: #fff;
	border: 1px solid #e9e7e2;
	overflow-wrap: break-word;

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

	&:last-child {
	margin-bottom: 0;
	}
	}

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

	#meet-queue {
	display: none;
	width: 150px;

	.head {
	text-align: center;
	font-size: 1.75em;
	background: $menu-bg-color;
	}

	.dropdown {
	margin: 0.2em;
	display: flex;
	position: relative;
	transition: top 10s ease;
	top: 15em;

	.meet-nickname {
	width: 100%;
	}

	&.wiggle {
	top: 0;
	animation-name: wiggle;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 8;
	}
	}
	}

	@keyframes wiggle {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(10deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
	}

	.media-setup-form {
	.input-group svg {
	width: 1em;
	}
	}

	.media-setup-preview {
	display: flex;
	position: relative;

	video {
	width: 100%;
	background: #000;
	}

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

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

	#media-setup-dialog & {
	right: 1em;
	}
	}
	}

	.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;
	}
	}

	@include media-breakpoint-down(sm) {
	#meet-session-menu {
	white-space: nowrap;
	margin: 0;
	margin-top: 1.25em;
	border-radius: 0;
	padding: 0;
	background: none;

	button {
	margin: 0.25em;
	}

	// .link-screen,
	.link-fullscreen {
	display: none;
	}
	}

	#meet-session-logo {
	background: none;
	position: absolute;
	left: 0;

	img {
	height: 0.8em;
	padding: 0 0.25em;
	}
	}

	#meet-counter {
	text-align: right;
	right: 0;
	padding: 0 0.25em;
	font-size: 0.9em;
	background: $menu-bg-color;

	svg {
	font-size: 1.1em;
	vertical-align: -0.125em;
	}
	}

	#meet-setup {
	.card-title {
	text-align: center;
	}
	}

	#meet-queue {
	width: 100px;

	.dropdown {
	animation: none !important;
	transition: none;
	top: 0;
	}
	}

	.media-setup-preview {
	/* Fix video element size in Safari/iOS */
	display: block;
	}
	}

File Metadata

Mime Type: text/plain
Expires: Apr 4 2026, 10:31 AM (4 w, 4 d ago)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 18783222
Default Alt Text: meet.scss (10 KB)

meet.scssNo OneTemporaryActions

meet.scssView Options

File Metadata

Event Timeline

meet.scss
No OneTemporary
Actions

meet.scss
View Options