PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.49
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.49
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 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / widgets / Quick_Card_Slider / style.css

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

564 lines 15.8 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 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__navigation,
367 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__arrow {
368 display: none;
369 }
370
371 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__navigation,
372 .king-addons-card-slider--nav-hide-mobile .king-addons-card-slider__arrow {
373 display: none;
374 }
375
376 @media (min-width: 768px) and (max-width: 1024px) {
377 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__navigation,
378 .king-addons-card-slider--nav-hide-tablet .king-addons-card-slider__arrow {
379 display: none;
380 }
381 }
382
383 @media (max-width: 767px) {
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
390 .king-addons-card-slider__arrow:hover {
391 background-color: #111827;
392 color: #ffffff;
393 border-color: #111827;
394 box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
395 }
396
397 .king-addons-card-slider__arrow-icon {
398 display: block;
399 width: var(--kng-card-slider-nav-icon-size);
400 height: var(--kng-card-slider-nav-icon-size);
401 border: solid currentColor;
402 border-width: 0 2px 2px 0;
403 transform: rotate(135deg);
404 }
405
406 .king-addons-card-slider__arrow--next .king-addons-card-slider__arrow-icon {
407 transform: rotate(-45deg);
408 }
409
410 .king-addons-card-slider__pagination {
411 position: static;
412 display: flex;
413 align-items: center;
414 gap: var(--kng-card-slider-pagination-gap);
415 margin-top: var(--kng-card-slider-pagination-offset);
416 justify-content: center;
417 }
418
419 .king-addons-card-slider--pagination-align-flex-start .king-addons-card-slider__pagination {
420 justify-content: flex-start;
421 }
422
423 .king-addons-card-slider--pagination-align-center .king-addons-card-slider__pagination {
424 justify-content: center;
425 }
426
427 .king-addons-card-slider--pagination-align-flex-end .king-addons-card-slider__pagination {
428 justify-content: flex-end;
429 }
430
431 .king-addons-card-slider--pagination-inside .king-addons-card-slider__pagination {
432 position: absolute;
433 left: 0;
434 right: 0;
435 bottom: var(--kng-card-slider-pagination-offset);
436 margin-top: 0;
437 pointer-events: none;
438 }
439
440 .king-addons-card-slider--pagination-inside .king-addons-card-slider__pagination .swiper-pagination-bullet {
441 pointer-events: auto;
442 }
443
444 .king-addons-card-slider__pagination .swiper-pagination-bullet {
445 width: var(--kng-card-slider-pagination-size);
446 height: var(--kng-card-slider-pagination-size);
447 background-color: #d1d5db;
448 opacity: 1;
449 border-radius: 999px;
450 transition: width 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
451 }
452
453 .king-addons-card-slider__pagination .swiper-pagination-bullet-active {
454 width: var(--kng-card-slider-pagination-active-width);
455 background-color: #111827;
456 }
457
458 .king-addons-card-slider--nav-style-solid .king-addons-card-slider__arrow {
459 background-color: #111827;
460 color: #ffffff;
461 border-color: #111827;
462 }
463
464 .king-addons-card-slider--nav-style-ghost .king-addons-card-slider__arrow {
465 background-color: transparent;
466 color: #111827;
467 border-color: rgba(17, 24, 39, 0.28);
468 box-shadow: none;
469 }
470
471 .king-addons-card-slider--nav-style-minimal .king-addons-card-slider__arrow {
472 background-color: transparent;
473 border-color: transparent;
474 box-shadow: none;
475 }
476
477 .king-addons-card-slider__navigation {
478 pointer-events: none;
479 }
480
481 .king-addons-card-slider--pagination-style-pill .king-addons-card-slider__pagination .swiper-pagination-bullet {
482 width: calc(var(--kng-card-slider-pagination-size) * 2);
483 border-radius: 999px;
484 }
485
486 .king-addons-card-slider--pagination-style-outlined .king-addons-card-slider__pagination .swiper-pagination-bullet {
487 background-color: transparent;
488 border: 1px solid #d1d5db;
489 }
490
491 .king-addons-card-slider--pagination-style-outlined .king-addons-card-slider__pagination .swiper-pagination-bullet-active {
492 background-color: #111827;
493 border-color: #111827;
494 }
495
496 .king-addons-card-slider__slide-inner.is-anim-hover-lift .king-addons-card-slider__card {
497 transition: transform 0.25s ease, box-shadow 0.25s ease;
498 }
499
500 .king-addons-card-slider__slide-inner.is-anim-hover-lift:hover .king-addons-card-slider__card {
501 transform: translateY(-6px);
502 box-shadow: 0 18px 38px rgba(17, 24, 39, 0.18);
503 }
504
505 .king-addons-card-slider__slide-inner.is-anim-hover-zoom .king-addons-card-slider__media img {
506 transition: transform 0.25s ease;
507 }
508
509 .king-addons-card-slider__slide-inner.is-anim-hover-zoom:hover .king-addons-card-slider__media img {
510 transform: scale(1.04);
511 }
512
513 .king-addons-card-slider__slide-inner.is-anim-hover-tilt .king-addons-card-slider__card {
514 transition: transform 0.28s ease, box-shadow 0.28s ease;
515 transform-style: preserve-3d;
516 transform-origin: center;
517 }
518
519 .king-addons-card-slider__slide-inner.is-anim-hover-tilt:hover .king-addons-card-slider__card {
520 transform: translateY(-8px) rotate3d(1, 1, 0, 6deg) perspective(700px) translateX(-4px);
521 box-shadow: 0 22px 44px rgba(17, 24, 39, 0.22);
522 }
523
524 .king-addons-card-slider__slide-inner.is-anim-hover-float .king-addons-card-slider__card {
525 transition: transform 0.32s ease, box-shadow 0.32s ease;
526 }
527
528 .king-addons-card-slider__slide-inner.is-anim-hover-float:hover .king-addons-card-slider__card {
529 transform: translateY(-12px) scale(1.01);
530 box-shadow: 0 20px 32px rgba(17, 24, 39, 0.18);
531 }
532
533 .king-addons-card-slider__slide-inner.is-anim-hover-scale-fade .king-addons-card-slider__card {
534 transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
535 }
536
537 .king-addons-card-slider__slide-inner.is-anim-hover-scale-fade:hover .king-addons-card-slider__card {
538 transform: scale(1.03);
539 box-shadow: 0 22px 44px rgba(17, 24, 39, 0.22);
540 opacity: 0.94;
541 }
542
543 .king-addons-card-slider .swiper {
544 padding-bottom: 0;
545 }
546
547 @media (max-width: 767px) {
548 .king-addons-card-slider__track {
549 padding: 12px 12px 36px;
550 }
551
552 .king-addons-card-slider__card {
553 padding: 16px;
554 }
555 }
556
557
558
559
560
561
562
563
564