PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.2
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.2
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / admin / metabox.css

metabox.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.2, at assets/css/admin/metabox.css

1,677 lines 41.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .merchant-pcr-app * {
2 outline: none;
3 border: none;
4 -webkit-box-sizing: border-box;
5 box-sizing: border-box;
6 }
7
8 .merchant-pcr-app input:focus,
9 .merchant-pcr-app input.pcr-active,
10 .merchant-pcr-app button:focus,
11 .merchant-pcr-app button.pcr-active {
12 -webkit-box-shadow: none;
13 box-shadow: none;
14 }
15
16 .merchant-pcr-app .pcr-palette:focus,
17 .merchant-pcr-app .pcr-slider:focus {
18 -webkit-box-shadow: none;
19 box-shadow: none;
20 }
21
22 .merchant-pcr-app {
23 position: fixed;
24 z-index: 999999;
25 top: 0;
26 left: 0;
27 display: -webkit-box;
28 display: -ms-flexbox;
29 display: flex;
30 -webkit-box-orient: vertical;
31 -webkit-box-direction: normal;
32 -ms-flex-direction: column;
33 flex-direction: column;
34 border-radius: 0.1em;
35 opacity: 0;
36 visibility: hidden;
37 -webkit-transition: opacity 0.2s, visibility 0s 0.2s;
38 transition: opacity 0.2s, visibility 0s 0.2s;
39 -webkit-box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
40 box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
41 background: #fff;
42 }
43
44 .merchant-pcr-app.visible {
45 visibility: visible;
46 opacity: 1;
47 -webkit-transition: opacity 0.2s;
48 transition: opacity 0.2s;
49 }
50
51 .merchant-pcr-app .pcr-swatches {
52 display: -webkit-box;
53 display: -ms-flexbox;
54 display: flex;
55 -webkit-box-pack: justify;
56 -ms-flex-pack: justify;
57 justify-content: space-between;
58 }
59
60 .merchant-pcr-app .pcr-swatches > button {
61 cursor: pointer;
62 font-size: 1em;
63 position: relative;
64 z-index: 1;
65 width: 20px;
66 height: 20px;
67 margin: 0;
68 padding: 0;
69 background: none;
70 }
71
72 .merchant-pcr-app .pcr-swatches > button::before {
73 position: absolute;
74 content: "";
75 top: 0;
76 left: 0;
77 bottom: 0;
78 right: 0;
79 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
80 background-size: 6px;
81 border-radius: 20px;
82 border: 1px solid transparent;
83 z-index: -1;
84 }
85
86 .merchant-pcr-app .pcr-swatches > button::after {
87 content: "";
88 position: absolute;
89 z-index: 1;
90 top: 0;
91 left: 0;
92 right: 0;
93 bottom: 0;
94 border-radius: 20px;
95 border: 1px solid rgba(0, 0, 0, 0.3);
96 background: var(--pcr-color);
97 }
98
99 .merchant-pcr-app .pcr-interaction {
100 display: -webkit-box;
101 display: -ms-flexbox;
102 display: flex;
103 grid-gap: 5px;
104 }
105
106 .merchant-pcr-app .pcr-interaction input {
107 font-size: 11px;
108 border-radius: 3px;
109 }
110 .merchant-pcr-app .pcr-interaction input:focus {
111 border-color: #3858E9;
112 }
113
114 .merchant-pcr-app .pcr-interaction .pcr-result {
115 -webkit-box-flex: 1;
116 -ms-flex: 1;
117 flex: 1;
118 margin: 0;
119 width: 100%;
120 max-width: 100%;
121 }
122
123 .merchant-pcr-app .pcr-interaction .pcr-clear {
124 cursor: pointer;
125 margin: 0;
126 padding: 0 10px;
127 border-radius: 3px;
128 color: #fff;
129 background-color: #3858E9;
130 text-transform: uppercase;
131 }
132
133 .merchant-pcr-app .pcr-selection .pcr-picker {
134 -webkit-user-select: none;
135 -moz-user-select: none;
136 -ms-user-select: none;
137 user-select: none;
138 position: absolute;
139 height: 16px;
140 width: 16px;
141 border-radius: 16px;
142 background-color: #fff !important;
143 -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
144 box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
145 }
146
147 .merchant-pcr-app .pcr-selection .pcr-color-palette,
148 .merchant-pcr-app .pcr-selection .pcr-color-chooser,
149 .merchant-pcr-app .pcr-selection .pcr-color-opacity {
150 -webkit-user-select: none;
151 -moz-user-select: none;
152 -ms-user-select: none;
153 user-select: none;
154 position: relative;
155 display: -webkit-box;
156 display: -ms-flexbox;
157 display: flex;
158 -webkit-box-orient: vertical;
159 -webkit-box-direction: normal;
160 -ms-flex-direction: column;
161 flex-direction: column;
162 cursor: -webkit-grab;
163 cursor: grab;
164 }
165
166 .merchant-pcr-app .pcr-selection .pcr-color-palette:active,
167 .merchant-pcr-app .pcr-selection .pcr-color-chooser:active,
168 .merchant-pcr-app .pcr-selection .pcr-color-opacity:active {
169 cursor: -webkit-grabbing;
170 cursor: grabbing;
171 }
172
173 .merchant-pcr-app[data-theme=merchant] {
174 width: 250px;
175 max-width: 95vw;
176 padding: 10px;
177 -webkit-box-sizing: border-box;
178 box-sizing: border-box;
179 display: -webkit-box;
180 display: -ms-flexbox;
181 display: flex;
182 grid-gap: 10px;
183 -webkit-box-orient: vertical;
184 -webkit-box-direction: normal;
185 -ms-flex-direction: column;
186 flex-direction: column;
187 }
188
189 .merchant-pcr-app[data-theme=merchant] .pcr-selection {
190 display: grid;
191 grid-gap: 10px;
192 grid-template-columns: 1fr 4fr;
193 grid-template-rows: 5fr auto auto;
194 -webkit-box-align: center;
195 -ms-flex-align: center;
196 align-items: center;
197 height: 150px;
198 width: 100%;
199 align-self: flex-start;
200 }
201
202 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview {
203 grid-area: 2/1/4/1;
204 height: 100%;
205 width: 100%;
206 display: -webkit-box;
207 display: -ms-flexbox;
208 display: flex;
209 -webkit-box-align: center;
210 -ms-flex-align: center;
211 align-items: center;
212 -webkit-box-pack: center;
213 -ms-flex-pack: center;
214 justify-content: center;
215 }
216
217 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-last-color {
218 display: none;
219 }
220
221 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color {
222 position: relative;
223 width: 32px;
224 height: 32px;
225 border-radius: 32px;
226 overflow: hidden;
227 border: 1px solid rgba(0, 0, 0, 0.3);
228 background-color: var(--pcr-color);
229 }
230
231 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-preview .pcr-current-color::before {
232 position: absolute;
233 content: "";
234 top: 0;
235 left: 0;
236 width: 100%;
237 height: 100%;
238 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
239 background-size: 6px;
240 border-radius: 100%;
241 z-index: -1;
242 }
243
244 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette {
245 grid-area: 1/1/2/3;
246 width: 100%;
247 height: 100%;
248 z-index: 1;
249 }
250
251 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-picker {
252 width: 18px;
253 height: 18px;
254 border: 2px solid #fff;
255 -webkit-box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
256 box-shadow: 0 0 1px 2px #000, inset 0 0 1px 1px #000;
257 background-color: transparent !important;
258 }
259
260 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette {
261 width: 100%;
262 height: 100%;
263 }
264
265 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-palette .pcr-palette::before {
266 position: absolute;
267 content: "";
268 top: 0;
269 left: 0;
270 width: 100%;
271 height: 100%;
272 background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
273 background-size: 8px;
274 z-index: -1;
275 }
276
277 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser {
278 grid-area: 2/2/2/2;
279 }
280
281 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
282 grid-area: 3/2/3/2;
283 }
284
285 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser,
286 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity {
287 height: 12px;
288 margin-right: 10px;
289 }
290
291 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-picker,
292 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-picker {
293 top: 50%;
294 -webkit-transform: translateY(-50%);
295 transform: translateY(-50%);
296 }
297
298 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider,
299 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
300 -webkit-box-flex: 1;
301 -ms-flex-positive: 1;
302 flex-grow: 1;
303 }
304
305 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-chooser .pcr-slider {
306 background: -webkit-gradient(linear, left top, right top, from(red), color-stop(#ff0), color-stop(lime), color-stop(cyan), color-stop(blue), color-stop(#f0f), to(red));
307 background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
308 }
309
310 .merchant-pcr-app[data-theme=merchant] .pcr-selection .pcr-color-opacity .pcr-slider {
311 background: -webkit-gradient(linear, left top, right top, from(transparent), to(black)), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
312 background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
313 background-size: 100%, 6px;
314 }
315
316 .merchant-metabox {
317 display: -webkit-box;
318 display: -ms-flexbox;
319 display: flex;
320 padding: 20px;
321 }
322
323 .merchant-metabox-tabs {
324 display: -webkit-box;
325 display: -ms-flexbox;
326 display: flex;
327 -webkit-box-orient: vertical;
328 -webkit-box-direction: normal;
329 -ms-flex-direction: column;
330 flex-direction: column;
331 width: 225px;
332 margin-left: -20px;
333 }
334 .merchant-metabox-tabs a {
335 position: relative;
336 display: -webkit-box;
337 display: -ms-flexbox;
338 display: flex;
339 font-size: 16px;
340 line-height: 24px;
341 font-weight: 600;
342 color: #1a1a1a;
343 padding: 9px 16px;
344 text-decoration: none;
345 -webkit-transition: all 0.1s;
346 transition: all 0.1s;
347 }
348 .merchant-metabox-tabs a:before {
349 content: "";
350 position: absolute;
351 top: 0;
352 left: 0;
353 width: 4px;
354 height: 100%;
355 border-radius: 0 4px 4px 0;
356 opacity: 0;
357 visibility: hidden;
358 -webkit-transition: ease opacity 200ms;
359 transition: ease opacity 200ms;
360 }
361 .merchant-metabox-tabs a:focus, .merchant-metabox-tabs a:active, .merchant-metabox-tabs a:hover {
362 color: #757575;
363 outline: none;
364 -webkit-box-shadow: none;
365 box-shadow: none;
366 }
367 .merchant-metabox-tabs a:focus:before, .merchant-metabox-tabs a:active:before, .merchant-metabox-tabs a:hover:before {
368 background-color: #e1e1e1;
369 opacity: 1;
370 visibility: visible;
371 }
372 .merchant-metabox-tabs a.active {
373 color: #3858E9;
374 }
375 .merchant-metabox-tabs a.active:before {
376 background-color: #3858E9;
377 opacity: 1;
378 visibility: visible;
379 }
380
381 .merchant-metabox-contents {
382 -webkit-box-flex: 1;
383 -ms-flex: 1;
384 flex: 1;
385 display: -webkit-box;
386 display: -ms-flexbox;
387 display: flex;
388 -webkit-box-orient: vertical;
389 -webkit-box-direction: normal;
390 -ms-flex-direction: column;
391 flex-direction: column;
392 border: 1px solid #F0F0F1;
393 border-radius: 4px;
394 }
395
396 .merchant-metabox-content {
397 display: -webkit-box;
398 display: -ms-flexbox;
399 display: flex;
400 -webkit-box-orient: vertical;
401 -webkit-box-direction: normal;
402 -ms-flex-direction: column;
403 flex-direction: column;
404 }
405 .merchant-metabox-content:not(.active) {
406 display: none;
407 }
408
409 .merchant-metabox-content-title {
410 display: none;
411 margin: 0;
412 padding: 10px 15px;
413 color: #1e1e1e;
414 background-color: #eee;
415 }
416
417 .merchant-metabox-field {
418 display: -webkit-box;
419 display: -ms-flexbox;
420 display: flex;
421 -ms-flex-wrap: wrap;
422 flex-wrap: wrap;
423 grid-gap: 0;
424 padding: 20px;
425 -webkit-box-orient: vertical;
426 -webkit-box-direction: normal;
427 -ms-flex-direction: column;
428 flex-direction: column;
429 }
430 .merchant-metabox-field:first-child {
431 border-top: none;
432 }
433 .merchant-metabox-field:last-child {
434 border-bottom: none;
435 }
436
437 .merchant-metabox-field-hidden {
438 display: none;
439 }
440
441 .merchant-metabox-field-separator-before {
442 border-top: 1px solid #eee;
443 }
444
445 .merchant-metabox-field-separator-after {
446 border-bottom: 1px solid #eee;
447 }
448
449 .merchant-metabox-field-inline {
450 -webkit-box-orient: vertical;
451 -webkit-box-direction: normal;
452 -ms-flex-direction: column;
453 flex-direction: column;
454 }
455
456 .merchant-metabox-field-title {
457 width: 100%;
458 max-width: none;
459 display: -webkit-box;
460 display: -ms-flexbox;
461 display: flex;
462 -ms-flex-wrap: wrap;
463 flex-wrap: wrap;
464 grid-gap: 5px;
465 -webkit-box-orient: vertical;
466 -webkit-box-direction: normal;
467 -ms-flex-direction: column;
468 flex-direction: column;
469 margin-bottom: 10px;
470 }
471 .merchant-metabox-field-title h4 {
472 margin: 0;
473 color: #1e1e1e;
474 font-size: 13px;
475 font-weight: 500;
476 }
477 .merchant-metabox-field-title small {
478 opacity: 0.75;
479 }
480 .merchant-metabox-field-title small code {
481 font-size: 1em;
482 }
483
484 .merchant-metabox-field-content {
485 -webkit-box-flex: 1;
486 -ms-flex: 1;
487 flex: 1;
488 }
489
490 .merchant-metabox-field-description {
491 font-size: 12px;
492 color: #666;
493 opacity: 1;
494 margin-top: 5px;
495 }
496 .merchant-metabox-field-description code {
497 font-size: 1em;
498 }
499 .merchant-metabox-field-description a {
500 color: #3858E9;
501 }
502 .merchant-metabox-field-description a:focus {
503 -webkit-box-shadow: none;
504 box-shadow: none;
505 }
506
507 .merchant-metabox-datetime-field input,
508 .merchant-metabox-field-text input {
509 padding: 12px;
510 line-height: 1.3em;
511 width: 100%;
512 max-width: 100%;
513 min-height: auto;
514 border: 1px solid #D6D6D6;
515 border-radius: 4px;
516 }
517 .merchant-metabox-datetime-field input:focus,
518 .merchant-metabox-field-text input:focus {
519 outline: none;
520 -webkit-box-shadow: none;
521 box-shadow: none;
522 border-color: #3858E9;
523 }
524
525 .merchant-metabox-field-number input {
526 padding: 12px;
527 line-height: 1.3em;
528 width: 100%;
529 max-width: 100%;
530 min-height: auto;
531 border: 1px solid #D6D6D6;
532 border-radius: 4px;
533 }
534 .merchant-metabox-field-number input:focus {
535 outline: none;
536 -webkit-box-shadow: none;
537 box-shadow: none;
538 border-color: #3858E9;
539 }
540
541 .merchant-metabox-field-textarea textarea {
542 width: 100%;
543 max-width: 100%;
544 min-height: 100px;
545 vertical-align: top;
546 }
547
548 .merchant-metabox-field-checkbox label {
549 display: -webkit-box;
550 display: -ms-flexbox;
551 display: flex;
552 grid-gap: 6px;
553 -webkit-box-align: center;
554 -ms-flex-align: center;
555 align-items: center;
556 -webkit-user-select: none;
557 -moz-user-select: none;
558 -ms-user-select: none;
559 user-select: none;
560 }
561 .merchant-metabox-field-checkbox label input {
562 margin: 0;
563 }
564
565 .merchant-metabox-field-switcher label {
566 display: -webkit-inline-box;
567 display: -ms-inline-flexbox;
568 display: inline-flex;
569 grid-gap: 6px;
570 -webkit-box-align: center;
571 -ms-flex-align: center;
572 align-items: center;
573 -webkit-user-select: none;
574 -moz-user-select: none;
575 -ms-user-select: none;
576 user-select: none;
577 }
578 .merchant-metabox-field-switcher i {
579 position: relative;
580 overflow: hidden;
581 display: -webkit-box;
582 display: -ms-flexbox;
583 display: flex;
584 width: 45px;
585 height: 22px;
586 background-color: #c8c8c8;
587 border-radius: 20px;
588 -webkit-transition: all 0.2s;
589 transition: all 0.2s;
590 }
591 .merchant-metabox-field-switcher i:before {
592 content: "";
593 position: absolute;
594 display: block;
595 width: 14px;
596 height: 14px;
597 top: 4px;
598 left: 6px;
599 background-color: #fff;
600 border-radius: 20px;
601 -webkit-transition: all 0.1s;
602 transition: all 0.1s;
603 }
604 .merchant-metabox-field-switcher input {
605 display: none;
606 }
607 .merchant-metabox-field-switcher input:checked + i {
608 background-color: #3858E9;
609 }
610 .merchant-metabox-field-switcher input:checked + i:before {
611 left: 26px;
612 }
613
614 .merchant-metabox-radio-field {
615 display: -webkit-box;
616 display: -ms-flexbox;
617 display: flex;
618 -ms-flex-wrap: wrap;
619 flex-wrap: wrap;
620 -webkit-box-align: center;
621 -ms-flex-align: center;
622 align-items: center;
623 gap: 30px;
624 /* Hide the hardcoded <br> tags */
625 }
626 .merchant-metabox-radio-field br {
627 display: none;
628 }
629 .merchant-metabox-radio-field label {
630 display: -webkit-inline-box;
631 display: -ms-inline-flexbox;
632 display: inline-flex;
633 -webkit-box-align: center;
634 -ms-flex-align: center;
635 align-items: center;
636 gap: 12px;
637 margin: 0;
638 cursor: pointer;
639 }
640 .merchant-metabox-radio-field label span {
641 font-size: 14px;
642 font-weight: 400;
643 color: #1D2327;
644 opacity: 0.8;
645 }
646 .merchant-metabox-radio-field label input:checked + span {
647 opacity: 1;
648 }
649 .merchant-metabox-radio-field label input {
650 -ms-flex-negative: 0;
651 flex-shrink: 0;
652 margin: 0;
653 width: 20px;
654 height: 20px;
655 border: 1px solid #D6D6D6;
656 background-color: #fff;
657 display: -webkit-inline-box;
658 display: -ms-inline-flexbox;
659 display: inline-flex;
660 -webkit-box-align: center;
661 -ms-flex-align: center;
662 align-items: center;
663 -webkit-box-pack: center;
664 -ms-flex-pack: center;
665 justify-content: center;
666 -webkit-transition: none;
667 transition: none;
668 -webkit-box-sizing: border-box;
669 box-sizing: border-box;
670 -webkit-box-shadow: none;
671 box-shadow: none;
672 border-radius: 100%;
673 -moz-appearance: none;
674 appearance: none;
675 -webkit-appearance: none;
676 }
677 .merchant-metabox-radio-field label input:focus {
678 border-color: #fff;
679 -webkit-box-shadow: none;
680 box-shadow: none;
681 outline: none;
682 }
683 .merchant-metabox-radio-field label input:checked {
684 border-color: #3858E9;
685 background-color: #fff;
686 -webkit-box-shadow: 0 0 0 1px #3858E9;
687 box-shadow: 0 0 0 1px #3858E9;
688 }
689 .merchant-metabox-radio-field label input:checked::before {
690 content: "";
691 width: 12px;
692 height: 12px;
693 border-radius: 12px;
694 background-color: #3858E9;
695 display: block;
696 }
697
698 .merchant-metabox-field-select select {
699 padding: 12px 20px 12px 12px;
700 line-height: 1.3em;
701 width: 100%;
702 max-width: 100%;
703 min-height: auto;
704 border-radius: 6px;
705 color: #2F2F2F;
706 border: 1px solid #D6D6D6;
707 background-color: #fff;
708 }
709 .merchant-metabox-field-select select:hover {
710 color: #2F2F2F;
711 }
712 .merchant-metabox-field-select select:focus {
713 outline: none;
714 -webkit-box-shadow: none;
715 box-shadow: none;
716 border-color: #3858E9;
717 }
718 .merchant-metabox-field-select select option {
719 color: #2F2F2F;
720 }
721
722 .merchant-metabox-field-choices-images {
723 display: -webkit-box;
724 display: -ms-flexbox;
725 display: flex;
726 -ms-flex-wrap: wrap;
727 flex-wrap: wrap;
728 grid-gap: 2px;
729 }
730 .merchant-metabox-field-choices-images label {
731 display: -webkit-box;
732 display: -ms-flexbox;
733 display: flex;
734 -webkit-user-select: none;
735 -moz-user-select: none;
736 -ms-user-select: none;
737 user-select: none;
738 }
739 .merchant-metabox-field-choices-images figure {
740 padding: 4px;
741 margin: 0;
742 border: 2px solid transparent;
743 border-radius: 4px;
744 -webkit-transition: all 0.2s;
745 transition: all 0.2s;
746 max-width: 80px;
747 max-height: 80px;
748 }
749 .merchant-metabox-field-choices-images figure img {
750 width: 100%;
751 vertical-align: top;
752 }
753 .merchant-metabox-field-choices-images input {
754 display: none;
755 }
756 .merchant-metabox-field-choices-images input:checked + figure {
757 border-color: #1e1e1e;
758 }
759 .merchant-metabox-field-choices-images input:checked + figure:before {
760 left: 26px;
761 }
762
763 .merchant-metabox-field-uploads-thumbnail {
764 border-right: 1px solid #e5e5e5;
765 margin-right: 10px;
766 padding-right: 10px;
767 position: relative;
768 }
769
770 .merchant-metabox-field-uploads-thumbnail-remove {
771 position: absolute;
772 left: -8px;
773 top: -7px;
774 background: white;
775 border-radius: 50%;
776 color: #d58f90;
777 font-size: 18px;
778 width: 18px;
779 height: 18px;
780 }
781 .merchant-metabox-field-uploads-thumbnail-remove:hover {
782 color: #a00;
783 }
784
785 .merchant-metabox-field-uploads-thumbnail-upload {
786 display: -webkit-box;
787 display: -ms-flexbox;
788 display: flex;
789 -webkit-box-pack: center;
790 -ms-flex-pack: center;
791 justify-content: center;
792 -webkit-box-align: center;
793 -ms-flex-align: center;
794 align-items: center;
795 width: 40px;
796 height: 40px;
797 border: 1px solid #e5e5e5;
798 -webkit-box-sizing: border-box;
799 box-sizing: border-box;
800 color: #d4d4d4;
801 font-size: 25px;
802 font-weight: 200;
803 text-decoration: none;
804 }
805 .merchant-metabox-field-uploads-thumbnail-upload img {
806 width: 100%;
807 height: 100%;
808 -o-object-fit: cover;
809 object-fit: cover;
810 -o-object-position: center center;
811 object-position: center center;
812 }
813
814 .merchant-metabox-field-repeater-move,
815 .merchant-metabox-field-repeater-remove,
816 .merchant-metabox-field-flexible-content-move,
817 .merchant-metabox-field-flexible-content-remove {
818 cursor: pointer;
819 padding: 5px;
820 width: auto;
821 height: auto;
822 -webkit-user-select: none;
823 -moz-user-select: none;
824 -ms-user-select: none;
825 user-select: none;
826 color: #1e1e1e;
827 opacity: 0.5;
828 -webkit-transition: all 0.2s;
829 transition: all 0.2s;
830 }
831 .merchant-metabox-field-repeater-move:hover,
832 .merchant-metabox-field-repeater-remove:hover,
833 .merchant-metabox-field-flexible-content-move:hover,
834 .merchant-metabox-field-flexible-content-remove:hover {
835 opacity: 1;
836 }
837
838 .merchant-metabox-field-repeater-remove,
839 .merchant-metabox-field-flexible-content-remove {
840 color: #a00;
841 font-size: 18px;
842 }
843
844 .merchant-metabox-field-uploads-content,
845 .merchant-metabox-field-repeater-content {
846 display: -webkit-box;
847 display: -ms-flexbox;
848 display: flex;
849 -webkit-box-orient: vertical;
850 -webkit-box-direction: normal;
851 -ms-flex-direction: column;
852 flex-direction: column;
853 -webkit-box-align: start;
854 -ms-flex-align: start;
855 align-items: flex-start;
856 }
857 .merchant-metabox-field-uploads-content ul,
858 .merchant-metabox-field-repeater-content ul {
859 margin: 0;
860 padding: 0;
861 list-style: none;
862 width: 100%;
863 }
864 .merchant-metabox-field-uploads-content ul li,
865 .merchant-metabox-field-repeater-content ul li {
866 margin: 0;
867 padding: 0;
868 display: -webkit-box;
869 display: -ms-flexbox;
870 display: flex;
871 -webkit-box-align: center;
872 -ms-flex-align: center;
873 align-items: center;
874 -webkit-box-pack: start;
875 -ms-flex-pack: start;
876 justify-content: flex-start;
877 margin-bottom: 10px;
878 }
879 .merchant-metabox-field-uploads-content ul li.hidden,
880 .merchant-metabox-field-repeater-content ul li.hidden {
881 display: none;
882 }
883 .merchant-metabox-field-uploads-content ul li span,
884 .merchant-metabox-field-repeater-content ul li span {
885 font-size: 20px;
886 padding: 5px;
887 width: auto;
888 height: auto;
889 -webkit-user-select: none;
890 -moz-user-select: none;
891 -ms-user-select: none;
892 user-select: none;
893 }
894 .merchant-metabox-field-uploads-content input,
895 .merchant-metabox-field-repeater-content input {
896 width: 50%;
897 max-width: 100%;
898 max-width: 100%;
899 margin-right: 5px;
900 }
901 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field,
902 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field {
903 display: -webkit-box;
904 display: -ms-flexbox;
905 display: flex;
906 margin-right: 5px;
907 }
908 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field input,
909 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field input {
910 width: 100%;
911 }
912 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-field span,
913 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-field span {
914 font-size: 14px;
915 }
916 .merchant-metabox-field-uploads-content .merchant-metabox-field-repeater-list-item-fields,
917 .merchant-metabox-field-repeater-content .merchant-metabox-field-repeater-list-item-fields {
918 display: -webkit-box;
919 display: -ms-flexbox;
920 display: flex;
921 -webkit-box-align: center;
922 -ms-flex-align: center;
923 align-items: center;
924 -webkit-box-pack: start;
925 -ms-flex-pack: start;
926 justify-content: flex-start;
927 }
928
929 .merchant-metabox-field-size-chart ul {
930 margin: 0;
931 padding: 0;
932 list-style: none;
933 }
934 .merchant-metabox-field-size-chart ul li {
935 margin-bottom: 20px;
936 }
937 .merchant-metabox-field-size-chart ul li.hidden {
938 display: none;
939 }
940 .merchant-metabox-field-size-chart table {
941 width: 100%;
942 border-spacing: 0;
943 border-collapse: collapse;
944 background-color: #fff;
945 }
946 .merchant-metabox-field-size-chart table th,
947 .merchant-metabox-field-size-chart table td {
948 padding: 15px;
949 border: 1px solid rgba(0, 0, 0, 0.1);
950 }
951 .merchant-metabox-field-size-chart table th:last-child,
952 .merchant-metabox-field-size-chart table td:last-child {
953 width: 1%;
954 min-width: 75px;
955 }
956 .merchant-metabox-field-size-chart table thead {
957 text-align: center;
958 }
959 .merchant-metabox-field-size-chart table thead label {
960 display: -webkit-inline-box;
961 display: -ms-inline-flexbox;
962 display: inline-flex;
963 grid-gap: 5px;
964 -webkit-box-pack: center;
965 -ms-flex-pack: center;
966 justify-content: center;
967 -webkit-box-align: center;
968 -ms-flex-align: center;
969 align-items: center;
970 }
971 .merchant-metabox-field-size-chart table tbody input {
972 width: 100%;
973 max-width: 100%;
974 text-align: center;
975 }
976 .merchant-metabox-field-size-chart table tbody tr:nth-child(2) td:not(:last-child) {
977 background-color: #eee;
978 }
979 .merchant-metabox-field-size-chart table tfoot {
980 text-align: right;
981 }
982 .merchant-metabox-field-size-chart .merchant-buttons {
983 display: -webkit-box;
984 display: -ms-flexbox;
985 display: flex;
986 grid-gap: 10px;
987 -webkit-box-pack: center;
988 -ms-flex-pack: center;
989 justify-content: center;
990 -webkit-box-align: center;
991 -ms-flex-align: center;
992 align-items: center;
993 }
994 .merchant-metabox-field-size-chart .merchant-buttons a {
995 display: -webkit-box;
996 display: -ms-flexbox;
997 display: flex;
998 -webkit-box-pack: center;
999 -ms-flex-pack: center;
1000 justify-content: center;
1001 -webkit-box-align: center;
1002 -ms-flex-align: center;
1003 align-items: center;
1004 width: 16px;
1005 height: 16px;
1006 font-size: 14px;
1007 line-height: 1em;
1008 font-weight: bold;
1009 padding: 2px;
1010 border-radius: 4px;
1011 -webkit-user-select: none;
1012 -moz-user-select: none;
1013 -ms-user-select: none;
1014 user-select: none;
1015 -webkit-box-shadow: none;
1016 box-shadow: none;
1017 text-decoration: none;
1018 }
1019 .merchant-metabox-field-size-chart .merchant-buttons a:active {
1020 opacity: 0.5;
1021 }
1022 .merchant-metabox-field-size-chart .merchant-add-col,
1023 .merchant-metabox-field-size-chart .merchant-add-row {
1024 color: #27ae60;
1025 background-color: #d5f5e3;
1026 }
1027 .merchant-metabox-field-size-chart .merchant-del-col,
1028 .merchant-metabox-field-size-chart .merchant-del-row {
1029 color: #e74c3c;
1030 background-color: #f2d7d5;
1031 }
1032 .merchant-metabox-field-size-chart .merchant-remove {
1033 color: #fff;
1034 border-color: #d50204;
1035 background: #d50204;
1036 }
1037 .merchant-metabox-field-size-chart .merchant-remove:hover, .merchant-metabox-field-size-chart .merchant-remove:focus {
1038 border-color: #b32d2e;
1039 background: #b32d2e;
1040 }
1041 .merchant-metabox-field-size-chart .merchant-remove:focus {
1042 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
1043 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
1044 }
1045 .merchant-metabox-field-size-chart .merchant-remove:active {
1046 border-color: #b32d2e;
1047 background: #b32d2e;
1048 }
1049 .merchant-metabox-field-size-chart .merchant-duplicate {
1050 display: -webkit-box;
1051 display: -ms-flexbox;
1052 display: flex;
1053 -webkit-box-pack: center;
1054 -ms-flex-pack: center;
1055 justify-content: center;
1056 -webkit-box-align: center;
1057 -ms-flex-align: center;
1058 align-items: center;
1059 -webkit-user-select: none;
1060 -moz-user-select: none;
1061 -ms-user-select: none;
1062 user-select: none;
1063 -webkit-box-shadow: none;
1064 box-shadow: none;
1065 text-decoration: none;
1066 color: #000;
1067 -webkit-transition: all 0.2s;
1068 transition: all 0.2s;
1069 }
1070 .merchant-metabox-field-size-chart .merchant-duplicate:hover, .merchant-metabox-field-size-chart .merchant-duplicate:active {
1071 opacity: 0.5;
1072 }
1073 .merchant-metabox-field-size-chart .merchant-duplicate i {
1074 width: auto;
1075 height: auto;
1076 font-size: 20px;
1077 }
1078
1079 .merchant-metabox-field-media figure {
1080 display: -webkit-box;
1081 display: -ms-flexbox;
1082 display: flex;
1083 -webkit-box-pack: center;
1084 -ms-flex-pack: center;
1085 justify-content: center;
1086 -webkit-box-align: center;
1087 -ms-flex-align: center;
1088 align-items: center;
1089 margin: 0;
1090 padding: 5px;
1091 width: 75px;
1092 height: 75px;
1093 border: 1px solid #e5e5e5;
1094 background-color: #fff;
1095 -webkit-box-sizing: border-box;
1096 box-sizing: border-box;
1097 }
1098 .merchant-metabox-field-media figure img {
1099 max-width: 100%;
1100 height: auto;
1101 }
1102 .merchant-metabox-field-media input {
1103 display: none;
1104 }
1105 .merchant-metabox-field-media .merchant-button-remove {
1106 color: #b32d2e;
1107 border-color: #b32d2e;
1108 background: #fff8f8;
1109 }
1110 .merchant-metabox-field-media .merchant-button-remove:hover, .merchant-metabox-field-media .merchant-button-remove:focus, .merchant-metabox-field-media .merchant-button-remove:active {
1111 color: #b32d2e;
1112 border-color: #b32d2e;
1113 background: #fff0f0;
1114 }
1115 .merchant-metabox-field-media .merchant-button-remove:focus {
1116 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
1117 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #b32d2e;
1118 }
1119
1120 .merchant-metabox-field-select-ajax select {
1121 display: none;
1122 width: 100%;
1123 }
1124 .merchant-metabox-field-select-ajax ul {
1125 margin: 0;
1126 padding: 0;
1127 list-style: none;
1128 vertical-align: top;
1129 }
1130 .merchant-metabox-field-select-ajax ul li {
1131 margin: 0;
1132 padding: 0;
1133 }
1134 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1135 width: auto;
1136 display: inline;
1137 padding: 0;
1138 }
1139 .merchant-metabox-field-select-ajax .select2-container .select2-search--inline .select2-search__field {
1140 margin: 0;
1141 padding: 0;
1142 }
1143 .merchant-metabox-field-select-ajax .select2-container--default.select2-container--focus .select2-selection--multiple {
1144 border-color: #aaa;
1145 }
1146 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple {
1147 padding: 0 5px;
1148 }
1149 .merchant-metabox-field-select-ajax .select2-container--default .select2-selection--multiple .select2-selection__choice {
1150 margin-left: 0;
1151 }
1152 .merchant-metabox-field-select-ajax .merchant-select2-clear {
1153 display: block;
1154 width: 100%;
1155 clear: both;
1156 }
1157 .merchant-metabox-field-select-ajax .merchant-metabox-field-content {
1158 min-height: 32px;
1159 }
1160
1161 .merchant-metabox-field-wc-attributes ul {
1162 margin: 0;
1163 padding: 0;
1164 list-style: none;
1165 display: -webkit-box;
1166 display: -ms-flexbox;
1167 display: flex;
1168 grid-gap: 5px;
1169 -webkit-box-orient: vertical;
1170 -webkit-box-direction: normal;
1171 -ms-flex-direction: column;
1172 flex-direction: column;
1173 }
1174 .merchant-metabox-field-wc-attributes ul li {
1175 margin: 0;
1176 padding: 0;
1177 display: -webkit-box;
1178 display: -ms-flexbox;
1179 display: flex;
1180 max-width: 300px;
1181 -webkit-box-align: center;
1182 -ms-flex-align: center;
1183 align-items: center;
1184 border: 1px solid #e5e5e5;
1185 background-color: #fdfdfd;
1186 border-radius: 3px;
1187 }
1188 .merchant-metabox-field-wc-attributes ul li:hover {
1189 border-color: #ccc;
1190 }
1191 .merchant-metabox-field-wc-attributes ul li label {
1192 display: -webkit-box;
1193 display: -ms-flexbox;
1194 display: flex;
1195 grid-gap: 5px;
1196 -webkit-box-align: center;
1197 -ms-flex-align: center;
1198 align-items: center;
1199 -webkit-box-flex: 1;
1200 -ms-flex: 1;
1201 flex: 1;
1202 padding: 8px;
1203 -webkit-user-select: none;
1204 -moz-user-select: none;
1205 -ms-user-select: none;
1206 user-select: none;
1207 }
1208 .merchant-metabox-field-wc-attributes ul li label input {
1209 margin: 0;
1210 }
1211 .merchant-metabox-field-wc-attributes ul li .merchant-sortable-move {
1212 cursor: pointer;
1213 padding: 8px;
1214 }
1215
1216 .merchant-metabox-field-code-editor .CodeMirror-wrap {
1217 border: 1px solid #eee;
1218 }
1219
1220 .merchant-metabox-field-media-content {
1221 display: -webkit-box;
1222 display: -ms-flexbox;
1223 display: flex;
1224 grid-gap: 10px;
1225 -webkit-box-align: center;
1226 -ms-flex-align: center;
1227 align-items: center;
1228 }
1229
1230 .merchant-metabox-field-media-button {
1231 -webkit-box-flex: 1;
1232 -ms-flex: 1;
1233 flex: 1;
1234 display: -webkit-box;
1235 display: -ms-flexbox;
1236 display: flex;
1237 grid-gap: 5px;
1238 }
1239
1240 .merchant-metabox-field-no-padding {
1241 padding-top: 0;
1242 padding-bottom: 0;
1243 }
1244
1245 body:not(.block-editor-page) #merchant_metabox .inside {
1246 margin: 0;
1247 padding: 0;
1248 }
1249
1250 #side-sortables .merchant-metabox-tabs {
1251 display: none;
1252 }
1253 #side-sortables .merchant-metabox-content-title,
1254 #side-sortables .merchant-metabox-content:not(.active) {
1255 display: block;
1256 }
1257 #side-sortables .merchant-metabox-field {
1258 grid-gap: 8px;
1259 padding: 10px 15px;
1260 -webkit-box-orient: vertical;
1261 -webkit-box-direction: normal;
1262 -ms-flex-direction: column;
1263 flex-direction: column;
1264 }
1265 #side-sortables .merchant-metabox-field-title {
1266 width: auto;
1267 font-size: 12px;
1268 }
1269 #side-sortables .merchant-metabox-field-title:empty {
1270 display: none;
1271 }
1272 #side-sortables .merchant-metabox-contents {
1273 border-left: none;
1274 border-right: none;
1275 }
1276 #side-sortables #merchant_metabox .postbox-header {
1277 border-top: none;
1278 }
1279 #side-sortables #merchant_metabox .postbox-header h2 {
1280 color: #1e1e1e;
1281 padding: 0 0 0 15px;
1282 font-size: 13px;
1283 font-weight: 500;
1284 }
1285 #side-sortables #merchant_metabox .inside {
1286 padding: 0;
1287 }
1288 #side-sortables .merchant-metabox-field-text input,
1289 #side-sortables .merchant-metabox-field-uploads-content input,
1290 #side-sortables .merchant-metabox-field-repeater-content input {
1291 width: 100%;
1292 }
1293
1294 .merchant-metabox-field-flexible-content-list {
1295 display: -webkit-box;
1296 display: -ms-flexbox;
1297 display: flex;
1298 -webkit-box-orient: vertical;
1299 -webkit-box-direction: normal;
1300 -ms-flex-direction: column;
1301 flex-direction: column;
1302 width: 100%;
1303 grid-gap: 10px;
1304 }
1305 .merchant-metabox-field-flexible-content-list.empty {
1306 border: 2px dashed #dcdcde;
1307 min-height: 100px;
1308 }
1309
1310 .merchant-metabox-field-flexible-content-item {
1311 border: 1px solid #c3c4c7;
1312 border-left: 3px solid #3858e9;
1313 }
1314 .merchant-metabox-field-flexible-content-item:first-child {
1315 display: none;
1316 }
1317
1318 .merchant-metabox-field-flexible-content-item-content {
1319 display: -webkit-box;
1320 display: -ms-flexbox;
1321 display: flex;
1322 -webkit-box-orient: vertical;
1323 -webkit-box-direction: normal;
1324 -ms-flex-direction: column;
1325 flex-direction: column;
1326 grid-gap: 10px;
1327 padding: 15px;
1328 }
1329 .merchant-metabox-field-flexible-content-item-content > div {
1330 display: -webkit-box;
1331 display: -ms-flexbox;
1332 display: flex;
1333 grid-gap: 10px;
1334 }
1335 .merchant-metabox-field-flexible-content-item-content > div:not(:last-child) > div {
1336 border-bottom: 1px solid #f3f3f3;
1337 padding-bottom: 15px;
1338 }
1339 .merchant-metabox-field-flexible-content-item-content > div label {
1340 width: 200px;
1341 }
1342 .merchant-metabox-field-flexible-content-item-content > div > div {
1343 width: calc(100% - 200px);
1344 }
1345
1346 .merchant-metabox-field-flexible-content-item-title {
1347 margin-left: 10px;
1348 font-weight: bold;
1349 }
1350
1351 .merchant-metabox-field-flexible-content-item-actions {
1352 display: -webkit-box;
1353 display: -ms-flexbox;
1354 display: flex;
1355 -webkit-box-pack: end;
1356 -ms-flex-pack: end;
1357 justify-content: flex-end;
1358 -webkit-box-flex: 1;
1359 -ms-flex-positive: 1;
1360 flex-grow: 1;
1361 }
1362
1363 .merchant-metabox-field-flexible-content-item-header {
1364 display: -webkit-box;
1365 display: -ms-flexbox;
1366 display: flex;
1367 -webkit-box-align: center;
1368 -ms-flex-align: center;
1369 align-items: center;
1370 padding: 10px 15px;
1371 border-bottom: 1px solid #f3f3f3;
1372 }
1373
1374 .merchant-metabox-field-flexible-content-item-count {
1375 border-radius: 50%;
1376 width: 24px;
1377 height: 23px;
1378 border: 1px solid #949494;
1379 text-align: center;
1380 display: -webkit-box;
1381 display: -ms-flexbox;
1382 display: flex;
1383 -webkit-box-pack: center;
1384 -ms-flex-pack: center;
1385 justify-content: center;
1386 -webkit-box-orient: vertical;
1387 -webkit-box-direction: normal;
1388 -ms-flex-direction: column;
1389 flex-direction: column;
1390 font-size: 12px;
1391 font-weight: bold;
1392 }
1393
1394 .merchant-metabox-field-flexible-content-add-wrapper {
1395 position: relative;
1396 display: inline-block;
1397 }
1398
1399 .merchant-metabox-field-flexible-content-add-list {
1400 opacity: 0;
1401 visibility: hidden;
1402 position: absolute;
1403 background-color: #ffffff;
1404 border: 1px solid #c3c4c7;
1405 border-left: 3px solid #3858e9;
1406 -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
1407 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1019607843);
1408 width: 180px;
1409 bottom: 100%;
1410 display: -webkit-box;
1411 display: -ms-flexbox;
1412 display: flex;
1413 -webkit-box-orient: vertical;
1414 -webkit-box-direction: normal;
1415 -ms-flex-direction: column;
1416 flex-direction: column;
1417 left: 50%;
1418 -webkit-transform: translate(-50%, 10px);
1419 transform: translate(-50%, 10px);
1420 padding: 3px 3px 3px 5px;
1421 }
1422 .merchant-metabox-field-flexible-content-add-list.active {
1423 z-index: 10;
1424 opacity: 1;
1425 visibility: visible;
1426 -webkit-transform: translate(-50%, -15px);
1427 transform: translate(-50%, -15px);
1428 -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
1429 transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
1430 }
1431 .merchant-metabox-field-flexible-content-add-list:before, .merchant-metabox-field-flexible-content-add-list:after {
1432 position: absolute;
1433 z-index: -1;
1434 content: "";
1435 border-style: solid;
1436 -webkit-transition-duration: 0.3s;
1437 transition-duration: 0.3s;
1438 -webkit-transition-property: -webkit-transform;
1439 transition-property: -webkit-transform;
1440 transition-property: transform;
1441 transition-property: transform, -webkit-transform;
1442 }
1443 .merchant-metabox-field-flexible-content-add-list:before {
1444 right: calc(50% - 12px);
1445 bottom: -14px;
1446 border-width: 14px 14px 0 15px;
1447 border-color: #c3c4c7 transparent transparent transparent;
1448 }
1449 .merchant-metabox-field-flexible-content-add-list:after {
1450 content: "";
1451 right: calc(50% - 10px);
1452 bottom: -12px;
1453 border-width: 12px 12px 0 13px;
1454 border-color: #ffffff transparent transparent transparent;
1455 }
1456
1457 .merchant-metabox-field-flexible-content-add {
1458 display: block;
1459 -ms-flex-negative: 0;
1460 flex-shrink: 0;
1461 padding: 10px;
1462 text-decoration: none;
1463 }
1464 .merchant-metabox-field-flexible-content-add:hover {
1465 background: #f0f0f1;
1466 }
1467
1468 .merchant-metabox-field-input-container {
1469 display: -webkit-box;
1470 display: -ms-flexbox;
1471 display: flex;
1472 }
1473
1474 .merchant-metabox-field-append,
1475 .merchant-metabox-field-prepend {
1476 background: #f0f0f1;
1477 border: 1px solid #8c8f94;
1478 -webkit-box-align: center;
1479 -ms-flex-align: center;
1480 align-items: center;
1481 display: -webkit-box;
1482 display: -ms-flexbox;
1483 display: flex;
1484 position: relative;
1485 padding: 0 8px;
1486 }
1487
1488 .merchant-metabox-field-append {
1489 font-size: 12px;
1490 margin-left: -7px;
1491 -ms-flex-negative: 0;
1492 flex-shrink: 0;
1493 border-top-right-radius: 5px;
1494 border-bottom-right-radius: 5px;
1495 }
1496
1497 .merchant-metabox-field-prepend {
1498 font-size: 14px;
1499 margin-right: -3px;
1500 padding: 0 10px;
1501 margin-left: 4px;
1502 border-top-left-radius: 5px;
1503 border-bottom-left-radius: 5px;
1504 }
1505
1506 .merchant-pcr-app {
1507 position: absolute;
1508 top: 100% !important;
1509 left: 0 !important;
1510 z-index: 9999;
1511 margin-top: 10px;
1512 }
1513
1514 .merchant-metabox-color-field {
1515 display: -webkit-box;
1516 display: -ms-flexbox;
1517 display: flex;
1518 -webkit-box-align: center;
1519 -ms-flex-align: center;
1520 align-items: center;
1521 gap: 10px;
1522 position: relative;
1523 }
1524 .merchant-metabox-color-field .merchant-color-picker {
1525 cursor: pointer;
1526 width: 36px;
1527 height: 36px;
1528 min-width: 36px;
1529 min-height: 36px;
1530 border: 1px solid rgba(0, 0, 0, 0.1);
1531 border-radius: 4px;
1532 -webkit-transition: border-color 0.2s ease;
1533 transition: border-color 0.2s ease;
1534 }
1535 .merchant-metabox-color-field .merchant-color-picker:hover {
1536 border-color: rgba(0, 0, 0, 0.3);
1537 }
1538 .merchant-metabox-color-field .merchant-color-input {
1539 width: 100px;
1540 max-width: 100%;
1541 padding: 4px 10px;
1542 border: 1px solid #8c8f94;
1543 border-radius: 4px;
1544 display: block;
1545 text-align: center;
1546 }
1547
1548 .merchant-range {
1549 display: -webkit-box;
1550 display: -ms-flexbox;
1551 display: flex;
1552 -webkit-box-align: center;
1553 -ms-flex-align: center;
1554 align-items: center;
1555 gap: 15px;
1556 width: 100%;
1557 }
1558 .merchant-range .merchant-range-input {
1559 -webkit-appearance: none;
1560 width: 100%;
1561 height: 4px;
1562 border-radius: 5px;
1563 background: #e2e2e2;
1564 outline: none;
1565 padding: 0;
1566 margin: 0;
1567 }
1568 .merchant-range .merchant-range-input::-webkit-slider-thumb {
1569 -webkit-appearance: none;
1570 appearance: none;
1571 width: 14px;
1572 height: 14px;
1573 border-radius: 50%;
1574 background: #3858e9;
1575 cursor: pointer;
1576 -webkit-transition: background 0.15s ease-in-out;
1577 transition: background 0.15s ease-in-out;
1578 -webkit-box-shadow: 0 0 0 1px #3858e9;
1579 box-shadow: 0 0 0 1px #3858e9;
1580 }
1581 .merchant-range .merchant-range-input::-moz-range-thumb {
1582 width: 14px;
1583 height: 14px;
1584 border: 0;
1585 border-radius: 50%;
1586 background: #3858e9;
1587 cursor: pointer;
1588 -moz-transition: background 0.15s ease-in-out;
1589 transition: background 0.15s ease-in-out;
1590 box-shadow: 0 0 0 1px #3858e9;
1591 }
1592 .merchant-range .merchant-range-number-input {
1593 width: 70px;
1594 min-width: 70px;
1595 padding: 5px 10px;
1596 text-align: center;
1597 border: 1px solid #d6d6d6;
1598 border-radius: 4px;
1599 font-size: 13px;
1600 color: #1e1e1e;
1601 }
1602 .merchant-range .merchant-range-number-input:focus {
1603 border-color: #3858e9;
1604 outline: none;
1605 }
1606 .merchant-range .merchant-range-number-input::-webkit-inner-spin-button, .merchant-range .merchant-range-number-input::-webkit-outer-spin-button {
1607 -webkit-appearance: none;
1608 margin: 0;
1609 }
1610 .merchant-range .merchant-range-number-input {
1611 -moz-appearance: textfield;
1612 }
1613 .merchant-range .merchant-range-unit {
1614 color: #757575;
1615 font-size: 13px;
1616 margin-left: -10px;
1617 }
1618
1619 body.rtl .merchant-range .merchant-range-unit {
1620 margin-left: 0;
1621 margin-right: -10px;
1622 }
1623
1624 @media only screen and (max-width: 991px) {
1625 .merchant-metabox-tabs {
1626 display: none;
1627 }
1628 .merchant-metabox-content-title,
1629 .merchant-metabox-content:not(.active) {
1630 display: block;
1631 }
1632 .merchant-metabox-field {
1633 grid-gap: 8px;
1634 padding: 15px;
1635 -webkit-box-orient: vertical;
1636 -webkit-box-direction: normal;
1637 -ms-flex-direction: column;
1638 flex-direction: column;
1639 }
1640 .merchant-metabox-field-title {
1641 width: auto;
1642 }
1643 .merchant-metabox-field-title:empty {
1644 display: none;
1645 }
1646 .merchant-metabox-contents {
1647 border-left: none;
1648 border-right: none;
1649 }
1650 #merchant_metabox .inside {
1651 padding: 0;
1652 }
1653 .merchant-metabox-field-text input,
1654 .merchant-metabox-field-uploads-content input,
1655 .merchant-metabox-field-repeater-content input {
1656 width: 100%;
1657 }
1658 }
1659 .rtl .merchant-metabox-tabs a:before {
1660 right: 0;
1661 left: unset;
1662 }
1663 .rtl .merchant-metabox-tabs {
1664 margin-left: unset;
1665 margin-right: -20px;
1666 }
1667 .rtl .merchant-metabox-field-append {
1668 border-radius: 5px;
1669 }
1670 .rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item {
1671 border-left: 1px solid #c3c4c7;
1672 border-right: 3px solid #3858e9;
1673 }
1674 .rtl .merchant-metabox-contents .merchant-metabox-field-flexible-content-item-title {
1675 margin-left: unset;
1676 margin-right: 10px;
1677 }