source: node_modules/prismjs/plugins/previewers/prism-previewers.css

main
Last change on this file was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

Initial commit
  • Property mode set to 100644
File size: 4.9 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.