{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"1cbcf3","snapshot":null,"tags":null,"title":"switch by mrhyddenn","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":794,"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 background-color: #fff;\n border: 1px solid #99999;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.5em;\n width: 1.5em;\n left: 0.20em;\n bottom: 0.25em;\n background-color: white;\n transition: .4s;\n box-shadow: 0 0 2px 0px #999999;\n}\n\ninput:checked + .slider {\n background-color: #2da54f;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #2196F3;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"ae0554","snapshot":null,"tags":null,"title":"switch by Shoh2008","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":131,"cssLen":5175,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n To-do\n

","css":".checkbox-wrapper-11 {\n --text: #414856;\n --check: #4F29F0;\n --disabled: #C3C8DE;\n --border-radius: 10px;\n border-radius: var(--border-radius);\n position: relative;\n padding: 5px;\n display: grid;\n grid-template-columns: 30px auto;\n align-items: center;\n}\n\n.checkbox-wrapper-11 label {\n color: var(--text);\n position: relative;\n cursor: pointer;\n display: grid;\n align-items: center;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n transition: color 0.3s ease;\n}\n\n.checkbox-wrapper-11 label::before,\n .checkbox-wrapper-11 label::after {\n content: \"\";\n position: absolute;\n}\n\n.checkbox-wrapper-11 label::before {\n height: 2px;\n width: 8px;\n left: -27px;\n background: var(--check);\n border-radius: 2px;\n transition: background 0.3s ease;\n}\n\n.checkbox-wrapper-11 label:after {\n height: 4px;\n width: 4px;\n top: 8px;\n left: -25px;\n border-radius: 50%;\n}\n\n.checkbox-wrapper-11 input[type=checkbox] {\n -webkit-appearance: none;\n -moz-appearance: none;\n position: relative;\n height: 15px;\n width: 15px;\n outline: none;\n border: 0;\n margin: 0 15px 0 0;\n cursor: pointer;\n background: var(--background);\n display: grid;\n align-items: center;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {\n content: \"\";\n position: absolute;\n height: 2px;\n top: auto;\n background: var(--check);\n border-radius: 2px;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::before {\n width: 0px;\n right: 60%;\n transform-origin: right bottom;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]::after {\n width: 0px;\n left: 40%;\n transform-origin: left bottom;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked::before {\n -webkit-animation: check-01-11 0.4s ease forwards;\n animation: check-01-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked::after {\n -webkit-animation: check-02-11 0.4s ease forwards;\n animation: check-02-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label {\n color: var(--disabled);\n -webkit-animation: move-11 0.3s ease 0.1s forwards;\n animation: move-11 0.3s ease 0.1s forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {\n background: var(--disabled);\n -webkit-animation: slice-11 0.4s ease forwards;\n animation: slice-11 0.4s ease forwards;\n}\n\n.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {\n -webkit-animation: firework-11 0.5s ease forwards 0.1s;\n animation: firework-11 0.5s ease forwards 0.1s;\n}\n\n@-webkit-keyframes move-11 {\n 50% {\n padding-left: 8px;\n padding-right: 0px;\n }\n\n 100% {\n padding-right: 4px;\n }\n}\n\n@keyframes move-11 {\n 50% {\n padding-left: 8px;\n padding-right: 0px;\n }\n\n 100% {\n padding-right: 4px;\n }\n}\n\n@-webkit-keyframes slice-11 {\n 60% {\n width: 100%;\n left: 4px;\n }\n\n 100% {\n width: 100%;\n left: -2px;\n padding-left: 0;\n }\n}\n\n@keyframes slice-11 {\n 60% {\n width: 100%;\n left: 4px;\n }\n\n 100% {\n width: 100%;\n left: -2px;\n padding-left: 0;\n }\n}\n\n@-webkit-keyframes check-01-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(45deg);\n }\n\n 100% {\n width: 5px;\n top: 8px;\n transform: rotate(45deg);\n }\n}\n\n@keyframes check-01-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(45deg);\n }\n\n 100% {\n width: 5px;\n top: 8px;\n transform: rotate(45deg);\n }\n}\n\n@-webkit-keyframes check-02-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(-45deg);\n }\n\n 100% {\n width: 10px;\n top: 8px;\n transform: rotate(-45deg);\n }\n}\n\n@keyframes check-02-11 {\n 0% {\n width: 4px;\n top: auto;\n transform: rotate(0);\n }\n\n 50% {\n width: 0px;\n top: auto;\n transform: rotate(0);\n }\n\n 51% {\n width: 0px;\n top: 8px;\n transform: rotate(-45deg);\n }\n\n 100% {\n width: 10px;\n top: 8px;\n transform: rotate(-45deg);\n }\n}\n\n@-webkit-keyframes firework-11 {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n }\n}\n\n@keyframes firework-11 {\n 0% {\n opacity: 1;\n box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;\n }\n\n 30% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;\n }\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"b6b9f2","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":602,"cssLen":3354,"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

","css":".switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.switch input {\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: #6E6E6E;\n transition: .4s;\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: white;\n transition: .4s;\n}\n\n.input:checked + .slider {\n background-color: #1849AB;\n}\n\n.input:focus + .slider {\n box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);\n outline: none;\n}\n\n.input:checked + .slider:before {\n transform: translateX(26px);\n}\n\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}"},{"created":"2024-01-22T17:06:12.000Z","isPrivate":0,"projectId":"2e9e6e","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":648,"cssLen":3922,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0\n}\n\n.relative {\n position: relative\n}\n\n.inline-flex {\n display: inline-flex\n}\n\n.h-12 {\n height: 3rem\n}\n\n.w-24 {\n width: 6rem\n}\n\n.cursor-pointer {\n cursor: pointer\n}\n\n.items-center {\n align-items: center\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.bg-rose-400 {\n --tw-bg-opacity: 1;\n background-color: rgb(251 113 133 / var(--tw-bg-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n\n.duration-300 {\n transition-duration: 300ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:left-1::after {\n content: var(--tw-content);\n left: 0.25rem\n}\n\n.after\\:top-1::after {\n content: var(--tw-content);\n top: 0.25rem\n}\n\n.after\\:flex::after {\n content: var(--tw-content);\n display: flex\n}\n\n.after\\:h-10::after {\n content: var(--tw-content);\n height: 2.5rem\n}\n\n.after\\:w-10::after {\n content: var(--tw-content);\n width: 2.5rem\n}\n\n.after\\:-rotate-180::after {\n content: var(--tw-content);\n --tw-rotate: -180deg;\n 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))\n}\n\n.after\\:items-center::after {\n content: var(--tw-content);\n align-items: center\n}\n\n.after\\:justify-center::after {\n content: var(--tw-content);\n justify-content: center\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-gray-50::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(249 250 251 / var(--tw-bg-opacity))\n}\n\n.after\\:outline-none::after {\n content: var(--tw-content);\n outline: 2px solid transparent;\n outline-offset: 2px\n}\n\n.after\\:duration-300::after {\n content: var(--tw-content);\n transition-duration: 300ms\n}\n\n.after\\:content-\\[\\'\\2716\\FE0F\\'\\]::after{--tw-content:'✖️';content:var(--tw-content)}.peer:checked ~ .peer-checked\\:bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129 / var(--tw-bg-opacity))}.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:checked ~ .peer-checked\\:after\\:rotate-0::after{content:var(--tw-content);--tw-rotate:0deg;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:checked ~ .peer-checked\\:after\\:content-\\[\\'\\2714\\FE0F\\'\\]::after{--tw-content:'✔️';content:var(--tw-content)}.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:06:12.000Z","isPrivate":0,"projectId":"018c2f","snapshot":null,"tags":null,"title":"switch by JulioCodesSM","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":113,"cssLen":752,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":".button {\n display: inline-block;\n width: 50px;\n height: 20px;\n background-color: #fff;\n border-radius: 30px;\n cursor: pointer;\n padding: 0;\n color: white;\n}\n\n#toggle {\n display: none;\n}\n\n.slider {\n display: block;\n font-size: 10px;\n position: relative;\n}\n\n.slider::after {\n content: 'OFF';\n width: 25px;\n height: 25px;\n background-color: #e03c3c;\n border: 2px solid #fff;\n border-radius: 50%;\n box-shadow: 0 0 5px rgba(0, 0, 0, .25);\n position: absolute;\n top: -5px;\n left: 0;\n display: grid;\n place-content: center;\n line-height: 0;\n transition: background-color .25s, transform .25s ease-in;\n}\n\n#toggle:checked + .slider::after {\n content: 'ON';\n background-color: #05ae3e;\n transform: translateX(25px) rotate(360deg);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"2c7ca8","snapshot":null,"tags":null,"title":"switch by namecho","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1638,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":".switch {\n --button-width: 3.5em;\n --button-height: 2em;\n --toggle-diameter: 1.5em;\n --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);\n --toggle-shadow-offset: 10px;\n --toggle-wider: 3em;\n --color-grey: #cccccc;\n --color-green: #4296f4;\n}\n\n.slider {\n display: inline-block;\n width: var(--button-width);\n height: var(--button-height);\n background-color: var(--color-grey);\n border-radius: calc(var(--button-height) / 2);\n position: relative;\n transition: 0.3s all ease-in-out;\n}\n\n.slider::after {\n content: \"\";\n display: inline-block;\n width: var(--toggle-diameter);\n height: var(--toggle-diameter);\n background-color: #fff;\n border-radius: calc(var(--toggle-diameter) / 2);\n position: absolute;\n top: var(--button-toggle-offset);\n transform: translateX(var(--button-toggle-offset));\n box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);\n transition: 0.3s all ease-in-out;\n}\n\n.switch input[type=\"checkbox\"]:checked + .slider {\n background-color: var(--color-green);\n}\n\n.switch input[type=\"checkbox\"]:checked + .slider::after {\n transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));\n box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);\n}\n\n.switch input[type=\"checkbox\"] {\n display: none;\n}\n\n.switch input[type=\"checkbox\"]:active + .slider::after {\n width: var(--toggle-wider);\n}\n\n.switch input[type=\"checkbox\"]:checked:active + .slider::after {\n transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));\n}\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"cf554a","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1295,"cssLen":1719,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n \n","css":".checkbox {\n --border-default: #bbbbc1;\n --border-hover: #9898a3;\n --active: #6E7BF2;\n --active-tick: #ffffff;\n display: block;\n width: 18px;\n height: 18px;\n cursor: pointer;\n position: relative;\n -webkit-tap-highlight-color: transparent;\n}\n\n.checkbox svg {\n display: block;\n position: absolute;\n}\n\n.checkbox input {\n display: block;\n outline: none;\n border: none;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 36%/36%;\n box-shadow: inset 0 0 0 1.5px var(--border, var(--border-default));\n background: var(--background, transparent);\n transition: background 0.25s linear, box-shadow 0.25s linear;\n}\n\n.checkbox input + svg {\n width: 21px;\n height: 18px;\n left: 0;\n top: 0;\n color: var(--active);\n}\n\n.checkbox input + svg .tick {\n stroke-dasharray: 20;\n stroke-dashoffset: var(--stroke-dashoffset, 20);\n transition: stroke-dashoffset 0.2s;\n}\n\n.checkbox input + svg .tick.mask {\n stroke: var(--active-tick);\n}\n\n.checkbox input + svg + svg {\n width: 11px;\n height: 11px;\n fill: none;\n stroke: var(--active);\n stroke-width: 1.25;\n stroke-linecap: round;\n top: -6px;\n right: -10px;\n stroke-dasharray: 4.5px;\n stroke-dashoffset: 13.5px;\n pointer-events: none;\n -webkit-animation: var(--animation, none) 0.2s ease 0.175s;\n animation: var(--animation, none) 0.2s ease 0.175s;\n}\n\n.checkbox input:checked {\n --background: var(--active);\n --border: var(--active);\n}\n\n.checkbox input:checked + svg {\n --stroke-dashoffset: 0;\n}\n\n.checkbox input:checked + svg + svg {\n --animation: check95;\n}\n\n.checkbox:hover input:not(:checked) {\n --border: var(--border-hover);\n}\n\n@keyframes check95 {\n 100% {\n stroke-dashoffset: 4.5px;\n }\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"8e404c","snapshot":null,"tags":null,"title":"switch by njesenberger","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":825,"cssLen":1734,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: .5em;\n padding: .125em;\n background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);\n box-shadow: 0 1px 1px rgb(255 255 255 / .6);\n /* resize for demo */\n font-size: 1.5em;\n}\n\n.toggle-checkbox {\n appearance: none;\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n /* fix em sizing */\n font: inherit;\n opacity: 0;\n cursor: pointer;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n position: relative;\n border-radius: .375em;\n width: 3em;\n height: 1.5em;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 .0625em .125em rgb(255 255 255 / .2), inset 0 .0625em .125em rgb(0 0 0 / .4);\n transition: background-color .4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: #f3b519;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: .0625em;\n border-radius: .3125em;\n width: 1.375em;\n height: 1.375em;\n background-color: #e8e8e8;\n box-shadow: inset 0 -.0625em .0625em .125em rgb(0 0 0 / .1), inset 0 -.125em .0625em rgb(0 0 0 / .2), inset 0 .1875em .0625em rgb(255 255 255 / .3), 0 .125em .125em rgb(0 0 0 / .5);\n transition: left .4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 1.5625em;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, min-content);\n gap: .125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: .125em;\n height: .125em;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"401fe6","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":4281,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n","css":"/* Default */\n.theme {\n display: flex;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n}\n\n.theme__fill,\n.theme__icon {\n transition: 0.3s;\n}\n\n.theme__fill {\n background-color: var(--bg);\n display: block;\n mix-blend-mode: difference;\n position: fixed;\n inset: 0;\n height: 100%;\n transform: translateX(-100%);\n}\n\n.theme__icon,\n.theme__toggle {\n z-index: 1;\n}\n\n.theme__icon,\n.theme__icon-part {\n position: absolute;\n}\n\n.theme__icon {\n display: block;\n top: 0.5em;\n left: 0.5em;\n width: 1.5em;\n height: 1.5em;\n}\n\n.theme__icon-part {\n border-radius: 50%;\n box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n width: 1em;\n height: 1em;\n transition: box-shadow var(--transDur) ease-in-out,\n\t\topacity var(--transDur) ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n transform: scale(0.5);\n}\n\n.theme__icon-part ~ .theme__icon-part {\n background-color: hsl(0,0%,100%);\n border-radius: 0.05em;\n top: 50%;\n left: calc(50% - 0.05em);\n transform: rotate(0deg) translateY(0.5em);\n transform-origin: 50% 0;\n width: 0.1em;\n height: 0.2em;\n}\n\n.theme__icon-part:nth-child(3) {\n transform: rotate(45deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(4) {\n transform: rotate(90deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(5) {\n transform: rotate(135deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(6) {\n transform: rotate(180deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(7) {\n transform: rotate(225deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(8) {\n transform: rotate(270deg) translateY(0.5em);\n}\n\n.theme__icon-part:nth-child(9) {\n transform: rotate(315deg) translateY(0.5em);\n}\n\n.theme__label,\n.theme__toggle,\n.theme__toggle-wrap {\n position: relative;\n}\n\n.theme__toggle,\n.theme__toggle:before {\n display: block;\n}\n\n.theme__toggle {\n background-color: hsl(48,90%,85%);\n border-radius: 25% / 50%;\n box-shadow: 0 0 0 0.125em var(--primaryT);\n padding: 0.25em;\n width: 6em;\n height: 3em;\n -webkit-appearance: none;\n appearance: none;\n transition: background-color var(--transDur) ease-in-out,\n\t\tbox-shadow 0.15s ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n}\n\n.theme__toggle:before {\n background-color: hsl(48,90%,55%);\n border-radius: 50%;\n content: \"\";\n width: 2.5em;\n height: 2.5em;\n transition: 0.3s;\n}\n\n.theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primary);\n outline: transparent;\n}\n\n/* Checked */\n.theme__toggle:checked {\n background-color: hsl(198,90%,15%);\n}\n\n.theme__toggle:checked:before,\n.theme__toggle:checked ~ .theme__icon {\n transform: translateX(3em);\n}\n\n.theme__toggle:checked:before {\n background-color: hsl(198,90%,55%);\n}\n\n.theme__toggle:checked ~ .theme__fill {\n transform: translateX(0);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {\n box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;\n transform: scale(1);\n top: 0.2em;\n left: -0.2em;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {\n opacity: 0;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {\n transform: rotate(45deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {\n transform: rotate(90deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {\n transform: rotate(135deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {\n transform: rotate(180deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {\n transform: rotate(225deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {\n transform: rotate(270deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {\n transform: rotate(315deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {\n transform: rotate(360deg) translateY(0.8em);\n}\n\n.theme__toggle-wrap {\n margin: 0 0.75em;\n}\n\n@supports selector(:focus-visible) {\n .theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primaryT);\n }\n\n .theme__toggle:focus-visible {\n box-shadow: 0 0 0 0.125em var(--primary);\n }\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"3a3d2b","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":109,"cssLen":864,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n \n ","css":"/* To hide the checkbox */\n#checkboxInput {\n display: none;\n}\n\n.toggleSwitch {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 80px;\n height: 40px;\n background-color: rgb(199, 199, 199);\n border-radius: 20px;\n cursor: pointer;\n transition-duration: .3s;\n}\n\n.toggleSwitch::after {\n content: \"\";\n position: absolute;\n height: 40px;\n width: 40px;\n left: 0px;\n background: conic-gradient(rgb(104, 104, 104),white,rgb(104, 104, 104),white,rgb(104, 104, 104));\n border-radius: 50%;\n transition-duration: .3s;\n box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);\n}\n\n#checkboxInput:checked+.toggleSwitch::after {\n transform: translateX(100%);\n transition-duration: .3s;\n}\n/* Switch background change */\n#checkboxInput:checked+.toggleSwitch {\n background-color: rgb(153, 197, 151);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"1d494c","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":220,"cssLen":2860,"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":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n --hue: 220deg;\n --width: 15rem;\n --accent-hue: 22deg;\n --duration: 0.6s;\n --easing: cubic-bezier(1, 0, 1, 1);\n}\n\n.togglesw {\n display: none;\n}\n\n.switch {\n --shadow-offset: calc(var(--width) / 20);\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n width: var(--width);\n height: calc(var(--width) / 2.5);\n border-radius: var(--width);\n box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),\n inset -10px -10px 10px hsl(var(--hue) 20% 93%);\n}\n\n.indicator {\n content: '';\n position: absolute;\n width: 40%;\n height: 60%;\n transition: all var(--duration) var(--easing);\n box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),\n inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),\n inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);\n}\n\n.indicator.left {\n --hue: var(--accent-hue);\n overflow: hidden;\n left: 10%;\n border-radius: 100px 0 0 100px;\n background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));\n}\n\n.indicator.left::after {\n content: '';\n position: absolute;\n opacity: 0.6;\n width: 100%;\n height: 100%;\n}\n\n.indicator.right {\n right: 10%;\n border-radius: 0 100px 100px 0;\n background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));\n}\n\n.button {\n position: absolute;\n z-index: 1;\n width: 55%;\n height: 80%;\n left: 5%;\n border-radius: 100px;\n background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);\n transition: all var(--duration) var(--easing);\n box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),\n 2px 2px 6px hsl(var(--hue) 18% 50% / 40%),\n 10px 20px 10px hsl(var(--hue) 18% 50% / 40%),\n 20px 30px 30px hsl(var(--hue) 18% 50% / 60%);\n}\n\n.button::before, \n.button::after {\n content: '';\n position: absolute;\n top: 10%;\n width: 41%;\n height: 80%;\n border-radius: 100%;\n}\n\n.button::before {\n left: 5%;\n box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);\n background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);\n}\n\n.button::after {\n right: 5%;\n box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);\n background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);\n}\n\n.togglesw:checked ~ .button {\n left: 40%;\n}\n\n.togglesw:not(:checked) ~ .indicator.left,\n.togglesw:checked ~ .indicator.right {\n box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),\n inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),\n inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);\n}"}]}},"actionData":null,"errors":null}