|
1 /* Player Widget */ |
|
2 |
|
3 .Ldt-Ctrl { |
|
4 font-size: 10px; |
|
5 background: url('img/player_gradient.png') repeat-x transparent ; |
|
6 height: 25px; |
|
7 border: 1px solid #b6b8b8; |
|
8 position: relative; |
|
9 overflow: hidden; |
|
10 } |
|
11 |
|
12 .Ldt-Ctrl-Left { |
|
13 float: left; |
|
14 } |
|
15 |
|
16 .Ldt-Ctrl-Right { |
|
17 float: right; |
|
18 } |
|
19 |
|
20 .Ldt-Ctrl-button { |
|
21 float: left; |
|
22 width: 30px; |
|
23 height: 25px; |
|
24 background: url('img/player-sprites.png'); |
|
25 cursor: pointer; |
|
26 } |
|
27 |
|
28 .Ldt-Ctrl-spacer { |
|
29 float: left; |
|
30 width: 1px; |
|
31 height: 25px; |
|
32 background: #b6b8b8; |
|
33 } |
|
34 |
|
35 .Ldt-Ctrl-Play { |
|
36 margin: 100px 0; |
|
37 margin: 0 15px; |
|
38 } |
|
39 |
|
40 .Ldt-Ctrl-Play-PlayState { |
|
41 background-position: 0 0; |
|
42 } |
|
43 |
|
44 .Ldt-Ctrl-Play-PlayState:hover { |
|
45 background-position: 0 -25px; |
|
46 } |
|
47 |
|
48 .Ldt-Ctrl-Play-PlayState:active { |
|
49 background-position: 0 -50px; |
|
50 } |
|
51 |
|
52 .Ldt-Ctrl-Play-PauseState { |
|
53 background-position: -30px 0; |
|
54 } |
|
55 |
|
56 .Ldt-Ctrl-Play-PauseState:hover { |
|
57 background-position: -30px -25px; |
|
58 } |
|
59 |
|
60 .Ldt-Ctrl-Play-PauseState:active { |
|
61 background-position: -30px -50px; |
|
62 } |
|
63 |
|
64 .Ldt-Ctrl-Annotate { |
|
65 margin: 0 2px; |
|
66 background-position: -60px 0; |
|
67 } |
|
68 |
|
69 .Ldt-Ctrl-Annotate:hover { |
|
70 background-position: -60px -25px; |
|
71 } |
|
72 |
|
73 .Ldt-Ctrl-Annotate:active { |
|
74 background-position: -60px -50px; |
|
75 } |
|
76 |
|
77 .Ldt-Ctrl-SearchBtn { |
|
78 margin: 0 2px; |
|
79 background-position: -90px 0; |
|
80 } |
|
81 |
|
82 .Ldt-Ctrl-SearchBtn:hover { |
|
83 background-position: -90px -25px; |
|
84 } |
|
85 |
|
86 .Ldt-Ctrl-SearchBtn:active { |
|
87 background-position: -90px -50px; |
|
88 } |
|
89 |
|
90 .Ldt-Ctrl-Search { |
|
91 width: 0; float: left; overflow: hidden; |
|
92 } |
|
93 |
|
94 input.Ldt-Ctrl-SearchInput { |
|
95 -moz-box-sizing: border-box; |
|
96 box-sizing: border-box; |
|
97 width: 145px; |
|
98 height: 20px; |
|
99 margin: 2px; |
|
100 padding: 3px; |
|
101 border: 1px solid #8080a0; |
|
102 border-radius: 3px; |
|
103 font-size: 13px; |
|
104 } |
|
105 |
|
106 .Ldt-Ctrl-Time { |
|
107 float: left; |
|
108 margin: 5px; |
|
109 font-size: 12px; |
|
110 font-family: Arial, Verdana, sans-serif; |
|
111 } |
|
112 |
|
113 .Ldt-Ctrl-Time-Elapsed { |
|
114 float: left; |
|
115 color: #4a4a4a; |
|
116 } |
|
117 |
|
118 .Ldt-Ctrl-Time-Separator { |
|
119 margin: 0 4px; |
|
120 float: left; |
|
121 } |
|
122 |
|
123 .Ldt-Ctrl-Time-Total { |
|
124 float: left; |
|
125 color: #b2b2b2; |
|
126 } |
|
127 |
|
128 .Ldt-Ctrl-Sound { |
|
129 margin: 0 2px; |
|
130 } |
|
131 |
|
132 .Ldt-Ctrl-Sound-Full { |
|
133 background-position: -120px 0; |
|
134 } |
|
135 |
|
136 .Ldt-Ctrl-Sound-Full:hover { |
|
137 background-position: -120px -25px; |
|
138 } |
|
139 |
|
140 .Ldt-Ctrl-Sound-Full:active { |
|
141 background-position: -120px -50px; |
|
142 } |
|
143 |
|
144 .Ldt-Ctrl-Sound-Mute { |
|
145 background-position: -150px 0; |
|
146 } |
|
147 |
|
148 .Ldt-Ctrl-Sound-Mute:hover { |
|
149 background-position: -150px -25px; |
|
150 } |
|
151 |
|
152 .Ldt-Ctrl-Sound-Mute:active { |
|
153 background-position: -150px -50px; |
|
154 } |
|
155 |
|
156 .Ldt-Ctrl-Sound-Half { |
|
157 background-position: -180px 0; |
|
158 } |
|
159 |
|
160 .Ldt-Ctrl-Sound-Half:hover { |
|
161 background-position: -180px -25px; |
|
162 } |
|
163 |
|
164 .Ldt-Ctrl-Sound-Half:active { |
|
165 background-position: -180px -50px; |
|
166 } |
|
167 |
|
168 .Ldt-Ctrl-Volume-Control { |
|
169 display: none; |
|
170 position: absolute; |
|
171 background: url('img/player_gradient.png') repeat-x transparent ; |
|
172 height: 25px; |
|
173 width: 100px; |
|
174 top: 25px; |
|
175 right: -1px; |
|
176 z-index: 100; |
|
177 padding: 0 2px; |
|
178 border: 1px solid #b6b8b8; |
|
179 } |
|
180 |
|
181 .Ldt-Ctrl-Volume-Bar { |
|
182 height: 5px; |
|
183 margin: 9px 3px 0; |
|
184 background: #cccccc; |
|
185 border: 1px solid #999999; |
|
186 border-radius: 2px; |
|
187 } |
|
188 |
|
189 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
|
190 width: 6px; |
|
191 height: 19px; |
|
192 background: #a8a8a8; |
|
193 border: 1px solid #999999; |
|
194 border-radius: 2px; |
|
195 top: -8px; |
|
196 margin-left: -4px; |
|
197 cursor: pointer; |
|
198 } |
|
199 |
|
200 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
|
201 background: #F7268E; |
|
202 } |
|
203 |
|
204 /* quiz */ |
|
205 |
|
206 .Ldt-Ctrl-Quiz-Enable button, .Ldt-Ctrl-Quiz-Create button, .Ldt-Ctrl-Quiz-Disactivated button, .Ldt-Ctrl-Fullscreen-Button{ |
|
207 border: none; |
|
208 background: transparent; |
|
209 } |
|
210 |
|
211 .Ldt-Ctrl-Quiz-Enable { |
|
212 background-image: url("img/quiz_off.svg"); |
|
213 float: left; |
|
214 height: 22px; |
|
215 width: 22px; |
|
216 background-repeat: no-repeat; |
|
217 } |
|
218 .Ldt-Ctrl-Quiz-Enable.Ldt-Ctrl-Quiz-Toggle-Active { |
|
219 background-image: url("img/quiz_on.svg"); |
|
220 } |
|
221 |
|
222 .Ldt-Ctrl-Quiz-Create { |
|
223 background-image: url("img/quiz_add_question.svg"); |
|
224 float: left; |
|
225 height: 23px; |
|
226 width: 26px; |
|
227 background-repeat: no-repeat; |
|
228 margin-left: 4px; |
|
229 margin-top: 0px; |
|
230 display: none; |
|
231 } |
|
232 .Ldt-Ctrl-Quiz-Create.Ldt-Ctrl-Quiz-Toggle-Active { |
|
233 display: inline-block; |
|
234 } |
|
235 |
|
236 .Ldt-Ctrl-Fullscreen-Button { |
|
237 margin-top: 3px; |
|
238 } |
|
239 |
|
240 .Ldt-Ctrl-Fullscreen-Button { |
|
241 float: left; |
|
242 background-image: url("img/fullscreen.svg"); |
|
243 background-position: right; |
|
244 margin-right: 6px; |
|
245 margin-top: 1px; |
|
246 height: 22px; |
|
247 width: 22px; |
|
248 border: none; |
|
249 } |