Change of flipdown.css styles to CSS variables

[alexvishweb]

Hello,

thank you for the great plugin!

I've used it in my latest project and I liked it but restyling wasn't very comfortable. Had to change same values in many places + change them for different screen sizes, etc. That's a lot of work, so I rewrote flipdown.css styles using CSS variables and now all styles can be changed in one place. The whole look can be altered with a couple of variables. I also removed media query rules from CSS since every project has its own media query breakpoints and there is no more need to show which rules should be changed with media queries since the size is now changed with one variable.

For example,

@media (max-width: 550px) {
  .flipdown {
    --rotor-base: 50px;
  }
}

will make flipdown 2 times smaller (initial --rotor-base is equal to 100px for simpler calculations)

Other sizes are changed with multipliers.
For example, widths of rotors can be changed by changing "0.5" in a variable --rotor-width: calc(var(--rotor-base) * 0.5);. 100px * 0.5 = 50px.

The colors can be changed pretty easy too by altering these variables

--flip-base: 0, 0%;
--flip-l: 0%;

that represent HSL (Hue, Saturation, Lightness) model
https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/

Feel free to ask any questions!

[mariusa]

@PButcher Peter, are you still around? Could this be merged, please? Thanks