TeaWeb/shared/css/static/modal-server.scss

@import "mixin";
@import "properties";

.modal-body.modal-server-edit {
	display: flex!important;
	flex-direction: column!important;
	justify-content: stretch!important;

	max-height: calc(100vh - 10em);
	padding: 1em!important;

	min-width: 35em!important;
	width: 60em; /* recommend width */

	@include user-select(none);

	input, textarea, select {
		width: 100%;
	}

	select {
		margin-left: 0;
		height: 2.5em;
	}

	textarea {
		padding: .5em;
	}

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

		/* total height 2.5em */
		margin-top: .5em;
		margin-bottom: .5em;
		height: 1.5em;

		cursor: pointer;

		* {
			align-self: center;
		}

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

		.form-group {
			margin: -.5em 0!important;

			padding: 0!important;

			input {
				height: 1.5em!important;
			}
		}
	}

	/* radio buttons */
	$icon_width: 1.7em; /* equal to the label height */

	@mixin tooltip-size($lines, $line_length) {
		$tooltip_height: $lines * 1.6;
		$tooltip_width: $line_length + 1;
		.tooltip {
			top: -($tooltip_height + .6em);
			left: ($icon_width - $tooltip_width) / 2;

			height: $tooltip_height * 1em;
			width: $tooltip_width * 1em;


			&:before {
				left: $tooltip_width / 2 - .5em;
			}
		}
	}

	.input-boxed {
		position: relative;

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

		min-width: 4em;

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

		.container-tooltip {
			flex-shrink: 0;
			flex-grow: 0;

			position: relative;
			width: $icon_width;

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

			img {
				height: 1em;
				width: 1em;

				align-self: center;
				font-size: 1.2em;
			}

			.tooltip {
				/* only a container for the actual JS generated tooltip */
				display: none;
			}
		}
	}

	.container-general {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		flex-shrink: 0;
		flex-grow: 0;

		> div:not(:first-of-type) {
			flex-grow: 0;
			flex-shrink: 0;

			margin-top: 1em;
		}

		.container-name-icon {
			flex-grow: 0;
			flex-shrink: 0;

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

			.container-icon-select {
				position: relative;

				height: 2.5em;
				border-radius: .2em;

				margin-left: 1em;

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

				cursor: pointer;
				background-color: #121213;
				border: 1px solid #0d0d0d;

				.icon-preview {
					height: 100%;
					width: 3em;

					border: none;
					border-right: 1px solid #0d0d0d;

					display: flex;
					flex-direction: column;
					justify-content: space-around;

					> div {
						align-self: center;
					}

					@include transition(border-color $button_hover_animation_time ease-in-out);
				}

				.container-dropdown {
					position: relative;
					cursor: pointer;

					display: flex;
					flex-direction: column;
					justify-content: space-around;

					height: 100%;
					width: 1.5em;

					.button {
						text-align: center;

						.arrow {
							border-color: #999999;
						}
					}

					.dropdown {
						display: none;
						position: absolute;
						width: max-content;

						top: calc(2.5em - 1px);

						flex-direction: column;
						justify-content: flex-start;

						background-color: #121213;
						border: 1px solid #0d0d0d;
						border-radius: .2em 0 .2em .2em;

						right: -1px;

						z-index: 2;

						.entry {
							padding: .5em;

							&:not(:last-of-type) {
								border: none;
								border-bottom: 1px solid #0d0d0d;
							}

							&:hover {
								background-color: #17171a;
							}
						}
					}

					&:hover {
						border-bottom-right-radius: 0;
						.dropdown {
							display: flex;
						}
					}
				}

				&:hover {
					background-color: #17171a;
					border-color: hsla(0, 0%, 20%, 1);

					.icon-preview {
						border-color: hsla(0, 0%, 20%, 1);
					}
				}

				@include transition(border-color $button_hover_animation_time ease-in-out);
			}
		}

		.container-slots {
			display: flex;
			flex-direction: row;
			justify-content: stretch;

			> div {
				width: 50%;

				&:not(:first-child) {
					margin-left: 1em;
				}
			}
		}

		.container-welcome-message {
			position: relative;

			flex-grow: 1!important;
			flex-shrink: 1!important;

			min-height: 5em;
			max-height: 22.5em;

			border-radius: .2em;
			border: 1px solid #111112;

			overflow: hidden;

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

			.toolbar {
				flex-shrink: 0;
				flex-grow: 0;

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

				width: 100%;
				height: 2.5em;

				background-color: #17171a;
				font-size: .8em;

				padding: .25em;

				.button {
					cursor: pointer;

					padding: .5em;
					&:not(:first-child) {
						margin-left: .25em;
					}

					border-radius: .2em;
					border: 1px solid #111112;

					background-color: #121213;

					height: 2em;
					width: 2em;

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

					text-align: center;
					align-self: center;

					&.button-bold {
						font-weight: bold;
					}

					&.button-italic {
						font-style: italic;
					}

					&.button-underline {
						text-decoration: underline;
					}

					&.button-color {
						input {
							position: absolute;
							width: 0;
							height: 0;
							opacity: 0;
						}
					}

					&:hover {
						background-color: #0f0f0f;
						@include transition(background-color $button_hover_animation_time);
					}
				}
			}

			> .input-boxed {
				flex-shrink: 1;
				flex-grow: 1;

				min-height: 2.5em;
				height: 5em;
				max-height: 20em;

				border: none;
				border-radius: 0;
				border-top: 1px solid #111112;


				overflow-x: hidden;;
				overflow-y: auto;

				resize: vertical;

				@include chat-scrollbar-vertical();
			}

			&:focus-within {
				background-color: #131b22;
				//border-color: #284262;
			}
		}
	}

	.container-categories {
		margin-top: 1em;

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

		min-height: 14em;

		border-radius: .2em;
		border: 1px solid #111112;

		background-color: #17171a;

		fieldset {
			padding: 0;
			width: 100%;
		}

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

			/* total height 2.5em */
			margin-top: .5em;
			margin-bottom: .5em;
			height: 1.5em;

			cursor: pointer;

			* {
				align-self: center;
			}

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

			.form-group {
				margin: -.5em 0!important;

				padding: 0!important;

				input {
					height: 1.5em!important;
				}
			}
		}

		.input-boxed:not(textarea), input, select {
			height: 1.7em;
		}

		textarea {
			height: 3.4em; /* double the input height */
			max-height: 17em;
			min-height: 1.7em;
		}

		.categories {
			height: 2.5em;

			flex-grow: 0;
			flex-shrink: 0;

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

			border-bottom: 1px solid #1d1d1d;

			.entry {
				padding: .5em;

				text-align: center;

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

				cursor: pointer;

				&:hover {
					color: #b6c4d6;
				}

				&.selected {
					border-bottom: 3px solid #245184;
					margin-bottom: -1px;

					color: #245184;
				}

				@include transition(color $button_hover_animation_time, border-bottom-color $button_hover_animation_time);
			}
		}

		.bodies {
			position: relative;

			flex-shrink: 1;
			flex-grow: 1;
			display: flex;
			justify-content: stretch;

			min-height: 10em;
			height: 30em;

			.body {
				position: absolute;

				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

				padding: .5em;

				display: flex;
				justify-content: stretch;

				overflow: auto; /* else the tooltip will trigger the scrollbar */
				@include chat-scrollbar-vertical();

				&.hidden {
					display: none;
				}

				.header {
					flex-shrink: 0;
					flex-grow: 0;

					text-align: center;
					color: #548abc;
				}

				.content {
					flex-grow: 1;
					flex-shrink: 1;
				}

				&.container-host {
					flex-direction: column;

					.container-top, .container-bottom {
						flex-grow: 1;
						flex-shrink: 1;
						min-height: min-content;

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

					.container-left, .container-right {
						flex-grow: 1;
						flex-shrink: 1;

						min-width: 8em;
						width: 50%;
					}

					.container-top {
						flex-direction: column;
						flex-grow: 0;

						padding-bottom: .5em;

						border-bottom: 2px solid #111113;
					}

					.container-bottom .container-left {
						padding-top: .5em;
						padding-right: .5em;

						border-right: 2px solid #111113;
					}

					.container-bottom .container-right {
						padding-top: .5em;
						padding-left: .5em;
					}

					.container-host-message {
						.container-message, .container-mode {
							padding-top: 1em;

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

							.container-title {
								width: 8em;
								flex-grow: 0;
								flex-shrink: 0;

								height: 1.7em;

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

								a {
									align-self: center;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							textarea, select {
								flex-grow: 1;
								flex-shrink: 1;
							}

							textarea {
								resize: vertical;
							}
						}
					}

					.container-host-banner {
						.container-url, .container-gfx-url, .container-refresh, .container-resize {
							margin-top: 1em;

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

							height: 1.7em;

							a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 6em;
							}

							&.container-refresh, &.container-resize {
								a {
									width: 9em;
								}
							}
						}

						.container-gfx-preview {
							margin-top: 1em;

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

							.container-title {
								width: 8em;
								flex-grow: 0;
								flex-shrink: 0;

								height: 1.7em;

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

								a {
									align-self: center;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.container-image {
								flex-grow: 1;
								flex-shrink: 1;

								min-width: 0;
								max-height: 6em;

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

								> img {
									flex-grow: 0;
									flex-shrink: 0;

									max-height: 100%;
									max-width: 100%;

									object-fit: contain;
								}
							}
						}
					}

					.container-host-button {
						.container-url, .container-gfx-url, .container-tooltip-button {
							margin-top: 1em;

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

							height: 1.7em;

							> a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 6em;
							}
						}

						.container-gfx-preview {
							margin-top: 1em;

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

							.container-title {
								width: 8em;
								flex-grow: 0;
								flex-shrink: 0;

								height: 1.7em;

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

								a {
									align-self: center;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.container-image {
								flex-grow: 0;
								flex-shrink: 0;

								height: 2em;
								width: 2em;

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

								> img {
									flex-grow: 0;
									flex-shrink: 0;

									height: 100%;
									width: 100%;
								}
							}
						}
					}
				}

				&.container-network {
					flex-direction: column;

					.container-top, .container-bottom {
						flex-grow: 1;
						flex-shrink: 1;
						min-height: min-content;

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

					.container-left, .container-right {
						flex-grow: 1;
						flex-shrink: 1;

						min-width: 8em;
						width: 50%;
					}

					.container-top {
						flex-direction: column;
						flex-grow: 0;

						padding-bottom: .5em;

						border-bottom: 2px solid #111113;
					}

					.container-bottom .container-left {
						padding-top: .5em;
						padding-right: .5em;

						border-right: 2px solid #111113;
					}

					.container-bottom .container-right {
						padding-top: .5em;
						padding-left: .5em;
					}

					.container-binding {
						.container-host, .container-port {
							padding-top: 1em;

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

							a {
								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								flex-grow: 0;
								flex-shrink: 0;

								width: 6em;
							}
						}

						.container-weblist {
							padding-top: 1em;

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

					.container-download, .container-upload {
						.container-bandwidth, .container-quota, .container-used-quota {
							margin-top: 1em;

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

							a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 12em;

								&.unit {
									width: 4em;
									text-align: right;
								}
							}

							.value {
								flex-grow: 1;
								flex-shrink: 1;
							}
						}
					}
				}

				&.container-security {
					flex-direction: column;

					.container-top, .container-bottom {
						flex-grow: 0;
						flex-shrink: 0;

						min-height: min-content;

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

					.container-top {
						border-bottom: 2px solid #111113;

						padding-bottom: .5em;
					}

					.container-bottom {
						padding-top: .5em;
					}

					.container-antiflood {
						.container-reduce, .container-block-commands, .container-block-ip {
							margin-top: 1em;

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

							height: 1.7em;

							a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 17em;
							}
						}
					}

					.container-security {
						.container-encryption, .container-security-level, .container-security-level-description {
							margin-top: 1em;

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

							height: 1.7em;

							a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 17em;
							}

							&.container-refresh, &.container-resize {
								a {
									width: 9em;
								}
							}
						}

						.container-description {
							display: flex;
							flex-direction: column;
							justify-content: flex-start;

							a {
								flex-grow: 0;
								flex-shrink: 0;

								font-size: .85em;
								color: #3c3c3c;
							}
						}
					}
				}

				&.container-messages {
					flex-direction: column;

					.container-top, .container-bottom {
						flex-grow: 0;
						flex-shrink: 0;

						min-height: min-content;

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

					.container-top {
						border-bottom: 2px solid #111113;

						padding-bottom: .5em;
					}

					.container-bottom {
						padding-top: .5em;
					}

					.container-channel {
						.container-description, .container-topic {
							padding-top: 1em;

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

							.container-title {
								width: 8em;
								flex-grow: 0;
								flex-shrink: 0;

								height: 1.7em;

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

								a {
									align-self: center;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							textarea, select {
								flex-grow: 1;
								flex-shrink: 1;
							}

							textarea {
								resize: vertical;
							}
						}
					}

					.container-client {
						.container-description {
							padding-top: 1em;

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


							a {
								width: 8em;
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}

				&.container-misc {
					flex-direction: column;

					.container-top, .container-bottom {
						flex-grow: 1;
						flex-shrink: 1;
						min-height: min-content;

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

					.container-left, .container-right {
						flex-grow: 1;
						flex-shrink: 1;

						min-width: 8em;
						width: 50%;
					}

					.container-top {
						flex-direction: column;
						flex-grow: 0;

						padding-bottom: .5em;

						border-bottom: 2px solid #111113;
					}

					.container-bottom .container-left {
						padding-top: .5em;
						padding-right: .5em;

						border-right: 2px solid #111113;
					}

					.container-bottom .container-right {
						padding-top: .5em;
						padding-left: .5em;
					}

					.container-default-groups {
						.container-default-group {
							padding-top: 1em;

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

							a {
								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								flex-grow: 0;
								flex-shrink: 0;

								width: 12em;
							}

							select {
								flex-grow: 1;
								flex-shrink: 1;
							}
						}
					}

					.container-complains {
						.container-ban-threshold, .container-ban-time, .container-cooldown {
							margin-top: 1em;

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

							a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 12em;
							}
						}
					}

					.container-others {
						.container-silence, .container-dim, .container-gfx-url {
							margin-top: 1em;

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

							> a {
								flex-grow: 0;
								flex-shrink: 0;

								align-self: center;
								overflow: hidden;
								text-overflow: ellipsis;

								width: 12em;
							}
						}
					}
				}
			}
		}
	}

	.container-buttons {
		flex-grow: 0;
		flex-shrink: 0;

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

		margin-top: 1em;

		button {
			margin-left: 1em;
		}
	}
}