TeaWeb/shared/css/static/main-layout.scss

@import "mixin";

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

html:root {
	--app-background: #1e1e1e;

	--control-bar-background: #454545;

	--chat-background: #353535;
	--channel-tree-background: #353535;
	--server-log-background: #353535;

	--footer-background: #252525;
	--footer-text: #666666;

	--channel-chat-seperator: #1e1e1e;
	--channel-chat-seperator-selected: #707070;
}

.app {
	min-width: 600px;
	min-height: 330px;

	padding: 5px;

	.container-app-main {
		height: 100%;
		width: 100%;

		min-height: 500px;
		margin-top: 5px;

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


		.container-channel-chat {
			height: 80%; /* "default" settings */
			width: 100%;

			min-height: 27em; /* fits with the music bot interface */
			min-width: 100px;

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

			& > * {
				height: 100%;
				min-height: 250px;

				border-radius: 5px;
			}

			> .container-channel-tree {
				width: 50%; /* "default" settings */
				height: 100%;

				background: var(--channel-tree-background);
				min-width: 200px;

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

				min-height: 100px;

				overflow: hidden;

				> .hostbanner {
					flex-grow: 0;
					flex-shrink: 0;

					max-height: 9em; /* same size as the info pannel */

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

				> .channel-tree {
					min-height: 5em;

					flex-grow: 1;
					flex-shrink: 1;

					.channel-tree-container {
						height: 100%;
						flex-grow: 1;
						flex-shrink: 1;
						overflow: hidden;
						overflow-y: auto;
					}
				}
			}

			> .container-chat {
				width: 50%; /* "default" settings */
				height: 100%;

				background: var(--chat-background);
				min-width: 350px;

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


		> .container-bottom {
			height: 20%;

			min-height: 1.5em;
			width: 100%;

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

			> .container-server-log {
				display: flex;
				flex-direction: column;
				justify-content: stretch;

				flex-shrink: 1;
				flex-grow: 1;

				min-height: 0;
				width: 100%;

				border-radius: 5px 5px 0 0;

				padding-right: 5px;
				padding-left: 5px;

				background: var(--server-log-background);
			}

			> .container-footer {
				flex-shrink: 0;
				flex-grow: 0;

				height: 1.5em;

				background: var(--footer-background);
				color: var(--footer-text);

				border-radius: 0 0 5px 5px;
				padding-right: 5px;
				padding-left: 5px;
				padding-top: 2px;

				-webkit-box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.125);
				-moz-box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.125);
				box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.125);

				display: flex;
				flex-direction: row;
				justify-content: space-between;

				> * {
					align-self: center;
				}

				> span {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					> a {
						margin-right: .5em;
					}
				}

				a[href], a[href]:visited {
					color: var(--footer-text)!important;
				}
			}
		}
	}

	.container-control-bar {
		z-index: 200;

		flex-shrink: 0;

		border-radius: 5px;

		height: 2em;
		width: 100%;

		background-color: var(--control-bar-background);

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

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

	.show-small {
		display: none;

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

.app-container {
	right: 0;
	left: 0;
	top: 0;

	overflow: auto;
	padding: 0;
}

@media only screen and (max-width: $small_device) {
	.hide-small {
		display: none;
		opacity: 0;
		transition: opacity $animation_length linear;
	}

	.show-small {
		display: block !important;

		opacity: 1 !important;
		transition: opacity $animation_length linear;
	}
}

$animation_seperator_length: .1s;
.container-seperator {
	@include transition(all $animation_seperator_length ease-in-out);
	background: var(--channel-chat-seperator);

	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 {
		@include transition(all $animation_seperator_length ease-in-out);

		background-color: var(--channel-chat-seperator-selected);
	}
}

html, body {
	overflow: hidden;
}

body {
	background: var(--app-background)!important;
}