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

@import "mixin";
@import "properties";

.modal-body.modal-permission-editor {
	padding: 0!important;

	display: flex!important;;
	flex-direction: column!important;;
	justify-content: stretch!important;;

	width: 1000000em; /* get us some width */
	min-height: 20em; /* Set it here, so we dont have a inner modal scroll */

	@include user-select(none);

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

		padding: 0!important;

		width: 100%;
		max-height: 90vh;
		min-height: 20em;
		height: 100000000px; /* enforce max height */
	}

	.header {
		height: 4em;
		background-color: #19191b;
		color: #e1e1e1;

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

		> .entry {
			flex-grow: 1;
			flex-shrink: 1;

			text-align: center;

			height: 100%;

			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.container > .left, .container > .right {
		max-height: 100%;

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

		> .header {
			flex-shrink: 0;
			flex-grow: 0;
		}

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

	.container >.right {
		z-index: 2; /* because the left container overlaps the right container once */

		width: 75%;
		min-width: 30em;

		background-color: #303036;

		.header {
			> .entry {
				position: relative;
				overflow: hidden;

				cursor: pointer;
				padding-bottom: 2px;

				a {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				&:hover {
					border: none;
					border-bottom: 2px solid #4e4e4e;

					padding-bottom: 0;

					&:before {
						position: absolute;
						content: '';

						margin-right: -10em;
						margin-left: -10em;
						margin-bottom: -.2em;
						bottom: 0;

						height: 100%;
						width: calc(100% + 20em);

						box-shadow: inset 0px -1.2em 3em -20px #424242;
					}
				}

				&.selected {
					border: none;
					border-bottom: 2px solid #0073d4;

					padding-bottom: 0;

					&:before {
						position: absolute;
						content: '';

						margin-right: -10em;
						margin-left: -10em;
						margin-bottom: -.2em;
						bottom: 0;

						height: 100%;
						width: calc(100% + 20em);

						box-shadow: inset 0px -1.2em 3em -20px #0073d4;
					}
				}
			}
		}

		.body {
			display: flex;
			flex-direction: column;
			justify-content: stretch;
			min-height: 16em;

			> .container { /* container permission editor */
				height: 100%;
				width: 100%;

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

				min-height: 10em;
				min-width: 30em;

				.permission-editor {
					display: flex;
					flex-direction: column;
					justify-content: stretch;
					width: 100%;
					padding: 5px;
				}
			}
		}
	}

	.container >.left {
		width: 25%;
		min-width: 10em;
		min-height: 10em;
		overflow: hidden;

		background-color: #222226;

		.header {
			font-weight: bold;

			> .entry {
				overflow: hidden;

				a {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			> * {
				font-size: 1.5em;
			}
		}

		.body {
			display: flex;
			flex-direction: column;
			justify-content: stretch;
			min-height: 16em;

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

				min-height: 15em;
				overflow-y: auto;

				flex-direction: column;
			}
		}


		/* server group left list layout */
		.container-view-server-groups, .container-view-channel-groups, .container-view-channel-permissions, .container-view-client-channel-permissions, .container-view-client-channel-permissions {
			height: 100%;
			width: 100%;

			.list-groups, .list-channel, .list-clients {
				color: #999999;

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

				overflow: auto;
				@include chat-scrollbar-vertical();
				@include chat-scrollbar-horizontal();

				width: 100%;

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

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

					height: max-content;

					min-width: 100%;
					width: max-content;

					.group, .channel, .client {
						padding-left: .25em;

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

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

						cursor: pointer;

						width: 100%;

						&:hover {
							background-color: #28282c;
						}

						&.selected {
							background-color: #111111;

							&.client {
								background-color: #1a1b1e;
							}
						}

						@include transition(background-color .25s ease-in-out);

						.icon-container, .icon {
							align-self: center;
							margin-right: .25em;
						}
					}
				}
			}

			.container-buttons {
				position: relative;

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

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

				height: 2.5em;
				width: 100%;

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

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

					cursor: pointer;

					background-color: #1b1b1b;

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

					&:disabled {
						background-color: hsla(0, 0%, 9%, 1);
					}
					@include transition(background-color .25s ease-in-out);

					img {
						width: 2.2em;
						height: 2.2em;

						align-self: center;
					}
				}
			}
		}

		.container-view-server-groups {
			position: relative;

			overflow: hidden;

			$animation_length: .3s;
			.container-group-list {
				flex-grow: 1;
				flex-shrink: 1;

				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

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

				&.hidden {
					@include transform(translateX(-100%));
				}
				@include transition($animation_length ease-in-out);
			}

			.container-client-list {
				flex-grow: 1;
				flex-shrink: 1;

				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

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

				.container-current-group {
					flex-shrink: 0;
					flex-grow: 0;

					display: flex;
					flex-direction: row;
					justify-content: stretch;
					
					background-color: #101012;
					color: #999999;
					padding-left: .25em;


					height: 1.5em;
					font-size: 1.125em;

					> .icon-container {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						height: 100%;
						margin-right: .25em;
					}

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

						height: 1.5em;
					}
				}

				&.hidden {
					@include transform(translateX(100%));
				}
				@include transition($animation_length ease-in-out);
			}
		}

		.container-view-client-permissions, .container-view-client-channel-permissions {
			.client-info {
				width: 100%;
				padding: .25em;
			}

			hr {
				border: none;
				border-top: 2px solid #1e1e1e;
			}
		}

		.container-view-client-channel-permissions {
			display: flex;
			flex-direction: column;
			justify-content: stretch;

		}
	}

	.container-seperator {
		width: 3px;
		height: unset!important;
		background-color: #222224!important;
	}
}

/* canvas permission editor */
//TODO: Some styling needed
.container-permissions-canvas {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	width: 100%;

	.container-permissions {
		padding: .5em;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.permission-explorer {
		min-width: 750px;
	}

	.switch {
		width: 5em;
	}

	.column-name {
		align-self: center;
		padding-left: 1em;
	}

	.entry-editor-container {
		@include chat-scrollbar-vertical();
	}
}

/* html permission editor */
.container-permissions-html {
	flex-grow: 1;
	flex-shrink: 1;

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

	min-height: 10em;
	width: 100%;

	.container-filter, .container-footer {
		flex-grow: 0;
		flex-shrink: 0;

		display: flex;
		flex-direction: row;
	}

	.container-filter {
		justify-content: stretch;
		height: 3em;

		> * {
			align-self: center;
		}

		.button-toggle-clients {
			flex-grow: 0;
			flex-shrink: 0;

			width: 16em;
			height: 2.5em;

			margin-right: 1em;
		}

		.container-input {
			flex-grow: 5;
			flex-shrink: 1;

			padding-top: 0!important;
			margin-bottom: 0!important;

			height: 2.5em;

			.bmd-label-floating {
				top: .5em;
			}

			&.is-filled, &:focus-within {
				.bmd-label-floating {
					top: -.4em;
				}
			}
		}

		.container-switchs {
			height: 2.5em;

			margin-left: 1em;

			position: relative;

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


			flex-grow: 1;
			flex-shrink: 1;
			max-width: 10em;
			min-width: 5em;

			color: #999999;

			> label {
				font-size: .75em;

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

				pointer-events: all;
				cursor: pointer;

				.switch {
					align-self: center;
				}

				a {
					padding-left: .25em;
					font-size: 1.1em;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.container-icon-select {
			position: relative;

			height: 2.5em;

			border-radius: .2em;
			margin-left: 1em;

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

			cursor: pointer;
			background-color: #121213;
			border: 1px solid #0d0d0d;

			.icon-preview {
				height: 100%;
				width: 3em;

				border: none;
				border-right: 1px solid #0d0d0d;

				display: flex;
				flex-direction: column;
				justify-content: space-around;

				> div {
					align-self: center;
				}

				> img {
					align-self: center;

					width: 1em;
					height: 1em;
				}

				@include transition(border-color $button_hover_animation_time ease-in-out);
			}

			.container-dropdown {
				position: relative;
				cursor: pointer;

				display: flex;
				flex-direction: column;
				justify-content: space-around;

				height: 100%;
				width: 1.5em;

				.button {
					text-align: center;

					.arrow {
						border-color: #999999;
					}
				}

				.dropdown {
					display: none;
					position: absolute;
					width: max-content;

					top: calc(2.5em - 1px);

					flex-direction: column;
					justify-content: flex-start;

					background-color: #121213;
					border: 1px solid #0d0d0d;
					border-radius: .2em 0 .2em .2em;

					right: -1px;

					.entry {
						padding: .5em;

						&:not(:last-of-type) {
							border: none;
							border-bottom: 1px solid #0d0d0d;
						}

						&:hover {
							background-color: #17171a;
						}
					}
				}

				&:hover {
					border-bottom-right-radius: 0;
					.dropdown {
						display: flex;
					}
				}
			}

			&:hover {
				background-color: #17171a;
				border-color: hsla(0, 0%, 20%, 1);

				.icon-preview {
					border-color: hsla(0, 0%, 20%, 1);
				}
			}

			@include transition(border-color $button_hover_animation_time ease-in-out);
		}
	}

	.container-mode {
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 5em;

		&.container-mode-permissions {
			.container-permission-list {
				width: 100%;
				color: #999999;

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

				min-height: 5em;

				.entry {
					width: 100%;

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

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

					height: 2em;
					border: none;
					border-bottom: 1px solid #1e2025;

					color: #535455;

					@mixin fixed-column($name, $width) {
						.column-#{$name} {
							display: flex;
							flex-direction: row;
							justify-content: stretch;

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

							width: $width;

							align-items: center;

							padding-left: 1em;

							border: none;
							border-right: 1px solid #1e2025;

							overflow: hidden;

							a {
								max-width: 100%;

								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}

					@include fixed-column(name, 6em);
					@include fixed-column(value, 6em);
					@include fixed-column(skip, 5em);
					@include fixed-column(negate, 5em);
					@include fixed-column(granted, 6em);

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

						.arrow {
							cursor: pointer;
							border-color: #e1e1e1;
						}

						.group-name {
							margin-left: .5em;
						}
					}

					.column-granted {
						border-right: none;
					}


					&.active {
						color: #e1e1e1;
					}

					&.group {
						color: #e1e1e1;
						font-weight: bold;
					}

					input {
						color: #e1e1e1;

						outline: none;
						background: transparent;
						border: none;

						height: 1.5em;
						width: 5em; /* the column width minus one */

						/* fix the column padding */
						padding-left: 1em;
						margin-left: -.5em; /* have a bit of space on both sides */

						border-bottom: 2px solid transparent;

						&:focus {
							border-bottom-color: #3f7dbf;
						}
						@include transition(border-bottom-color $button_hover_animation_time ease-in-out);
					}
				}

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

					min-height: 6em; /* TODO: Width */

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

					overflow-y: scroll;
					overflow-x: auto;

					@include chat-scrollbar-vertical();
					@include chat-scrollbar-horizontal();

					.entry {
						&.even {
							background-color: #25252a;
						}
						&:hover {
							background-color: #343a47;
						}
						/* We cant use this effect here because the odd/even effect would be a bit crazy then */
						//@include transition(background-color $button_hover_animation_time ease-in-out);
					}
				}

				.header {
					background-color: unset;

					color: #e1e1e1;
					font-weight: bold;

					.column-granted {
						margin-right: .5em; /* scroll bar */
						-moz-margin-end: 12px; /* moz scroll bar */
					}
				}
			}
		}

		&.container-mode-no-permissions {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			text-align: center;
			font-size: 2em;

			color: #222226;
		}
	}

	.container-footer {
		justify-content: flex-end;
		margin-top: .5em;
	}
}

.modal-group-add {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

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

		button {
			min-width: 6em;
		}
	}
}