For the volume bar and seek bar, we use an input element of type
"range".
These elements are composed of two main parts: a "track", which is the
horizontal bar, and the "thumb", which is the knob which slides along
that bar.
In order to style the track across browsers (cough, IE 11), we need to
do something a bit tricky. Styling the track is a nightmare,
especially if you want the thumb to be larger. On IE 11, this gets
clipped at the track size. So a tiny track with a large thumb is not
easily achieved. It can be done, but the techniques for it are
incompatible with the gradient background we want to apply to it.
The solution is to put the input inside a div container, and apply the
background gradient styles to the container. The container will act
as a visible, virtual track, inside which is contained a larger,
invisible track, in which is contained a visible thumb. This way, the
thumb is not larger than the actual track (for IE 11's sake), but can
be larger than the virtual track. And since we are still using a
semantically correct input element, the element is inherently
accessible.
Fixes#1703
Change-Id: I80e1c18d56e0d1455efd26310b699561bf2f41b0
- Make shaka-overlay-parent a mixin instead of an actual class
- Fox maximum stylability, it should be the job of the styles to
position and overlay objects without JS code declaring that it be
so.
- The "seek to live" effect of clicking the current time no longer
depends on the seek bar being used
- The shaka-transparent class is not needed. The controls are now
set to be opaque based on an attribute.
- Use an attribute for casting state as well.
- Remove redundant opacity transition on play button. It is already
on the controls overlay as a whole.
- Make layout more generic, which allows us to remove some explicit
positioning and browser-specific layout hacks.
- Rename user-select(), whose value is always the default of "none",
to unselectable().
- Remove unnecessary or redundant styles.
- Apply the same default styles to all control elements, whether
buttons, divs, or inputs.
- Make overlay-parent() and overlay-child() more resilient with
settings to fill space by default.
- Consolidate the setting of displayed & hidden in JS.
Pre-work for #1703, #1709 (IE style fixes)
Makes progress on b/116651454 (hard-coded offsets)
Change-Id: I7ea579429979afa98f5b2c54f68114312c4f508d
This doesn't start refactoring, but does move a couple of lines around
to group them in clearer ways. It also adds lots of comments
explaining what things are, what they are for, and where they appear.
Pre-work for #1703, #1709, and b/116651454
Change-Id: I77a76c569e4e426b040eaf55f900baa38414fc0c
This doesn't change any styles. It just splits related styles into
several separate files, so that things are easier to find.
Pre-work for #1703, #1709, and b/116651454
Change-Id: Icd3330a70ca6c8ff313991c127f8036238cae813
Joey Parrish