From 1069b483cc63692d882e9bb412b0e8a742b079f0 Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Sun, 22 Feb 2015 03:55:52 -0500
Subject: [PATCH] Fix toolbar buttons on Linux

Known issues:

- The dropmarker segment doesn't get a background highlight color on
  hover. And now you'll notice. Sorry.
---
 .../content/zotero-platform/mac/overlay.css   |  9 +++
 .../content/zotero-platform/unix/overlay.css  | 74 +++++++++++++++++++
 chrome/skin/default/zotero/zotero.css         |  6 --
 3 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css
index d601b763d..760f7f8f3 100644
--- a/chrome/content/zotero-platform/mac/overlay.css
+++ b/chrome/content/zotero-platform/mac/overlay.css
@@ -71,6 +71,15 @@
 #zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
 	border-left: 1px solid transparent;
 }
+
+@media (min-resolution: 1.5dppx) {
+	/* Necessary in Fx36 to keep 2x icon from being rendered at full size */
+	#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+	#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+		width: 16px;
+	}
+}
+
 /* End toolbar icons */
 
 
diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css
index 749487b2e..0879e0405 100644
--- a/chrome/content/zotero-platform/unix/overlay.css
+++ b/chrome/content/zotero-platform/unix/overlay.css
@@ -1,3 +1,77 @@
+/*
+ As of Fx36, the built-in styles don't properly handle a menu-button within combined buttons.
+*/
+#zotero-toolbar-main-button[cui-areatype="toolbar"] {
+	padding-right: 0;
+	margin-right: -1px;
+}
+
+#zotero-toolbar-main-button[cui-areatype="toolbar"] > .toolbarbutton-icon {
+	padding-right: 5px;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator {
+	/* Copied from .toolbarbutton-menubutton-dropmarker::before */
+	display: -moz-box;
+	width: 1px;
+	height: 18px;
+	-moz-margin-end: -1px;
+	background-image: var(--toolbarbutton-combined-backgroundimage);
+	background-clip: padding-box;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 1px 18px;
+	box-shadow: var(--toolbarbutton-combined-boxshadow);
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button {
+	padding-left: 0;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
+	height: 32px;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+	margin-top: 4px;
+	margin-bottom: 4px;
+	height: 24px;
+	padding-left: 9px;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .dropmarker-icon {
+	border-color: var(--toolbarbutton-hover-bordercolor) !important;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
+#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+	background: inherit;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover > .toolbarbutton-icon,
+/* This selector doesn't work, so the dropmarker doesn't get a hover effect. :hover doesn't seem
+ to have an effect on either part of the dropmarker */
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon {
+	background: var(--toolbarbutton-hover-background) !important;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
+#zotero-toolbar-save-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) > .dropmarker-icon {
+	background: var(--toolbarbutton-active-background);
+	box-shadow: var(--toolbarbutton-active-boxshadow);
+	border-color: var(--toolbarbutton-active-bordercolor);
+	transition-duration: 10ms;
+}
+/* End toolbar buttons */
+
+
 .zotero-tb-button:not([type=menu]) {
 	margin-right: 4px;
 }
diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index cba6eb6c7..68e6e35fd 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -52,12 +52,6 @@ toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single {
 	#zotero-toolbar-save-button-single[cui-areatype="toolbar"] {
 		list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.png");
 	}
-	
-	/* Necessary in Fx36 to keep 2x icon from being rendered at full size */
-	#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
-	#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
-		width: 16px;
-	}
 }
 
 /* Show webpage icon in gray when no translators, except on hover */