diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index ace263648..d091c926b 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -40,8 +40,9 @@ padding-right: 1px; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button, -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { +/* Recreate standard hover effect (except in overflow list) */ +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { border-width: 1px; border-style: solid; border-color: var(--toolbarbutton-hover-bordercolor) !important; @@ -50,36 +51,40 @@ border-bottom-left-radius: 0; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before { background: none; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { border-right: 1px solid transparent; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { border-left: 1px solid transparent; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > .toolbarbutton-menubutton-dropmarker { background: inherit; } -#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover { +#zotero-toolbar-save-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker:hover { background: var(--toolbarbutton-hover-background); } #zotero-toolbar-main-button[cui-areatype="toolbar"] { border-right: 1px solid transparent; } -#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover { +#zotero-toolbar-save-button[cui-areatype="toolbar"]:not([overflowedItem=true]):hover { border-left: 0 solid transparent; } -#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { border-left: 1px solid transparent; } +#zotero-toolbar-buttons[overflowedItem=true] { + margin-left: 3px !important; +} + /* Necessary in Fx36 to keep 32px icons from being rendered at full size */ #zotero-toolbar-main-button[cui-areatype="toolbar"] > .toolbarbutton-icon, #zotero-toolbar-main-button-single[cui-areatype="toolbar"] > .toolbarbutton-icon, diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css index 3500fe859..c2295d516 100644 --- a/chrome/content/zotero-platform/unix/overlay.css +++ b/chrome/content/zotero-platform/unix/overlay.css @@ -70,31 +70,53 @@ box-shadow: var(--toolbarbutton-combined-boxshadow); } -#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 { +#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 { border-color: var(--toolbarbutton-hover-bordercolor) !important; } -#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 { +#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 { background: inherit; } -#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover:not(:active) > .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #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 { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon { background: var(--toolbarbutton-hover-background) !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 { +#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 { background: var(--toolbarbutton-active-background); border-color: var(--toolbarbutton-active-bordercolor); box-shadow: var(--toolbarbutton-active-boxshadow); transition-duration: 10ms; } + +/* Alterations for overflow panel */ +#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-icon { + width: 16px; +} + +#zotero-toolbar-buttons[overflowedItem=true] { + margin-left: 0px !important; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button { + padding-left: 0; +} + +#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; +} /* End toolbar buttons */ diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css index 756291aee..4acc5fb95 100644 --- a/chrome/content/zotero-platform/win/overlay.css +++ b/chrome/content/zotero-platform/win/overlay.css @@ -5,19 +5,10 @@ width: 32px; } -#zotero-toolbar-save-button-single[cui-areatype="toolbar"] .toolbarbutton-icon { - width: 30px; -} - -#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon, -#zotero-toolbar-save-button[cui-areatype="toolbar"] .toolbarbutton-icon { +#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { width: 28px; } -#zotero-toolbar-main-button[cui-areatype="toolbar"] { - margin-right: -1px !important; -} - #zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { margin-left: 2px; margin-right: -1px; @@ -51,26 +42,25 @@ 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 { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > separator, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):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 { +#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:not([disabled]) .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):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 { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-main-button:not(:active) .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):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 { +#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 { box-shadow: none; } @@ -78,34 +68,56 @@ 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, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #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 .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 { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover .toolbarbutton-menubutton-button .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #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 { +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-main-button:hover > .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, +#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #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); +#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 { + background: var(--toolbarbutton-active-background) !important; + border-color: var(--toolbarbutton-active-bordercolor) !important; + box-shadow: var(--toolbarbutton-active-boxshadow) !important; transition-duration: 10ms; } #zotero-toolbar-save-button[cui-areatype="toolbar"] > menupopup { margin-top: -5px; } + +/* Alterations for overflow panel */ +#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-icon { + width: 16px; +} + +#zotero-toolbar-buttons[overflowedItem=true] { + margin-left: 0px !important; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button { + padding-left: 0; +} + +#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; +} /* End toolbar buttons */ @media (min-resolution: 1.5dppx) { diff --git a/chrome/content/zotero/icon.js b/chrome/content/zotero/icon.js index f5f401fc1..0cd77b138 100644 --- a/chrome/content/zotero/icon.js +++ b/chrome/content/zotero/icon.js @@ -71,6 +71,18 @@ CustomizableUI.addListener({ } }, + onWidgetOverflow: function (node, container) { + if (node.id == comboButtonsID) { + node.classList.add("toolbarbutton-1"); + } + }, + + onWidgetUnderflow: function (node, container) { + if (node.id == comboButtonsID) { + node.classList.remove("toolbarbutton-1"); + } + }, + onWidgetRemoved: function (id, area) { if (id == comboButtonsID) { var item = document.getElementById(id); @@ -135,7 +147,11 @@ CustomizableUI.createWidget({ item.appendChild(document.createElementNS(kNSXUL, "separator")); } let button = document.createElementNS(kNSXUL, "toolbarbutton"); - if (attribs.name == 'save') { + if (attribs.name == 'main') { + button.setAttribute('label', Zotero.clientName); + } + else if (attribs.name == 'save') { + button.setAttribute('label', Zotero.getString('ingester.saveToZotero')); button.setAttribute('disabled', 'true'); button.setAttribute('type', 'menu-button'); let menupopup = document.createElementNS(kNSXUL, "menupopup"); diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css index 9d496e9cb..0352c4b21 100644 --- a/chrome/skin/default/zotero/zotero.css +++ b/chrome/skin/default/zotero/zotero.css @@ -52,6 +52,66 @@ toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons #zotero-toolbar-save display:none; } +/* Alterations for overflow panel */ +#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-text, +#zotero-toolbar-save-button-single[overflowedItem=true] .toolbarbutton-text { + margin-left: 2px !important; +} + +#zotero-toolbar-buttons[overflowedItem=true] { + margin: 6px 4px; + max-height: 36px; +} + +#zotero-toolbar-buttons[overflowedItem=true]:not(:hover) { + border: 1px solid transparent; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-text { + display: none; + margin-left: 1px; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button { + min-width: unset; + max-width: 30px; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button:hover { + background: unset; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button::before { + content: ""; + display: -moz-box; + width: 1px; + height: 18px; + -moz-margin-end: 0px; + background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px); + background-clip: padding-box; + background-position: center; + background-repeat: no-repeat; + background-size: 1px 18px; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.2); +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button { + max-width: unset; + margin: 0 0 0 -1px !important; + background: unset; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button toolbarbutton { + margin-left: 8px; +} + +#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker, +#zotero-toolbar-save-button-single[overflowedItem=true] > .toolbarbutton-menubutton-dropmarker { + padding-left: 3px; + padding-right: 6px; +} + + /* Show webpage icon in gray when no translators */ #zotero-toolbar-save-button:not(.translate), #zotero-toolbar-save-button-single:not(.translate),