Differential D1984 Diff 5476 src/resources/themes/meet.scss

Changeset View

Standalone View

src/resources/themes/meet.scss

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

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

Show All 19 Lines	.meet-video {
}		}

.watermark {		.watermark {
color: darken($menu-bg-color, 20%);		color: darken($menu-bg-color, 20%);
width: 50%;		width: 50%;
height: 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 19 Lines	.status {
color: #fff;		color: #fff;
border-radius: 50%;		border-radius: 50%;
width: 2em;		width: 2em;
text-align: center;		text-align: center;
margin-right: 0.25em;		margin-right: 0.25em;
}		}
}		}

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

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

.content {
outline: none;
}
}		}

&.moderated .nickname {		.meet-nickname {
display: flex;		margin: 0.5em;
		max-width: calc(100% - 1em);
.content {		border: 0;
order: 1;

&:not(:empty) + .icon {		&:not(:hover) {
margin-right: 0;		background-color: rgba(#fff, 0.8);
}		}
}		}

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

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

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

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

&:not(:focus) + .icon {
display: inline-block;
}
}		}
}		}
}		}

#meet-component {		#meet-component {
flex-grow: 1;		flex-grow: 1;
display: flex;		display: flex;
flex-direction: column;		flex-direction: column;
▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines	#meet-session-layout {
overflow: hidden;		overflow: hidden;
}		}

#meet-session {		#meet-session {
display: flex;		display: flex;
justify-content: center;		justify-content: center;
flex-wrap: wrap;		flex-wrap: wrap;
flex: 1;		flex: 1;
//overflow: hidden;		position: relative; // for #meet-subscribers positioning
		}

		#meet-subscribers {
		display: flex;
		flex-wrap: wrap;
		order: 999;
		padding: 0.15em;
		width: 100%;
		overflow-y: auto;

		&:empty {
		display: none;
		}

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

		// when the subscribers list is the only child this means
		// there's no publisher videos in the room yet
		&:only-child {
		justify-content: center;
		align-content: center;
		}

		&:not(:only-child) {
		max-height: 30%;
		}
}		}

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

&.open {		&.open {
▲ Show 20 Lines • Show All 86 Lines • Show Last 20 Lines