{"loaderData":{"0":null,"0-2":{"total":7188,"projects":[{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"cb0d1b","snapshot":null,"tags":null,"title":"switch by ercnersoy","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":1052,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 1.5em;\n}\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 1rem 0rem 1rem;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.5em;\n width: 1.4em;\n left: 0em;\n bottom: 0em;\n background-color: white;\n transition: 0.4s;\n border-radius: 1rem 0rem 1rem;\n border: 3px solid white;\n}\n\n.ch:checked + .slider {\n background-color: #72eb67;\n}\n\n.ch:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n}\n\n.ch:checked + .slider:before {\n transform: translateX(2.2em);\n background-color: green;\n box-shadow: 0px 0px 40px 5px #72eb67;\n border: 3px solid white;\n}\n\n.ch:checked + .slider::after {\n content: \"|\";\n color: white;\n position: absolute;\n right: 0.3rem;\n top: -3.3px;\n transform: rotate(45deg);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"c53f16","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":206,"cssLen":924,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n

\n\n","css":"#checkbox2 {\n display: none;\n}\n\n.toggle2 {\n position: relative;\n width: 60px;\n height: 60px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n transition-duration: .5s;\n}\n\n.bars {\n width: 100%;\n height: 6px;\n background-color: rgb(92, 176, 255);\n border-radius: 6px;\n}\n\n#bar5 {\n transition-duration: .8s;\n}\n\n#bar4,#bar6 {\n width: 80%;\n}\n\n#checkbox2:checked + .toggle2 .bars {\n position: absolute;\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar5 {\n transform: scaleX(0);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar4 {\n width: 100%;\n transform: rotate(45deg);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 #bar6 {\n width: 100%;\n transform: rotate(-45deg);\n transition-duration: .5s;\n}\n\n#checkbox2:checked + .toggle2 {\n transition-duration: .5s;\n transform: rotate(180deg);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"682dab","snapshot":null,"tags":null,"title":"switch by nanda248","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":161,"cssLen":1204,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n

\n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 4em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #585F60;\n transition: .5s;\n border-radius: 1em;\n z-index: 1;\n}\n\n.slider .circle {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 50%;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #F1EEF5;\n transition: .5s;\n z-index: 5;\n}\n\n.divider {\n position: absolute;\n left: 0.65em;\n width: 0.8em;\n height: 1.4em;\n background-color: #eed202;\n z-index: 10;\n border-radius: 0 2em 2em 0;\n transition: .4s;\n}\n\n.switch input:checked + .slider {\n background-color: #eed202;\n z-index: 1;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 4px #191A28;\n}\n\n.switch input:checked + .slider .circle {\n transform: translateX(2em);\n}\n\n.switch input:checked + .slider .circle .divider {\n left: 0;\n width: 0.8em;\n border-radius: 2em 0 0 2em;\n background-color: #585F60;\n z-index: 10;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"3083e7","snapshot":null,"tags":null,"title":"switch by alexruix","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 30px;\n box-shadow: 0 0 0 2px #f32f2150;\n border: 4px solid transparent;\n overflow: hidden;\n transition: .4s;\n background: transparent;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n width: 100%;\n height: 100%;\n border-radius: 30px;\n background-color: #f32f21;\n transform: translateX(-50%);\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #f7b48e;\n}\n\ninput:focus:checked + .slider {\n box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"539b70","snapshot":null,"tags":null,"title":"switch by xantha01","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":131,"cssLen":1569,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n \n

\n ","css":"#checkbox {\n display: none;\n}\n\n.switch {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(255, 5, 5);\n border-radius: 50%;\n z-index: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid rgb(255, 126, 126);\n box-shadow: 0px 0px 3px rgb(248, 248, 248) inset;\n}\n\n.powersign {\n position: relative;\n width: 30%;\n height: 30%;\n border: 4px solid rgb(248, 248, 248);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.powersign::before {\n content: \"\";\n width: 8px;\n height: 60%;\n background-color: rgb(248, 248, 248);\n position: absolute;\n top: -60%;\n z-index: 2;\n}\n\n.powersign::after {\n content: \"\";\n width: 3px;\n height: 60%;\n background-color: rgb(255, 5, 5);\n position: absolute;\n top: -60%;\n z-index: 3;\n}\n\n#checkbox:checked + .switch .powersign {\n border: 4px solid rgb(255, 255, 255);\n box-shadow: 0px 0px 10px rgb(151, 243, 255),\n 0px 0px 5px rgb(151, 243, 255) inset;\n}\n\n#checkbox:checked + .switch .powersign::after {\n background-color: rgb(150, 255, 194);\n}\n\n#checkbox:checked + .switch {\n box-shadow: 0px 0px 1px rgb(150, 255, 194) inset,\n 0px 0px 2px rgb(150, 255, 194) inset,\n 0px 0px 10px rgb(150, 255, 194) inset,\n 0px 0px 40px rgb(150, 255, 194),\n 0px 0px 100px rgb(150, 255, 194),\n 0px 0px 5px rgb(150, 255, 194);\n border: 2px solid rgb(255, 255, 255);\n background-color: rgb(136, 219, 150);\n}\n\n#checkbox:checked + .switch .powersign::before {\n background-color: rgb(255, 255, 255);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"9cab1b","snapshot":null,"tags":null,"title":"switch by KareemTolan","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":110,"cssLen":1819,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* Toggle switch styles */\n.toggle-switch {\n display: inline-block;\n position: relative;\n width: 60px;\n height: 34px;\n}\n\n.toggle-switch input {\n display: none;\n}\n\n.toggle-switch__slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n border-radius: 34px;\n transition: background-color 0.2s ease-in-out;\n}\n\n.toggle-switch__slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: #fff;\n border-radius: 50%;\n transition: transform 0.2s ease-in-out;\n}\n\n.toggle-switch input:checked + .toggle-switch__slider {\n background-color: #2196f3;\n /* Neon effect */\n box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2196f3, 0 0 40px #2196f3, 0 0 50px #2196f3, 0 0 60px #2196f3, 0 0 70px #2196f3;\n}\n\n.toggle-switch input:checked + .toggle-switch__slider:before {\n transform: translateX(26px);\n}\n\n/* Shake animation */\n.toggle-switch input:checked + .toggle-switch__slider:before:hover {\n animation: shake 0.5s ease-in-out;\n}\n\n@keyframes shake {\n 0% {\n transform: translateX(0);\n }\n\n 25% {\n transform: translateX(-5px);\n }\n\n 50% {\n transform: translateX(5px);\n }\n\n 75% {\n transform: translateX(-5px);\n }\n\n 100% {\n transform: translateX(0);\n }\n}\n\n/* Accessibility styles */\n.toggle-switch input:focus + .toggle-switch__slider {\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.5);\n}\n\n.toggle-switch input:focus:not(:checked) + .toggle-switch__slider:before,\n.toggle-switch input:focus:checked + .toggle-switch__slider:before {\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);\n}\n\n.toggle-switch input:not(:checked):disabled + .toggle-switch__slider,\n.toggle-switch input:checked:disabled + .toggle-switch__slider {\n opacity: 0.5;\n cursor: not-allowed;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"92db8e","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1325,"cssLen":2999,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n \n\n \n

\n\n\n","css":".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.left-1{left:0.25rem}.left-12{left:3rem}.top-1{top:0.25rem}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-12{height:3rem}.w-10{width:2.5rem}.w-24{width:6rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-gray-900{--tw-border-opacity:1;border-color:rgb(17 24 39 / var(--tw-border-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.fill-green-600{fill:#16a34a}.fill-red-600{fill:#dc2626}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.duration-700{transition-duration:700ms}.after\\:absolute::after{content:var(--tw-content);position:absolute}.after\\:left-1::after{content:var(--tw-content);left:0.25rem}.after\\:top-1::after{content:var(--tw-content);top:0.25rem}.after\\:h-10::after{content:var(--tw-content);height:2.5rem}.after\\:w-10::after{content:var(--tw-content);width:2.5rem}.after\\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\\:bg-gray-900::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.after\\:outline-none::after{content:var(--tw-content);outline:2px solid transparent;outline-offset:2px}.after\\:duration-200::after{content:var(--tw-content);transition-duration:200ms}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:after\\:translate-x-12::after{content:var(--tw-content);--tw-translate-x:3rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:hover ~ .peer-hover\\:after\\:scale-95::after{content:var(--tw-content);--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus ~ .peer-focus\\:outline-none{outline:2px solid transparent;outline-offset:2px}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"b26766","snapshot":null,"tags":null,"title":"switch by AnthonyPreite","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":114,"cssLen":1022,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":".switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.switch .checkbox {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n box-shadow: 1px 1px 5px 0 #d84f68 inset;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: #d84f68;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n box-shadow: inset 1px 1px 2px 0px #ff7ca7;\n}\n\n.checkbox:checked + .slider {\n box-shadow: 1px 1px 5px 0 #2a9d8f inset;\n}\n\n.checkbox:checked + .slider:before {\n -webkit-transform: translateX(26px);\n -ms-transform: translateX(26px);\n transform: translateX(26px);\n background-color: #2a9d8f;\n box-shadow: inset -1px 1px 2px 0px #a3fff4;\n}\n\n/* Rounded sliders */\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"ad20cc","snapshot":null,"tags":null,"title":"switch by LeonKohli","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6128,"cssLen":619,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n

\n \n

\n","css":".toggle {\n background-color: #fff;\n width: 56px;\n height: 56px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n cursor: pointer;\n box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);\n line-height: 1;\n}\n\n.input {\n display: none;\n}\n\n.icon {\n grid-column: 1 / 1;\n grid-row: 1 / 1;\n transition: transform 500ms;\n}\n\n.icon--moon {\n transition-delay: 200ms;\n}\n\n.icon--sun {\n transform: scale(0);\n}\n\n#switch:checked + .icon--moon {\n transform: rotate(360deg) scale(0);\n}\n\n#switch:checked ~ .icon--sun {\n transition-delay: 200ms;\n transform: scale(1) rotate(360deg);\n}\n\n.w-8 {\n width: 2rem /* 32px */;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"e4e4c3","snapshot":null,"tags":null,"title":"switch by vk-uiux","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":242,"cssLen":1419,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n \n

","css":"#checkbox {\n display: none;\n}\n\n.toggle {\n position: relative;\n width: 40px;\n cursor: pointer;\n margin: auto;\n display: block;\n height: calc(4px * 3 + 11px * 2);\n}\n\n.bar {\n position: absolute;\n left: 0;\n right: 0;\n height: 4px;\n border-radius: calc(4px / 2);\n background: #7b52b9;\n color: inherit;\n opacity: 1;\n transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;\n}\n\n/***** Collapse Animation *****/\n\n.bar--top {\n bottom: calc(50% + 11px + 4px/ 2);\n transition-property: bottom,margin,transform;\n transition-delay: calc(0s + 0.35s),0s,0s;\n}\n\n.bar--middle {\n top: calc(50% - 4px/ 2);\n transition-property: top,opacity;\n transition-duration: 0.35s,0s;\n transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);\n}\n\n.bar--bottom {\n top: calc(50% + 11px + 4px/ 2);\n transition-property: top,transform;\n transition-delay: 0s;\n}\n\n#checkbox:checked + .toggle .bar--top {\n bottom: calc(50% - 11px - 4px);\n margin-bottom: calc(11px + 4px/ 2);\n transform: rotate(45deg);\n transition-delay: calc(0s + 0.35s * .3),calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);\n}\n\n#checkbox:checked + .toggle .bar--middle {\n top: calc(50% + 11px);\n opacity: 0;\n transition-duration: 0.35s,0s;\n transition-delay: 0s,calc(0s + 0.35s);\n}\n\n#checkbox:checked + .toggle .bar--bottom {\n top: calc(50% - 4px/ 2);\n transform: rotate(-45deg);\n transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"818833","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:07:50.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":224,"cssLen":839,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n \n

\n \n\n","css":"#checkbox {\n display: none;\n}\n\n.toggle {\n position: relative;\n width: 40px;\n height: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition-duration: .3s;\n}\n\n.bars {\n width: 100%;\n height: 4px;\n background-color: rgb(76, 189, 151);\n border-radius: 5px;\n transition-duration: .3s;\n}\n\n#checkbox:checked + .toggle .bars {\n margin-left: 13px;\n}\n\n#checkbox:checked + .toggle #bar2 {\n transform: rotate(135deg);\n margin-left: 0;\n transform-origin: center;\n transition-duration: .3s;\n}\n\n#checkbox:checked + .toggle #bar1 {\n transform: rotate(45deg);\n transition-duration: .3s;\n transform-origin: left center;\n}\n\n#checkbox:checked + .toggle #bar3 {\n transform: rotate(-45deg);\n transition-duration: .3s;\n transform-origin: left center;\n}\n"},{"created":"2024-01-22T17:06:35.000Z","isPrivate":0,"projectId":"e94058","snapshot":null,"tags":null,"title":"switch by rraushan1205","updated":"2024-01-22T17:06:35.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":100,"cssLen":1786,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 1.2em;\n height: 3.3em;\n}\n\n/* Hide default HTML checkbox */\n.switch .chk {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgb(230, 0, 0);\n transition: .4s;\n border-radius: 5px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: .5em;\n width: 2.4em;\n border-radius: 5px;\n left: -0.6em;\n top: 0.2em;\n background-color: rgb(68, 66, 66);\n box-shadow: 0 6px 7px rgba(0,0,0,0.3);\n transition: .4s;\n}\n\n.slider:before, .slider:after {\n content: \"\";\n display: block;\n}\n\n.slider:after {\n background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,\n\t\trepeating-linear-gradient(90deg,rgb(78, 78, 78) 0,rgb(141, 135, 135),rgb(97, 96, 96) 20%,rgb(97, 95, 95) 20%,rgb(99, 99, 99) 40%) 0 50% / 50% 100%,\n\t\tradial-gradient(circle at 50% 50%,rgb(95, 94, 94) 25%, transparent 26%);\n background-repeat: no-repeat;\n border: 0.25em solid transparent;\n border-left: 0.4em solid #464646;\n border-right: 0 solid transparent;\n transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;\n transform: translateX(-22.5%) rotate(90deg);\n transform-origin: 25% 50%;\n position: relative;\n top: 0.5em;\n left: 0.55em;\n width: 2em;\n height: 1em;\n box-sizing: border-box;\n}\n\n.chk:checked + .slider {\n background-color: limegreen;\n}\n\n.chk:focus + .slider {\n box-shadow: 0 0 1px limegreen;\n}\n\n.chk:checked + .slider:before {\n transform: translateY(2.3em);\n}\n\n.chk:checked + .slider:after {\n transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);\n}"}]}},"actionData":null,"errors":null}