zotero/chrome/content/zotero-platform/unix/overlay.css
Dan Stillman 5f3313d132 Restore proper sizing of toolbar icons on HiDPI Windows/Linux
I guess the idea that switching to PNGs obviated the need for this was wishful
thinking (though it doesn't seem to be necessary for the single buttons anymore
on Linux, and it's no longer necessary on OS X, which has generally saner
styling in Firefox).
2016-02-10 05:21:27 -05:00

179 lines
6.2 KiB
CSS

/*
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.
*/
/*
* Nav bar
*/
toolbar[id="nav-bar"] #zotero-toolbar-main-button .toolbarbutton-icon {
width: 28px;
}
toolbar[id="nav-bar"] #zotero-toolbar-save-button .toolbarbutton-icon {
width: 30px;
}
toolbar[id="nav-bar"] #zotero-toolbar-buttons #zotero-toolbar-main-button {
margin-right: -1px;
padding: 0; /* avoid shift on :active */
}
toolbar[id="nav-bar"] #zotero-toolbar-main-button .toolbarbutton-icon {
margin-left: 2px;
padding-left: 5px !important;
padding-right: 5px !important;
}
toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
padding-left: 0;
}
toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-button .toolbarbutton-icon {
padding-left: 6px !important;
padding-right: 6px !important;
}
toolbar[id="nav-bar"] #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker {
width: 18px !important;
margin-top: 6px;
margin-bottom: 6px;
}
toolbar[id="nav-bar"] #zotero-toolbar-buttons #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
padding-left: 14px !important;
padding-right: 3px !important;
}
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;
}
toolbar[id="nav-bar"] #zotero-toolbar-buttons > separator {
/* Copied from .toolbarbutton-menubutton-dropmarker::before */
display: -moz-box;
width: 1px;
height: 18px;
-moz-margin-end: -1px;
background-clip: padding-box;
background-position: center;
background-repeat: no-repeat;
background-size: 1px 18px;
box-shadow: var(--toolbarbutton-combined-boxshadow);
}
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;
}
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;
}
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 */
toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon {
background: var(--toolbarbutton-hover-background) !important;
}
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-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: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button {
max-width: 28px !important;
margin: 0 4px 0 0 !important;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-menubutton-button {
margin-left: 8px;
}
/* End toolbar buttons */
@media (min-resolution: 1.5dppx) {
#zotero-tb-sync > .toolbarbutton-icon {
width: 20px;
}
}
.zotero-tb-button:not([type=menu]) {
margin-right: 4px;
}
#zotero-tb-search-menu-button {
-moz-appearance: toolbarbutton-dropdown !important;
width: 12px;
height: 12px;
}
#zotero-tb-search-menu-button .button-menu-dropmarker {
display: none;
}
#zotero-tb-search .textbox-search-icon {
visibility: hidden;
}