diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index d8c075e7ac..62b5291f94 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -184,52 +184,6 @@ text-shadow: rgba(0, 0, 0, 0.4) 0 1px; } -#zotero-collections-tree { - -moz-appearance: none; - border: none; - margin: 0; - padding: 0; - min-height: 5.2em; - background-color: #d2d8e2; -} - -#zotero-collections-tree:-moz-window-inactive { - background-color: rgb(232, 232, 232); -} - -#zotero-collections-tree treechildren::-moz-tree-row { - background-color: transparent; - border-color: transparent; -} - -#zotero-collections-tree treechildren::-moz-tree-cell(selected) { - background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x; - border-top: 1px solid #94A1C0; -} - -#zotero-collections-tree:-moz-window-inactive treechildren::-moz-tree-cell(selected) { - background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x; - border-top: 1px solid #979797; -} - -#zotero-collections-tree treechildren::-moz-tree-cell(selected, focus) { - background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x; - border-top: 1px solid #5382C5; -} - -#zotero-collections-tree treechildren::-moz-tree-cell-text(selected) { - font-weight: bold !important; - color: #ffffff !important; -} - -#zotero-collections-tree treechildren::-moz-tree-twisty(selected) { - list-style-image: url("chrome://zotero/skin/mac/twisty-selected.svg"); -} - -#zotero-collections-tree treechildren::-moz-tree-twisty(selected, open) { - list-style-image: url("chrome://zotero/skin/mac/twisty-selected-open.svg"); -} - #zotero-collections-splitter:not([state=collapsed]), #zotero-items-splitter:not([state=collapsed])[orient=horizontal], #zotero-context-splitter:not([state=collapsed])[orient=horizontal] diff --git a/chrome/content/zotero/collectionTree.jsx b/chrome/content/zotero/collectionTree.jsx index 016dcc3e83..841d98cd10 100644 --- a/chrome/content/zotero/collectionTree.jsx +++ b/chrome/content/zotero/collectionTree.jsx @@ -28,8 +28,7 @@ const ReactDOM = require('react-dom'); const LibraryTree = require('./libraryTree'); const VirtualizedTable = require('components/virtualized-table'); const { TreeSelectionStub } = VirtualizedTable; -const Icons = require('components/icons'); -const { getDOMElement: getDOMIcon } = Icons; +const { getCSSIcon } = require('components/icons'); const { getDragTargetOrient } = require('components/utils'); const { Cc, Ci, Cu } = require('chrome'); @@ -260,7 +259,7 @@ var CollectionTree = class CollectionTree extends LibraryTree { } } else { - twisty = getDOMIcon("IconTwisty"); + twisty = getCSSIcon("twisty"); twisty.classList.add('twisty'); if (this.isContainerOpen(index)) { twisty.classList.add('open'); @@ -2107,64 +2106,45 @@ var CollectionTree = class CollectionTree extends LibraryTree { _getIcon(index) { const treeRow = this.getRow(index); var collectionType = treeRow.type; - - if (collectionType == 'group') { - collectionType = 'Library'; + + if (collectionType == 'separator') { + return document.createElement('span'); } - let iconClsName; + + let icon = collectionType; switch (collectionType) { - case 'library': + case 'group': + icon = 'library-group'; + break; case 'feed': // Better alternative needed: https://github.com/zotero/zotero/pull/902#issuecomment-183185973 /* if (treeRow.ref.updating) { collectionType += 'Updating'; } else */if (treeRow.ref.lastCheckError) { - collectionType += 'Error'; + icon += '-error'; } break; case 'trash': if (this._trashNotEmpty[treeRow.ref.libraryID]) { - collectionType += 'Full'; + icon += '-full'; } break; case 'feeds': - collectionType = 'FeedLibrary'; + icon = 'feed-library'; break; case 'header': if (treeRow.ref.id == 'group-libraries-header') { - collectionType = 'Groups'; + icon = 'groups'; } - else if (treeRow.ref.id == 'commons-header') { - collectionType = 'Commons'; - } - break; - - case 'publications': - iconClsName = "IconTreeitemJournalArticle"; - break; - - case 'retracted': - iconClsName = "IconCross"; break; } - collectionType = Zotero.Utilities.capitalize(collectionType); - iconClsName = iconClsName || "IconTreesource" + collectionType; - - if (collectionType == 'Separator') { - return document.createElement('span'); - } - - var icon = getDOMIcon(iconClsName); - if (!icon) { - return document.createElement('span'); - } - return icon; + return getCSSIcon(icon); } /** diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx index 7086e0f4f2..62c8a4aeac 100644 --- a/chrome/content/zotero/components/virtualized-table.jsx +++ b/chrome/content/zotero/components/virtualized-table.jsx @@ -1270,18 +1270,21 @@ class VirtualizedTable extends React.Component { if (!this.props.disableFontSizeScaling) { rowHeight *= Zotero.Prefs.get('fontSize'); } + rowHeight += Zotero.Prefs.get('uiDensity') === 'comfortable' ? 10 : 4; + + // @TODO: Check row height across platforms and remove commented code below // padding // This is weird, but Firefox trees always had different amount of padding on // different OSes - if (Zotero.isMac) { - rowHeight *= 1.4; - } - else if (Zotero.isWin) { - rowHeight *= 1.2; - } - else { - rowHeight *= 1.1; - } + // if (Zotero.isMac) { + // rowHeight *= 1.4; + // } + // else if (Zotero.isWin) { + // rowHeight *= 1.2; + // } + // else { + // rowHeight *= 1.1; + // } rowHeight = Math.round(Math.max(MINIMUM_ROW_HEIGHT, rowHeight)); return rowHeight; } @@ -1289,6 +1292,7 @@ class VirtualizedTable extends React.Component { _getRenderedTextHeight() { let div = document.createElement('div'); div.style.visibility = "hidden"; + div.style.lineHeight = "1.3333333333333333"; div.textContent = "Zotero"; document.documentElement.appendChild(div); let height = window.getComputedStyle(div).height; diff --git a/chrome/content/zotero/itemTree.jsx b/chrome/content/zotero/itemTree.jsx index 0f4c120d32..e4a5ab9281 100644 --- a/chrome/content/zotero/itemTree.jsx +++ b/chrome/content/zotero/itemTree.jsx @@ -2683,7 +2683,7 @@ var ItemTree = class ItemTree extends LibraryTree { twisty.classList.add("spacer-twisty"); } else { - twisty = getDOMElement("IconTwisty"); + twisty = getCSSIcon("twisty"); twisty.classList.add('twisty'); if (this.isContainerOpen(index)) { twisty.classList.add('open'); diff --git a/chrome/skin/default/zotero/8/dark/chevron-8.svg b/chrome/skin/default/zotero/8/dark/chevron-8.svg new file mode 100644 index 0000000000..43cf14aee1 --- /dev/null +++ b/chrome/skin/default/zotero/8/dark/chevron-8.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/chrome/skin/default/zotero/8/light/chevron-8.svg b/chrome/skin/default/zotero/8/light/chevron-8.svg new file mode 100644 index 0000000000..200bda21b9 --- /dev/null +++ b/chrome/skin/default/zotero/8/light/chevron-8.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/8/white/chevron-8.svg b/chrome/skin/default/zotero/8/white/chevron-8.svg new file mode 100644 index 0000000000..d52e6be7d8 --- /dev/null +++ b/chrome/skin/default/zotero/8/white/chevron-8.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/collection.svg b/chrome/skin/default/zotero/collection-tree/16/dark/collection.svg new file mode 100644 index 0000000000..1a33f5582a --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/collection.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/duplicates.svg b/chrome/skin/default/zotero/collection-tree/16/dark/duplicates.svg new file mode 100644 index 0000000000..71ce94b15c --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/duplicates.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/feed-error.svg b/chrome/skin/default/zotero/collection-tree/16/dark/feed-error.svg new file mode 100644 index 0000000000..463ec4e0ba --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/feed-error.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/feed-library.svg b/chrome/skin/default/zotero/collection-tree/16/dark/feed-library.svg new file mode 100644 index 0000000000..68a817e8f3 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/feed-library.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/feed-updating.svg b/chrome/skin/default/zotero/collection-tree/16/dark/feed-updating.svg new file mode 100644 index 0000000000..9750640ff3 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/feed-updating.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/feed.svg b/chrome/skin/default/zotero/collection-tree/16/dark/feed.svg new file mode 100644 index 0000000000..a3fdff90a4 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/feed.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/groups.svg b/chrome/skin/default/zotero/collection-tree/16/dark/groups.svg new file mode 100644 index 0000000000..c46c154c61 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/groups.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/library-group.svg b/chrome/skin/default/zotero/collection-tree/16/dark/library-group.svg new file mode 100644 index 0000000000..a042f55bd9 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/library-group.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/library.svg b/chrome/skin/default/zotero/collection-tree/16/dark/library.svg new file mode 100644 index 0000000000..06a07d8eaf --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/library.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/publications.svg b/chrome/skin/default/zotero/collection-tree/16/dark/publications.svg new file mode 100644 index 0000000000..e46431d73c --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/publications.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/retracted.svg b/chrome/skin/default/zotero/collection-tree/16/dark/retracted.svg new file mode 100644 index 0000000000..2eaed452e9 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/retracted.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/search.svg b/chrome/skin/default/zotero/collection-tree/16/dark/search.svg new file mode 100644 index 0000000000..0aefe653ff --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/trash-full.svg b/chrome/skin/default/zotero/collection-tree/16/dark/trash-full.svg new file mode 100644 index 0000000000..3828590db2 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/trash-full.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/trash.svg b/chrome/skin/default/zotero/collection-tree/16/dark/trash.svg new file mode 100644 index 0000000000..3e4c1ffacb --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/dark/unfiled.svg b/chrome/skin/default/zotero/collection-tree/16/dark/unfiled.svg new file mode 100644 index 0000000000..db2d96fd1e --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/dark/unfiled.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/collection.svg b/chrome/skin/default/zotero/collection-tree/16/light/collection.svg new file mode 100644 index 0000000000..b1cc37de4c --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/collection.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/duplicates.svg b/chrome/skin/default/zotero/collection-tree/16/light/duplicates.svg new file mode 100644 index 0000000000..230841fc9d --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/duplicates.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/feed-error.svg b/chrome/skin/default/zotero/collection-tree/16/light/feed-error.svg new file mode 100644 index 0000000000..968e2140ac --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/feed-error.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/feed-library.svg b/chrome/skin/default/zotero/collection-tree/16/light/feed-library.svg new file mode 100644 index 0000000000..3482387558 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/feed-library.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/feed-updating.svg b/chrome/skin/default/zotero/collection-tree/16/light/feed-updating.svg new file mode 100644 index 0000000000..eded8835c7 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/feed-updating.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/feed.svg b/chrome/skin/default/zotero/collection-tree/16/light/feed.svg new file mode 100644 index 0000000000..de8f70be04 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/feed.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/groups.svg b/chrome/skin/default/zotero/collection-tree/16/light/groups.svg new file mode 100644 index 0000000000..064858a450 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/groups.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/library-group.svg b/chrome/skin/default/zotero/collection-tree/16/light/library-group.svg new file mode 100644 index 0000000000..8bd818276a --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/library-group.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/library.svg b/chrome/skin/default/zotero/collection-tree/16/light/library.svg new file mode 100644 index 0000000000..78d16f14ee --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/library.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/publications.svg b/chrome/skin/default/zotero/collection-tree/16/light/publications.svg new file mode 100644 index 0000000000..111789d116 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/publications.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/retracted.svg b/chrome/skin/default/zotero/collection-tree/16/light/retracted.svg new file mode 100644 index 0000000000..a93f009872 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/retracted.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/search.svg b/chrome/skin/default/zotero/collection-tree/16/light/search.svg new file mode 100644 index 0000000000..07e25bd079 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/trash-full.svg b/chrome/skin/default/zotero/collection-tree/16/light/trash-full.svg new file mode 100644 index 0000000000..02506ecb5e --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/trash-full.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/trash.svg b/chrome/skin/default/zotero/collection-tree/16/light/trash.svg new file mode 100644 index 0000000000..7dd5da4a97 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/light/unfiled.svg b/chrome/skin/default/zotero/collection-tree/16/light/unfiled.svg new file mode 100644 index 0000000000..61d8a5b7bc --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/light/unfiled.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/collection.svg b/chrome/skin/default/zotero/collection-tree/16/white/collection.svg new file mode 100644 index 0000000000..eb57743597 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/collection.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/duplicates.svg b/chrome/skin/default/zotero/collection-tree/16/white/duplicates.svg new file mode 100644 index 0000000000..f702f7cd8b --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/duplicates.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/feed-error.svg b/chrome/skin/default/zotero/collection-tree/16/white/feed-error.svg new file mode 100644 index 0000000000..6942adfc8e --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/feed-error.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/feed-library.svg b/chrome/skin/default/zotero/collection-tree/16/white/feed-library.svg new file mode 100644 index 0000000000..b564fc4dcd --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/feed-library.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/feed-updating.svg b/chrome/skin/default/zotero/collection-tree/16/white/feed-updating.svg new file mode 100644 index 0000000000..0398faafda --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/feed-updating.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/feed.svg b/chrome/skin/default/zotero/collection-tree/16/white/feed.svg new file mode 100644 index 0000000000..845ad4b4ea --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/feed.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/groups.svg b/chrome/skin/default/zotero/collection-tree/16/white/groups.svg new file mode 100644 index 0000000000..7edeaa7d3e --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/groups.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/library-group.svg b/chrome/skin/default/zotero/collection-tree/16/white/library-group.svg new file mode 100644 index 0000000000..0bad06f130 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/library-group.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/library.svg b/chrome/skin/default/zotero/collection-tree/16/white/library.svg new file mode 100644 index 0000000000..0bad06f130 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/library.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/publications.svg b/chrome/skin/default/zotero/collection-tree/16/white/publications.svg new file mode 100644 index 0000000000..dd0ee47164 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/publications.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/retracted.svg b/chrome/skin/default/zotero/collection-tree/16/white/retracted.svg new file mode 100644 index 0000000000..bc1081ea66 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/retracted.svg @@ -0,0 +1,3 @@ + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/search.svg b/chrome/skin/default/zotero/collection-tree/16/white/search.svg new file mode 100644 index 0000000000..98fba38a37 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/trash-full.svg b/chrome/skin/default/zotero/collection-tree/16/white/trash-full.svg new file mode 100644 index 0000000000..646a85c1ef --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/trash-full.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/trash.svg b/chrome/skin/default/zotero/collection-tree/16/white/trash.svg new file mode 100644 index 0000000000..7bdab421f5 --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/trash.svg @@ -0,0 +1,4 @@ + + + + diff --git a/chrome/skin/default/zotero/collection-tree/16/white/unfiled.svg b/chrome/skin/default/zotero/collection-tree/16/white/unfiled.svg new file mode 100644 index 0000000000..aa6840708c --- /dev/null +++ b/chrome/skin/default/zotero/collection-tree/16/white/unfiled.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/scss/_zotero.scss b/scss/_zotero.scss index d33869624d..1902dd497c 100644 --- a/scss/_zotero.scss +++ b/scss/_zotero.scss @@ -9,13 +9,14 @@ @import "abstracts/split-button"; @import "abstracts/svgicon"; -:root { - color-scheme: light dark; -} - @import "themes/light"; @import "themes/dark"; +// Base +// -------------------------------------------------- + +@import "base/base"; + // Components // -------------------------------------------------- diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss index 2c8c81fd94..177804ff41 100644 --- a/scss/abstracts/_mixins.scss +++ b/scss/abstracts/_mixins.scss @@ -31,3 +31,31 @@ } } } + +// @NOTE: this mixin uses `state` mixin, therefore must be used in a selector nested +// underneath selectors listed in arguments, e.g., .virtualized-table .row +// by default. See `state` mixin for more details. +@mixin focus-states( + $selectedState: '.row.selected', + $focused: '.virtualized-table:focus-within' + ) { + @media (prefers-color-scheme: light) { + @content("light"); + + @include state($selectedState) { + @include state($focused) { + @content("white"); + } + } + } + + @media (prefers-color-scheme: dark) { + @content("dark"); + + @include state($selectedState) { + @include state($focused) { + @content("white"); + } + } + } +} diff --git a/scss/base/_base.scss b/scss/base/_base.scss new file mode 100644 index 0000000000..701093f452 --- /dev/null +++ b/scss/base/_base.scss @@ -0,0 +1,21 @@ +:root { + color-scheme: light dark; +} + +:root { + font-family: system-ui, -apple-system, sans-serif; + font-size: 12px; + font-style: normal; +} + +#zotero-collections-pane { + background: var(--material-sidepane); +} + +#zotero-items-pane { + min-width: 290px; + min-height: 150px; + height: 150px; + width: 290px; + background: var(--material-background); +} \ No newline at end of file diff --git a/scss/components/_collection-tree.scss b/scss/components/_collection-tree.scss index 0c1a0f5efe..de2473d695 100644 --- a/scss/components/_collection-tree.scss +++ b/scss/components/_collection-tree.scss @@ -1,3 +1,8 @@ +$icons: ( + collection, duplicates, feed, feed-error, feed-library, feed-updating, groups, library, + library-group, publications, trash-full, trash, unfiled, retracted, search, +); + #zotero-collections-tree-container { height: 5.2em; } @@ -9,6 +14,25 @@ overflow-y: auto; flex: 1 0; text-overflow: ellipsis; + + .row { + .icon-css:not(.twisty) { + width: 16px; + height: 16px; + } + + @each $icon in $icons { + .icon-css.#{$icon} { + @include focus-states using ($color) { + @include svgicon($icon, $color, "16", "collection-tree"); + } + } + } + } + } + + .virtualized-table-body { + padding: 0 8px; } .cell.primary { diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss index 7b7b165efd..f3af76c51e 100644 --- a/scss/components/_item-tree.scss +++ b/scss/components/_item-tree.scss @@ -1,12 +1,5 @@ @use "sass:map"; -#zotero-items-pane { - min-width: 290px; - min-height: 150px; - height: 150px; - width: 290px; -} - #zotero-items-tree { .virtualized-table-header .icon { width: 13px; @@ -109,55 +102,28 @@ "attachment-file": "document" ); - .icon-item-type { - width: 16px; - height: 16px; - } - .row { - @mixin item-type-icon($icon) { - &:not(:-moz-window-inactive) { - @include state('.row.selected') { - @include svgicon($icon, "white", "16", "item-type", true); - } - } - - @include state('.row:not(.selected)') { - @media (prefers-color-scheme: light) { - @include svgicon($icon, "light", "16", "item-type", true); - } - - @media (prefers-color-scheme: dark) { - @include svgicon($icon, "dark", "16", "item-type", true); - } - } - - @include state('.row.selected') { - &:-moz-window-inactive { - @media (prefers-color-scheme: light) { - @include svgicon($icon, "light", "16", "item-type", true); - } - - @media (prefers-color-scheme: dark) { - @include svgicon($icon, "dark", "16", "item-type", true); - } - } - } + .virtualized-table .row { + .icon-item-type { + width: 16px; + height: 16px; } - @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); - } - + @include focus-states using ($color) { .icon-item-type { - @include item-type-icon("document"); // default icon, for known item types more specific selectors below will apply + // default icon, for known item types more specific selectors below will apply + @include svgicon("document", $color, "16", "item-type", true); } - - .icon-item-type[data-item-type=#{$itemType}] { - @include item-type-icon($itemTypeIcon); + @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); + } } } } diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss index bb1a45e2b8..f41d1fbfd7 100644 --- a/scss/components/_virtualized-table.scss +++ b/scss/components/_virtualized-table.scss @@ -15,7 +15,6 @@ > div { display: flex; flex: 1; - background-color: -moz-field; overflow: hidden; position: relative; } @@ -94,6 +93,7 @@ align-items: center; width: 100%; box-sizing: border-box; + border-radius: 5px; &.drop { color: var(--material-background) !important; @@ -123,6 +123,11 @@ &.selected:not(.highlighted) { background-color: SelectedItem; color: SelectedItemText; + + @include state(".virtualized-table:not(:focus)") { + color: var(--fill-primary); + background-color: var(--fill-quarternary); + } } &.highlighted { @@ -136,6 +141,34 @@ &.context-row { color: gray; } + + .spacer-twisty { + display: inline-block; + min-width: 16px; + } + + .twisty { + margin-inline-end: 0 !important; + display: flex; + align-items: center; + transition: transform 0.125s ease; + transform: rotate(-90deg); + + &.open { + transform: rotate(0deg) !important; + } + + &.icon-css { + width: 16px; + height: 16px; + + @include focus-states using ($color) { + @include svgicon("chevron-8", $color, "8"); + background-size: 8px; + background-repeat: no-repeat; + } + } + } } .column-drag-marker { @@ -260,27 +293,6 @@ } } -.spacer-twisty { - display: inline-block; - min-width: 13px; -} - -.twisty { - margin-inline-end: 0 !important; - display: flex; - align-items: center; - - svg { - fill: #444; - transition: transform 0.125s ease; - transform: rotate(-90deg); - } - - &.open svg { - transform: rotate(0deg) !important; - } -} - *[dir=rtl] { .virtualized-table-header { .cell .sort-indicator { @@ -294,7 +306,7 @@ } } - .twisty svg { + .row .twisty { transform: rotate(90deg); } } diff --git a/scss/linux/_collection-tree.scss b/scss/linux/_collection-tree.scss deleted file mode 100644 index 30731a5da4..0000000000 --- a/scss/linux/_collection-tree.scss +++ /dev/null @@ -1,8 +0,0 @@ -#zotero-collections-tree-container { - margin-bottom: -1px; -} - -#zotero-collections-tree .virtualized-table .row { - height: 1.333em; -} - diff --git a/scss/mac/_collection-tree.scss b/scss/mac/_collection-tree.scss deleted file mode 100644 index b8d507f01b..0000000000 --- a/scss/mac/_collection-tree.scss +++ /dev/null @@ -1,54 +0,0 @@ -#zotero-collections-tree { - .virtualized-table { - background-color: #d2d8e2; - - .row { - height: 1.818em; - - &.selected:not(.highlighted) { - background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x; - border-top: 1px solid #5382C5; - font-weight: bold !important; - color: #ffffff !important; - height: calc(1.818em - 1px); - padding-bottom: 1px; - } - } - - &:not(:focus) .row.selected:not(.highlighted) { - background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x; - border-top: 1px solid #94A1C0; - } - - &:-moz-window-inactive { - background-color: rgb(232, 232, 232); - - .row.selected:not(.highlighted) { - background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x; - border-top: 1px solid #979797; - } - } - } -} - -// IDK why, but these heights are all over the place on macOS (not a f(x)=x) -*[zoteroFontSize=medium] #zotero-collections-tree .virtualized-table .row { - height: 1.739em; - &.focused:not(.highlighted) { - height: calc(1.738em - 1px); - } -} - -*[zoteroFontSize=large] #zotero-collections-tree .virtualized-table .row { - height: 1.68em; - &.focused:not(.highlighted) { - height: calc(1.68em - 1px); - } -} - -*[zoteroFontSize=x-large] #zotero-collections-tree .virtualized-table .row { - height: 1.697em; - &.focused:not(.highlighted) { - height: calc(1.697em - 1px); - } -} diff --git a/scss/mac/_item-tree.scss b/scss/mac/_item-tree.scss deleted file mode 100644 index 74e500a2cf..0000000000 --- a/scss/mac/_item-tree.scss +++ /dev/null @@ -1,12 +0,0 @@ -#zotero-items-tree { - // Selected rows when the tree is not the focused element - .virtualized-table:not(:focus) { - .row.selected { - background: #dcdcdc; - color: initial; - .twisty svg { - fill: #888; - } - } - } -} \ No newline at end of file diff --git a/scss/zotero-mac.scss b/scss/zotero-mac.scss index 46b57f41fc..49b108e7b8 100644 --- a/scss/zotero-mac.scss +++ b/scss/zotero-mac.scss @@ -12,8 +12,6 @@ @import "mac/tabBar"; @import "mac/tag-selector"; @import "mac/virtualized-table"; -@import "mac/collection-tree"; -@import "mac/item-tree"; // Elements diff --git a/scss/zotero-unix.scss b/scss/zotero-unix.scss index 730d792bcb..d373892337 100644 --- a/scss/zotero-unix.scss +++ b/scss/zotero-unix.scss @@ -5,7 +5,6 @@ // -------------------------------------------------- @import "linux/about"; -@import "linux/collection-tree"; @import "linux/createParent"; @import "linux/editable"; @import "linux/errorReport";