1 | .prism-previewer,
|
2 | .prism-previewer:before,
|
3 | .prism-previewer:after {
|
4 | position: absolute;
|
5 | pointer-events: none;
|
6 | }
|
7 | .prism-previewer,
|
8 | .prism-previewer:after {
|
9 | left: 50%;
|
10 | }
|
11 | .prism-previewer {
|
12 | margin-top: -48px;
|
13 | width: 32px;
|
14 | height: 32px;
|
15 | margin-left: -16px;
|
16 |
|
17 | opacity: 0;
|
18 | -webkit-transition: opacity .25s;
|
19 | -o-transition: opacity .25s;
|
20 | transition: opacity .25s;
|
21 | }
|
22 | .prism-previewer.flipped {
|
23 | margin-top: 0;
|
24 | margin-bottom: -48px;
|
25 | }
|
26 | .prism-previewer:before,
|
27 | .prism-previewer:after {
|
28 | content: '';
|
29 | position: absolute;
|
30 | pointer-events: none;
|
31 | }
|
32 | .prism-previewer:before {
|
33 | top: -5px;
|
34 | right: -5px;
|
35 | left: -5px;
|
36 | bottom: -5px;
|
37 | border-radius: 10px;
|
38 | border: 5px solid #fff;
|
39 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
|
40 | }
|
41 | .prism-previewer:after {
|
42 | top: 100%;
|
43 | width: 0;
|
44 | height: 0;
|
45 | margin: 5px 0 0 -7px;
|
46 | border: 7px solid transparent;
|
47 | border-color: rgba(255, 0, 0, 0);
|
48 | border-top-color: #fff;
|
49 | }
|
50 | .prism-previewer.flipped:after {
|
51 | top: auto;
|
52 | bottom: 100%;
|
53 | margin-top: 0;
|
54 | margin-bottom: 5px;
|
55 | border-top-color: rgba(255, 0, 0, 0);
|
56 | border-bottom-color: #fff;
|
57 | }
|
58 | .prism-previewer.active {
|
59 | opacity: 1;
|
60 | }
|
61 |
|
62 | .prism-previewer-angle:before {
|
63 | border-radius: 50%;
|
64 | background: #fff;
|
65 | }
|
66 | .prism-previewer-angle:after {
|
67 | margin-top: 4px;
|
68 | }
|
69 | .prism-previewer-angle svg {
|
70 | width: 32px;
|
71 | height: 32px;
|
72 | -webkit-transform: rotate(-90deg);
|
73 | -moz-transform: rotate(-90deg);
|
74 | -ms-transform: rotate(-90deg);
|
75 | -o-transform: rotate(-90deg);
|
76 | transform: rotate(-90deg);
|
77 | }
|
78 | .prism-previewer-angle[data-negative] svg {
|
79 | -webkit-transform: scaleX(-1) rotate(-90deg);
|
80 | -moz-transform: scaleX(-1) rotate(-90deg);
|
81 | -ms-transform: scaleX(-1) rotate(-90deg);
|
82 | -o-transform: scaleX(-1) rotate(-90deg);
|
83 | transform: scaleX(-1) rotate(-90deg);
|
84 | }
|
85 | .prism-previewer-angle circle {
|
86 | fill: transparent;
|
87 | stroke: hsl(200, 10%, 20%);
|
88 | stroke-opacity: 0.9;
|
89 | stroke-width: 32;
|
90 | stroke-dasharray: 0, 500;
|
91 | }
|
92 |
|
93 | .prism-previewer-gradient {
|
94 | background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
|
95 | background-size: 10px 10px;
|
96 | background-position: 0 0, 5px 5px;
|
97 |
|
98 | width: 64px;
|
99 | margin-left: -32px;
|
100 | }
|
101 | .prism-previewer-gradient:before {
|
102 | content: none;
|
103 | }
|
104 | .prism-previewer-gradient div {
|
105 | position: absolute;
|
106 | top: -5px;
|
107 | left: -5px;
|
108 | right: -5px;
|
109 | bottom: -5px;
|
110 | border-radius: 10px;
|
111 | border: 5px solid #fff;
|
112 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
|
113 | }
|
114 |
|
115 | .prism-previewer-color {
|
116 | background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb), linear-gradient(45deg, #bbb 25%, #eee 25%, #eee 75%, #bbb 75%, #bbb);
|
117 | background-size: 10px 10px;
|
118 | background-position: 0 0, 5px 5px;
|
119 | }
|
120 | .prism-previewer-color:before {
|
121 | background-color: inherit;
|
122 | background-clip: padding-box;
|
123 | }
|
124 |
|
125 | .prism-previewer-easing {
|
126 | margin-top: -76px;
|
127 | margin-left: -30px;
|
128 | width: 60px;
|
129 | height: 60px;
|
130 | background: #333;
|
131 | }
|
132 | .prism-previewer-easing.flipped {
|
133 | margin-bottom: -116px;
|
134 | }
|
135 | .prism-previewer-easing svg {
|
136 | width: 60px;
|
137 | height: 60px;
|
138 | }
|
139 | .prism-previewer-easing circle {
|
140 | fill: hsl(200, 10%, 20%);
|
141 | stroke: white;
|
142 | }
|
143 | .prism-previewer-easing path {
|
144 | fill: none;
|
145 | stroke: white;
|
146 | stroke-linecap: round;
|
147 | stroke-width: 4;
|
148 | }
|
149 | .prism-previewer-easing line {
|
150 | stroke: white;
|
151 | stroke-opacity: 0.5;
|
152 | stroke-width: 2;
|
153 | }
|
154 |
|
155 | @-webkit-keyframes prism-previewer-time {
|
156 | 0% {
|
157 | stroke-dasharray: 0, 500;
|
158 | stroke-dashoffset: 0;
|
159 | }
|
160 | 50% {
|
161 | stroke-dasharray: 100, 500;
|
162 | stroke-dashoffset: 0;
|
163 | }
|
164 | 100% {
|
165 | stroke-dasharray: 0, 500;
|
166 | stroke-dashoffset: -100;
|
167 | }
|
168 | }
|
169 |
|
170 | @-o-keyframes prism-previewer-time {
|
171 | 0% {
|
172 | stroke-dasharray: 0, 500;
|
173 | stroke-dashoffset: 0;
|
174 | }
|
175 | 50% {
|
176 | stroke-dasharray: 100, 500;
|
177 | stroke-dashoffset: 0;
|
178 | }
|
179 | 100% {
|
180 | stroke-dasharray: 0, 500;
|
181 | stroke-dashoffset: -100;
|
182 | }
|
183 | }
|
184 |
|
185 | @-moz-keyframes prism-previewer-time {
|
186 | 0% {
|
187 | stroke-dasharray: 0, 500;
|
188 | stroke-dashoffset: 0;
|
189 | }
|
190 | 50% {
|
191 | stroke-dasharray: 100, 500;
|
192 | stroke-dashoffset: 0;
|
193 | }
|
194 | 100% {
|
195 | stroke-dasharray: 0, 500;
|
196 | stroke-dashoffset: -100;
|
197 | }
|
198 | }
|
199 |
|
200 | @keyframes prism-previewer-time {
|
201 | 0% {
|
202 | stroke-dasharray: 0, 500;
|
203 | stroke-dashoffset: 0;
|
204 | }
|
205 | 50% {
|
206 | stroke-dasharray: 100, 500;
|
207 | stroke-dashoffset: 0;
|
208 | }
|
209 | 100% {
|
210 | stroke-dasharray: 0, 500;
|
211 | stroke-dashoffset: -100;
|
212 | }
|
213 | }
|
214 |
|
215 | .prism-previewer-time:before {
|
216 | border-radius: 50%;
|
217 | background: #fff;
|
218 | }
|
219 | .prism-previewer-time:after {
|
220 | margin-top: 4px;
|
221 | }
|
222 | .prism-previewer-time svg {
|
223 | width: 32px;
|
224 | height: 32px;
|
225 | -webkit-transform: rotate(-90deg);
|
226 | -moz-transform: rotate(-90deg);
|
227 | -ms-transform: rotate(-90deg);
|
228 | -o-transform: rotate(-90deg);
|
229 | transform: rotate(-90deg);
|
230 | }
|
231 | .prism-previewer-time circle {
|
232 | fill: transparent;
|
233 | stroke: hsl(200, 10%, 20%);
|
234 | stroke-opacity: 0.9;
|
235 | stroke-width: 32;
|
236 | stroke-dasharray: 0, 500;
|
237 | stroke-dashoffset: 0;
|
238 | -webkit-animation: prism-previewer-time linear infinite 3s;
|
239 | -moz-animation: prism-previewer-time linear infinite 3s;
|
240 | -o-animation: prism-previewer-time linear infinite 3s;
|
241 | animation: prism-previewer-time linear infinite 3s;
|
242 | } |
\ | No newline at end of file |