www

commit 1abee722337304f47fcb9f14b13a17541c11c626
parent a85a9a632e147cefe563241e01f62d2016fd19ea
Author: Dan Stillman <dstillman@zotero.org>
Date:   Sun, 22 Feb 2015 06:40:25 -0500

Fix toolbar buttons on Windows

Known issues:

- Hover doesn't work on the dropmarker alone, so instead of showing the
  hover effect for each segment individually, the menu-button parts are
  highlighted together, which at least looks like a choice
- When the menu-button is disabled, it still has some hover/active
  effects.
- Tested only on Windows 7

Diffstat:
M
chrome/content/zotero-platform/win/overlay.css
 | 
76
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 76 insertions(+), 0 deletions(-)
diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css
@@ -1,3 +1,79 @@
+/*
+ As of Fx36, the built-in styles don't properly handle a menu-button within combined buttons.
+*/
+#zotero-toolbar-main-button[cui-areatype="toolbar"] {
+	margin-right:-1px !important;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator,
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before {	
+	width: 1px;
+	-moz-margin-end: -1px;
+	background-image: var(--toolbarbutton-combined-backgroundimage);
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator {
+	margin-top: 11px;
+	margin-bottom: 11px;
+}
+
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > separator,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) > .toolbarbutton-menubutton-dropmarker::before {
+	display: none;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) .dropmarker-icon {
+	border-color: var(--toolbarbutton-hover-bordercolor) !important;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button:not(:active) .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .dropmarker-icon {
+	background: var(--toolbarbutton-hover-background);
+}
+
+#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 {
+	box-shadow: none;
+}
+
+/*
+ There are two hover effects: when the toolbaritem is hovered over, and when the button is hovered over.
+ This applies the latter (and may not be right on different versions of Windows).
+*/
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-main-button:hover:not(:active):not([disabled]) > .toolbarbutton-icon,
+/*
+ The dropmarker doesn't honor :hover, so instead of showing the hover effect for each segment individually, do the
+ menu-button parts together, which at least looks like a choice.
+*/
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not(:active) .toolbarbutton-menubutton-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not(:active):not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
+    background-color: hsla(210,48%,96%,.75) !important;
+}
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-main-button:hover > .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
+    border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4) !important;
+    box-shadow: 0 0 1px hsla(210,54%,20%,.03),
+                0 0 2px hsla(210,54%,20%,.1) !important;
+}
+
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
+#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
+  background: var(--toolbarbutton-active-background);
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
+  transition-duration: 10ms;
+}
+
+#zotero-toolbar-save-button[cui-areatype="toolbar"] > menupopup {
+	margin-top: -5px;
+}
+/* End toolbar buttons */
+
 #zotero-tb-search-menu-button {
 	margin: 0 -1px 0 -4px;
 	border: 0;