Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-05-25 02:52:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/Omnibox: workarounds for border rendering bugs in browsers

Browse Source 
- fixes wonky input border in webkit
- fix bleeding rounded edges when focused in blink (caused by imperfect stacking of inset box-shadow and outset outline)

WOC (wukko-only-change) but it makes a huge difference imo
This commit is contained in:
wukko 2025-05-22 18:16:32 +06:00
parent 98cd4dfc0d
commit 7e9b7542ac
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/save/Omnibox.svelte
View File

@ -231,6 +231,10 @@
--input-padding: 10px; --input-padding: 10px;
display: flex; display: flex;
box-shadow: 0 0 0 1.5px var(--input-border) inset; box-shadow: 0 0 0 1.5px var(--input-border) inset;
/* webkit can't render the 1.5px box shadow properly,
so we duplicate the border as outline to fix it visually */
outline: 1.5px solid var(--input-border);
outline-offset: -1.5px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
align-items: center; align-items: center;
gap: var(--input-padding); gap: var(--input-padding);
@ -264,8 +268,9 @@
} }
#input-container.focused { #input-container.focused {
box-shadow: 0 0 0 1px var(--secondary) inset; box-shadow: none;
outline: var(--secondary) 1px solid; outline: var(--secondary) 2px solid;
outline-offset: -1px;
} }
#input-container.focused :global(#input-icons svg) { #input-container.focused :global(#input-icons svg) {