mcpower
RebaneCSS-only livesplit recreation (made in ~45 min)
https://lyra.horse/fun/livecssplit.html
https://lyra.horse/fun/livecssplit.html
chrome/firefox-only, no safari support
works on desktop and mobile
solo@rebane2001 you are a Witch (positive)
Nirinaaaaa@rebane2001 magic! but it doesn't work on Zen Browser, it doesn't trigger on click unfortunately
@nirina could you right click in the middle of the timer and inspect element and send a screenshot
it should work in chrome/firefox/safari so idk what's broken
@rebane2001 just tried Firefox version 146 and it doesn't work... maybe it's a firefox + macos issue?
@rebane2001 yeah it works, thank you! what did you do?
Leah 
@rebane2001 time to attempt to dissect another one of Rebanes css things.
(and quite possibly fail... tho this seems a lot simpler than the clicker that I failed to understand lol)
(and quite possibly fail... tho this seems a lot simpler than the clicker that I failed to understand lol)
@ChaosKitsune i think i wrote the syntax in this pretty clearly + it was made in 45 min so it can't be that bad
@rebane2001 haha yeah. Ive been slowly updating my css knowlage since I never caught up with css5. I think I learned it when css3 was the norm so uhhh ive been busy... and I dont hate css too much anymore.
Uhh I was able to throw this together for a really basic counter from what I saw (+ some stackoverflow and moz docs)
<style>
@property --timer {
syntax: '<integer>';
inherits: true; /* Some reason this is needed to animate? */
initial-value: 0;
}
.timer {
--timer: 0;
animation: timer-animation 32s linear 1;
}
.timer::after {
counter-set: timer var(--timer);
content: counter(timer);
}
@keyframes timer-animation {
from {
--timer: 0;
}
to {
--timer: 32000;
}
}
</style>
<span class="timer"></span>Its far from all thats going on with your thing but its certainly a new thing ive learned haha. Might try figure out the rest in a bit. My current guess is
- All counters are counting up in the background right from the start and they are shown and stopped (based on the radio element?) when needed
@rebane2001 I see you detect clicks with the radio named "split". Once its toggled you hide it and stop the animation I guess?
The split radio is in a label positioned to take the whole area so you always hit it?
I think it all mostly makes sense then...
The split radio is in a label positioned to take the whole area so you always hit it?
I think it all mostly makes sense then...