PluginProbe
Sharing Image / 2.0.8
Sharing Image v2.0.8
3.10 trunk 2.0 2.0.0 2.0.1 2.0.10 2.0.11 2.0.12 2.0.13 2.0.14 2.0.15 2.0.16 2.0.17 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 3.0 3.1 3.2 3.3 All 29 releases
sharing-image / assets / styles / settings.css

settings.css in Sharing Image 2.0.8, at assets/styles/settings.css

1,088 lines 38.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 input[type=range] {
2 -webkit-appearance: none;
3 -moz-appearance: none;
4 appearance: none;
5 background: transparent;
6 }
7 input[type=range]:focus {
8 outline: none;
9 }
10 input[type=range]::-webkit-slider-runnable-track {
11 cursor: pointer;
12 width: 100%;
13 height: 7px;
14 background: #dddddd;
15 border-radius: 4px;
16 border: solid 1px #b7b7b7;
17 }
18 input[type=range]::-webkit-slider-thumb {
19 cursor: pointer;
20 -webkit-appearance: none;
21 appearance: none;
22 width: 16px;
23 height: 16px;
24 margin-top: -5.5px;
25 background: #3582c4;
26 border: 0;
27 border-radius: 50%;
28 }
29 input[type=range]:focus::-webkit-slider-thumb {
30 background: #2a679c;
31 }
32 input[type=range]:hover::-webkit-slider-runnable-track {
33 background: #d0d0d0;
34 }
35 input[type=range]:disabled::-webkit-slider-thumb {
36 cursor: default;
37 background-color: #d0d0d0;
38 }
39 input[type=range]:disabled::-webkit-slider-runnable-track {
40 cursor: default;
41 background-color: #eaeaea;
42 border: solid 1px #d0d0d0;
43 }
44 input[type=range]::-moz-range-thumb {
45 cursor: pointer;
46 -moz-appearance: none;
47 appearance: none;
48 width: 16px;
49 height: 16px;
50 margin-top: -5.5px;
51 background: #3582c4;
52 border: 0;
53 border-radius: 50%;
54 }
55 input[type=range]::-moz-range-track {
56 cursor: pointer;
57 width: 100%;
58 height: 7px;
59 background: #dddddd;
60 border-radius: 4px;
61 border: solid 1px #c4c4c4;
62 }
63 input[type=range]::-moz-range-progress {
64 cursor: pointer;
65 width: 100%;
66 height: 7px;
67 background: #3582c4;
68 border-radius: 4px;
69 border: solid 1px #3582c4;
70 }
71 input[type=range]:focus::-moz-range-thumb {
72 background: #2a679c;
73 }
74 input[type=range]:disabled::-moz-range-thumb {
75 cursor: default;
76 background-color: #d0d0d0;
77 }
78 input[type=range]:disabled::-moz-range-track {
79 cursor: default;
80 background-color: #eaeaea;
81 border: solid 1px #d0d0d0;
82 }
83 input[type=range]:disabled::-moz-range-progress {
84 cursor: default;
85 background-color: #eaeaea;
86 border: solid 1px #d0d0d0;
87 }
88 input[type=range]::-ms-track {
89 cursor: pointer;
90 width: 100%;
91 height: 7px;
92 background: #dddddd;
93 border-radius: 4px;
94 border: solid 1px #c4c4c4;
95 }
96 input[type=range]::-ms-thumb {
97 cursor: pointer;
98 appearance: none;
99 width: 16px;
100 height: 16px;
101 margin-top: -5.5px;
102 background: #3582c4;
103 border: 0;
104 border-radius: 50%;
105 }
106 input[type=range]:focus::-ms-thumb {
107 background: #2a679c;
108 }
109 input[type=range]:disabled::-ms-thumb {
110 cursor: default;
111 background-color: #d0d0d0;
112 }
113 input[type=range]:disabled::-ms-track {
114 cursor: default;
115 background-color: #eaeaea;
116 border: solid 1px #d0d0d0;
117 }
118
119 @-webkit-keyframes rotate {
120 0% {
121 transform: rotate(0deg);
122 }
123 100% {
124 transform: rotate(360deg);
125 }
126 }
127
128 @keyframes rotate {
129 0% {
130 transform: rotate(0deg);
131 }
132 100% {
133 transform: rotate(360deg);
134 }
135 }
136 body.settings_page_sharing-image #wpcontent {
137 padding-left: 0;
138 }
139 body.settings_page_sharing-image .update-nag {
140 margin: 20px;
141 }
142 @media screen and (max-width: 782px) {
143 body.settings_page_sharing-image .update-nag {
144 margin: 10px;
145 }
146 }
147 body.settings_page_sharing-image #setting-error-sharing-image {
148 display: block;
149 order: -1;
150 width: 1060px;
151 max-width: 100%;
152 margin: 20px 0 0;
153 font-weight: 600;
154 border-top: 1px solid #dcdcde;
155 border-bottom: 1px solid #dcdcde;
156 border-radius: 3px;
157 }
158 body.settings_page_sharing-image #sharing-image-settings {
159 display: block;
160 position: relative;
161 }
162 body.settings_page_sharing-image #sharing-image-settings * {
163 box-sizing: border-box;
164 }
165 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog {
166 display: grid;
167 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
168 grid-gap: 20px;
169 position: relative;
170 width: 1100px;
171 max-width: 100%;
172 padding: 20px;
173 }
174 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-card {
175 display: block;
176 position: relative;
177 overflow: hidden;
178 background: #fff;
179 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
180 border: 1px solid #ccd0d4;
181 border-radius: 4px;
182 }
183 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new {
184 display: block;
185 position: relative;
186 padding-top: calc(52.5% + 44px);
187 text-decoration: none;
188 color: #666;
189 border: 2px dashed rgba(0, 0, 0, 0.125);
190 border-radius: 4px;
191 }
192 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new h2 {
193 display: flex;
194 flex-flow: column nowrap;
195 align-items: center;
196 justify-content: center;
197 position: absolute;
198 top: 50%;
199 left: 50%;
200 margin: 0;
201 font-size: 15px;
202 font-weight: 400;
203 color: inherit;
204 transform: translate(-50%, -50%);
205 }
206 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new h2 span {
207 display: block;
208 margin-top: 8px;
209 text-align: center;
210 font-size: 11px;
211 font-weight: normal;
212 font-style: italic;
213 }
214 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new h2::before {
215 content: "+";
216 display: block;
217 font-size: 5rem;
218 font-weight: 400;
219 line-height: 1;
220 opacity: 0.25;
221 }
222 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new:hover {
223 color: #eee;
224 background-color: #3582c4;
225 border: solid 2px #2a679c;
226 }
227 @media screen and (max-width: 782px) {
228 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-new {
229 padding-top: calc(52.5% + 54px);
230 }
231 }
232 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-preview {
233 display: block;
234 position: relative;
235 margin: 0;
236 padding: 52.5% 0 0;
237 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=");
238 }
239 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-preview img {
240 display: block;
241 position: absolute;
242 top: 0;
243 left: 0;
244 width: 100%;
245 height: 100%;
246 }
247 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-footer {
248 display: flex;
249 align-items: center;
250 position: relative;
251 height: 48px;
252 padding: 0 15px;
253 }
254 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-footer h2 {
255 flex: 1 1 auto;
256 margin-right: 10px;
257 font-size: 15px;
258 overflow: hidden;
259 text-overflow: ellipsis;
260 white-space: nowrap;
261 }
262 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-footer .button {
263 margin-bottom: 0;
264 }
265 @media screen and (max-width: 782px) {
266 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog .sharing-image-catalog-footer {
267 height: 54px;
268 }
269 }
270 @media screen and (max-width: 782px) {
271 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog {
272 width: 75%;
273 }
274 }
275 @media screen and (max-width: 600px) {
276 body.settings_page_sharing-image #sharing-image-settings .sharing-image-catalog {
277 width: 100%;
278 grid-template-columns: 1fr;
279 }
280 }
281 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config {
282 display: block;
283 width: 800px;
284 max-width: 100%;
285 padding: 20px;
286 }
287 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config h2 {
288 margin: 12px 0;
289 }
290 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config > * {
291 margin: 24px 0;
292 }
293 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control {
294 display: grid;
295 grid-template-columns: 240px auto;
296 position: relative;
297 width: 100%;
298 max-width: 620px;
299 margin: 40px 0;
300 width: 100%;
301 margin-bottom: 24px;
302 }
303 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control small {
304 margin-top: 6px;
305 }
306 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control h3 {
307 grid-column: 1;
308 margin: 6px 0;
309 font-size: 14px;
310 }
311 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control h4 {
312 margin: 0;
313 }
314 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control h3 ~ * {
315 grid-column: 2;
316 width: 100%;
317 }
318 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control.control-extra h3 + * {
319 margin-bottom: 20px;
320 }
321 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-input {
322 display: block;
323 position: relative;
324 }
325 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-input input {
326 display: block;
327 width: calc(100% - 2px);
328 }
329 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-radio {
330 display: block;
331 position: relative;
332 margin-top: 5px;
333 }
334 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-radio span {
335 -webkit-user-select: none;
336 -moz-user-select: none;
337 -ms-user-select: none;
338 user-select: none;
339 }
340 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-radio input {
341 margin-right: 8px;
342 }
343 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-radio small {
344 margin: 2px 0 0 25px;
345 }
346 @media screen and (max-width: 782px) {
347 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-radio {
348 margin-top: 10px;
349 }
350 }
351 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-select {
352 display: block;
353 position: relative;
354 flex: 1 1 100%;
355 }
356 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-select select {
357 display: block;
358 width: calc(100% - 2px);
359 max-width: none;
360 }
361 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-range {
362 display: block;
363 position: relative;
364 width: 100%;
365 }
366 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-range input {
367 display: block;
368 width: 100%;
369 margin: 8px 0;
370 }
371 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-range em {
372 display: block;
373 cursor: default;
374 position: absolute;
375 right: 2px;
376 top: 0;
377 font-size: 10px;
378 font-style: normal;
379 color: #3582c4;
380 }
381 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-media {
382 display: flex;
383 align-items: center;
384 }
385 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-media a {
386 margin-left: 14px;
387 }
388 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-media button {
389 margin-bottom: 0;
390 }
391 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control .sharing-image-config-control-media small {
392 margin-top: 10px;
393 }
394 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config .sharing-image-config-control-fieldset {
395 display: block;
396 position: relative;
397 width: 100%;
398 margin-bottom: 10px;
399 }
400 body.settings_page_sharing-image #sharing-image-settings .sharing-image-config ~ #setting-error-sharing-image {
401 max-width: 760px;
402 }
403 body.settings_page_sharing-image #sharing-image-settings .sharing-image-content {
404 display: none;
405 flex-flow: column wrap;
406 align-items: center;
407 }
408 body.settings_page_sharing-image #sharing-image-settings .sharing-image-content.content-visible {
409 display: flex;
410 }
411 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor {
412 display: flex;
413 flex-flow: row nowrap;
414 position: relative;
415 width: 1100px;
416 max-width: 100%;
417 padding: 20px;
418 }
419 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-fieldset {
420 display: block;
421 flex: 1 1 auto;
422 margin-right: 48px;
423 margin-bottom: 24px;
424 }
425 @media screen and (max-width: 1023px) {
426 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-fieldset {
427 flex: 0 1 640px;
428 margin-right: 0;
429 }
430 }
431 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control {
432 display: flex;
433 flex-flow: column nowrap;
434 align-items: flex-start;
435 position: relative;
436 margin-bottom: 24px;
437 }
438 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control p {
439 margin: 0 0 5px;
440 }
441 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control p:last-child {
442 margin-bottom: 0;
443 }
444 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control h3, body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control h4 {
445 display: block;
446 cursor: default;
447 width: 100%;
448 margin: 0 0 5px;
449 font-size: 13px;
450 font-weight: 600;
451 }
452 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control small {
453 display: block;
454 cursor: default;
455 width: 100%;
456 margin-top: 6px;
457 font-size: 10.5px;
458 line-height: 1.5;
459 }
460 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-hidden {
461 display: none;
462 }
463 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-compact {
464 width: 300px;
465 max-width: 100%;
466 }
467 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-media {
468 flex-flow: row nowrap;
469 align-items: center;
470 }
471 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-media .button {
472 margin-right: 14px;
473 }
474 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-media .button:disabled ~ * {
475 display: none;
476 }
477 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-reduced {
478 margin-bottom: 14px;
479 }
480 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes {
481 flex-flow: row nowrap;
482 }
483 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > * {
484 margin-right: 14px;
485 }
486 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > *:nth-child(2) {
487 margin-right: 54px;
488 }
489 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > *:last-child {
490 margin-right: 0;
491 }
492 @media screen and (max-width: 782px) {
493 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes {
494 flex-flow: row wrap;
495 }
496 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > * {
497 width: calc(50% - 7px);
498 }
499 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > *:first-child {
500 margin-bottom: 14px;
501 }
502 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-sizes > *:nth-child(2) {
503 margin-right: 0;
504 margin-bottom: 14px;
505 }
506 }
507 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-select {
508 flex-flow: row nowrap;
509 align-items: center;
510 }
511 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-select > * {
512 margin-right: 14px;
513 }
514 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-select > *:last-child {
515 margin-right: 0;
516 }
517 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-footer {
518 flex-flow: row nowrap;
519 align-items: center;
520 margin-bottom: 0;
521 padding-top: 20px;
522 border-top: solid 1px #dcdcde;
523 }
524 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-footer > * {
525 margin-right: 28px;
526 }
527 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-footer > *:last-child {
528 margin-right: 0;
529 }
530 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-series {
531 flex-flow: row nowrap;
532 }
533 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-series > *:first-child {
534 margin-right: 54px;
535 }
536 @media screen and (max-width: 782px) {
537 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-series {
538 flex-flow: row wrap;
539 }
540 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-series > * {
541 width: 100%;
542 }
543 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-series > *:first-child {
544 margin-right: 0;
545 margin-bottom: 24px;
546 }
547 }
548 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-upload {
549 flex-flow: row wrap;
550 align-items: flex-end;
551 }
552 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-upload > *:first-child {
553 flex: 1 1 auto;
554 margin-right: 14px;
555 }
556 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-upload > *:nth-child(2) {
557 margin-top: 8px;
558 }
559 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control.control-extend > * {
560 width: 100%;
561 }
562 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-input {
563 display: block;
564 position: relative;
565 }
566 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-input input {
567 display: block;
568 width: calc(100% - 2px);
569 }
570 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-radio {
571 display: block;
572 position: relative;
573 margin-top: 5px;
574 }
575 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-radio span {
576 -webkit-user-select: none;
577 -moz-user-select: none;
578 -ms-user-select: none;
579 user-select: none;
580 }
581 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-radio input {
582 margin-right: 8px;
583 }
584 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-radio small {
585 margin: 2px 0 0 25px;
586 }
587 @media screen and (max-width: 782px) {
588 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-radio {
589 margin-top: 10px;
590 }
591 }
592 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-select {
593 display: block;
594 position: relative;
595 flex: 1 1 100%;
596 }
597 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-select select {
598 display: block;
599 width: calc(100% - 2px);
600 max-width: none;
601 }
602 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-checkbox {
603 display: flex;
604 align-items: center;
605 position: relative;
606 margin-top: 5px;
607 }
608 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-checkbox span {
609 -webkit-user-select: none;
610 -moz-user-select: none;
611 -ms-user-select: none;
612 user-select: none;
613 }
614 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-checkbox input[type=checkbox] {
615 margin: 0 8px 0 0;
616 }
617 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-textarea {
618 display: block;
619 position: relative;
620 }
621 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-textarea textarea {
622 display: block;
623 width: calc(100% - 2px);
624 min-height: 30px;
625 }
626 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-range {
627 display: block;
628 position: relative;
629 width: 100%;
630 }
631 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-range input {
632 display: block;
633 width: 100%;
634 margin: 8px 0;
635 }
636 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-range em {
637 display: block;
638 cursor: default;
639 position: absolute;
640 right: 2px;
641 top: 0;
642 font-size: 10px;
643 font-style: normal;
644 color: #3582c4;
645 }
646 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-media {
647 display: flex;
648 align-items: center;
649 }
650 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-media a {
651 margin-left: 14px;
652 }
653 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-media button {
654 margin-bottom: 0;
655 }
656 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-media small {
657 margin-top: 10px;
658 }
659 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-color {
660 display: block;
661 position: relative;
662 }
663 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-control .sharing-image-editor-control-color input[type=color] {
664 cursor: pointer;
665 }
666 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-designer {
667 display: block;
668 position: relative;
669 width: 100%;
670 margin-top: -10px;
671 }
672 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-more {
673 display: block;
674 cursor: pointer;
675 margin: 0;
676 padding: 0;
677 color: #3582c4;
678 background: transparent;
679 border: none;
680 border-bottom: solid 1px;
681 transition: border 0.25s;
682 }
683 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-more:focus {
684 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
685 outline: 1px solid transparent;
686 }
687 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-more:hover {
688 border-bottom-color: transparent;
689 }
690 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-delete {
691 display: block;
692 cursor: pointer;
693 margin: 0;
694 padding: 0;
695 color: #b32d2e;
696 background: transparent;
697 border: none;
698 border-bottom: solid 1px;
699 text-decoration: none;
700 transition: border 0.25s;
701 }
702 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-delete:focus {
703 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
704 outline: 1px solid transparent;
705 }
706 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-delete:hover {
707 border-bottom-color: transparent;
708 }
709 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-collapse {
710 display: block;
711 cursor: pointer;
712 margin-left: 0.5rem;
713 padding: 0.25rem 0 0;
714 line-height: 1;
715 font-size: 14px;
716 color: #aaaaaa;
717 background: transparent;
718 border: none;
719 transition: color 0.25s;
720 }
721 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-collapse::before {
722 content: "";
723 display: block;
724 position: absolute;
725 top: 0;
726 left: 0;
727 width: 100%;
728 height: 100%;
729 }
730 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-collapse::after {
731 font-family: dashicons;
732 content: "\f345";
733 }
734 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-collapse:hover {
735 color: #787c82;
736 }
737 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-collapse:focus {
738 border-color: #007cba;
739 color: #016087;
740 outline: none;
741 }
742 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-order {
743 display: block;
744 cursor: pointer;
745 position: absolute;
746 top: 10px;
747 right: 4px;
748 padding: 4px 4px 2px;
749 font-size: 16px;
750 color: #aaaaaa;
751 background: transparent;
752 border: none;
753 transition: color 0.25s;
754 }
755 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-order::after {
756 font-family: dashicons;
757 content: "\f342";
758 }
759 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-order:hover {
760 color: #787c82;
761 }
762 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-order:focus {
763 border-color: #007cba;
764 color: #016087;
765 outline: none;
766 }
767 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer {
768 display: block;
769 position: relative;
770 margin: 0 0 16px;
771 padding: 14px 10px;
772 background-color: #fff;
773 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
774 border: 1px solid #ccd0d4;
775 border-radius: 4px;
776 }
777 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer h2 {
778 display: inline-flex;
779 align-items: center;
780 position: relative;
781 margin: 0 20px 10px 0;
782 font-size: 16px;
783 font-weight: 600;
784 }
785 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer h5 {
786 display: block;
787 margin: 0 10px 24px 0;
788 font-size: 13px;
789 font-weight: 400;
790 }
791 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-up {
792 -webkit-animation: 0.5s raise-up;
793 animation: 0.5s raise-up;
794 }
795 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-blink {
796 -webkit-animation: 0.5s blink;
797 animation: 0.5s blink;
798 }
799 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-collapsed > * {
800 display: none;
801 }
802 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-collapsed > h2 {
803 display: inline-flex;
804 margin-bottom: 0;
805 }
806 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-collapsed > .sharing-image-editor-order {
807 display: block;
808 }
809 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer.layer-collapsed .sharing-image-editor-collapse::after {
810 content: "\f347";
811 }
812 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-layer:first-child .sharing-image-editor-order {
813 display: none;
814 }
815 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-monitor {
816 display: block;
817 flex: 0 0 480px;
818 max-width: 100%;
819 order: 2;
820 }
821 @media screen and (max-width: 1279px) {
822 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-monitor {
823 flex: 0 0 400px;
824 }
825 }
826 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-viewport {
827 display: block;
828 position: -webkit-sticky;
829 position: sticky;
830 top: 52px;
831 width: 100%;
832 }
833 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-loader {
834 display: none;
835 position: absolute;
836 top: 0;
837 left: 0;
838 z-index: 2;
839 width: 100%;
840 height: 100%;
841 background-color: rgba(0, 0, 0, 0.75);
842 }
843 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-loader::after {
844 content: " ";
845 display: block;
846 position: absolute;
847 top: 50%;
848 left: 50%;
849 width: 40px;
850 height: 40px;
851 margin-top: -20px;
852 margin-left: -20px;
853 border: 6px solid #999;
854 border-color: #999 transparent #999 transparent;
855 border-radius: 50%;
856 -webkit-animation: rotate 1.2s linear infinite;
857 animation: rotate 1.2s linear infinite;
858 }
859 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-preview {
860 display: block;
861 position: relative;
862 width: 100%;
863 overflow: hidden;
864 border-radius: 3px;
865 box-shadow: 0 0 3px 0 #777;
866 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=");
867 }
868 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-preview img {
869 display: block;
870 -o-object-fit: contain;
871 object-fit: contain;
872 -o-object-position: center;
873 object-position: center;
874 width: 100%;
875 height: auto;
876 max-height: 400px;
877 }
878 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-preview.preview-blank {
879 padding-top: 52.5%;
880 }
881 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-preview.preview-loader .sharing-image-editor-loader {
882 display: block;
883 }
884 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-warning {
885 display: none;
886 position: relative;
887 margin: 12px 0 -6px;
888 padding: 8px 12px;
889 background: #fff;
890 border: 1px solid #c3c4c7;
891 border-left: 4px solid #b32d2e;
892 border-radius: 3px;
893 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
894 }
895 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-warning.warning-visible {
896 display: block;
897 }
898 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-manager {
899 display: flex;
900 align-items: center;
901 flex-flow: row wrap;
902 width: 100%;
903 margin-top: 16px;
904 }
905 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-manager button {
906 margin-right: 14px;
907 }
908 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-manager button:last-child {
909 margin-right: 0;
910 }
911 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-suspend {
912 display: flex;
913 align-items: center;
914 order: 2;
915 margin: 10px 0 10px auto;
916 }
917 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-suspend input {
918 margin: 0 8px 0 0;
919 }
920 @media screen and (max-width: 782px) {
921 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor .sharing-image-editor-suspend {
922 order: 0;
923 width: 100%;
924 margin-bottom: 24px;
925 }
926 }
927 @media screen and (max-width: 1023px) {
928 body.settings_page_sharing-image #sharing-image-settings .sharing-image-editor {
929 flex-flow: row wrap;
930 }
931 }
932 body.settings_page_sharing-image #sharing-image-settings .sharing-image-error {
933 max-width: 760px;
934 margin: 40px auto 20px;
935 color: #b32d2e;
936 text-align: center;
937 }
938 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header {
939 display: block;
940 order: -2;
941 width: 100%;
942 background: #fff;
943 border-top: 1px solid #dcdcde;
944 border-bottom: 1px solid #dcdcde;
945 }
946 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header h1 {
947 display: block;
948 position: relative;
949 margin: 0 0 1rem;
950 padding: 16px 0 4px 0;
951 font-weight: 600;
952 font-size: 23px;
953 line-height: 1.3;
954 text-align: center;
955 }
956 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-menu {
957 display: flex;
958 justify-content: center;
959 margin: 0 auto;
960 }
961 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-tab {
962 display: block;
963 margin: 0 1rem;
964 padding: 0.5rem 1rem 1rem;
965 text-decoration: none;
966 color: inherit;
967 transition: box-shadow 0.5s ease-in-out;
968 }
969 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-tab:focus-visible {
970 outline: 1px solid #787c82;
971 }
972 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-tab:focus {
973 box-shadow: none;
974 }
975 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-tab.active {
976 box-shadow: inset 0 -3px #3582c4;
977 font-weight: 600;
978 }
979 @media screen and (max-width: 767px) {
980 body.settings_page_sharing-image #sharing-image-settings .sharing-image-header .sharing-image-tab {
981 margin: 0 0.5rem;
982 padding: 0.5rem 0.5rem 1rem;
983 }
984 }
985 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium {
986 display: block;
987 width: 800px;
988 max-width: 100%;
989 padding: 20px;
990 }
991 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium h2 {
992 margin: 12px 0;
993 }
994 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium ul {
995 margin-left: 40px;
996 list-style-type: disc;
997 }
998 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium p {
999 margin: 12px 0 0;
1000 }
1001 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium p:first-child {
1002 margin-top: 0;
1003 }
1004 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium > * {
1005 margin: 24px 0;
1006 }
1007 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-benefits {
1008 display: block;
1009 }
1010 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-gratitude {
1011 display: none;
1012 }
1013 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium.premium-enabled .sharing-image-premium-benefits {
1014 display: none;
1015 }
1016 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium.premium-enabled .sharing-image-premium-gratitude {
1017 display: block;
1018 }
1019 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-contacts {
1020 display: block;
1021 padding-top: 24px;
1022 border-top: solid 1px #ccc;
1023 }
1024 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-access {
1025 display: block;
1026 }
1027 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-access strong {
1028 display: block;
1029 }
1030 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-access.access-loader .spinner {
1031 visibility: visible;
1032 }
1033 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-verify {
1034 display: flex;
1035 align-items: center;
1036 margin-top: 8px;
1037 }
1038 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-verify input {
1039 flex: 1 1 auto;
1040 max-width: 320px;
1041 }
1042 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-verify button {
1043 margin-left: 8px;
1044 margin-bottom: 0;
1045 }
1046 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-verify .spinner {
1047 margin: 0 0 0 8px;
1048 }
1049 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-revoke {
1050 display: flex;
1051 flex-flow: row wrap;
1052 align-items: center;
1053 margin: 24px 0;
1054 }
1055 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-revoke p {
1056 width: 100%;
1057 margin: 0 0 16px;
1058 }
1059 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-revoke button {
1060 color: #b32d2e;
1061 border-color: #b32d2e;
1062 }
1063 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-revoke .spinner {
1064 margin: 0 0 0 8px;
1065 }
1066 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-permit {
1067 display: flex;
1068 align-items: center;
1069 margin: 24px 0;
1070 }
1071 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-permit strong {
1072 display: none;
1073 margin-left: 16px;
1074 }
1075 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-permit.permit-visible strong {
1076 display: block;
1077 }
1078 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-warning {
1079 display: none;
1080 position: relative;
1081 color: #b32d2e;
1082 }
1083 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium .sharing-image-premium-warning.warning-visible {
1084 display: block;
1085 }
1086 body.settings_page_sharing-image #sharing-image-settings .sharing-image-premium ~ #setting-error-sharing-image {
1087 max-width: 760px;
1088 }