Fix splitter style

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

@@ -20,94 +20,6 @@
 	color: #7f7f7f;
 }
 
-#zotero-collections-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
-#zotero-context-splitter:not([state=collapsed])[orient=horizontal]
-{
-	-moz-appearance: none;
-	border-inline-start: var(--material-panedivider);
-	margin-inline-end: -4px;
-	width: 5px !important;
-	min-width: 5px;
-	/* Create a separate stacking context to be on top */
-	opacity: 0.99;
-	background-image: none;
-}
-
-#zotero-items-splitter[orient=vertical],
-#zotero-context-splitter-stacked
-{
-	-moz-border-start: none;
-	-moz-border-end: none;
-	background-color: #bdbdbd;
-	max-height: 1px;
-	min-height: 1px;
-	height: 1px;
-}
-
-#zotero-collections-splitter:not([state=collapsed]) > grippy,
-#zotero-items-splitter:not([state=collapsed]) > grippy,
-#zotero-context-splitter:not([state=collapsed]) > grippy,
-#zotero-context-splitter-stacked:not([state=collapsed]) > grippy
-{
-	display: none;
-}
-
-#zotero-collections-splitter[state=collapsed] {
-	border: 0 solid #d6d6d6 !important;
-	padding: 0;
-}
-
-#zotero-collections-splitter[state=collapsed]
-{
-	background-image: url("chrome://zotero/skin/mac/vsplitter.png");
-	background-repeat: repeat-y;
-	max-width: 8px !important;
-	min-width: 8px !important;
-	width: 8px !important;
-}
-
-#zotero-items-splitter[state=collapsed][orient=horizontal],
-#zotero-context-splitter[state=collapsed][orient=horizontal] {
-	max-width: 1px;
-	min-width: 1px;
-	width: 1px;
-	background: transparent;
-	margin-inline-start: -1px;
-	position: relative;
-}
-
-#zotero-items-splitter[state=collapsed][orient=vertical],
-#zotero-context-splitter-stacked[state=collapsed][orient=vertical] {
-	max-height: 1px;
-	min-height: 1px;
-	height: 1px;
-	background: transparent;
-	margin-top: -1px;
-	position: relative;
-}
-
-#zotero-collections-splitter[state=collapsed] {
-	border-right-width: 1px !important;
-}
-
-#zotero-items-splitter[state=collapsed],
-#zotero-context-splitter[state=collapsed],
-#zotero-context-splitter-stacked[state=collapsed]
-{
-	border-left-width: 1px !important;
-}
-
-#zotero-collections-splitter[state=collapsed] > grippy,
-#zotero-items-splitter[state=collapsed] > grippy,
-#zotero-context-splitter[state=collapsed] > grippy,
-#zotero-context-splitter-stacked[state=collapsed] > grippy
-{
-	-moz-appearance: none;
-	background: url(chrome://zotero/skin/mac/vgrippy.png) center/auto 8px no-repeat;
-	width: 8px;
-}
-
 /* How to get active twisty?
 treechildren::-moz-tree-twisty(active) {
 	-moz-appearance: none;
@@ -134,9 +46,3 @@ treechildren::-moz-tree-image {
 	height: 16px;
 	padding-bottom: 1px;
 }
-
-/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
-@media (min-resolution: 1.25dppx) {
-	#zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy { background: url(chrome://zotero/skin/mac/vgrippy@2x.png) center/auto 8px no-repeat; }
-	#zotero-tags-splitter > grippy { background: url(chrome://zotero/skin/mac/hgrippy@2x.png) center/auto 8px no-repeat; }
-}

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

@@ -17,16 +17,3 @@ tab {
 #zotero-prefs .numberbox-input-box{
 	-moz-appearance: textfield;
 }
-
-#zotero-pane splitter {
-	border: 0;
-	width: 6px;
-	background-color: transparent;
-	background-image: none;
-}
-
-#zotero-context-splitter-stacked {
-	-moz-appearance: none;
-	background-color: #ececec;
-	border-top: 1px solid hsla(0, 0%, 0%, 0.2);
-}

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

@@ -7,58 +7,6 @@
 	-moz-appearance: none;
 }
 
-#zotero-collections-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed]),
-#zotero-tags-splitter:not([state=collapsed]),
-#zotero-context-splitter:not([state=collapsed]),
-#zotero-context-splitter-stacked:not([state=collapsed]) {
-	border: 0;
-	background-color: transparent;
-	position: relative;
-	/* Positive z-index positions the splitter on top of its siblings and makes
-	it clickable on both sides. */
-	z-index: 1;
-}
-
-#zotero-context-splitter:not([state=collapsed]),
-#zotero-context-splitter-stacked:not([state=collapsed]) {
-	z-index: 0;
-}
-
-#zotero-collections-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed]):not([orient=vertical]),
-#zotero-tags-splitter:not([state=collapsed]),
-#zotero-context-splitter:not([state=collapsed]) {
-	border-inline-end: var(--material-panedivider);
-	min-width: 0;
-	width: 3px;
-	margin-inline-start: -3px;
-}
-
-#zotero-tags-splitter:not([state=collapsed]),
-#zotero-items-splitter:not([state=collapsed])[orient=vertical],
-#zotero-context-splitter-stacked:not([state=collapsed]) {
-	border-block-end: var(--material-panedivider);
-	min-height: 0;
-	height: 3px;
-	margin-block-start: -3px;
-}
-
-#zotero-collections-splitter > grippy,
-#zotero-items-splitter > grippy,
-#zotero-tags-splitter > grippy,
-#zotero-context-splitter > grippy {
-	border: 0;
-}
-
-#zotero-collections-splitter:not([state=collapsed]) > grippy,
-#zotero-items-splitter:not([state=collapsed]) > grippy,
-#zotero-tags-splitter:not([state=collapsed]) > grippy,
-#zotero-context-splitter:not([state=collapsed]) > grippy,
-#zotero-context-splitter-stacked:not([state=collapsed]) > grippy {
-	display: none;
-}
-
 tree {
 	border-width: 0;
 }

chrome/content/zotero/zoteroPane.xhtml

@@ -1060,7 +1060,7 @@
 								</splitter>
 								
 								<box id="zotero-layout-switcher" orient="horizontal" zotero-persist="orient" flex="1">
-									<vbox flex="1">
+									<vbox flex="1" id="zotero-items-pane-container">
 										<toolbar id="zotero-toolbar-item-tree" tabindex="-1" class="zotero-toolbar toolbar toolbar-primary">
 											<hbox id="zotero-items-toolbar" align="center" flex="1">
 												<toolbarbutton

chrome/skin/default/zotero/overlay.css

@@ -190,7 +190,6 @@
 
 #zotero-layout-switcher
 {
-	min-width: 560px;
 	height: 0;
 }
 

scss/_zotero.scss

@@ -45,7 +45,7 @@
 @import "components/syncButtonTooltip";
 @import "components/tabBar";
 @import "components/tagSelector";
-@import "components/tags-splitter";
+@import "components/splitter";
 @import "components/textLink";
 @import "components/toolbar";
 @import "components/toolbarbutton";

scss/base/_base.scss

@@ -28,6 +28,10 @@
     background: var(--material-sidepane);
 }
 
+#zotero-items-pane-container {
+    min-width: 370px;
+}
+
 #zotero-items-pane {
     min-width: 370px;
     min-height: 150px;

scss/components/_splitter.scss

@@ -0,0 +1,89 @@
+splitter {
+	appearance: none;
+	z-index: 1;
+	position: relative;
+	background: transparent;
+	border: none;
+
+	--draggable-size: 5px;
+	
+	@include compact {
+		--draggable-size: 5px;
+
+		&[state="collapsed"] {
+			--draggable-size: 8px;
+		}
+	}
+	@include comfortable {
+		--draggable-size: 8px;
+
+		&[state="collapsed"] {
+			--draggable-size: 10px;
+		}
+	}
+
+	&[orient=vertical] {
+		min-height: var(--draggable-size);
+
+		&[collapse="before"],
+		&[substate="before"] {
+			border-top: var(--material-border-quarternary);
+			margin-bottom: calc(1px - var(--draggable-size));
+			&[state="collapsed"] {
+				border-bottom: var(--material-border-quarternary);
+				border-top: 0;
+				margin-bottom: 0;
+			}
+		}
+
+		&[collapse="after"],
+		&[substate="after"] {
+			border-bottom: var(--material-border-quarternary);
+			margin-top: calc(1px - var(--draggable-size));
+			&[state="collapsed"] {
+				border-top: var(--material-border-quarternary);
+				border-bottom: 0;
+				margin-top: 0;
+			}
+		}
+	}
+
+	&:not([orient=vertical]) {
+		min-width: var(--draggable-size);
+
+		&[collapse="before"],
+		&[substate="before"],
+		&[collapse="after"]:-moz-locale-dir(rtl),
+		&[substate="after"]:-moz-locale-dir(rtl) {
+			border-left: var(--material-border-quarternary);
+			margin-right: calc(1px - var(--draggable-size));
+			&[state="collapsed"] {
+				border-right: var(--material-border-quarternary);
+				border-left: 0;
+				margin-right: 0;
+			}
+		}
+
+		&[collapse="after"],
+		&[substate="after"],
+		&[collapse="before"]:-moz-locale-dir(rtl),
+		&[substate="before"]:-moz-locale-dir(rtl) {
+			border-right: var(--material-border-quarternary);
+			margin-left: calc(1px - var(--draggable-size));
+			&[state="collapsed"] {
+				border-left: var(--material-border-quarternary);
+				border-right: 0;
+				margin-left: 0;
+			}
+		}
+	}
+}
+
+#zotero-items-splitter,
+#zotero-context-splitter {
+	&[state="collapsed"] {
+		--draggable-size: 1px;
+		border: 0;
+		margin-left: -1px;
+	}
+}

scss/components/_tags-splitter.scss

@@ -1,7 +0,0 @@
-#zotero-tags-splitter {
-    -moz-appearance: none;
-    border-top: var(--material-border-quarternary);
-	@include compact {
-		min-height: 5px;
-	}
-}

scss/scaffold.scss

@@ -178,11 +178,6 @@ dialog richlistbox > richlistitem[disabled] {
 	text-align: right;
 }
 
-#pane-splitter {
-	// 16px (padding of tabbox container) - 9px
-	margin-left: 7px;
-}
-
 #right-pane {
 	margin: -16px -16px -16px 0px;
 	border-left: var(--material-panedivider);