paella-core/src/css/VideoContainer.css

Multistream HTML video player

:root {
	--video-container-padding: 0px;
	--video-container-gap: 10px;
}

.video-container {
    background-color: var(--video-container-background-color);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}


.video-container.over-playback-bar {
	height: calc(100% - var(--playback-bar-height) - 30px);
	top: 0px;
	transform: none;
}

.base-video-rect {
    background-color: var(--base-video-rect-background-color);
    position: relative;
}

.base-video-rect.dynamic {
	display: flex;
	background-color: transparent;
	gap: var(--video-container-gap);
	padding: var(--video-container-padding);
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.base-video-rect.dynamic.portrait {
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
}

.base-video-rect.dynamic.landscape {
	justify-content: space-around;
}

.base-video-rect.dynamic {
	align-items: center;
}

.base-video-rect.dynamic.portrait.align-left {
	justify-content: start;
}

.base-video-rect.dynamic.portrait.align-right {
	justify-content: right;
}

.base-video-rect.dynamic .landscape-container {
	display: flex;
	width: 100%;
	justify-content: space-around;
}

.base-video-rect.dynamic.align-bottom .landscape-container {
	align-items: flex-end;
}

.base-video-rect.dynamic.align-top .landscape-container {
	align-items: flex-start;
}

.base-video-rect.dynamic.align-center .landscape-container {
	align-items: center;
}

.video-container .button-plugins {
    position: absolute;
    top: 10px;
    height: 40px;
	z-index: 100;
}

.video-container .button-plugins.left-side {
    left: 10px;
}

.video-container .button-plugins.right-side {
    right: 10px;
}

.video-container .user-area {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.video-container .button-plugins .button-plugin-container {
	display: inline;
}

.video-container .button-plugins .button-plugin-container button {
	height: var(--button-fixed-height);
	display: block;
	background-color: var(--main-bg-color);
    border-radius: 6px;
	border: none;
	float: left;
	margin-left: 2px;
    margin-right: 2px;
}

.video-container .button-plugins .button-plugin-container button.fixed-width {
	width: var(--button-fixed-width);
}

.video-container .button-plugins .button-plugin-container button.dynamic-width div.interactive-button-content {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.video-container .button-plugins button.dynamic-width span {
	margin-top: 0px;
	color: var(--main-fg-color);
	padding-left: 3px;
	padding-right: 3px;
}

.video-container .button-plugins button:hover {
	background-color: var(--highlight-bg-color-hover);
}

.video-container .button-plugins button:active {
	background-color: var(--main-bg-color-hover);
}

.video-container .button-plugins button i {
	background-size: 50% 50%;
	width: 20px;
	display: block;
	background-repeat: no-repeat;
	background-position: 3px 7px;
	margin-left: 5px;
}

.video-container .button-plugins button i svg {
	width: 100%;
    height: 100%;
    fill: var(--main-fg-color);
	color: var(--main-fg-color);
}



/* non-interactive buttons */
.video-container .button-plugins .button-plugin-container div.non-interactive {
	height: var(--button-fixed-height);
	background-color: transparent;
    border-radius: 6px;
	border: none;
	float: left;
	box-sizing: border-box;
	display: flex;
    align-items: center;
    justify-content: center;
	pointer-events: none;
}

.video-container .button-plugins .button-plugin-container div.dynamic-width div.non-interactive-button-content {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.video-container .button-plugins .button-plugin-container div.non-interactive.fixed-width {
	width: var(--button-fixed-width);
}

.video-container .button-plugins div i {
	background-size: 50% 50%;
	width: 20px;
	display: block;
	background-repeat: no-repeat;
	background-position: 3px 7px;
	margin-left: auto;
	margin-right: auto;
}

.video-container .button-plugins div i svg {
	width: 100%;
    height: 100%;
    fill: var(--main-fg-color);
	color: var(--main-fg-color);
}

.video-container .button-plugins .button-plugin-container div.dynamic-width div.non-interactive-button-content {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}

.video-container .button-plugins div.non-interactive span {
	display: block;
	text-align: center;
}

.video-container .button-plugins div.no-icon span {
	line-height: var(--button-fixed-height);
    margin-top: 0px;
	color: var(--main-fg-color);
}

.video-container .button-plugins div.dynamic-width span {
	margin-top: 0px;
	color: var(--main-fg-color);
	padding-left: 3px;
	padding-right: 3px;
}

.video-container .button-plugin-side-area {
	display: inline;
	color: var(--main-fg-color);
	height: 40px;
	line-height: 40px;
}

.video-container .landscape-container {
	gap: 7px;
}