mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix quick search styling (#4501)

Browse source 
fix: #4497
fix: #4498
This commit is contained in:
windingwind 2024-08-05 17:01:59 +08:00 • committed by GitHub
parent c5027106c2
commit 129938c8fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
chrome/content/zotero/elements/quickSearchTextbox.js
View file

@ -88,6 +88,8 @@
let searchBox = document.createXULElement("search-textbox"); let searchBox = document.createXULElement("search-textbox");
searchBox.id = "zotero-tb-search-textbox"; searchBox.id = "zotero-tb-search-textbox";
// Enable applying styles to the input field
searchBox.inputField.setAttribute("part", "search-input");
this.searchTextbox = searchBox; this.searchTextbox = searchBox;
wrapper.appendChild(dropmarkerHost); wrapper.appendChild(dropmarkerHost);
@ -110,6 +112,7 @@
let popup = document.createXULElement('menupopup'); let popup = document.createXULElement('menupopup');
popup.id = "search-mode-popup"; popup.id = "search-mode-popup";
popup.toggleAttribute("needsgutter", true);
for (let [mode, label] of Object.entries(this._searchModes)) { for (let [mode, label] of Object.entries(this._searchModes)) {
let item = document.createXULElement('menuitem'); let item = document.createXULElement('menuitem');

13
scss/elements/_quickSearchTextbox.scss
View file

@ -14,11 +14,16 @@ quick-search-textbox {
:is(search-textbox)::part(search-icon) { :is(search-textbox)::part(search-icon) {
@include svgicon-menu("magnifier", "universal", "16"); @include svgicon-menu("magnifier", "universal", "16");
color: var(--fill-secondary); color: var(--fill-secondary);
// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding // right: 4px gap + 2px padding + 8px dropmarker width + 4px padding
// left, top, and bottom: 5px padding (6px on Figma, including 1px search-textbox border)
// Use explicit left/right padding here because this element is flipped in RTL (see _search.scss) // Use explicit left/right padding here because this element is flipped in RTL (see _search.scss)
padding: 6px 14px 6px 6px; padding: 5px 18px 5px 5px;
margin: 0; margin: 0;
} }
:is(search-textbox)::part(search-input) {
padding: 0;
}
} }
#zotero-tb-search-dropmarker { #zotero-tb-search-dropmarker {
@ -33,9 +38,9 @@ quick-search-textbox {
width: 36px; width: 36px;
height: 28px; height: 28px;
min-height: 28px; min-height: 28px;
// 6px padding + 16px icon width + 2px padding
padding-block: 0; padding-block: 0;
padding-inline: 24px 4px; // inline-start: 6px padding + 16px icon width + 2px padding - 1px outer border
padding-inline: 23px 4px !important;
margin: 0; margin: 0;
border: 0; border: 0;
border-radius: 5px; border-radius: 5px;