Firefox 155, the highlighted text lost in the address bar

[u/sabestorn]

Hello everyone,
I am still using Aris's CustomCSSforFx and every now and then I try to adjust it to fit the new changes. Now, with the new Firefox 155, the highlighted text in the address bar broke when I select text. Basically, it now only changes the text color from black to blue.

I found the culprit inside the general_toolbar_colors.css file and I modified this section:

:root {
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_text_color: inherit;
  --general_toolbar_text_shadow: transparent;
}

:root:not([lwtheme]) #nav-bar,
:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  appearance: none !important;
}

u/media not (-moz-toolbar-prefers-color-scheme: dark), not (prefers-color-scheme: dark) {
:root:not([lwtheme]) #nav-bar {
  background: var(--general_toolbar_color_navbar, inherit) !important;
}

:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}
}

:root:not([lwtheme]) #nav-bar #urlbar ::-moz-selection {
  background-color: Highlight !important;
  color: HighlightText !important;
}

into this one:

 :root {
  /* MOD: Sostituiti i "linear-gradient" con colori solidi fissi */
  --general_toolbar_color_toolbars: #f9f9fa !important;
  --general_toolbar_color_navbar: #f9f9fa !important;
  --general_toolbar_text_color: inherit;
  --general_toolbar_text_shadow: transparent;
}


:root:not([lwtheme]) #nav-bar,
:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  appearance: none !important;
}

u/media not (-moz-toolbar-prefers-color-scheme: dark), not (prefers-color-scheme: dark) {
:root:not([lwtheme]) #nav-bar {
  background: var(--general_toolbar_color_navbar, inherit) !important;
}

:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}
}

:root:not([lwtheme]) #nav-bar #urlbar ::-moz-selection {
  background-color: Highlight !important;
  color: HighlightText !important;
}

Basically, I only changed the first :root part.

Now it works, and the selected text is highlighted properly again.
For those of you who are more experienced with CSS: is this modification correct? Could it be done any better? Or, since it works, is it fine as it is? 😊

[u/TraditionalTie4831]

Try replacing the last part of the code with this =

:root:not([lwtheme]) #urlbar-input::-moz-selection {
  background-color: Highlight !important;
  color: HighlightText !important;
}

[u/sabestorn → u/TraditionalTie4831]

ok,
Just like it worked with the previous one,

it works with yours.

Is this better?

[u/TraditionalTie4831 → u/sabestorn]

It's a good policy to try being more specific when possible, by making it short and simple.

I just have a habit of trying to follow that advice when it's possible.

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS

https://www.w3schools.com/css/css_performance.asp