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