Global stylesheet find bar styles appear incorrectly on dark mode

Description:

When pressing Cmd+F in the global stylesheet editor, the find bar appears incorrectly.

Step-by-step reproduction instructions:

  1. Open the Post Editor/Site Editor
  2. Go to Cwicly Classes & Stylesheets > Global Stylesheets
  3. Focus the editor for a stylesheet
  4. Press Cmd+F
  5. Notice the incorrect display of the find bar

Screenshots, screen recording, code snippet

Environment info

  • WordPress version: 6.2.2
  • Cwicly Plugin version: 1.2.9.7.1

Confirming this still happens on the latest Cwicly version.

Hello @StrangeTech,

Thanks for the report.

Might I ask how you are able to focus the stylesheet editor without it expanding, which then displays the correct styles for the search bar?

Good question. For that specific site, the global stylesheet editor doesn’t expand. Other sites it expands correctly. There is a JS error in the console at page load that may or may not be related.

The light coloured buttons are also a bit inconsistent in dark mode given how elegant and coherent the rest of the Cwicly UI has become, but that is a minor issue.

Hi,

I cannot reproduce this issue as the width of the inspector automatically adjusts when focus is applied to the code editor.

This shouldn’t affect the behavior.
Is it possible you are applying a specific width to .interface-complementary-area?

Best regards,
Johnny

@JohnD, Thank you for following this up.

I can confirm the width issue is no longer occurring for us with the latest Cwicly version but the white buttons still appear the same as in the screenshot in dark mode.