dark-mode-toggle-block icon indicating copy to clipboard operation
dark-mode-toggle-block copied to clipboard

Size issue (CSS styles)

Open webmandesign opened this issue 11 months ago • 0 comments

First, thank you for this plugin, Rich!

Testing it with my themes I've noticed some styling issues regarding the size of the toggle. I guess your CSS was created for box-sizing: content-box;.

In my case the solution would simply be to add box-sizing: content-box; style on the block wrapper .wp-block-tabor-dark-mode-toggle.

But possibly safer solution would be to add box-sizing: content-box; to these selectors:

  • .wp-block-tabor-dark-mode-toggle__track
  • .wp-block-tabor-dark-mode-toggle__selector

I'm providing custom styles for your block in my theme, just rising the issue here so you can evaluate and implement fix if needed.


How to test:

You can use my Zooey theme for testing or simply add this CSS into your theme's style.css file and check how the block displays and behaves:

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

webmandesign avatar Nov 06 '24 15:11 webmandesign