zotero/scss/components/_toolbar.scss
2024-01-24 23:32:15 -05:00

112 lines
2.2 KiB
SCSS

.toolbar {
height: 41px !important; /* Hard-code this to fix toolbar icon compression on Linux */
min-height: 41px; /* Needed to prevent squashing by stretched tag selector */
margin: 0;
padding: 0px 8px 0px 8px;
min-width: 1px;
}
:root:-moz-locale-dir(rtl) {
.zotero-tb-button > .toolbarbutton-icon {
transform: scaleX(-1);
}
}
.zotero-toolbar {
-moz-appearance: none;
@media (-moz-platform: macos) {
-moz-window-dragging: drag;
}
@media not (-moz-platform: macos) {
-moz-window-dragging: no-drag;
}
@include macOS-inactive-opacity;
}
#zotero-layout-switcher .zotero-toolbar {
background: var(--material-toolbar);
border-bottom: var(--material-panedivider);
}
#zotero-collections-toolbar,
#zotero-items-toolbar,
#zotero-item-pane-header,
#zotero-tabs-toolbar {
toolbarbutton {
width: 28px;
height: 28px;
padding: 0px 4px 0px 4px;
&[type="menu"] {
min-width: 0;
width: 40px;
}
&:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}
}
}
#zotero-items-toolbar,
#zotero-tabs-toolbar {
toolbarbutton {
margin: 0px 4px 0px 4px;
}
}
#zotero-items-toolbar:first-child {
margin-inline-start: -4px;
}
#zotero-collections-toolbar {
border-bottom: 1px solid transparent;
}
#zotero-collections-search {
max-width: 0;
transition: max-width 0.2s ease;
padding: 0;
padding-inline-end: 6px;
margin: 0;
appearance: none;
}
#zotero-collections-search.visible {
max-width: 180px;
}
#zotero-collections-search.expanding {
padding-inline-end: 35px;
}
/* Hide collection search on pane collapse, otherwise it still shows when focused */
#zotero-collections-pane[collapsed=true] #zotero-collections-search.visible {
visibility: hidden;
}
/* Hide the add button on pane collapse. Otherwise, it may show on top of 'New Item' */
#zotero-collections-pane[collapsed=true] #zotero-tb-collection-add {
visibility: hidden;
}
.zotero-tb-button {
-moz-user-focus: normal;
}
/* Label in toolbar for dev mode or troubleshooting mode */
.toolbar-mode-warning {
font-weight: 600;
cursor: pointer;
margin: 0 .8em 0 .2em;
color: red;
&.safe-mode {
color: darkblue;
@media (prefers-color-scheme: dark) {
color: lightblue;
}
}
}