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

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

.query-create {
	display: flex!important;
	flex-direction: column!important;

	.row-name {
		width: 100%;

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

		input {
			flex-grow: 1;
			flex-shrink: 1;
			margin-left: 5px;
		}
	}

	.buttons {
		margin-top: 5px;
		text-align: right;
	}
}

.query-created {
	display: flex!important;
	flex-direction: column!important;

	.buttons {
		text-align: right;
	}

	.form-row {
		margin-right: 0!important;
		margin-left: 0!important;

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

		.icon_x32 {
			align-self: center;
			margin-right: 5px;

			cursor: pointer;
		}

		.form-group {
			flex-grow: 1;
		}
	}
}

.modal-body.modal-query-manage {
	display: flex!important;
	flex-direction: row!important;
	justify-content: stretch!important;

	padding: 1em!important;

	min-width: 25em!important; /* 23em to be exact */
	min-height: 20em!important;

	width: 60em; /* recommend width */
	height: 50em;

	@include user-select(none);

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

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

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

	.left, .right {
		flex-grow: 1;
		flex-shrink: 1;

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

		> .title {
			flex-grow: 0;
			flex-shrink: 0;
			margin-bottom: .5em;

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

			a {
				font-weight: bold;
				color: #e0e0e0;

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

				font-size: 1.05em;
				min-width: 5em;

				align-self: flex-end;
				line-height: normal;

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

			button {
				flex-grow: 0;
				flex-shrink: 1;

				height: 2em;
				font-size: .9em;

				width: 10em;
				min-width: 5em;

				align-self: center;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.left {
		margin-right: .4em;
		min-width: 10em;

		.container-list {
			flex-grow: 1;

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

			border-radius: 0.2em;
			border: 1px solid #1f2122;
			background-color: #28292b;

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

				min-height: 5em;

				position: relative;

				overflow-x: hidden;
				overflow-y: auto;
				@include chat-scrollbar-vertical();

				.container-empty, .container-error {
					position: absolute;

					top: 0;
					bottom: 0;
					left: 0;
					right: 0;

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

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

					background-color: #28292b;
					color: hsla(0, 0%, 30%, 1);
				}

				.container-error {
					color: #732626;
				}

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

					flex-shrink: 1;
					min-width: 4em;

					padding-left: .5em;
					padding-right: .5em;

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

					cursor: pointer;

					&:hover {
						background-color: #2c2d2f;
					}

					&.selected {
						background-color: #1a1a1b;
					}
				}
			}

			.container-search {
				flex-shrink: 0;
				flex-grow: 0;

				padding: 0 .5em;

				border-top: 1px solid #1f2122;

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

				button {
					flex-grow: 0;
					flex-shrink: 1;

					height: 2em;
					min-width: 2em;

					align-self: center;
					margin-top: .8em;

					margin-right: .5em;

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

				.form-group {
					flex-grow: 1;
					flex-shrink: 1;

					min-width: 5em;
				}
			}
		}
	}

	.right {
		min-width: 10em;
		margin-left: .4em;

		.container-details {
			flex-grow: 1;

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

			.detail {
				flex-shrink: 0;

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

				margin-bottom: 1em;

				.title, .title a {
					text-transform: uppercase;
					color: #557edc;

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

				.value {
					@include user-select(text);

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

				&.unique-id {
					.title {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;

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

							width: 1.2em;
							height: 1.2em;

							align-self: center;
							margin-left: .25em;

							cursor: pointer;
							border-radius: .2em;

							&:hover {
								background: #28292b;
							}

							margin-bottom: .2em; /* "text sub" */

							> div {
								align-self: center;
							}

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

			.spacer { flex-grow: 1; flex-shrink: 1; min-height: 0; }

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

				button {
					flex-shrink: 1;
					min-width: 5em;

					height: 2em;
					font-size: .9em;

					width: 14em;

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

					&:not(:first-of-type) {
						margin-left: 1em;
					}
				}
			}
		}
	}

	.container-seperator {
		background: transparent;
	}
}