CSS Code Housekeeping

[SychO9]

Progresses #2600

Changes proposed in this pull request:
General cleanup of certain bits of code, all safe and doesn't change anything.

• Removed dead code.
• Used CSS Variables in certain scopes to improve customizability.

Reviewers should focus on:
🤷🏼‍♂️

Confirmed

• Frontend changes: tested on a local Flarum installation.

[davwheat]

I'm definitely in favour of this direction. We should also remove all our vendor mixins (.transition(), .box-shadow()) as part of this PR.

[SychO9]

I'm definitely in favour of this direction. We should also remove all our vendor mixins (.transition(), .box-shadow()) as part of this PR.

Yes as part of this PR and not others if you see what I mean :P

[SychO9]

Actually, removing the mixins would break any extensions using them 🤔

I'll just remove their usage for now.

[davwheat]

We might want to remove the usages of translate3d. We can use normal translate instead.

This was a hack to force a separate compositing layer which was GPU optimised, but modern browsers do this automatically if transform is animated in any way in CSS.

We should also remove the unneeded ~"" surrounding some of the property values.

Couldn't be modify the mixing to only create the unprefixed version of each of the properties? That way extensions using them don't break, but they don't have the vendor prefixes either.

[davwheat]

Sorry about the multiple reviews. My fat fingers kept pressing the wrong button on mobile.

[SychO9]

We might want to remove the usages of translate3d. We can use normal translate instead.

This was a hack to force a separate compositing layer which was GPU optimised, but modern browsers do this automatically if transform is animated in any way in CSS.

I couldn't find anything online about this to make sure it's no longer necessary :/

Couldn't be modify the mixing to only create the unprefixed version of each of the properties? That way extensions using them don't break, but they don't have the vendor prefixes either.

The deprecated mixins here are all vendor-less though, you removed them in a previous PR.

[davwheat]

Take a look at this: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/#use-css-transitions-and-animations-whenever-possible

Elements with transform properties, transitions with transform, animations with keyframes that contain transform, or will-change: transform are automatically promoted to compositing layers.

The deprecated mixins here are all vendor-less though, you removed them in a previous PR.

Oops. I forgot I did that. 😅

[SychO9]

This should be enough for now.