141 lines
2.9 KiB
SCSS
141 lines
2.9 KiB
SCSS
@use "sass:map";
|
|
|
|
item-pane-sidenav {
|
|
&:not([hidden]) {
|
|
display: flex;
|
|
}
|
|
flex-direction: column;
|
|
border-inline-start: var(--material-panedivider);
|
|
padding: 6px 4px 0;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--material-sidepane);
|
|
position: relative; // Stop item pane content from overlapping
|
|
|
|
&.stacked {
|
|
flex-direction: row;
|
|
border-inline-start: none;
|
|
border-top: var(--material-panedivider);
|
|
padding-inline-start: 6px;
|
|
padding-inline-end: 0;
|
|
padding-block: 4px;
|
|
}
|
|
|
|
.inherit-flex {
|
|
display: flex;
|
|
flex-direction: inherit;
|
|
flex-wrap: inherit;
|
|
align-items: inherit;
|
|
justify-content: inherit;
|
|
gap: inherit;
|
|
}
|
|
|
|
.highlight {
|
|
border-radius: 5px;
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
|
|
.pin-wrapper {
|
|
position: relative;
|
|
// Disable pointer events here, re-enable on the button, so that :hover styles are only applied
|
|
// when the button itself is hovered
|
|
pointer-events: none;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px;
|
|
inset-inline-end: 1px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.pinnable {
|
|
&.pinned::after {
|
|
background-color: var(--accent-blue);
|
|
background-image: icon-url("8/universal/pin.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
toolbarbutton {
|
|
// TODO: Extract button styles?
|
|
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: 0;
|
|
padding: 4px;
|
|
flex-shrink: 0;
|
|
border-radius: 5px;
|
|
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
|
|
|
|
pointer-events: all;
|
|
|
|
&:hover {
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--fill-quarternary);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: transparent;
|
|
fill: var(--fill-tertiary);
|
|
}
|
|
|
|
@each $pane, $color in $item-pane-sections {
|
|
&[data-pane="#{$pane}"] {
|
|
list-style-image: url("chrome://zotero/skin/itempane/20/#{$pane}.svg");
|
|
fill: $color;
|
|
stroke: $color;
|
|
}
|
|
}
|
|
|
|
// Special case for Notes context pane button:
|
|
&[data-pane="context-notes"] {
|
|
list-style-image: url("chrome://zotero/skin/itempane/20/notes.svg");
|
|
fill: map.get($item-pane-sections, "notes");
|
|
stroke: map.get($item-pane-sections, "notes");
|
|
}
|
|
|
|
// Special case for Expand/Collapse button:
|
|
&[data-pane="toggle-collapse"] {
|
|
list-style-image: url("chrome://zotero/skin/itempane/20/collapse.svg");
|
|
|
|
&.collapsed {
|
|
list-style-image: url("chrome://zotero/skin/itempane/20/expand.svg");
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
fill: var(--fill-secondary);
|
|
stroke: var(--fill-secondary);
|
|
}
|
|
}
|
|
|
|
&.stacked toolbarbutton[data-pane="toggle-collapse"] {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&:not(.stacked) > .divider {
|
|
width: 20px;
|
|
height: 0;
|
|
border-bottom: 1px solid var(--fill-quinary);
|
|
}
|
|
|
|
&.stacked > .divider {
|
|
width: 0;
|
|
height: 20px;
|
|
border-inline-end: 1px solid var(--fill-quinary);
|
|
}
|
|
|
|
menupopup {
|
|
@include macOS-hide-menu-icons;
|
|
}
|
|
}
|