Items table redesign

This commit is contained in:
Tom Najdek 2023-11-28 09:29:55 +01:00 committed by Dan Stillman
parent d16abb1a15
commit 374b5337d8
48 changed files with 671 additions and 267 deletions

View file

@ -134,7 +134,6 @@ i('RTFScanAccept', "chrome://zotero/skin/rtfscan-accept.png", false);
i('RTFScanLink', "chrome://zotero/skin/rtfscan-link.png", false);
i('Attach', "chrome://zotero/skin/attach.png");
i('AttachSmall', "chrome://zotero/skin/attach-small.png");
i('BulletBlue', "chrome://zotero/skin/bullet_blue.png");
i('BulletBlueEmpty', "chrome://zotero/skin/bullet_blue_empty.png");
@ -169,7 +168,6 @@ i('TreeitemManuscript', 'chrome://zotero/skin/treeitem-manuscript.png');
i('TreeitemMap', 'chrome://zotero/skin/treeitem-map.png', false);
i('TreeitemNewspaperArticle', 'chrome://zotero/skin/treeitem-newspaperArticle.png');
i('TreeitemNote', 'chrome://zotero/skin/treeitem-note.png');
i('TreeitemNoteSmall', 'chrome://zotero/skin/treeitem-note-small.png');
i('TreeitemPatent', 'chrome://zotero/skin/treeitem-patent.png');
i('Treeitem', 'chrome://zotero/skin/treeitem.png');
i('TreeitemPodcast', 'chrome://zotero/skin/treeitem-podcast.png', false);
@ -262,8 +260,11 @@ module.exports.getCSSIcon = function (key) {
return cssIconsCache.get(key).cloneNode(true);
};
module.exports.getCSSItemTypeIcon = function (itemType) {
let icon = module.exports.getCSSIcon('icon-item-type');
module.exports.getCSSItemTypeIcon = function (itemType, key = 'icon-item-type') {
let icon = module.exports.getCSSIcon(key);
icon.dataset.itemType = itemType;
return icon;
};
module.exports['IconAttachSmall'] = props => <CSSIcon name="attachment" className="icon-16" {...props} />;
module.exports['IconTreeitemNoteSmall'] = props => <CSSIcon name="note" className="icon-16" {...props} />;

View file

@ -30,7 +30,7 @@ const PropTypes = require('prop-types');
const cx = require('classnames');
const WindowedList = require('./windowed-list');
const Draggable = require('./draggable');
const { IconDownChevron, getDOMElement } = require('components/icons');
const { CSSIcon, getDOMElement } = require('components/icons');
const TYPING_TIMEOUT = 1000;
const MINIMUM_ROW_HEIGHT = 20; // px
@ -76,6 +76,24 @@ class TreeSelection {
return this.selected.has(index);
}
/**
* Determines if the given index is the beginning of a selection block.
* @param {number} index - The index to check.
* @returns {boolean} - True if the index is the beginning of a selection block, false otherwise.
*/
isFirstRowOfSelectionBlock(index) {
return this.isSelected(index) && !this.selected.has(index - 1);
}
/**
* Checks if the given index is the end of a selection block.
* @param {number} index - The index to check.
* @returns {boolean} - True if the index is the end of a selection block, false otherwise.
*/
isLastRowOfSelectionBlock(index) {
return this.isSelected(index) && !this.selected.has(index + 1);
}
/**
* Toggles an item's selection state, updates focused item to index.
* @param index {Number} The index is 0-clamped.
@ -98,6 +116,10 @@ class TreeSelection {
this.focused = index;
if (this._tree.invalidate) {
this._tree.invalidateRow(index);
// might extend, truncate, merge or split a selection block
// so need to invalidate next and previous rows as well
this._tree.invalidateRow(index - 1);
this._tree.invalidateRow(index + 1);
this._tree.invalidateRow(previousFocused);
}
this._updateTree(shouldDebounce);
@ -194,10 +216,24 @@ class TreeSelection {
if (this.selectEventsSuppressed) return;
let oldEdges = new Set();
for (let oldIndex of oldSelected) {
if (!oldSelected.has(oldIndex + 1) || !oldSelected.has(oldIndex - 1)) {
oldEdges.add(oldIndex);
}
}
if (this._tree.invalidate) {
for (let index of this.selected) {
if (oldSelected.has(index)) {
oldSelected.delete(index);
// ensure old and new selection block edges are invalidated
if (oldEdges.has(index) || !this.selected.has(index - 1) || !this.selected.has(index + 1)) {
this._tree.invalidateRow(index);
}
// skip invalidation for already selected rows, except for edges (above)
continue;
}
this._tree.invalidateRow(index);
@ -983,7 +1019,6 @@ class VirtualizedTable extends React.Component {
this._updateWidth();
this.props.treeboxRef && this.props.treeboxRef(this._jsWindow);
this._setAlternatingRows();
this._setXulTooltip();
window.addEventListener("resize", () => {
@ -1038,20 +1073,6 @@ class VirtualizedTable extends React.Component {
popupset.appendChild(tooltip);
}
_setAlternatingRows() {
if (this.props.alternatingRowColors) {
this._jsWindow.innerElem.style.background = `
repeating-linear-gradient(
180deg,
${this.props.alternatingRowColors[1]},
${this.props.alternatingRowColors[1]} ${this._rowHeight}px,
${this.props.alternatingRowColors[0]} ${this._rowHeight}px,
${this.props.alternatingRowColors[0]} ${this._rowHeight * 2}px
)
`;
}
}
_getWindowedListOptions() {
return {
getItemCount: this.props.getRowCount,
@ -1072,8 +1093,9 @@ class VirtualizedTable extends React.Component {
node.addEventListener('dblclick', e => this._activateNode(e, [index]), { passive: true });
}
node.style.height = this._rowHeight + 'px';
node.style.lineHeight = this._rowHeight + 'px';
node.id = this.props.id + "-row-" + index;
node.classList.toggle('odd', index % 2 == 1);
node.classList.toggle('even', index % 2 == 0);
if (!node.hasAttribute('role')) {
node.setAttribute('role', 'row');
}
@ -1123,10 +1145,10 @@ class VirtualizedTable extends React.Component {
if (!Zotero.isNode && Zotero.isLinux) {
sortIndicator = <span className={"sort-indicator " + (column.sortDirection === 1 ? "ascending" : "descending")}/>;
} else {
sortIndicator = <IconDownChevron className={"sort-indicator " + (column.sortDirection === 1 ? "ascending" : "descending")}/>;
sortIndicator = <CSSIcon name="sort-indicator" className={"icon-8 sort-indicator " + (column.sortDirection === 1 ? "ascending" : "descending")} />;
}
}
const className = cx("cell", column.className, { dragging: this.state.draggingColumn == index },
const className = cx("cell", column.className, { 'first-column': index === 0, dragging: this.state.draggingColumn == index },
{ "cell-icon": !!column.iconLabel });
return (<Draggable
onDragStart={this._handleColumnDragStart.bind(this, index)}
@ -1254,7 +1276,6 @@ class VirtualizedTable extends React.Component {
if (!this._jsWindow) return;
this._jsWindow.update(this._getWindowedListOptions());
this._setAlternatingRows();
this._jsWindow.invalidate();
};
@ -1306,17 +1327,15 @@ class VirtualizedTable extends React.Component {
if (!this.props.showHeader) return;
const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`);
if (!jsWindow) return;
const tree = document.querySelector(`#${this.props.id}`);
const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
const scrollbarWidth = Math.max(0,
tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
const scrollbarWidth = Zotero.Utilities.Internal.getScrollbarWidth();
let paddingWidth = 0;
if (Zotero.isLinux) {
paddingWidth = 2; // from the border
}
// Should be kept up to date with the _virtualized-table.scss value
// for .virtualized-table-header
header.style.width = `calc(100% - ${scrollbarWidth-paddingWidth}px)`;
header.style.width = `calc(100% - ${scrollbarWidth - paddingWidth}px)`;
}
/**

View file

@ -2675,29 +2675,6 @@ var ItemTree = class ItemTree extends LibraryTree {
span.className = `cell ${column.className}`;
span.classList.add('primary');
// Add twisty, icon, tag swatches and retraction indicator
let twisty;
if (this.isContainerEmpty(index)) {
twisty = document.createElement('span');
twisty.classList.add("spacer-twisty");
}
else {
twisty = getCSSIcon("twisty");
twisty.classList.add('twisty');
if (this.isContainerOpen(index)) {
twisty.classList.add('open');
}
twisty.style.pointerEvents = 'auto';
twisty.addEventListener('mousedown', event => event.stopPropagation());
twisty.addEventListener('mouseup', event => this.handleTwistyMouseUp(event, index),
{ passive: true });
twisty.addEventListener('dblclick', event => event.stopImmediatePropagation(),
{ passive: true });
}
const icon = this._getIcon(index);
icon.classList.add('cell-icon');
const item = this.getRow(index).ref;
let retracted = "";
let retractedAriaLabel = "";
@ -2711,7 +2688,11 @@ var ItemTree = class ItemTree extends LibraryTree {
let tagSpans = '';
let coloredTags = item.getColoredTags();
if (coloredTags.length) {
tagSpans = coloredTags.map(x => this._getTagSwatch(x.tag, x.color));
let { emoji, colored } = coloredTags.reduce((acc, tag) => {
acc[Zotero.Utilities.Internal.isOnlyEmoji(tag.tag) ? 'emoji' : 'colored'].push(tag);
return acc;
}, { emoji: [], colored: [] });
tagSpans = [...emoji, ...colored].map(x => this._getTagSwatch(x.tag, x.color));
tagAriaLabel = tagSpans.length == 1 ? Zotero.getString('searchConditions.tag') : Zotero.getString('itemFields.tags');
tagAriaLabel += ' ' + coloredTags.map(x => x.tag).join(', ') + '.';
}
@ -2736,11 +2717,7 @@ var ItemTree = class ItemTree extends LibraryTree {
textSpan.dir = 'auto';
textSpan.setAttribute('aria-label', textSpanAriaLabel);
span.append(twisty, icon, retracted, ...tagSpans, textSpan);
// Set depth indent
const depth = this.getLevel(index);
span.firstChild.style.paddingInlineStart = (CHILD_INDENT * depth) + 'px';
span.append(retracted, textSpan, ...tagSpans);
return span;
}
@ -2767,19 +2744,19 @@ var ItemTree = class ItemTree extends LibraryTree {
// If the item has a child attachment
if (type !== null && type != 'none') {
if (type == 'pdf') {
icon = getCSSItemTypeIcon('attachmentPDF');
icon = getCSSItemTypeIcon('attachmentPDF', 'icon-attachment-type');
ariaLabel = Zotero.getString('pane.item.attachments.hasPDF');
}
else if (type == 'snapshot') {
icon = getCSSItemTypeIcon('attachmentSnapshot');
icon = getCSSItemTypeIcon('attachmentSnapshot', 'icon-attachment-type');
ariaLabel = Zotero.getString('pane.item.attachments.hasSnapshot');
}
else if (type == 'epub') {
icon = getCSSItemTypeIcon('attachmentEPUB');
icon = getCSSItemTypeIcon('attachmentEPUB', 'icon-attachment-type');
ariaLabel = Zotero.getString('pane.item.attachments.hasEPUB');
}
else {
icon = getCSSItemTypeIcon('attachmentFile');
icon = getCSSItemTypeIcon('attachmentFile', 'icon-attachment-type');
ariaLabel = Zotero.getString('pane.item.attachments.has');
}
@ -2818,27 +2795,72 @@ var ItemTree = class ItemTree extends LibraryTree {
return span;
}
_renderCell(index, data, column) {
_renderCell(index, data, column, isFirstColumn) {
let cell;
if (column.primary) {
return this._renderPrimaryCell(index, data, column);
cell = this._renderPrimaryCell(index, data, column);
}
else if (column.dataKey === 'hasAttachment') {
return this._renderHasAttachmentCell(index, data, column);
cell = this._renderHasAttachmentCell(index, data, column);
}
else if (column.renderCell) {
try {
return column.renderCell.apply(this, arguments);
cell = column.renderCell.apply(this, arguments);
}
catch (e) {
Zotero.logError(e);
}
}
let cell = renderCell.apply(this, arguments);
if (column.dataKey === 'numNotes' && data) {
cell.setAttribute('aria-label', Zotero.getString('pane.item.notes.count', data, data) + '.');
else {
cell = renderCell.apply(this, arguments);
if (column.dataKey === 'numNotes' && data) {
cell.setAttribute('aria-label', Zotero.getString('pane.item.notes.count', data, data) + '.');
}
else if (column.dataKey === 'itemType') {
cell.setAttribute('aria-hidden', true);
}
}
else if (column.dataKey === 'itemType') {
cell.setAttribute('aria-hidden', true);
if (isFirstColumn) {
// Add depth indent, twisty and icon
const depth = this.getLevel(index);
let indentSpan = document.createElement('span');
indentSpan.className = "cell-indent";
indentSpan.style.paddingInlineStart = (CHILD_INDENT * depth) + 'px';
let twisty;
if (this.isContainerEmpty(index)) {
twisty = document.createElement('span');
twisty.classList.add("spacer-twisty");
}
else {
twisty = getCSSIcon("twisty");
twisty.classList.add('twisty');
if (this.isContainerOpen(index)) {
twisty.classList.add('open');
}
twisty.style.pointerEvents = 'auto';
twisty.addEventListener('mousedown', event => event.stopPropagation());
twisty.addEventListener('mouseup', event => this.handleTwistyMouseUp(event, index),
{ passive: true });
twisty.addEventListener('dblclick', event => event.stopImmediatePropagation(),
{ passive: true });
}
const icon = this._getIcon(index);
icon.classList.add('cell-icon');
if (cell.querySelector('.cell-text') === null) {
// convert text-only cell to a cell with text and icon
let textSpan = document.createElement('span');
textSpan.className = "cell-text";
textSpan.innerHTML = cell.innerHTML;
cell.innerHTML = "";
cell.append(textSpan);
}
cell.prepend(indentSpan, twisty, icon);
cell.classList.add('first-column');
}
return cell;
}
@ -2855,6 +2877,8 @@ var ItemTree = class ItemTree extends LibraryTree {
}
div.classList.toggle('selected', selection.isSelected(index));
div.classList.toggle('first-selected', selection.isFirstRowOfSelectionBlock(index));
div.classList.toggle('last-selected', selection.isLastRowOfSelectionBlock(index));
div.classList.toggle('focused', selection.focused == index);
div.classList.remove('drop', 'drop-before', 'drop-after');
const rowData = this._getRowData(index);
@ -2871,9 +2895,15 @@ var ItemTree = class ItemTree extends LibraryTree {
}
}
let { firstColumn } = columns.reduce((acc, column) => {
return !column.hidden && column.ordinal < acc.lowestOrdinal
? { lowestOrdinal: column.ordinal, firstColumn: column }
: acc;
}, { lowestOrdinal: Infinity, firstColumn: null });
for (let column of columns) {
if (column.hidden) continue;
div.appendChild(this._renderCell(index, rowData[column.dataKey], column));
div.appendChild(this._renderCell(index, rowData[column.dataKey], column, column === firstColumn));
}
if (!oldDiv) {
@ -3797,10 +3827,13 @@ var ItemTree = class ItemTree extends LibraryTree {
// https://stackoverflow.com/a/54369605
if (Zotero.Utilities.Internal.isOnlyEmoji(tag)) {
span.textContent = tag;
span.className += ' emoji';
}
// Otherwise display color
else {
span.style.backgroundColor = color;
span.className += ' colored';
span.dataset.color = color.toLowerCase();
span.style.color = color;
}
return span;
}

View file

@ -1,4 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99998 1.70711C1.37001 1.07714 1.81618 0 2.70708 0H14.2929C15.1838 0 15.6299 1.07714 15 1.70711L9.99998 6.70711V12.7071L6.99998 15.7071V6.70711L1.99998 1.70711ZM14.2929 1L2.70708 1L7.99998 6.29289V13.2929L8.99998 12.2929V6.29289L14.2929 1Z" fill="#00000080" />
</svg>

Before

Width:  |  Height:  |  Size: 423 B

View file

@ -1,3 +0,0 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.70711 2L1 2.70711L4 5.70711L7 2.70711L6.29289 2L4 4.29289L1.70711 2Z" fill="#FFFFFF8C"/>
</svg>

Before

Width:  |  Height:  |  Size: 200 B

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M0 2.70711L4 6.70711L8 2.70711L7.29289 2L4 5.29289L0.707107 2L0 2.70711Z" fill="white" fill-opacity="0.55"/>
</svg>

Before

Width:  |  Height:  |  Size: 220 B

View file

@ -1,3 +0,0 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.70711 2L1 2.70711L4 5.70711L7 2.70711L6.29289 2L4 4.29289L1.70711 2Z" fill="#00000080"/>
</svg>

Before

Width:  |  Height:  |  Size: 200 B

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M0 2.70711L4 6.70711L8 2.70711L7.29289 2L4 5.29289L0.707107 2L0 2.70711Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 200 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 474 B

View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="attachment" clip-path="url(#clip0_3858_2403)">
<path id="Vector" d="M4.5 10.5L11.25 3.75C11.6642 3.33579 12.3358 3.33579 12.75 3.75V3.75C13.1642 4.16421 13.1642 4.83579 12.75 5.25L4.5 13.5C3.67157 14.3284 2.32843 14.3284 1.5 13.5V13.5C0.671573 12.6716 0.671573 11.3284 1.5 10.5L9.75 2.25C10.9926 1.00736 13.0074 1.00736 14.25 2.25V2.25C15.4926 3.49264 15.4926 5.50736 14.25 6.75L7.5 13.5" stroke="context-fill" stroke-linecap="round"/>
</g>
<defs>
<clipPath id="clip0_3858_2403">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 654 B

View file

@ -1,3 +1,3 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 2.70711L4 6.70711L8 2.70711L7.29289 2L4 5.29289L0.707107 2L0 2.70711Z" fill="black"/>
<path d="M0 2.70711L4 6.70711L8 2.70711L7.29289 2L4 5.29289L0.707107 2L0 2.70711Z" fill="context-fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 204 B

View file

@ -1,4 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99998 1.70711C1.37001 1.07714 1.81618 0 2.70708 0H14.2929C15.1838 0 15.6299 1.07714 15 1.70711L9.99998 6.70711V12.7071L6.99998 15.7071V6.70711L1.99998 1.70711ZM14.2929 1L2.70708 1L7.99998 6.29289V13.2929L8.99998 12.2929V6.29289L14.2929 1Z" fill="#FFFFFF8C" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99998 1.70711C1.37001 1.07714 1.81618 0 2.70708 0H14.2929C15.1838 0 15.6299 1.07714 15 1.70711L9.99998 6.70711V12.7071L6.99998 15.7071V6.70711L1.99998 1.70711ZM14.2929 1L2.70708 1L7.99998 6.29289V13.2929L8.99998 12.2929V6.29289L14.2929 1Z" fill="context-fill" />
</svg>

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 426 B

View file

@ -0,0 +1,10 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.34" d="M7 3H0V5H7V3Z" fill="#39BF68"/>
<path opacity="0.85" d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#39BF68"/>
<path opacity="0.24" fill-rule="evenodd" clip-rule="evenodd" d="M10 7.5V2L11 3V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5ZM4.5 10H3L4 11H4.70802C4.57422 10.6938 4.5 10.3556 4.5 10Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V1C10 0.734784 9.89464 0.48043 9.70711 0.292893C9.51957 0.105357 9.26522 0 9 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V2H2V1H3V2H4V1H9V7.5H10V2L11 3V7.70802C11.3981 7.88197 11.7422 8.15661 12 8.49976V3C12 2.73478 11.8946 2.48043 11.7071 2.29289C11.5196 2.10536 11.2652 2 11 2ZM5.49976 12C5.15661 11.7422 4.88197 11.3981 4.70802 11H4L3 10H4.5C4.5 9.64445 4.57422 9.30623 4.70802 9H4V5H3V9H2V5H1V9C1.00006 9.26519 1.10545 9.51951 1.293 9.707L3.293 11.707C3.48049 11.8945 3.73481 11.9999 4 12H5.49976Z" fill="white"/>
<g opacity="0.6">
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,6 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.34" d="M7 3H0V5H7V3Z" fill="#39BF68"/>
<path opacity="0.85" d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#39BF68"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M10 2H11C11.2652 2 11.5196 2.10536 11.7071 2.29289C11.8946 2.48043 12 2.73478 12 3V11C12 11.2652 11.8946 11.5196 11.7071 11.7071C11.5196 11.8946 11.2652 12 11 12H4C3.73481 11.9999 3.48049 11.8945 3.293 11.707L1.293 9.707C1.10545 9.51951 1.00006 9.26519 1 9V5H2V9H3V5H4V9H9V1H4V2H3V1H2V2H1V1C1 0.734784 1.10536 0.48043 1.29289 0.292893C1.48043 0.105357 1.73478 0 2 0H9C9.26522 0 9.51957 0.105357 9.70711 0.292893C9.89464 0.48043 10 0.734784 10 1V2ZM10 2V9C10 9.26522 9.89464 9.51957 9.70711 9.70711C9.51957 9.89464 9.26522 10 9 10H3L4 11H11V3L10 2Z" fill="white"/>
<path opacity="0.24" d="M10 2V9C10 9.55228 9.55228 10 9 10H3L4 11H11V3L10 2Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 948 B

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M5.5 3H2.5C1.67157 3 1 3.67157 1 4.5C1 5.32843 1.67157 6 2.5 6H3.54147C3.5142 6.16259 3.5 6.32962 3.5 6.49997C3.5 6.67033 3.5142 6.83738 3.54148 7H2.5C1.11929 7 0 5.88071 0 4.5C0 3.11929 1.11929 2 2.5 2H5.5C6.88071 2 8 3.11929 8 4.5C8 5.83649 6.95126 6.92804 5.63183 6.99658C5.54795 6.85026 5.5 6.68072 5.5 6.49997C5.5 6.31527 5.55007 6.14227 5.63738 5.99379C6.40142 5.92442 7 5.28211 7 4.5C7 3.67157 6.32843 3 5.5 3ZM6.5 4.49996C6.5 4.31924 6.45206 4.14972 6.36821 4.00341C5.04876 4.07194 4 5.1635 4 6.5C4 7.88071 5.11929 9 6.5 9H9.5C10.8807 9 12 7.88071 12 6.5C12 5.11929 10.8807 4 9.5 4H8.45853C8.4858 4.16259 8.5 4.32962 8.5 4.49996C8.5 4.67033 8.4858 4.83738 8.45851 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5C5 5.7179 5.59856 5.07561 6.36257 5.00621C6.44991 4.85772 6.5 4.68469 6.5 4.49996Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1,10 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.24" d="M8 1.70703V3H9.293L8 1.70703Z" fill="white"/>
<path opacity="0.36" d="M6 3H1V4H6V3Z" fill="#DB2C3A"/>
<path opacity="0.9" d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#DB2C3A"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M3 1V2H2V0H8.707L12 3.293V8.49976C11.7422 8.15661 11.3981 7.88197 11 7.70802V4H8V1H3ZM4.70802 11H3V5H2V12H5.49976C5.15661 11.7422 4.88197 11.3981 4.70802 11ZM9 1.707L10.293 3H9V1.707Z" fill="white"/>
<g opacity="0.6">
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,6 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.24" d="M9 1.70703V3H10.293L9 1.70703Z" fill="white"/>
<path opacity="0.36" d="M6 3H1V4H6V3Z" fill="#DB2C3A"/>
<path opacity="0.9" d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#DB2C3A"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M2 0H8.707L12 3.293V12H2V5H3V11H11V4H8V1H3V2H2V0ZM10.293 3L9 1.707V3H10.293Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 454 B

View file

@ -0,0 +1,9 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" d="M1 2H10V3H1V2Z" fill="white"/>
<path opacity="0.6" d="M11 7V11H5V7H11ZM11 6H5C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7V11C4 11.2652 4.10536 11.5196 4.29289 11.7071C4.48043 11.8946 4.73478 12 5 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11V7C12 6.73478 11.8946 6.48043 11.7071 6.29289C11.5196 6.10536 11.2652 6 11 6Z" fill="white"/>
<path opacity="0.12" d="M8.27779 8.58427C8.19556 8.52932 8.09889 8.5 8 8.5C7.86739 8.5 7.74021 8.55268 7.64645 8.64645C7.55268 8.74021 7.5 8.86739 7.5 9C7.5 9.09889 7.52932 9.19556 7.58427 9.27779C7.63921 9.36001 7.7173 9.4241 7.80866 9.46194C7.90002 9.49978 8.00055 9.50969 8.09755 9.49039C8.19454 9.4711 8.28363 9.42348 8.35355 9.35355C8.42348 9.28363 8.4711 9.19454 8.49039 9.09755C8.50969 9.00055 8.49978 8.90002 8.46194 8.80866C8.4241 8.7173 8.36001 8.63921 8.27779 8.58427Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1 1H10C10.2652 1 10.5196 1.10536 10.7071 1.29289C10.8946 1.48043 11 1.73478 11 2V6H10V4H1V10H4V11H0V2C0 1.73478 0.105357 1.48043 0.292893 1.29289C0.48043 1.10536 0.734784 1 1 1ZM1 3H10V2H1V3Z" fill="white"/>
<path opacity="0.24" fill-rule="evenodd" clip-rule="evenodd" d="M11 11H5V7H11V11ZM8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5C8.27614 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.72386 7.5 9C7.5 9.27614 7.72386 9.5 8 9.5ZM8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z" fill="white"/>
<path opacity="0.6" d="M2 6H5C4.44772 6 4 6.44772 4 7V9H2V6Z" fill="#4072E5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,9 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" d="M1 2H10V3H1V2Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1 1H10C10.2652 1 10.5196 1.10536 10.7071 1.29289C10.8946 1.48043 11 1.73478 11 2V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5V4H1V10H4.5C4.5 10.3556 4.57422 10.6938 4.70802 11H0V2C0 1.73478 0.105357 1.48043 0.292893 1.29289C0.48043 1.10536 0.734784 1 1 1ZM1 3H10V2H1V3Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M9 6H2V9H4.70802C5.0938 8.11705 5.97484 7.5 7 7.5H9V6Z" fill="#4072E5"/>
<g opacity="0.6">
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,11 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V1C10 0.734784 9.89464 0.48043 9.70711 0.292893C9.51957 0.105357 9.26522 0 9 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V9C1.00006 9.26519 1.10545 9.51951 1.293 9.707L3.293 11.707C3.48049 11.8945 3.73481 11.9999 4 12H5.49976C4.89267 11.5439 4.5 10.8178 4.5 10C4.5 8.61929 5.61929 7.5 7 7.5H10C10.8178 7.5 11.5439 7.89267 12 8.49976V3C12 2.73478 11.8946 2.48043 11.7071 2.29289C11.5196 2.10536 11.2652 2 11 2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 7.5V2L11 3V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5ZM4.5 10H3L4 11H4.70802C4.57422 10.6938 4.5 10.3556 4.5 10Z" fill="#EBEBEB"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M10 2H11C11.2652 2 11.5196 2.10536 11.7071 2.29289C11.8946 2.48043 12 2.73478 12 3V8.49976C11.7422 8.15661 11.3981 7.88197 11 7.70802V3L10 2ZM10 7.5V2V1C10 0.734784 9.89464 0.48043 9.70711 0.292893C9.51957 0.105357 9.26522 0 9 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V9C1.00006 9.26519 1.10545 9.51951 1.293 9.707L3.293 11.707C3.48049 11.8945 3.73481 11.9999 4 12H5.49976C5.15661 11.7422 4.88197 11.3981 4.70802 11H4L3 10H4.5C4.5 9.64445 4.57422 9.30623 4.70802 9H4V1H9V7.5H10ZM3 1H2V9H3V1Z" fill="black"/>
<path d="M9 1H4V9H9V1Z" fill="white"/>
<path d="M3 1H2V9H3V1Z" fill="white"/>
<path d="M6 3H1V4H6V3Z" fill="#B0E5C3"/>
<path d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#39BF68"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="#888888"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -0,0 +1,9 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10 2H11C11.2652 2 11.5196 2.10536 11.7071 2.29289C11.8946 2.48043 12 2.73478 12 3V11C12 11.2652 11.8946 11.5196 11.7071 11.7071C11.5196 11.8946 11.2652 12 11 12H4C3.73481 11.9999 3.48049 11.8945 3.293 11.707L1.293 9.707C1.10545 9.51951 1.00006 9.26519 1 9V1C1 0.734784 1.10536 0.48043 1.29289 0.292893C1.48043 0.105357 1.73478 0 2 0H9C9.26522 0 9.51957 0.105357 9.70711 0.292893C9.89464 0.48043 10 0.734784 10 1V2Z" fill="white"/>
<path d="M10 2V9C10 9.55228 9.55228 10 9 10H3L4 11H11V3L10 2Z" fill="#EBEBEB"/>
<path opacity="0.2" d="M11 2H10L11 3V11H4L3 10H9C9.26522 10 9.51957 9.89464 9.70711 9.70711C9.89464 9.51957 10 9.26522 10 9V1C10 0.734784 9.89464 0.48043 9.70711 0.292893C9.51957 0.105357 9.26522 0 9 0L2 0C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V9C1.00006 9.26519 1.10545 9.51951 1.293 9.707L3.293 11.707C3.48049 11.8945 3.73481 11.9999 4 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11V3C12 2.73478 11.8946 2.48043 11.7071 2.29289C11.5196 2.10536 11.2652 2 11 2ZM4 1H9V9H4V1ZM2 1H3V9H2V1Z" fill="black"/>
<path d="M9 1H4V9H9V1Z" fill="white"/>
<path d="M3 1H2V9H3V1Z" fill="white"/>
<path d="M6 3H1V4H6V3Z" fill="#B0E5C3"/>
<path d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#39BF68"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 3H2.5C1.67157 3 1 3.67157 1 4.5C1 5.32843 1.67157 6 2.5 6H3.54147C3.5142 6.16259 3.5 6.32962 3.5 6.49997C3.5 6.67033 3.5142 6.83738 3.54148 7H2.5C1.11929 7 0 5.88071 0 4.5C0 3.11929 1.11929 2 2.5 2H5.5C6.88071 2 8 3.11929 8 4.5C8 5.83649 6.95126 6.92804 5.63183 6.99658C5.54795 6.85026 5.5 6.68072 5.5 6.49997C5.5 6.31527 5.55007 6.14227 5.63738 5.99379C6.40142 5.92442 7 5.28211 7 4.5C7 3.67157 6.32843 3 5.5 3ZM6.5 4.49996C6.5 4.31924 6.45206 4.14972 6.36821 4.00341C5.04876 4.07194 4 5.1635 4 6.5C4 7.88071 5.11929 9 6.5 9H9.5C10.8807 9 12 7.88071 12 6.5C12 5.11929 10.8807 4 9.5 4H8.45853C8.4858 4.16259 8.5 4.32962 8.5 4.49996C8.5 4.67033 8.4858 4.83738 8.45851 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5C5 5.7179 5.59856 5.07561 6.36257 5.00621C6.44991 4.85772 6.5 4.68469 6.5 4.49996Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 1,015 B

View file

@ -0,0 +1,10 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12 11.5002V12H11.5002C11.6895 11.8578 11.8578 11.6895 12 11.5002ZM12 8.49976C11.5439 7.89267 10.8178 7.5 10 7.5H7C5.61929 7.5 4.5 8.61929 4.5 10C4.5 10.8178 4.89267 11.5439 5.49976 12H2V0H8.707L12 3.293V8.49976Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.26756 11C5.09739 10.7058 5 10.3643 5 10C5 8.89543 5.89543 8 7 8H10C10.3643 8 10.7058 8.09739 11 8.26756V3.707L8.293 1H3V11H5.26756Z" fill="white"/>
<path opacity="0.08" d="M9 1.70703V3H10.293L9 1.70703Z" fill="black"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M5.49976 12H2V0H8.707L12 3.293V8.49976C11.7422 8.15661 11.3981 7.88197 11 7.70802V4H8V1H3V11H4.70802C4.88197 11.3981 5.15661 11.7422 5.49976 12ZM10.293 3L9 1.707V3H10.293Z" fill="black"/>
<path d="M6 3H1V4H6V3Z" fill="#F1ABB0"/>
<path d="M6 3V4H1V3H6ZM7 2H0V5H7V2Z" fill="#DB2C3A"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="#888888"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,8 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M8.707 0H2V12H12V3.293L8.707 0Z" fill="white"/>
<path d="M8.293 1L11 3.707V11H3V1H8.293Z" fill="white"/>
<path opacity="0.2" d="M8.707 0H2V12H12V3.293L8.707 0ZM9 1.707L10.293 3H9V1.707ZM3 11V1H8V4H11V11H3Z" fill="black"/>
<path opacity="0.08" d="M9 1.70703V3H10.293L9 1.70703Z" fill="black"/>
<path d="M6 3H1V4H6V3Z" fill="#F1ABB0"/>
<path d="M5.83333 3V4H1.16667V3H5.83333ZM7 2H0V5H7V2Z" fill="#DB2C3A"/>
</svg>

After

Width:  |  Height:  |  Size: 532 B

View file

@ -0,0 +1,11 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2H1V10H10V2Z" fill="white"/>
<path opacity="0.04" d="M10 2H1V3H10V2Z" fill="black"/>
<path opacity="0.5" d="M10 2V10H1V2H10ZM10 1H1C0.734784 1 0.48043 1.10536 0.292893 1.29289C0.105357 1.48043 0 1.73478 0 2L0 11H11V2C11 1.73478 10.8946 1.48043 10.7071 1.29289C10.5196 1.10536 10.2652 1 10 1Z" fill="white"/>
<path opacity="0.2" d="M10 1H1C0.734784 1 0.48043 1.10536 0.292893 1.29289C0.105357 1.48043 0 1.73478 0 2L0 11H11V2C11 1.73478 10.8946 1.48043 10.7071 1.29289C10.5196 1.10536 10.2652 1 10 1ZM10 10H1V4H10V10ZM10 3H1V2H10V3Z" fill="black"/>
<path d="M5 6H2V9H5V6Z" fill="#B3C7F5"/>
<path d="M11 6.5H5C4.72386 6.5 4.5 6.72386 4.5 7V11C4.5 11.2761 4.72386 11.5 5 11.5H11C11.2761 11.5 11.5 11.2761 11.5 11V7C11.5 6.72386 11.2761 6.5 11 6.5Z" fill="#B4B4B4"/>
<path d="M11 7V11H5V7H11ZM11 6H5C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7V11C4 11.2652 4.10536 11.5196 4.29289 11.7071C4.48043 11.8946 4.73478 12 5 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11V7C12 6.73478 11.8946 6.48043 11.7071 6.29289C11.5196 6.10536 11.2652 6 11 6Z" fill="#444444"/>
<path d="M8 10C8.55228 10 9 9.55228 9 9C9 8.44772 8.55228 8 8 8C7.44772 8 7 8.44772 7 9C7 9.55228 7.44772 10 8 10Z" fill="#DADADA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5C8.27614 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.72386 7.5 9C7.5 9.27614 7.72386 9.5 8 9.5ZM8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z" fill="#444444"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,9 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 10C4.5 8.61929 5.61929 7.5 7 7.5H10V2H1V10H4.5Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M1 1H10C10.2652 1 10.5196 1.10536 10.7071 1.29289C10.8946 1.48043 11 1.73478 11 2V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5V4H1V10H4.5C4.5 10.3556 4.57422 10.6938 4.70802 11H0V2C0 1.73478 0.105357 1.48043 0.292893 1.29289C0.48043 1.10536 0.734784 1 1 1ZM1 3H10V2H1V3Z" fill="white"/>
<path opacity="0.04" d="M10 2H1V3H10V2Z" fill="black"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M1 1H10C10.2652 1 10.5196 1.10536 10.7071 1.29289C10.8946 1.48043 11 1.73478 11 2V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5V4H1V10H4.5C4.5 10.3556 4.57422 10.6938 4.70802 11H0V2C0 1.73478 0.105357 1.48043 0.292893 1.29289C0.48043 1.10536 0.734784 1 1 1ZM1 3H10V2H1V3Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6H2V9H4.70802C5.0938 8.11705 5.97484 7.5 7 7.5H9V6Z" fill="#B3C7F5"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="#888888"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="#888888"/>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,14 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_16026)">
<path opacity="0.4" d="M6 3H1V4H6V3Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V2H0V5H1V9C1 9.276 1.112 9.526 1.293 9.707L3.293 11.707C3.474 11.888 3.724 12 4 12H5.49976C5.15661 11.7422 4.88197 11.3981 4.70802 11H4L3 10H4.5C4.5 9.64445 4.57422 9.30623 4.70802 9H4V5H7V2H4V1H9V7.5H10V2L11 3V7.70802C11.3981 7.88197 11.7422 8.15661 12 8.49976V3C12 2.448 11.552 2 11 2H10V1C10 0.448 9.552 0 9 0H2C1.448 0 1 0.448 1 1ZM3 1V2H2V1H3ZM2 9V5H3V9H2ZM6 3H1V4H6V3Z" fill="white"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M10 7.5V2L11 3V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5ZM4.5 10H3L4 11H4.70802C4.57422 10.6938 4.5 10.3556 4.5 10Z" fill="white"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1960_16026">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,12 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1960_58)">
<path opacity="0.4" d="M6 3H1V4H6V3Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2V1C1 0.448 1.448 0 2 0H9C9.552 0 10 0.448 10 1V2V9C10 9.552 9.552 10 9 10H3L4 11H11V3L10 2H11C11.552 2 12 2.448 12 3V11C12 11.552 11.552 12 11 12H4C3.724 12 3.474 11.888 3.293 11.707L1.293 9.707C1.112 9.526 1 9.276 1 9V5H0V2H1ZM4 1H9V9H4V5H7V2H4V1ZM3 2V1H2V2H3ZM2 5V9H3V5H2ZM1 3H6V4H1V3Z" fill="white"/>
<path opacity="0.4" d="M10 2V9C10 9.55228 9.55228 10 9 10H3L4 11H11V3L10 2Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1960_58">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 747 B

View file

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 3H2.5C1.67157 3 1 3.67157 1 4.5C1 5.32843 1.67157 6 2.5 6H3.54147C3.5142 6.16259 3.5 6.32962 3.5 6.49997C3.5 6.67033 3.5142 6.83738 3.54148 7H2.5C1.11929 7 0 5.88071 0 4.5C0 3.11929 1.11929 2 2.5 2H5.5C6.88071 2 8 3.11929 8 4.5C8 5.83649 6.95126 6.92804 5.63183 6.99658C5.54795 6.85026 5.5 6.68072 5.5 6.49997C5.5 6.31527 5.55007 6.14227 5.63738 5.99379C6.40142 5.92442 7 5.28211 7 4.5C7 3.67157 6.32843 3 5.5 3ZM6.5 4.49996C6.5 4.31924 6.45206 4.14972 6.36821 4.00341C5.04876 4.07194 4 5.1635 4 6.5C4 7.88071 5.11929 9 6.5 9H9.5C10.8807 9 12 7.88071 12 6.5C12 5.11929 10.8807 4 9.5 4H8.45853C8.4858 4.16259 8.5 4.32962 8.5 4.49996C8.5 4.67033 8.4858 4.83738 8.45851 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5C5 5.7179 5.59856 5.07561 6.36257 5.00621C6.44991 4.85772 6.5 4.68469 6.5 4.49996Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1,013 B

View file

@ -0,0 +1,13 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1955_31085)">
<path opacity="0.4" d="M10.293 3.00003H9V1.70703L10.293 3.00003ZM6 4V3L1 3V4H6Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H8.707L12 3.293V8.49976C11.7422 8.15661 11.3981 7.88197 11 7.70802V4H8V1H3V2H7V5H3V11H4.70802C4.88197 11.3981 5.15661 11.7422 5.49976 12H2V5H0V2H2V0ZM6 4V3H1V4H6ZM9 1.707V3H10.293L9 1.707Z" fill="white"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1955_31085">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,12 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1955_31068)">
<path opacity="0.4" d="M8.5 0.5V3.5H11.5L8.5 0.5Z" fill="white"/>
<path opacity="0.4" d="M6 3H1V4H6V3Z" fill="white"/>
<path d="M8.707 0H2V2H0V5H2V12H12V3.293L8.707 0ZM9 1.707L10.293 3H9V1.707ZM1 4V3H6V4H1ZM11 11H3V5H7V2H3V1H8V4H11V11Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1955_31068">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 503 B

View file

@ -0,0 +1,8 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M10 2H1V3H10V2Z" fill="white"/>
<path opacity="0.4" d="M5 6H2V9H5V6Z" fill="white"/>
<path opacity="0.2" d="M8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z" fill="white"/>
<path opacity="0.4" d="M11 6.5H5C4.725 6.5 4.5 6.725 4.5 7V11C4.5 11.275 4.725 11.5 5 11.5H11C11.275 11.5 11.5 11.275 11.5 11V7C11.5 6.725 11.275 6.5 11 6.5ZM8 10.5C7.173 10.5 6.5 9.827 6.5 9C6.5 8.173 7.173 7.5 8 7.5C8.827 7.5 9.5 8.173 9.5 9C9.5 9.827 8.827 10.5 8 10.5Z" fill="white"/>
<path d="M11 6V2C11 1.448 10.552 1 10 1H1C0.448 1 0 1.448 0 2V11H4C4 11.552 4.448 12 5 12H11C11.552 12 12 11.552 12 11V7C12 6.448 11.552 6 11 6ZM1 2H10V3H1V2ZM4 7V10H1V4H10V6H5C4.448 6 4 6.448 4 7ZM11 11H5V7H11V11Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 9.5C8.27614 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.27614 8.5 8 8.5C7.72386 8.5 7.5 8.72386 7.5 9C7.5 9.27614 7.72386 9.5 8 9.5ZM8 10.5C8.82843 10.5 9.5 9.82843 9.5 9C9.5 8.17157 8.82843 7.5 8 7.5C7.17157 7.5 6.5 8.17157 6.5 9C6.5 9.82843 7.17157 10.5 8 10.5Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,7 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M10 2H1V3H10V2Z" fill="white"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M9 6H2V9H4.70802C5.0938 8.11705 5.97484 7.5 7 7.5H9V6Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H10C10.2652 1 10.5196 1.10536 10.7071 1.29289C10.8946 1.48043 11 1.73478 11 2V7.70802C10.6938 7.57422 10.3556 7.5 10 7.5V4H1V10H4.5C4.5 10.3556 4.57422 10.6938 4.70802 11H0V2C0 1.73478 0.105357 1.48043 0.292893 1.29289C0.48043 1.10536 0.734784 1 1 1ZM1 3H10V2H1V3Z" fill="white"/>
<path d="M8 9H7C6.44772 9 6 9.44772 6 10C6 10.4429 6.28791 10.8185 6.68677 10.95C6.85917 11.3693 7.14228 11.7314 7.49972 12H7C5.89543 12 5 11.1046 5 10C5 8.89543 5.89543 8 7 8H8C9.10457 8 10 8.89543 10 10C10 10.1726 9.97812 10.3402 9.93699 10.5H8.99997C8.95686 10.5 8.91502 10.4945 8.87512 10.4843C8.95469 10.3408 9 10.1757 9 10C9 9.44772 8.55228 9 8 9Z" fill="white"/>
<path d="M7 10C7 9.82735 7.02188 9.65981 7.06301 9.5H8C8.04312 9.5 8.08496 9.50546 8.12488 9.51572C8.04531 9.6592 8 9.82431 8 10C8 10.5523 8.44772 11 9 11H10C10.5523 11 11 10.5523 11 10C11 9.5571 10.7121 9.18145 10.3132 9.05002C10.1408 8.63068 9.85768 8.26855 9.50024 8H10C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12H9C7.89543 12 7 11.1046 7 10Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 0V16H9.707L15 10.707V0H2ZM3 1H14V2H3V1ZM10 14.293V11H13.293L10 14.293ZM14 10H9V15H3V3H14V10Z" fill="context-fill" />
</svg>

After

Width:  |  Height:  |  Size: 232 B

View file

@ -0,0 +1,5 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="tag-circle">
<circle id="Vector" cx="5" cy="5" r="4.5" fill="context-fill" stroke="context-stroke"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 216 B

View file

@ -0,0 +1,5 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="tag-circle">
<circle id="Vector" cx="4" cy="4" r="4" fill="context-fill"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 186 B

View file

@ -0,0 +1,12 @@
<svg width="9" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="tag-crescent">
<g id="Vector">
<mask id="path-1-outside-1_4333_2740" maskUnits="userSpaceOnUse" x="0.399414" y="0" width="9" height="10" fill="black">
<rect fill="context-stroke" x="0.399414" width="9" height="10"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 8.66685C3.38403 7.75368 4.00023 6.4488 4.00023 5C4.00023 3.5512 3.38403 2.24632 2.39941 1.33315C2.88957 1.11887 3.43097 1 4.00013 1C6.20927 1 8.00013 2.79086 8.00013 5C8.00013 7.20914 6.20927 9 4.00013 9C3.43097 9 2.88957 8.88113 2.39941 8.66685Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 8.66685C3.38403 7.75368 4.00023 6.4488 4.00023 5C4.00023 3.5512 3.38403 2.24632 2.39941 1.33315C2.88957 1.11887 3.43097 1 4.00013 1C6.20927 1 8.00013 2.79086 8.00013 5C8.00013 7.20914 6.20927 9 4.00013 9C3.43097 9 2.88957 8.88113 2.39941 8.66685Z" fill="context-fill"/>
<path d="M2.39941 8.66685L1.71941 7.93364L0.600161 8.97168L1.99886 9.58312L2.39941 8.66685ZM2.39941 1.33315L1.99886 0.416876L0.600161 1.02832L1.71941 2.06636L2.39941 1.33315ZM3.00023 5C3.00023 6.15906 2.50854 7.20177 1.71941 7.93364L3.07942 9.40006C4.25952 8.30559 5.00023 6.73854 5.00023 5H3.00023ZM1.71941 2.06636C2.50854 2.79823 3.00023 3.84094 3.00023 5H5.00023C5.00023 3.26146 4.25952 1.69441 3.07942 0.599942L1.71941 2.06636ZM2.79997 2.24942C3.1662 2.08932 3.57142 2 4.00013 2V0C3.29053 0 2.61295 0.148425 1.99886 0.416876L2.79997 2.24942ZM4.00013 2C5.65699 2 7.00013 3.34315 7.00013 5H9.00013C9.00013 2.23858 6.76156 0 4.00013 0V2ZM7.00013 5C7.00013 6.65685 5.65699 8 4.00013 8V10C6.76156 10 9.00013 7.76142 9.00013 5H7.00013ZM4.00013 8C3.57142 8 3.1662 7.91068 2.79997 7.75058L1.99886 9.58312C2.61295 9.85157 3.29053 10 4.00013 10V8Z" fill="context-stroke" mask="url(#path-1-outside-1_4333_2740)"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

@ -0,0 +1,5 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="tag-crescent">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.39941 7.66685C3.38403 6.75368 4.00023 5.4488 4.00023 4C4.00023 2.5512 3.38403 1.24632 2.39941 0.33315C2.88957 0.118875 3.43097 0 4.00013 0C6.20927 0 8.00013 1.79086 8.00013 4C8.00013 6.20914 6.20927 8 4.00013 8C3.43097 8 2.88957 7.88113 2.39941 7.66685Z" fill="context-fill" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 468 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 376 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 579 B

View file

@ -36,14 +36,17 @@
}
$-icons: (
filter: 16,
chevron-6: 8
attachment,
chevron-6,
filter,
note,
);
@each $icon, $size in $-icons {
@each $icon in $-icons {
.icon-#{$icon} {
@include color-scheme using($color) {
@include svgicon($icon, $color, $size);
background: url('chrome://zotero/skin/#{$icon}.svg') content-box no-repeat;
-moz-context-properties: fill, fill-opacity;
}
}
}

View file

@ -1,53 +1,108 @@
@use "sass:map";
#zotero-items-tree {
.virtualized-table-header .icon {
width: 13px;
height: 13px;
.virtualized-table-body {
padding: 4px 8px;
}
.virtualized-table-header {
padding: 0 8px;
box-sizing: border-box;
}
.cell.primary {
.retracted {
width: 12px;
margin-inline-start: 3px;
.virtualized-table {
.row {
&.odd:not(.selected) {
background-color: -moz-oddtreerow;
}
&.even:not(.selected) {
background-color: -moz-eventreerow;
}
&.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;
}
}
.tag-swatch {
display: inline-block;
&.emoji + .emoji,
&.emoji + .colored {
margin-left: 4px;
}
&.colored {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
width: 0.83333333em;
height: 0.83333333em;
background:
url("chrome://zotero/skin/tag-circle.svg") no-repeat center/80%,
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/80%,
url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/0;
margin-left: -0.41666667em;
@include focus-states using($color) {
@if $color =="white" {
background: url("chrome://zotero/skin/tag-crescent-border.svg") no-repeat center/contain;
}
}
}
}
}
.tag-swatch {
display: inline-block;
min-width: .728em;
min-height: .728em;
margin-inline-start: 3px;
border-radius: .15em;
}
}
.cell.hasAttachment {
box-sizing: content-box;
padding: 0 4px;
height: 100%;
// Don't show ellipsis
text-overflow: unset;
.icon-treeitemattachmentpdf {
min-width: 10px;
max-width: 10px;
margin: 3px;
.cell.primary {
.retracted {
width: 12px;
margin-inline-start: 3px;
}
}
.icon-link {
min-width: 14px;
max-width: 14px;
margin: 2px 1px;
.cell.hasAttachment {
box-sizing: content-box;
// Don't show ellipsis
text-overflow: unset;
.icon-missing-file {
opacity: 0.4;
}
}
.icon-missing-file {
opacity: 0.4;
.cell.numNotes {
text-align: center;
}
}
.cell.numNotes {
text-align: center;
}
}
$-itemTypesIcons: (
@ -104,11 +159,28 @@ $-itemTypesMap: (
"attachment-file": "document"
);
$-attachmentIcons: (
attachment-epub,
attachment-epub-link,
attachment-link,
attachment-pdf-link,
attachment-pdf,
attachment-snapshot,
attachment-web-link,
);
.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.
@ -129,6 +201,13 @@ $-itemTypesMap: (
.icon-item-type[data-item-type=#{$itemType}] {
@include svgicon($itemTypeIcon, $color, "16", "item-type", true);
}
@if index($-attachmentIcons, $itemTypeIcon) != false {
.icon-attachment-type[data-item-type=#{$itemType}] {
@include svgicon($itemTypeIcon, $color, "12", "item-type", false);
background-origin: content-box;
}
}
}
}

View file

@ -73,6 +73,10 @@
flex: 0 1;
padding: 3px 4px;
white-space: nowrap;
.icon-css {
fill: var(--fill-secondary);
}
}
.tag-selector-item {

View file

@ -45,6 +45,7 @@
flex-grow: 1;
box-sizing: border-box;
&.first-column,
&.primary {
display: flex;
align-items: center;
@ -57,7 +58,10 @@
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
margin-inline-start: 5px;
&:not(:first-child) {
margin-inline-start: 5px;
}
}
.twisty + .cell-text, .spacer-twisty + .cell-text {
@ -126,7 +130,7 @@
@include state(".virtualized-table:not(:focus)") {
color: var(--fill-primary);
background-color: var(--fill-quarternary);
background-color: var(--color-quarternary-on-sidepane);
}
}
@ -161,11 +165,17 @@
&.icon-css {
width: 16px;
height: 16px;
padding: 4px;
box-sizing: border-box;
background: url("chrome://zotero/skin/chevron-8.svg") content-box no-repeat;
-moz-context-properties: fill, fill-opacity;
@include focus-states using ($color) {
@include svgicon("chevron-8", $color, "8");
background-size: 8px;
background-repeat: no-repeat;
@if $color == "white" {
fill: var(--accent-white);
} @else {
fill: var(--fill-secondary);
}
}
}
}
@ -181,39 +191,38 @@
}
}
.virtualized-table.multi-select:focus {
.row.focused {
border: 1px dotted highlight;
box-sizing: initial;
margin: -1px 0;
width: calc(100% - 2px);
z-index: 10000;
> *:first-child {
margin-inline-start: -1px;
}
> *:last-child {
margin-inline-end: -1px;
}
}
}
.virtualized-table-header {
display: flex;
flex-direction: row;
align-items: center;
width: calc(100% - 11px);
border-bottom: 1px solid #ccc;
background: #f6f6f6;
height: 1.8em;
background: var(--material-background);
height: 1.83333333em; // 22px @ 12px font size
overflow: hidden;
border-inline-end: 1px solid #ddd;
@include comfortable {
height: 2.33333333em; // 28px @ 12px font size
padding: 0 8px;
}
&.static-columns {
pointer-events: none;
}
&::after {
content: "";
display: block;
border-bottom: var(--material-border-quarternary);
height: 1px;
width: 100%;
position: absolute;
top: calc(1.83333333em - 1px);
@include comfortable {
top: calc(2.33333333em - 1px);
}
}
.column-picker {
text-align: center;
}
@ -226,15 +235,19 @@
padding: 0 5px;
&:hover {
background: #fff;
background: var(--material-mix-quinary);
}
&.dragging {
background: #e9e9e9;
background: var(--material-mix-quarternary);
}
&.first-column {
padding-inline-start: 36px;
}
.resizer {
background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%;
background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%; // 14px @ 12px font size
cursor: col-resize;
height: 100%;
content: "\00a0";
@ -242,6 +255,10 @@
position: absolute;
left: -5px;
min-width: 10px;
@include comfortable {
background-size: 1px 74.074074%; // 20px @ 12px font size
}
}
.label {
@ -259,13 +276,23 @@
margin-inline-start: 0;
}
.icon-css {
fill: var(--fill-secondary);
}
justify-content: center;
}
.sort-indicator {
-moz-appearance: toolbarbutton-dropdown;
display: block;
margin-right: 10px;
margin-right: 3px; // + 5px padding = 8px total
&.icon-css {
background: url("chrome://zotero/skin/chevron-8.svg") content-box no-repeat;
-moz-context-properties: fill, fill-opacity;
fill: var(--fill-primary);
}
&.ascending {
transform: rotate(180deg);
@ -296,7 +323,7 @@
*[dir=rtl] {
.virtualized-table-header {
.cell .sort-indicator {
left: 10px;
left: 3px; // + 5px padding = 8px total
right: initial;
}

View file

@ -20,16 +20,3 @@
min-width: 6px;
}
}
.virtualized-table-body, .drag-image-container{
.cell:not(:first-child) {
background-image: linear-gradient(#ddd, #ddd);
background-size: 1px 80%;
background-position: left;
&:dir(rtl) {
background-position: right;
}
background-repeat: no-repeat;
height: 100%;
}
}

View file

@ -1,50 +1,70 @@
@use 'sass:color';
@use "sass:map";
$-colors: (
accent-blue: #4072e5,
accent-blue10: #4072e54d,
accent-blue30: #4072e573,
accent-blue50: #4072e599,
accent-gold: #cc9200d9,
accent-green: #39bf68d9,
accent-orange: #ff794cd9,
accent-red: #db2c3ae5,
accent-teal: #59adc4e5,
accent-white: #fff,
accent-wood-dark: #996b6f,
accent-wood: #cc7a52e5,
accent-yellow: #faa700cc,
fill-primary: #ffffffe5,
fill-secondary: #ffffff8c,
fill-tertiary: #ffffff4d,
fill-quarternary: #ffffff1f,
fill-quinary: #ffffff0f,
fill-senary: #ffffff08,
color-background: #1e1e1e,
color-background50: #1e1e1e80,
color-background70: #1e1e1eb2,
color-border: #ffffff2e,
color-border50: #ffffff17,
color-button: #404040,
color-control: #ccc,
color-menu: #28282894,
color-panedivider: #404040,
color-sidepane: #303030,
color-tabbar: #1e1e1e,
color-toolbar: #272727,
color-scrollbar: rgb(117, 117, 117),
color-scrollbar-hover: rgb(158, 158, 158),
color-scrollbar-background: transparent,
tag-blue: #55a6dfd9,
tag-gray: #aaac,
tag-green: #74b04ad9,
tag-indigo: #5b6dd2,
tag-magenta: #d675e7d9,
tag-orange: #e59c4ccc,
tag-plum: #9b5579,
tag-purple: #9e8bdfe5,
tag-red: #ed706be5,
tag-teal: #439781,
tag-yellow: #f8d648bf,
);
@media (prefers-color-scheme: dark) {
:root {
--accent-blue: #4072e5;
--accent-blue10: #4072e54d;
--accent-blue30: #4072e573;
--accent-blue50: #4072e599;
--accent-gold: #cc9200d9;
--accent-green: #39bf68d9;
--accent-orange: #ff794cd9;
--accent-red: #db2c3ae5;
--accent-teal: #59adc4e5;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52e5;
--accent-yellow: #faa700cc;
--fill-primary: #ffffffe5;
--fill-secondary: #ffffff8c;
--fill-tertiary: #ffffff4d;
--fill-quarternary: #ffffff1f;
--fill-quinary: #ffffff0f;
--fill-senary: #ffffff08;
--color-background: #1e1e1e;
--color-background50: #1e1e1e80;
--color-background70: #1e1e1eb2;
--color-border: #ffffff2e;
--color-border50: #ffffff17;
--color-button: #404040;
--color-control: #ccc;
--color-menu: #28282894;
--color-panedivider: #404040;
--color-sidepane: #303030;
--color-tabbar: #1e1e1e;
--color-toolbar: #272727;
--color-scrollbar: rgb(117, 117, 117);
--color-scrollbar-hover: rgb(158, 158, 158);
--color-scrollbar-background: transparent;
--tag-blue: #55a6dfd9;
--tag-gray: #aaac;
--tag-green: #74b04ad9;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7d9;
--tag-orange: #e59c4ccc;
--tag-plum: #9b5579;
--tag-purple: #9e8bdfe5;
--tag-red: #ed706be5;
--tag-teal: #439781;
--tag-yellow: #f8d648bf;
@each $name, $color in $-colors {
--#{$name}: #{$color};
}
// composite (opaque) colors
--color-quinary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
)};
--color-quarternary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)};
--color-quarternary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)};
// background materials
--material-background: var(--color-background);
@ -56,7 +76,9 @@
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
--material-mix-quinary: var(--color-quinary-on-background);
--material-mix-quarternary: var(--color-quarternary-on-background);
// border materials
--material-border-transparent: 1px solid transparent;
--material-border: 1px solid var(--color-border);

View file

@ -1,50 +1,70 @@
@use 'sass:color';
@use "sass:map";
$-colors: (
accent-blue: #4072e5,
accent-blue10: #4072e51a,
accent-blue30: #4072e54d,
accent-blue50: #4072e580,
accent-gold: #cc9200,
accent-green: #39bf68,
accent-orange: #ff794c,
accent-red: #db2c3a,
accent-teal: #59adc4,
accent-white: #fff,
accent-wood-dark: #996b6f,
accent-wood: #cc7a52,
accent-yellow: #faa700,
fill-primary: #000000d9,
fill-secondary: #00000080,
fill-tertiary: #00000040,
fill-quarternary: #0000001a,
fill-quinary: #0000000d,
fill-senary: #00000005,
color-background: #fff,
color-background50: #ffffff80,
color-background70: #ffffffb2,
color-border: #00000026,
color-border50: #00000014,
color-button: #fff,
color-control: #fff,
color-menu: #f6f6f6b8,
color-panedivider: #dadada,
color-sidepane: #f2f2f2,
color-tabbar: #f2f2f2,
color-toolbar: #f9f9f9,
color-scrollbar: rgb(194, 194, 194),
color-scrollbar-hover: rgb(125, 125, 125),
color-scrollbar-background: transparent,
tag-blue: #55a6df,
tag-gray: #aaa,
tag-green: #74b04a,
tag-indigo: #5b6dd2,
tag-magenta: #d675e7,
tag-orange: #e59c4c,
tag-plum: #9b5579,
tag-purple: #9e8bdf,
tag-red: #ed706b,
tag-teal: #439781,
tag-yellow: #f8d648,
);
@media (prefers-color-scheme: light) {
:root {
--accent-blue: #4072e5;
--accent-blue10: #4072e51a;
--accent-blue30: #4072e54d;
--accent-blue50: #4072e580;
--accent-gold: #cc9200;
--accent-green: #39bf68;
--accent-orange: #ff794c;
--accent-red: #db2c3a;
--accent-teal: #59adc4;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52;
--accent-yellow: #faa700;
--fill-primary: #000000d9;
--fill-secondary: #00000080;
--fill-tertiary: #00000040;
--fill-quarternary: #0000001a;
--fill-quinary: #0000000d;
--fill-senary: #00000005;
--color-background: #fff;
--color-background50: #ffffff80;
--color-background70: #ffffffb2;
--color-border: #00000026;
--color-border50: #00000014;
--color-button: #fff;
--color-control: #fff;
--color-menu: #f6f6f6b8;
--color-panedivider: #dadada;
--color-sidepane: #f2f2f2;
--color-tabbar: #f2f2f2;
--color-toolbar: #f9f9f9;
--color-scrollbar: rgb(194, 194, 194);
--color-scrollbar-hover: rgb(125, 125, 125);
--color-scrollbar-background: transparent;
--tag-blue: #55a6df;
--tag-gray: #aaa;
--tag-green: #74b04a;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7;
--tag-orange: #e59c4c;
--tag-plum: #9b5579;
--tag-purple: #9e8bdf;
--tag-red: #ed706b;
--tag-teal: #439781;
--tag-yellow: #f8d648;
@each $name, $color in $-colors {
--#{$name}: #{$color};
}
// composite (opaque) colors
--color-quinary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quinary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quinary")))
)};
--color-quarternary-on-background: #{color.mix(
map.get($-colors, "color-background"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)};
--color-quarternary-on-sidepane: #{color.mix(
map.get($-colors, "color-sidepane"), color.change(map.get($-colors, "fill-quarternary"), $alpha: 1), 100% * (1 - color.alpha(map.get($-colors, "fill-quarternary")))
)};
// background materials
--material-background: var(--color-background);
@ -56,6 +76,8 @@
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
--material-mix-quinary: var(--color-quinary-on-background);
--material-mix-quarternary: var(--color-quarternary-on-background);
// border materials
--material-border-transparent: 1px solid transparent;