Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Change CSS defined in another file ( macro)
Hey. I'm using this macro set, which I know isn't officially supported, but I hope my question is simple enough.
I'm trying to change the transition speed on a passage-by-passage basis rather than setting all of them with .revision-span. The problem is that I can't change the value of .revision-span from the passage itself (with sugarcube's <<toggleClass>>, for instance) because I don't think the class is being applied to an element in the passage--it's being applied to whatever is defined in the macro js script.
Even without knowing the inner workings of this custom macro, do you have any suggestions as to how to work around the problem? I either need some way to overwrite the value of the .revision-span class, or I need to create some other class that applies transitions to individual passages or macros and just set .revision-span to 0.
I'm trying to change the transition speed on a passage-by-passage basis rather than setting all of them with .revision-span. The problem is that I can't change the value of .revision-span from the passage itself (with sugarcube's <<toggleClass>>, for instance) because I don't think the class is being applied to an element in the passage--it's being applied to whatever is defined in the macro js script.
Even without knowing the inner workings of this custom macro, do you have any suggestions as to how to work around the problem? I either need some way to overwrite the value of the .revision-span class, or I need to create some other class that applies transitions to individual passages or macros and just set .revision-span to 0.
Comments
If you're using that with SugarCube (which I assume you are, since you specifically mention it), then you may want to use the SugarCube compatible version, rather than the one from that link.
Where elements come from is irrelevant. They don't get styled unless they show up in the page, and then they're part of the DOM and get styled like everything else. The only issue here is that the appropriate styles must be in place before the elements are juggled about (i.e. before their transitions are triggered).
You should be able to prefix the relevant selectors in the given CSS with class selectors. That should allow you to switch between different revision styles on the fly.
For example: Then, when you want a particular passage to use one of the non-default revision styles, simply tag that passage with its class (e.g.
rev-fastorrev-slowfrom the above example). That should work, for what you described, with no additional mucking about required.Note: Depending on what effect you're going for, you may need to do more with the custom revision styles than simply providing a modified
.revision-span:not(.revision-span-out)style as I did in the above example. IIRC, another issue to watch out for is that the macro set hard-codes one of the transitions (outgoing I think) to be 1s in duration, so you may run into some timing issues if you jigger with the durations in the CSS too much (can't hurt to try though).