Beautify webinterface in firefox

[binarybucks]

[simonvanderveldt]

This seems to work fine for me with Firefox 37.0.1, is there still something that needs fixing?

[stylpen]

It works but it doesn't look the same for me. Here is a screenshot I just made:

Firefox 37.0.1 is on the left, Chrome 42.0.2311.90 on the right and while the layout is exactly the same sliders (input type range) and switches (input type checkbox) are not.
In another project I had some success styling sliders so they look the same in FF and Chrome but I've had more trouble getting nice looking switches in Firefox without too much effort. But I'm certainly no expert on this so probably this is easy but not for me right now.
If it should look the same then there is still some CSS that needs fixing.

[simonvanderveldt]

Thx for the screenshots, I see the same now.

The checkbox/sliders seem to be fixable with some ugly hacks http://stackoverflow.com/a/24788957.

Unfortunately it seems like the sliders cannot be fixed, seems to be a bug in Firefox.
The selector we need input[type='range']::-moz-range-thumb::beforedoesn't work in Firefox, I'm guessing because it's having issues with a pseudo-selector used in combination with the -moz-range-thumb pseudo-selector.
It gives the following error: Extra pseudo-element 'before'. Ruleset ignored due to bad selector.
I've tried all kinds of permutations of the pseudo-selectors, none of them work.

[stylpen]

Good job with the checkboxes! They look the same but there is a difference in behaviour, though. Not between Firefox and Chrome but between the old version and the new one using the div wrapper: You now have to click exactly at the "knob" (the dark gray thing when it is in off position or blue part when it is on). Previously, clicking anywhere on the entire switch was enough to toggle it. I don't mind that - it's a bit more like switches in real life now!
We could have sliders in Firefox and Chrome (possibly also IE) look the same if we change the design from filling bars to something that doesn't need the input[type='range']::-moz-range-thumb::before selector.
Here, for example, is a more conservative design in FF (left) and Chrome (right):

They look different than in the Android app anyway so why don't we choose a design that all browsers can support?

[stylpen]

Whoops, I didn't mean to close the issue when merging. We still have the slider issue ...

[simonvanderveldt]

Good job with the checkboxes! They look the same but there is a difference in behaviour, though. Not between Firefox and Chrome but between the old version and the new one using the div wrapper: You now have to click exactly at the "knob" (the dark gray thing when it is in off position or blue part when it is on). Previously, clicking anywhere on the entire switch was enough to toggle it. I don't mind that - it's a bit more like switches in real life now!

@stylpen Thx! :)
I think I can fix it so the behaviour will be as it was whilst still working in firefox.
Although the current behaviour is more like a physical toggle I do think the old behaviour was easier, especially when using the webinterface on a mobile/tablet. Give me sec to come up with a fix.