22

✏️ Editing: ep-content-switcher.css

.bdt-content-switcher{position:relative;box-sizing:border-box}.bdt-content-switcher *,.bdt-content-switcher *:before,.bdt-content-switcher *:after{box-sizing:unset !important}.bdt-switcher-content-wrapper{margin-top:20px}.bdt-switcher-content-wrapper .bdt-switcher-content:not(.bdt-active){display:none}.bdt-content-switcher-icon{font-size:15px}.bdt-content-switcher-icon i{color:#777}.bdt-content-switcher-icon i,.bdt-content-switcher-icon svg{width:1em;height:1em;fill:#777}.bdt-content-switcher-icon.bdt-active i{color:#232323}.bdt-content-switcher-icon.bdt-active svg{fill:#232323}.bdt-switcher-arrows{position:absolute;font-size:48px}.bdt-switcher-arrows.bdt-arrows-left{left:0;-webkit-transform:translate(var(--ep-content-switcher-arrows-h-offset-left, -35px), var(--ep-content-switcher-arrows-v-offset, -26px)) rotate(var(--ep-content-switcher-arrows-rotate, 0));transform:translate(var(--ep-content-switcher-arrows-h-offset-left, -35px), var(--ep-content-switcher-arrows-v-offset, -26px)) rotate(var(--ep-content-switcher-arrows-rotate, 0))}.bdt-switcher-arrows.bdt-arrows-right{right:0;-webkit-transform:translate(var(--ep-content-switcher-arrows-h-offset-right, 40px), var(--ep-content-switcher-arrows-v-offset, -26px)) rotate(var(--ep-content-switcher-arrows-rotate, 0));transform:translate(var(--ep-content-switcher-arrows-h-offset-right, 40px), var(--ep-content-switcher-arrows-v-offset, -26px)) rotate(var(--ep-content-switcher-arrows-rotate, 0))}.bdt-switcher-arrows svg{fill:#03a9f4;width:1em;height:1em}.bdt-content-switcher-badge{position:absolute;-webkit-transform:translate(var(--ep-content-switcher-badge-h-offset, 0), var(--ep-content-switcher-badge-v-offset, -40px)) rotate(var(--ep-content-switcher-badge-rotate, 0));transform:translate(var(--ep-content-switcher-badge-h-offset, 0), var(--ep-content-switcher-badge-v-offset, -40px)) rotate(var(--ep-content-switcher-badge-rotate, 0));padding:4px 8px;font-weight:600;background:#03a9f4;color:#ffffff;border-radius:3px;font-size:13px;display:inline-block;width:max-content;line-height:1.3}.bdt-switch-container-wrap{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px}.bdt-switch-container-wrap .bdt-package-text{font-size:15px;text-transform:capitalize;font-weight:500;color:#777;display:inline-flex;align-items:center;gap:8px}.bdt-switch-container-wrap .bdt-package-text.bdt-active{color:#232323}.bdt-content-switcher .bdt-knobs{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.bdt-content-switcher .bdt-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;background-color:#ebf7fc;transition:.3s ease all;z-index:1}.bdt-content-switcher .button{position:relative;top:50%;width:74px;height:36px;padding:0;background:transparent}.bdt-toggle-button-1.button,.bdt-toggle-button-1.button .bdt-layer,.bdt-toggle-button-2.button,.bdt-toggle-button-2.button .bdt-layer,.bdt-toggle-button-3.button,.bdt-toggle-button-3.button .bdt-layer,.bdt-toggle-button-4.button,.bdt-toggle-button-4.button .bdt-layer,.bdt-toggle-button-5.button,.bdt-toggle-button-5.button .bdt-layer,.bdt-toggle-button-6.button,.bdt-toggle-button-6.button .bdt-layer,.bdt-toggle-button-7.button,.bdt-toggle-button-7.button .bdt-layer,.bdt-toggle-button-8.button,.bdt-toggle-button-8.button .bdt-layer{border-radius:100px}.bdt-content-switcher .checkbox{position:relative;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;z-index:3;display:block}.bdt-toggle-button-1 .bdt-knobs{transition:.3s ease all}.bdt-toggle-button-1 .bdt-knobs:before,.bdt-toggle-button-2 .bdt-knobs:before,.bdt-toggle-button-2 .bdt-knobs:after,.bdt-toggle-button-3 .bdt-knobs::before,.bdt-toggle-button-4 .bdt-knobs:before,.bdt-toggle-button-4 .bdt-knobs:after,.bdt-toggle-button-5 .bdt-knobs:before,.bdt-toggle-button-6 .bdt-knobs:before{content:'';position:absolute;top:50%;left:5px;width:20px;height:10px;padding:9px 4px;background-color:#03a9f4;border-radius:50%;transform:translateY(-50%)}.bdt-toggle-button-1 .bdt-knobs:before{border-radius:50%;transition:.3s cubic-bezier(.18, .89, .35, 1.15) all;transition:.3s ease all}.bdt-toggle-button-1 .checkbox:checked+.bdt-knobs:before{content:'';left:calc(100% - 33px);background-color:#f44336}.bdt-toggle-button-1 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-toggle-button-1 .bdt-layer{transition:.3s ease all}.bdt-toggle-button-2 .bdt-knobs:before,.bdt-toggle-button-2 .bdt-knobs:after{transition:.3s ease all;content:''}.bdt-toggle-button-2{overflow:hidden}.bdt-toggle-button-2 .bdt-knobs:after{right:-28px;left:auto;background-color:#f44336}.bdt-toggle-button-2 .checkbox:checked+.bdt-knobs:before{left:-28px}.bdt-toggle-button-2 .checkbox:checked+.bdt-knobs:after{right:4px}.bdt-toggle-button-2 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-toggle-button-3 .bdt-knobs:before{transition:.3s ease all,left .3s cubic-bezier(.18, .89, .35, 1.15)}.bdt-toggle-button-3 .checkbox:active+.bdt-knobs:before{width:46px;border-radius:100px}.bdt-toggle-button-3 .checkbox:checked:active+.bdt-knobs:before{margin-left:-26px}.bdt-toggle-button-3 .checkbox:checked+.bdt-knobs:before{content:'';left:calc(100% - 33px);background-color:#f44336}.bdt-toggle-button-3 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-toggle-button-4 .bdt-knobs:before,.bdt-toggle-button-4 .bdt-knobs:after{transition:.3s cubic-bezier(.18, .89, .35, 1.15) all}.bdt-toggle-button-4{overflow:hidden}.bdt-toggle-button-4 .bdt-knobs:after{top:-28px;right:5px;left:auto;background-color:#f44336}.bdt-toggle-button-4 .checkbox:checked+.bdt-knobs:before{top:-28px}.bdt-toggle-button-4 .checkbox:checked+.bdt-knobs:after{top:50%}.bdt-toggle-button-4 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-toggle-button-5{perspective:60px;overflow:visible}.bdt-toggle-button-5 .bdt-knobs{transition:.3s ease all}.bdt-toggle-button-5 .bdt-knobs:before{transition:.3s cubic-bezier(.18, .89, .35, 1.15) all;transform:rotateY(0) translateY(-50%);transform-origin:center;transition:.3s ease all}.bdt-toggle-button-5 .bdt-knobs span:before{content:''}.bdt-toggle-button-5 .bdt-layer{transform:rotateY(0);transform-origin:center;transition:.3s ease all}.bdt-toggle-button-5 .checkbox:checked+.bdt-knobs:before{left:calc(100% - 33px);transform:rotateY(180deg) translateY(-50%);background-color:#f44336}.bdt-toggle-button-5 .checkbox:checked+.bdt-knobs span{left:calc(100% - 33px)}.bdt-toggle-button-5 .checkbox:checked+.bdt-knobs span:before{content:'';left:calc(100% - 33px)}.bdt-toggle-button-5 .checkbox:checked~.bdt-layer{background-color:#fcebeb;transform:rotateY(-180deg)}.bdt-toggle-button-6{overflow:visible}.bdt-toggle-button-6 .bdt-knobs{transform:rotateZ(0);transition:.4s cubic-bezier(.18, .89, .35, 1.15) all}.bdt-toggle-button-6 .bdt-knobs:before{transform:rotateZ(0) translateY(-50%);transition:.4s cubic-bezier(.18, .89, .35, 1.15) all}.bdt-toggle-button-6 .bdt-layer{transform:rotateZ(0);transition:.4s cubic-bezier(.18, .89, .35, 1.15) all}.bdt-toggle-button-6 .checkbox:checked+.bdt-knobs{transform:rotateZ(-180deg)}.bdt-toggle-button-6 .checkbox:checked+.bdt-knobs:before{content:'';background-color:#f44336;transform:rotateZ(180deg) translateY(50%)}.bdt-toggle-button-6 .checkbox:checked~.bdt-layer{background-color:#fcebeb;transform:rotateZ(180deg)}.bdt-toggle-button-7 .bdt-knobs::before,.bdt-toggle-button-7 .bdt-knobs::after{content:'';position:absolute;top:50%;width:20px;height:10px;padding:9px 4px;border-radius:50%;opacity:0;transition:.3s ease all;z-index:2;transform:translateY(-50%)}.bdt-toggle-button-7 .bdt-knobs:before{left:5px}.bdt-toggle-button-7 .bdt-knobs:after{left:calc(100% - 33px);background-color:#f44336}.bdt-toggle-button-7 .bdt-knobs span{position:absolute;top:50%;width:20px;height:10px;padding:9px 4px;border-radius:50%;z-index:1;left:4px;background-color:#03a9f4;transition:.2s ease all;transform:translateY(-50%)}.bdt-toggle-button-7 .checkbox:checked+.bdt-knobs:before{opacity:0}.bdt-toggle-button-7 .checkbox:checked+.bdt-knobs:after{opacity:1}.bdt-toggle-button-7 .checkbox:checked+.bdt-knobs span{top:50%;left:calc(100% - 23px);width:2px;height:2px;padding:3px;background-color:#fff;z-index:3;transform:translateY(-50%)}.bdt-toggle-button-7 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-toggle-button-8{overflow:hidden}.bdt-toggle-button-8 .bdt-knobs:before{content:'';color:#fff;left:4px;z-index:2}.bdt-toggle-button-8 .bdt-knobs:after{content:'';left:calc(100% - 33px);color:#fff;background-color:#f44336;opacity:0;z-index:2}.bdt-toggle-button-8 .bdt-knobs span{left:5px;background-color:#03a9f4;z-index:1}.bdt-toggle-button-8 .bdt-knobs span,.bdt-toggle-button-8 .bdt-knobs::before,.bdt-toggle-button-8 .bdt-knobs::after{position:absolute;top:50%;width:20px;height:10px;line-height:1;padding:9px 4px;border-radius:50%;transition:.3s ease all;transform:translateY(-50%)}.bdt-toggle-button-8 .checkbox:checked+.bdt-knobs:before{opacity:0}.bdt-toggle-button-8 .checkbox:checked+.bdt-knobs:after{opacity:1}.bdt-toggle-button-8 .checkbox:checked+.bdt-knobs span{background-color:#fcebeb;transform:scale(10);top:0}.bdt-toggle-button-9{overflow:visible}.bdt-toggle-button-9 .bdt-knobs{perspective:70px}.bdt-toggle-button-9 .bdt-knobs::before,.bdt-toggle-button-9 .bdt-knobs::after{position:absolute;top:4px;border-radius:2px;width:20px;height:10px;padding:9px 4px}.bdt-toggle-button-9 .bdt-knobs:before{content:'';left:4px}.bdt-toggle-button-9 .bdt-knobs:after{content:'';right:4px}.bdt-toggle-button-9 .bdt-knobs span{position:absolute;top:50%;left:4px;border-radius:2px;width:33px;height:28px;background-color:#03a9f4;transform:rotateY(0) translateY(-50%);transform-origin:100% 50%;transition:.6s ease all;z-index:1}.bdt-toggle-button-9 .checkbox:checked+.bdt-knobs span{transform:rotateY(-180deg) translateY(-50%);background-color:#f44336}.bdt-toggle-button-9 .checkbox:checked~.bdt-layer{background-color:#fcebeb}.bdt-content-switcher .bdt-toggle-button-9.button{border-radius:2px}.bdt-content-switcher-tab{padding:10px 18px;font-size:14px;font-weight:500;color:#282833;border-radius:30px;transition:background-color .3s ease,color .3s ease,border .3s ease;display:flex;align-items:center;gap:8px;line-height:1.3}.bdt-content-switcher-tab.bdt-active{color:#fff;background-color:#03a9f4}.bdt-content-switcher-tab.bdt-active .bdt-content-switcher-icon i{color:#fff}.bdt-content-switcher-tab.bdt-active .bdt-content-switcher-icon svg{fill:#fff}

MR SKB