TeaWeb/shared/css/modal-banlist.scss

.banlist {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	flex-grow: 1;

	height: 100%;
	width: 100%;

	.frame-container {
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		flex-grow: 1;

		.top-menu {
			display: flex;
			flex-direction: row;
			justify-content: stretch;
			flex-grow: 0;
			flex-shrink: 0;
			margin-bottom: 5px;

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

				margin-right: 5px;
			}

			.search {
				flex-grow: 1;

				input {
					width: 100%;
				}
			}
		}

		.entry-container {
			display: inline-flex;
			flex-grow: 1;
			margin-bottom: 5px;
			position: relative;

			width: 100%;
			height: 100%;

			.table-container {
				width: 100%;
			}

			.ban-entry.selected {
				background: blue;
			}

			.ban-entry-global {
				color: red;
			}

			.ban-entry {
				.field-properties {
					a {
						display: block;
					}
				}
				.field-reason {
					word-wrap: break-word;
					white-space: pre-wrap;
				}

				&.ban-entry-own-bold {
					font-weight: bold;
				}
			}

			table {
				border: grey solid 1px;

				display: block;
				width: 100%;
				height: 100%;
				text-align: left;
				min-width: 610px;

				tr {
					td, th {
						text-align: center;
						vertical-align: top;

						&:nth-child(1) {
							width: 25%;
							text-align: left;
						}
						&:nth-child(2) {
							width: 25%;
							float: left;
						}
						&:nth-child(3) {
							width: 25%;
							float: left;
						}
						&:nth-child(4) {
							width: 25%;
							float: left;
						}
					}
				}

				th {
					border: grey solid;
					border-width: 0 0 1px 1px;

					&:first-of-type {
						border-width: 0 0 1px 0;
					}
				}

				tbody {
					height: calc(100% - 22px);
					overflow-y: auto;
					overflow-x: hidden;
				}
				th, td, thead,tbody {
					display: block;
				}
				tr {
					display: inline-block;
					width: 100%;

					&:nth-of-type(even) {
						background-color: lightgray;
					}
				}
				td,th {
					float: left;
				}
			}
		}

		.bottom-menu {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-grow: 0;
			flex-shrink: 0;
			margin-bottom: 5px;

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

				div {
					margin-left: 2px;
					margin-right: 2px;
				}
			}

			input {
				vertical-align: bottom;
			}
		}
	}
}