zotero/scss/elements/_itemBox.scss

327 lines
6 KiB
SCSS
Raw Normal View History

item-box {
display: flex;
min-width: 0;
width: 100%;
&[hidden] {
display: none;
}
#item-box {
width: 100%;
}
#info-table {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 10px;
row-gap: 2px;
width: inherit;
}
.meta-row {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
.meta-data {
width: 0;
min-width: 100%;
display: flex;
toolbarbutton {
margin-inline-start: 4px;
}
}
editable-text {
flex: 1; // stretch value field as much as possible
max-width: 100%; // stay within .meta-data when the itemBox is narrow
.input {
// allow input to be shrunk by other elements when the itemBox is narrow
min-width: 0;
}
// keep multiline fields as tall as they have to be unless they're focused
&[multiline] textarea:not(:focus) {
min-height: 1em;
}
}
.meta-label {
display: flex;
font-weight: normal;
text-align: end;
&[fieldname^="creator"] {
justify-content: space-between;
align-items: center;
}
> label {
margin-top: 2px;
@include comfortable {
margin-top: 3px;
}
}
}
.key {
width: 100%;
}
toolbarbutton {
@include focus-ring;
// needed to have the outline appear on all platforms
-moz-appearance: none;
align-self: center;
// Make all buttons tigher to not stretch the rows
height: auto;
width: auto;
padding: 1px;
border-radius: 2px;
}
}
.meta-label > label, .creator-type-label, #more-creators-label {
color: var(--fill-secondary);
}
// All icons that are by default hidden
#info-table .show-on-hover {
visibility: hidden;
&.no-display {
display: none;
}
}
.drag-hidden-creator {
opacity: 0;
}
// On hover of the meta-row, reveal all hidden icons
// unless there's .noHover class which keeps everything hidden
#info-table .meta-row:not(.noHover):hover .show-on-hover,
#info-table .meta-row:focus-within .show-on-hover {
visibility: visible;
display: block;
}
#item-type-menu {
@include focus-ring;
margin: 0;
margin-inline-end: 5px !important;
flex: 1;
padding-inline-start: 5px;
// Same padding as editable-text
@include comfortable {
padding-top: 3px;
padding-bottom: 3px;
}
&::part(dropmarker) {
display: none;
}
&::part(label) {
margin-inline-start: 0;
}
&[disabled] {
background: none;
}
}
#item-type-menu:not(:hover):not(:active) {
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;
}
textarea {
font: inherit;
resize: none;
}
#more-creators-label
{
font-weight: bold;
}
.pointer:hover, .pointer:hover > label {
cursor: pointer !important;
}
/* creator type menu */
.creator-type-label {
@include focus-ring;
display: inline-block;
// undo the padding so that the name is pushed to the end
margin-inline-end: -4px;
padding-left: 4px;
padding-right: 4px;
&:hover, &:focus {
.creator-type-dropmarker {
visibility: visible;
}
}
}
.creator-type-label, .creator-type-value {
-moz-box-align: center;
align-items: center;
display: flex;
}
// Some spacing between creator buttons
.creator-type-value > .zotero-clicky-plus,
.creator-type-value > .zotero-clicky-minus,
.creator-type-value > .zotero-clicky-options {
margin-left: 1px;
}
.creator-name-box {
flex: 1;
display: flex;
editable-text input {
min-width: 0;
}
// Margin adjusted by inline padding to have 4px between first and last name
*[fieldMode="0"]:first-child {
margin-inline-end: calc(max(0px, 4px - var(--editable-text-padding-inline)));
flex-grow: 3; // last name should have priority to expand over first name
}
// Add comma when the last name is not focused
*[fieldMode="0"]:first-child {
position: relative;
&::after {
content: var(--comma-character, ',');
position: absolute;
inset-inline-end: 0;
bottom: var(--editable-text-padding-block);
}
&.focused::after {
visibility: hidden;
}
}
}
.creator-type-dropmarker {
display: inline-block;
background-image: url('chrome://zotero/skin/16/universal/chevron-12.svg');
background-size: contain;
width: 8px;
height: 8px;
background-repeat: no-repeat;
padding-right: 4px;
align-self: center;
visibility: hidden;
}
.comma {
margin-inline-end: calc(4px - var(--editable-text-padding-inline));
align-self: center;
}
#zotero-date-field-status
{
color: var(--fill-secondary);
padding: 0 !important;
padding-inline-start: 5px !important;
padding-inline-end: 1px !important;
white-space: nowrap;
align-self: center;
}
/* 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 {
@include light-dark(background, #fbf0f0, var(--material-background));
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;
}
}