Skip to content

Commit 01da533

Browse files
author
Hozefa
committed
removing media & image files from root folder
1 parent cd1eb88 commit 01da533

10 files changed

+316
-569
lines changed

‎docs/css/px-video.css

+314
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
/* utilities */
2+
.pull-left {
3+
float: left;
4+
}
5+
.sr-only {
6+
position: absolute !important;
7+
clip: rect(1px, 1px, 1px, 1px);
8+
padding: 0 !important;
9+
border: 0 !important;
10+
height: 1px !important;
11+
width: 1px !important;
12+
overflow: hidden;
13+
}
14+
.hide {
15+
display: none;
16+
}
17+
.show-inline {
18+
display: inline-block;
19+
}
20+
21+
/* containers */
22+
.px-video-img-captions-container * {
23+
box-sizing: border-box;
24+
}
25+
26+
.px-video-img-captions-container {
27+
position: relative;
28+
}
29+
30+
/* progress indicator */
31+
.px-video-progress {
32+
width: 100%;
33+
height: 10px;
34+
}
35+
.px-video-progress[value] {
36+
/* Reset the default appearance */
37+
-webkit-appearance: none;
38+
border: none;
39+
}
40+
.px-video-progress[value]::-webkit-progress-bar {
41+
background-color: #e6e6e6;
42+
}
43+
.px-video-progress[value]::-webkit-progress-value {
44+
background-color: #009cdf;
45+
}
46+
47+
/* time */
48+
.px-video-time {
49+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
50+
float: right;
51+
margin-top: 2px;
52+
font-size: 14px;
53+
}
54+
55+
/* caption area */
56+
.px-video-captions {
57+
position: absolute;
58+
top: 0;
59+
left: 0;
60+
width: 100%;
61+
padding: 0.5em;
62+
min-height: 2.5em;
63+
background-color: #000;
64+
color: #fff;
65+
font-size: 1.1em;
66+
text-align: center;
67+
opacity: 0.75;
68+
}
69+
70+
/* buttons */
71+
.px-video-controls button {
72+
border: 1px #fff solid;
73+
background: transparent;
74+
padding: 0;
75+
margin: 0 5px;
76+
width: 25px;
77+
height: 20px;
78+
overflow: hidden;
79+
background: no-repeat url("../images/px-video-sprite.png");
80+
}
81+
.px-video-controls button:focus {
82+
border: 1px #999 dotted;
83+
outline: none;
84+
}
85+
.px-video-controls button {
86+
cursor: pointer;
87+
}
88+
89+
/* restart button */
90+
.px-video-controls button.px-video-restart {
91+
background-position: -6px -333px;
92+
margin-left: 0;
93+
}
94+
.px-video-controls button.px-video-restart:hover,
95+
.px-video-controls button.px-video-restart:focus {
96+
background-position: -6px -297px;
97+
}
98+
99+
/* rewind button */
100+
.px-video-controls button.px-video-rewind {
101+
background-position: -6px -189px;
102+
}
103+
.px-video-controls button.px-video-rewind:hover,
104+
.px-video-controls button.px-video-rewind:focus {
105+
background-position: -6px -153px;
106+
}
107+
108+
/* play button */
109+
.px-video-controls button.px-video-play {
110+
background-position: -6px -45px;
111+
}
112+
.px-video-controls button.px-video-play:hover,
113+
.px-video-controls button.px-video-play:focus {
114+
background-position: -6px -9px;
115+
}
116+
117+
/* pause button */
118+
.px-video-controls button.px-video-pause {
119+
background-position: -6px -117px;
120+
}
121+
.px-video-controls button.px-video-pause:hover,
122+
.px-video-controls button.px-video-pause:focus {
123+
background-position: -6px -81px;
124+
}
125+
126+
/* forward button */
127+
.px-video-controls button.px-video-forward {
128+
background-position: -6px -261px;
129+
}
130+
.px-video-controls button.px-video-forward:hover,
131+
.px-video-controls button.px-video-forward:focus {
132+
background-position: -6px -225px;
133+
}
134+
135+
.px-video-fullscreen-btn-container label {
136+
display: inline-block;
137+
width: 25px;
138+
height: 20px;
139+
margin-left: 10px;
140+
background: no-repeat url("../images/px-video-sprite.png");
141+
background-position: -6px -907px;
142+
}
143+
.px-video-fullscreen-btn-container input[type="checkbox"]:focus + label {
144+
outline: 1px #999 dotted;
145+
background-position: -6px -943px;
146+
}
147+
.px-video-fullscreen-btn-container input[type="checkbox"]:hover + label {
148+
background-position: -6px -943px;
149+
cursor: pointer;
150+
}
151+
.px-video-fullscreen-btn-container input[type="checkbox"]:focus + label {
152+
outline: 1px #999 dotted;
153+
background-position: -6px -943px;
154+
}
155+
.px-video-fullscreen-btn-container input[type="checkbox"]:checked + label {
156+
background-position: -6px -979px;
157+
}
158+
.px-video-fullscreen-btn-container
159+
input[type="checkbox"]:checked:hover
160+
+ label {
161+
background-position: -6px -1015px;
162+
}
163+
164+
/* captions button */
165+
.px-video-captions-btn-container label {
166+
display: inline-block;
167+
width: 25px;
168+
height: 20px;
169+
margin-left: 10px;
170+
background: no-repeat url("../images/px-video-sprite.png");
171+
background-position: -6px -835px;
172+
}
173+
.px-video-captions-btn-container input[type="checkbox"]:focus + label {
174+
outline: 1px #999 dotted;
175+
background-position: -6px -799px;
176+
}
177+
.px-video-captions-btn-container input[type="checkbox"]:hover + label {
178+
background-position: -6px -799px;
179+
cursor: pointer;
180+
}
181+
.px-video-captions-btn-container input[type="checkbox"]:focus + label {
182+
outline: 1px #999 dotted;
183+
background-position: -6px -799px;
184+
}
185+
.px-video-captions-btn-container input[type="checkbox"]:checked + label {
186+
background-position: -6px -871px;
187+
}
188+
189+
/* mute button */
190+
.px-video-mute-btn-container label {
191+
display: inline-block;
192+
width: 25px;
193+
height: 20px;
194+
margin-left: 240px;
195+
margin-top: 2px;
196+
background: no-repeat url("../images/px-video-sprite.png");
197+
background-position: -6px -476px;
198+
}
199+
.px-video-mute-btn-container input[type="checkbox"]:focus + label {
200+
outline: 1px #999 dotted;
201+
background-position: -6px -440px;
202+
}
203+
.px-video-mute-btn-container input[type="checkbox"]:hover + label {
204+
background-position: -6px -440px;
205+
cursor: pointer;
206+
}
207+
.px-video-mute-btn-container input[type="checkbox"]:focus + label {
208+
outline: 1px #999 dotted;
209+
background-position: -6px -440px;
210+
}
211+
/* checked state of mute button */
212+
.px-video-mute-btn-container input[type="checkbox"]:checked + label {
213+
background-position: -6px -692px;
214+
}
215+
.px-video-mute-btn-container input[type="checkbox"]:checked:hover + label,
216+
.px-video-mute-btn-container input[type="checkbox"]:checked:focus + label {
217+
background-position: -6px -656px;
218+
}
219+
220+
/* volume range input */
221+
.px-video-controls input[type="range"] {
222+
-webkit-appearance: none;
223+
height: 6px;
224+
width: 100px;
225+
margin-top: 8px;
226+
background-color: #e6e6e6;
227+
outline: none;
228+
}
229+
.px-video-controls input[type="range"]:focus::-webkit-slider-thumb {
230+
outline: 1px #999 dotted;
231+
}
232+
.px-video-controls input[type="range"]::-moz-range-track {
233+
-moz-appearance: none;
234+
height: 6px;
235+
background-color: #e6e6e6;
236+
border: none;
237+
}
238+
.px-video-controls input[type="range"]::-webkit-slider-thumb {
239+
-webkit-appearance: none !important;
240+
height: 10px;
241+
width: 6px;
242+
background-color: #666;
243+
}
244+
.px-video-controls input[type="range"]::-moz-range-thumb {
245+
height: 12px;
246+
width: 8px;
247+
background-color: #666;
248+
}
249+
/* fixing display for IE10+ */
250+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
251+
.px-video-controls input[type="range"] {
252+
position: relative;
253+
padding: 0;
254+
height: 8px;
255+
top: -3px;
256+
}
257+
.px-video-time {
258+
margin-top: 4px;
259+
}
260+
.px-video-captions {
261+
padding: 8px;
262+
min-height: 36px;
263+
}
264+
}
265+
266+
.px-video-container.fullscreen {
267+
position: fixed;
268+
top: 0;
269+
bottom: 0;
270+
left: 0;
271+
right: 0;
272+
-webkit-cursor-visibility: auto-hide;
273+
}
274+
275+
/* Fullscreen styles */
276+
277+
/* style applied through js */
278+
.px-video-controls.js-fullscreen-controls {
279+
position: absolute;
280+
bottom: 0;
281+
width: 100%;
282+
z-index: 940;
283+
background: white;
284+
}
285+
286+
.px-video-captions.js-fullscreen-captions {
287+
min-height: 3.5em;
288+
font-size: 2.5em;
289+
padding: 1em;
290+
}
291+
292+
.px-timetip {
293+
padding: 5px 10px;
294+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
295+
font-size: 14px;
296+
background: rgba(0, 0, 0, 0.83);
297+
border-radius: 3px;
298+
color: #fff;
299+
width: auto;
300+
}
301+
.px-timetip:after {
302+
top: 100%;
303+
left: 50%;
304+
border: solid transparent;
305+
content: " ";
306+
height: 0;
307+
width: 0;
308+
position: absolute;
309+
pointer-events: none;
310+
border-color: rgba(43, 43, 43, 0);
311+
border-top-color: #2b2b2b;
312+
border-width: 10px;
313+
margin-left: -10px;
314+
}

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1" />
1010

1111
<!-- PX-VIDEO CSS -->
12-
<link rel="stylesheet" href="https://github.com/paypal/accessible-html5-video-player/blob/master/css/px-video.css" />
12+
<link rel="stylesheet" href="./css/px-video.css" />
1313

1414
<style>
1515
/*** for demo only ***/

0 commit comments

Comments
 (0)