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
298 lines
No EOL
9.6 KiB
CSS
298 lines
No EOL
9.6 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 {
|
|
padding-left: 6px !important;
|
|
padding-right: 6px !important;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-save-button .toolbarbutton-icon {
|
|
padding-left: 6px !important;
|
|
padding-right: 6px !important;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons > separator {
|
|
margin-top: 11px;
|
|
margin-bottom: 11px;
|
|
-moz-margin-start: -1px !important;
|
|
-moz-margin-end: -3px !important;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons > separator,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before {
|
|
width: 1px;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before {
|
|
-moz-margin-end: -1px;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > separator,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-save-button:not([disabled]) > .toolbarbutton-menubutton-dropmarker::before {
|
|
background-image: none;
|
|
}
|
|
|
|
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:not([disabled]) .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-save-button:not([disabled]) .dropmarker-icon {
|
|
border-color: var(--toolbarbutton-hover-bordercolor) !important;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-main-button:not(:active) .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .dropmarker-icon {
|
|
background: var(--toolbarbutton-hover-background);
|
|
}
|
|
|
|
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 {
|
|
box-shadow: none;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-main-button .toolbarbutton-icon {
|
|
border-top-right-radius: 0px !important;
|
|
border-bottom-right-radius: 0px !important;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-buttons:hover > #zotero-toolbar-save-button .toolbarbutton-icon {
|
|
border-top-left-radius: 0px !important;
|
|
border-bottom-left-radius: 0px !important;
|
|
}
|
|
|
|
/*
|
|
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).
|
|
*/
|
|
toolbar[id="nav-bar"] #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.
|
|
*/
|
|
toolbar[id="nav-bar"] #zotero-toolbar-save-button:hover .toolbarbutton-menubutton-button .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] > #zotero-toolbar-save-button:hover:not(:active):not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
|
|
background-color: hsla(210,48%,96%,.75) !important;
|
|
}
|
|
toolbar[id="nav-bar"] #zotero-toolbar-main-button:hover > .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #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;
|
|
}
|
|
|
|
toolbar[id="nav-bar"] #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
|
|
toolbar[id="nav-bar"] #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,
|
|
#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > menupopup {
|
|
margin-top: -7px;
|
|
}
|
|
|
|
|
|
/*
|
|
* 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-main-button-single,
|
|
toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button-single > .toolbarbutton-menubutton-button,
|
|
toolbar:not([id="nav-bar"]) #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
|
|
width: 24px;
|
|
}
|
|
|
|
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 {
|
|
padding-left: 2px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
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 {
|
|
height: 16px;
|
|
}
|
|
|
|
#zotero-toolbar-buttons[overflowedItem=true] {
|
|
margin: 6px 0 0 0 !important;
|
|
}
|
|
|
|
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button {
|
|
max-width: 18px;
|
|
}
|
|
|
|
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button toolbarbutton {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-icon {
|
|
margin-left: 8px;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* End toolbar buttons */
|
|
|
|
|
|
@media (min-resolution: 1.5dppx) {
|
|
#zotero-toolbar .toolbarbutton-icon {
|
|
width: 16px;
|
|
}
|
|
|
|
#zotero-tb-sync > .toolbarbutton-icon {
|
|
width: 20px;
|
|
}
|
|
}
|
|
|
|
#zotero-tb-search-menu-button {
|
|
margin: 0 -1px 0 -4px;
|
|
border: 0;
|
|
background: transparent;
|
|
/* Mozilla file copied from chrome://browser/skin/mainwindow-dropdown-arrow.png
|
|
for availability in Standalone */
|
|
list-style-image: url("chrome://zotero/skin/win/mainwindow-dropdown-arrow.png");
|
|
-moz-image-region: rect(0, 13px, 11px, 0);
|
|
}
|
|
|
|
#zotero-tb-search-menu-button .button-menu-dropmarker {
|
|
display: none;
|
|
}
|
|
|
|
#zotero-tb-search-menu-button:hover:active,
|
|
#zotero-tb-search-menu-button[open="true"] {
|
|
-moz-image-region: rect(0, 26px, 11px, 13px);
|
|
}
|
|
|
|
#zotero-tb-search .textbox-search-icon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#zotero-tb-sync-error {
|
|
margin-right: 4px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
#zotero-tb-sync {
|
|
margin-right: 1px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
#zotero-tb-fullscreen {
|
|
margin-left: 2px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#zotero-view-tabbox tab {
|
|
padding-left: .7em;
|
|
padding-right: .7em;
|
|
}
|
|
|
|
#zotero-toolbar {
|
|
-moz-appearance: toolbox !important;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
#zotero-toolbar:-moz-system-metric(windows-compositor) {
|
|
-moz-appearance: none !important;
|
|
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
|
|
background-color: rgb(207, 219, 236) !important;
|
|
border-width: 0 0 1px 0;
|
|
border-style: solid;
|
|
border-color: #818790;
|
|
}
|
|
|
|
#zotero-collections-tree, #zotero-items-tree, #zotero-view-item {
|
|
-moz-appearance: none;
|
|
border-style: solid;
|
|
border-color: #818790;
|
|
margin: 0;
|
|
padding: 0;
|
|
-moz-border-top-colors: none;
|
|
-moz-border-bottom-colors: none;
|
|
-moz-border-right-colors: none;
|
|
-moz-border-left-colors: none;
|
|
}
|
|
|
|
/* Undo tree row spacing change in Fx25 on Windows */
|
|
#zotero-collections-tree treechildren::-moz-tree-row,
|
|
#zotero-items-tree treechildren::-moz-tree-row,
|
|
#zotero-prefs treechildren::-moz-tree-row {
|
|
height: 1.6em;
|
|
}
|
|
|
|
#zotero-collections-tree {
|
|
border-width: 0 1px 1px 0;
|
|
}
|
|
|
|
/* Restore row highlighting on drag over, though I'm not sure how we're losing it to begin with. */
|
|
#zotero-collections-tree treechildren::-moz-tree-row(dropOn) {
|
|
background-color: Highlight;
|
|
}
|
|
|
|
#zotero-items-tree {
|
|
border-width: 0 1px;
|
|
}
|
|
|
|
#zotero-view-item {
|
|
padding: 0 !important;
|
|
-moz-appearance: none;
|
|
background-color: -moz-field;
|
|
border-width: 1px 0 0 1px;
|
|
}
|
|
|
|
#zotero-view-tabbox > tabs {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
#zotero-item-pane-groupbox {
|
|
-moz-appearance: none !important;
|
|
border-radius: 0;
|
|
border-width: 0 0 0 1px;
|
|
border-color: #818790;
|
|
border-style: solid;
|
|
}
|
|
|
|
#zotero-editpane-item-box > scrollbox, #zotero-view-item > tabpanel > vbox,
|
|
#zotero-editpane-tags > scrollbox, #zotero-editpane-related {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
#zotero-editpane-tags > scrollbox {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
#zotero-view-item > tabpanel > vbox {
|
|
padding-left: 5px;
|
|
} |