XF 1.4 Custom BBCode Inline Spoiler

[Divvens]

So I have an implementation of a 'inline spoiler' BBCode similar to that of reddit (working example - http://orojackson.com/threads/inline-spoiler-added.6649/) and my users brought up a valid issue, if someone changes the TEXT color via BBCode then the inline spoiler doesn't work.

I tried adding !important in the CSS Rules to ensure that the font color of the inline spoiler (without hovering) is forced to be black, always. But that doesn't seem to work.

I currently stopped parsing BBCodes inside the inline spoiler BBCode, but that isn't the optimal solution I was looking for as having just plain BBCode tags being displayed isn't really nice.

Is there any way I can FORCE text color to be black when (without hover) even if the user selects a different color via the rich text editor? Or is there any method where I can stop ONLY the color bbcodes from working/taking over the color of the inline spoiler black font color?

 

[cclaerhout]

I haven't tested but it should work:
Html code:

<span class="myInlineSpoiler">Spoiler <span style="color:red">test</span></span>

Css code:

.myInlineSpoiler * {
  color: black !important;
}

=> the inline style should be overriden.

 

[Divvens]

I haven't tested but it should work:
Html code:

<span class="myInlineSpoiler">Spoiler <span style="color:red">test</span></span>

Css code:

.myInlineSpoiler * {
  color: black !important;
}

=> the inline style should be overriden.

Works, but hover text doesn't turn white I guess due to the !important tag

 

[Divvens]

Seem to have sorted it out with the following CSS:

/*BBCODE MINI SPOILER*/
.MiniSpoiler {color: #000000 !important; background-color: #000000; cursor: pointer;}
.MiniSpoiler:hover {color:#ffffff !important;}
.MiniSpoiler span {color: #000000 !important;}
.MiniSpoiler span:hover {color: #ffffff !important;}
/*BBCODE MINI SPOILER*/

 

[cclaerhout]

Works, but hover text doesn't turn white I guess due to the !important tag

.myInlineSpoiler:hover, .myInlineSpoiler:hover * {
   color: #fff !important;
}