Citation Explorer: Various styling adjustments

chrome/content/zotero/integration/citationExplorer.js

@@ -151,7 +151,7 @@ window.ZoteroDocumentCitations = {
 			await new Promise((resolve) => {
 				const domElem = document.querySelector('#citation-list-container');
 				ReactDOM.createRoot(domElem).render(<VirtualizedTable
-					id="citation-list"
+					id="citation-explorer-citations"
 					ref={(ref) => {
 						citationList = ref;
 						resolve();
@@ -184,9 +184,9 @@ window.ZoteroDocumentCitations = {
 
 		let filteredItems = rows.filter(item => !this._filteredItems.has(item.id));
 		if (!itemList) {
-			let domElem = document.querySelector('#item-list-container');
+			let domElem = document.querySelector('#zotero-items-tree');
 			itemList = await ItemTree.init(domElem, {
-				id: "document-collections",
+				id: "citation-explorer-items",
 				regularOnly: true,
 				columns: itemColumns,
 				shouldListenForNotifications: false,
@@ -296,8 +296,8 @@ window.ZoteroDocumentCitations = {
 					let d = diff(citation.properties.plainCitation, title);
 					title = d.map(([type, text]) => {
 						if (type == 0) return text;
-						if (type == -1) return `<span style="color: red; text-decoration: line-through">${text}</span>`;
-						if (type == 1) return `<span style="color: green">${text}</span>`;
+						if (type == -1) return `<span class="diff-deleted">${text}</span>`;
+						if (type == 1) return `<span class="diff-added">${text}</span>`;
 					}).join('');
 				}
 				return {

chrome/content/zotero/integration/citationExplorer.xhtml

@@ -100,7 +100,7 @@
 		</div>
 		
 		<div class="virtualized-table-container">
-			<div id="item-list-container"></div>
+			<div id="zotero-items-tree"></div>
 		</div>
 
 		<div class="button-container grid-padded-section">

scss/components/_citationExplorer.scss

@@ -1,5 +1,6 @@
 #zotero-citation-explorer-dialog {
 	min-height: 500px;
+	--split-button-icon-color: var(--accent-blue);
 
 	dialog {
 		max-height: 100vh;
@@ -10,6 +11,9 @@
 		margin: 0;
 	}
 
+	input + button {
+		margin-left: 8px;
+	}
 	
 	.citation-explorer-grid {
 		display: grid;
@@ -20,7 +24,7 @@
 		margin: -8px;
 		
 		.citation-explorer-grid-left {
-			border-right: solid 1px ThreeDShadow;
+			border-right: var(--material-border-quarternary);
 		}
 
 		.grid-padded-section {
@@ -42,7 +46,7 @@
 	
 	.virtualized-table-container {
 		height: 100%;
-		border-block: 1px solid ThreeDShadow;
+		border-block: var(--material-border-quarternary);
 	}
 
 	.virtualized-table .row {
@@ -60,9 +64,18 @@
 	}
 
 	.button-container {
-		border-bottom: 1px solid ThreeDShadow;
+		border-bottom: var(--material-border-quarternary);
 		display: flex;
 	}
+
+	.diff-deleted {
+		color: var(--accent-red);
+		text-decoration: line-through;
+	}
+
+	.diff-added {
+		color: green;
+	}
 	
 	@media (-moz-platform: macos) {
 		.citation-explorer-grid {