TeaWeb/shared/css/static/modal-group-assignment.scss

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

:global {
	.modal-server-group-assignments {
		@include user-select(none);

		min-width: 25em!important;
		max-height: calc(100vh - 10rem)!important;
		min-height: 10em!important;

		width: 30em!important;

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

		background-color: #2f2f35;
		padding: .5em!important;

		.group-assignment-list {
			flex-grow: 1;
			flex-shrink: 1;
			min-height: 6em;

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

			color: #999999;

			a {
				flex-shrink: 0;
				flex-grow: 0;

				.htmltag-client {
					display: inline;
					color: #999999;
				}
			}

			.group-list {
				flex-shrink: 1;
				flex-grow: 1;
				min-height: 4em;

				padding: 3px;
				overflow-y: auto;

				border: 1px #161616 solid;
				border-radius: $border_radius_middle;
				background-color: #28292b;

				@include chat-scrollbar-vertical();

				.group-entry {
					flex-shrink: 0;
					flex-grow: 0;

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

					height: 1.75em;

					> * {
						flex-shrink: 0;
						flex-grow: 0;
						align-self: center;
					}

					a {
						flex-shrink: 1;
						flex-grow: 1;

						min-width: 6em;

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

					label {
						margin-right: .25em;
					}
				}

				.icon-container {
					align-self: center;
					margin-right: 4px;
					margin-left: 2px;
					margin-top: -2px;
				}

				a {
					align-self: center;
				}
			}
		}

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

			padding-top: 1em;

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