78077fab9d
- Replace flex attribute with flex-shrink and flex-grow style to allow elements to be resized by splitter and window resizing. - Set the max-width on collections pane to prevent it from pushing other panes outside window border - Set the min-width on window according to the size of both library and reader tabs - Use stacked layout when window width is small fix: #4669
67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
:is(panel):not(#autoscroller)::part(content) {
|
|
--panel-background: var(--material-toolbar);
|
|
}
|
|
|
|
#main-window {
|
|
min-width: max(var(--width-of-fixed-components) + $min-width-items-pane, $min-width-tabs-deck);
|
|
min-height: 300px;
|
|
}
|
|
|
|
#main-window.stacked {
|
|
min-height: calc(var(--height-of-fixed-components) + $min-height-items-pane + $height-toolbar);
|
|
}
|
|
|
|
#zotero-pane {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
#zotero-pane-stack > hbox {
|
|
// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
|
|
min-width: 0;
|
|
}
|
|
#browser, #zotero-pane-stack, #zotero-trees {
|
|
min-height: 0;
|
|
}
|
|
|
|
#zotero-pane-overlay {
|
|
background: rgba(0,0,0,.3);
|
|
}
|
|
|
|
#zotero-pane-progress-box {
|
|
background: var(--color-sidepane);
|
|
border-radius: 5px;
|
|
border: var(--color-panedivider);
|
|
height: 30px;
|
|
width: 300px;
|
|
}
|
|
|
|
#zotero-pane-progressmeter-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
#zotero-layout-switcher {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
min-width: 0;
|
|
|
|
/*
|
|
Fx115: make panes occupy all available width/height after layout switch
|
|
or splitter expand/collapse.
|
|
The splitter element stores state in the style attribute's width/height
|
|
properties, and if we remove them, the splitter breaks. So we override
|
|
them here with !important.
|
|
*/
|
|
&[orient="horizontal"] :is(#zotero-items-pane-container, #zotero-item-pane) {
|
|
height: auto !important;
|
|
}
|
|
|
|
&[orient="vertical"],
|
|
&[orient="vertical"] :is(#zotero-items-pane-container, #zotero-item-pane) {
|
|
width: auto !important;
|
|
/* min-width: 0 is required here to allow the pane to shrink in Stacked view,
|
|
but the child #zotero-items-pane sets a larger min-width, and the splitter
|
|
follows that instead of this. */
|
|
min-width: 0 !important;
|
|
}
|
|
}
|