87297f8d29
A number of style changes to fix layout for fx115. - Make panes occupy all width/height based on layout. - Display the tag splitter on windows and mac. - Fix to odd fx115 behavior that gives an un-collapsed pane the initial width of min-width * 2. - Ensure that whenever there is a width attribute on contextPane, it will be present in the style as well. - Set width = 0 on zotero pane when it is not selected because it kept preventing the contextPane from properly expanding. - Context pane has its height changed on splitter drag. - Set height of the context pane in stacked mode to 0 to avoid having a blank gap after collapse. - Remove negative margin before the toolbar if the collection tree is collapsed on mac. - Tweaks splitter styles to have mouse target of more than 1px. Added positive z-index to make sure splitters are not covered by panes. Splitter styles are somewhat unified for all platforms. - Fix lookup panel sizing - Quicksearch margin edits to not squize the input field. - Collection and quick search fields layout fixed - Use flex properties to fix layout - fix outline display for editable-text - fix the contextpane width going out of bounds - stacked itemPane is visible after layout change - In stacked view, prevent itemPane from being dragged so high that it covers itemTree and overlaps with toolbar
76 lines
1.8 KiB
SCSS
76 lines
1.8 KiB
SCSS
.search {
|
|
position: relative;
|
|
min-width: 40px;
|
|
height: 36px;
|
|
|
|
input {
|
|
background-color: var(--material-background);
|
|
border-radius: 5px;
|
|
// Overwrite input style on Windows
|
|
border: var(--material-border-quinary) !important;
|
|
color: var(--fill-primary);
|
|
flex: 1 0;
|
|
margin: 6px 0px;
|
|
min-width: 40px;
|
|
padding: 3px 7px;
|
|
|
|
&::placeholder {
|
|
color: var(--fill-tertiary);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
@media not (-moz-platform: windows) {
|
|
@include focus-ring;
|
|
}
|
|
}
|
|
|
|
.search-cancel-button {
|
|
position: absolute;
|
|
inset-inline-end: 0;
|
|
width: 14px;
|
|
height: 14px;
|
|
padding-inline: 5px 8px;
|
|
padding-block: 5px;
|
|
margin-inline: 0 4px;
|
|
margin-block: 6px;
|
|
cursor: default;
|
|
background: url(resource://gre-resources/searchfield-cancel.svg) no-repeat center/contain;
|
|
background-size: unset;
|
|
}
|
|
}
|
|
|
|
search-textbox {
|
|
appearance: none;
|
|
background: var(--material-background);
|
|
border-radius: 5px;
|
|
border: var(--material-border-quinary);
|
|
color: var(--fill-primary);
|
|
padding: 0;
|
|
padding-inline-end: 6px;
|
|
|
|
&::placeholder {
|
|
color: var(--fill-tertiary);
|
|
opacity: 1.0;
|
|
}
|
|
|
|
@media not (-moz-platform: windows) {
|
|
@include focus-ring(false, focus);
|
|
}
|
|
}
|
|
|
|
:is(search-textbox)::part(search-sign),
|
|
:is(search-textbox)::part(search-icon) {
|
|
@include svgicon-menu("magnifier", "universal", "16");
|
|
color: var(--fill-secondary);
|
|
// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding
|
|
// Use explicit left/right padding here because this element is flipped in RTL (see below)
|
|
padding: 6px 4px 6px 6px;
|
|
margin: 0px;
|
|
width: auto; // override fx115 default width
|
|
display: block; // override fx115 display:none on macOS
|
|
}
|
|
|
|
:is(search-textbox):-moz-locale-dir(rtl)::part(search-sign),
|
|
:is(search-textbox):-moz-locale-dir(rtl)::part(search-icon) {
|
|
transform: scaleX(-1);
|
|
}
|