743597bc47
Now it's no worse than it was pre-redesign. But there's still room for improvement, either by preventing the window from shrinking to the point that the sidebars overflow or by making the sidebars horizontally scrollable at very small window sizes.
147 lines
4.2 KiB
SCSS
147 lines
4.2 KiB
SCSS
// Styling for displaying tabs in the title bar
|
|
:root:not([legacytoolbar="true"]) {
|
|
& {
|
|
--tab-min-height: 36px;
|
|
--tabs-border-color: rgba(0,0,0,.3);
|
|
--tabline-color: #0a84ff;
|
|
|
|
--toolbar-non-lwt-bgcolor: #f9f9fa;
|
|
--toolbar-non-lwt-textcolor: #0c0c0d;
|
|
--toolbar-non-lwt-bgimage: none;
|
|
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
|
|
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
|
|
--chrome-content-separator-color: hsl(0, 0%, 60%);
|
|
|
|
--toolbarbutton-border-radius: 3px;
|
|
--toolbarbutton-icon-fill-opacity: .85;
|
|
--toolbarbutton-hover-background: hsla(0, 0%, 100%, .1)
|
|
linear-gradient(hsla(0, 0%, 100%, .3),
|
|
hsla(0, 0%, 100%, .1)) no-repeat;
|
|
--toolbarbutton-hover-bordercolor: hsla(0, 0%, 0%, .2);
|
|
--toolbarbutton-header-bordercolor: hsla(0, 0%, 0%, .2);
|
|
--toolbarbutton-hover-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
|
|
0 1px 0 hsla(0, 0%, 100%, .5) inset;
|
|
|
|
--toolbarbutton-active-background: hsla(0, 0%, 0%, .02)
|
|
linear-gradient(hsla(0, 0%, 0%, .12),
|
|
transparent) border-box;
|
|
--toolbarbutton-active-bordercolor: hsla(0, 0%, 0%, .3);
|
|
--toolbarbutton-active-boxshadow: 0 1px 0 hsla(0, 0%, 100%, .5),
|
|
0 1px 0 hsla(0, 0%, 0%, .05) inset,
|
|
0 1px 1px hsla(0, 0%, 0%, .2) inset;
|
|
--toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
|
|
--toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
|
|
--toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
|
|
--toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
|
|
|
|
--lwt-header-image: none;
|
|
--row-grouped-header-bg-color: #d5d5d5;
|
|
--row-grouped-header-bg-color-selected: #3874d1;
|
|
--panel-separator-color: hsla(210, 4%, 10%, .14);
|
|
--arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
|
|
--arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
|
|
--splitter-color: #bdbdbd;
|
|
--urlbar-popup-url-color: hsl(210, 77%, 47%);
|
|
--urlbar-popup-action-color: hsl(178, 100%, 28%);
|
|
|
|
--autocomplete-popup-background: -moz-field;
|
|
--autocomplete-popup-color: -moz-fieldtext;
|
|
--autocomplete-popup-border-color: ThreeDShadow;
|
|
--autocomplete-popup-highlight-background: Highlight;
|
|
--autocomplete-popup-highlight-color: HighlightText;
|
|
/* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
|
|
--space-above-tabbar: 0px;
|
|
}
|
|
|
|
&:-moz-window-inactive {
|
|
--toolbar-bgcolor: -moz-mac-chrome-inactive;
|
|
}
|
|
|
|
|
|
|
|
|
|
#titlebar {
|
|
margin-bottom: calc(0px - var(--tab-min-height));
|
|
-moz-box-pack: center;
|
|
}
|
|
|
|
.titlebar-buttonbox-container {
|
|
-moz-box-ordinal-group: 1000;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ::::: Tabs in Titlebar :::::: */
|
|
|
|
&:not([chromemargin]) > #titlebar {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* For tabs in titlebar on OS X, we stretch the titlebar down so that the
|
|
* tabstrip can overlap it.
|
|
*/
|
|
&[tabsintitlebar] > #titlebar {
|
|
min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
|
}
|
|
|
|
&[tabsintitlebar="true"]:not(:-moz-lwtheme) > #titlebar {
|
|
-moz-appearance: -moz-window-titlebar;
|
|
}
|
|
|
|
&:not([tabsintitlebar]) .titlebar-placeholder {
|
|
visibility: collapse;
|
|
}
|
|
|
|
@media (-moz-platform: macos) {
|
|
/* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
|
|
* doesn't reverse the order of the items in the titlebar in RTL mode. */
|
|
.titlebar-placeholder[type="caption-buttons"],
|
|
.titlebar-buttonbox {
|
|
margin-right: 12px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.titlebar-buttonbox {
|
|
-moz-appearance: -moz-window-button-box;
|
|
}
|
|
|
|
/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
|
|
.titlebar-buttonbox-container:-moz-locale-dir(rtl) {
|
|
-moz-box-ordinal-group: 1000;
|
|
}
|
|
|
|
.titlebar-buttonbox-container:-moz-locale-dir(ltr) {
|
|
-moz-box-ordinal-group: 0;
|
|
}
|
|
|
|
.titlebar-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
|
|
:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
|
|
display: none;
|
|
}
|
|
|
|
#navigator-toolbox {
|
|
menu {
|
|
font-size: var(--zotero-font-size);
|
|
}
|
|
}
|
|
|
|
:is(panel)::part(content) {
|
|
--panel-background: var(--material-toolbar);
|
|
}
|
|
|
|
#zotero-pane-stack > hbox {
|
|
// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
|
|
min-width: 0;
|
|
}
|