report(redesign): fireworks

[connorjclark]

#8185

run this in the now deployment:

const scoresContainer = document.querySelector('.lh-scores-container');
scoresContainer.classList.add('score100');
document.body.classList.add('dark');
scoresContainer.addEventListener('click', _ => {
  scoresContainer.classList.toggle('fireworks-paused');
});

[paulirish]

% 2 nits

[paulirish]

nuke

[paulirish]

we need pointer-events: none now. it's hard but possible to click on the fireworks div blocking the click on the gauge

[exterkamp]

😍 🎆 LGTM! Looks great in dark mode.

Future dream idea: slowly fade to dark theme, then start the 🎆

[brendankenny]

needs a test :)

[brendankenny]

no need to double check scoresAll100

[connorjclark]

needs a test :)

ez

[paulirish]

Can we flip on dark mode for just scoresHeader?

[connorjclark]

Can we flip on dark mode for just scoresHeader?

i think it'd look weird dawg but @exterkamp suggests he'll try it post IO

---

edit by paul: it looks aiiiiight.

[paulirish]

let's switch the whole report into dark mode if they are getting fireworks.