PluginProbe
Addonify – Quick View For WooCommerce / trunk
Addonify – Quick View For WooCommerce vtrunk
1.0.8 1.0.9 1.1.0 1.1.1 1.1.2 1.1.4 1.1.5 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.10 1.2.11 1.2.12 1.2.13 1.2.14 1.2.15 1.2.16 1.2.17 1.2.2 1.2.3 1.2.4 1.2.5 All 44 releases
addonify-quick-view / admin / admin.css

admin.css in Addonify – Quick View For WooCommerce trunk, at admin/admin.css

1,195 lines 28.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap);
2
3 :root {
4 --addonify_primary_color: #0286e7;
5 --addonify_seconary_color: #00b32a;
6 --addonify_base_text_color: #585858;
7 --addonify_base_link_color: #0366e0;
8 --addonify_base_link_hover_color: var(--addonify_seconary_color);
9 --addonify_border_color: #d5d5d5;
10 --addonify_button_text_color: #fff;
11 --addonify_button_background_color: #0286e7;
12 --addonify_button_hover_text_color: #fff;
13 --addonify_button_hover_background_color: #00b32a;
14 --addonify_button_border_color: transparent;
15 --addonify_button_hover_border_color: transparent;
16 --addonify_button_border_width: 0;
17 --addonify_button_border_style: solid;
18 --addonify_text_button_color: var(--addonify_primary_color);
19 --addonify_text_button_hover_color: var(--addonify_seconary_color);
20 --addonify_text_button_underline_color: var(--addonify_primary_color);
21 --addonify_text_button_hover_underline_color: var(--addonify_seconary_color);
22 --addonify_text_button_underline_height: 3px;
23 --addonify_button_is_link_style_text_color: #ef2c2c;
24 --addonify_button_is_link_style_hover_text_color: #1e73be;
25 --addonify_button_is_link_style_underline_color: #ef2c2c;
26 --addonify_button_is_link_style_hover_underline_color: #1e73be;
27 --addonify_system_font_family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, Inter, Roboto, Segoe ui, System ui, sans-serif;
28 --addonify_monospace_font_family: monospace;
29 --addonify_font_family: "Inter", sans-serif;
30 --addonify_button_font_size: 15px;
31 --addonify_button_font_weight: normal;
32 --addonify_button_line_height: 1;
33 --addonify_buttons_border_radius: 4px
34 }
35
36 [class*=page_addonify_quick_view] input[type=date],
37 [class*=page_addonify_quick_view] input[type=datetime-local],
38 [class*=page_addonify_quick_view] input[type=datetime],
39 [class*=page_addonify_quick_view] input[type=email],
40 [class*=page_addonify_quick_view] input[type=month],
41 [class*=page_addonify_quick_view] input[type=number],
42 [class*=page_addonify_quick_view] input[type=password],
43 [class*=page_addonify_quick_view] input[type=search],
44 [class*=page_addonify_quick_view] input[type=tel],
45 [class*=page_addonify_quick_view] input[type=text],
46 [class*=page_addonify_quick_view] input[type=time],
47 [class*=page_addonify_quick_view] input[type=url],
48 [class*=page_addonify_quick_view] input[type=week] {
49 --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
50 background: transparent;
51 background-color: transparent;
52 border: none;
53 border-radius: 0;
54 box-shadow: none;
55 color: var(--el-input-text-color, var(--el-text-color-regular));
56 font-family: var(--addonify_font_family);
57 line-height: var(--el-input-inner-height);
58 margin: 0;
59 min-height: auto;
60 padding: 0
61 }
62
63 [class*=page_addonify_quick_view] input[type=date]:focus,
64 [class*=page_addonify_quick_view] input[type=datetime-local]:focus,
65 [class*=page_addonify_quick_view] input[type=datetime]:focus,
66 [class*=page_addonify_quick_view] input[type=email]:focus,
67 [class*=page_addonify_quick_view] input[type=month]:focus,
68 [class*=page_addonify_quick_view] input[type=number]:focus,
69 [class*=page_addonify_quick_view] input[type=password]:focus,
70 [class*=page_addonify_quick_view] input[type=search]:focus,
71 [class*=page_addonify_quick_view] input[type=tel]:focus,
72 [class*=page_addonify_quick_view] input[type=text]:focus,
73 [class*=page_addonify_quick_view] input[type=time]:focus,
74 [class*=page_addonify_quick_view] input[type=url]:focus,
75 [class*=page_addonify_quick_view] input[type=week]:focus {
76 box-shadow: none;
77 outline: none
78 }
79
80 [class*=page_addonify_quick_view] input.readonly,
81 [class*=page_addonify_quick_view] input[readonly],
82 [class*=page_addonify_quick_view] textarea.readonly,
83 [class*=page_addonify_quick_view] textarea[readonly] {
84 -el-input-inner-height: calc(var(--el-input-height, 40px) - 2px);
85 background-color: transparent
86 }
87
88 .adfy-button {
89 fill: var(--addonify_button_text_color);
90 align-items: center;
91 background-color: var(--addonify_button_background_color);
92 border-color: var(--addonify_button_border_color);
93 border-radius: var(--addonify_buttons_border_radius);
94 border-style: var(--addonify_button_border_style);
95 border-width: var(--addonify_button_border_width);
96 color: var(--addonify_button_text_color);
97 cursor: pointer;
98 display: inline-flex;
99 flex-direction: row;
100 font-family: var(--addonify_font_family);
101 font-size: var(--addonify_button_font_size);
102 font-weight: 400;
103 line-height: var(--addonify_button_line_height);
104 padding: 15px 20px;
105 text-decoration: none;
106 transition: all .5s ease
107 }
108
109 .adfy-button .icon {
110 margin-right: 5px
111 }
112
113 .adfy-button:hover {
114 fill: var(--addonify_button_hover_text_color);
115 background-color: var(--addonify_button_hover_background_color);
116 border-color: var(--addonify_button_hover_border_color);
117 color: var(--addonify_button_hover_text_color);
118 text-decoration: none
119 }
120
121 .adfy-button:disabled {
122 fill: #ababab;
123 background-color: #c5c5c5;
124 color: #ababab;
125 cursor: not-allowed
126 }
127
128 .adfy-button .loading-icon {
129 display: none
130 }
131
132 .adfy-button .loading-icon svg {
133 animation: spinner 1s linear infinite;
134 color: #fff;
135 display: inline-flex;
136 height: 14px;
137 width: 14px
138 }
139
140 .adfy-button[loading=true] {
141 cursor: not-allowed;
142 display: inline-flex;
143 gap: 10px
144 }
145
146 .adfy-button[loading=true] .loading-icon {
147 display: inline-flex
148 }
149
150 .adfy-button.fake-button {
151 fill: var(--addonify_base_text_color);
152 background-color: transparent;
153 border: none;
154 border-radius: 0;
155 color: var(--addonify_base_text_color);
156 height: auto;
157 padding: 0
158 }
159
160 .adfy-button.fake-button:hover {
161 fill: var(--addonify_secondary_color);
162 background-color: transparent;
163 border: none;
164 color: var(--addonify_secondary_color);
165 text-decoration: none
166 }
167
168 .adfy-button.fake-button:focus {
169 background-color: transparent;
170 outline: none;
171 text-decoration: none
172 }
173
174 .adfy-button.fake-button.has-underline {
175 position: relative
176 }
177
178 .adfy-button.fake-button.has-underline:after,
179 .adfy-button.fake-button.has-underline:before {
180 background-color: currentColor;
181 bottom: -10px;
182 content: "";
183 height: 3px;
184 left: 0;
185 position: absolute;
186 width: 100%
187 }
188
189 .adfy-button.fake-button.has-underline:before {
190 -webkit-backface-visibility: hidden;
191 background-color: currentColor;
192 content: "";
193 transform: scaleX(0);
194 transform-origin: right center;
195 transition: transform .26s cubic-bezier(.25, .8, .25, 1);
196 will-change: scale;
197 z-index: 1
198 }
199
200 .adfy-button.fake-button.has-underline:after {
201 background-color: currentColor;
202 bottom: -10px;
203 content: "";
204 height: 3px;
205 left: 0;
206 opacity: .5;
207 position: absolute;
208 width: 100%
209 }
210
211 .adfy-button.fake-button.has-underline:hover {
212 fill: var(--addonify_primary_color);
213 color: var(--addonify_primary_color)
214 }
215
216 .adfy-button.fake-button.has-underline:hover:before {
217 background-color: var(--addonify_primary_color);
218 transform: scale(1);
219 transform-origin: left center
220 }
221
222 .adfy-loading {
223 display: block;
224 margin: 50px 0;
225 position: relative
226 }
227
228 .adfy-loading .pulse {
229 height: 30px;
230 left: 50%;
231 position: absolute;
232 top: 50%;
233 transform: translateX(-50%) translateY(-50%);
234 width: 30px
235 }
236
237 .adfy-loading .pulse:before {
238 animation: pulse-ring 1.25s cubic-bezier(.215, .61, .355, 1) infinite;
239 background-color: #c5c5c5;
240 border-radius: 100%;
241 box-sizing: border-box;
242 content: "";
243 display: block;
244 height: 300%;
245 margin-left: -100%;
246 margin-top: -100%;
247 position: relative;
248 width: 300%
249 }
250
251 .adfy-loading .pulse:after {
252 animation: pulse-dot 1.25s cubic-bezier(.455, .03, .515, .955) -.4s infinite;
253 background-color: #fff;
254 border-radius: 100%;
255 box-shadow: 0 0 15px 5px rgba(0, 0, 0, .01);
256 content: "";
257 display: block;
258 height: 100%;
259 left: 0;
260 position: absolute;
261 top: 0;
262 width: 100%
263 }
264
265 .addonify-notice {
266 align-items: center;
267 background-color: #fff7eb;
268 border: 2px solid #f3dcba;
269 border-radius: 30px;
270 box-shadow: 0 5px 10px rgba(255, 217, 77, .1);
271 display: flex;
272 justify-content: center;
273 margin: 0 auto 40px;
274 max-width: -moz-max-content;
275 max-width: max-content;
276 padding: 10px 15px
277 }
278
279 .addonify-notice .content {
280 align-items: center;
281 -moz-column-gap: 5px;
282 column-gap: 5px;
283 display: grid;
284 font-size: 13px;
285 font-weight: 400;
286 grid-template-columns: 25px 1fr;
287 line-height: 1.4;
288 margin: 0;
289 padding: 0
290 }
291
292 .addonify-notice .content .icon {
293 fill: #ff9400;
294 align-items: center;
295 animation: adfyNoticePulse 1.5s ease-out infinite;
296 background-color: #fff7eb;
297 border-radius: 100%;
298 color: #ff9400;
299 display: inline-flex;
300 height: 20px;
301 justify-content: center;
302 line-height: 1.4;
303 overflow: hidden;
304 width: 20px
305 }
306
307 .addonify-notice .content .icon svg {
308 display: inline-flex;
309 height: 18px;
310 line-height: 1;
311 width: 18px
312 }
313
314 .addonify-notice .content a {
315 color: #325fff;
316 display: inline-flex;
317 font-weight: 400;
318 line-height: 1.4;
319 position: relative;
320 text-decoration: none;
321 transition: all .5s ease-in-out
322 }
323
324 .addonify-notice .content a:after,
325 .addonify-notice .content a:before {
326 background-color: currentColor;
327 bottom: -4px;
328 content: "";
329 height: 2px;
330 left: 0;
331 position: absolute;
332 width: 100%
333 }
334
335 .addonify-notice .content a:before {
336 -webkit-backface-visibility: hidden;
337 background-color: currentColor;
338 content: "";
339 transform: scaleX(0);
340 transform-origin: right center;
341 transition: transform .26s cubic-bezier(.25, .8, .25, 1);
342 will-change: scale;
343 z-index: 1
344 }
345
346 .addonify-notice .content a:after {
347 background-color: currentColor;
348 content: "";
349 opacity: .3;
350 position: absolute;
351 width: 100%
352 }
353
354 .addonify-notice .content a:is(:hover, :focus) {
355 color: var(--addonify_seconary_color);
356 text-decoration: none
357 }
358
359 .addonify-notice .content a:is(:hover, :focus):before {
360 content: "";
361 opacity: 1;
362 transform: scale(1);
363 transform-origin: left center
364 }
365
366 .addonify-notice .content a:is(:focus) {
367 box-shadow: none;
368 outline: none
369 }
370
371 .adfy-header {
372 background-color: #fff;
373 border-bottom: 1px solid #e5e5e5;
374 display: block;
375 left: 160px;
376 padding: 10px 30px;
377 position: fixed;
378 right: 0;
379 top: 30px;
380 z-index: 100
381 }
382
383 .adfy-header .adfy-row {
384 align-items: center;
385 -moz-column-gap: 30px;
386 column-gap: 30px;
387 display: grid;
388 grid-template-columns: 160px auto;
389 justify-content: space-between
390 }
391
392 .adfy-header .start .branding .adfy-link {
393 display: inline-flex
394 }
395
396 .adfy-header .start .branding .adfy-link img {
397 display: inline-flex;
398 max-width: 100%
399 }
400
401 .adfy-header .end,
402 .adfy-header .end .buttons {
403 align-items: center;
404 display: flex;
405 flex-direction: row;
406 flex-wrap: wrap;
407 justify-content: flex-end
408 }
409
410 .adfy-header .end .buttons {
411 gap: 30px
412 }
413
414 .adfy-colopon {
415 display: block;
416 margin: 100px 30px 0
417 }
418
419 .adfy-colopon .adfy-row {
420 align-items: center;
421 -moz-column-gap: 30px;
422 column-gap: 30px;
423 display: grid;
424 grid-template-columns: repeat(2, 1fr);
425 justify-content: space-between
426 }
427
428 .adfy-colopon .adfy-row .left .text {
429 align-items: center;
430 display: inline-block;
431 gap: 10px
432 }
433
434 .adfy-colopon .adfy-row .left .text .version {
435 background-color: #ddd;
436 border-radius: 20px;
437 color: #888;
438 font-size: 12px;
439 font-weight: 400;
440 line-height: 1;
441 padding: 6px 10px 4px
442 }
443
444 .adfy-colopon .adfy-row .right {
445 align-items: center;
446 display: flex;
447 flex-direction: row;
448 flex-wrap: wrap;
449 justify-content: flex-end
450 }
451
452 .adfy-colopon .adfy-row .right .text {
453 align-items: center;
454 display: inline-block
455 }
456
457 .adfy-colopon .adfy-row .right .text .adfy-link {
458 align-items: center;
459 color: #888;
460 display: inline-flex;
461 font-family: var(--addonify_system_font_family);
462 font-size: 14px;
463 font-weight: 400;
464 gap: 3px;
465 line-height: 1;
466 text-decoration: none;
467 transition: all .5s ease
468 }
469
470 .adfy-colopon .adfy-row .right .text .adfy-link:hover {
471 fill: var(--addonify_base_link_hover_color);
472 color: var(--addonify_base_link_hover_color);
473 text-decoration: none
474 }
475
476 .adfy-colopon .adfy-row .right .text .adfy-link:focus {
477 border: none;
478 box-shadow: none;
479 outline: none
480 }
481
482 .adfy-colopon .adfy-row .right .text .adfy-link .icon {
483 align-items: center;
484 display: inline-flex;
485 gap: 0
486 }
487
488 .adfy-colopon .adfy-row .right .text .adfy-link .icon .dashicons {
489 font-size: 14px;
490 height: 14px;
491 width: 16px
492 }
493
494 .adfy-colopon .adfy-row .text {
495 color: #888;
496 font-family: var(--addonify_system_font_family);
497 font-size: 14px;
498 font-weight: 400;
499 margin: 0
500 }
501
502 [class*=page_addonify_quick_view] #wpbody-content {
503 padding-bottom: 30px
504 }
505
506 [class*=page_addonify_quick_view] #wpfooter {
507 display: none
508 }
509
510 #___adfy-quickview-app___ {
511 display: block;
512 font-family: var(--addonify_font_family);
513 font-weight: 400;
514 letter-spacing: -.15px;
515 margin: 0 0 0 -20px;
516 padding: 0;
517 position: relative
518 }
519
520 #___adfy-quickview-app___,
521 #___adfy-quickview-app___ * {
522 -moz-osx-font-smoothing: grayscale;
523 -webkit-font-smoothing: antialiased;
524 box-sizing: border-box
525 }
526
527 #___adfy-quickview-app___ .adfy-container {
528 margin: 0 auto;
529 max-width: 1100px;
530 min-height: 100vh;
531 width: 100%
532 }
533
534 #___adfy-quickview-app___ #addonify-layout {
535 margin-bottom: 120px;
536 margin-top: 120px
537 }
538
539 #___adfy-quickview-app___ .main-content {
540 align-items: stretch;
541 -moz-column-gap: 60px;
542 column-gap: 60px;
543 display: grid;
544 grid-template-columns: 180px auto;
545 justify-content: stretch;
546 margin: 0
547 }
548
549 #___adfy-quickview-app___ .main-content .end {
550 border-left: 1px solid var(--addonify_border_color);
551 padding-left: 60px
552 }
553
554 #___adfy-quickview-app___ .el-button {
555 font-weight: 400;
556 line-height: 1;
557 padding: 10px 20px 12px;
558 transition: all .5s ease
559 }
560
561 #___adfy-quickview-app___ .adfy-navigation .navigation {
562 display: flex;
563 flex-direction: row;
564 flex-direction: column;
565 flex-wrap: wrap;
566 gap: 10px;
567 list-style: none;
568 margin: 0
569 }
570
571 #___adfy-quickview-app___ .adfy-navigation .navigation li {
572 display: block;
573 margin: 0;
574 padding: 0;
575 width: 100%
576 }
577
578 #___adfy-quickview-app___ .adfy-navigation .navigation li a {
579 fill: var(--addonify_base_text_color);
580 align-items: center;
581 background-color: transparent;
582 border-radius: 4px;
583 color: var(--addonify_base_text_color);
584 display: flex;
585 flex-direction: row;
586 flex-wrap: wrap;
587 font-family: var(--addonify_font_family);
588 font-size: 15px;
589 font-weight: 400;
590 gap: 10px;
591 line-height: 1;
592 padding: 12px 15px 10px;
593 text-decoration: none;
594 transition: all .5s ease
595 }
596
597 #___adfy-quickview-app___ .adfy-navigation .navigation li a .icon svg {
598 height: 16px;
599 width: 16px
600 }
601
602 #___adfy-quickview-app___ .adfy-navigation .navigation li a:hover {
603 fill: var(--addonify_base_text_color);
604 background-color: #fff;
605 box-shadow: 0 0 1px 0 rgba(0, 0, 0, .1);
606 color: var(--addonify_base_text_color);
607 text-decoration: none
608 }
609
610 #___adfy-quickview-app___ .adfy-navigation .navigation li a:focus {
611 outline: 0
612 }
613
614 #___adfy-quickview-app___ .adfy-navigation .navigation li .router-link-active {
615 fill: var(--addonify_primary_color);
616 background-color: #fff;
617 box-shadow: 0 0 1px 0 rgba(0, 0, 0, .1);
618 color: var(--addonify_primary_color)
619 }
620
621 #___adfy-quickview-app___ .site-primary .adfy-form {
622 display: flex;
623 flex-direction: row;
624 flex-direction: column;
625 flex-wrap: wrap;
626 gap: 40px
627 }
628
629 #___adfy-quickview-app___ .site-primary .addonify-section {
630 background-color: #fff;
631 border-radius: 10px;
632 box-shadow: 0 5px 40px rgba(0, 0, 0, .1);
633 display: flex;
634 flex-direction: row;
635 flex-direction: column;
636 flex-wrap: wrap;
637 gap: 30px;
638 padding: 30px 40px 40px
639 }
640
641 #___adfy-quickview-app___ .site-primary .addonify-section .section-title-holder {
642 border-bottom: 1px solid #eee;
643 padding: 0 0 10px
644 }
645
646 #___adfy-quickview-app___ .site-primary .addonify-section .section-title-holder .section-title {
647 -webkit-text-fill-color: transparent;
648 -moz-text-fill-color: transparent;
649 align-items: center;
650 background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
651 -webkit-background-clip: text;
652 -moz-background-clip: text;
653 color: #333;
654 display: inline-flex;
655 font-family: var(--addonify_font_family);
656 font-size: 18px;
657 font-weight: 500;
658 letter-spacing: -.15px;
659 line-height: 1.5;
660 margin: 0;
661 padding: 0
662 }
663
664 #___adfy-quickview-app___ .addonify-section .adfy-options {
665 border-bottom: 1px dashed var(--addonify_border_color);
666 padding-bottom: 30px
667 }
668
669 #___adfy-quickview-app___ .addonify-section .adfy-options:is(:last-child) {
670 border-bottom: none;
671 padding-bottom: 0
672 }
673
674 #___adfy-quickview-app___ .adfy-options .option-box {
675 align-items: center;
676 -moz-column-gap: 40px;
677 column-gap: 40px;
678 display: grid;
679 grid-template-columns: auto 300px
680 }
681
682 #___adfy-quickview-app___ .adfy-options .option-box.fullwidth {
683 align-items: flex-start;
684 -moz-column-gap: 0;
685 column-gap: 0;
686 display: flex;
687 flex-direction: row;
688 flex-direction: column;
689 flex-wrap: wrap;
690 gap: 30px;
691 grid-template-columns: repeat(1, 1fr)
692 }
693
694 #___adfy-quickview-app___ .adfy-options .option-box.fullwidth .adfy-col.right {
695 border: none;
696 display: flex;
697 flex-direction: row;
698 flex-wrap: wrap;
699 justify-content: flex-start;
700 padding: 0;
701 width: 100%
702 }
703
704 #___adfy-quickview-app___ .adfy-options .option-box.fullwidth .adfy-col.right .input {
705 border: 1px solid var(--addonify_border_color);
706 border-radius: 10px;
707 display: flex;
708 flex-direction: row;
709 flex-wrap: wrap;
710 justify-content: flex-start;
711 padding: 30px;
712 position: relative;
713 width: 100%
714 }
715
716 #___adfy-quickview-app___ .adfy-options .option-box.fullwidth .adfy-col.right .input:before {
717 background: #fff;
718 border-left: 1px solid var(--addonify_border_color);
719 border-top: 1px solid var(--addonify_border_color);
720 content: "";
721 display: inline-flex;
722 height: 16px;
723 left: 40px;
724 position: absolute;
725 right: auto;
726 top: -10px;
727 transform: rotate(45deg);
728 width: 16px;
729 z-index: 5
730 }
731
732 #___adfy-quickview-app___ .adfy-options .option-box .adfy-col.left .label {
733 display: flex;
734 flex-direction: row;
735 flex-direction: column;
736 flex-wrap: wrap;
737 gap: 10px
738 }
739
740 #___adfy-quickview-app___ .adfy-options .option-box .adfy-col.right {
741 border: none;
742 display: flex;
743 flex-direction: row;
744 flex-wrap: wrap;
745 justify-content: flex-end;
746 padding: 0
747 }
748
749 #___adfy-quickview-app___ .adfy-options .option-box .option-label {
750 align-items: center;
751 color: #444;
752 display: flex;
753 flex-direction: row;
754 flex-wrap: wrap;
755 font-family: var(--addonify_font_family);
756 font-size: 16px;
757 font-weight: 400;
758 gap: 5px;
759 letter-spacing: -.15px;
760 line-height: 1.5;
761 margin: 0;
762 padding: 0
763 }
764
765 #___adfy-quickview-app___ .adfy-options .option-box .option-description {
766 fill: #503c3c;
767 align-items: center;
768 color: #503c3c;
769 -moz-column-gap: 8px;
770 column-gap: 8px;
771 display: grid;
772 font-family: var(--addonify_font_family);
773 font-size: 13px;
774 font-weight: 400;
775 grid-template-columns: 15px 1fr;
776 line-height: 1.4;
777 margin: 0;
778 padding: 0
779 }
780
781 #___adfy-quickview-app___ .adfy-options .option-box .option-description svg {
782 fill: #ff9400;
783 color: #ff9400;
784 display: inline-flex;
785 height: 14px;
786 line-height: 1.4;
787 width: 14px
788 }
789
790 #___adfy-quickview-app___ .jumbo-box {
791 display: flex;
792 flex-direction: row;
793 flex-direction: column;
794 flex-wrap: wrap;
795 gap: 30px
796 }
797
798 #___adfy-quickview-app___ .jumbo-box .jumbo-header {
799 border-bottom: 1px solid #e8e8e8;
800 display: flex;
801 flex-direction: row;
802 flex-direction: column;
803 flex-wrap: wrap;
804 gap: 5px;
805 padding-bottom: 10px
806 }
807
808 #___adfy-quickview-app___ .jumbo-box .jumbo-header .sec-title {
809 -webkit-text-fill-color: transparent;
810 -moz-text-fill-color: transparent;
811 align-items: center;
812 background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
813 -webkit-background-clip: text;
814 -moz-background-clip: text;
815 color: #333;
816 display: inline-flex;
817 font-family: var(--addonify_font_family);
818 font-size: 18px;
819 font-weight: 500;
820 letter-spacing: -.15px;
821 line-height: 1.5;
822 margin: 0;
823 padding: 0;
824 width: -moz-max-content;
825 width: max-content
826 }
827
828 #___adfy-quickview-app___ .jumbo-box .jumbo-header .sec-excerpt {
829 fill: #503c3c;
830 align-items: center;
831 color: #503c3c;
832 -moz-column-gap: 8px;
833 column-gap: 8px;
834 display: grid;
835 font-family: var(--addonify_font_family);
836 font-size: 13px;
837 font-weight: 400;
838 grid-template-columns: 15px 1fr;
839 line-height: 1.4;
840 margin: 0;
841 padding: 0
842 }
843
844 #___adfy-quickview-app___ .jumbo-box .jumbo-header .sec-excerpt svg {
845 fill: #ff9400;
846 color: #ff9400;
847 display: inline-flex;
848 height: 14px;
849 line-height: 1.4;
850 width: 14px
851 }
852
853 #___adfy-quickview-app___ .jumbo-box .jumbo-content.adfy-options {
854 background-color: transparent;
855 border: none;
856 border-radius: 0;
857 display: flex;
858 flex-direction: row;
859 flex-direction: column;
860 flex-wrap: wrap;
861 gap: 20px;
862 margin: 0;
863 padding: 0;
864 position: relative
865 }
866
867 #___adfy-quickview-app___ .jumbo-box .jumbo-content .ui-option {
868 align-items: center;
869 border-bottom: 1px dashed var(--addonify_border_color);
870 -moz-column-gap: 30px;
871 column-gap: 30px;
872 display: grid;
873 grid-template-columns: 1fr 250px;
874 justify-content: space-between;
875 padding-bottom: 20px;
876 row-gap: 20px
877 }
878
879 #___adfy-quickview-app___ .jumbo-box .jumbo-content .ui-option:is(:last-child) {
880 border-bottom: none;
881 padding-bottom: 0
882 }
883
884 #___adfy-quickview-app___ .jumbo-box .jumbo-content .ui-option .option-label .label {
885 font-size: 15px
886 }
887
888 #___adfy-quickview-app___ .jumbo-box .jumbo-content .ui-option .input {
889 display: flex;
890 flex-direction: row;
891 flex-wrap: wrap;
892 justify-content: flex-end
893 }
894
895 .adfy-options :is(.el-input):not(.el-textarea):not(.el-select):not(.el-input-number):not(.el-slider):not(.el-color-picker):not(.el-radio) {
896 width: 250px
897 }
898
899 .adfy-options .el-textarea {
900 min-width: 300px;
901 width: 100%
902 }
903
904 .adfy-options .el-textarea .el-textarea__inner {
905 border-radius: 10px;
906 font-family: var(--addonify_font_family);
907 font-size: 15px;
908 font-weight: 400;
909 height: 200px;
910 line-height: 2.2;
911 padding: 20px;
912 resize: vertical
913 }
914
915 .adfy-options .el-input-number {
916 width: 150px
917 }
918
919 .adfy-options .el-input-number.is-controls-right,
920 .adfy-options .el-select {
921 width: 250px
922 }
923
924 .el-popper .el-select-dropdown__item.selected {
925 font-weight: 400
926 }
927
928 .adfy-options .el-slider {
929 width: 250px
930 }
931
932 .adfy-options .el-color-picker {
933 transition: all .5s ease-in
934 }
935
936 .adfy-options .el-color-picker .el-color-picker__color,
937 .adfy-options .el-color-picker .el-color-picker__color-inner,
938 .adfy-options .el-color-picker .el-color-picker__trigger {
939 border: none;
940 border-radius: 100%
941 }
942
943 .adfy-options .el-color-picker .el-color-picker__color {
944 align-items: center;
945 box-shadow: 0 4px 5px rgba(0, 0, 0, .1);
946 display: inline-flex;
947 justify-content: center
948 }
949
950 .adfy-options .el-color-picker .el-color-picker__trigger {
951 align-items: center;
952 border: 2px solid #dcdcdc;
953 box-shadow: none;
954 display: inline-flex;
955 height: 52px;
956 justify-content: center;
957 padding: 8px;
958 transition: all .5s ease-in;
959 width: 52px
960 }
961
962 .adfy-options .el-color-picker .el-color-picker__icon {
963 color: #fff;
964 font-size: 16px;
965 font-weight: 400;
966 line-height: 1
967 }
968
969 .adfy-options .el-color-picker .el-color-picker__empty {
970 color: red;
971 font-size: 20px;
972 font-weight: 400;
973 line-height: 1
974 }
975
976 .adfy-options .el-color-picker:is(:hover:not(.is-disabled)) .el-color-picker__trigger {
977 border: 2px solid #dcdcdc
978 }
979
980 .adfy-options .el-radio-group {
981 align-items: center;
982 display: flex;
983 gap: 20px
984 }
985
986 .adfy-options .el-radio-group .el-radio.is-bordered.el-radio--large {
987 align-items: center;
988 border-radius: 30px;
989 display: inline-flex;
990 gap: 10px;
991 height: auto;
992 margin: 0;
993 padding: 10px 20px
994 }
995
996 .adfy-options .el-radio-group .el-radio.is-bordered.el-radio--large span {
997 line-height: 1
998 }
999
1000 .adfy-options .el-radio-group .el-radio.is-bordered.el-radio--large .el-radio__label {
1001 padding: 0
1002 }
1003
1004 .adfy-options .el-radio-group .el-radio.is-bordered.el-radio--large .el-radio__label svg {
1005 fill: #464646;
1006 align-items: center;
1007 display: inline-flex;
1008 height: 20px;
1009 justify-content: center;
1010 line-height: 1;
1011 width: 20px
1012 }
1013
1014 .adfy-options .radio-images .el-radio-group {
1015 align-items: center;
1016 display: flex;
1017 flex-wrap: wrap;
1018 gap: 30px
1019 }
1020
1021 .adfy-options .radio-images .el-radio-group .el-radio {
1022 align-items: center;
1023 border: 2px solid var(--addonify_border_color);
1024 border-radius: 10px;
1025 display: inline-flex;
1026 gap: 0;
1027 height: auto;
1028 line-height: 1;
1029 margin: 0;
1030 padding: 15px;
1031 width: auto
1032 }
1033
1034 .adfy-options .radio-images .el-radio-group .el-radio.is-checked {
1035 border-color: var(--addonify_primary_color)
1036 }
1037
1038 .adfy-options .radio-images .el-radio-group .el-radio.is-checked .el-radio__label svg.check {
1039 display: inline-flex
1040 }
1041
1042 .adfy-options .radio-images .el-radio-group .el-radio .el-radio__input {
1043 display: none
1044 }
1045
1046 .adfy-options .radio-images .el-radio-group .el-radio .el-radio__label {
1047 padding: 0;
1048 position: relative
1049 }
1050
1051 .adfy-options .radio-images .el-radio-group .el-radio .el-radio__label svg:not(.check) {
1052 display: inline-flex;
1053 height: auto;
1054 width: 140px
1055 }
1056
1057 .adfy-options .radio-images .el-radio-group .el-radio .el-radio__label svg.check {
1058 fill: var(--addonify_primary_color);
1059 display: none;
1060 height: 26px;
1061 position: absolute;
1062 right: -10px;
1063 top: -10px;
1064 width: 26px;
1065 z-index: 5
1066 }
1067
1068 #___adfy-quickview-app___ .error-404 {
1069 display: block;
1070 margin: 200px auto 0;
1071 min-height: 80vh;
1072 text-align: center
1073 }
1074
1075 #___adfy-quickview-app___ .error-404 h3 {
1076 font-size: 112px;
1077 font-weight: 700;
1078 margin: 0 0 60px;
1079 text-transform: uppercase
1080 }
1081
1082 #___adfy-quickview-app___ .error-404 p {
1083 color: #8b8b8b;
1084 font-size: 13px;
1085 font-weight: 400;
1086 letter-spacing: 3px;
1087 margin: 0 0 30px;
1088 text-transform: uppercase
1089 }
1090
1091 #___adfy-quickview-app___ .error-404 .adfy-button {
1092 border-radius: 30px;
1093 padding: 20px 60px
1094 }
1095
1096 #recommended-products #recommended-hot-products .adfy-grid {
1097 display: grid;
1098 grid-template-columns: repeat(1, 1fr);
1099 row-gap: 40px
1100 }
1101
1102 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card {
1103 background-color: #fff;
1104 border-radius: 10px;
1105 box-shadow: 0 0 1px 0 rgba(0, 0, 0, .1);
1106 padding: 40px;
1107 transition: all .5s ease
1108 }
1109
1110 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card:hover {
1111 box-shadow: 0 0 65px rgba(0, 0, 0, .1);
1112 transform: translateY(-10px)
1113 }
1114
1115 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card .adfy-product-box {
1116 grid-gap: 30px;
1117 display: grid;
1118 grid-template-columns: 152px auto
1119 }
1120
1121 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card .adfy-product-box .adfy-product-thumb {
1122 display: block;
1123 margin: 0;
1124 max-width: 100%;
1125 padding: 0;
1126 width: 100%
1127 }
1128
1129 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card .adfy-product-box .adfy-product-thumb>img {
1130 display: block;
1131 max-width: 100%
1132 }
1133
1134 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card .adfy-product-box .adfy-product-title {
1135 display: block;
1136 font-size: 20px;
1137 font-weight: 400;
1138 line-height: 1.3;
1139 margin: 0 0 15px
1140 }
1141
1142 #recommended-products #recommended-hot-products .adfy-grid .adfy-product-card .adfy-product-box .adfy-product-description {
1143 font-size: 14px;
1144 font-weight: 400;
1145 margin: 0 0 20px
1146 }
1147
1148 @keyframes pulse-ring {
1149 0% {
1150 transform: scale(.33)
1151 }
1152
1153 80%,
1154 to {
1155 opacity: 0
1156 }
1157 }
1158
1159 @keyframes pulse-dot {
1160 0% {
1161 transform: scale(.8)
1162 }
1163
1164 50% {
1165 transform: scale(1)
1166 }
1167
1168 to {
1169 transform: scale(.8)
1170 }
1171 }
1172
1173 @keyframes spinner {
1174 0% {
1175 transform: rotate(0deg)
1176 }
1177
1178 to {
1179 transform: rotate(1turn)
1180 }
1181 }
1182
1183 @keyframes adfyNoticePulse {
1184 0% {
1185 box-shadow: 0 0 0 0 rgba(204, 169, 44, .4)
1186 }
1187
1188 70% {
1189 box-shadow: 0 0 0 10px rgba(204, 169, 44, 0)
1190 }
1191
1192 to {
1193 box-shadow: 0 0 0 0 rgba(204, 169, 44, 0)
1194 }
1195 }