zotero/chrome/content/zotero-platform/mac/overlay.css
Dan Stillman 1d6483e68a Fix #773, Zotero combo icons dispersed under more tools
And fix save button hover height on Windows, which somehow got out of
whack again.

Might need further tweaking on Linux

Need to find a better way to do these buttons...
2015-06-29 05:59:19 -04:00

508 lines
No EOL
14 KiB
CSS

/*
As of Fx36, the built-in Mac styles don't properly handle a menu-button within a combined
button, so we need this ungodly mess.
*/
#zotero-toolbar-buttons[cui-areatype="toolbar"] > separator,
#zotero-toolbar-save-button[cui-areatype="toolbar"]:not(:hover) > .toolbarbutton-menubutton-dropmarker::before,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button {
box-shadow: none;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] {
margin-top: 3px !important;
margin-bottom: 3px !important;
border-right: 0;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
#zotero-toolbar-main-button[cui-areatype="toolbar"] {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 2px;
padding-left: 2px;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] {
margin-top: 3px;
margin-bottom: 3px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0 solid transparent;
}
#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button {
min-width: 26px;
padding-left: 1px;
padding-right: 1px;
}
/* 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;
box-shadow: var(--toolbarbutton-hover-boxshadow) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#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"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
border-right: 1px solid transparent;
}
#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"]:not([overflowedItem=true]):hover > .toolbarbutton-menubutton-dropmarker {
background: inherit;
}
#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"]:not([overflowedItem=true]):hover {
border-left: 0 solid transparent;
}
#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,
#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
width: 16px;
}
/* End toolbar icons */
#zotero-splitter
{
border-top: none;
border-bottom: 1px solid #A3A3A3;
min-height: 1px !important;
max-height: 1px !important;
background-image: none;
}
#zotero-items-toolbar[state=collapsed]
{
margin-left: -8px !important;
}
#zotero-pane toolbarseparator {
margin-left: 7px;
}
@media (min-resolution: 1.5dppx) {
#zotero-pane .toolbarbutton-icon {
max-width: 28px;
}
#zotero-tb-sync-error .toolbarbutton-icon {
width: 16px;
}
}
.zotero-tb-button, .zotero-tb-button:first-child, .zotero-tb-button:last-child {
-moz-margin-start: 0 !important;
-moz-margin-end: 3px !important;
-moz-padding-end: 10px !important;
background: url("chrome://zotero/skin/mac/menubutton-end.png") right center no-repeat;
}
#zotero-collections-toolbar {
padding-left: 0;
}
.zotero-tb-button:-moz-window-inactive {
opacity: 0.7;
}
.zotero-tb-button[open="true"],
.zotero-tb-button:not([disabled="true"]):hover:active {
background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center no-repeat;
}
.zotero-tb-button > menupopup {
-moz-margin-start: 2px;
margin-top: -4px;
}
.zotero-tb-button > .toolbarbutton-icon {
/*-moz-binding: url('chrome://zotero-platform/content/zoterotbbutton.xml#zotero-tb-button');*/
background: url("chrome://zotero/skin/mac/menubutton-start.png") left center no-repeat;
padding: 5px 1px 5px 11px;
}
/*
* The searchbox focus ring is incorrect in Yosemite pre-Fx34, so use the old searchbox shape
* (with code borrowed from the Fx Add-ons window and icons borrowed from the Fx searchbar).
* These styles, the 'oldsearchfield' assignment in zoteroPane.js, and the Search.png icons
* can be removed after Fx31 ESR.
*
* Note: This uses navigator.oscpu in zoteroPane.js to test for Yosemite instead of
* -moz-mac-yosemite-theme here because the latter isn't defined in Fx31.
*/
#zotero-pane-stack[oldsearchfield] textbox[type=search] {
margin: 0;
-moz-appearance: none;
padding: 3px 5px 2px;
border: 1px solid rgba(60,73,97,0.5);
border-radius: 10000px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.15), 0 1px rgba(255,255,255,0.25);
background-clip: padding-box;
}
#zotero-pane-stack[oldsearchfield] textbox[type=search][focused] {
box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 1.5px 1px -moz-mac-focusring, inset 0 1px 1px rgba(0,0,0,0.15);
border-color: -moz-mac-focusring;
}
#zotero-pane-stack[oldsearchfield] textbox[type=search] > .textbox-input-box {
-moz-padding-start: 15px;
background: url("chrome://zotero/skin/mac/moz/Search.png") left no-repeat;
background-size: 14px;
}
@media (min-resolution: 1.5dppx) {
#zotero-pane-stack[oldsearchfield] textbox[type=search] > .textbox-input-box {
background: url("chrome://zotero/skin/mac/moz/Search@2x.png") left no-repeat;
background-size: 14px;
}
}
#zotero-pane-stack[oldsearchfield] textbox[type=search] > .textbox-input-box:-moz-locale-dir(rtl) {
background-position: right;
}
#zotero-pane-stack[oldsearchfield] textbox[type=search] > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
opacity: 1.0;
}
/* End searchbox focus fix */
#zotero-tb-search-menu-button
{
margin: -6px -2px -6px -16px;
padding: 6px 2px 6px 14px;
list-style-image: url("chrome://zotero/skin/mac/searchbar-dropmarker.png");
}
#zotero-tb-sync > .toolbarbutton-icon {
-moz-padding-start: 8px;
padding-top: 1px;
}
#zotero-tb-sync-error[error=true]
{
margin-bottom: 2px;
}
.zotero-tb-button[open="true"] > .toolbarbutton-icon,
.zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon {
background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center no-repeat;
}
.zotero-tb-button > .toolbarbutton-text {
display: none;
}
#zotero-tb-sync > .toolbarbutton-icon {
-moz-binding: none !important;
padding: 2px 0px 2px 8px !important;
}
#zotero-close-button {
margin: 0px !important;
padding: 0px 0px 0px 10px !important;
}
#zotero-tb-sync {
margin: 0;
}
#zotero-view-tabbox {
background-color: #fff;
padding: 0;
}
#zotero-item-pane-content .groupbox-body {
-moz-appearance: none;
background-color: #ffffff;
}
#zotero-item-pane-message {
color: #7f7f7f;
}
#zotero-view-tabbox > tabpanels {
margin: 12px 0 0 0;
padding: 0;
-moz-appearance: none;
}
#zotero-view-tabbox > tabs {
-moz-appearance: none;
background: -moz-linear-gradient(top, #ededed, #cccccc);
border-style: solid;
border-width: 0 0 1px 0;
border-color: #5e5e5e;
padding: 2px 0 2px 0;
}
#zotero-view-tabbox > tabs > tab > hbox {
padding: 0;
}
#zotero-view-tabbox > tabs > tab > hbox > .tab-icon {
display: none;
}
#zotero-pane #zotero-view-tabbox > tabs > tab {
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-appearance: toolbarbutton;
text-align: center;
margin: 0;
padding: 3px 1px 3px 1px;
}
#zotero-pane #zotero-view-tabbox > tabs > tab > hbox .tab-text {
font-size: 11px;
font-weight: bold;
margin: 2px 7px 2px 9px !important;
text-shadow: 0 1px rgba(255, 255, 255, .4);
}
/* This seems to be necessary to center the tabs. Not sure why. */
#zotero-pane #zotero-view-tabbox > tabs > tab:last-of-type > hbox .tab-text {
margin: 2px 9px 2px 9px !important;
}
#zotero-pane #zotero-view-tabbox > tabs > tab[selected=true] > hbox .tab-text {
color: #FFF !important;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
}
#zotero-collections-tree {
-moz-appearance: none;
border: none;
margin: 0;
padding: 0;
min-height: 5.2em;
background-color: #d2d8e2;
}
#zotero-collections-tree:-moz-window-inactive {
background-color: rgb(232, 232, 232);
}
#zotero-collections-tree treechildren::-moz-tree-row {
background-color: transparent;
border-color: transparent;
}
#zotero-collections-tree treechildren::-moz-tree-cell(selected) {
background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x;
border-top: 1px solid #94A1C0;
}
#zotero-collections-tree:-moz-window-inactive treechildren::-moz-tree-cell(selected) {
background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x;
border-top: 1px solid #979797;
}
#zotero-collections-tree treechildren::-moz-tree-cell(selected, focus) {
background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x;
border-top: 1px solid #5382C5;
}
#zotero-collections-tree treechildren::-moz-tree-cell-text(selected) {
font-weight: bold !important;
color: #ffffff !important;
}
#zotero-collections-tree treechildren::-moz-tree-twisty(selected) {
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}
#zotero-collections-tree treechildren::-moz-tree-twisty(selected, open) {
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}
#zotero-collections-splitter, #zotero-items-splitter
{
-moz-appearance: none;
-moz-border-start: none !important;
-moz-border-end: none !important;
max-width: 1px !important;
min-width: 1px !important;
width: 1px !important;
background-color: #8b8b8b !important;
}
#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed] {
border: 0 solid #d6d6d6 !important;
max-width: 8px !important;
min-width: 8px !important;
width: 8px !important;
background-image: url("chrome://zotero/skin/mac/vsplitter.png");
background-repeat: repeat-y;
padding: 0;
}
#zotero-collections-splitter[state=collapsed] {
border-right-width: 1px !important;
}
#zotero-items-splitter[state=collapsed] {
border-left-width: 1px !important;
}
#zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy
{
-moz-appearance: none;
background-image: url("chrome://zotero/skin/mac/vgrippy.png");
background-position: center;
background-repeat: no-repeat;
width: 8px;
}
#zotero-tags-splitter
{
-moz-appearance: none;
border-top: 1px;
border-bottom: 1px;
border-color: #A5A5A5;
height: 8px;
background-image: url("chrome://zotero/skin/mac/hsplitter.png") !important;
background-repeat: repeat-x;
padding: 0;
}
#zotero-tags-splitter > grippy
{
-moz-appearance: none;
background-image: url("chrome://zotero/skin/mac/hgrippy.png");
background-position: center;
background-repeat: no-repeat;
height: 8px;
}
#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover, #zotero-items-splitter > grippy:hover
{
background-color:transparent;
}
#zotero-items-tree
{
-moz-appearance: none;
border: none;
margin: 0;
padding: 0;
}
#zotero-items-tree treechildren::-moz-tree-cell,
#zotero-items-tree treechildren::-moz-tree-column {
border-right: 1px solid #d7dad7;
}
treechildren::-moz-tree-twisty {
-moz-appearance: none;
width: 16px;
height: 16px;
list-style-image: url("chrome://zotero/skin/mac/twisty.svg");
-moz-padding-start: 5px;
-moz-padding-end: 6px;
}
treechildren::-moz-tree-twisty(open) {
-moz-appearance: none;
width: 16px;
height: 16px;
list-style-image: url("chrome://zotero/skin/mac/twisty-open.svg");
-moz-padding-start: 4px;
-moz-padding-end: 7px;
}
/* How to get active twisty?
treechildren::-moz-tree-twisty(active) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-active.svg") !important;
}
treechilren::-moz-tree-twisty(active) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-active-open.svg");
}
*/
tree:focus treechildren::-moz-tree-twisty(selected) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg");
}
tree:focus treechildren::-moz-tree-twisty(selected, open) {
-moz-appearance: none;
list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg");
}
treechildren::-moz-tree-image {
height: 16px;
padding-bottom: 1px;
}
#zotero-tb-advanced-search
{
list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search.png');
}
#zotero-tb-note-add
{
list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add.png');
}
@media (min-resolution: 1.5dppx) {
#zotero-tb-advanced-search {
list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png');
}
#zotero-tb-note-add {
list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png');
}
}
#zotero-tb-actions-menu
{
list-style-image: url('chrome://zotero/skin/mac/cog.png');
}
#zotero-collectionmenu > .menuitem-iconic, #zotero-itemmenu > .menuitem-iconic, #zotero-collectionmenu > .menu-iconic, #zotero-itemmenu > .menu-iconic {
padding-top: 0px !important;
padding-bottom: 2px !important;
list-style-image: none !important;
}
#zotero-collectionmenu > .menuitem-iconic > .menu-iconic-left, #zotero-itemmenu > .menuitem-iconic > .menu-iconic-left, #zotero-collectionmenu > .menu-iconic > .menu-iconic-left, #zotero-itemmenu > .menu-iconic > .menu-iconic-left {
display: none;
}