TeaWeb/shared/css/static/general.scss

*,
*::before,
*::after {
	box-sizing: border-box;
}

.align_row {
	display: flex;
	flex-direction: row;
}

.align_column {
	display: flex;
	flex-direction: column;
}

.icon_loading {
	border: 2px solid #f3f3f3; /* Light grey */
	border-top: 2px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: spin 2s linear infinite;

	width: 14px !important;
	height: 14px !important;
}

.avatar_loading {
	border: 2px solid #f3f3f3; /* Light grey */
	border-top: 2px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: spin 2s linear infinite;

	width: 14px !important;
	height: 14px !important;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@viewport {
	width: device-width;
	user-zoom: fixed;
}

.select_info {
	font-family: Arial;
	font-size: 12px;
	/*white-space: pre;*/
	line-height: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* The Modal (background) */
.modal_disabled {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */

	/* Modal Header */
	.modal-header {
		padding: 2px 16px;
		min-height: 30px;
		vertical-align: middle;
		display: flex;
		align-items: center;

		border: grey solid;
		border-width: 0 0 1px 0;

		background-color: lightgreen;
	}

	/* Modal Body */
	.modal-body:not(:empty) {
		display: flex;
		padding: 2px 16px;
		flex-grow: 1;
		flex-direction: column;
		justify-content: stretch;
	}

	/* Modal Footer */
	.modal-footer:not(:empty) {
		padding: 2px 16px;
	}

	/* The Close Button */
	.close {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
		position: absolute;
		top: 0px;
		right: 4px;
	}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	/* Modal Content */
	.modal-content:not(:empty) {
		position: absolute;
		display: inline-flex;
		flex-direction: column;
		justify-content: stretch;
		background-color: #fefefe;
		margin: auto;
		padding: 0;
		border: 2px solid #888;
		width: auto;
		max-width: 90%;
		box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2), 2px 6px 20px 0 rgba(0, 0, 0, 0.19);
		animation-name: modalFlyIn;
		animation-duration: 0.4s;
		top: 10%;
		max-height: 80%;

		left: 0;
		right: 0;
	}
}

/* Add Animation */
@keyframes modalFlyIn {
	from {
		top: 0%;
		opacity: 0
	}
	to {
		top: 10%;
		opacity: 1
	}
}

.channel_perm_tbl input {
	width: 30px;
}

.channel_perm_tbl .key {
	width: 120px;
}

.channel_general_properties .value {
	width: 100%;
}

html {
	background-color: gray;
}

fieldset {
	border: unset;
	display: unset;
}

.modal-head-error {
	background: darkred;

	font-family: Arial;
	font-size: 15px;
	font-weight: bold;

	vertical-align: middle;
}

.modal-button-group {

}

.modal-button-group button {
	width: 100px;
	margin-right: 5px;
	margin-left: 5px;
}

.modal-button-group button:last-of-type {
	margin-right: 0px;
}

.invalid_input {
	border-color: red;
}

.GroupBox {
	border: gray solid;
	border-width: 2px;
	border-radius: 0px 6px 6px 6px;
}

code {
	background-color: lightgray;
	padding: 2px;
}

.icon-playlist-manage {
	&.icon {
		width: 16px;
		height: 16px;

		background-position: -5px -5px;
		background-size: 25px;
	}

	&.icon_x32 {
		width: 32px;
		height: 32px;

		background-position: -11px -9px;
		background-size: 50px;
	}

	&.icon_x24 {
		width: 24px;
		height: 24px;

		background-position: -11px -9px;
		background-size: 50px;
	}

	display: inline-block;
	background: url('../../img/music/playlist.svg') no-repeat;
}

x-content {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	height: auto;
}

[class*=" bmd-label"], [class^=bmd-label] {
	color: rgba(0, 0, 0, .6) !important;
}

/* bootstrap materialize fix */
.form-row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}