PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.87
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.87
51.1.87 51.1.86 51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 All 41 releases
king-addons / includes / widgets / Quick_Card_Slider / style.css

style.css in King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder 51.1.87, at includes/widgets/Quick_Card_Slider/style.css

577 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .king-addons-card-slider {
2 --kng-card-slider-nav-size: 44px;
3 --kng-card-slider-nav-icon-size: 12px;
4 --kng-card-slider-nav-gap: 12px;
5 --kng-card-slider-nav-offset: 25px;
6 --kng-card-slider-nav-padding: 12px;
7 --kng-card-slider-pagination-size: 8px;
8 --kng-card-slider-pagination-gap: 10px;
9 --kng-card-slider-pagination-offset: 14px;
10 --kng-card-slider-pagination-active-width: 22px;
11
12 --kng-badge-offset-x: 12px;
13 --kng-badge-offset-y: 12px;
14 --kng-badge-rotate: 0deg;
15
16 position: relative;
17 }
18
19 .king-addons-card-slider__track {
20 position: relative;
21 padding: 16px 16px 40px;
22 overflow: hidden;
23 }
24
25 .king-addons-card-slider__wrapper {
26 display: flex;
27 align-items: stretch;
28 }
29
30 .king-addons-card-slider__slide {
31 height: auto;
32 }
33
34 .king-addons-card-slider__slide[data-card-link] .king-addons-card-slider__card {
35 cursor: pointer;
36 }
37
38 .elementor-editor-active .king-addons-card-slider__slide[data-card-link] .king-addons-card-slider__card {
39 cursor: default;
40 }
41
42 .king-addons-card-slider__card {
43 display: flex;
44 flex-direction: column;
45 gap: 12px;
46 height: 100%;
47 padding: 20px;
48 background-color: #ffffff;
49 border: 1px solid #e5e7eb;
50 border-radius: 12px;
51 box-shadow: var(--kng-card-slider-card-shadow, 0 16px 40px rgba(17, 24, 39, 0.06));
52 }
53
54 .king-addons-card-slider__media img {
55 display: block;
56 width: 100%;
57 height: auto;
58 border-radius: 10px;
59 object-fit: cover;
60 }
61
62 .king-addons-card-slider__media {
63 position: relative;
64 }
65
66 .king-addons-card-slider__badge {
67 display: inline-flex;
68 align-items: center;
69 gap: 6px;
70 padding: 6px 10px;
71 background-color: #111827;
72 color: #ffffff;
73 border: 1px solid transparent;
74 border-radius: 999px;
75 font-size: 12px;
76 font-weight: 700;
77 line-height: 1.2;
78 box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
79 }
80
81 .king-addons-card-slider__badge--tone-accent {
82 background-color: #2563eb;
83 border-color: #2563eb;
84 }
85
86 .king-addons-card-slider__badge--tone-neutral {
87 background-color: #f3f4f6;
88 color: #111827;
89 border-color: #e5e7eb;
90 }
91
92 .king-addons-card-slider__badge--tone-contrast {
93 background-color: #ffffff;
94 color: #111827;
95 border-color: #e5e7eb;
96 }
97
98 .king-addons-card-slider__badge-wrap {
99 position: absolute;
100 top: var(--kng-badge-offset-y);
101 left: var(--kng-badge-offset-x);
102 right: auto;
103 display: flex;
104 justify-content: flex-start;
105 pointer-events: none;
106 transform: rotate(var(--kng-badge-rotate));
107 transform-origin: center;
108 }
109
110 .king-addons-card-slider__badge-wrap .king-addons-card-slider__badge {
111 pointer-events: auto;
112 }
113
114 .king-addons-card-slider--badge-pos-center .king-addons-card-slider__badge-wrap {
115 left: 0;
116 right: 0;
117 justify-content: center;
118 }
119
120 .king-addons-card-slider--badge-pos-right .king-addons-card-slider__badge-wrap {
121 left: auto;
122 right: var(--kng-badge-offset-x);
123 justify-content: flex-end;
124 }
125
126 .king-addons-card-slider--badge-shape-circle .king-addons-card-slider__badge {
127 border-radius: 999px;
128 min-width: 36px;
129 min-height: 36px;
130 justify-content: center;
131 }
132
133 .king-addons-card-slider--badge-shape-square .king-addons-card-slider__badge {
134 border-radius: 6px;
135 }
136
137 .king-addons-card-slider--badge-shape-star .king-addons-card-slider__badge {
138 padding: 10px;
139 border-radius: 0;
140 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
141 min-width: 40px;
142 min-height: 40px;
143 justify-content: center;
144 }
145
146 .king-addons-card-slider--badge-shape-star-burst .king-addons-card-slider__badge {
147 padding: 10px;
148 border-radius: 0;
149 clip-path: polygon(50% 0%, 60% 25%, 85% 15%, 72% 40%, 98% 50%, 72% 60%, 85% 85%, 60% 75%, 50% 100%, 40% 75%, 15% 85%, 28% 60%, 2% 50%, 28% 40%, 15% 15%, 40% 25%);
150 min-width: 42px;
151 min-height: 42px;
152 justify-content: center;
153 }
154
155 .king-addons-card-slider--badge-shape-star-burst-8 .king-addons-card-slider__badge {
156 padding: 10px;
157 border-radius: 0;
158 clip-path: polygon(50% 0%, 60% 20%, 80% 10%, 70% 30%, 90% 50%, 70% 70%, 80% 90%, 60% 80%, 50% 100%, 40% 80%, 20% 90%, 30% 70%, 10% 50%, 30% 30%, 20% 10%, 40% 20%);
159 min-width: 42px;
160 min-height: 42px;
161 justify-content: center;
162 }
163
164 .king-addons-card-slider--badge-shape-star-burst-12 .king-addons-card-slider__badge {
165 padding: 10px;
166 border-radius: 0;
167 clip-path: polygon(50% 0%, 58% 14%, 72% 8%, 68% 24%, 82% 18%, 78% 34%, 92% 32%, 82% 46%, 96% 50%, 82% 54%, 92% 68%, 78% 66%, 82% 82%, 68% 76%, 72% 92%, 58% 86%, 50% 100%, 42% 86%, 28% 92%, 32% 76%, 18% 82%, 22% 66%, 8% 68%, 18% 54%, 4% 50%, 18% 46%, 8% 32%, 22% 34%, 18% 18%, 32% 24%, 28% 8%, 42% 14%);
168 min-width: 44px;
169 min-height: 44px;
170 justify-content: center;
171 }
172
173 .king-addons-card-slider--badge-shape-hexagon .king-addons-card-slider__badge {
174 border-radius: 0;
175 clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
176 min-width: 40px;
177 min-height: 40px;
178 justify-content: center;
179 }
180
181 .king-addons-card-slider--badge-shape-pentagon .king-addons-card-slider__badge {
182 border-radius: 0;
183 clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0 38%);
184 min-width: 38px;
185 min-height: 38px;
186 justify-content: center;
187 }
188
189 .king-addons-card-slider--badge-shape-diamond .king-addons-card-slider__badge {
190 border-radius: 0;
191 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
192 min-width: 38px;
193 min-height: 38px;
194 justify-content: center;
195 }
196
197 .king-addons-card-slider--badge-shape-triangle .king-addons-card-slider__badge {
198 border-radius: 0;
199 clip-path: polygon(50% 0%, 100% 100%, 0 100%);
200 min-width: 38px;
201 min-height: 38px;
202 justify-content: center;
203 }
204
205 .king-addons-card-slider__body {
206 display: flex;
207 flex-direction: column;
208 gap: 12px;
209 height: 100%;
210 }
211
212 .king-addons-card-slider--text-align-left .king-addons-card-slider__body {
213 align-items: flex-start;
214 text-align: left;
215 }
216
217 .king-addons-card-slider--text-align-center .king-addons-card-slider__body {
218 align-items: center;
219 text-align: center;
220 }
221
222 .king-addons-card-slider--text-align-right .king-addons-card-slider__body {
223 align-items: flex-end;
224 text-align: right;
225 }
226
227 .king-addons-card-slider__title {
228 margin: 0;
229 font-size: 18px;
230 line-height: 1.4;
231 font-weight: 700;
232 color: #111827;
233 }
234
235 .king-addons-card-slider__description {
236 margin: 0;
237 color: #4b5563;
238 line-height: 1.6;
239 font-size: 15px;
240 }
241
242 .king-addons-card-slider__button {
243 display: inline-flex;
244 align-items: center;
245 justify-content: center;
246 gap: 8px;
247 padding: 10px 16px;
248 width: fit-content;
249 background-color: #111827;
250 color: #ffffff;
251 border: 1px solid #111827;
252 border-radius: 999px;
253 font-weight: 600;
254 text-decoration: none;
255 transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
256 }
257
258 .king-addons-card-slider--button-align-left .king-addons-card-slider__button {
259 align-self: flex-start;
260 }
261
262 .king-addons-card-slider--button-align-center .king-addons-card-slider__button {
263 align-self: center;
264 }
265
266 .king-addons-card-slider--button-align-right .king-addons-card-slider__button {
267 align-self: flex-end;
268 }
269
270 .king-addons-card-slider--button-text-align-left .king-addons-card-slider__button {
271 justify-content: flex-start;
272 text-align: left;
273 }
274
275 .king-addons-card-slider--button-text-align-center .king-addons-card-slider__button {
276 justify-content: center;
277 text-align: center;
278 }
279
280 .king-addons-card-slider--button-text-align-right .king-addons-card-slider__button {
281 justify-content: flex-end;
282 text-align: right;
283 }
284
285 .king-addons-card-slider__button:hover {
286 background-color: #0b1220;
287 border-color: #0b1220;
288 color: #ffffff;
289 box-shadow: 0 10px 25px rgba(17, 24, 39, 0.18);
290 }
291
292 .king-addons-card-slider__navigation {
293 position: absolute;
294 top: 50%;
295 left: 0;
296 right: 0;
297 transform: translateY(-50%);
298 display: flex;
299 justify-content: space-between;
300 align-items: center;
301 gap: var(--kng-card-slider-nav-gap);
302 pointer-events: none;
303 margin-top: 0;
304 }
305
306 .king-addons-card-slider--nav-align-flex-start .king-addons-card-slider__navigation {
307 top: var(--kng-card-slider-nav-offset);
308 transform: none;
309 }
310
311 .king-addons-card-slider--nav-align-center .king-addons-card-slider__navigation {
312 top: 50%;
313 transform: translateY(-50%);
314 }
315
316 .king-addons-card-slider--nav-align-flex-end .king-addons-card-slider__navigation {
317 top: auto;
318 bottom: var(--kng-card-slider-nav-offset);
319 transform: none;
320 }
321
322 .king-addons-card-slider--nav-inside .king-addons-card-slider__track {
323 padding-left: calc(var(--kng-card-slider-nav-size) + var(--kng-card-slider-nav-offset) + 8px);
324 padding-right: calc(var(--kng-card-slider-nav-size) + var(--kng-card-slider-nav-offset) + 8px);
325 }
326
327 .king-addons-card-slider__arrow {
328 position: absolute;
329 top: 50%;
330 transform: translateY(-50%);
331 width: var(--kng-card-slider-nav-size);
332 height: var(--kng-card-slider-nav-size);
333 display: inline-flex;
334 align-items: center;
335 justify-content: center;
336 background-color: #ffffff;
337 color: #111827;
338 border: 1px solid #e5e7eb;
339 border-radius: 50%;
340 box-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
341 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
342 pointer-events: auto;
343 }
344
345 .king-addons-card-slider__arrow:after {
346 display: none;
347 content: none;
348 }
349
350 .king-addons-card-slider__arrow--prev {
351 left: var(--kng-card-slider-nav-offset);
352 }
353
354 .king-addons-card-slider__arrow--next {
355 right: var(--kng-card-slider-nav-offset);
356 }
357
358 .king-addons-card-slider--nav-outside .king-addons-card-slider__arrow--prev {
359 left: calc(-1 * var(--kng-card-slider-nav-offset) - (var(--kng-card-slider-nav-size) / 2));
360 }
361
362 .king-addons-card-slider--nav-outside .king-addons-card-slider__arrow--next {
363 right: calc(-1 * var(--kng-card-slider-nav-offset) - (var(--kng-card-slider-nav-size) / 2));
364 }
365
366 @media (max-width: 767px) {
367 .king-addons-card-slider .king-addons-card-slider__arrow--prev,
368 .king-addons-card-slider--nav-outside .king-addons-card-slider__arrow--prev {
369 left: 8px;
370 }
371
372 .king-addons-card-slider .king-addons-card-slider__arrow--next,
373 .king-addons-card-slider--nav-outside .king-addons-card-slider__arrow--next {
374 left: auto;
375 right: 8px;
376 }
377 }
378
379 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__navigation,
380 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__arrow {
381 display: none;
382 }
383
384 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__navigation,
385 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__arrow {
386 display: none;
387 }
388
389 @media (min-width: 768px) and (max-width: 1024px) {
390 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__navigation,
391 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__arrow {
392 display: none;
393 }
394 }
395
396 @media (max-width: 767px) {
397 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__navigation,
398 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__arrow {
399 display: none;
400 }
401 }
402
403 .king-addons-card-slider__arrow:hover {
404 background-color: #111827;
405 color: #ffffff;
406 border-color: #111827;
407 box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
408 }
409
410 .king-addons-card-slider__arrow-icon {
411 display: block;
412 width: var(--kng-card-slider-nav-icon-size);
413 height: var(--kng-card-slider-nav-icon-size);
414 border: solid currentColor;
415 border-width: 0 2px 2px 0;
416 transform: rotate(135deg);
417 }
418
419 .king-addons-card-slider__arrow--next .king-addons-card-slider__arrow-icon {
420 transform: rotate(-45deg);
421 }
422
423 .king-addons-card-slider__pagination {
424 position: static;
425 display: flex;
426 align-items: center;
427 gap: var(--kng-card-slider-pagination-gap);
428 margin-top: var(--kng-card-slider-pagination-offset);
429 justify-content: center;
430 }
431
432 .king-addons-card-slider--pagination-align-flex-start .king-addons-card-slider__pagination {
433 justify-content: flex-start;
434 }
435
436 .king-addons-card-slider--pagination-align-center .king-addons-card-slider__pagination {
437 justify-content: center;
438 }
439
440 .king-addons-card-slider--pagination-align-flex-end .king-addons-card-slider__pagination {
441 justify-content: flex-end;
442 }
443
444 .king-addons-card-slider--pagination-inside .king-addons-card-slider__pagination {
445 position: absolute;
446 left: 0;
447 right: 0;
448 bottom: var(--kng-card-slider-pagination-offset);
449 margin-top: 0;
450 pointer-events: none;
451 }
452
453 .king-addons-card-slider--pagination-inside .king-addons-card-slider__pagination .swiper-pagination-bullet {
454 pointer-events: auto;
455 }
456
457 .king-addons-card-slider__pagination .swiper-pagination-bullet {
458 width: var(--kng-card-slider-pagination-size);
459 height: var(--kng-card-slider-pagination-size);
460 background-color: #d1d5db;
461 opacity: 1;
462 border-radius: 999px;
463 transition: width 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
464 }
465
466 .king-addons-card-slider__pagination .swiper-pagination-bullet-active {
467 width: var(--kng-card-slider-pagination-active-width);
468 background-color: #111827;
469 }
470
471 .king-addons-card-slider--nav-style-solid .king-addons-card-slider__arrow {
472 background-color: #111827;
473 color: #ffffff;
474 border-color: #111827;
475 }
476
477 .king-addons-card-slider--nav-style-ghost .king-addons-card-slider__arrow {
478 background-color: transparent;
479 color: #111827;
480 border-color: rgba(17, 24, 39, 0.28);
481 box-shadow: none;
482 }
483
484 .king-addons-card-slider--nav-style-minimal .king-addons-card-slider__arrow {
485 background-color: transparent;
486 border-color: transparent;
487 box-shadow: none;
488 }
489
490 .king-addons-card-slider__navigation {
491 pointer-events: none;
492 }
493
494 .king-addons-card-slider--pagination-style-pill .king-addons-card-slider__pagination .swiper-pagination-bullet {
495 width: calc(var(--kng-card-slider-pagination-size) * 2);
496 border-radius: 999px;
497 }
498
499 .king-addons-card-slider--pagination-style-outlined .king-addons-card-slider__pagination .swiper-pagination-bullet {
500 background-color: transparent;
501 border: 1px solid #d1d5db;
502 }
503
504 .king-addons-card-slider--pagination-style-outlined .king-addons-card-slider__pagination .swiper-pagination-bullet-active {
505 background-color: #111827;
506 border-color: #111827;
507 }
508
509 .king-addons-card-slider__slide-inner.is-anim-hover-lift .king-addons-card-slider__card {
510 transition: transform 0.25s ease, box-shadow 0.25s ease;
511 }
512
513 .king-addons-card-slider__slide-inner.is-anim-hover-lift:hover .king-addons-card-slider__card {
514 transform: translateY(-6px);
515 box-shadow: 0 18px 38px rgba(17, 24, 39, 0.18);
516 }
517
518 .king-addons-card-slider__slide-inner.is-anim-hover-zoom .king-addons-card-slider__media img {
519 transition: transform 0.25s ease;
520 }
521
522 .king-addons-card-slider__slide-inner.is-anim-hover-zoom:hover .king-addons-card-slider__media img {
523 transform: scale(1.04);
524 }
525
526 .king-addons-card-slider__slide-inner.is-anim-hover-tilt .king-addons-card-slider__card {
527 transition: transform 0.28s ease, box-shadow 0.28s ease;
528 transform-style: preserve-3d;
529 transform-origin: center;
530 }
531
532 .king-addons-card-slider__slide-inner.is-anim-hover-tilt:hover .king-addons-card-slider__card {
533 transform: translateY(-8px) rotate3d(1, 1, 0, 6deg) perspective(700px) translateX(-4px);
534 box-shadow: 0 22px 44px rgba(17, 24, 39, 0.22);
535 }
536
537 .king-addons-card-slider__slide-inner.is-anim-hover-float .king-addons-card-slider__card {
538 transition: transform 0.32s ease, box-shadow 0.32s ease;
539 }
540
541 .king-addons-card-slider__slide-inner.is-anim-hover-float:hover .king-addons-card-slider__card {
542 transform: translateY(-12px) scale(1.01);
543 box-shadow: 0 20px 32px rgba(17, 24, 39, 0.18);
544 }
545
546 .king-addons-card-slider__slide-inner.is-anim-hover-scale-fade .king-addons-card-slider__card {
547 transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
548 }
549
550 .king-addons-card-slider__slide-inner.is-anim-hover-scale-fade:hover .king-addons-card-slider__card {
551 transform: scale(1.03);
552 box-shadow: 0 22px 44px rgba(17, 24, 39, 0.22);
553 opacity: 0.94;
554 }
555
556 .king-addons-card-slider .swiper {
557 padding-bottom: 0;
558 }
559
560 @media (max-width: 767px) {
561 .king-addons-card-slider__track {
562 padding: 12px 12px 36px;
563 }
564
565 .king-addons-card-slider__card {
566 padding: 16px;
567 }
568 }
569
570
571
572
573
574
575
576
577