Debuglayer CSS is not compatible with Bulma

I was trying to get the new inspector to work and upgraded everything to 4.0.0-alpha.32

My issue is that the project also uses Bulma, and the CSS class names conflict so that the debug layer is unreadable:

Is there any way to avoid this? Would it maybe be possible to rename the babylonjs classes to something more specific? (.title => .babylonjs-inspector-title)

Or do you have any tips for me how to avoid this conflict? From the little I know about CSS, everything is in one global namespace …

If you have the list of conflicting ones I can change them in the inspector

Maybe it’s too late but could help someone…

.itemContainer .title, .paneContainer .title, .checkBoxLine .label, .paneList .label{
font-size: small;
color: white;
margin-bottom: 0;
}

1 Like