From 0f402295bede3ceaa73f4ac0a05d55f6acd6317a Mon Sep 17 00:00:00 2001 From: Dan Stillman Date: Sun, 22 Feb 2015 14:12:04 -0500 Subject: [PATCH] Toolbar icon tweaks on Linux --- .../content/zotero-platform/unix/overlay.css | 76 +++++++++++-------- 1 file changed, 46 insertions(+), 30 deletions(-) diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css index ce2a20de8..256389b53 100644 --- a/chrome/content/zotero-platform/unix/overlay.css +++ b/chrome/content/zotero-platform/unix/overlay.css @@ -1,13 +1,50 @@ -/* +/* 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-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { + width: 28px !important; + margin-left: 2px; + margin-right: -3px; + padding-left: 5px !important; + padding-right: 5px !important; +} + +#zotero-toolbar-save-button[cui-areatype="toolbar"] .toolbarbutton-icon { + width: 30px !important; +} + +#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 !important; + padding-right: 6px !important; +} + +#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { + margin-top: 2px; + margin-bottom: 2px; +} + +#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker .dropmarker-icon { + padding-left: 14px !important; + padding-right: 3px !important; +} + +#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { + margin-top: 6px; + margin-bottom: 6px; +} + +#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, +#zotero-toolbar-save-button[cui-areatype="toolbar"][open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + margin-top: 0; + margin-bottom: 0; } #zotero-toolbar-buttons[cui-areatype="toolbar"] > separator { @@ -24,50 +61,29 @@ 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 { - width: 30px; - 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:not(:active) > .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, +#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover:not(:active) > .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 { +#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); - box-shadow: var(--toolbarbutton-active-boxshadow); border-color: var(--toolbarbutton-active-bordercolor); + box-shadow: var(--toolbarbutton-active-boxshadow); transition-duration: 10ms; } /* End toolbar buttons */