{"loaderData":{"0":null,"0-3":{"total":7398,"projects":[{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"097889","snapshot":null,"tags":null,"title":"switch by KINGFRESS","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":134,"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":"/* Dark Mode Only ;) */\n\n/* 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: .5em;\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: #5B5B5B;\n transition: .4s;\n border-radius: 30px;\n display: flex;\n align-items: center;\n}\n\n.slider .circle {\n background-color: #212121;\n height: 3em;\n width: 3em;\n border-radius: 50%;\n position: absolute;\n left: 0;\n transform: translateX(-50%);\n transition: .4s;\n}\n\n.slider .circle::before {\n position: absolute;\n content: \"\";\n height: 2.3em;\n width: 2.3em;\n border-radius: 50%;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: rgb(182, 182, 182);\n transition: .4s;\n}\n\n.slider .circle::after {\n content: '';\n background-color: #212121;\n height: 1.7em;\n width: 1.7em;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: .4s;\n}\n\ninput:checked + .slider .circle {\n transform: translateX(2em);\n transition: .4s;\n}\n\ninput:checked + .slider .circle::before {\n background-color: #e1e1e1;\n transition: .4s;\n}\n\ninput:checked + .slider .circle::after {\n width: 0;\n height: 0;\n transition: .4s;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"8e3e43","snapshot":null,"tags":null,"title":"switch by Muaz-Aldalil","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":737,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".toggle-checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: none;\n}\n\n.toggle-switch {\n background-color: gray;\n width: 78px;\n height: 32px;\n border-radius: 16px;\n position: relative;\n transition: 0.3s;\n cursor: pointer;\n}\n\n.toggle-switch::before {\n content: \"\";\n font-weight: 900;\n background-color: white;\n width: 24px;\n height: 24px;\n position: absolute;\n border-radius: 50%;\n top: 4px;\n left: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #ddd;\n transition: 0.3s;\n}\n\n.toggle-checkbox:checked+.toggle-switch {\n background-color: #0075ff;\n}\n\n.toggle-checkbox:checked+.toggle-switch::before {\n content: \"\";\n left: 50px;\n color: #0075ff;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"19e1c9","snapshot":null,"tags":null,"title":"switch by uxRakhal","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":1171,"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: 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 inset: 0;\n background: white;\n border-radius: 50px;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n right: 0.3em;\n bottom: 0.3em;\n transform: translateX(150%);\n background-color: #59d102;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.slider:after {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #ff0000;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #59d102;\n}\n\n.switch input:checked + .slider:before {\n transform: translateY(0);\n}\n\n.switch input:checked + .slider::after {\n transform: translateX(-150%);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"80f132","snapshot":null,"tags":null,"title":"switch by anonithrax","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":115,"cssLen":679,"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 position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n display: none;\n}\n\n/* The slider */\n.switch label {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .3s;\n}\n\n.switch label::before {\n position: absolute;\n content: \"\";\n height: 30px;\n width: 30px;\n left: 2px;\n bottom: 2px;\n background-color: white;\n transition: .3s;\n}\n\n.switch input:checked + label {\n background-color: #4c71f2;\n}\n\n.switch input:checked + label::before {\n transform: translateX(26px);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"6a8a64","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":55,"cssLen":942,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" ","css":".switch {\n position: relative;\n height: 1.5rem;\n width: 3rem;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n border-radius: 9999px;\n background-color: rgba(100, 116, 139, 0.377);\n transition: all .3s ease;\n}\n\n.switch:checked {\n background-color: rgba(32, 151, 243, 1);\n}\n\n.switch::before {\n position: absolute;\n content: \"\";\n left: calc(1.5rem - 1.6rem);\n top: calc(1.5rem - 1.6rem);\n display: block;\n height: 1.6rem;\n width: 1.6rem;\n cursor: pointer;\n border: 1px solid rgba(100, 116, 139, 0.527);\n border-radius: 9999px;\n background-color: rgba(255, 255, 255, 1);\n box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);\n transition: all .3s ease;\n}\n\n.switch:hover::before {\n box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15)\n}\n\n.switch:checked:hover::before {\n box-shadow: 0 0 0px 8px rgba(32, 151, 243, .15)\n}\n\n.switch:checked:before {\n transform: translateX(100%);\n border-color: rgba(32, 151, 243, 1);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"d26f23","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":445,"cssLen":4981,"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-wrapper input[type=\"checkbox\"] {\n display: none;\n visibility: hidden;\n}\n\n.checkbox-wrapper *,\n .checkbox-wrapper *::before,\n .checkbox-wrapper *::after {\n box-sizing: border-box;\n}\n\n.checkbox-wrapper .toggleButton {\n cursor: pointer;\n display: block;\n transform-origin: 50% 50%;\n transform-style: preserve-3d;\n transition: transform 0.14s ease;\n}\n\n.checkbox-wrapper .toggleButton:active {\n transform: rotateX(30deg);\n}\n\n.checkbox-wrapper .toggleButton input + div {\n border: 3px solid rgba(0, 89, 255, 0.288);\n border-radius: 50%;\n position: relative;\n width: 44px;\n height: 44px;\n}\n\n.checkbox-wrapper .toggleButton input + div svg {\n fill: none;\n stroke-width: 3.6;\n stroke: rgb(0, 0, 0);\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 44px;\n height: 44px;\n display: block;\n position: absolute;\n left: -3px;\n top: -3px;\n right: -3px;\n bottom: -3px;\n z-index: 1;\n stroke-dashoffset: 124.6;\n stroke-dasharray: 0 162.6 133 29.6;\n transition: all 0.4s ease 0s;\n}\n\n.checkbox-wrapper .toggleButton input + div:before,\n .checkbox-wrapper .toggleButton input + div:after {\n content: \"\";\n width: 3px;\n height: 16px;\n background: #000;\n position: absolute;\n left: 50%;\n top: 50%;\n border-radius: 5px;\n}\n\n.checkbox-wrapper .toggleButton input + div:before {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n -webkit-animation: bounceInBefore-44 0.3s linear forwards 0.3s;\n animation: bounceInBefore-44 0.3s linear forwards 0.3s;\n}\n\n.checkbox-wrapper .toggleButton input + div:after {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n -webkit-animation: bounceInAfter-44 0.3s linear forwards 0.3s;\n animation: bounceInAfter-44 0.3s linear forwards 0.3s;\n}\n\n.checkbox-wrapper .toggleButton input:checked + div svg {\n stroke-dashoffset: 162.6;\n stroke-dasharray: 0 162.6 28 134.6;\n transition: all 0.4s ease 0.2s;\n}\n\n.checkbox-wrapper .toggleButton input:checked + div:before {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n -webkit-animation: bounceInBeforeDont-44 0.3s linear forwards 0s;\n animation: bounceInBeforeDont-44 0.3s linear forwards 0s;\n}\n\n.checkbox-wrapper .toggleButton input:checked + div:after {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n -webkit-animation: bounceInAfterDont-44 0.3s linear forwards 0s;\n animation: bounceInAfterDont-44 0.3s linear forwards 0s;\n}\n\n@-webkit-keyframes bounceInBefore-44 {\n 0% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n }\n\n 50% {\n opacity: 0.9;\n transform: scale(1.1) translate(-50%, -50%) rotate(45deg);\n }\n\n 80% {\n opacity: 1;\n transform: scale(0.89) translate(-50%, -50%) rotate(45deg);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(45deg);\n }\n}\n\n@keyframes bounceInBefore-44 {\n 0% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n }\n\n 50% {\n opacity: 0.9;\n transform: scale(1.1) translate(-50%, -50%) rotate(45deg);\n }\n\n 80% {\n opacity: 1;\n transform: scale(0.89) translate(-50%, -50%) rotate(45deg);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(45deg);\n }\n}\n\n@-webkit-keyframes bounceInAfter-44 {\n 0% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n }\n\n 50% {\n opacity: 0.9;\n transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);\n }\n\n 80% {\n opacity: 1;\n transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(-45deg);\n }\n}\n\n@keyframes bounceInAfter-44 {\n 0% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n }\n\n 50% {\n opacity: 0.9;\n transform: scale(1.1) translate(-50%, -50%) rotate(-45deg);\n }\n\n 80% {\n opacity: 1;\n transform: scale(0.89) translate(-50%, -50%) rotate(-45deg);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(-45deg);\n }\n}\n\n@-webkit-keyframes bounceInBeforeDont-44 {\n 0% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(45deg);\n }\n\n 100% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n }\n}\n\n@keyframes bounceInBeforeDont-44 {\n 0% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(45deg);\n }\n\n 100% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(45deg);\n }\n}\n\n@-webkit-keyframes bounceInAfterDont-44 {\n 0% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n }\n}\n\n@keyframes bounceInAfterDont-44 {\n 0% {\n opacity: 1;\n transform: scale(1) translate(-50%, -50%) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: scale(0.3) translate(-50%, -50%) rotate(-45deg);\n }\n}\n"},{"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}"}]}},"actionData":null,"errors":null}