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 width: 145px; |
|
97 height: 20px; |
|
98 margin: 2px; |
|
99 padding: 3px; |
|
100 border: 1px solid #8080a0; |
|
101 border-radius: 3px; |
|
102 font-size: 13px; |
|
103 } |
|
104 |
|
105 .Ldt-Ctrl-Time { |
|
106 float: left; |
|
107 margin: 5px; |
|
108 font-size: 12px; |
|
109 font-family: Arial, Verdana, sans-serif; |
|
110 } |
|
111 |
|
112 .Ldt-Ctrl-Time-Elapsed { |
|
113 float: left; |
|
114 color: #4a4a4a; |
|
115 } |
|
116 |
|
117 .Ldt-Ctrl-Time-Separator { |
|
118 margin: 0 4px; |
|
119 float: left; |
|
120 } |
|
121 |
|
122 .Ldt-Ctrl-Time-Total { |
|
123 float: left; |
|
124 color: #b2b2b2; |
|
125 } |
|
126 |
|
127 .Ldt-Ctrl-Sound { |
|
128 margin: 0 2px; |
|
129 } |
|
130 |
|
131 .Ldt-Ctrl-Sound-Full { |
|
132 background-position: -120px 0; |
|
133 } |
|
134 |
|
135 .Ldt-Ctrl-Sound-Full:hover { |
|
136 background-position: -120px -25px; |
|
137 } |
|
138 |
|
139 .Ldt-Ctrl-Sound-Full:active { |
|
140 background-position: -120px -50px; |
|
141 } |
|
142 |
|
143 .Ldt-Ctrl-Sound-Mute { |
|
144 background-position: -150px 0; |
|
145 } |
|
146 |
|
147 .Ldt-Ctrl-Sound-Mute:hover { |
|
148 background-position: -150px -25px; |
|
149 } |
|
150 |
|
151 .Ldt-Ctrl-Sound-Mute:active { |
|
152 background-position: -150px -50px; |
|
153 } |
|
154 |
|
155 .Ldt-Ctrl-Sound-Half { |
|
156 background-position: -180px 0; |
|
157 } |
|
158 |
|
159 .Ldt-Ctrl-Sound-Half:hover { |
|
160 background-position: -180px -25px; |
|
161 } |
|
162 |
|
163 .Ldt-Ctrl-Sound-Half:active { |
|
164 background-position: -180px -50px; |
|
165 } |
|
166 |
|
167 .Ldt-Ctrl-Volume-Control { |
|
168 display: none; |
|
169 position: absolute; |
|
170 background: url('img/player_gradient.png') repeat-x transparent ; |
|
171 height: 25px; |
|
172 width: 100px; |
|
173 top: 25px; |
|
174 right: -1px; |
|
175 z-index: 100; |
|
176 padding: 0 2px; |
|
177 border: 1px solid #b6b8b8; |
|
178 } |
|
179 |
|
180 .Ldt-Ctrl-Volume-Bar { |
|
181 height: 5px; |
|
182 margin: 9px 3px 0; |
|
183 background: #cccccc; |
|
184 border: 1px solid #999999; |
|
185 border-radius: 2px; |
|
186 } |
|
187 |
|
188 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
|
189 width: 6px; |
|
190 height: 19px; |
|
191 background: #a8a8a8; |
|
192 border: 1px solid #999999; |
|
193 border-radius: 2px; |
|
194 top: -8px; |
|
195 margin-left: -4px; |
|
196 cursor: pointer; |
|
197 } |
|
198 |
|
199 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
|
200 background: #F7268E; |
|
201 } |
|
202 |
|
203 /* quiz */ |
|
204 |
|
205 .Ldt-Ctrl-Quiz-Enable button, .Ldt-Ctrl-Quiz-Create button, .Ldt-Ctrl-Quiz-Disactivated button, .Ldt-Ctrl-Fullscreen-Button{ |
|
206 border: none; |
|
207 background: transparent; |
|
208 } |
|
209 |
|
210 .Ldt-Ctrl-Quiz-Enable { |
|
211 background-image: url("img/quiz_off.svg"); |
|
212 float: left; |
|
213 height: 22px; |
|
214 width: 22px; |
|
215 background-repeat: no-repeat; |
|
216 } |
|
217 .Ldt-Ctrl-Quiz-Enable.Ldt-Ctrl-Quiz-Toggle-Active { |
|
218 background-image: url("img/quiz_on.svg"); |
|
219 } |
|
220 |
|
221 .Ldt-Ctrl-Quiz-Create { |
|
222 background-image: url("img/quiz_add_question.svg"); |
|
223 float: left; |
|
224 height: 23px; |
|
225 width: 26px; |
|
226 background-repeat: no-repeat; |
|
227 margin-left: 4px; |
|
228 margin-top: 0px; |
|
229 display: none; |
|
230 } |
|
231 .Ldt-Ctrl-Quiz-Create.Ldt-Ctrl-Quiz-Toggle-Active { |
|
232 display: inline-block; |
|
233 } |
|
234 |
|
235 .Ldt-Ctrl-Fullscreen-Button { |
|
236 margin-top: 3px; |
|
237 } |
|
238 |
|
239 .Ldt-Ctrl-Fullscreen-Button { |
|
240 float: left; |
|
241 background-image: url("img/fullscreen.svg"); |
|
242 background-position: right; |
|
243 margin-right: 6px; |
|
244 margin-top: 1px; |
|
245 height: 22px; |
|
246 width: 22px; |
|
247 border: none; |
|
248 } |
|