PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.36
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.36
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 / Timeline / style.css

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

756 lines 18.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .king-addons-timeline-outer-container {
2 position: relative;
3 opacity: 0;
4 }
5
6 .king-addons-vertical {
7 overflow: hidden;
8 min-width: 100%;
9 min-height: 100%;
10 }
11
12 .king-addons-vertical .king-addons-timeline-centered .king-addons-data-wrap {
13 display: flow-root;
14 }
15
16 .king-addons-timeline-centered {
17 position: relative;
18 display: table;
19 width: 100%;
20 height: 100%;
21 }
22
23 .king-addons-list-style-none ul {
24 list-style-type: none;
25 }
26
27 .king-addons-list-style-disc ul {
28 list-style-type: disc;
29 }
30
31 .king-addons-list-style-decimal ul {
32 list-style-type: decimal;
33 }
34
35 .king-addons-timeline-centered .king-addons-timeline-entry:last-of-type {
36 margin-bottom: 0 !important;
37 }
38
39 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry {
40 position: relative;
41 float: right;
42 clear: both;
43 width: 50%;
44 margin-bottom: 70px;
45 }
46
47 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned,
48 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry.king-addons-left-aligned {
49 float: left;
50 }
51
52 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry.king-addons-left-aligned {
53 width: 100%;
54 }
55
56 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned .king-addons-timeline-entry-inner,
57 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry.king-addons-left-aligned .king-addons-timeline-entry-inner {
58 margin-left: 0;
59 }
60
61 .king-addons-wrapper .king-addons-year-label {
62 display: flex;
63 align-items: center;
64 justify-content: center;
65 }
66
67 .king-addons-one-sided-timeline-left .king-addons-middle-line,
68 .king-addons-one-sided-timeline-left .king-addons-timeline-fill,
69 .king-addons-one-sided-timeline-left .king-addons-year-label,
70 .king-addons-one-sided-timeline-left .king-addons-icon {
71 left: auto;
72 }
73
74 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner {
75 position: relative;
76 }
77
78 .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-entry {
79 float: left;
80 width: 100%;
81 }
82
83 .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-entry .king-addons-timeline-entry-inner {
84 margin-left: 0;
85 }
86
87 .king-addons-both-sided-timeline .king-addons-middle-line {
88 left: 50%;
89 }
90
91 .king-addons-middle-line {
92 position: absolute;
93 top: 20px;
94 display: block;
95 width: 4px;
96 height: 100%;
97 background-color: rgb(61, 42, 61);
98 }
99
100 .king-addons-one-sided-timeline-left .king-addons-icon {
101 right: 0.3%;
102 }
103
104 .king-addons-timeline-fill {
105 position: absolute;
106 top: 20px;
107 left: 50%;
108 display: block;
109 width: 4px;
110 height: 0;
111 background-color: rgb(61, 42, 61);
112 }
113
114 .king-addons-read-more-button {
115 font-size: 14px;
116 display: inline-block;
117 }
118
119 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned .king-addons-extra-label {
120 left: 108%;
121 }
122
123 .king-addons-horizontal .king-addons-extra-label .king-addons-label,
124 .king-addons-horizontal .king-addons-extra-label .king-addons-sub-label {
125 line-height: 1;
126 text-align: center;
127 }
128
129 .king-addons-left-aligned .king-addons-extra-label .king-addons-label,
130 .king-addons-left-aligned .king-addons-extra-label .king-addons-sub-label {
131 text-align: right;
132 }
133
134 .king-addons-right-aligned .king-addons-extra-label .king-addons-label,
135 .king-addons-right-aligned .king-addons-extra-label .king-addons-sub-label {
136 text-align: left;
137 }
138
139 .king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-extra-label .king-addons-label,
140 .king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-extra-label .king-addons-sub-label {
141 text-align: right !important;
142 }
143
144 .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-extra-label .king-addons-label,
145 .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-extra-label .king-addons-sub-label {
146 text-align: left !important;
147 }
148
149 .king-addons-horizontal-bottom .king-addons-extra-label {
150 position: absolute;
151 top: 0;
152 left: 50%;
153 display: table;
154 overflow: hidden;
155 width: 100%;
156 height: 80px;
157 transform: translateX(-50%);
158 text-align: center;
159 vertical-align: middle;
160 }
161
162 .king-addons-extra-label .king-addons-label,
163 .king-addons-extra-label .king-addons-sub-label {
164 display: block;
165 width: 100%;
166 }
167
168 .king-addons-extra-label .king-addons-label {
169 font-size: 15px;
170 font-weight: 600;
171 }
172
173 .king-addons-extra-label .king-addons-sub-label {
174 font-size: 12px;
175 }
176
177 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry.king-addons-left-aligned .king-addons-timeline-entry-inner .king-addons-icon {
178 position: absolute;
179 left: calc(100%);
180 transform: translate(-50%);
181 }
182
183 .king-addons-both-sided-timeline .king-addons-right-aligned .king-addons-icon {
184 position: absolute;
185 right: calc(100%);
186 transform: translate(50%);
187 }
188
189 .king-addons-timeline-centered .king-addons-timeline-entry.king-addons-left-aligned .king-addons-timeline-entry-inner .king-addons-data-wrap:after {
190 right: 0;
191 margin-right: -9px;
192 margin-left: 0;
193 transform: rotate(180deg);
194 }
195
196 .king-addons-right-aligned .king-addons-story-info-vertical.king-addons-data-wrap:after {
197 right: 100%;
198 }
199
200 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-extra-label {
201 position: absolute;
202 right: 108%;
203 box-sizing: border-box;
204 width: 100%;
205 height: auto;
206 padding: 10px;
207 }
208
209 .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-timeline-entry .king-addons-extra-label,
210 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry .king-addons-extra-label {
211 position: static !important;
212 display: block;
213 margin-bottom: 10px;
214 transform: none !important;
215 }
216
217 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-timeline-entry .king-addons-extra-label {
218 margin-left: auto;
219 text-align: right;
220 }
221
222 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-extra-label > span {
223 display: block;
224 }
225
226 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-icon {
227 font-size: 0;
228 display: block;
229 float: left;
230 width: 48px;
231 height: 48px;
232 text-align: center;
233 background-clip: padding-box;
234 }
235
236 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-icon i {
237 font-size: 22px;
238 }
239
240 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-data-wrap {
241 position: relative;
242 background-clip: padding-box;
243 }
244
245 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-data-wrap:after {
246 position: absolute;
247 top: 14px;
248 display: block;
249 width: 0;
250 height: 0;
251 margin-left: -9px;
252 content: '';
253 border-width: 9px 9px 9px 0;
254 border-style: solid;
255 border-color: transparent;
256 }
257
258 .king-addons-title-wrap {
259 overflow: hidden;
260 flex-shrink: 0;
261 width: 100% !important;
262 }
263
264 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-data-wrap .king-addons-title {
265 display: inline-block;
266 }
267
268 .king-addons-timeline-centered .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-data-wrap .king-addons-title span {
269 opacity: 0.6;
270 filter: alpha(opacity=60);
271 }
272
273 .king-addons-timeline-centered .king-addons-year-wrap .king-addons-year-label {
274 display: inline-block;
275 text-align: center;
276 white-space: nowrap;
277 }
278
279 .king-addons-timeline-centered .king-addons-year-wrap {
280 position: relative;
281 display: block;
282 float: left;
283 clear: left;
284 width: 100%;
285 margin-right: auto;
286 margin-left: auto;
287 padding: 0;
288 text-align: center;
289 }
290
291 .king-addons-timeline-centered.king-addons-one-sided-timeline .king-addons-year-wrap .king-addons-year-label {
292 position: absolute;
293 transform: translate(-50%, 0);
294 }
295
296 .king-addons-timeline-centered.king-addons-one-sided-timeline-left .king-addons-year-wrap .king-addons-year-label {
297 position: absolute;
298 transform: translate(50%, 0);
299 }
300
301 .king-addons-both-sided-timeline .king-addons-left-aligned .king-addons-data-wrap:after,
302 .king-addons-one-sided-timeline-left .king-addons-left-aligned .king-addons-data-wrap:after {
303 left: 100%;
304 }
305
306 .king-addons-one-sided-timeline .king-addons-timeline-entry .king-addons-timeline-entry-inner .king-addons-icon {
307 transform: translate(-50%, -50%) !important;
308 }
309
310 .king-addons-wrapper .king-addons-icon {
311 display: flex !important;
312 align-items: center !important;
313 justify-content: center !important;
314 }
315
316 .timeline-background-image {
317 position: absolute;
318 z-index: -1;
319 top: 0;
320 left: 0;
321 width: 100%;
322 max-width: 100% !important;
323 height: 100%;
324 max-height: 100% !important;
325 opacity: 0.7;
326 }
327
328 .timeline-background-image img {
329 width: 100%;
330 max-width: 100% !important;
331 height: 100%;
332 max-height: 100% !important;
333 }
334
335 .king-addons-horizontal-timeline .swiper-slide-line-bottom {
336 display: flex;
337 align-items: flex-end;
338 justify-content: center;
339 }
340
341 .king-addons-horizontal-timeline .king-addons-story-info {
342 width: 98%;
343 }
344
345 .story-with-background {
346 background-image: none;
347 background-repeat: no-repeat;
348 background-position: center;
349 background-size: cover;
350 }
351
352 .king-addons-timeline-story-overlay {
353 line-height: 1;
354 position: absolute;
355 top: 0;
356 left: 0;
357 display: flex;
358 flex-direction: column;
359 width: 100%;
360 height: auto;
361 }
362
363 .king-addons-story-info {
364 line-height: 1;
365 }
366
367 .king-addons-horizontal-bottom.swiper {
368 position: unset;
369 z-index: 10;
370 overflow: hidden;
371 }
372
373 .king-addons-horizontal.swiper {
374 position: unset;
375 z-index: 11;
376 overflow: hidden;
377 margin: 0 32px;
378 }
379
380 .king-addons-horizontal {
381 padding-top: 10px;
382 }
383
384 .king-addons-horizontal-bottom {
385 padding-bottom: 10px;
386 }
387
388 .king-addons-horizontal-bottom .king-addons-year-wrap {
389 position: absolute;
390 z-index: 1;
391 top: 96px;
392 left: 10px;
393 display: table;
394 overflow: hidden;
395 width: 72px;
396 height: 36px;
397 table-layout: fixed;
398 text-align: center;
399 vertical-align: middle;
400 word-break: break-word;
401 border-radius: 6px;
402 }
403
404 .king-addons-horizontal-bottom .king-addons-year-label {
405 display: table-cell;
406 padding: 2px;
407 vertical-align: middle;
408 }
409
410 .king-addons-horizontal-bottom .king-addons-icon {
411 z-index: 100;
412 display: block;
413 width: 40px;
414 height: 40px;
415 transform: translate(-50%);
416 text-align: center;
417 color: #fff;
418 border-radius: 50%;
419 }
420
421 .king-addons-horizontal-bottom .king-addons-icon i {
422 font-size: 26px;
423 line-height: 40px;
424 }
425
426 .king-addons-horizontal-bottom .king-addons-icon:empty {
427 top: 102px;
428 left: calc(50% - 12px);
429 width: 24px;
430 height: 24px;
431 }
432
433 .king-addons-horizontal-bottom .king-addons-story-info:before {
434 position: absolute;
435 display: block;
436 content: "";
437 }
438
439 .king-addons-horizontal-bottom .king-addons-story-info {
440 position: relative;
441 justify-content: center;
442 box-sizing: border-box;
443 padding: 0;
444 transition: all 200ms ease-in;
445 text-align: center;
446 border-radius: 6px;
447 }
448
449 .king-addons-story-info,
450 .king-addons-story-info-vertical {
451 font-size: 0;
452 }
453
454 .king-addons-timeline-media {
455 position: relative;
456 display: inline-block;
457 overflow: hidden;
458 }
459
460 .king-addons-timeline-iframe-wrapper {
461 position: relative;
462 width: 100%;
463 height: 0;
464 padding-bottom: 56.25%;
465 }
466
467 .king-addons-timeline-media iframe,
468 .king-addons-timeline-iframe-wrapper iframe {
469 position: absolute;
470 top: 0;
471 left: 0;
472 width: 100%;
473 height: 100%;
474 }
475
476 .king-addons-horizontal-bottom .king-addons-title {
477 font-size: 20px;
478 line-height: 1.2em;
479 display: inline-block;
480 margin: 0;
481 padding: 8px 8px 0;
482 }
483
484 .king-addons-horizontal-bottom .king-addons-description {
485 font-size: inherit;
486 line-height: 1.2em;
487 display: inline-block;
488 width: 100%;
489 margin: 0;
490 padding: 8px;
491 }
492
493 .king-addons-horizontal .king-addons-description {
494 font-size: inherit;
495 line-height: 1.2em;
496 display: inline-block;
497 width: 100%;
498 margin: 0;
499 padding: 8px;
500 }
501
502 .king-addons-wrapper .king-addons-description {
503 font-size: 15px;
504 background-color: transparent !important;
505 }
506
507 .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar {
508 position: absolute;
509 z-index: 0;
510 left: 50%;
511 }
512
513 .king-addons-horizontal-bottom .king-addons-swiper-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
514 background: rgba(0, 0, 0, 0.25);
515 }
516
517 .king-addons-horizontal-bottom .king-addons-button-prev,
518 .king-addons-horizontal-bottom .king-addons-button-next {
519 font-size: 40px;
520 line-height: 0;
521 position: absolute;
522 top: 113px;
523 display: flex;
524 align-items: center;
525 justify-content: center;
526 cursor: pointer;
527 }
528
529 .king-addons-horizontal-bottom .king-addons-button-prev {
530 margin-left: -10px;
531 }
532
533 .king-addons-horizontal-bottom .king-addons-button-next {
534 margin-right: -10px;
535 }
536
537 .king-addons-button-prev.swiper-button-disabled,
538 .king-addons-button-next.swiper-button-disabled {
539 cursor: auto;
540 pointer-events: none;
541 opacity: 0.35;
542 }
543
544 .swiper-slide.auto-height {
545 height: auto;
546 }
547
548 .king-addons-horizontal-timeline .swiper-slide {
549 height: auto;
550 }
551
552 .king-addons-horizontal-bottom {
553 height: auto;
554 }
555
556 .king-addons-horizontal .king-addons-year-wrap {
557 position: absolute;
558 z-index: 1;
559 bottom: 61px;
560 left: 12px;
561 display: table;
562 overflow: hidden;
563 width: 72px;
564 height: 36px;
565 table-layout: fixed;
566 text-align: center;
567 vertical-align: middle;
568 word-break: break-word;
569 border-radius: 6px;
570 background: rgb(255, 0, 179);
571 }
572
573 .king-addons-horizontal .king-addons-year-label {
574 display: table-cell;
575 padding: 2px;
576 vertical-align: middle;
577 background: rgb(255, 0, 179);
578 }
579
580 .king-addons-timeline-centered .king-addons-extra-label {
581 transform: translateY(-50%) !important;
582 }
583
584 .king-addons-horizontal .king-addons-extra-label {
585 position: absolute;
586 left: 50%;
587 display: table;
588 overflow: hidden;
589 width: 100%;
590 height: 80px;
591 transform: translateX(-50%);
592 text-align: center;
593 vertical-align: middle;
594 }
595
596 .king-addons-horizontal .king-addons-extra-label .king-addons-label,
597 .king-addons-horizontal .king-addons-extra-label .king-addons-sub-label {
598 display: inline-block;
599 width: 100%;
600 }
601
602 .king-addons-horizontal .king-addons-icon {
603 position: absolute;
604 z-index: 100;
605 left: 50%;
606 display: block;
607 width: 40px;
608 height: 40px;
609 transform: translate(-50%, 50%);
610 text-align: center;
611 }
612
613 .king-addons-horizontal .king-addons-icon i {
614 font-size: 26px;
615 line-height: 40px;
616 }
617
618 .king-addons-horizontal .king-addons-icon:empty {
619 bottom: 48px;
620 left: calc(50% - 12px);
621 width: 24px;
622 height: 24px;
623 }
624
625 .king-addons-horizontal .king-addons-story-info:before {
626 position: absolute;
627 bottom: -28px;
628 display: block;
629 content: "";
630 border-bottom-color: transparent !important;
631 }
632
633 .king-addons-horizontal .king-addons-story-info {
634 position: relative;
635 justify-content: center;
636 box-sizing: border-box;
637 transition: all 200ms ease-in;
638 text-align: center;
639 }
640
641 .king-addons-horizontal .king-addons-title {
642 font-size: 20px;
643 padding: 8px 8px 0;
644 }
645
646 .king-addons-horizontal .king-addons-swiper-pagination.swiper-pagination-progressbar {
647 position: absolute;
648 z-index: 0;
649 left: 50%;
650 height: 2px;
651 }
652
653 .king-addons-horizontal .king-addons-button-prev,
654 .king-addons-horizontal .king-addons-button-next {
655 font-size: 40px;
656 line-height: 0;
657 position: absolute;
658 display: flex;
659 align-items: center;
660 justify-content: center;
661 cursor: pointer;
662 }
663
664 .king-addons-horizontal .king-addons-button-prev {
665 margin-left: -6px;
666 }
667
668 .king-addons-horizontal .king-addons-button-next {
669 margin-right: -6px;
670 }
671
672 .king-addons-button-prev.swiper-button-disabled,
673 .king-addons-button-next.swiper-button-disabled {
674 cursor: auto;
675 pointer-events: none;
676 opacity: 0.55;
677 }
678
679 .king-addons-wrapper .king-addons-year {
680 font-size: 16px;
681 font-weight: bold;
682 line-height: 2.1em;
683 }
684
685 .king-addons-wrapper span.king-addons-extra-label {
686 font-size: 15px;
687 font-weight: normal;
688 color: #7A7A7A;
689 }
690
691 .king-addons-wrapper .king-addons-title {
692 font-size: 24px;
693 font-weight: bold;
694 }
695
696 .king-addons-horizontal-bottom .king-addons-story-info {
697 border-bottom: 4px solid #23A455;
698 }
699
700 .king-addons-horizontal-bottom .king-addons-story-info:before {
701 border: 13px solid transparent;
702 }
703
704 .king-addons-left-aligned .king-addons-data-wrap:after {
705 border-right-color: transparent !important;
706 }
707
708 .king-addons-horizontal .king-addons-story-info {
709 border-bottom: 4px solid #23A455;
710 }
711
712 .king-addons-horizontal .king-addons-story-info:before {
713 border: 13px solid transparent;
714 }
715
716 .king-addons-horizontal .king-addons-timeline-prev-arrow {
717 left: 1%;
718 transform: translateY(50%);
719 }
720
721 .king-addons-horizontal .king-addons-timeline-next-arrow {
722 right: 1%;
723 transform: translateY(50%) rotate(180deg);
724 }
725
726 .king-addons-horizontal-bottom .king-addons-timeline-prev-arrow {
727 left: 1%;
728 transform: translateY(-50%);
729 }
730
731 .king-addons-horizontal-bottom .king-addons-timeline-next-arrow {
732 right: 1%;
733 transform: translateY(-50%) rotate(180deg);
734 }
735
736 @media screen and (max-width: 767px) {
737 .king-addons-timeline-centered.king-addons-both-sided-timeline .king-addons-timeline-entry {
738 float: none;
739 width: 100%;
740 }
741
742 .king-addons-timeline-centered .king-addons-right-aligned .king-addons-icon {
743 transform: translate(-50%, -50%) !important;
744 }
745
746 .king-addons-one-sided-timeline .king-addons-extra-label {
747 position: static !important;
748 display: block;
749 margin-bottom: 10px;
750 transform: none !important;
751 }
752
753 .king-addons-right-aligned .king-addons-extra-label .king-addons-label {
754 text-align: left !important;
755 }
756 }