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

	.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;
			}
		}
	}
}

.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-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
			}
			*/
		}
	}
}