PluginProbe
Sharing Image / 2.0.14
Sharing Image v2.0.14
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.14, at assets/styles/settings.css

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