How to disable bluish highlight outline globally?

[VitalSkib]

Hi. I can’t find where I can disable this bluish highlight outline globally.. Is there any easy way?

And also, in that about:home page, if I untick the "shortcuts" and "recent activity" checkboxes, then the Firefox logo and Google search box are not centered vertically. . How can I fix it? TIA

[bmFtZQ]

You can disable the outline by replacing/removing these parts of the theme (easiest way is to set the outline: none or outline-color: transparent:

chrome/content/newtab.css, line 82 (newtab search bar):

.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button {
  border-color: transparent !important;
  outline: 2px solid var(--newtab-primary-action-background) !important;
  outline-offset: -1px !important;
}

chrome/content/newtab.css, line 194 (private newtab search bar):

.search-handoff-button.focused:not(.disabled) {
  box-shadow: none !important;
  outline: 2px solid var(--in-content-focus-outline-color) !important;
  outline-offset: -1px !important;
}

chrome/toolbar/findbar.css, line 18 (find in page search bar):

.findbar-textbox:focus {
  outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
  outline-offset: -1px !important;
}

chrome/toolbar/urlbar.css, line 12 (urlbar):

:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within {
  outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
}

The newtab search bar should be centred vertically when no other items are checked now.

[VitalSkib]

Oh, thank you very much. I was able to figured it out on my own already, but it was not easy.. 🤪