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

.modal .modal-bookmarks {
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: stretch;

	.bookmark-list {
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 75px;

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

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

			overflow-y: auto;

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

				> .name {
					cursor: pointer;
				}

				&.bookmark {
					&.selected {
						background-color: #0000FF77;
					}
				}

				&.directory {
					&.selected {
						> .name {
							background-color: #0000FF77;
						}
					}

					> .name {
						border: 0 solid gray;
						border-bottom: 1px solid #ad9d9d33;
					}
					.members {
						margin-left: 15px;
					}
				}
			}
		}
	}

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

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

		margin-top: 5px;
		text-align: right;

		button {
			margin-left: 5px;
		}


		.button-large {
			display: block;
		}

		.button-small {
			display: none;
		}
	}

	@media (max-width: 1000px) {
		.buttons {
			.button-large {
				display: none;
			}

			.button-small {
				display: block;
			}
		}
	}

	.group_box {
		flex-shrink: 1;

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


		&.gb-settings {
			overflow-y: auto;
		}

		&.gb-list {
			min-height: 100px; /* 25px header + 75px body */
		}
	}

	.bookmark-setting {
		.group_box {
			margin-top: 5px;
		}

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

			&:not(:first-of-type) {
				margin-top: 5px;
			}

			input, select, .default-channel-container {
				flex-grow: 1;
				flex-shrink: 1;
			}

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

				button {
					margin-left: 5px;
					max-width: 120px;
				}
			}

			.key {
				width: 160px;
				flex-grow: 0;
				flex-shrink: 0;
			}
		}

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

			.container-default-channel {
				flex-grow: 1;
				flex-shrink: 1;
			}
		}
	}
}

.modal .modal-bookmark-create {
	.property {
		margin-top: 5px;

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

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

			width: 150px;
		}

		select, input {
			flex-grow: 1;
			flex-shrink: 1;
		}
	}

	.buttons {
		text-align: right;

		button {
			min-width: 200px;
		}

		margin-bottom: 5px;
	}
}