zotero/scss/components/_item-tree.scss

320 lines
6.3 KiB
SCSS

@use "sass:map";
#zotero-items-pane-container {
min-width: $min-width-items-pane;
}
#zotero-items-pane {
min-width: $min-width-items-pane;
min-height: 150px;
height: 150px;
width: 290px;
}
#zotero-items-tree {
.virtualized-table-body, .drag-image-container {
padding: 4px 8px 8px;
}
.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 {
direction: ltr;
transform: scaleX(-1);
display: flex;
}
.tag-swatch {
display: inline-block;
&.emoji + .emoji,
&.emoji + .colored-tag-swatches {
margin-left: 4px;
:root:-moz-locale-dir(rtl) & {
margin-left: 0;
margin-right: 4px;
}
}
&.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;
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
);
.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;
}
}
}
}