Doesn't work with v 128

[Thalon77]

A quick report just to let the devs know that after updating Thunderbird to v 128.0.1 from v 127 the CSS doesn't work anymore, something has changed in TB's code.

5. System information

• OS & OS version: Win10
• OS theme name: default
• DPI / HiDPI resolution:
• Thunderbird version: 128.0.1
• Thunderbird theme / lw-theme:
• This projects settings the issue occurs with:

[Aris-t2]

Maybe "something" does not work, but custom CSS in general works for me:

[JIPG2]

For me it is working OK with the CSS I used for the 115 version in the 128 version. The only "glitches" I see are with the box to introduce the account password and the field to add a new task: when they are in focus, the surrounding blue line is "distorted". For the rest of fields where a blue line appear when in focus, they are OK. I normally use thunderbird in a laptop with 1920x1080 resolution at 125% DPI. I have tried to see it in another screen connected to the laptop with 1920x1200 resolution at 100% scale and the view is OK for the "add a new task" field but no with the password one (is also wrong without CSS). Password field in laptop screen: Password field in external screen: "Add task" field in laptop screen: "Add task" field in external screen:

Is there any CSS code that can help with this visual glitches? (Note for Aris: You helped me with a similar problem in firefox: https://github.com/Aris-t2/CustomCSSforFx/discussions/454#discussioncomment-3944744)

[Aris-t2]

Add this to your userChrome.css an you will get a 1px red line on focused inputs.

input {
  &:focus-visible {
    outline-width: 1px !important;
    outline-color: red !important;;
  }
}

The full code Thunderbird uses (if you want to try more tweaks):

input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  color: var(--search-bar-color);
  border: 1px solid var(--search-bar-border-color);
  border-radius: var(--button-border-radius);
  padding-inline: var(--search-padding) var(--search-buttons-padding);
  background-color: var(--search-bar-background);

  &:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--search-focus-outline-color);
    outline-offset: var(--search-outline-offset);
    background-color: var(--search-bar-focus-background);
  }
}

[JIPG2]

Thank you Aris for the hint!.

Finally the CSS that solved the issues has been:

input {
  &:focus-visible {
    outline-offset: 0px !important;
  }

Even it solves a problem with the main search box, that without any additional CSS is shown in this way (focus border is white instead of blue and 2px outside the search box): For this case, it is also needed

outline-color: #1373d9