Spaces:
Running
Running
Create player.css
Browse files- css/player.css +84 -0
css/player.css
ADDED
@@ -0,0 +1,84 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* soundcite - v0.5.1 - 2017-07-10
|
2 |
+
* Copyright (c) 2017 Tyler J. Fisher and Northwestern University Knight Lab
|
3 |
+
*/
|
4 |
+
|
5 |
+
/*PLAYER CHROME*/
|
6 |
+
|
7 |
+
@-webkit-keyframes spin {
|
8 |
+
from { -webkit-transform: rotate(0deg); opacity: 0.4; }
|
9 |
+
50% { -webkit-transform: rotate(180deg); opacity: 1; }
|
10 |
+
to { -webkit-transform: rotate(360deg); opacity: 0.4; }
|
11 |
+
}
|
12 |
+
|
13 |
+
@-moz-keyframes spin {
|
14 |
+
from { -moz-transform: rotate(0deg); opacity: 0.4; }
|
15 |
+
50% { -moz-transform: rotate(180deg); opacity: 1; }
|
16 |
+
to { -moz-transform: rotate(360deg); opacity: 0.4; }
|
17 |
+
}
|
18 |
+
|
19 |
+
@-ms-keyframes spin {
|
20 |
+
from { -ms-transform: rotate(0deg); opacity: 0.4; }
|
21 |
+
50% { -ms-transform: rotate(180deg); opacity: 1; }
|
22 |
+
to { -ms-transform: rotate(360deg); opacity: 0.4; }
|
23 |
+
}
|
24 |
+
|
25 |
+
@-o-keyframes spin {
|
26 |
+
from { -o-transform: rotate(0deg); opacity: 0.4; }
|
27 |
+
50% { -o-transform: rotate(180deg); opacity: 1; }
|
28 |
+
to { -o-transform: rotate(360deg); opacity: 0.4; }
|
29 |
+
}
|
30 |
+
|
31 |
+
@keyframes spin {
|
32 |
+
from { transform: rotate(0deg); opacity: 0.2; }
|
33 |
+
50% { transform: rotate(180deg); opacity: 1; }
|
34 |
+
to { transform: rotate(360deg); opacity: 0.2; }
|
35 |
+
}
|
36 |
+
|
37 |
+
.soundcite-loaded {
|
38 |
+
border-radius: 6px;
|
39 |
+
padding: 0 5px 0 5px;
|
40 |
+
display: inline-block;
|
41 |
+
cursor: pointer;
|
42 |
+
}
|
43 |
+
|
44 |
+
.soundcite-loaded:before {
|
45 |
+
display: inline-block;
|
46 |
+
content: "";
|
47 |
+
vertical-align: -10%;
|
48 |
+
margin-right: 0.25em;
|
49 |
+
}
|
50 |
+
|
51 |
+
.soundcite-loading:before {
|
52 |
+
margin-right: 0.5em;
|
53 |
+
font-size: 0.9em;
|
54 |
+
position: relative;
|
55 |
+
top: -.05em;
|
56 |
+
height: 0.75em;
|
57 |
+
width: 0.75em;
|
58 |
+
border: 2px solid #000;
|
59 |
+
border-right-color: transparent;
|
60 |
+
border-radius: 50%;
|
61 |
+
-webkit-animation: spin 1s linear infinite;
|
62 |
+
-moz-animation: spin 1s linear infinite;
|
63 |
+
-ms-animation: spin 1s linear infinite;
|
64 |
+
-o-animation: spin 1s linear infinite;
|
65 |
+
animation: spin 1s linear infinite;
|
66 |
+
}
|
67 |
+
|
68 |
+
.soundcite-play:before {
|
69 |
+
font-size: 0.9em;
|
70 |
+
position: relative;
|
71 |
+
top: -.05em;
|
72 |
+
border: 0.5em solid transparent;
|
73 |
+
border-left: 0.75em solid black;
|
74 |
+
}
|
75 |
+
|
76 |
+
.soundcite-pause:before {
|
77 |
+
font-size: 0.9em;
|
78 |
+
position: relative;
|
79 |
+
top: -.05em;
|
80 |
+
height: 1em;
|
81 |
+
border-left: .75em double black;
|
82 |
+
border-right: .5em solid transparent;
|
83 |
+
}
|
84 |
+
|