5f37ae4ab1
Fixed visuals and working drag-drop again. Fx115 made previously used toolbarbuttons act very strange wih drag-drop: instead of dragging the actual button, the #text node would receive dragstart event and a single letter would end up being dragged. During troubleshooting, elements created via document.createXULElement had this issues while being dragged (or acted oddly in other ways, e.g. refusing to be dragged at all). This includes a minor rewrite to use div-s instead of XUL components.
94 lines
1.8 KiB
SCSS
94 lines
1.8 KiB
SCSS
#zotero-tabs-menu-panel::part(content) {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#zotero-tabs-menu-wrapper {
|
|
width: 350px;
|
|
background: var(--material-sidepane);
|
|
padding: 7px;
|
|
border-radius: 5px;
|
|
--width-focus-border: 2px;
|
|
}
|
|
|
|
#zotero-tabs-menu-filter {
|
|
margin: 0 0 7px 0;
|
|
border-radius: 5px;
|
|
border: 1px solid transparent;
|
|
padding-inline-start: 5px !important;
|
|
padding: 2px;
|
|
|
|
@media not (-moz-platform: windows) {
|
|
@include focus-ring;
|
|
}
|
|
}
|
|
|
|
#zotero-tabs-menu-list {
|
|
appearance: none;
|
|
margin: 0;
|
|
|
|
.row {
|
|
display: flex;
|
|
padding-inline-start: 4px;
|
|
}
|
|
|
|
.zotero-tabs-menu-entry {
|
|
@include focus-ring;
|
|
border-radius: 6px;
|
|
height: 22px;
|
|
margin: 0;
|
|
&.close {
|
|
width: 22px;
|
|
// Center the icon within the larger box
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&[hidden] {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
&.title {
|
|
padding: 0;
|
|
padding-inline-start: 6px;
|
|
color: unset;
|
|
// Align label with the icon
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
&.selected {
|
|
font-weight: 600;
|
|
}
|
|
label {
|
|
overflow: hidden;
|
|
// override default description margins
|
|
margin-bottom: 0;
|
|
margin-block-start: 0;
|
|
// show as much of the description as possible
|
|
white-space: nowrap;
|
|
min-width: 280px;
|
|
text-overflow: ellipsis;
|
|
// Fx115: make label have the right width
|
|
max-width: 280px;
|
|
display: inline-block;
|
|
}
|
|
.tab-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-inline-end: 4px;
|
|
}
|
|
}
|
|
|
|
// Using .hover class instead of pseudo element to avoid the
|
|
// hover effect from sticking around after drag-and-drop
|
|
// https://bugs.webkit.org/show_bug.cgi?id=134555
|
|
&.hover {
|
|
background-color: var(--fill-quinary) !important;
|
|
}
|
|
&:active {
|
|
background-color: var(--fill-quarternary) !important;
|
|
}
|
|
}
|
|
#zotero-tabs-menu-dragged {
|
|
opacity: 0;
|
|
}
|
|
}
|