TeaWeb/shared/css/modals.scss

.modal {
	//General style
	.properties {
		display: grid;
		grid-template-columns: minmax(min-content, max-content) auto;
		grid-column-gap: 10px;
		grid-row-gap: 3px;
		box-sizing: border-box;
	}

	hr {
		border-top: 3px double #8c8b8b;
		width: 100%;
	}

	.general_properties, .properties_general, .server_properties, .properties_messages {
		width: 100%;

		.group_box {
			margin-top: 5px;

			&:first-of-type {
				margin-top: 0px;
			}
		}
	}

	.input_error {
		border-radius: 1px;
		border: solid red;
	}

	.server_properties {
		.properties {
			grid-template-columns: 135px auto;
			&:first-of-type {
				margin-top: 5px;
			}
		}

		.virtualserver_welcomemessage {
			height: 70px;
			resize: none;
		}
	}

	.properties_messages textarea {
		height: 70px;
		resize: none;
	}

	.properties_misc {
		.complains {
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto;
			grid-column-gap: 5px;
			margin-bottom: 10px;
		}
	}

	.container {
		padding: 6px;
	}
}


.channel_perm_tbl .value {
	width: 60px;
}


.group_box {
	display: grid;
	grid-template-rows: min-content;

	.header {
		float: left;
		margin-bottom: 2px;
	}

	.content {
		background: rgba(0, 0, 0, .035);
		border: lightgray solid 1px;
		border-radius: 0 2px;
		padding: 6px;
	}
}

/* Channel edit/create modal */
.settings_audio {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-gap: 10px;

	.custom {
		display: grid;
		grid-template-columns: min-content auto;
		grid-template-rows: repeat(auto-fill, min-content);
		grid-column-gap: 5px;

		select {
			height: fit-content;
		}

		.quality {
			display: inline-grid;
			grid-template-columns: auto min-content;
			grid-column-gap: 5px;
		}
	}
}

.settings_advanced {
	display: grid;
	grid-template-columns: repeat(auto-fill, max-content);
	grid-template-rows: repeat(auto-fill, max-content);
	grid-gap: 5px;

	> div:first-of-type {
		grid-column: auto / span 2;
	}

	.max_limited {
		width: 100%;
		display: inline-flex;
		input[type="number"] {
			width: 75px;
		}
	}

	.group_box {
		fieldset, fieldset > div {
			width: 100%;
		}
	}
}

.horizontal-stretch {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.container-permissions {
	display: flex;
	height: 100%;
}

.permission-explorer {
	width: 100%;
	display: grid;
	grid-template-rows: min-content auto min-content;
	grid-gap: 5px;

	.bar-filter {
		display: grid;
		grid-gap: 5px;
		grid-template-columns: max-content auto max-content;

		input[type="text"] {
			width: 100%;
		}

	}

	&.disabled {
		pointer-events: none;

		.overlay-disabled {
			display: block;
		}

		input {
			background-color: #00000033;
		}
	}

	.overlay-disabled {
		display: none;
		position: absolute;
		background-color: #00000033;
		z-index: 1000;
		height: 100%;
		width: 100%;
	}

	.list {
		display: flex;
		position: relative;
		flex-direction: column;
		border: lightgray solid 2px;
		user-select: none;
		padding-bottom: 2px;
		overflow-y: scroll;
		overflow-x: hidden;

		.header {
			position: sticky;
			top: 0;
			z-index: 1;
			background-color: lightgray;
			padding-left: 0!important;

			& > div {
				border: grey solid;
				border-width: 0 2px 0 0;
				padding-left: 2px;
			}

			& > div:last-of-type {
				border: none;
			}
		}

		& > .entry {
			padding-left: 4px;
		}

		.entry {
			display: grid;
			grid-template-columns: auto 100px 100px 100px 100px;

			& > div {
				padding-left: 2px;
			}

			&.selected {
				background-color: #11111122;
			}

			&.unset {
				& > .permission-value, & > .permission-skip, & > .permission-negate {
					visibility: hidden;
				}
				& > .permission-name {
					color: lightgray;
				}
			}
		}

		.group {
			grid-template-columns: auto;
			grid-template-rows: auto auto;

			.group-entries {
				margin-left: 50px;
			}


			.title {
				&.selected {
					background-color: #11111122;
				}
			}
		}

		.arrow {
			cursor: pointer;
			pointer-events: all;
			width: 7px;
			height: 7px;
			padding: 0;
			margin-right: 5px;
			margin-left: 3px;
		}

		input {
			border: none;
			background: transparent;
			vertical-align: text-bottom;
			max-width: 90%;
		}

		.checkbox {
			margin-top: 1px;
			margin-left: 1px;
			display: block;
			position: relative;
			padding-left: 35px;
			margin-bottom: 12px;
			cursor: pointer;
			font-size: 22px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			/* Hide the browser's default checkbox */
			input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}

			.checkmark {
				position: absolute;
				top: 0;
				left: 0;
				height: 16px;
				width: 16px;
				background-color: #eee;

				&:after {
					content: "";
					position: absolute;
					display: none;

					left: 6px;
					top: 2px;
					width: 5px;
					height: 10px;
					border: solid white;
					border-width: 0 3px 3px 0;
					-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}

			&:hover input ~ .checkmark {
				background-color: #ccc;
			}

			input:checked ~ .checkmark {
				background-color: #2196F3;
			}

			input:checked ~ .checkmark:after {
				display: block;
			}
		}
	}
}

.container-ban-type {
	margin: 5px;
}

.arrow {
	display: inline-block;
	border: solid black;
	border-width: 0 3px 3px 0;
	padding: 3px;

	&.right {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	&.left {
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
	}

	&.up {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}

	&.down {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
}

.layout-group-server, .layout-group-channel, .layout-channel, .layout-client, .layout-client-channel {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: stretch;

	& > div {
		margin: 5px;
	}

	.list-group-server, .list-group-channel, .list-group-server-clients, .list-channel {
		border: grey solid 1px;
		position: relative;
		width: 175px;
		flex-grow: 0;

		.entries {
			display: table;
			position: absolute;
			top: 0; bottom: 0;
			left: 0; right: 0;
			min-width: 100%;
		}
	}

	.list-group-server, .list-group-channel {
		border: grey solid 1px;
		user-select: none;
		overflow: auto;
		position: relative;

		.group {
			display: block;
			white-space: nowrap;
			cursor: pointer;

			.icon, .icon_empty {
				margin-right: 3px;
			}

			.name.savedb {
				color: blue;
			}
			.name.default {
				color: black;
				font-weight: bold;
			}

			&.selected {
				background-color: blue;

				.name.savedb {
					color: white;
				}
			}
		}
	}
}

.layout-group-server {
	.list-group-server { }

	.permission-explorer {
		flex-grow: 70;
	}

	.list-group-server-clients {
		flex-grow: 0;
		width: 200px;
	}
}

.layout-channel, .layout-client-channel {
	.list-channel {
		display: flex;
		flex-direction: column;

		overflow: auto;

		.channel {
			cursor: pointer;
			display: block;
			width: 100%;
			height: max-content;
			white-space: nowrap;

			.icon, .icon_empty {
				margin-right: 3px;
			}

			&.selected {
				background-color: blue;
			}
		}
	}
}

.layout-client, .layout-client-channel {
	.client-info {
		display: flex;
		flex-direction: column;
		width: 200px;

		& > div:not(.list-channel) {
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: max-content;
		}

		.client-info {
			input {
				pointer-events: none;
			}
		}

		.list-channel {
			flex-grow: 1;
		}
	}
}

.group-assignment-list {
	.group-list {
		border: lightgray solid 1px;
		padding: 3px;

		.group-entry {
			display: flex;
			flex-direction: row;
			height: max-content;
		}

		.checkbox {
			margin-top: 1px;
			margin-left: 1px;
			display: block;
			position: relative;
			padding-left: 18px;
			margin-bottom: 12px;
			cursor: pointer;
			font-size: 22px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;

			/* Hide the browser's default checkbox */
			input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
				display: none;
			}

			.checkmark {
				position: absolute;
				top: 0;
				left: 0;
				height: 16px;
				width: 16px;
				background-color: #eee;
				margin-right: 4px;

				&:after {
					content: "";
					position: absolute;
					display: none;

					left: 5px;
					top: 1px;
					width: 6px;
					height: 12px;
					border: solid white;
					border-width: 0 3px 3px 0;
					-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}

			&:hover:not(.disabled) input ~ .checkmark {
				background-color: #ccc;
			}

			input:checked ~ .checkmark {
				background-color: #2196F3;
			}

			input:checked ~ .checkmark:after {
				display: block;
			}

			&.disabled {
				user-select: none;
				pointer-events: none;
				cursor: not-allowed;

				.checkmark {
					background-color: #00000055;
					&:after {
						border-color: #00000055;
					}
				}
			}
		}
	}
}