Restyle tags splitter

chrome/content/zotero-platform/mac/overlay.css

@@ -213,34 +213,6 @@
 	width: 8px;
 }
 
-#zotero-tags-splitter
-{
-	-moz-appearance: none;
-	border-top: 1px;
-	border-bottom: 1px;
-	border-color: #A5A5A5;
-	height: 8px;
-	background-image: url("chrome://zotero/skin/mac/hsplitter.png") !important;
-	background-repeat: repeat-x;
-	padding: 0;
-}
-
-#zotero-tags-splitter > grippy
-{
-	-moz-appearance: none;
-	background: url(chrome://zotero/skin/mac/hgrippy.png) center/auto 8px no-repeat;
-	height: 8px;
-}
-
-#zotero-tags-splitter > grippy:hover,
-#zotero-collections-splitter > grippy:hover,
-#zotero-items-splitter > grippy:hover,
-#zotero-context-splitter > grippy:hover,
-#zotero-context-splitter-stacked > grippy:hover
-{
-	background-color:transparent;
-}
-
 #zotero-context-toolbar-extension {
 	/* To cover #zotero-context-splitter 1px border */
 	margin-inline-start: -1px;

chrome/content/zotero/components/tagSelector/tagSelectorList.jsx

@@ -26,7 +26,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 var { Collection } = require('react-virtualized');
-const { props } = require("bluebird");
 
 // See also .tag-selector-item in _tag-selector.scss
 var filterBarHeight = 36;
@@ -34,7 +33,7 @@ var tagPaddingLeft = 4;
 var tagPaddingRight = 4;
 var tagSpaceBetweenX = 2;
 var tagSpaceBetweenY = 4;
-var panePaddingTop = 8;
+var panePaddingTop = 4; // + splitter 9px tall
 var panePaddingLeft = 8;
 var panePaddingRight = 2; // + scrollbar width
 //var panePaddingBottom = 2;

scss/_zotero.scss

@@ -42,10 +42,12 @@
 @import "components/syncButtonTooltip";
 @import "components/tabBar";
 @import "components/tagSelector";
+@import "components/tags-splitter";
 @import "components/textLink";
 @import "components/virtualized-table";
 @import "components/expand-button";
 
+
 // Elements
 // --------------------------------------------------
 

scss/components/_tags-splitter.scss

@@ -0,0 +1,4 @@
+#zotero-tags-splitter {
+    -moz-appearance: none;
+    border-top: var(--material-border-quarternary);
+}

scss/themes/_dark.scss

@@ -63,5 +63,6 @@
         --material-border50: 1px solid var(--color-border50);
         --material-panedivider: 1px solid var(--color-panedivider);
         --material-border-quinary: 1px solid var(--fill-quinary);
+        --material-border-quarternary: 1px solid var(--fill-quarternary);
     }
 }

scss/themes/_light.scss

@@ -63,5 +63,6 @@
         --material-border50: 1px solid var(--color-border50);
         --material-panedivider: 1px solid var(--color-panedivider);
         --material-border-quinary: 1px solid var(--fill-quinary);
+        --material-border-quarternary: 1px solid var(--fill-quarternary);
     }
 }