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

$required_notab_height: 800px;

.container-channel-edit-general, .tab-channel-edit-general {
	flex-shrink: 0;

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

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

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

	.container-icon {
		width: 30px;

		margin-left: 10px;

		.button-select-icon {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;

			position: absolute;

			.icon-node {
				cursor: pointer;

				height: 100%;
				width: 100%;

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

				> div {
					vertical-align: middle;
					text-align: center;
				}
			}
		}
	}
}

.tab-tag-channel-edit-general {
	display: none!important;
}

.tab-channel-edit-general {
	padding: 5px;
	display: none;
}

.container-channel-edit-general {
	display: flex;
	flex-shrink: 0;
}

@media (max-height: $required_notab_height) {
	.tab-tag-channel-edit-general {
		display: inline-block!important;
	}

	.tab-channel-edit-general {
		display: flex;
	}

	.container-channel-edit-general {
		display: none;
	}
}


.container-channel-settings-standard {
	min-height: 300px;

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

	.container-divider {
		border-left:1px solid #000;
		height: auto;

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

	.container-left, .container-right {
		display: flex;
		justify-content: space-around;
		align-self: center;

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

		width: 50%;
	}

	.container-right {
		flex-direction: column;
		align-content: stretch;
		vertical-align: center;

		margin: 20px 50px 20px 50px;
	}

	.container-channel-type {
		padding: 5px;

		border: lightgrey 2px solid;
		border-radius: 2px;
		text-align: left;
	}
}

.container-channel-settings-audio {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	justify-content: stretch;

	.container-divider {
		border-left:1px solid #000;
		height: auto;

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

	.container-presets, .container-custom {
		display: flex;
		justify-content: space-around;
		text-align: left;
		align-self: center;

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

		width: 50%;
	}

	.container-custom {
		margin: 20px 50px 20px 50px;
		justify-content: stretch;

		> .group_box {
			flex-grow: 1;
			flex-shrink: 1;
		}
	}
}

.container-channel-settings-permission {
	flex-grow: 1;

	display: flex;
	justify-content: space-evenly;

	align-items: center;


	.container-left, .container-right {
		margin-top: 20px;
		margin-bottom: 20px;

		display: flex;
		justify-content: space-around;
		align-self: center;

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

		width: 50%;

		> .group_box {
			flex-grow: 1;
			flex-shrink: 1;
		}

		.form-placeholder {
			display: block;
			visibility: hidden;
		}
	}

	.container-left {
		margin-left: 10%;
		margin-right: 10px;
	}

	.container-right {
		margin-right: 10%;
		margin-left: 10px;
	}
}

.container-channel-settings-advanced {
	flex-grow: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	.container-max-users, .container-other {
		width: 100%;
	}

	.container-max-users {
		margin-top: 20px;

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

		.group_box:not(:first-of-type) {
			margin-left: 40px;
		}

		> .group_box {
			flex-grow: 1;
			flex-shrink: 1;
		}

		fieldset {
			padding-top: 1rem;
		}

		.form-row {
			margin-left: 20px;

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

			.bmd-form-group {
				padding-top: 0;
			}

			label {
				width: 100px;
			}
		}
	}
}