340 lines
6.9 KiB
SCSS
340 lines
6.9 KiB
SCSS
@use "sass:map";
|
|
|
|
#zotero-items-pane-container {
|
|
min-width: $min-width-items-pane;
|
|
height: 150px;
|
|
min-height: $min-height-items-pane;
|
|
}
|
|
|
|
#zotero-items-pane {
|
|
min-width: $min-width-items-pane;
|
|
}
|
|
|
|
#zotero-items-tree {
|
|
.virtualized-table-body, .drag-image-container {
|
|
padding: 4px 8px 8px;
|
|
}
|
|
|
|
.virtualized-table-body {
|
|
scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
|
|
}
|
|
|
|
.virtualized-table-header {
|
|
padding-inline-start: 8px;
|
|
padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
|
|
box-sizing: border-box;
|
|
|
|
.cell.hasAttachment,
|
|
.cell.numNotes {
|
|
padding: 0;
|
|
text-align: center;
|
|
|
|
&.first-column {
|
|
padding-inline-start: 32px;
|
|
}
|
|
}
|
|
|
|
.first-column {
|
|
padding-inline-start: 36px;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 100%;
|
|
background: transparent;
|
|
position: absolute;
|
|
inset-inline-start: -8px;
|
|
|
|
@include state(".first-column:hover") {
|
|
background: var(--material-mix-quinary);
|
|
}
|
|
|
|
@include state(".first-column.dragging") {
|
|
background: var(--material-mix-quarternary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cell:last-child {
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: calc(var(--scrollbar-width, 0px) + 8px);
|
|
height: 100%;
|
|
background: transparent;
|
|
position: absolute;
|
|
inset-inline-end: calc(-1 * var(--scrollbar-width, 0px) - 8px);
|
|
|
|
@include state(".cell:hover") {
|
|
background: var(--material-mix-quinary);
|
|
}
|
|
|
|
@include state(".cell.dragging") {
|
|
background: var(--material-mix-quarternary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtualized-table, .drag-image-container {
|
|
.row {
|
|
&.odd:not(.selected) {
|
|
background-color: var(--material-stripe);
|
|
}
|
|
|
|
&.even:not(.selected) {
|
|
background-color: var(--material-background);
|
|
}
|
|
|
|
&.selected {
|
|
border-radius: 0;
|
|
|
|
&.first-selected {
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
|
|
&.last-selected {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.colored-tag-swatches {
|
|
display: flex;
|
|
|
|
:root:-moz-locale-dir(rtl) & {
|
|
transform: scaleX(-1);
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
.icon-item-type + .tag-swatch,
|
|
.icon-item-type + .colored-tag-swatches {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
.emoji + .emoji,
|
|
.emoji + .colored-tag-swatches,
|
|
.colored-tag-swatches + .emoji {
|
|
margin-inline-start: 4px;
|
|
}
|
|
|
|
.tag-swatch {
|
|
display: inline-block;
|
|
|
|
&.colored {
|
|
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
|
|
width: 0.92307692em;
|
|
height: 0.92307692em;
|
|
background:
|
|
url("chrome://zotero/skin/tag-circle.svg") no-repeat center/100%,
|
|
url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/0;
|
|
fill: currentcolor;
|
|
|
|
@each $colorHex, $colorVar in $tagColorsLookup {
|
|
&[data-color="#{$colorHex}"] {
|
|
fill: var($colorVar);
|
|
}
|
|
}
|
|
|
|
@include focus-states using($color) {
|
|
@if $color =="white" {
|
|
background: url("chrome://zotero/skin/tag-circle-border.svg") no-repeat center/contain;
|
|
stroke: var(--accent-white);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.colored + .colored {
|
|
background:
|
|
url("chrome://zotero/skin/tag-crescent.svg") no-repeat center/100%,
|
|
url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/0;
|
|
// RTL: Parent is flipped, so margin can always be on logical left
|
|
margin-left: -0.38461538em;
|
|
|
|
@include focus-states using($color) {
|
|
@if $color =="white" {
|
|
background: url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.cell.primary {
|
|
.retracted {
|
|
width: 12px;
|
|
margin-inline-start: 3px;
|
|
}
|
|
}
|
|
|
|
.cell.no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.cell.hasAttachment {
|
|
text-overflow: unset;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.cell-text {
|
|
text-overflow: unset;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-missing-file {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.numNotes, .hasAttachment {
|
|
text-align: center;
|
|
|
|
.cell-text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$-itemTypesIcons: (
|
|
artwork,
|
|
attachment-epub,
|
|
attachment-epub-link,
|
|
attachment-file, // mapped to document below
|
|
attachment-link,
|
|
attachment-pdf-link,
|
|
attachment-pdf,
|
|
attachment-snapshot,
|
|
attachment-web-link,
|
|
attachment-image,
|
|
attachment-image-link,
|
|
attachment-video,
|
|
attachment-video-link,
|
|
audio-recording,
|
|
bill,
|
|
blog-post,
|
|
book-section,
|
|
book,
|
|
case,
|
|
computer-program,
|
|
conference-paper,
|
|
dataset,
|
|
dictionary-entry,
|
|
document,
|
|
email,
|
|
encyclopedia-article,
|
|
epub,
|
|
film,
|
|
forum-post,
|
|
hearing,
|
|
instant-message,
|
|
interview,
|
|
journal-article,
|
|
letter,
|
|
magazine-article,
|
|
manuscript,
|
|
map,
|
|
newspaper-article,
|
|
note,
|
|
patent,
|
|
podcast,
|
|
preprint,
|
|
presentation,
|
|
radio-broadcast,
|
|
report,
|
|
standard,
|
|
statute,
|
|
thesis,
|
|
tv-broadcast,
|
|
video-recording,
|
|
webpage
|
|
);
|
|
|
|
$-itemTypesMap: (
|
|
"attachment-file": "document"
|
|
);
|
|
|
|
$-attachmentIcons: (
|
|
attachment-epub,
|
|
attachment-epub-link,
|
|
attachment-link,
|
|
attachment-pdf-link,
|
|
attachment-pdf,
|
|
attachment-snapshot,
|
|
attachment-web-link,
|
|
attachment-file,
|
|
attachment-image,
|
|
attachment-video
|
|
);
|
|
|
|
// Non-item objects that can appear in the trash
|
|
$-trashableObjectIcons: (
|
|
"collection",
|
|
"search"
|
|
);
|
|
|
|
.icon-item-type {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.icon-attachment-type {
|
|
width: 12px;
|
|
height: 12px;
|
|
padding: 1px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
// Due to quirks of the state() mixin, we need two sets of .icon-item-type rules:
|
|
// one when the icon is within a virtualized-table, and one when it isn't. We declare
|
|
// a mixin here to avoid duplication.
|
|
|
|
@mixin -icon-item-type-rules($color) {
|
|
.icon-item-type {
|
|
// default icon, for known item types more specific selectors below will apply
|
|
@include svgicon("document", $color, "16", "item-type", true);
|
|
}
|
|
|
|
@each $itemTypeIcon in $-itemTypesIcons {
|
|
$itemType: camelCase(str-replace(str-replace($itemTypeIcon, "pdf", "PDF"), "epub", "EPUB"));
|
|
|
|
@if map.has-key($-itemTypesMap, $itemTypeIcon) {
|
|
$itemTypeIcon: map.get($-itemTypesMap, $itemTypeIcon);
|
|
}
|
|
|
|
.icon-item-type[data-item-type=#{$itemType}] {
|
|
@include svgicon($itemTypeIcon, $color, "16", "item-type", true);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include focus-states using($color) {
|
|
@include -icon-item-type-rules($color);
|
|
}
|
|
|
|
.virtualized-table .row {
|
|
@include focus-states using($color) {
|
|
@include -icon-item-type-rules($color);
|
|
|
|
@each $itemAttachmentIcon in $-attachmentIcons {
|
|
$itemType: camelCase(str-replace(str-replace($itemAttachmentIcon, "pdf", "PDF"), "epub", "EPUB"));
|
|
.icon-attachment-type[data-item-type=#{$itemType}] {
|
|
@include svgicon($itemAttachmentIcon, $color, "12", "item-type", false);
|
|
background-origin: content-box;
|
|
}
|
|
}
|
|
|
|
@each $icon in $-trashableObjectIcons {
|
|
.icon-css.icon-#{$icon} {
|
|
@include svgicon($icon, $color, "16", "collection-tree");
|
|
}
|
|
}
|
|
}
|
|
}
|