88f1636d08
- Fix spacing on Windows and Linux in latest Firefox versions - Tweak icon colors on Windows and OS X - Adjust Z SVG to take up full height, so Z is a full 16px instead of 14px with slight anti-aliasing - Use generated PNGs instead of SVG for Z toolbar icons, to remove the need for complicated size rules - Add separate platform-specific .svg files that are used by a zotero-build script, make-z-icons, to generate the Z PNGs; the main SVG is still used directly in the menu panel and customization palette, with platform media queries to determine the coloring
171 lines
6.0 KiB
CSS
171 lines
6.0 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-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;
|
|
} |