beb7b51cb3
Reasoning: - Different Linux DEs specify different titlebar button (min, max, close) locations which we did not and could not support before. - Previous approach copied from Firefox depended on custom offsets specified in CSS instead of allowing the browser engine to place elements Changes: - Titlebar and menubar no longer collapsed into each other with a negative margin, instead just a single flexbox (on macOS the titlebar is still collapsed into the tab bar) - Support for -moz-gtk-csd-reversed-placement to correctly place the titlebar buttons on Linux - Removed/changed some code copied from Firefox that does not apply or uses the wrong selectors - Fixed the display of Linux Unity DE buttons with icons appearing outside of button borders - Removed the Z in the titlebar on Linux since only a few DEs use that. - Aligned the tabbar on Linux and Windows to the left margin of the window.
124 lines
3.9 KiB
SCSS
124 lines
3.9 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;
|
|
}
|
|
|
|
|
|
/* ::::: 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));
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
|
|
.titlebar-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
|
|
:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
|
|
display: none;
|
|
}
|
|
|
|
#titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
-moz-window-dragging: drag;
|
|
menu {
|
|
font-size: var(--zotero-font-size);
|
|
}
|
|
}
|
|
|
|
:is(panel)::part(content) {
|
|
--panel-background: var(--material-toolbar);
|
|
}
|
|
|
|
#main-window {
|
|
min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav;
|
|
min-height: 300px;
|
|
}
|
|
|
|
#zotero-pane-stack > hbox {
|
|
// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
|
|
min-width: 0;
|
|
}
|