PluginProbe ʕ •ᴥ•ʔ
Ajax Search Lite – Live Search & Filter / trunk
Ajax Search Lite – Live Search & Filter vtrunk
4.14.4 4.14.3 4.14.2 4.14.1 4.12.6 4.12.7 4.13 4.13.1 4.13.2 4.13.3 4.13.4 4.13.5 4.14.0 4.5 4.5.1 4.5.4 4.5.5 4.6.0 4.6.1 4.6.2 4.6.3 4.6.4 4.6.5 4.6.6 4.7.0 4.7.1 4.7.10 4.7.11 4.7.12 4.7.13 4.7.14 4.7.15 4.7.16 4.7.17 4.7.18 4.7.19 4.7.2 4.7.20 4.7.21 4.7.22 4.7.23 4.7.24 4.7.25 4.7.26 4.7.3 4.7.4 4.7.5 4.7.6 4.7.7 4.7.8 4.7.9 4.8 4.8.1 4.8.2 4.8.3 4.8.4 4.8.5 4.8.6 4.9 4.9.1 4.9.2 4.9.3 4.9.4 4.9.5 trunk 1.1 1.2 1.3 1.4 1.5 1.6 1.7 3.0 3.05 3.06 3.10 3.11 3.5 4.0 4.10 4.10.1 4.10.2 4.10.3 4.11 4.11.1 4.11.2 4.11.3 4.11.4 4.11.5 4.12 4.12.1 4.12.2 4.12.3 4.12.4 4.12.5
ajax-search-lite / css / style.basic.css
ajax-search-lite / css Last commit date
fonts 5 years ago style-classic-blue.css 3 years ago style-curvy-black.css 3 years ago style-curvy-blue.css 3 years ago style-curvy-red.css 3 years ago style-simple-blue.css 3 years ago style-simple-grey.css 3 years ago style-simple-red.css 3 years ago style-underline.css 3 years ago style.basic.css 1 year ago
style.basic.css
1012 lines
1 @keyframes aslAnFadeInDrop {
2 0% {
3 opacity: 0;
4 transform: translate(0, -50px);
5 }
6 100% {
7 opacity: 1;
8 transform: translate(0, 0);
9 }
10 }
11
12 @-webkit-keyframes aslAnFadeInDrop {
13 0% {
14 opacity: 0;
15 transform: translate(0, -50px);
16 -webkit-transform: translate(0, -50px);
17 }
18 100% {
19 opacity: 1;
20 transform: translate(0, 0);
21 -webkit-transform: translate(0, 0);
22 }
23 }
24
25 @keyframes aslAnFadeOutDrop {
26 0% {
27 opacity: 1;
28 transform: translate(0, 0);
29 -webkit-transform: translate(0, 0);
30 }
31 100% {
32 opacity: 0;
33 transform: translate(0, -50px);
34 -webkit-transform: translate(0, -50px);
35 }
36 }
37
38 @-webkit-keyframes aslAnFadeOutDrop {
39 0% {
40 opacity: 1;
41 transform: translate(0, 0);
42 -webkit-transform: translate(0, 0);
43 }
44 100% {
45 opacity: 0;
46 transform: translate(0, -50px);
47 -webkit-transform: translate(0, -50px);
48 }
49 }
50
51 .hiddend {
52 display: none !important;
53 }
54
55 div.asl_w.asl_an_fadeInDrop,
56 div.asl_w.asl_an_fadeOutDrop {
57 -webkit-animation-duration: 100ms;
58 animation-duration: 100ms;
59 -webkit-animation-fill-mode: forwards;
60 animation-fill-mode: forwards;
61 }
62
63 div.asl_w.asl_an_fadeInDrop {
64 animation-name: aslAnFadeInDrop;
65 -webkit-animation-name: aslAnFadeInDrop;
66 }
67
68 div.asl_w.asl_an_fadeOutDrop {
69 animation-name: aslAnFadeOutDrop;
70 -webkit-animation-name: aslAnFadeOutDrop;
71 }
72
73 div.asl_w.asl_main_container {
74 transition: width 130ms linear;
75 -webkit-transition: width 130ms linear;
76 }
77
78 div.asl_w,
79 div.asl_w *,
80 div.asl_r,
81 div.asl_r *,
82 div.asl_s,
83 div.asl_s * {
84 -webkit-box-sizing: content-box;
85 -moz-box-sizing: content-box;
86 -ms-box-sizing: content-box;
87 -o-box-sizing: content-box;
88 box-sizing: content-box;
89 padding: 0;
90 margin: 0;
91 border: 0;
92 border-radius: 0;
93 text-transform: none;
94 text-shadow: none;
95 box-shadow: none;
96 text-decoration: none;
97 text-align: left;
98 letter-spacing: normal;
99 }
100
101 div.asl_r,
102 div.asl_r * {
103 -webkit-touch-callout: none;
104 -webkit-user-select: none;
105 -khtml-user-select: none;
106 -moz-user-select: none;
107 -ms-user-select: none;
108 user-select: none;
109 }
110
111 div.asl_r {
112 box-sizing: border-box;
113 margin: 12px 0 0 0;
114 }
115
116 div.asl_m .proinput input::-ms-clear {
117 display: none !important;
118 width: 0 !important;
119 height: 0 !important;
120 }
121
122 div.asl_m .proinput input::-ms-reveal {
123 display: none !important;
124 width: 0 !important;
125 height: 0 !important;
126 }
127
128 div.asl_m input[type="search"]::-webkit-search-decoration,
129 div.asl_m input[type="search"]::-webkit-search-cancel-button,
130 div.asl_m input[type="search"]::-webkit-search-results-button,
131 div.asl_m input[type="search"]::-webkit-search-results-decoration {
132 display: none;
133 }
134
135 div.asl_m input[type="search"] {
136 appearance: auto !important;
137 -webkit-appearance: none !important;
138 }
139
140 .clear {
141 clear: both;
142 }
143
144 .hiddend {
145 display: none;
146 }
147
148 div.asl_m textarea:focus,
149 div.asl_m input:focus {
150 outline: none;
151 }
152
153 div.asl_m {
154 width: 100%;
155 height: auto;
156 border-radius: 0;
157 background: rgba(255, 255, 255, 0);
158 overflow: hidden;
159 position: relative;
160 z-index: 200;
161 }
162
163 div.asl_m .probox {
164 width: auto;
165 border-radius: 5px;
166 background: #fff;
167 overflow: hidden;
168 border: 1px solid #fff;
169 box-shadow: 1px 0 3px #ccc inset;
170 display: -webkit-flex;
171 display: flex;
172 -webkit-flex-direction: row;
173 flex-direction: row;
174 }
175
176 div.asl_m .probox .proinput {
177 width: 1px;
178 height: 100%;
179 margin: 0 0 0 10px;
180 padding: 0 5px;
181 float: left;
182 box-shadow: none;
183 position: relative;
184 flex: 1 1 auto;
185 -webkit-flex: 1 1 auto;
186 order: 5;
187 -webkit-order: 5;
188 }
189
190 div.asl_m .probox .proinput form {
191 height: 100%;
192 /* some themes like to add un-removable margin and padding.. */
193 margin: 0 !important;
194 padding: 0 !important;
195 display: block !important;
196 max-width: unset !important;
197 }
198
199 div.asl_m .probox .proinput input:before,
200 div.asl_m .probox .proinput input:after,
201 div.asl_m .probox .proinput form:before,
202 div.asl_m .probox .proinput form:after {
203 display: none;
204 }
205
206 div.asl_m .probox .proinput input {
207 height: 28px;
208 border: 0;
209 background: transparent;
210 width: 100%;
211 box-shadow: none;
212 margin: -1px;
213 padding: 0;
214 left: 0;
215 line-height: normal !important;
216 display: block;
217 min-height: unset;
218 max-height: unset;
219 }
220
221 div.asl_m .probox .proinput input::-webkit-input-placeholder {
222 opacity: .85;
223 }
224
225 div.asl_m .probox .proinput input::-moz-placeholder {
226 opacity: .85;
227 }
228
229 div.asl_m .probox .proinput input:-ms-input-placeholder {
230 opacity: .85;
231 }
232
233 div.asl_m .probox .proinput input:-moz-placeholder {
234 opacity: .85;
235 }
236
237 div.asl_m .proinput input.orig {
238 padding: 0 !important;
239 margin: 0 !important;
240 background: transparent !important;
241 border: none !important;
242 background-color: transparent !important;
243 box-shadow: none !important;
244 z-index: 10;
245 position: relative;
246 }
247
248 div.asl_m .proinput input.autocomplete {
249 padding: 0 !important;
250 margin: 0;
251 background: transparent !important;
252 border: none !important;
253 background-color: transparent !important;
254 box-shadow: none !important;
255 opacity: .2;
256 }
257
258 div.asl_m .probox .proinput input.autocomplete {
259 border: 0;
260 background: transparent;
261 width: 100%;
262 box-shadow: none;
263 margin: 0;
264 margin-top: -28px !important;
265 padding: 0;
266 left: 0;
267 position: relative;
268 z-index: 9;
269 }
270
271 div.asl_m .probox .proinput.iepaddingfix {
272 padding-top: 0;
273 }
274
275 div.asl_m .probox .proinput .loading {
276 width: 32px;
277 background: #000;
278 height: 100%;
279 box-shadow: none;
280 }
281
282 div.asl_m .probox .proloading,
283 div.asl_m .probox .proclose,
284 div.asl_m .probox .promagnifier,
285 div.asl_m .probox .prosettings {
286 width: 20px;
287 height: 20px;
288 background: none;
289 background-size: 20px 20px;
290 float: right;
291 box-shadow: none;
292 margin: 0;
293 padding: 0;
294 text-align: center;
295 flex: 0 0 auto;
296 -webkit-flex: 0 0 auto;
297 z-index: 100;
298 }
299
300 div.asl_m .probox .promagnifier {
301 order: 10;
302 -webkit-order: 10;
303 }
304
305 div.asl_m .probox .prosettings {
306 order: 1;
307 -webkit-order: 1;
308 }
309
310 div.asl_m .probox .proloading,
311 div.asl_m .probox .proclose {
312 background-position: center center;
313 display: none;
314 background-size: auto;
315 background-repeat: no-repeat;
316 background-color: transparent;
317 order: 6;
318 -webkit-order: 6;
319 }
320
321 div.asl_m .probox .proclose {
322 position: relative;
323 cursor: pointer;
324 }
325
326 div.asl_m .probox .promagnifier .innericon,
327 div.asl_m .probox .prosettings .innericon,
328 div.asl_m .probox .proclose .innericon {
329 background-size: 20px 20px;
330 background-position: center center;
331 background-repeat: no-repeat;
332 background-color: transparent;
333 width: 100%;
334 height: 100%;
335 text-align: center;
336 overflow: hidden;
337 line-height: initial;
338 display: block;
339 }
340
341 div.asl_m .probox .promagnifier .innericon svg,
342 div.asl_m .probox .prosettings .innericon svg,
343 div.asl_m .probox .proloading svg {
344 height: 100%;
345 width: 22px;
346 vertical-align: baseline;
347 display: inline-block;
348 }
349
350 div.asl_m .probox .proloading {
351 padding: 2px;
352 box-sizing: border-box;
353 }
354
355 div.asl_m .probox div.asl_loader,
356 div.asl_m .probox div.asl_loader * {
357 box-sizing: border-box !important;
358 margin: 0;
359 padding: 0;
360 box-shadow: none;
361 }
362
363 div.asl_m .probox div.asl_loader {
364 box-sizing: border-box;
365 display: flex;
366 flex: 0 1 auto;
367 flex-direction: column;
368 flex-grow: 0;
369 flex-shrink: 0;
370 flex-basis: 28px;
371 max-width: 100%;
372 max-height: 100%;
373 width: 100%;
374 height: 100%;
375 align-items: center;
376 justify-content: center;
377 }
378
379 div.asl_m .probox div.asl_loader-inner {
380 width: 100%;
381 margin: 0 auto;
382 text-align: center;
383 height: 100%;
384 }
385
386 @-webkit-keyframes rotate-simple {
387 0% {
388 -webkit-transform: rotate(0deg);
389 transform: rotate(0deg);
390 }
391 50% {
392 -webkit-transform: rotate(180deg);
393 transform: rotate(180deg);
394 }
395 100% {
396 -webkit-transform: rotate(360deg);
397 transform: rotate(360deg);
398 }
399 }
400
401 @keyframes rotate-simple {
402 0% {
403 -webkit-transform: rotate(0deg);
404 transform: rotate(0deg);
405 }
406 50% {
407 -webkit-transform: rotate(180deg);
408 transform: rotate(180deg);
409 }
410 100% {
411 -webkit-transform: rotate(360deg);
412 transform: rotate(360deg);
413 }
414 }
415
416 div.asl_m .probox div.asl_simple-circle {
417 margin: 0;
418 height: 100%;
419 width: 100%;
420 animation: rotate-simple .8s infinite linear;
421 -webkit-animation: rotate-simple .8s infinite linear;
422 border: 4px solid #fff;
423 border-right-color: transparent !important;
424 border-radius: 50%;
425 box-sizing: border-box;
426 }
427
428 div.asl_m .probox .proclose svg {
429 background: #333;
430 border-radius: 50%;
431 position: absolute;
432 top: 50%;
433 width: 20px;
434 height: 20px;
435 margin-top: -10px;
436 left: 50%;
437 margin-left: -10px;
438 fill: #fefefe;
439 padding: 4px;
440 box-sizing: border-box;
441 box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
442 }
443
444 div.asl_r * {
445 text-decoration: none;
446 text-shadow: none;
447 }
448
449 div.asl_r .results .asl_nores {
450 overflow: hidden;
451 width: auto;
452 height: 100%;
453 line-height: initial;
454 text-align: center;
455 margin: 0;
456 background: #fff;
457 padding: 10px 3px;
458 color: #222;
459 }
460
461 div.asl_r.horizontal {
462 padding: 2px 0 10px;
463 }
464
465 div.asl_r.horizontal .results .nores {
466 background: transparent;
467 }
468
469 div.asl_r .results {
470 overflow: hidden;
471 width: auto;
472 height: 0;
473 margin: 0;
474 padding: 0;
475 }
476
477 div.asl_r.horizontal .results {
478 height: auto;
479 width: auto;
480 }
481
482 div.asl_r .results .item {
483 overflow: hidden;
484 width: auto;
485 margin: 0;
486 padding: 3px;
487 position: relative;
488 background: #f4f4f4;
489 border-left: 1px solid rgba(255, 255, 255, .6);
490 border-right: 1px solid rgba(255, 255, 255, .4);
491 animation-delay: 0s;
492 animation-duration: 1s;
493 animation-fill-mode: both;
494 animation-timing-function: ease;
495 backface-visibility: hidden;
496 -webkit-animation-delay: 0s;
497 -webkit-animation-duration: 1s;
498 -webkit-animation-fill-mode: both;
499 -webkit-animation-timing-function: ease;
500 -webkit-backface-visibility: hidden;
501 }
502
503 div.asl_r.vertical .results .item:last-child {
504 margin-bottom: 0;
505 }
506
507 div.asl_r.vertical .results .item:last-child:after {
508 height: 0;
509 margin: 0;
510 width: 0;
511 }
512
513 div.asl_r .results .item .asl_image {
514 overflow: hidden;
515 background: transparent;
516 margin: 2px 8px 0 0;
517 padding: 0;
518 float: left;
519 background-position: center;
520 background-size: cover;
521 }
522
523 div.asl_r .results .item .asl_image img {
524 width: 100%;
525 height: 100%;
526 }
527
528 div.asl_r .results .item .asl_content {
529 overflow: hidden;
530 height: auto;
531 background: transparent;
532 margin: 0;
533 padding: 3px 3px 5px 3px;
534 }
535
536 div.asl_r .results .item .asl_content h3 {
537 margin: 0;
538 padding: 0;
539 display: inline;
540 line-height: inherit;
541 }
542
543 div.asl_r .results .item .asl_content .asl_desc {
544 margin-top: 4px;
545 font-size: 12px;
546 line-height: 18px;
547 }
548
549 div.asl_r .results .item div.etc {
550 margin-top: 4px;
551 }
552
553 div.asl_r .results a span.overlap {
554 position: absolute;
555 width: 100%;
556 height: 100%;
557 top: 0;
558 left: 0;
559 z-index: 1;
560 }
561
562 div.asl_r p.showmore {
563 text-align: center;
564 padding: 0;
565 margin: 0;
566 font-weight: normal;
567 font-family: Open Sans;
568 color: #055e94;
569 font-size: 12px;
570 line-height: 30px;
571 text-shadow: 0 0 0 rgba(255, 255, 255, 0);
572 background-color: #fff;
573 margin-top: 3px;
574 cursor: pointer;
575 }
576
577 div.asl_r p.showmore span {
578 font-weight: normal;
579 font-family: Open Sans;
580 color: #055e94;
581 font-size: 12px;
582 line-height: 30px;
583 text-shadow: 0 0 0 rgba(255, 255, 255, 0);
584 display: block;
585 text-align: center;
586 cursor: pointer;
587 }
588
589 .results .asl_nores .asl_keyword {
590 padding: 0 6px;
591 cursor: pointer;
592 font-weight: bold;
593 font-family: Open Sans;
594 }
595
596 div.asl_r .resdrg {
597 height: auto;
598 }
599
600
601
602 div.asl_w .group:first-of-type {
603 margin: 0 0 -3px;
604 }
605
606 div.asl_s.searchsettings {
607 width: 200px;
608 height: auto;
609 position: absolute;
610 display: none;
611 z-index: 1101;
612 border-radius: 0 0 3px 3px;
613 visibility: hidden;
614 padding: 0;
615 }
616
617 div.asl_s.searchsettings form {
618 display: flex;
619 flex-wrap: wrap;
620 margin: 0 0 12px 0 !important;
621 padding: 0 !important;
622 }
623
624 div.asl_s.searchsettings .asl_option_inner {
625 margin: 2px 10px 0 10px;
626 *padding-bottom: 10px;
627 }
628
629 div.asl_s.searchsettings.ie78 .asl_option_inner {
630 margin-bottom: 0 !important;
631 padding-bottom: 0 !important;
632 }
633
634 div.asl_s.searchsettings .asl_option_label {
635 font-size: 14px;
636 line-height: 20px !important;
637 margin: 0;
638 width: 150px;
639 text-shadow: none;
640 padding: 0;
641 min-height: 20px;
642 border: none;
643 background: transparent;
644 float: none;
645 }
646
647 div.asl_s.searchsettings .asl_option_inner input[type=checkbox] {
648 display: none !important;
649 }
650
651 div.asl_s.searchsettings.ie78 .asl_option_inner input[type=checkbox] {
652 display: block;
653 }
654
655 div.asl_s.searchsettings.ie78 .asl_option_label {
656 float: right !important;
657 }
658
659 div.asl_s.searchsettings .asl_option {
660 display: flex;
661 flex-direction: row;
662 -webkit-flex-direction: row;
663 align-items: flex-start;
664 margin: 0 0 10px 0;
665 cursor: pointer;
666 }
667
668 div.asl_s.searchsettings .asl_option.asl-o-last,
669 div.asl_s.searchsettings .asl_option:last-child {
670 margin-bottom: 0;
671 }
672
673 div.asl_s.searchsettings .asl_option_inner {
674 width: 17px;
675 height: 17px;
676 position: relative;
677 flex-grow: 0;
678 -webkit-flex-grow: 0;
679 flex-shrink: 0;
680 -webkit-flex-shrink: 0;
681 }
682
683 div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox {
684 cursor: pointer;
685 position: absolute;
686 width: 17px;
687 height: 17px;
688 top: 0;
689 padding: 0;
690 border-radius: 2px;
691 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
692 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
693 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
694 overflow: hidden;
695 font-size: 0 !important;
696 color: rgba(0, 0, 0, 0);
697 }
698
699 /* MODERN BROWSER SCROLL START */
700 div.asl_r.vertical .results,
701 div.asl_s.searchsettings .asl_sett_scroll {
702 scrollbar-width: thin;
703 scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
704 }
705
706 div.asl_r.vertical .results {
707 scrollbar-color: rgba(0, 0, 0, 0.5) rgb(255,255,255);
708 }
709
710 div.asl_r.vertical .results::-webkit-scrollbar {
711 width: 10px;
712 }
713 div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar {
714 width: 6px;
715 }
716
717 div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-track {
718 background: transparent;
719 box-shadow: inset 0 0 12px 12px transparent;
720 border: none;
721 }
722
723 div.asl_r.vertical .results::-webkit-scrollbar-track {
724 background: rgb(255, 255, 255);
725 box-shadow: inset 0 0 12px 12px transparent;
726 border: solid 2px transparent;
727 }
728
729 div.asl_r.vertical .results::-webkit-scrollbar-thumb,
730 div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
731 background: transparent;
732 box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0);
733 border: solid 2px transparent;
734 border-radius: 12px;
735 }
736 div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
737 border: none;
738 }
739
740 div.asl_r.vertical:hover .results::-webkit-scrollbar-thumb,
741 div.asl_s.searchsettings:hover .asl_sett_scroll::-webkit-scrollbar-thumb {
742 box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5);
743 }
744 @media (hover: none), (max-width: 500px) {
745 div.asl_r.vertical .results::-webkit-scrollbar-thumb,
746 div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
747 box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5);
748 }
749 }
750 /* MODERN BROWSER SCROLL END */
751
752 div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:after {
753 opacity: 0;
754 font-family: 'aslsicons2';
755 content: "\e800";
756 font-weight: normal !important;
757 background: transparent;
758 border: none !important;
759 box-sizing: content-box;
760 color: #fff;
761 height: 100%;
762 width: 100%;
763 padding: 0 !important;
764 margin: 1px 0 0 0 !important;
765 line-height: 17px;
766 text-align: center;
767 text-decoration: none;
768 text-shadow: none;
769 display: block;
770 font-size: 11px !important;
771 position: absolute;
772 top: 0;
773 left: 0;
774 z-index: 1;
775 }
776
777 div.asl_s.searchsettings.ie78 .asl_option_inner .asl_option_checkbox:after {
778 display: none;
779 }
780
781 div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:hover::after {
782 opacity: .3;
783 }
784
785 div.asl_s.searchsettings .asl_option_inner input[type=checkbox]:checked+.asl_option_checkbox:after {
786 opacity: 1;
787 }
788
789 div.asl_s.searchsettings fieldset {
790 position: relative;
791 float: left;
792 }
793
794 div.asl_s.searchsettings fieldset {
795 background: transparent;
796 font-size: .9em;
797 margin: 12px 0 0 !important;
798 padding: 0;
799 width: 192px;
800 }
801
802 div.asl_s.searchsettings fieldset .asl_option_label {
803 width: 130px;
804 display: block;
805 }
806
807 div.asl_s.searchsettings form fieldset legend {
808 padding: 5px 0 8px 10px;
809 }
810
811 #asl_hidden_data {
812 display: none !important;
813 }
814
815 .asl_r .item {
816 /* To override .overlap */
817 .asl__af-tt-container {
818 position: relative;
819 z-index: 2;
820
821 .asl__af-tt-link {
822 transition: opacity 0.2s;
823 &:hover {
824 opacity: 0.7;
825 }
826 }
827 }
828
829 .average-rating {
830 --percent: 0%;
831 --color: #2EA3F2;
832 --bg-color: rgba(0,0,0,0.2);
833 --size: 17px;
834 position: relative;
835 appearance: none;
836 width: auto;
837 display: inline-block;
838 vertical-align: baseline;
839 font-size: var(--size);
840 line-height: calc(var(--size) - 15%);
841 color: var(--bg-color);
842 background: linear-gradient(90deg, var(--color) var(--percent), var(--bg-color) var(--percent));
843 -webkit-background-clip: text;
844 -webkit-text-fill-color: transparent;
845 }
846 }
847
848 .asl_r .item {
849 .price {
850 --regular-price-color: #666;
851 --sale_price_color: #666;
852 color: var(--regular-price-color);
853
854 del {
855 opacity: .5;
856 display: inline-block;
857 text-decoration: line-through;
858 color: var(--regular-price-color);
859 }
860
861 ins {
862 margin-left: 0.5em;
863 text-decoration: none;
864 font-weight: 700;
865 display: inline-block;
866 color: var(--sale_price_color);
867 }
868 }
869
870 .add-to-cart-container {
871 display: flex;
872 flex-wrap: wrap;
873 align-items: center;
874 position: relative;
875 z-index: 10;
876 width: 100%;
877 margin: 12px 0;
878
879 .add-to-cart-quantity {
880 padding: 8px 0 8px 8px;
881 background: #eaeaea;
882 width: 32px;
883 border-radius: 4px 0 0 4px;
884 height: 18px;
885 min-height: unset;
886 display: inline-block;
887 font-size: 13px;
888 line-height: normal;
889 }
890
891 .add-to-cart-button {
892 padding: 8px;
893 border-radius: 4px;
894 background: #6246d7;
895 color: white;
896 height: 18px;
897 min-height: unset;
898 display: block;
899 text-align: center;
900 min-width: 90px;
901 font-size: 13px;
902 line-height: normal;
903
904 &.add-to-cart-variable {
905 border-radius: 4px;
906 }
907 &.loading {
908 content: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
909 }
910 }
911
912 a.added_to_cart {
913 flex-basis: 100%;
914 margin-top: 8px;
915 }
916 }
917
918 .add-to-cart-container:has(.add-to-cart-quantity) {
919 .add-to-cart-button {
920 border-radius: 0 4px 4px 0;
921 }
922 }
923 }
924
925 .rtl .asl_content,
926 .rtl .asl_nores,
927 .rtl .asl_content *,
928 .rtl .asl_nores *,
929 .rtl .searchsettings form {
930 text-align: right !important;
931 direction: rtl !important;
932 }
933
934 .rtl .asl_nores>* {
935 display: inline-block;
936 }
937
938 .rtl div.asl_r .results .item .asl_image {
939 float: right;
940 margin: 2px 0 0 8px;
941 }
942
943 .rtl .searchsettings .asl_option {
944 flex-direction: row-reverse !important;
945 -webkit-flex-direction: row-reverse !important;
946 }
947
948 .rtl .asl_option {
949 direction: ltr;
950 }
951
952 .rtl .asl_label,
953 .rtl .asl_option div.asl_option_label {
954 text-align: right !important;
955 }
956
957 .rtl .asl_label {
958 max-width: 1000px !important;
959 width: 100%;
960 direction: rtl !important;
961 }
962
963 .rtl .asl_label input[type=radio] {
964 margin: 0 0 0 6px !important;
965 }
966
967 .rtl .asl_option_cat_level-0 div.asl_option_label {
968 font-weight: bold !important;
969 }
970
971 .rtl fieldset .asl_option_cat_level-1 {
972 margin-right: 12px !important;
973 margin-left: 0;
974 }
975
976 .rtl fieldset .asl_option_cat_level-2 {
977 margin-right: 24px !important;
978 margin-left: 0;
979 }
980
981 .rtl fieldset .asl_option_cat_level-3 {
982 margin-right: 36px !important;
983 margin-left: 0;
984 }
985
986 .rtl .searchsettings legend {
987 text-align: right !important;
988 display: block;
989 width: 100%;
990 }
991
992 .rtl .searchsettings input[type=text],
993 .rtl .searchsettings select {
994 direction: rtl !important;
995 text-align: right !important;
996 }
997
998 .rtl div.asl_w.asl_s.searchsettings form,
999 .rtl div.asl_w.asl_sb.searchsettings form {
1000 flex-direction: row-reverse !important;
1001 }
1002
1003 .rtl div.horizontal.asl_r div.item {
1004 float: right !important;
1005 }
1006
1007 .rtl p.asl-try {
1008 direction: rtl;
1009 text-align: right;
1010 margin-right: 10px;
1011 width: auto !important;
1012 }