{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"fab444","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":2618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ch, .ch:before, .ch:after {\n transition: all 0.3s ease-in-out;\n}\n\n.ch {\n background-color: rgb(27,123,145);\n border-radius: 0.2em;\n box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset;\n font-size: 20px;\n overflow: hidden;\n position: relative;\n width: 3em;\n height: 1.5em;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n z-index: 0;\n}\n\n.ch:before, .ch:after {\n content: \"\";\n display: block;\n position: absolute;\n}\n\n.ch:before {\n background-color: currentColor;\n border-radius: 0.125em;\n box-shadow: 0 0 0 0.05em inset,\n\t\t-0.12em -0.12em 0 rgb(109,148,184) inset,\n\t\t-0.4em -0.3em 0 0.05em inset,\n\t\t0.12em 0.12em 0 rgb(255,255,255) inset;\n color: rgb(149,188,224);\n opacity: 0.9;\n bottom: 0;\n left: 0.125em;\n width: 1.25em;\n height: 1.25em;\n z-index: 2;\n}\n\n.ch:after {\n background-image: /* white */radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\t/* yellow */\n\t\tradial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\t/* orange */\n\t\tradial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\t/* red-orange */\n\t\tradial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%);\n background-position: 100% 1.5em;\n background-size: 1.5em 1.5em;\n background-repeat: no-repeat;\n border-radius: 0 0 0 0.1em / 0 0 0 0;\n box-shadow: 0 0 0 0 rgb(169,208,244) inset;\n bottom: 0;\n left: 0;\n width: 1.5em;\n height: 1.5em;\n z-index: 1;\n}\n/* Checked */\n.ch:checked {\n background-color: rgb(92,8,8);\n}\n\n.ch:checked:before {\n border-radius: 50%;\n transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5);\n}\n\n.ch:checked:after {\n background-position: 100% 0;\n box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset;\n width: 3em;\n}\n\n/* Other States */\n.ch:focus {\n\t/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */\n outline: 0;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"f5136d","snapshot":null,"tags":null,"title":"switch by TroyRandall","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":744,"cssLen":1397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n 14\n

\n","css":"/* The switch - the box around the slider */\n.comment-react {\n margin: 0;\n display: flex;\n justify-content: center;\n padding: 5px;\n background-color: #f1f1f1;\n border-radius: 5px;\n scale: 1.5;\n width: 100px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: \"\";\n width: 40px;\n height: 40px;\n position: absolute;\n left: -3px;\n top: -3px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 20px;\n font-weight: 600;\n color: #707277;\n padding-right: 10px;\n text-align: center;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"b7a341","snapshot":null,"tags":null,"title":"switch by Shoh2008","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":804,"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: #2e2e2e;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #4e4;\n transition: .4s;\n}\n\n.input:checked + .slider {\n background-color: #000;\n}\n\n.input:focus + .slider {\n box-shadow: 0 0 1px #000;\n}\n\n.input:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"99f290","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11697,"cssLen":567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"body {\n font-size: 20px;\n background-color: #d5d9e0;\n padding: 40px;\n}\n\n#checkbox-on {\n display: none;\n}\n\n.control-element {\n cursor: pointer;\n}\n\n.text-label {\n font-size: 1.8em;\n font-family: sans-serif;\n fill: #6D7788;\n text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);\n pointer-events: none;\n}\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.position-container {\n cursor: pointer;\n}\n\n.svg-switch-container {\n width: 10em;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"0ce868","snapshot":null,"tags":null,"title":"switch by Javierrocadev","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1457,"cssLen":3782,"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":".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}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-rose-400{--tw-gradient-from:#fb7185 var(--tw-gradient-from-position);--tw-gradient-to:rgb(251 113 133 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-red-900{--tw-gradient-to:#7f1d1d var(--tw-gradient-to-position)}.stroke-gray-900{stroke:#111827}.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-300{transition-duration:300ms}.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-50::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.after\\:outline-none::after{content:var(--tw-content);outline:2px solid transparent;outline-offset:2px}.after\\:duration-300::after{content:var(--tw-content);transition-duration:300ms}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.group:hover .group-hover\\:scale-75{--tw-scale-x:.75;--tw-scale-y:.75;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\\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\\:from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.peer:checked ~ .peer-checked\\:to-emerald-900{--tw-gradient-to:#064e3b var(--tw-gradient-to-position)}.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:51.000Z","isPrivate":0,"projectId":"212137","snapshot":null,"tags":null,"title":"switch by elijahgummer","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":129,"cssLen":2168,"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 --blue: #0d7eff;\n --g08: #e1e5eb;\n --g04: #848ea1;\n text-align: center;\n}\n\n.checkbox .tgl {\n display: none;\n}\n.checkbox .tgl,\n.checkbox .tgl:after,\n.checkbox .tgl:before,\n.checkbox .tgl *,\n.checkbox .tgl *:after,\n.checkbox .tgl *:before,\n.checkbox .tgl + .tgl-btn {\n box-sizing: border-box;\n}\n.checkbox .tgl::selection,\n.checkbox .tgl:after::selection,\n.checkbox .tgl:before::selection,\n.checkbox .tgl *::selection,\n.checkbox .tgl *:after::selection,\n.checkbox .tgl *:before::selection,\n.checkbox .tgl + .tgl-btn::selection {\n background: none;\n}\n.checkbox .tgl + .tgl-btn {\n outline: 0;\n display: block;\n width: 57px;\n height: 27px;\n position: relative;\n cursor: pointer;\n user-select: none;\n font-size: 12px;\n font-weight: 400;\n color: #fff;\n}\n.checkbox .tgl + .tgl-btn:after,\n.checkbox .tgl + .tgl-btn:before {\n position: relative;\n display: block;\n content: \"\";\n width: 44%;\n height: 100%;\n}\n.checkbox .tgl + .tgl-btn:after {\n left: 0;\n}\n.checkbox .tgl + .tgl-btn:before {\n display: inline;\n position: absolute;\n top: 7px;\n}\n.checkbox .tgl:checked + .tgl-btn:after {\n left: 56.5%;\n}\n\n.checkbox .tgl + .tgl-btn {\n background: var(--g08);\n border-radius: 20rem;\n padding: 2px;\n transition: all 0.4s ease;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl + .tgl-btn:after {\n border-radius: 2em;\n background: #fff;\n transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),\n padding 0.3s ease, margin 0.3s ease;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n}\n.checkbox .tgl + .tgl-btn:before {\n content: \"No\";\n left: 28px;\n color: var(--g04);\n transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.checkbox .tgl + .tgl-btn:active {\n box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl + .tgl-btn:active:after {\n padding-right: 0.4em;\n}\n.checkbox .tgl:checked + .tgl-btn {\n background: var(--blue);\n}\n.checkbox .tgl:checked + .tgl-btn:active {\n box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);\n}\n.checkbox .tgl:checked + .tgl-btn:active:after {\n margin-left: -0.4em;\n}\n.checkbox .tgl:checked + .tgl-btn:before {\n content: \"Yes\";\n left: 4px;\n color: #fff;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"d8f073","snapshot":null,"tags":null,"title":"switch by Galahhad","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4248,"cssLen":2416,"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","css":"/* checkbox settings 👇 */\n\n.switch {\n /* global */\n --total_transition_duration: .3s;\n /* switch */\n --slider_width: 2.875em;\n --slider_height: 1.5em;\n --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%);\n --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%);\n --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2);\n --slider_radius: calc(var(--slider_height) / 2);\n /* circle */\n --circle_diameter: 1.125em;\n --circle_rotation: 360deg;\n /* svg */\n --svg_width: var(--circle_diameter);\n --sun-color: #fff;\n --moon-color: #fff;\n}\n\n.switch input {\n display: none;\n}\n\n.slider svg {\n position: absolute;\n height: auto;\n color: var(--svg-color);\n transition: var(--total_transition_duration) ease;\n width: 100%;\n}\n\n.circle svg.sun {\n transform: scale(1);\n color: var(--sun-color);\n}\n\n.circle svg.moon {\n transform: scale(0);\n color: var(--moon-color);\n width: calc(100% - 2px);\n}\n\n.slider {\n display: inline-block;\n width: var(--slider_width);\n height: var(--slider_height);\n border-radius: var(--slider_radius);\n position: relative;\n cursor: pointer;\n transition: var(--total_transition_duration) ease;\n overflow: hidden;\n}\n\n.slider::before,\n.slider::after {\n content: \"\";\n position: absolute;\n inset: 0;\n transition: var(--total_transition_duration) ease;\n}\n\n/* ::before and ::after backgrounds are needed for smooth \ntransition of gradients otherwise there is no way :\\ */\n.slider::before {\n opacity: 0;\n background: var(--slider_night_bg);\n}\n\n.slider::after {\n opacity: 1;\n background: var(--slider_light_bg);\n}\n\n/* ------------ */\n\n.circle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--circle_diameter);\n height: var(--circle_diameter);\n position: absolute;\n top: var(--slider_offset);\n left: var(--slider_offset);\n transition: var(--total_transition_duration) ease;\n z-index: 10;\n}\n\n/* actions */\n\n.switch input:checked+.slider::before {\n opacity: 1;\n}\n\n.switch input:checked+.slider::after {\n opacity: 0;\n}\n\n.switch input:active+.slider .circle {\n transform: scale(0.9);\n}\n\n.switch input:checked+.slider .circle {\n left: calc(100% - var(--circle_diameter) - var(--slider_offset));\n}\n\n.switch input:checked+.slider .sun {\n transform: scale(0) rotate(var(--circle_rotation));\n}\n\n.switch input:checked+.slider .moon {\n transform: scale(1) rotate(var(--circle_rotation));\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"ebe22f","snapshot":null,"tags":null,"title":"switch by Adir-SL","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1244,"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 --sizeVar: 2em;\n --color-primary: #dedede;\n --color-secondary: #aaaaaa;\n --color-primary-on: #1d9bf0;\n --color-secondary-on: #ffffff;\n position: absolute;\n width: calc(var(--sizeVar) * 2);\n height: var(--sizeVar);\n background-color: var(--color-primary);\n border-radius: var(--sizeVar);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;\n cursor: pointer;\n transform: translate(-50%, -50%);\n transition: background-color 150ms ease-out;\n}\n\n.switch::after {\n content: \"\";\n position: absolute;\n margin: calc(var(--sizeVar) / 10);\n height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));\n width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));\n background-color: var(--color-secondary);\n border-radius: var(--sizeVar);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);\n transition: transform 150ms ease-out, background-color 150ms ease-out;\n}\n\n.switch:has(input:checked)::after {\n transform: translateX(var(--sizeVar));\n background-color: var(--color-secondary-on);\n}\n\n.switch:has(input:checked) {\n background-color: var(--color-primary-on);\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"37deac","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":824,"cssLen":1606,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 50px;\n padding: 10px;\n background-image: linear-gradient(to bottom, #f0f0f0, #e8e8e8);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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 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: 50px;\n width: 80px;\n height: 40px;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: background-color 0.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: 2px;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n background-color: #e8e8e8;\n box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.1), inset 0 -4px 2px rgba(0, 0, 0, 0.2), inset 0 6px 2px rgba(255, 255, 255, 0.3), 0 4px 4px rgba(0, 0, 0, 0.5);\n transition: left 0.4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 42px;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, 4px);\n gap: 2px;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 2px;\n height: 2px;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"4ccd54","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":826,"cssLen":1778,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 0.5em;\n padding: 0.125em;\n background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);\n box-shadow: 0 1px 1px rgb(255 255 255 / 0.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: 0.375em;\n width: 3em;\n height: 1.5em;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 0.0625em 0.125em rgb(255 255 255 / 0.2),\n inset 0 0.0625em 0.125em rgb(0 0 0 / 0.4);\n transition: background-color 0.4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: lime;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: 0.0625em;\n border-radius: 0.3125em;\n width: 1.375em;\n height: 1.375em;\n background-color: #e8e8e8;\n box-shadow: inset 0 -0.0625em 0.0625em 0.125em rgb(0 0 0 / 0.1),\n inset 0 -0.125em 0.0625em rgb(0 0 0 / 0.2),\n inset 0 0.1875em 0.0625em rgb(255 255 255 / 0.3),\n 0 0.125em 0.125em rgb(0 0 0 / 0.5);\n transition: left 0.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: 0.125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: 0.125em;\n height: 0.125em;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"5b1fc2","snapshot":null,"tags":null,"title":"switch by adamgiebl","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":405,"cssLen":3593,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".toggle-container {\n --knob-size: 1.75em;\n display: flex;\n justify-content: center;\n position: relative;\n}\n\n.toggle-input {\n position: absolute;\n z-index: 2;\n bottom: 132.5%;\n border-radius: 50%;\n transform: rotate(-25deg);\n transform-origin: 50% 4.75em;\n width: var(--knob-size);\n height: var(--knob-size);\n opacity: 0;\n /* fix em sizing */\n font: inherit;\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n cursor: pointer;\n}\n\n.toggle-input:checked {\n transform: rotate(25deg);\n}\n\n.toggle-handle-wrapper {\n position: absolute;\n z-index: 1;\n bottom: -135%;\n -webkit-mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);\n mask-image: linear-gradient(to bottom, #000 62.125%, transparent 50%);\n width: 200%;\n overflow: hidden;\n}\n\n.toggle-handle {\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: rotate(-25deg);\n transform-origin: bottom center;\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper > .toggle-handle {\n transform: rotate(25deg);\n}\n\n.toggle-handle-knob {\n position: relative;\n z-index: 1;\n border-radius: 50%;\n width: var(--knob-size);\n height: var(--knob-size);\n background-image: radial-gradient(farthest-corner at 70% 30%, #ffffff 4%, #61bdda 12% 24%, #4791b2 50% 65%, #61bdda 75%);\n transition: transform .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-knob {\n transform: rotate(-90deg);\n}\n\n /* toggle handle knob hover inner shadow */\n.toggle-handle-knob::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n box-shadow: inset 0 0 8px 2px rgb(255 255 255 / .4);\n opacity: 0;\n transition: opacity .2s;\n}\n\n@media (hover: hover) {\n .toggle-input:hover + .toggle-handle-wrapper .toggle-handle-knob::after,\n .toggle-input:focus-visible + .toggle-handle-wrapper .toggle-handle-knob::after {\n opacity: 1;\n }\n}\n\n.toggle-handle-bar-wrapper {\n position: relative;\n width: .5em;\n height: 3em;\n}\n\n.toggle-handle-bar {\n position: absolute;\n top: calc(var(--knob-size) / 2 * -1);\n left: 0;\n width: 100%;\n height: calc(100% + var(--knob-size) / 2);\n background-image: linear-gradient(to right, #1f1f1f, #161616, #1f1f1f 45% 55%, #161616, #1f1f1f);\n background-position-x: .06125em;\n transition: background-position-x .24s cubic-bezier(.65, 1.35, .5, 1);\n box-shadow: inset 0 1em .25em rgb(0 0 0 / .4);\n}\n\n.toggle-input:checked + .toggle-handle-wrapper .toggle-handle-bar {\n background-position-x: -.06125em;\n}\n\n.toggle-base {\n position: relative;\n border-radius: 3.125em;\n padding: .25em;\n width: 3.5em;\n height: 1.125em;\n background-color: #222222;\n background-image: linear-gradient(to bottom, #444444, #222222);\n box-shadow: 0 -.25em .5em #fff, 0 .25em .5em #d7d7d7;\n}\n\n.toggle-base-inside {\n position: relative;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(to bottom, #1f1f1f, #0f0f0f);\n box-shadow: inset 0 .0625em rgb(255 255 255 / .2), inset 0 -.03125em rgb(255 255 255 / 1), inset 0 -.0625em .25em rgb(0 0 0 / .1);\n}\n\n /* toggle base inside active */\n.toggle-base-inside::after {\n content: '';\n position: absolute;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(to bottom, #00cfb6, #00a5bf);\n box-shadow: inherit;\n opacity: 0;\n transition: opacity .24s cubic-bezier(.65, 1.35, .5, 1);\n}\n\n.toggle-input:checked ~ .toggle-base .toggle-base-inside::after {\n opacity: 1;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"371050","snapshot":null,"tags":null,"title":"switch by zebra76966","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":868,"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 position: absolute;\n top: 50%;\n width: 30px;\n height: 60px;\n padding: 2px;\n left: 50%;\n transform: translate(-50%,-50%);\n}\n\n.switch input {\n opacity: 0;\n height: 0;\n width: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 20px;\n border: 1px solid rgba(0,0,0,0.2);\n border-style: outset;\n background-color: white;\n transition: 0.4s;\n}\n\n.slider::before {\n content: \"🌞\";\n font-size: 22px;\n line-height: 15px;\n border-radius: 100%;\n position: absolute;\n left: -0.8px;\n top: 8px;\n background-color: transparent;\n transition: 0.4s;\n}\n\n.switch > input:checked + .slider {\n background-color: #000429;\n}\n\n.switch > input:checked + .slider:before {\n content: \"🌑\";\n font-size: 22px;\n line-height: 25px;\n background-color: transparent;\n transform: translateY(24px);\n}"}]}},"actionData":null,"errors":null}