Update compendium-browser.less

compendium-browser.less

@@ -1,16 +1,19 @@
-#compendium .directory-footer .compendium-browser-btn {
+@color_1: #bbb;
+
+#compendium {
+	.directory-footer {
+		.compendium-browser-btn {
 			margin-top: 5px;
-}
+		}
-
-#compendium .directory-footer {
 		display: block;
+	}
 }
-
 .compendium-browser {
 	overflow-y: hidden !important;
 	max-width: 1100px;
 	max-height: 90vh;
-
+	min-width: 630px;
+	min-height: 500px;
 	.window-content {
 		overflow-y: hidden !important;
 		height: 100%;
@@ -28,6 +31,7 @@
 						height: 100%;
 						ul {
 							overflow-y: auto;
+							overflow-x: hidden;
 							height: 100%;
 						}
 					}
@@ -39,12 +43,9 @@
 			}
 		}
 	}
-
 	.tabs {
 		max-height: 2em;
-    border-bottom: solid #782e22;
+		border-bottom: 1px solid var(--color-border-light-primary);
-    a {
-    }
 	}
 	.tabContainer {
 		height: calc(100% - 2em);
@@ -54,17 +55,15 @@
 			overflow: scroll;
 		}
 	}
-
 	.control-area {
 		position: sticky;
 		display: block;
 		min-width: 250px;
-    max-width: 400px;
+		max-width: 45%;
-    width: 300px;
+		width: 350px;
 		height: 100%;
 		padding-right: 5px;
-    overflow: scroll;
+		overflow: auto;
-
 		button {
 			background: rgba(0, 0, 0, 0.05);
 			border: 1px solid #bbb;
@@ -72,34 +71,30 @@
 			margin-top: 5px;
 			padding: 2px;
 		}
-
 		.filtercontainer {
 			border: 1px solid #bbb;
 			border-radius: 5px;
 			margin-top: 5px;
 			padding: 2px;
-
 			h3 {
 				margin: 0;
 				cursor: pointer;
 			}
-
+			dl {
-      dl,
+				margin: 5px 0;
+			}
 			div {
 				margin: 5px 0;
 			}
-
 			dt {
 				display: inline-block;
 				width: 40%;
 				padding-left: 5px;
 			}
-
 			dd {
 				display: inline-block;
 				width: 58%;
 				margin-left: 0;
-
 				select {
 					width: 100%;
 				}
@@ -110,7 +105,6 @@
 				vertical-align: middle;
 				line-height: 32px;
 				margin: 2px 0;
-
 				label {
 					padding: 5px;
 				}
@@ -132,37 +126,62 @@
 			}
 		}
 	}
-
+	.list-area {
+		position: sticky;
+		display: flex;
+		min-width: 250px;
+		max-width: 55%;
+		width: 400px;
+		height: 100%;
+		padding-right: 5px;
+		.loading {
+			flex: 0;
+			text-align: center;
+		}
+	}
 	.browser {
 		height: 100%;
 		overflow-y: hidden !important;
-
 		.window-content {
 			overflow-y: hidden !important;
 		}
-
 		ul {
 			float: right;
 			display: block;
 			min-width: 335px;
-      width: 785px;
 			margin: 0;
 			height: 100%;
 			overflow: auto;
 			padding-left: 5px;
-
 			.filter-tags {
 				display: none;
 			}
-
 			li {
 				span {
 					white-space: nowrap;
 					overflow: hidden;
 				}
+				.spell-tags {
+					span.negative {
+						color: @color_1;
+					}
+				}
+				.item-name {
+					span {
+						white-space: break-spaces;
+						height: inherit;
+						display: block;
+					}
+				}
+				.feat-tags {
+					span {
+						white-space: break-spaces;
+						height: inherit;
+						display: block;
+					}
+				}
 			}
 		}
-
 		.spacer {
 			display: inline-block;
 			min-width: 5px;
@@ -172,26 +191,59 @@
 			min-width: 15px;
 		}
 	}
-
+	.item-browser {
-  .item-browser,
-  .feat-browser,
-  .spell-browser {
 		li {
 			cursor: default;
 			vertical-align: middle;
-      line-height: 32px;
+			line-height: 16px;
 			margin: 2px 0;
-
+			height: 32px;
 			.item-image {
 				max-width: 32px;
 				height: 32px;
 			}
 			.item-name {
-        height: 32px;
 				padding-left: 5px;
+				flex: 2;
+			}
+			.feat-tags {
+				text-align: right;
+				margin-right: 3px;
+				margin-left: 3px;
+				text-transform: capitalize;
+				height: 32px;
+			}
+			.item-tags {
+				text-align: right;
+				margin-right: 3px;
+				margin-left: 3px;
+				text-transform: capitalize;
+				height: 32px;
+			}
+		}
+	}
+	.feat-browser {
+		li {
+			cursor: default;
+			vertical-align: middle;
+			line-height: 16px;
+			margin: 2px 0;
+			height: 32px;
+			.item-image {
+				max-width: 32px;
+				height: 32px;
+			}
+			.item-name {
+				padding-left: 5px;
+				flex: 2;
+			}
+			.feat-tags {
+				text-align: right;
+				margin-right: 3px;
+				margin-left: 3px;
+				text-transform: capitalize;
+				height: 32px;
 			}
-
-      .feat-tags,
 			.item-tags {
 				text-align: right;
 				margin-right: 3px;
@@ -201,8 +253,36 @@
 			}
 		}
 	}
-
 	.spell-browser {
+		li {
+			cursor: default;
+			vertical-align: middle;
+			line-height: 16px;
+			margin: 2px 0;
+			height: 32px;
+			.item-image {
+				max-width: 32px;
+				height: 32px;
+			}
+			.item-name {
+				padding-left: 5px;
+				flex: 2;
+			}
+			.feat-tags {
+				text-align: right;
+				margin-right: 3px;
+				margin-left: 3px;
+				text-transform: capitalize;
+				height: 32px;
+			}
+			.item-tags {
+				text-align: right;
+				margin-right: 3px;
+				margin-left: 3px;
+				text-transform: capitalize;
+				height: 32px;
+			}
+		}
 		.spell {
 			.spell-level {
 				text-align: center;
@@ -219,7 +299,6 @@
 			}
 		}
 	}
-
 	.npc-browser {
 		.npc {
 			cursor: default;
@@ -229,14 +308,13 @@
 			.npc-image {
 				max-width: 64px;
 				height: 64px;
-      }
+				img {
-      .npc-image img {
 					width: 64px;
 					height: 64px;
 					border: none;
 					object-fit: contain;
 				}
-
+			}
 			.npc-line {
 				line-height: 25px;
 				padding: 9px 0 5px 5px;
@@ -258,24 +336,19 @@
 			}
 		}
 	}
-
 	.settings {
 		.settings-group {
 			border: 1px solid #bbb;
 			border-radius: 5px;
 			margin-top: 5px;
 			padding: 2px;
-
 			h3 {
 				margin: 0;
 				cursor: pointer;
 			}
-
 			label {
 				display: block;
 			}
-      input {
-      }
 			h4 {
 				display: inline-block;
 				vertical-align: middle;