hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Recolor the native search clear button

Browse source
This commit is contained in:
dtonon 2026-06-18 11:55:53 +01:00
parent f0c7459980
commit 98c08e0c55
1 changed files with 15 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/routes/layout.css
View file

@ -45,6 +45,21 @@ body {
:where(.dark) textarea::placeholder { :where(.dark) textarea::placeholder {
color: var(--color-neutral-500); color: var(--color-neutral-500);
} }
/* Redraw the native search clear button so it follows our palette instead
of the OS accent color. Firefox renders no button at all. */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 1.2em;
height: 1.2em;
background-color: var(--color-neutral-400);
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 10.6 6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4z"/></svg>')
no-repeat center / contain;
cursor: pointer;
}
:where(.dark) input[type="search"]::-webkit-search-cancel-button {
background-color: var(--color-neutral-500);
}
} }
/* Tighter heading rhythm for all rendered (prose) content. Overrides the /* Tighter heading rhythm for all rendered (prose) content. Overrides the