[mythtv] [PATCH] WebFrontend: Fix icon sprite locations in CSS

[Philipp Hahn]

Hello,

Am 06.05.2018 um 19:37 schrieb Bill Meek:
> On 05/05/2018 06:02 AM, Philipp Matthias Hahn wrote:
>> All 'background-position's must be given as *negative* values, as it
>> describes the start position relative to the top-left corner of the HTML
>> element where painting the background images starts.
...
> Tested on Chromium 65.0 and Vivaldi 1.16 fine (also
> on an Android phone/Chrome 66.0.)

Thank you for testing this.

> Does this need testing on other browsers before
> committing?

I think no, as this the CSS sprite trick is quiet common and used by
many sites nowadays: <https://www.w3schools.com/css/css_image_sprites.asp>

The old version already worked somehow, but only as the background
repeats by default: the +27px for the Y-axis workes as there are only
two rows (total height 2*27px): |+27px| = |-27px|.
But for the X-axis is did not work, as there are 4 columns (total width
4*36px), so |-36px| = |3*36px| = |+108px|.
It was clearly showing for the "commflag" and "expired" icons (the used
the same x-offset, so the were the same), but harder for the 2nd row, as
those 3 HD,HD720,HD1080 icons look very similar - only comparing it to
the HTML tool-tip showed that they were all reversed.

Philipp