PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.76
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.76
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 51.1.51 All 36 releases
king-addons / includes / admin / css / admin.css

admin.css in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.76, at includes/admin/css/admin.css

995 lines 19.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*noinspection SpellCheckingInspection*/
2 html,
3 #wpcontent {
4 background: #101112;
5 }
6
7 /*noinspection SpellCheckingInspection*/
8 #wpcontent {
9 overflow-x: hidden;
10 min-height: 100vh;
11 }
12
13 @font-face {
14 font-family: 'Inter';
15 font-style: normal;
16 font-weight: 100 900;
17 font-display: swap;
18 src: url('../fonts/Inter.woff2') format('woff2');
19 }
20
21 .king-addons-admin {
22 font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
23 display: block !important;
24 max-width: 1660px;
25 margin: 10px 20px 0 0;
26 padding: 20px;
27 border-radius: 30px;
28 }
29
30 .kng-intro {
31 padding: 30px 30px 30px 30px;
32 border-radius: 30px;
33 background: rgb(26 27 27 / 90%);
34 backdrop-filter: saturate(180%) blur(20px);
35 }
36
37 .kng-intro-title {
38 font-size: 20px;
39 font-weight: 600;
40 line-height: 1;
41 display: inline-block;
42 margin: 0;
43 padding: 0 0 4px;
44 letter-spacing: .007em;
45 color: white;
46 }
47
48 .kng-intro-subtitle {
49 font-size: 15px;
50 font-weight: 300;
51 color: rgb(255 255 255 / 70%);
52 }
53
54 .kng-promo {
55 position: relative;
56 z-index: 1;
57 margin-bottom: 0;
58 padding: 45px;
59 border-radius: 30px;
60 background: rgb(26 27 27 / 90%);
61 backdrop-filter: saturate(180%) blur(20px);
62 }
63
64 .kng-promo-title {
65 font-size: 23px;
66 font-weight: 600;
67 line-height: 1;
68 display: inline-block;
69 margin: 0;
70 padding: 0 0 4px;
71 letter-spacing: .007em;
72 background: linear-gradient(132.2deg, #F9D423 7.64%, #FF4E50 97.11%);
73 -webkit-background-clip: text;
74 -webkit-text-fill-color: transparent;
75 }
76
77 .kng-promo-btn-wrap a {
78 line-height: 1;
79 display: inline-flex;
80 align-items: center;
81 flex-flow: row;
82 justify-content: center;
83 width: 140px;
84 margin-right: 0;
85 padding: 20px 25px;
86 transition: all 300ms ease;
87 text-align: center;
88 text-decoration: none;
89 border-radius: 12px;
90 background: linear-gradient(132.2deg, #F9D423 7.64%, #FF4E50 97.11%);
91 will-change: transform;
92 }
93
94 .kng-promo-btn-wrap a:hover {
95 transform: scale(1.05);
96 }
97
98 .kng-promo-btn-wrap img {
99 width: 16px;
100 height: 16px;
101 margin-right: 8px;
102 will-change: auto;
103 }
104
105 /*noinspection CssNonIntegerLengthInPixels*/
106 .kng-promo-btn-txt {
107 font-size: 16px;
108 font-weight: 500;
109 line-height: 1;
110 transform: translateZ(0);
111 text-decoration: none;
112 letter-spacing: 0.5px;
113 color: rgb(0 0 0 / 68%);
114 will-change: auto;
115 -webkit-font-smoothing: antialiased;
116 -moz-osx-font-smoothing: grayscale;
117 }
118
119 .kng-promo-price-txt-small {
120 font-size: 11px;
121 font-weight: 400;
122 vertical-align: top;
123 color: #FFFFFF99;
124 }
125
126 .kng-promo-wrap {
127 display: flex;
128 flex-flow: row;
129 }
130
131 .kng-promo-wrap-icon {
132 flex-basis: auto;
133 }
134
135 .kng-promo-wrap-icon img {
136 width: 50px;
137 margin-right: 30px;
138 }
139
140
141 .kng-promo-wrap-1 {
142 flex-basis: 100%;
143 }
144
145 .kng-promo-wrap-2 {
146 display: flex;
147 align-items: center;
148 flex-basis: auto;
149 justify-content: end;
150 width: auto;
151 margin-left: 40px;
152 }
153
154 .kng-promo-subtitle {
155 font-size: 16px;
156 font-weight: 400;
157 line-height: 1.4;
158 margin-bottom: 0;
159 color: rgb(255 255 255 / 80%);
160 }
161
162 .kng-promo-navigation {
163 display: flex;
164 flex-flow: row;
165 justify-content: end;
166 border-radius: 30px;
167 }
168
169 .kng-td-content label.prev-label {
170 display: block;
171 width: fit-content;
172 padding: 1px;
173 outline: none;
174 background: linear-gradient(85.05deg, #574ff7 6.33%, #a533ff 102.21%);
175 }
176
177 .kng-td-content label.prev-label,
178 .kng-td-content select {
179 border-radius: 12px;
180 }
181
182 .kng-tr {
183 padding: 30px 40px;
184 border-radius: 30px;
185 background: #1a1b1b;
186 }
187
188 .kng-tr .kng-td-content {
189 position: relative;
190 }
191
192 /*noinspection CssNonIntegerLengthInPixels*/
193 .kng-tr-parallax-background .kng-td-content h3:after,
194 .kng-tr-testimonial .kng-td-content h3:after,
195 .kng-tr-google-maps .kng-td-content h3:after,
196 .kng-tr-charts .kng-td-content h3:after,
197 .kng-tr-timeline .kng-td-content h3:after,
198 .kng-tr-progress-bar .kng-td-content h3:after,
199 .kng-tr-form-styler .kng-td-content h3:after,
200 /*.kng-tr-content-flip-box .kng-td-content h3:after,*/
201 /*.kng-tr-styled-text-builder .kng-td-content h3:after,*/
202 .kng-tr-card-carousel .kng-td-content h3:after,
203 .kng-tr-auto-scrolling-text .kng-td-content h3:after,
204 .kng-tr-blog-posts .kng-td-content h3:after,
205 .kng-tr-image-hover-box .kng-td-content h3:after,
206 .kng-tr-creative-button .kng-td-content h3:after,
207 .kng-tr-particles-background .kng-td-content h3:after {
208 font-size: 11px;
209 position: absolute;
210 padding: 7px 10px 10px 10px;
211 content: 'MANY STYLES';
212 text-decoration: none;
213 letter-spacing: 0.5px;
214 color: #5E2EFF;
215 border-radius: 12px;
216 /*background: linear-gradient(120.55deg, #A20BD8 18.56%, #FF4040 98.01%);*/
217 background: linear-gradient(51deg, #F7B500, #6DD400 76%);
218 -webkit-background-clip: text;
219 -webkit-text-fill-color: transparent;
220 }
221
222 tr {
223 position: relative;
224 }
225
226 /* tr:after { */
227 /* font-size: 11px;
228 font-weight: 700;
229 position: absolute;
230 top: 5px;
231 right: 10px;
232 padding: 9px 10px;
233 content: 'FREE';
234 text-decoration: none;
235 letter-spacing: 0.5px;
236 color: #646970;
237 border-radius: 12px; */
238 /*background: linear-gradient(120.55deg, #A20BD8 18.56%, #FF4040 98.01%);*/
239 /*background: linear-gradient(51deg, #F7B500, #6DD400 76%);*/
240 /*-webkit-background-clip: text;*/
241 /*-webkit-text-fill-color: transparent;*/
242 /* } */
243
244 /* .kng-tr-team-member:after,
245 .kng-tr-freemium:after {
246 content: 'FREEMIUM';
247 } */
248
249 .kng-tr .kng-td-wrap-before-1,
250 .kng-tr .kng-td-wrap-before-2 {
251 position: absolute;
252 z-index: 0;
253 transition: all 600ms;
254 opacity: 0;
255 border: 0;
256 inset: 0;
257 }
258
259 .kng-tr:hover .kng-td-wrap-before-1,
260 .kng-tr:hover .kng-td-wrap-before-2 {
261 opacity: 1;
262 }
263
264 .kng-tr .kng-td-wrap-before-1::after,
265 .kng-tr .kng-td-wrap-before-2::after {
266 position: absolute;
267 content: "";
268 transition: all 600ms;
269 pointer-events: none;
270 border: 3px solid rgba(0, 0, 0, 0);
271 border-radius: 28px;
272 background: var(--kng-addons-around-gradient) 50% / var(--kng-addons-around-bg-size) var(--kng-addons-around-bg-size);
273 inset: 0;
274 --kng-addons-around-gradient: linear-gradient(to bottom right, transparent, transparent, transparent, transparent);
275 --kng-addons-around-bg-size: calc(100% + 14px);
276 mask: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
277 mask-clip: padding-box, border-box;
278 mask-composite: intersect;
279 }
280
281 .kng-tr:hover .kng-td-wrap-before-1::after,
282 .kng-tr:hover .kng-td-wrap-before-2::after {
283 --kng-addons-around-gradient: linear-gradient(to bottom right, #0894FF 0%, #C959DD 34%, #FF2E54 68%, #FF9004);
284 }
285
286 .kng-tr:hover .kng-td-wrap-before-2 {
287 filter: blur(7px);
288 }
289
290 .kng-many-styles {
291 background: linear-gradient(107.65deg, #005DBB 17.53%, #17C969 94.64%);
292 }
293
294 .kng-premium {
295 background: linear-gradient(to right, #333333, #D78464);
296 -webkit-background-clip: text;
297 -webkit-text-fill-color: transparent;
298 }
299
300 .kng-tbody {
301 display: grid;
302 counter-reset: grid-items;
303 grid-gap: 25px;
304 }
305
306 @media (min-width: 650px) {
307 .kng-tbody {
308 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
309 }
310 }
311
312 .kng-form-table td {
313 line-height: 1.3;
314 display: block;
315 padding: 0;
316 vertical-align: middle;
317 }
318
319 .kng-settings-wrap {
320 display: flex;
321 align-items: baseline;
322 flex-flow: column-reverse;
323 margin-top: 25px;
324 }
325
326 .kng-td-link-wrap {
327 display: flex;
328 align-items: center;
329 width: fit-content;
330 margin-top: 25px;
331 margin-right: 25px;
332 }
333
334 .kng-td-link-label {
335 font-size: 17px;
336 font-weight: 500;
337 display: block;
338 width: fit-content;
339 text-decoration: none;
340 white-space: nowrap;
341 color: #5E2EFF;
342 background: linear-gradient(45deg, #E1CBFF, #9B62FF 50%, #5B03FF);
343 -webkit-background-clip: text;
344 -webkit-text-fill-color: transparent;
345 }
346
347 .kng-td-link-label-wrap {
348 display: block;
349 width: fit-content;
350 padding: 10px 15px;
351 transition: all 200ms;
352 border: 2px solid rgb(100 105 112 / 10%);
353 border-radius: 20px 10px;
354 }
355
356 .kng-td-link-label-wrap:hover {
357 border: 2px solid rgba(144, 152, 163, 0.15);
358 }
359
360 .kng-td-link {
361 text-decoration: none;
362 }
363
364 .kng-settings-switch-box-wrap {
365 display: flex;
366 align-items: center;
367 justify-content: center;
368 }
369
370 .kng-settings-switch-notice {
371 display: block;
372 margin-left: 18px;
373 color: #646970;
374 }
375
376 .kng-settings-switch-notice-2 {
377 display: block;
378 margin-left: 10px;
379 color: #646970;
380 }
381
382 .kng-section-separator {
383 margin-bottom: 0;
384 }
385
386 .kng-section-title {
387 font-size: 25px;
388 font-weight: 600;
389 line-height: 1.5;
390 display: inline-block;
391 margin: 30px 0 10px 0;
392 /*background: linear-gradient(51deg, #F7B500, #6DD400 76%);*/
393 background: linear-gradient(45deg, #E1CBFF, #9B62FF 50%, #5B03FF);
394 -webkit-background-clip: text;
395 -webkit-text-fill-color: transparent;
396 }
397
398 .kng-item-icon {
399 display: flex;
400 height: 80px;
401 margin: 5px auto;
402 padding-right: 20px;
403 border-radius: 0;
404 background: transparent;
405 }
406
407 .kng-form-table {
408 font-size: 14px;
409 clear: both;
410 width: 100%;
411 margin-top: 7px;
412 border-collapse: unset;
413 border-radius: 30px;
414 }
415
416 .kng-form-table td p {
417 font-size: 15px;
418 font-weight: 500;
419 line-height: 1.4705882353;
420 margin-top: 13px;
421 margin-bottom: 15px;
422 letter-spacing: normal;
423 }
424
425 .kng-td-description {
426 font-size: 16px;
427 font-weight: 400;
428 line-height: 1.5;
429 color: #646970;
430 }
431
432 .kng-td {
433 display: flex;
434 width: 100%;
435 }
436
437 .kng-td-icon {
438 float: left;
439 align-self: center;
440 flex: none;
441 width: 100%;
442 }
443
444 .kng-td-content {
445 display: inline-block;
446 float: left;
447 }
448
449 .kng-td-content h3 {
450 font-size: 19px;
451 font-weight: 600;
452 line-height: 1.1428571429;
453 margin: 0 0 10px;
454 letter-spacing: normal;
455 color: white;
456 }
457
458 .kng-btn-submit-wrap {
459 margin-top: 40px;
460 /* padding: 20px; */
461 text-align: right;
462 display: flex;
463 flex-flow: row;
464 justify-content: right;
465 align-items: center;
466 /* border: 2px solid #303131; */
467 border-radius: 12px;
468 }
469
470 .kng-btn-submit {
471 font-size: 13px;
472 font-weight: 400;
473 line-height: 2;
474 padding: 8px 24px;
475 cursor: pointer;
476 transition: all 300ms;
477 letter-spacing: 1px;
478 color: white;
479 border: none;
480 border-radius: 12px;
481 background: linear-gradient(45deg, #E1CBFF, #9B62FF 50%, #5B03FF);
482 height: 52px;
483 }
484
485 .kng-btn-submit:hover {
486 color: black;
487 }
488
489 .notice {
490 display: flex;
491 align-items: center;
492 flex-flow: row;
493 justify-content: center;
494 margin: 20px 40px 0 20px;
495 padding: 20px !important;
496 border: 1px solid rgb(23 200 107 / 30%);
497 border-left-width: initial;
498 border-radius: 30px;
499 outline: none;
500 background: #1a1b1b;
501 box-shadow: none;
502 }
503
504 /*noinspection CssNonIntegerLengthInPixels*/
505 .notice p {
506 font-size: 18px;
507 line-height: 1.5;
508 display: inline-block;
509 margin: 0;
510 padding: 0 0 0 10px;
511 letter-spacing: 0.5px;
512 background: linear-gradient(107.65deg, #005DBB 17.53%, #17C969 94.64%);
513 -webkit-background-clip: text;
514 -webkit-text-fill-color: transparent;
515 }
516
517 .notice-dismiss {
518 position: absolute;
519 top: unset;
520 right: 20px;
521 margin: 0;
522 padding: 10px;
523 cursor: pointer;
524 color: white;
525 border: none;
526 background: 0 0;
527 }
528
529 .notice-dismiss:before {
530 font: normal 20px/20px dashicons;
531 display: block;
532 width: 20px;
533 height: 20px;
534 content: "\f153";
535 text-align: center;
536 color: rgb(23 200 107 / 30%);
537 background: 0 0;
538 -webkit-font-smoothing: antialiased;
539 -moz-osx-font-smoothing: grayscale;
540 }
541
542 .notice-dismiss:active:before,
543 .notice-dismiss:focus:before,
544 .notice-dismiss:hover:before {
545 color: rgb(214 54 56 / 50%);
546 }
547
548 .kng-intro-wrap {
549 display: flex;
550 flex-flow: row;
551 }
552
553 .kng-intro-wrap-1 {
554 flex-basis: 100%;
555 }
556
557 .kng-intro-wrap-2 {
558 display: flex;
559 align-items: center;
560 flex-basis: 100%;
561 justify-content: end;
562 width: auto;
563 }
564
565 /*noinspection CssNonIntegerLengthInPixels*/
566 .kng-intro-version {
567 font-size: 13px;
568 line-height: 1.5;
569 width: max-content;
570 margin: 0;
571 padding: 5px 10px;
572 letter-spacing: 0.5px;
573 color: #646970;
574 border-radius: 12px;
575 background: #222425;
576 }
577
578 /*toggle*/
579 input[type=checkbox].kng-settings-switch {
580 width: 40px;
581 opacity: 0;
582 }
583
584 .kng-settings-switch-box {
585 position: relative;
586 width: 40px;
587 height: 15px;
588 border-radius: 12px;
589 background: #646970;
590 }
591
592 label.kng-settings-switch-label {
593 position: absolute;
594 top: -3px;
595 left: -3px;
596 display: block;
597 width: 21px;
598 height: 21px;
599 cursor: pointer;
600 transition: all .3s ease;
601 border-radius: 50%;
602 background: #333333;
603 }
604
605 input[type=checkbox]:checked.kng-settings-switch+label.kng-settings-switch-label {
606 left: 27px;
607 background: #f7f7f7;
608 }
609
610 .kng-settings-switch-box:has(> input[type="checkbox"]:checked) {
611 background: linear-gradient(45deg, #9B62FF, #5B03FF);
612 }
613
614 .kng-td {
615 display: flex;
616 flex-flow: column;
617 }
618
619 .kng-item-icon {
620 margin: 5px 0;
621 padding-right: 0;
622 padding-bottom: 25px;
623 }
624
625 .kng-td-icon {
626 align-self: normal;
627 }
628
629 .kng-intro-subtitle {
630 line-height: 1.4;
631 margin-bottom: 0;
632 }
633
634 .kng-intro-version {
635 margin-top: 14px;
636 }
637
638 @media (max-width: 649px) {
639 .kng-intro-wrap {
640 flex-wrap: wrap;
641 padding-bottom: 16px;
642 }
643 }
644
645 .kng-navigation {
646 display: flex;
647 /* background: #1a1b1b; */
648 /* margin-top: 20px; */
649 flex-flow: row;
650 justify-content: end;
651 border-radius: 30px;
652 }
653
654 .kng-nav-item a {
655 line-height: 1;
656 display: inline-flex;
657 align-items: center;
658 flex-flow: row;
659 margin-right: 10px;
660 padding: 18px 25px;
661 text-decoration: none;
662 border-radius: 12px;
663 background: #262829;
664 }
665
666 /*noinspection CssNonIntegerLengthInPixels*/
667 .kng-nav-item .kng-nav-item-txt {
668 font-size: 15px;
669 font-weight: 300;
670 line-height: 1;
671 text-decoration: none;
672 letter-spacing: 0.5px;
673 color: white;
674 }
675
676 .kng-nav-item img {
677 width: 16px;
678 height: 16px;
679 margin-right: 8px;
680 }
681
682 .kng-nav-item a {
683 /*background: linear-gradient(45deg, #5B03FF, #9B62FF);*/
684 background: linear-gradient(120.55deg, #A20BD8 18.56%, #FF4040 98.01%);
685 }
686
687 .kng-nav-item.kng-nav-item-current a {
688 background: rgb(255 255 255 / 10%);
689 }
690
691 .kng-nav-item a:hover {
692 outline: 1px solid #7931ff;
693 }
694
695 .kng-navigation .kng-nav-item:last-child a {
696 margin-right: 0;
697 }
698
699 .kng-nav-activate-license img {
700 width: 14px;
701 height: 13px;
702 }
703
704 /* Special Effect */
705 .kng-intro {
706 position: relative;
707 z-index: 1;
708 margin-bottom: 0;
709 padding: 30px 45px;
710 }
711
712 .king-addons-special-animation {
713 height: 15px;
714 }
715
716 .king-addons-special-animation .king-addons-special-animation-container {
717 width: 100%;
718 height: 75px
719 }
720
721 .king-addons-special-animation .king-addons-special-animation-colors {
722 transform: translate3d(0, 0, 0);
723 opacity: 1;
724 }
725
726 @keyframes colorAnimation {
727 0% {
728 opacity: 1
729 }
730
731 100% {
732 opacity: 0
733 }
734 }
735
736 .king-addons-special-animation .king-addons-special-animation-color {
737 position: absolute;
738 border-radius: 50%;
739 filter: blur(20px);
740 }
741
742 .king-addons-special-animation .king-addons-special-animation-yellow {
743 top: -75px;
744 right: 10vw;
745 width: 40vw;
746 height: 50px;
747 animation: yellowAnimation 1.5s ease-out forwards .5s;
748 background: #fd8c1f;
749 }
750
751 @keyframes yellowAnimation {
752 0% {
753 top: -75px;
754 right: 10vw
755 }
756
757 50% {
758 top: -30px
759 }
760
761 100% {
762 top: -30px;
763 right: 0
764 }
765 }
766
767 .king-addons-special-animation .king-addons-special-animation-pink-one {
768 top: -200px;
769 right: 0;
770 left: 0;
771 width: 40vw;
772 height: 150px;
773 margin: 0 auto;
774 animation: pinkOneAnimation 2s ease-in-out forwards;
775 opacity: .5;
776 background: #ff3f98;
777 }
778
779 @keyframes pinkOneAnimation {
780 0% {
781 top: -200px;
782 transform: scaleX(50%) translateX(0)
783 }
784
785 25% {
786 top: -110px;
787 transform: scaleX(50%) translateX(0)
788 }
789
790 50% {
791 top: -120px;
792 transform: scaleX(225%) translateX(10%)
793 }
794
795 100% {
796 top: -135px;
797 background: #e44cbb;
798 transform: scaleX(225%) translateX(0)
799 }
800 }
801
802 .king-addons-special-animation .king-addons-special-animation-pink-two {
803 top: -200px;
804 right: 0;
805 left: -25%;
806 width: 30vw;
807 height: 150px;
808 margin: 0 auto;
809 animation: pinkTwoAnimation 1.2s ease-in-out forwards;
810 background: #e9a5ff;
811 }
812
813 @keyframes pinkTwoAnimation {
814 0% {
815 top: -200px;
816 transform: scaleX(50%) translateX(0)
817 }
818
819 25% {
820 top: -120px;
821 transform: scaleX(70%) translateX(-10%)
822 }
823
824 50% {
825 top: -130px;
826 transform: scaleX(225%) translateX(10%)
827 }
828
829 100% {
830 top: -135px;
831 background: #f55be4;
832 transform: scaleX(225%) translateX(0);
833 left: 0
834 }
835 }
836
837 .king-addons-special-animation .king-addons-special-animation-blue {
838 top: -100px;
839 left: 0;
840 width: 60vw;
841 height: 75px;
842 animation: blueAnimation 1s ease .2s forwards;
843 opacity: .5;
844 background: #4186fd;
845 }
846
847 @keyframes blueAnimation {
848 0% {
849 top: -100px;
850 transform: translateX(0)
851 }
852
853 50% {
854 top: -50px;
855 transform: translateX(-15%)
856 }
857
858 100% {
859 top: -50px;
860 background: #019ffb;
861 transform: translateX(0)
862 }
863 }
864
865 a:focus {
866 box-shadow: none;
867 }
868
869 .kng-master-switch-wrap {
870 margin-right: 10px;
871 padding: 15px;
872 border-radius: 12px;
873 background: rgb(26 27 27 / 90%);
874 display: flex;
875 align-items: center;
876 }
877
878 .kng-master-btn {
879 font-size: 13px;
880 font-weight: 400;
881 line-height: 2;
882 padding: 8px 24px;
883 cursor: pointer;
884 transition: all 300ms;
885 letter-spacing: 1px;
886 color: #fff;
887 border: none;
888 border-radius: 12px;
889 background: rgb(255 255 255 / 10%);
890 height: 52px;
891 }
892
893 #kng-enable-all {
894 margin-right: 10px;
895 }
896
897 .kng-master-btn:hover {
898 background: rgb(255 255 255 / 15%);
899 color: rgb(255 255 255 / 85%);
900 }
901
902 .kng-master-switch-notice {
903 display: block;
904 margin-right: 18px;
905 color: #646970;
906 }
907
908 .kng-settings-submit-wrap {
909 padding: 15px;
910 border-radius: 12px;
911 background: rgb(26 27 27 / 90%);
912 }
913
914 /* Section Hover Effects */
915 .section-item {
916 position: relative;
917 overflow: hidden;
918 border-radius: 8px;
919 transition: transform 0.3s ease, box-shadow 0.3s ease;
920 }
921
922 .section-item:hover {
923 transform: translateY(-4px);
924 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
925 }
926
927 .section-content {
928 position: relative;
929 z-index: 1;
930 }
931
932 .section-overlay {
933 position: absolute;
934 top: 0;
935 left: 0;
936 right: 0;
937 bottom: 0;
938 background: rgba(0, 0, 0, 0.8);
939 display: flex;
940 align-items: center;
941 justify-content: center;
942 opacity: 0;
943 transition: opacity 0.3s ease;
944 z-index: 2;
945 }
946
947 .section-item:hover .section-overlay {
948 opacity: 1;
949 }
950
951 .section-actions {
952 display: flex;
953 flex-direction: column;
954 gap: 12px;
955 align-items: center;
956 }
957
958 .section-import-btn,
959 .section-preview-btn {
960 padding: 10px 20px;
961 border: none;
962 border-radius: 6px;
963 font-size: 14px;
964 font-weight: 600;
965 text-decoration: none;
966 transition: all 0.3s ease;
967 cursor: pointer;
968 min-width: 140px;
969 text-align: center;
970 display: inline-block;
971 }
972
973 .section-import-btn {
974 background: #6366f1;
975 color: white;
976 }
977
978 .section-import-btn:hover {
979 background: #5855eb;
980 transform: translateY(-2px);
981 box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
982 }
983
984 .section-preview-btn {
985 background: transparent;
986 color: white;
987 border: 2px solid white;
988 }
989
990 .section-preview-btn:hover {
991 background: white;
992 color: #333;
993 transform: translateY(-2px);
994 text-decoration: none;
995 }