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

:global {
	.modal-avatar-list {
		display: flex!important;;
		flex-direction: row!important;;

		.container-list {
			width: 50%;

			margin-top: 5px;

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

			.column {
				&.column-username {
					width: calc(50% - 100px);
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&.column-unique-id {
					width: calc(50% - 100px);
					overflow: hidden;
					text-overflow: ellipsis;
				}

				&.column-size {
					width: 75px;
					flex-grow: 0;
					flex-shrink: 0;

					text-align: center;
				}

				&.column-timestamp {
					width: 150px;
					flex-grow: 0;
					flex-shrink: 0;

					text-align: center;
				}
			}

			.list-header {
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				flex-direction: row;

				.column {
					border: 1px solid lightgray;
					text-align: center;
				}
			}

			.list-entries-container {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: start;
				overflow-y: auto;
				min-height: 250px;

				.entry {
					display: flex;
					flex-direction: row;

					.column {
						margin-left: 2px;
					}

					cursor: pointer;

					&.selected {
						background-color: lightblue;
					}
				}

				&.scrollbar {
					.column-username {
						width: calc(50% - 100px + 30px)
					}

					.column-unique-id {
						width: calc(50% - 100px + 30px)
					}
				}
			}
		}

		.container-info {
			margin-left: 10px;

			position: relative;
			width: 50%;

			.container-data {
				width: 100%;
			}

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

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

					width: 302px;
					height: 302px;

					background-color: whitesmoke;
					border: 1px solid black;
					border-radius: 2px;

					position: relative;
					overflow: hidden;

					> div {
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;

						position: absolute;
					}
				}

				.container-image-data {
					margin-left: 10px;

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

					a {
						text-align: center;
					}

					.form-group {
						width: 100%;
						margin-bottom: 0px;
					}
				}
			}

			.container-buttons {
				width: 100%;
				margin-top: 20px;

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

			.disabled-overlay {
				position: absolute;

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

				background-color: gray;

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

				a {
					text-align: center;
				}
			}
		}
	}

	.modal-avatar-upload {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

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

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

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

			input[type="file"] {
				display: none;
			}
		}

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

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

			.title {
				font-size: 1.2em;
				font-weight: bold;

				border-bottom: 1px solid gray;
			}

			.previews {
				flex-grow: 0;
				flex-shrink: 0;

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

				align-self: center;

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

					width: 11rem;
					min-width: 11rem;
					max-width: 11rem;

					height: 13rem;
					min-height: 13rem;
					max-height: 13rem;

					text-align: center;

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

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

						.avatar {
							position: relative;

							height: 1em;
							width: 1em;

							overflow: hidden;
							border-radius: 50%;

							> img {
								position: absolute;

								top: 0;
								left: 0;

								height: 100%;
								width: 100%;
							}
						}
					}

					> a {
						margin-top: 1em;
					}

					&.preview-client-info {
						.container-avatar {
							font-size: 10rem;
						}
					}

					&.preview-chat {
						.container-avatar {
							font-size: 2.5rem;
						}
					}

					&.preview-chat-entry {
						.container-avatar {
							font-size: 2rem;
						}
					}
				}
			}
		}
	}
}

@media all and (max-width: 40rem) {
	:global {
		.modal-avatar-upload .container-preview .previews {
			flex-direction: column;
		}
	}
}