From 41e0c15f045338368bdcd3161c30725c41b2b635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adomas=20Ven=C4=8Dkauskas?= <adomas.ven@gmail.com>
Date: Wed, 24 Sep 2025 12:51:03 +0300
Subject: [PATCH] Citation Explorer: Various styling adjustments

---
 .../zotero/integration/citationExplorer.js    | 10 +++++-----
 .../zotero/integration/citationExplorer.xhtml |  2 +-
 scss/components/_citationExplorer.scss        | 19 ++++++++++++++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/integration/citationExplorer.js b/chrome/content/zotero/integration/citationExplorer.js
index 7aef089118..2367f510aa 100644
--- a/chrome/content/zotero/integration/citationExplorer.js
+++ b/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 {
diff --git a/chrome/content/zotero/integration/citationExplorer.xhtml b/chrome/content/zotero/integration/citationExplorer.xhtml
index be249d60a3..d49f54810c 100644
--- a/chrome/content/zotero/integration/citationExplorer.xhtml
+++ b/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">
diff --git a/scss/components/_citationExplorer.scss b/scss/components/_citationExplorer.scss
index 6ef45ea165..2b2bb89655 100644
--- a/scss/components/_citationExplorer.scss
+++ b/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 {