/
range_elements.less
155 lines (126 loc) · 4.74 KB
/
range_elements.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/** @license
* Shaka Player
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/* Special styles for input elements with 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. */
/* These control the color and size of the various pieces. */
@thumb-color: white;
@track-default-color: white;
@thumb-size: 12px;
@track-height: 4px;
/* The range container is the div that contains a range element.
* This div will act as a virtual track to allow us to style the track space.
* An actual track still exists inside the range element, but is transparent. */
.range-container() {
/* This contains an input element which overlays it. */
.overlay-parent();
/* Vertical margins to occupy the same space as the thumb. */
margin: (@thumb-size - @track-height)/2 6px;
/* Smaller height to contain the background for the virtual track. */
height: @track-height;
/* Rounded ends on the virtual track. */
border-radius: @track-height;
/* Until we set a gradient background in JS, this will be the track color. */
background: @track-default-color;
}
/* The "track" is the pseudo-element inside the range element which represents
* the horizontal bar on which the "thumb" (knob) moves. */
.track() {
/* The track should fill the range element. */
width: 100%;
/* Since range elements are special input elements, they must reflect user
* interaction, so when the user hovers over the range element, the cursor
* must be a pointer. */
cursor: pointer;
/* The track should be tall enough to contain the thumb without clipping it.
* It is very tricky to make the thumb show outside the track on IE 11, and
* it is incompatible with our background gradients. */
height: @thumb-size;
/* Some browsers have default backgrounds, colors, or borders for this.
* Hide them all. */
background: transparent;
color: transparent;
border: none;
}
/* The "thumb" is the pseudo-element inside the range element which represents
* the knob which moves along the "track" (bar). */
.thumb() {
/* Remove default styles on WebKit-based and Blink-based browsers. */
-webkit-appearance: none;
/* On some browsers (IE 11), the thumb has a border, which affects the size.
* Disable it. */
border: none;
/* Make the thumb a circle and set its diameter. */
border-radius: @thumb-size;
height: @thumb-size;
width: @thumb-size;
/* Give it the desired color. */
background: @thumb-color;
}
/* This is the actual range input element. */
.range-element() {
/* Remove any browser styling of the range element. */
-webkit-appearance: none;
background: transparent;
/* Overlay and fill the container div. */
.overlay-child();
/* The range element should be big enough to contain the thumb without
* clipping it. It is very tricky to make the thumb show outside the track
* on IE 11. */
height: @thumb-size;
/* Position the top of the range element so that it is centered on the
* container. Note that the container is actually smaller than the thumb. */
top: (@track-height - @thumb-size) / 2;
/* Make sure clicking at the very top of the bar still takes effect and is not
* confused with clicking the video to play/pause it. */
z-index: 1;
/* Pseudo-elements for Blink-based or WebKit-based browsers. */
&::-webkit-slider-runnable-track {
.track();
}
&::-webkit-slider-thumb {
.thumb();
}
/* Pseudo-elements for Gecko-based browsers. */
&::-moz-range-track {
.track();
}
&::-moz-range-thumb {
.thumb();
}
}
.shaka-range-container {
.range-container();
}
.shaka-volume-bar-container {
width: 100px;
}
.shaka-range-element {
.range-element();
}
.shaka-seek-bar-container {
.show-when-controls-shown();
}
.shaka-ad-markers {
.overlay-child();
}