From 41fc082f6d0e5ea323c4a71b5c09cb26367beaa0 Mon Sep 17 00:00:00 2001 From: Dan Stillman Date: Sun, 5 Jul 2015 15:37:11 -0400 Subject: [PATCH] Fix too-large icons in secondary toolbars on Linux Plus a few other icon tweaks --- .../content/zotero-platform/unix/overlay.css | 130 ++++++++++-------- 1 file changed, 76 insertions(+), 54 deletions(-) diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css index 90f546e91..4a0f0531b 100644 --- a/chrome/content/zotero-platform/unix/overlay.css +++ b/chrome/content/zotero-platform/unix/overlay.css @@ -1,62 +1,78 @@ /* As of Fx36, the built-in styles don't properly handle a menu-button within combined buttons. + + On Windows and Linux, the padding and hover effect (border and shading) are applied directly to + the .toolbarbutton-icon (image) instead of the toolbarbutton, so proper sizing of the SVG depends + on the total width including border and padding. */ -#zotero-toolbar-main-button-single[cui-areatype="toolbar"] .toolbarbutton-icon, -#zotero-toolbar-save-button-single[cui-areatype="toolbar"] .toolbarbutton-icon { + +/* + * Nav bar + */ +toolbar[id="nav-bar"] #zotero-toolbar-main-button-single .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-save-button-single .toolbarbutton-icon { width: 32px; } -#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon, -#zotero-toolbar-save-button[cui-areatype="toolbar"] .toolbarbutton-icon { +toolbar[id="nav-bar"] #zotero-toolbar-main-button .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-save-button .toolbarbutton-icon { width: 28px; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) #zotero-toolbar-main-button { +toolbar[id="nav-bar"] #zotero-toolbar-buttons #zotero-toolbar-main-button { margin-right: -1px; } -#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { +toolbar[id="nav-bar"] #zotero-toolbar-main-button .toolbarbutton-icon { margin-left: 2px; margin-right: -3px; padding-left: 5px !important; padding-right: 5px !important; } -#zotero-toolbar-save-button[cui-areatype="toolbar"] .toolbarbutton-icon { +toolbar[id="nav-bar"] #zotero-toolbar-save-button .toolbarbutton-icon { width: 30px !important; } -#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button { +toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { padding-left: 0; } -#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button .toolbarbutton-icon { +toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-button .toolbarbutton-icon { padding-left: 6px !important; padding-right: 6px !important; } -#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker { +toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { + width: 18px !important; 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"]:not([overflowedItem=true]) #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-buttons #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker .dropmarker-icon { padding-left: 14px !important; padding-right: 3px !important; } -#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-save-button-single > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + margin-top: 3px; + margin-bottom: 3px; + padding-left: 8px !important; + padding-right: 8px !important; +} + +toolbar[id="nav-bar"] #zotero-toolbar-save-button:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, +toolbar[id="nav-bar"] #zotero-toolbar-save-button[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { + margin-top: 0; + margin-bottom: 0; +} + +toolbar[id="nav-bar"] #zotero-toolbar-save-button-single > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { margin-top: 3px; margin-bottom: 3px; } -#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator { +toolbar[id="nav-bar"] #zotero-toolbar-buttons > separator { /* Copied from .toolbarbutton-menubutton-dropmarker::before */ display: -moz-box; width: 1px; @@ -70,71 +86,77 @@ box-shadow: var(--toolbarbutton-combined-boxshadow); } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-main-button .toolbarbutton-icon, -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .toolbarbutton-icon, -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-main-button .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-save-button .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-save-button .dropmarker-icon { border-color: var(--toolbarbutton-hover-bordercolor) !important; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not(:active) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button:hover:not(:active) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { background: inherit; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover:not(:active) > .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #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"]:not([overflowedItem=true]) > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon { background: var(--toolbarbutton-hover-background) !important; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, -#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon { +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, +toolbar[id="nav-bar"] #zotero-toolbar-buttons > #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; } + +/* + * Alterations for non-nav-bar toolbars + */ +toolbar:not([id="nav-bar"]) #zotero-toolbar-main-button > .toolbarbutton-icon, +toolbar:not([id="nav-bar"]) #zotero-toolbar-main-button-single > .toolbarbutton-icon, +toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button-single > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + height: 16px; + width: 16px; + padding: 0; +} + +toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker, +toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button-single > .toolbarbutton-menubutton-dropmarker { + margin-left: -1px; +} + +toolbar:not([id="nav-bar"]) #zotero-toolbar-buttons separator { + display: none; +} + + /* Alterations for overflow panel */ #zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-icon, -#zotero-toolbar-save-button-single[overflowedItem=true] .toolbarbutton-icon { +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-icon, +#zotero-toolbar-save-button-single[overflowedItem=true] .toolbarbutton-icon, +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-icon { width: 16px; } #zotero-toolbar-buttons[overflowedItem=true] { - margin-left: 0px !important; - margin-bottom: 0px !important; + margin-left: 0 !important; + margin-bottom: 0 !important; margin-right: 0 !important; + padding: 0 !important; } #zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button { - padding-left: 0; - padding-right: 5px; -} - -#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-icon { - width: 26px; -} - -#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-icon { - margin-left: 1px; - padding-right: 0 !important; - width: 22px !important; + max-width: 28px !important; + margin: 0 4px 0 0 !important; } #zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-menubutton-button { - margin-left: 0; -} - -#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-menubutton-dropmarker { - margin: 0; - margin-right: 2px !important; - padding-right: 5px; -} - -#zotero-toolbar-buttons[overflowedItem=true] > separator { - display: none; + margin-left: 8px; } /* End toolbar buttons */