0007d077cc
- removed all cursor-related logic. Instead, insert a new input component each time the user wants to type. The input remain between bubbles and focusing on one will open the reference panel. Leaving the input hides the reference panel. - during drag-drop reordering, lock the editor height so that it doesn't get out of sync with the window. - removed the iframe, since it was no longer needed. - keyboard navigation: Home/End will place an input at the start/end of the editor and focus it. Tab focuses the last active input if any, or the input in the end otherwise. Shift-Tab from the editor focuses the dropdown button if it is active. Tab from the input will focus the first entry of the reference list. Tab from the reference list will focus the active input. Shift-ArrowLeft/Right from focused bubble will swap the bubble with its neighbor. ArrowDown/Up from bubble will open/close the citation dialog. - when a reference item is selected, previously active input is re-focused. - aria-properties to have voiceover, JAWS and NVDA read bubbles, inputs and reference items, as well as announce hints about available keypresses. - typing from bubble or the reference panel will refocus previously active input - different minor updates to make the functionality less janky - refactoring of refreshing and resizing of the reference panel to be more straightforward and to only do it when necessary. E.g. clicking on a bubble and closing the popover after will not rerun search and just display the old results. - some throttling logic so that two escape keypresses one after another when the itemPopover is open do not close the entire dialog - renamed variables: qfb=dialog, qfe=editor, panel=itemPopover - use short form of locator string for bubbles
95 lines
No EOL
2.9 KiB
CSS
95 lines
No EOL
2.9 KiB
CSS
body {
|
|
line-height: 1.6em;
|
|
font-size: 15px;
|
|
}
|
|
|
|
body[multiline="true"] {
|
|
line-height: 26px;
|
|
}
|
|
|
|
window.citation-dialog {
|
|
background: transparent;
|
|
-moz-appearance: none;
|
|
padding: 0;
|
|
width: 800px;
|
|
}
|
|
|
|
.citation-dialog.progress-bar .citation-dialog.deck {
|
|
height: 37px;
|
|
}
|
|
|
|
.citation-dialog.search {
|
|
padding: 2px 2px 0 2px;
|
|
margin: 2.5px 3.5px;
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
-moz-appearance: none;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
.citation-dialog.entry {
|
|
background: -moz-linear-gradient(-90deg, rgb(243,123,119) 0, rgb(180,47,38) 50%, rgb(156,36,27) 50%);
|
|
padding: 12px;
|
|
}
|
|
|
|
.note-dialog .citation-dialog.entry {
|
|
background: -moz-linear-gradient(-90deg, rgb(249, 231, 179) 0, rgb(228, 193, 94) 50%, rgb(221, 184, 81) 50%);
|
|
}
|
|
|
|
#zotero-icon {
|
|
margin: -1px 0 0 4px;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
#citation-properties menulist {
|
|
-moz-appearance: none; color: #fff;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0,0,0,.65);
|
|
background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
|
background-clip: padding-box;
|
|
background-origin: padding-box;
|
|
padding: 2px 9px;
|
|
border-radius: 3px;
|
|
min-height: 22px;
|
|
-moz-padding-start: 4px;
|
|
-moz-padding-end: 0;
|
|
}
|
|
|
|
#citation-properties menulist:-moz-focusring {
|
|
box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
|
|
}
|
|
|
|
#citation-properties menulist[open="true"],
|
|
#citation-properties menulist:hover:active {
|
|
background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
|
|
}
|
|
|
|
#citation-properties menulist > .menulist-dropmarker {
|
|
-moz-appearance: none;
|
|
display: -moz-box;
|
|
background-color: transparent;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#citation-properties menulist > .menulist-dropmarker > .dropmarker-icon {
|
|
list-style-image: url("chrome://browser/skin/hud-style-dropmarker-double-arrows.png");
|
|
}
|
|
|
|
panel button {
|
|
-moz-appearance: none; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); border-radius: 12px; border: 1px solid rgba(0,0,0,.65); background: -moz-linear-gradient(rgba(110,110,110,.9), rgba(70,70,70,.9) 49%, rgba(50,50,50,.9) 51%, rgba(40,40,40,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 1px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); background-clip: padding-box; background-origin: padding-box; padding: 2px 9px;
|
|
margin: 6px;
|
|
min-height: 22px;
|
|
}
|
|
|
|
panel button:hover:active {
|
|
background: -moz-linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9)); box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.1);
|
|
}
|
|
|
|
panel button:-moz-focusring {
|
|
box-shadow: 0 0 1px -moz-mac-focusring inset, 0 0 4px 1px -moz-mac-focusring, 0 0 2px 1px -moz-mac-focusring;
|
|
} |