fx102: Cleans up scss files, removes shadow DOM use from CEs (#3051)
Removes a huge amount of excessive files and duplication for CE scss. All CE css is now output in the single zotero-react-client.css file. Moving all CE styling into a single stylesheet required removing their shadow DOMs. It is desirable anyway, since you want to be able to style CEs from "outside", when embedding in different contexts. Shadow removal required some CE code changes to maintain functionality. Elements refactored: - attachment-box (displayed when an attachment (like PDF) is selected in the item tree) - color-picker (in the tag color selector) - guidance-panel (displayed on first run when editing authors for a book section) - item-box (info tab in the item pane) - note-editor - notes-box (note tab in the item pane) - quick-search-textbox - related-box (related tab in the item pane) - tags-box (tags tab in the item pane) - zoterosearch (advanced search condition builder form)
This commit is contained in:
Adomas Ven
GitHub
parent
bd9a40562f
commit
6b819e259c
100 changed files with 854 additions and 994 deletions
|
|
@ -1,69 +0,0 @@
|
|||
#metadata {
|
||||
padding: 5px 2px 2px 2px;
|
||||
}
|
||||
|
||||
#title
|
||||
{
|
||||
font-weight: bold;
|
||||
/* Don't collapse blank attachment titles, since it prevents renaming */
|
||||
min-height: 1.25em;
|
||||
}
|
||||
|
||||
#metadata > label {
|
||||
margin: 6px 10px 4px !important;
|
||||
}
|
||||
|
||||
#reindex
|
||||
{
|
||||
padding-left: 5px;
|
||||
list-style-image: url(chrome://zotero/skin/arrow_refresh.png);
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.25dppx) {
|
||||
#reindex {
|
||||
list-style-image: url(chrome://zotero/skin/arrow_refresh@2x.png);
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#linksbox
|
||||
{
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
tr label
|
||||
{
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
td > label, td > hbox
|
||||
{
|
||||
margin-top: 1px !important;
|
||||
margin-bottom: 1px !important;
|
||||
-moz-box-pack: start;
|
||||
-moz-margin-start: 1px !important;
|
||||
-moz-margin-end: 5px !important;
|
||||
padding: 0 2px 0 2px !important;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
td > hbox {
|
||||
-moz-box-align: center;
|
||||
}
|
||||
|
||||
/* Reindex icon makes the row larger */
|
||||
#indexStatusRow > td > hbox {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
-moz-margin-start: 3px !important;
|
||||
-moz-margin-end: 0 !important;
|
||||
width: 62px;
|
||||
text-align: right;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
#button {
|
||||
width: 38px;
|
||||
height: 24px;
|
||||
appearance: none;
|
||||
border: 1px solid #a7a7a7;
|
||||
background-color: white;
|
||||
padding: 3px;
|
||||
|
||||
&:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
#button-tile {
|
||||
display: block;
|
||||
background-color: #000000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
margin: 2px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.grid-tile:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.grid-tile[selected="true"] {
|
||||
border: 1px outset #C0C0C0;
|
||||
}
|
||||
|
||||
.grid-tile:hover:not([selected="true"]) {
|
||||
border: 1px dotted #A7A7A7;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
panel {
|
||||
min-width: none;
|
||||
}
|
||||
|
||||
stack {
|
||||
width: 400px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav-buttons {
|
||||
-moz-box-align: end;
|
||||
-moz-box-pack: end;
|
||||
}
|
||||
|
||||
#nav-buttons > toolbarbutton {
|
||||
-moz-appearance: none; /* Necessary on Linux for button to be shown */
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 3px;
|
||||
background-position: 5px 5px;
|
||||
background-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
|
||||
#nav-buttons > toolbarbutton:hover {
|
||||
border-color: var(--toolbarbutton-hover-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-hover-boxshadow);
|
||||
}
|
||||
|
||||
#nav-buttons > toolbarbutton:active:hover {
|
||||
border-color: var(--toolbarbutton-active-bordercolor);
|
||||
box-shadow: var(--toolbarbutton-active-boxshadow);
|
||||
transition-duration: 10ms;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
background-image: url("chrome://zotero/skin/chevron-left_808080_32.png");
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
margin-right: -16px;
|
||||
background-image: url("chrome://zotero/skin/chevron-right_808080_32.png");
|
||||
}
|
||||
|
||||
#close-button-box {
|
||||
-moz-box-align: start;
|
||||
-moz-box-pack: end;
|
||||
}
|
||||
|
||||
#close-button {
|
||||
margin: -16px -16px;
|
||||
}
|
||||
|
|
@ -1,305 +0,0 @@
|
|||
:host {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#item-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*overflow: auto;*/
|
||||
margin-top: 8px;
|
||||
align-items: start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#info-table {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
grid-auto-rows: min-content;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
td > input {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
th > label {
|
||||
margin-top: 1px !important;
|
||||
margin-bottom: 1px !important;
|
||||
-moz-box-pack: start;
|
||||
margin-inline-start: 1px !important;
|
||||
margin-inline-end: 5px !important;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
td > [fieldname] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.value {
|
||||
min-height: 14px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.value:not(.multiline) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.value.multiline {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/*td > vbox > description
|
||||
{
|
||||
margin: 0 !important;
|
||||
}*/
|
||||
|
||||
#item-type-menu {
|
||||
height: 1.5em !important;
|
||||
min-height: 1.5em !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
margin-inline-end: 5px !important;
|
||||
max-height: 1.5em !important;
|
||||
flex: 1;
|
||||
|
||||
&::part(dropmarker) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::part(label) {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#item-type-menu:not(:hover):not(:active) {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#item-type-menu > .menulist-label-box {
|
||||
-moz-box-flex: 0 !important;
|
||||
}
|
||||
|
||||
#item-type-menu > .menulist-label-box, #item-type-menu > .menulist-label-box > .menulist-label {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* DEBUG: this doesn't seem to work, unfortunately
|
||||
label[singleField=false]:after
|
||||
{
|
||||
content:",";
|
||||
}
|
||||
*/
|
||||
|
||||
/*textbox .textbox-input-box
|
||||
{
|
||||
margin: 0;
|
||||
}*/
|
||||
|
||||
textarea {
|
||||
font: inherit;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* metadata field names */
|
||||
th {
|
||||
align-self: stretch;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
margin-inline-start: 5px !important;
|
||||
margin-inline-end: 2px !important;
|
||||
}
|
||||
|
||||
#more-creators-label
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*row > label
|
||||
{
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
row label
|
||||
{
|
||||
-moz-user-focus: ignore;
|
||||
}*/
|
||||
|
||||
.pointer:hover, .pointer:hover > label {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
/* creator type menu */
|
||||
|
||||
.creator-type-label, .creator-type-value {
|
||||
-moz-box-align: center;
|
||||
-moz-box-pack: right;
|
||||
}
|
||||
|
||||
.creator-name-box {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
& > input {
|
||||
flex: 1;
|
||||
min-width: 60%;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex-shrink: 1;
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.creator-type-label > label
|
||||
{
|
||||
margin: 1px 0 !important;
|
||||
margin-inline-end: 4px !important;
|
||||
padding-inline-end: 2px !important;
|
||||
}
|
||||
|
||||
.creator-type-dropmarker {
|
||||
display: inline-block;
|
||||
margin: 0 1em 1px;
|
||||
background-image: url('chrome://zotero/skin/arrow-down.gif');
|
||||
background-size: cover;
|
||||
width: 11px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.creator-name-box, .date-box > span {
|
||||
margin: 1px 0 !important;
|
||||
margin-inline-start: 1px !important;
|
||||
}
|
||||
|
||||
.comma {
|
||||
margin: 1px 0 !important;
|
||||
margin-inline-end: 3px !important;
|
||||
}
|
||||
|
||||
#zotero-date-field-status
|
||||
{
|
||||
color: #666;
|
||||
padding: 0 !important;
|
||||
padding-inline-start: 1px !important;
|
||||
padding-inline-end: 10px !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.zotero-field-toggle
|
||||
{
|
||||
width: 27px !important;
|
||||
max-width: 27px !important;
|
||||
min-width: 27px !important;
|
||||
height: 14px;
|
||||
margin: 0 !important;
|
||||
margin-inline-end: 5px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
border-width: 0 !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
/* Merge pane in duplicates view */
|
||||
.zotero-field-version-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Retraction box
|
||||
*/
|
||||
#retraction-box {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#retraction-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5em 1em;
|
||||
background: #d93425;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#retraction-details {
|
||||
background: #fbf0f0;
|
||||
padding: .5em 1.5em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
cursor: text;
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
#retraction-details dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#retraction-details dt:not(:first-child) {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
#retraction-details dd {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
#retraction-details a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#retraction-links ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#retraction-links li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#retraction-links li:not(:first-child) {
|
||||
margin-top: .75em;
|
||||
}
|
||||
|
||||
#retraction-credit {
|
||||
text-align: right;
|
||||
margin-top: 1.5em;
|
||||
margin-right: -.9em;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
#retraction-hide {
|
||||
text-align: right;
|
||||
margin-top: .3em;
|
||||
margin-right: -1.2em;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
#retraction-hide button {
|
||||
background: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
border-style: none;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
#links-box {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
& > * {
|
||||
margin-top: 1px !important;
|
||||
margin-bottom: 1px !important;
|
||||
padding: 0 2px 0 2px !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #7f7f7f;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
min-width: 62px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#related-popup, #tags-popup {
|
||||
font: inherit;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.header {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 79px;
|
||||
margin: 5px 6px 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
color: ButtonText;
|
||||
text-shadow: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.box {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
:host(#zotero-tb-search) {
|
||||
font-size: var(--zotero-font-size) !important;
|
||||
margin-right: 0;
|
||||
width: 172px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#zotero-tb-search-menu-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-appearance: none;
|
||||
min-width: 0;
|
||||
cursor: default;
|
||||
list-style-image: url("chrome://zotero/skin/searchbar-dropmarker.png");
|
||||
}
|
||||
|
||||
#zotero-tb-search-menu-button .button-icon {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
#zotero-tb-search-menu-button .button-menu-dropmarker {
|
||||
display: none; /* Hide automatic dropmarker */
|
||||
}
|
||||
|
||||
/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
|
||||
@media (min-resolution: 1.25dppx) {
|
||||
#zotero-tb-search-menu-button { list-style-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); }
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.header {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 79px;
|
||||
margin: 5px 6px 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
color: ButtonText;
|
||||
text-shadow: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.box {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
.tags-box-header {
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
min-width: 79px;
|
||||
margin: 5px 6px 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
color: ButtonText;
|
||||
text-shadow: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-box-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 2px 0 0; // Leave space for textbox border on top tag
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 3px 0;
|
||||
margin-inline-start: 6px;
|
||||
align-items: center;
|
||||
height: 1.5em;
|
||||
|
||||
// Shift-Enter
|
||||
&.multiline {
|
||||
align-items: start;
|
||||
height: 9em;
|
||||
|
||||
textarea.editable {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.multiline) .editable {
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.zotero-box-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.zotero-box-label {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.editable {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
flex-grow: 1;
|
||||
margin: 0 2px;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
#search-box > hbox, #search-box > groupbox {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
groupbox {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
caption {
|
||||
font: inherit;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
label:first-child:not(tooltip label), checkbox:first-child {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
checkbox {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
#operatorsmenu {
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
#condition-tooltips tooltip
|
||||
{
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
#condition-tooltips hbox > label
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toolbarbutton-text
|
||||
{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#textbox-button {
|
||||
cursor: default;
|
||||
appearance: none;
|
||||
justify-self: end;
|
||||
margin-inline-end: 8px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#search-in-the-last input
|
||||
{
|
||||
min-width: 3em;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue