fix(omnibox): restore darker search input
Keep the omnibox body on the header surface while restoring the darker GTK search entry fill on the visible text node so the input reads as a separate field again.
- commit
- 3132aa33d3b0ee0853fc738d343f7717c5ae92fd
- author
- brice · · 2026-04-08 04:19 UTC
- parent
- 6415f04
- signature
- GPG Verified
CD88F9E564E0102646FB6077A1A07C7C7C3E349D· arch-gpg Verified for the committer email
2 files · +44 -9
M internal/ui/theme/css.go +23 -9
| @@ -217,8 +217,8 @@ window.standalone-omnibox-window { | |||
| 217 | 217 | ||
| 218 | 218 | /* Omnibox main container - the visible popup */ | |
| 219 | 219 | .omnibox-container { | |
| 220 | - | background-color: alpha(var(--surface-variant), 0.94); | |
| 221 | - | background-image: linear-gradient(to bottom, alpha(var(--surface), 0.22), alpha(var(--surface-variant), 0.08)); | |
| 220 | + | background-color: var(--surface); | |
| 221 | + | background-image: none; | |
| 222 | 222 | border: 0.0625em solid alpha(var(--border), 0.85); | |
| 223 | 223 | border-radius: 0.1875em; | |
| 224 | 224 | box-shadow: 0 0.875em 2.5em alpha(black, 0.24), 0 0.0625em 0 alpha(white, 0.05) inset; | |
| @@ -260,38 +260,47 @@ window.standalone-omnibox-window { | |||
| 260 | 260 | } | |
| 261 | 261 | ||
| 262 | 262 | /* Search entry field */ | |
| 263 | - | .omnibox-entry { | |
| 263 | + | entry.omnibox-entry, | |
| 264 | + | entry.omnibox-entry > text { | |
| 264 | 265 | background-color: alpha(var(--bg), 0.88); | |
| 266 | + | background-image: none; | |
| 265 | 267 | color: var(--text); | |
| 268 | + | caret-color: var(--accent); | |
| 269 | + | } | |
| 270 | + | ||
| 271 | + | entry.omnibox-entry { | |
| 266 | 272 | border: 0.0625em solid alpha(var(--border), 0.82); | |
| 267 | 273 | border-radius: 0.125em; | |
| 268 | 274 | padding: 0.625em 0.75em; | |
| 269 | 275 | margin: 0.5em 0.75em; | |
| 270 | 276 | font-size: 1em; | |
| 271 | - | caret-color: var(--accent); | |
| 272 | 277 | box-shadow: 0 0.0625em 0 alpha(white, 0.04) inset; | |
| 273 | 278 | } | |
| 274 | 279 | ||
| 275 | 280 | entry.omnibox-entry:focus, | |
| 276 | 281 | entry.omnibox-entry:focus-within, | |
| 277 | - | entry.omnibox-entry:focus-visible { | |
| 282 | + | entry.omnibox-entry:focus-visible, | |
| 283 | + | entry.omnibox-entry:focus > text, | |
| 284 | + | entry.omnibox-entry:focus-within > text, | |
| 285 | + | entry.omnibox-entry:focus-visible > text { | |
| 278 | 286 | border-color: var(--accent); | |
| 279 | 287 | background-color: shade(var(--bg), 1.05); | |
| 288 | + | background-image: none; | |
| 280 | 289 | outline-style: none; | |
| 281 | 290 | outline-width: 0px; | |
| 282 | 291 | outline-color: transparent; | |
| 283 | 292 | } | |
| 284 | 293 | ||
| 285 | 294 | /* Override any internal focus styling */ | |
| 286 | - | entry.omnibox-entry > *:focus, | |
| 287 | - | entry.omnibox-entry > *:focus-visible { | |
| 295 | + | entry.omnibox-entry > text:focus, | |
| 296 | + | entry.omnibox-entry > text:focus-visible { | |
| 288 | 297 | outline-style: none; | |
| 289 | 298 | outline-color: transparent; | |
| 290 | 299 | } | |
| 291 | 300 | ||
| 292 | 301 | /* Scrolled window for suggestions */ | |
| 293 | 302 | .omnibox-scrolled { | |
| 294 | - | background-color: alpha(var(--surface-variant), 0.72); | |
| 303 | + | background-color: var(--surface); | |
| 295 | 304 | border-top: 0.0625em solid alpha(var(--border), 0.65); | |
| 296 | 305 | } | |
| 297 | 306 | ||
| @@ -435,9 +444,14 @@ entry.omnibox-entry > *:focus-visible { | |||
| 435 | 444 | entry.omnibox-entry.omnibox-entry-bang-active, | |
| 436 | 445 | entry.omnibox-entry.omnibox-entry-bang-active:focus, | |
| 437 | 446 | entry.omnibox-entry.omnibox-entry-bang-active:focus-within, | |
| 438 | - | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible { | |
| 447 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible, | |
| 448 | + | entry.omnibox-entry.omnibox-entry-bang-active > text, | |
| 449 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus > text, | |
| 450 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-within > text, | |
| 451 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible > text { | |
| 439 | 452 | border-color: var(--accent); | |
| 440 | 453 | background-color: shade(var(--bg), 1.05); | |
| 454 | + | background-image: none; | |
| 441 | 455 | } | |
| 442 | 456 | ||
| 443 | 457 | .omnibox-row.omnibox-row-bang .omnibox-suggestion-title { | |
| @@ -217,8 +217,8 @@ window.standalone-omnibox-window { | |||||
| 217 | 217 | ||||
| 218 | /* Omnibox main container - the visible popup */ | 218 | /* Omnibox main container - the visible popup */ | ||
| 219 | .omnibox-container { | 219 | .omnibox-container { | ||
| 220 | - | background-color: alpha(var(--surface-variant), 0.94); | 220 | + | background-color: var(--surface); |
| 221 | - | background-image: linear-gradient(to bottom, alpha(var(--surface), 0.22), alpha(var(--surface-variant), 0.08)); | 221 | + | background-image: none; |
| 222 | border: 0.0625em solid alpha(var(--border), 0.85); | 222 | border: 0.0625em solid alpha(var(--border), 0.85); | ||
| 223 | border-radius: 0.1875em; | 223 | border-radius: 0.1875em; | ||
| 224 | box-shadow: 0 0.875em 2.5em alpha(black, 0.24), 0 0.0625em 0 alpha(white, 0.05) inset; | 224 | box-shadow: 0 0.875em 2.5em alpha(black, 0.24), 0 0.0625em 0 alpha(white, 0.05) inset; | ||
| @@ -260,38 +260,47 @@ window.standalone-omnibox-window { | |||||
| 260 | } | 260 | } | ||
| 261 | 261 | ||||
| 262 | /* Search entry field */ | 262 | /* Search entry field */ | ||
| 263 | - | .omnibox-entry { | 263 | + | entry.omnibox-entry, |
| 264 | + | entry.omnibox-entry > text { | |||
| 264 | background-color: alpha(var(--bg), 0.88); | 265 | background-color: alpha(var(--bg), 0.88); | ||
| 266 | + | background-image: none; | |||
| 265 | color: var(--text); | 267 | color: var(--text); | ||
| 268 | + | caret-color: var(--accent); | |||
| 269 | + | } | |||
| 270 | + | ||||
| 271 | + | entry.omnibox-entry { | |||
| 266 | border: 0.0625em solid alpha(var(--border), 0.82); | 272 | border: 0.0625em solid alpha(var(--border), 0.82); | ||
| 267 | border-radius: 0.125em; | 273 | border-radius: 0.125em; | ||
| 268 | padding: 0.625em 0.75em; | 274 | padding: 0.625em 0.75em; | ||
| 269 | margin: 0.5em 0.75em; | 275 | margin: 0.5em 0.75em; | ||
| 270 | font-size: 1em; | 276 | font-size: 1em; | ||
| 271 | - | caret-color: var(--accent); | |||
| 272 | box-shadow: 0 0.0625em 0 alpha(white, 0.04) inset; | 277 | box-shadow: 0 0.0625em 0 alpha(white, 0.04) inset; | ||
| 273 | } | 278 | } | ||
| 274 | 279 | ||||
| 275 | entry.omnibox-entry:focus, | 280 | entry.omnibox-entry:focus, | ||
| 276 | entry.omnibox-entry:focus-within, | 281 | entry.omnibox-entry:focus-within, | ||
| 277 | - | entry.omnibox-entry:focus-visible { | 282 | + | entry.omnibox-entry:focus-visible, |
| 283 | + | entry.omnibox-entry:focus > text, | |||
| 284 | + | entry.omnibox-entry:focus-within > text, | |||
| 285 | + | entry.omnibox-entry:focus-visible > text { | |||
| 278 | border-color: var(--accent); | 286 | border-color: var(--accent); | ||
| 279 | background-color: shade(var(--bg), 1.05); | 287 | background-color: shade(var(--bg), 1.05); | ||
| 288 | + | background-image: none; | |||
| 280 | outline-style: none; | 289 | outline-style: none; | ||
| 281 | outline-width: 0px; | 290 | outline-width: 0px; | ||
| 282 | outline-color: transparent; | 291 | outline-color: transparent; | ||
| 283 | } | 292 | } | ||
| 284 | 293 | ||||
| 285 | /* Override any internal focus styling */ | 294 | /* Override any internal focus styling */ | ||
| 286 | - | entry.omnibox-entry > *:focus, | 295 | + | entry.omnibox-entry > text:focus, |
| 287 | - | entry.omnibox-entry > *:focus-visible { | 296 | + | entry.omnibox-entry > text:focus-visible { |
| 288 | outline-style: none; | 297 | outline-style: none; | ||
| 289 | outline-color: transparent; | 298 | outline-color: transparent; | ||
| 290 | } | 299 | } | ||
| 291 | 300 | ||||
| 292 | /* Scrolled window for suggestions */ | 301 | /* Scrolled window for suggestions */ | ||
| 293 | .omnibox-scrolled { | 302 | .omnibox-scrolled { | ||
| 294 | - | background-color: alpha(var(--surface-variant), 0.72); | 303 | + | background-color: var(--surface); |
| 295 | border-top: 0.0625em solid alpha(var(--border), 0.65); | 304 | border-top: 0.0625em solid alpha(var(--border), 0.65); | ||
| 296 | } | 305 | } | ||
| 297 | 306 | ||||
| @@ -435,9 +444,14 @@ entry.omnibox-entry > *:focus-visible { | |||||
| 435 | entry.omnibox-entry.omnibox-entry-bang-active, | 444 | entry.omnibox-entry.omnibox-entry-bang-active, | ||
| 436 | entry.omnibox-entry.omnibox-entry-bang-active:focus, | 445 | entry.omnibox-entry.omnibox-entry-bang-active:focus, | ||
| 437 | entry.omnibox-entry.omnibox-entry-bang-active:focus-within, | 446 | entry.omnibox-entry.omnibox-entry-bang-active:focus-within, | ||
| 438 | - | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible { | 447 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible, |
| 448 | + | entry.omnibox-entry.omnibox-entry-bang-active > text, | |||
| 449 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus > text, | |||
| 450 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-within > text, | |||
| 451 | + | entry.omnibox-entry.omnibox-entry-bang-active:focus-visible > text { | |||
| 439 | border-color: var(--accent); | 452 | border-color: var(--accent); | ||
| 440 | background-color: shade(var(--bg), 1.05); | 453 | background-color: shade(var(--bg), 1.05); | ||
| 454 | + | background-image: none; | |||
| 441 | } | 455 | } | ||
| 442 | 456 | ||||
| 443 | .omnibox-row.omnibox-row-bang .omnibox-suggestion-title { | 457 | .omnibox-row.omnibox-row-bang .omnibox-suggestion-title { | ||
M internal/ui/theme/css_test.go +21 -0
| @@ -51,3 +51,24 @@ func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) { | |||
| 51 | 51 | t.Fatalf("expected favorite highlight to move off the star slot") | |
| 52 | 52 | } | |
| 53 | 53 | } | |
| 54 | + | ||
| 55 | + | func TestGenerateCSS_OmniboxSearchAreaMatchesHeaderSurface(t *testing.T) { | |
| 56 | + | css := GenerateCSS(DefaultDarkPalette()) | |
| 57 | + | ||
| 58 | + | containerRe := regexp.MustCompile(`(?s)\.omnibox-container\s*\{[^}]*background-color:\s*var\(--surface\);`) | |
| 59 | + | if !containerRe.MatchString(css) { | |
| 60 | + | t.Fatalf("expected omnibox container to use the header surface color") | |
| 61 | + | } | |
| 62 | + | entryRe := regexp.MustCompile(`(?s)entry\.omnibox-entry\s*,\s*entry\.omnibox-entry\s*>\s*text\s*\{[^}]*background-color:\s*alpha\(var\(--bg\),\s*0\.88\);[^}]*background-image:\s*none;`) | |
| 63 | + | if !entryRe.MatchString(css) { | |
| 64 | + | t.Fatalf("expected omnibox entry and its text node to use the darker background fill") | |
| 65 | + | } | |
| 66 | + | focusedEntryRe := regexp.MustCompile(`(?s)entry\.omnibox-entry:focus[^\{]*,\s*entry\.omnibox-entry:focus-within[^\{]*,\s*entry\.omnibox-entry:focus-visible[^\{]*,\s*entry\.omnibox-entry:focus\s*>\s*text[^\{]*,\s*entry\.omnibox-entry:focus-within\s*>\s*text[^\{]*,\s*entry\.omnibox-entry:focus-visible\s*>\s*text\s*\{[^}]*background-color:\s*shade\(var\(--bg\),\s*1\.05\);`) | |
| 67 | + | if !focusedEntryRe.MatchString(css) { | |
| 68 | + | t.Fatalf("expected focused omnibox entry text node to keep the darker bg-based fill") | |
| 69 | + | } | |
| 70 | + | scrolledRe := regexp.MustCompile(`(?s)\.omnibox-scrolled\s*\{[^}]*background-color:\s*var\(--surface\);`) | |
| 71 | + | if !scrolledRe.MatchString(css) { | |
| 72 | + | t.Fatalf("expected omnibox results area to use the header surface color") | |
| 73 | + | } | |
| 74 | + | } | |
| @@ -51,3 +51,24 @@ func TestGenerateCSS_FavoriteRowsOnlyTintTrailingAffordance(t *testing.T) { | |||||
| 51 | t.Fatalf("expected favorite highlight to move off the star slot") | 51 | t.Fatalf("expected favorite highlight to move off the star slot") | ||
| 52 | } | 52 | } | ||
| 53 | } | 53 | } | ||
| 54 | + | ||||
| 55 | + | func TestGenerateCSS_OmniboxSearchAreaMatchesHeaderSurface(t *testing.T) { | |||
| 56 | + | css := GenerateCSS(DefaultDarkPalette()) | |||
| 57 | + | ||||
| 58 | + | containerRe := regexp.MustCompile(`(?s)\.omnibox-container\s*\{[^}]*background-color:\s*var\(--surface\);`) | |||
| 59 | + | if !containerRe.MatchString(css) { | |||
| 60 | + | t.Fatalf("expected omnibox container to use the header surface color") | |||
| 61 | + | } | |||
| 62 | + | entryRe := regexp.MustCompile(`(?s)entry\.omnibox-entry\s*,\s*entry\.omnibox-entry\s*>\s*text\s*\{[^}]*background-color:\s*alpha\(var\(--bg\),\s*0\.88\);[^}]*background-image:\s*none;`) | |||
| 63 | + | if !entryRe.MatchString(css) { | |||
| 64 | + | t.Fatalf("expected omnibox entry and its text node to use the darker background fill") | |||
| 65 | + | } | |||
| 66 | + | focusedEntryRe := regexp.MustCompile(`(?s)entry\.omnibox-entry:focus[^\{]*,\s*entry\.omnibox-entry:focus-within[^\{]*,\s*entry\.omnibox-entry:focus-visible[^\{]*,\s*entry\.omnibox-entry:focus\s*>\s*text[^\{]*,\s*entry\.omnibox-entry:focus-within\s*>\s*text[^\{]*,\s*entry\.omnibox-entry:focus-visible\s*>\s*text\s*\{[^}]*background-color:\s*shade\(var\(--bg\),\s*1\.05\);`) | |||
| 67 | + | if !focusedEntryRe.MatchString(css) { | |||
| 68 | + | t.Fatalf("expected focused omnibox entry text node to keep the darker bg-based fill") | |||
| 69 | + | } | |||
| 70 | + | scrolledRe := regexp.MustCompile(`(?s)\.omnibox-scrolled\s*\{[^}]*background-color:\s*var\(--surface\);`) | |||
| 71 | + | if !scrolledRe.MatchString(css) { | |||
| 72 | + | t.Fatalf("expected omnibox results area to use the header surface color") | |||
| 73 | + | } | |||
| 74 | + | } | |||