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

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

footer {
	position: fixed;
	width: 100%;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 25px;
	background-color: lightgray;

	display: flex;
}

footer .container {
	width: 100%;
	display: flex;
	position: relative;
	vertical-align: center;
	justify-content: center;
}

$separator_thickness: 4px;
$small_device: 650px;
$animation_length: .5s;

.app {
    min-width: 350px;

	.container-app-main {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: stretch;

		height: 100%;
		width: 100%;


		border: $separator_thickness solid lightgray;
		border-top-width: 0;
	}

	.container-control-bar {
		height: 45px;
		width: 100%;
		border-radius: 2px 0 0 0;
		border-bottom-width: 0;
		background-color: lightgrey;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.container-channel-chat {
		min-width: 100px;
		width: 60%;

		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.container-channel-tree {
			background: white;

			display: flex;
			justify-content: stretch;
			height: calc(100% - 250px);
			min-height: 100px;

			/*
			overflow: auto;
			overflow-x: visible;
			*/
			overflow: hidden;
			overflow-y: auto;
		}

		.container-chat {
			background: white;

			display: flex;
			flex-direction: column;
			justify-content: stretch;

			//max-height: 400px;
			height: 250px;
			min-height: 100px;
		}
	}

	.container-info {
		background: white;

		min-width: 100px;
		width: 40%;

		display: flex;
		flex-direction: row;
		justify-content: stretch;
	}


    .hide-small {
        opacity: 1;
        transition: opacity $animation_length linear;
    }

    .show-small {
        display: none;

        opacity: 0;
        transition: opacity $animation_length linear;
    }
}

@media only screen and (max-width: $small_device) {
    .app-container {
        right: 0;
        left: 0;
        bottom: 25px;
        top: 0;

        transition: all $animation_length linear;
        overflow: auto;
    }

    .app {
        .container-app-main {
            .container-info {
                display: none;
                position: absolute;

                width: 100%!important; /* override the seperator property */
                height: 100%;

                z-index: 1000;

                &.shown {
                    display: block;
                }

                .select_info {
                    > .close {
                        display: block;
                    }
                }
            }

            .container-channel-chat + .container-seperator {
                display: none;
                animation: fadeout $animation_length linear;
            }

            .container-channel-chat {
                width: 100%!important; /* override the seperator property */
            }
        }
    }

    .hide-small {
        display: none;
        opacity: 0;
        transition: opacity $animation_length linear;
    }

    .show-small {
        display: block!important;

        opacity: 1!important;
        transition: opacity $animation_length linear;
    }
}
.container-seperator {
	background: lightgray;
	flex-grow: 0;
	flex-shrink: 0;

	&.horizontal {
		height: $separator_thickness;
		width: 100%;

		cursor: row-resize;
	}

	&.vertical {
		width: $separator_thickness;
		height: 100%;

		cursor: col-resize;
	}

	&.seperator-selected {
		background-color: #00000011;
	}
}

.icon-container {
	position: relative;
	display: inline-block;
	height: 16px;
	width: 16px;

	> img {
		position: absolute;
	}
}

#mouse-move {
	display: none;
	position: absolute;
	z-index: 10000;

	.container {
		position: relative;
		display: block;

		border: 2px solid gray;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
}

html, body {
	overflow: hidden;
}

body {
	padding: 8px;
	background: darkgray !important;
}

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

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