paella-core/src/css/PopUp.css

Multistream HTML video player

:root {
	--popup-resizeable-border: 10px;
	--popup-title-bar-size: 20px;
	--popup-title-bar-color: var(--highlight-bg-color);
	--popup-dock-button-size: 15px;
}

.popup-container {
	z-index: 1000;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 100vw;
}

.popup-container.no-modal {
	pointer-events: none;
}

.popup-content {
	position: absolute;
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
	box-shadow: 0px 0px 4px 0px var(--main-bg-color);
	border-radius: 3px;
	padding: 5px 5px 5px 5px;
	forced-color-adjust: none;
	overflow: auto;
	display: table;
}

.popup-content.static-position {
	box-sizing: border-box;
	user-select: none;
	position: absolute;
	overflow: hidden;
	display: block;
}

.popup-content.moveable {
	padding: 0px;
	cursor: col-resize;
	min-width: 180px;
	min-height: 100px;
}

.popup-container.no-modal .popup-content {
	pointer-events: all;
}

.popup-content.resizeable .border-top-left {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	cursor: nw-resize;
	float: left;
}

.popup-content.resizeable .border-top-center {
	width: calc(100% - var(--popup-resizeable-border) * 2);
	height: var(--popup-resizeable-border);
	cursor: row-resize;
	float: left;
}

.popup-content.resizeable .border-top-right {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	cursor: ne-resize;
	float: left;
}

.popup-content .title-bar {
	font-family: arial, sans-serif;
	text-align: center;
	user-select: none;
	box-sizing: border-box;
	overflow: hidden;
}

.popup-content.moveable .title-bar {
	min-height: max(var(--popup-title-bar-size), calc(var(--popup-dock-button-size) + 11px));
	background-color: var(--popup-title-bar-color);
	cursor: move;
	position: relative;
	display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.popup-content.fixed .title-bar.not-empty {
	padding: 5px;
	border-bottom: 1px solid var(--main-fg-color);
}

.popup-content.moveable .title-bar .title-bar-content {
	padding-left: calc(var(--popup-dock-button-size) * 2);
	padding-right: calc(var(--popup-dock-button-size) * 2);
}

.popup-content.moveable.resizeable .title-bar {
	width: calc(100% - var(--popup-resizeable-border) * 2);
	margin-left: var(--popup-resizeable-border);
	margin-right: var(--popup-resizeable-border);
}

.popup-content .popup-action-buttons {
	position: absolute;
	top: 3px;
	right: 3px;
	display: flex;
}

.popup-content button.popup-action-button {
	display: none;
	background-color: transparent;
    border: 1px solid var(--main-fg-color);
	border-radius: 7px;
	cursor: pointer;
	margin-right: 2px;
}

.popup-content button.popup-action-button:hover {
	background-color: var(--highlight-bg-color-hover);
}

.popup-content button.popup-action-button i {
	width: var(--popup-dock-button-size);
	height: var(--popup-dock-button-size);
	display: block;
	color: var(--main-fg-color);
	fill: var(--main-fg-color);
}

.popup-content .center-container {
	width: calc(100% - var(--popup-resizeable-border) * 2);
	margin-left: var(--popup-resizeable-border);
	margin-right: var(--popup-resizeable-border);
	float: left;
}

.popup-content.static-position .center-container {
	height: calc(100% - var(--popup-resizeable-border) * 2 - var(--popup-title-bar-size));
	overflow: auto;
}

/* Begin properties for static position pop up: */
.popup-content.static-position button.popup-action-button {
	display: inline-block;
}

.popup-content.static-position .separator-left {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	float: left;
}

.popup-content.static-position .separator-right {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	float: left;
}

.popup-content.static-position .border-bottom-left {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	cursor: sw-resize;
	float: left;
}

.popup-content.static-position .border-bottom-center {
	width: calc(100% - var(--popup-resizeable-border) * 2);
	height: var(--popup-resizeable-border);
	cursor: row-resize;
	float: left;
}

.popup-content.static-position .border-bottom-right {
	width: var(--popup-resizeable-border);
	height: var(--popup-resizeable-border);
	cursor: se-resize;
	float: left;
}