Change transition ?

0 votes
asked Oct 11 by Seyru (580 points)

Hello there, I'm having an issue that's probably really basic to the most of you !

I'd like to change the transition time of the <<timed t8n>> macro ! 

I know you're supposed to do that in your stylesheet, but although I'm reading old topics using transition, I can't figure how to do it properly. (I've read this : here, and I almost get what you're supposed to do, but what do I write instead of the <div> ?)

Thanks a lot guys <3

1 Answer

0 votes
answered Oct 11 by TheMadExile (20,310 points)
selected Oct 12 by Seyru
 
Best answer

The style rule that handles transitions for the <<timed>> macro is based on the class selector .macro-timed-insert (from: core-macro.css at SugarCube v2 CSS > Built-in Stylesheets).

 

To change the duration of the transition for all <<timed>> invocations, simply add something like the following rule to your Story Stylesheet, which changes the duration from the default 400ms to 1s:

.macro-timed-insert {
	transition-duration: 1s;
}

 

To change the duration of the transition only for select <<timed>> invocations, add something like the following rule to your Story Stylesheet, which changes the duration from the default 400ms to 1s for any <<timed>> which is wrapped within an element containing the class slow.

.slow .macro-timed-insert {
	transition-duration: 1s;
}

And wrapping <<timed>>:

/* Using HTML. */
<span class="slow"><<timed … t8n>>…<</timed>></span>

/* Using custom styles markup. */
@@.slow;<<timed … t8n>>…<</timed>>@@

 

commented Oct 12 by Seyru (580 points)
Perfect, as always !
Thanks a lot !
...