diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css index d7a4bafb813c..dfbf0c259e0e 100644 --- a/browser/themes/shared/autocomplete.css +++ b/browser/themes/shared/autocomplete.css @@ -16,6 +16,9 @@ border-radius: 0; padding: 0 1px; + --status-text-color: currentColor; + --status-background-color: rgba(248, 232, 28, .2); + > .ac-site-icon { margin-inline: 4px 0; } @@ -168,7 +171,8 @@ > .ac-status { padding: var(--space-xsmall) var(--space-small); text-align: center; - background-color: var(--color-background-information); + background-color: var(--status-background-color); + color: var(--status-text-color); width: 100%; border-bottom: 1px solid rgba(38,38,38,.15); font-size: calc(10 / 12 * 1em); @@ -224,7 +228,7 @@ /* Popup states */ .autocomplete-richlistitem { - &:hover { + &:not([disabled="true"]):not([selected]):hover { background-color: var(--arrowpanel-dimmed); } diff --git a/toolkit/themes/osx/global/autocomplete.css b/toolkit/themes/osx/global/autocomplete.css index 0f21ebf4f35a..32fa35303fa3 100644 --- a/toolkit/themes/osx/global/autocomplete.css +++ b/toolkit/themes/osx/global/autocomplete.css @@ -78,3 +78,9 @@ panel[type="autocomplete-richlistbox"] { padding: 0 !important; margin: 0 !important; } + +/* On Mac, the autocomplete panel changes color in system dark mode. We need + to change the contrast on warning-background-color accordingly. */ +#PopupAutoComplete > richlistbox > richlistitem { + --status-background-color: light-dark(rgba(248,232,28,.2), rgba(248,232,28,.6)) !important; +}