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

.container {
	margin: 2px;
}

/* 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%;
		}
	}
}