1 /* Player Widget */ |
1 /* Player Widget */ |
2 |
2 |
3 .Ldt-Ctrl { |
3 .Ldt-Ctrl { |
4 font-size: 10px; |
4 font-size: 10px; |
5 background:url('img/player_gradient.png') repeat-x transparent ; |
5 background: url('img/player_gradient.png') repeat-x transparent ; |
6 height: 25px; |
6 height: 25px; |
7 border: 1px solid #b6b8b8; |
7 border: 1px solid #b6b8b8; |
8 position: relative; |
8 position: relative; |
|
9 overflow: hidden; |
9 } |
10 } |
10 |
11 |
11 .Ldt-Ctrl-Left { |
12 .Ldt-Ctrl-Left { |
12 float:left; width: 300px; |
13 float: left; |
13 } |
14 } |
14 |
15 |
15 .Ldt-Ctrl-Right { |
16 .Ldt-Ctrl-Right { |
16 float: right; |
17 float: right; |
17 } |
18 } |
18 |
19 |
19 .Ldt-Ctrl-button { |
20 .Ldt-Ctrl-button { |
20 float: left; |
21 float: left; |
21 width: 30px; height: 25px; |
22 width: 30px; |
22 background: url('img/player-sprites.png'); |
23 height: 25px; |
23 cursor: pointer; |
24 background: url('img/player-sprites.png'); |
|
25 cursor: pointer; |
24 } |
26 } |
25 |
27 |
26 .Ldt-Ctrl-spacer { |
28 .Ldt-Ctrl-spacer { |
27 float: left; width: 1px; height: 25px; background: #b6b8b8; |
29 float: left; |
|
30 width: 1px; |
|
31 height: 25px; |
|
32 background: #b6b8b8; |
28 } |
33 } |
29 |
34 |
30 .Ldt-Ctrl-Play { |
35 .Ldt-Ctrl-Play { |
31 margin: 0 15px; |
36 margin: 100px 0; |
|
37 margin: 0 15px; |
32 } |
38 } |
33 |
39 |
34 .Ldt-Ctrl-Play-PlayState { |
40 .Ldt-Ctrl-Play-PlayState { |
35 background-position: 0 0; |
41 background-position: 0 0; |
36 } |
42 } |
37 |
43 |
38 .Ldt-Ctrl-Play-PlayState:hover { |
44 .Ldt-Ctrl-Play-PlayState:hover { |
39 background-position: 0 -25px; |
45 background-position: 0 -25px; |
40 } |
46 } |
41 |
47 |
42 .Ldt-Ctrl-Play-PlayState:active { |
48 .Ldt-Ctrl-Play-PlayState:active { |
43 background-position: 0 -50px; |
49 background-position: 0 -50px; |
44 } |
50 } |
45 |
51 |
46 .Ldt-Ctrl-Play-PauseState { |
52 .Ldt-Ctrl-Play-PauseState { |
47 background-position: -30px 0; |
53 background-position: -30px 0; |
48 } |
54 } |
49 |
55 |
50 .Ldt-Ctrl-Play-PauseState:hover { |
56 .Ldt-Ctrl-Play-PauseState:hover { |
51 background-position: -30px -25px; |
57 background-position: -30px -25px; |
52 } |
58 } |
53 |
59 |
54 .Ldt-Ctrl-Play-PauseState:active { |
60 .Ldt-Ctrl-Play-PauseState:active { |
55 background-position: -30px -50px; |
61 background-position: -30px -50px; |
56 } |
62 } |
57 |
63 |
58 .Ldt-Ctrl-Annotate { |
64 .Ldt-Ctrl-Annotate { |
59 margin: 0 2px; |
65 margin: 0 2px; |
60 background-position: -60px 0; |
66 background-position: -60px 0; |
61 } |
67 } |
62 |
68 |
63 .Ldt-Ctrl-Annotate:hover { |
69 .Ldt-Ctrl-Annotate:hover { |
64 background-position: -60px -25px; |
70 background-position: -60px -25px; |
65 } |
71 } |
66 |
72 |
67 .Ldt-Ctrl-Annotate:active { |
73 .Ldt-Ctrl-Annotate:active { |
68 background-position: -60px -50px; |
74 background-position: -60px -50px; |
69 } |
75 } |
70 |
76 |
71 .Ldt-Ctrl-SearchBtn { |
77 .Ldt-Ctrl-SearchBtn { |
72 margin: 0 2px; |
78 margin: 0 2px; |
73 background-position: -90px 0; |
79 background-position: -90px 0; |
74 } |
80 } |
75 |
81 |
76 .Ldt-Ctrl-SearchBtn:hover { |
82 .Ldt-Ctrl-SearchBtn:hover { |
77 background-position: -90px -25px; |
83 background-position: -90px -25px; |
78 } |
84 } |
79 |
85 |
80 .Ldt-Ctrl-SearchBtn:active { |
86 .Ldt-Ctrl-SearchBtn:active { |
81 background-position: -90px -50px; |
87 background-position: -90px -50px; |
82 } |
88 } |
83 |
89 |
84 .Ldt-Ctrl-Search { |
90 .Ldt-Ctrl-Search { |
85 width: 0; float: left; overflow: hidden; |
91 width: 0; float: left; overflow: hidden; |
86 } |
92 } |
87 |
93 |
88 input.Ldt-Ctrl-SearchInput { |
94 input.Ldt-Ctrl-SearchInput { |
89 width: 145px; height: 20px; margin: 2px; padding: 3px; |
95 -moz-box-sizing: border-box; |
90 border: 1px solid #8080a0; border-radius: 3px; font-size: 13px; |
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; |
91 } |
103 } |
92 |
104 |
93 .Ldt-Ctrl-Time { |
105 .Ldt-Ctrl-Time { |
94 float: left; |
106 float: left; |
95 margin: 5px; |
107 margin: 5px; |
96 font-size: 12px; |
108 font-size: 12px; |
97 font-family: Arial, Verdana, sans-serif; |
109 font-family: Arial, Verdana, sans-serif; |
98 } |
110 } |
99 |
111 |
100 .Ldt-Ctrl-Time-Elapsed { |
112 .Ldt-Ctrl-Time-Elapsed { |
101 float: left; |
113 float: left; |
102 color: #4a4a4a; |
114 color: #4a4a4a; |
103 } |
115 } |
104 |
116 |
105 .Ldt-Ctrl-Time-Separator { |
117 .Ldt-Ctrl-Time-Separator { |
106 margin: 0 4px; |
118 margin: 0 4px; |
107 float: left; |
119 float: left; |
108 } |
120 } |
109 |
121 |
110 .Ldt-Ctrl-Time-Total { |
122 .Ldt-Ctrl-Time-Total { |
111 float: left; |
123 float: left; |
112 color: #b2b2b2; |
124 color: #b2b2b2; |
113 } |
125 } |
114 |
126 |
115 .Ldt-Ctrl-Sound { |
127 .Ldt-Ctrl-Sound { |
116 margin: 0 2px; |
128 margin: 0 2px; |
117 } |
129 } |
118 |
130 |
119 .Ldt-Ctrl-Sound-Full { |
131 .Ldt-Ctrl-Sound-Full { |
120 background-position: -120px 0; |
132 background-position: -120px 0; |
121 } |
133 } |
122 |
134 |
123 .Ldt-Ctrl-Sound-Full:hover { |
135 .Ldt-Ctrl-Sound-Full:hover { |
124 background-position: -120px -25px; |
136 background-position: -120px -25px; |
125 } |
137 } |
126 |
138 |
127 .Ldt-Ctrl-Sound-Full:active { |
139 .Ldt-Ctrl-Sound-Full:active { |
128 background-position: -120px -50px; |
140 background-position: -120px -50px; |
129 } |
141 } |
130 |
142 |
131 .Ldt-Ctrl-Sound-Mute { |
143 .Ldt-Ctrl-Sound-Mute { |
132 background-position: -150px 0; |
144 background-position: -150px 0; |
133 } |
145 } |
134 |
146 |
135 .Ldt-Ctrl-Sound-Mute:hover { |
147 .Ldt-Ctrl-Sound-Mute:hover { |
136 background-position: -150px -25px; |
148 background-position: -150px -25px; |
137 } |
149 } |
138 |
150 |
139 .Ldt-Ctrl-Sound-Mute:active { |
151 .Ldt-Ctrl-Sound-Mute:active { |
140 background-position: -150px -50px; |
152 background-position: -150px -50px; |
141 } |
153 } |
142 |
154 |
143 .Ldt-Ctrl-Sound-Half { |
155 .Ldt-Ctrl-Sound-Half { |
144 background-position: -180px 0; |
156 background-position: -180px 0; |
145 } |
157 } |
146 |
158 |
147 .Ldt-Ctrl-Sound-Half:hover { |
159 .Ldt-Ctrl-Sound-Half:hover { |
148 background-position: -180px -25px; |
160 background-position: -180px -25px; |
149 } |
161 } |
150 |
162 |
151 .Ldt-Ctrl-Sound-Half:active { |
163 .Ldt-Ctrl-Sound-Half:active { |
152 background-position: -180px -50px; |
164 background-position: -180px -50px; |
153 } |
165 } |
154 |
166 |
155 .Ldt-Ctrl-Volume-Control { |
167 .Ldt-Ctrl-Volume-Control { |
156 display: none; |
168 display: none; |
157 position: absolute; |
169 position: absolute; |
158 background:url('img/player_gradient.png') repeat-x transparent ; |
170 background: url('img/player_gradient.png') repeat-x transparent ; |
159 height: 25px; |
171 height: 25px; |
160 width: 100px; top: 25px; right: -1px; z-index: 100; |
172 width: 100px; |
161 padding: 0 2px; |
173 top: 25px; |
162 border: 1px solid #b6b8b8; |
174 right: -1px; |
163 } |
175 z-index: 100; |
164 |
176 padding: 0 2px; |
165 .Ldt-Ctrl-Volume-Bar { |
177 border: 1px solid #b6b8b8; |
166 height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px; |
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; |
167 } |
186 } |
168 |
187 |
169 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
188 .Ldt-Ctrl-Volume-Control .ui-slider-handle { |
170 width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px; |
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; |
171 cursor: pointer; |
196 cursor: pointer; |
172 } |
197 } |
173 |
198 |
174 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
199 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle { |
175 background: #F7268E; |
200 background: #F7268E; |
176 } |
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 } |