diff --git a/addon/chrome/content/treeView.html b/addon/chrome/content/treeView.html
index 51b5e50..458dd7a 100644
--- a/addon/chrome/content/treeView.html
+++ b/addon/chrome/content/treeView.html
@@ -24,6 +24,10 @@
animation: append-animate 0.3s ease-in-out;
}
+ body {
+ overflow: hidden;
+ }
+
@keyframes append-animate {
from {
opacity: 0;
@@ -43,7 +47,7 @@
}
#treeview {
- padding: 8px;
+ padding: 8px 0 0 16px;
}
.drive-header {
@@ -77,10 +81,43 @@
cursor: auto;
}
+ .dx-scrollable-container {
+ padding-right: 8px;
+ }
+
.dx-treeview-toggle-item-visibility {
color: var(--fill-primary);
}
+ .dx-treeview-toggle-item-visibility::before {
+ content: "";
+ position: absolute;
+ display: block;
+ top: 50%;
+ margin-top: -8px;
+ left: 50%;
+ margin-left: -8px;
+ width: 16px;
+ height: 16px;
+ padding: 4px;
+ box-sizing: border-box;
+ background: url("chrome://zotero/skin/8/universal/chevron-8.svg")
+ content-box no-repeat;
+ -moz-context-properties: fill, fill-opacity;
+ fill: var(--fill-secondary);
+ transition: transform 0.125s ease;
+ transform: rotate(-90deg);
+ }
+
+ .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened::before {
+ content: "";
+ margin-top: -8px;
+ margin-left: -8px;
+ width: 16px;
+ height: 16px;
+ transform: rotate(0deg);
+ }
+
:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
color: var(--fill-primary);
background-color: transparent;