Fix style issues with bootstrap or tailwind in the site

aframevr / aframe-inspector

:mag: Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.

https://aframe.io/aframe-inspector/examples/

MIT License

655 stars 203 forks source link

Fix style issues with bootstrap or tailwind in the site #640

Closed vincentfretin closed 2 years ago

vincentfretin commented 2 years ago

Specify default css properties on some elements to fix style issues when using the inspector in a site that has tailwind base.css or bootstrap reset styles.

Before: Capture d’écran du 2022-10-04 20-35-46

After: Capture d’écran du 2022-10-06 15-34-20

Remaining fixes to do:

[ ] local checkbox and other checkboxes for boolean properties is always black
[ ] the id/class on the top bar is not aligned with <a-entity
[ ] in the outliner the line height change slightly if I remove or add class

vincentfretin commented 2 years ago

tailwind css includes base.css that reset some default browser css, like this one:

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

dmarcos commented 2 years ago

Thanks!

vincentfretin commented 2 years ago

Thanks for merging. I didn't make this PR a draft PR? I'll create a second PR when I can spend time to look for the remaining issues I noted.