TeaWeb/shared/css/modal-settings.scss

.modal .settings_audio {
	display: flex;
	flex-direction: column;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	margin: 3px;
	> div {
		margin: 2px;
	}

	a {
		align-self: center;
	}

	.group_box {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;

		&.sound {
			flex-shrink: 1;

			.content {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.settings-device {
		display: flex;
		flex-direction: column;
		width: 100%;

		a {
			flex-grow: 0;
		}

		.settings-device-error {
			display: none;

			width: 100%;
			margin-bottom: 3px;
			padding: 2px;

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

			vertical-align: center;
			border: darkred 2px solid;
			border-radius: 4px;
			background: #be00006b;
		}

		.settings-device-select {
			display: flex;
			flex-direction: row;
			justify-content: stretch;

			> div {
				flex-grow: 1;
				flex-shrink: 1;
			}

			select {
				flex-grow: 1;
				margin-left: 5px;
				width: 100%;
			}
		}
	}

	.settings-vad-container {
		display: flex;
		flex-direction: row;
		margin-top: 5px;

		> div {
			width: 50%;
		}

		fieldset {
			input {
				vertical-align: text-bottom;
			}
		}

		.settings-vad {
			display: flex;
			flex-direction: column;
		}

		.settings-vad-impl {
			display: flex;
			justify-content: space-around;
			padding: 5px;

			> div {
				align-self: center;
			}

			.settings-vad-impl-entry {
				display: none;
			}
		}

		.property {
			display: flex;
			flex-direction: row;

			.key {
				width: 120px;
				margin-right: 5px;
			}

			&.ppt-delay {
				margin-top: 5px;
				.value {
					display: inline-block;
					position: relative;

					&:after {
						position: absolute;
						top: 1px;
						right: .5em;
						transition: all .05s ease-in-out;
					}

					&:hover::after {
						right: 1.5em;
					}

					&::after {
						content: 'ms';
					}
				}
			}
		}
	}

	.sound-settings {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.property {
			width: 100%;
			flex-shrink: 0;
			flex-grow: 0;

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

			.key {
				width: 150px;

				&.muted-sounds {
					width: 230px;
				}
			}

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

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

				&.master-volume {
					input {
						width: 100%;
					}

					a {
						margin-left: 5px;
						width: 50px;
						text-align: right;
					}
				}
			}
		}

		.sound-list {
			margin-top: 5px;

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

			.column {
				&.sound-name {
					width: calc(100% - 150px);
				}

				&.sound-activated {
					width: 150px;
					flex-grow: 0;

					input {
						margin-left: 75px;
					}
				}
			}

			.sound-list-header {
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				flex-direction: row;
				height: 20px;

				.column {
					border: 1px solid lightgray;
					text-align: center;
				}
			}

			.sound-list-entries-container {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: start;
				overflow-y: auto;

				min-height: 400px;
				max-height: 400px;

				.entry {
					display: flex;
					flex-direction: row;

					.column {
						margin-left: 2px;
					}

					cursor: pointer;

					&.selected {
						background-color: blue;
					}

					&:hover {
						background-color: #00000022;
					}

					.button-playback:hover {
						background-color: #00000022;
					}
				}

				&.scrollbar {
					.column {
						&.sound-name {
							width: calc(100% - 150px + 60px)
						}
					}
				}
			}
		}

		.sound-list-filter {
			margin-top: 3px;

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

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

			a {
				margin-right: 8px;
			}
		}
	}
}

.modal .settings-translations {
	margin: 5px;
	.setting-list {
		user-select: none;

		display: flex;
		flex-direction: column;

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

			overflow-y: auto;

			border: solid 1px lightgray;
			padding: 2px;
			background: #33333318;

			height: 50%;
			min-height: 50%;
			max-height: 50%;

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

				.default { }

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

				&.translation:not(.default) {
					padding-left: 15px;
				}

				&.translation {
					cursor: pointer;
				}

				&.repository {
					.name {
						font-weight: bold;
					}
				}

				&.selected {
					background: #0000FF77;
				}


				.button {
					cursor: pointer;

					&:hover {
						background-color: #00000010;
					}
				}
			}
		}

		.management {
			width: 100%;

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

			margin-top: 5px;
			float: right;

			.space {
				flex-grow: 1;
			}
		}

		.restart-note {
			width: 100%;

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

			margin-top: 5px;

			p {
				margin: 0;
			}
		}
	}
}

/* The info modal for the translations */
.entry-info-container {
	display: flex;
	flex-direction: column;

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

		.key {
			width: 100px;
		}

		.value {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
		}

		&.property-repository {
			p {
				margin: 0;
			}

			.button {
				cursor: pointer;

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

				margin-right: 5px;

				&:hover {
					background: #00000011;
				}
			}
		}

		&.property-contributors {
			.value {
				display: flex;
				flex-direction: column;
			}
			.contributor {
				display: block;
			}
		}
	}
}

.modal .settings-general {
	padding: 5px;

	.not-connected {
		/* display: none; */
	}

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

		.connected-info {
			color: green;
		}

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

			.key {
				flex-grow: 0;
				flex-shrink: 0;
				width: 140px;
			}

			&.premium {
				.premium {
					color: green;
				}

				.non-premium {
					color: red;
				}
			}
		}

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

			.divider {
				flex-grow: 0;
				flex-shrink: 0;
				width: 2px;

				background: lightgray;
			}

			.container-info, .container-actions {
				flex-grow: 1;
				flex-shrink: 1;
				width: 50%;

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

			.container-actions {
				display: flex;
				flex-direction: column;
				justify-content: center;

				button {
					width: 150px;

					align-self: center;
				}
			}
		}
	}
}

.modal .settings-profiles {
	margin: 5px;
	> div:not(:first-of-type) {
		margin-top: 5px;
	}

	.profile-status-container {
		display: flex;
		flex-direction: row;

		justify-content: space-between;
	}

	.error-message {
		color: red;
	}

	.profile-list {
		user-select: none;

		display: flex;
		flex-direction: column;

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

			overflow-y: auto;

			border: solid 1px lightgray;
			padding: 2px;
			background: #33333318;

			height: 50%;
			min-height: 50%;
			max-height: 50%;

			.entry {
				display: flex;
				flex-direction: row;
				justify-content: stretch;
				cursor: pointer;

				&.default {
					.name {
						font-weight: bold;
					}
				}

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

				&.selected {
					background: #0000FF77;
				}


				.button {
					cursor: pointer;

					&:hover {
						background-color: #00000010;
					}
				}
			}
		}

		.management {
			width: 100%;

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

			margin-top: 5px;
			float: right;

			.space {
				flex-grow: 1;
			}

			button:not(:first-of-type) {
				margin-left: 5px;
			}
		}
	}

	.general-settings {
		display: flex;
		flex-direction: column;
		justify-content: start;

		.setting {
			&:not(:first-of-type) {
				margin-top: 5px;
			}

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

			.key {
				flex-grow: 0;
				flex-shrink: 0;
				width: 200px;
			}

			input, div {
				flex-grow: 1;
				flex-shrink: 1;
			}

			.select-container {
				text-align: right;
			}
		}
	}

	.identity-settings {
		display: none;

		&.active {
			display: block;
		}

		&.identity-settings-teaforo {
			/*
			.connected, .disconnected {
				display: none
			}
			*/
		}

		&.identity-settings-teamspeak {
			.property {
				&:not(:first-of-type) {
					margin-top: 5px;
				}

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

				.key {
					width: 200px;
				}

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

					input {
						width: 100%;
					}
				}

				&.level {
					.value {
						display: flex;
						flex-direction: row;
						justify-content: stretch;

						button {
							margin-left: 5px;
						}
					}
				}
			}

			.identity-undefined {
				text-align: center;
			}

			.manage {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 5px;
			}
		}
	}
}

.container-teamspeak-import {
	.error {
		color: red;
		/* margin-bottom: 5px; */
	}

	.success {
		color: green;
	}

	.input-file {
		display: none;
	}

	.load-data {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.buttons {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			flex-direction: row;
			justify-content: end;

			button:not(:first-of-type) {
				margin-left: 20px;
			}
		}
	}

	.footer {
		margin-top: 5px;
		text-align: right;
		margin-bottom: 5px;

		.button-import {
			width: 100px;
		}
	}
}

.container-teamspeak-improve {
	display: flex;
	flex-direction: column;

	.property {
		&:not(:first-of-type) {
			margin-top: 5px;
		}

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

		.key {
			display: flex;
			flex-direction: row;
			flex-grow: 0;
			flex-shrink: 0;
			width: 120px;

			.help-tagged {
				width: 80px;
			}
		}

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

			input {
				width: 100%;
			}
		}
	}

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

		.property {
			margin-top: 0px;
		}
	}

	.buttons {
		margin-top: 5px;
		margin-bottom: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		button  {
			width: 100px;
		}
	}

	.help-tip-container {
		margin-left: 5px;
	}
}