{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"34ae06","snapshot":null,"tags":null,"title":"switch by Ratinax","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":1759,"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 /* Variables */\n --switch_width: 2em;\n --switch_height: 1em;\n --thumb_color: green;\n --track_color: #e8e8e8;\n --track_active_color: #888;\n --outline_color: #000;\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: var(--switch_width);\n height: var(--switch_height);\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 box-sizing: border-box;\n border: 2px solid var(--outline_color);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: .15s;\n border-radius: var(--switch_height);\n}\n\n.slider:before {\n box-sizing: border-box;\n position: absolute;\n content: \"\";\n height: var(--switch_height);\n width: var(--switch_height);\n border: 2px solid var(--outline_color);\n border-radius: 100%;\n left: -2px;\n bottom: -2px;\n background-color: var(--thumb_color);\n transform: translateY(-0.2em);\n box-shadow: 0 0.2em 0 var(--outline_color);\n transition: .15s;\n}\n\n.input:checked + .slider {\n background-color: var(--track_active_color);\n}\n\n.input:focus-visible + .slider {\n box-shadow: 0 0 0 2px var(--track_active_color);\n}\n\n/* Raise thumb when hovered */\n.input:hover + .slider:before {\n transform: translateY(-0.3em);\n box-shadow: 0 0.3em 0 var(--outline_color);\n}\n\n.input:checked + .slider:before {\n transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);\n background-color: red;\n}\n\n/* Raise thumb when hovered & checked */\n.input:hover:checked + .slider:before {\n transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);\n box-shadow: 0 0.3em 0 var(--outline_color);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"2dc05e","snapshot":null,"tags":null,"title":"switch by omriluz","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":535,"cssLen":2441,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":".absolute{position:absolute}.relative{position:relative}.left-\\[3\\%\\]{left:3%}.top-1\\/2{top:50%}.block{display:block}.hidden{display:none}.aspect-\\[2\\/0\\.75\\]{aspect-ratio:2/0.75}.aspect-square{aspect-ratio:1 / 1}.h-\\[90\\%\\]{height:90%}.w-20{width:5rem}.-translate-y-1\\/2{--tw-translate-y:-50%;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))}.rotate-180{--tw-rotate:180deg;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))}.rounded-full{border-radius:9999px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-purple-100{--tw-gradient-from:#f3e8ff var(--tw-gradient-from-position);--tw-gradient-to:rgb(243 232 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-violet-600{--tw-gradient-to:rgb(124 58 237 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #7c3aed var(--tw-gradient-via-position), var(--tw-gradient-to)}.bg-\\[length\\:100\\%_100\\%\\]{background-size:100% 100%}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-purple-300{--tw-shadow-color:#d8b4fe;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.hover\\:bg-\\[length\\:100\\%_500\\%\\]:hover{background-size:100% 500%}.focus\\:bg-\\[length\\:100\\%_500\\%\\]:focus{background-size:100% 500%}.peer\\/input:checked ~ .peer-checked\\/input\\:left-\\[63\\%\\]{left:63%}.peer\\/input:checked ~ .peer-checked\\/input\\:-rotate-6{--tw-rotate:-6deg;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))}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"548c8c","snapshot":null,"tags":null,"title":"switch by KshitijAdhikaree","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":99,"cssLen":1027,"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-container {\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch-container input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.switch-container .slider {\n --background: linear-gradient(to right, #090613ef, #18151f);\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--background);\n transition: background-color 0.5s;\n border-radius: 30px;\n}\n\n.switch-container .slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 50%;\n left: 10%;\n bottom: 15%;\n box-shadow: inset 15px -4px 0px 15px #f8ea27;\n background: var(--background);\n transition: transform 0.5s, box-shadow 0.5s;\n}\n\n.switch-container input:checked + .slider {\n background-color: #000;\n}\n\n.switch-container input:checked + .slider:before {\n transform: translateX(100%);\n box-shadow: inset 8px -4px 0px 0px #f8f8f4;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"f4721e","snapshot":null,"tags":null,"title":"switch by elijahwgummer-poc","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":118,"cssLen":1104,"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":".switch {\n display: inline-block;\n position: relative;\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 top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n cursor: pointer;\n background-color: #ff6b6b;\n border-radius: 34px;\n transition: background-color 0.3s ease;\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: #ffffff;\n border-radius: 50%;\n transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n\n.switch input:checked + .slider {\n background-color: #66bb6a;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(26px);\n}\n\n.slider:before {\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.knob {\n position: absolute;\n top: 50%;\n left: 4px;\n transform: translateY(-50%);\n width: 26px;\n height: 26px;\n background-color: #ffffff;\n border-radius: 50%;\n transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);\n}\n\n.switch input:checked ~ .knob {\n transform: translateX(27px) translateY(-50%);\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"afb418","snapshot":null,"tags":null,"title":"switch by simontheonlyone","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":121,"cssLen":1224,"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":".switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 6em;\n height: 6em;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n inset: 0;\n background-color: #333;\n border-radius: 30px;\n}\n\n.slider:before {\n height: 0.8em;\n width: 1.1em;\n inset: 44px 28px;\n background: #eee;\n border-radius: 4px;\n}\n\n.battery {\n height: 1.4em;\n width: 2.9em;\n inset: 39px 23px;\n border: 2px solid #eee;\n border-radius: 8px;\n}\n\n.battery:before {\n height: 0.4em;\n width: 0.1em;\n inset: 0.4em 50px;\n border: none;\n border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;\n background: #eee;\n}\n\n.switch input:checked + .slider {\n background-color: #eee;\n box-shadow: 0 0 1px #eee;\n}\n\n.switch input:checked ~ .battery {\n border: 2px solid #111;\n}\n\n.switch input:checked ~ .battery:before {\n background: #111;\n}\n\n.switch input:checked + .slider:before {\n background: rgb(255, 176, 85);\n animation: lowbattery 1.6s linear;\n}\n\n@keyframes lowbattery {\n 0% {\n width: 1.1em;\n }\n 40% {\n width: 2.3em;\n }\n 70% {\n width: 2.3em;\n }\n 100% {\n width: 1.1em;\n }\n}\n\n.slider,\n.battery,\n.slider:before,\n.battery:before {\n position: absolute;\n content: \"\";\n transition: 0.5s;\n}\n"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"d6d1e5","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":40,"cssLen":1112,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".togglesw {\n --s: 50px;\n /* adjust this to control the size*/\n height: calc(var(--s) + var(--s)/5);\n width: auto;\n /* some browsers need this */\n aspect-ratio: 2.25;\n border-radius: var(--s);\n margin: calc(var(--s)/2);\n display: grid;\n cursor: pointer;\n background-color: #ff7a7a;\n box-sizing: content-box;\n overflow: hidden;\n transition: .3s .1s;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.togglesw:before {\n content: \"\";\n padding: calc(var(--s)/10);\n --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000);\n background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,\n var(--_g) var(--_p,0)/var(--s) 100% no-repeat content-box,\n #fff;\n mix-blend-mode: darken;\n filter: blur(calc(var(--s)/12)) contrast(11);\n transition: .4s, background-position .4s .1s,\n padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s;\n}\n\n.togglesw:checked {\n background-color: #85ff7a;\n}\n\n.togglesw:checked:before {\n padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);\n --_p: 100%;\n --_i: 1;\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"033930","snapshot":null,"tags":null,"title":"switch by AbanoubMagdy1","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":833,"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: #ccc;\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: white;\n transition: .3s cubic-bezier(0,2.18,.64,.69);\n}\n\ninput:checked + .slider {\n background-color: #3bd826;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #3bd826;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"38d063","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":42,"cssLen":2836,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".plus-minus {\n --primary: #1E2235;\n --secondary: #FAFBFF;\n --duration: .5s;\n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-tap-highlight-color: transparent;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n outline: none;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n transform-style: preserve-3d;\n perspective: 240px;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n border: 4px solid var(--primary);\n background-size: 300% 300%;\n transition: transform 0.3s;\n transform: scale(var(--scale, 1)) translateZ(0);\n -webkit-animation: var(--name, unchecked) var(--duration) ease forwards;\n animation: var(--name, unchecked) var(--duration) ease forwards;\n}\n\n.plus-minus:before, .plus-minus:after {\n content: \"\";\n position: absolute;\n width: 16px;\n height: var(--height, 16px);\n left: 6px;\n top: var(--top, 6px);\n background: var(--background, var(--primary));\n -webkit-animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;\n animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;\n}\n\n.plus-minus:before {\n -webkit-clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);\n clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);\n}\n\n.plus-minus:after {\n --height: 4px;\n --top: 12px;\n --background: var(--secondary);\n --name-icon-b: var(--name-icon-a, checked-icon);\n}\n\n.plus-minus:active {\n --scale: .95;\n}\n\n.plus-minus:checked {\n --name: checked;\n --name-icon-b: checked-icon;\n --name-icon-a: unchecked-icon;\n}\n\n@keyframes checked-icon {\n from {\n transform: translateZ(12px);\n }\n\n to {\n transform: translateX(16px) rotateY(90deg) translateZ(12px);\n }\n}\n\n@keyframes unchecked-icon {\n from {\n transform: translateX(-16px) rotateY(-90deg) translateZ(12px);\n }\n\n to {\n transform: translateZ(12px);\n }\n}\n\n@keyframes checked {\n from {\n background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);\n background-position: 100% 50%;\n }\n\n to {\n background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);\n background-position: 50% 50%;\n }\n}\n\n@keyframes unchecked {\n from {\n background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);\n background-position: 100% 50%;\n }\n\n to {\n background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);\n background-position: 50% 50%;\n }\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"24cd79","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":930,"cssLen":13672,"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\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\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\n","css":".switch {\n display: inline-block;\n margin: 10em 2em;\n position: relative;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0 0.5em rgba(2,255,255,0.2);\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n box-shadow: 0 0 0.5em rgba(255,255,255,0.2);\n}\n\n.switch label {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n}\n\n.switch input {\n display: none;\n}\n\n.switch span {\n display: block;\n -webkit-transition: top 0.2s;\n -moz-transition: top 0.2s;\n -ms-transition: top 0.2s;\n -o-transition: top 0.2s;\n transition: top 0.2s;\n}\n\n.switch-border1 {\n border: 0.1em solid #000;\n border-radius: 3.5em;\n -webkit-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n -moz-box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n box-shadow: 0 0.2em rgba(255, 255, 255, 0.2);\n}\n\n.switch-border2 {\n width: 6.6em;\n height: 12.6em;\n position: relative;\n border: 0.1em solid #323232;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-border2:before,\n.switch-border2:after {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n opacity: .3;\n border-radius: 3.4em;\n}\n\n.switch-border2:before {\n background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0)));\n background: -webkit-linear-gradient(#000, rgba(0,0,0,0));\n background: -moz-linear-gradient(#000, rgba(0,0,0,0));\n background: -ms-linear-gradient(#000, rgba(0,0,0,0));\n background: -o-linear-gradient(#000, rgba(0,0,0,0));\n background: linear-gradient(#000, rgba(0,0,0,0));\n}\n\n.switch-border2:after {\n background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));\n background: -webkit-linear-gradient(rgba(0,0,0,0), #000);\n background: -moz-linear-gradient(rgba(0,0,0,0), #000);\n background: -ms-linear-gradient(rgba(0,0,0,0), #000);\n background: -o-linear-gradient(rgba(0,0,0,0), #000);\n background: linear-gradient(rgba(0,0,0,0), #000);\n}\n\n.switch-top {\n width: 100%;\n height: 84%;\n position: absolute;\n top: 8%;\n left: 0;\n z-index: 1;\n background-image: -webkit-gradient(linear, left top, right top, from(#2D2D2D), color-stop(0.5, #4B4B4B), to(#2D2D2D));\n background-image: -webkit-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -moz-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -ms-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: -o-linear-gradient(left, #2D2D2D, #4B4B4B, #2D2D2D);\n background-image: linear-gradient(to right, #2D2D2D, #4B4B4B, #2D2D2D);\n border-radius: 3.4em;\n}\n\n.switch-shadow {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border-radius: 3.4em;\n -webkit-box-shadow: 0 0 2em black inset;\n -moz-box-shadow: 0 0 2em black inset;\n box-shadow: 0 0 2em black inset;\n}\n\n.switch-handle-left,\n.switch-handle-right {\n content: '';\n display: block;\n width: 3.6em;\n height: 0;\n position: absolute;\n top: 6.6em;\n z-index: 2;\n border-bottom: 4.5em solid #111;\n border-left: 0.7em solid transparent;\n border-right: 0.7em solid transparent;\n border-radius: 0;\n}\n\n.switch-handle-left {\n left: 0.8em;\n}\n\n.switch-handle-right {\n right: 0.8em;\n}\n\n.switch-handle {\n width: 3.6em;\n height: 4.5em;\n position: absolute;\n top: 6.6em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-radius: 0;\n}\n\n.switch-handle-top {\n width: 5em;\n height: 5em;\n position: absolute;\n top: 8.5em;\n left: 0.8em;\n z-index: 4;\n background-color: #555;\n background-image: -webkit-gradient(linear, left top, right top, from(#5F5F5F), to(#878787));\n background-image: -webkit-linear-gradient(left, #5F5F5F, #878787);\n background-image: -moz-linear-gradient(left, #5F5F5F, #878787);\n background-image: -ms-linear-gradient(left, #5F5F5F, #878787);\n background-image: -o-linear-gradient(left, #5F5F5F, #878787);\n background-image: linear-gradient(to right, #5F5F5F, #878787);\n border-top: 0.2em solid #AEB2B3;\n border-radius: 2.5em;\n}\n\n.switch-handle-bottom {\n width: 3.6em;\n height: 3.6em;\n position: absolute;\n top: 4.7em;\n left: 1.5em;\n z-index: 3;\n background: #333;\n background-image: -webkit-gradient(linear, left top, right top, from(#111), color-stop(0.4, #777), color-stop(0.5, #888), color-stop(0.6, #777), to(#111));\n background-image: -webkit-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -moz-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -ms-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: -o-linear-gradient(left, #111, #777 40%, #888, #777 60%, #111);\n background-image: linear-gradient(to right, #111, #777 40%, #888, #777 60%, #111);\n border-top: 0.2em solid #141414;\n border-radius: 1.8em;\n}\n\n.switch-handle-base {\n width: 4.2em;\n height: 4.2em;\n position: absolute;\n top: 3.8em;\n left: 1.2em;\n z-index: 2;\n border-top: 0.2em solid rgba(255,255,255,0.35);\n border-radius: 2.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n -moz-box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n box-shadow: 0 0 0.5em rgba(0,0,0,0.8) inset;\n}\n\n.switch-led {\n position: absolute;\n left: 2em;\n border-radius: 1.4em;\n}\n\n.switch-led-border {\n border: 0.2em solid black;\n border-radius: 1.3em;\n}\n\n.switch-led-light {\n border-radius: 1.1em;\n -webkit-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n -moz-box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n box-shadow: 0 0 0.5em rgba(255,255,255,0.5) inset;\n}\n\n.switch-led-glow {\n width: 2em;\n height: 2em;\n position: relative;\n border-radius: 1em;\n}\n\n.switch-led-glow:before {\n content: '';\n display: block;\n width: 0.6em;\n height: 0.6em;\n position: absolute;\n top: 0.3em;\n left: 0.7em;\n background: rgba(255,255,255,0.2);\n border-radius: 0.3em;\n -webkit-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n -moz-box-shadow: 0 0 1em rgba(255,255,255,0.75);\n box-shadow: 0 0 1em rgba(255,255,255,0.75);\n}\n\n.switch-led-glow:after {\n content: '';\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0.2;\n filter: alpha(opacity=20);\n border: 1em solid #fff;\n border-color: transparent #fff transparent #fff;\n border-radius: 1em;\n -webkit-transform: rotate(45deg);\n -moz-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n -o-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.switch-led:after {\n display: block;\n width: 100%;\n position: absolute;\n left: 0;\n color: #666;\n font-family: arial, verdana, sans-serif;\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0.1em rgba(0,0,0,0.7);\n}\n\n.switch-led-green:after {\n content: 'ON';\n top: -1.8em;\n}\n\n.switch-led-red:after {\n content: 'OFF';\n bottom: -1.8em;\n}\n\n.switch-led-green {\n top: -5em;\n border-top: 0.1em solid rgba(0,161,75,0.5);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n}\n\n.switch-led-green .switch-led-light {\n background: rgb(0,161,75);\n border: 0.1em solid rgb(0,104,56);\n}\n\n.switch-led-red {\n bottom: -5em;\n border-top: 0.1em solid rgba(237,28,36,0.2);\n border-bottom: 0.1em solid rgba(255,255,255,0.25);\n -webkit-box-shadow: 0 0 3em rgb(237,28,36);\n -moz-box-shadow: 0 0 3em rgb(237,28,36);\n box-shadow: 0 0 3em rgb(237,28,36);\n}\n\n.switch-led-red .switch-led-light {\n background: rgb(237,28,36);\n border: 0.1em solid rgb(161,30,45);\n}\n\n.switch-led-red .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.3);\n filter: alpha(opacity=30);\n}\n\n/* Switch on */\n\n.switch input:checked~.switch-handle-left, .switch input:checked~.switch-handle-right {\n top: 1.5em;\n border-bottom: 0;\n border-top: 4.5em solid #111;\n}\n\n.switch input:checked~.switch-handle {\n top: 1.5em;\n}\n\n.switch input:checked~.switch-handle-top {\n top: -1em;\n border-top: 0;\n border-bottom: 0.2em solid #AEB2B3;\n}\n\n.switch input:checked~.switch-handle-bottom {\n top: 4.2em;\n border-top: 0;\n border-bottom: 0.2em solid #141414;\n}\n\n.switch input:checked~.switch-handle-base {\n top: 4.5em;\n border-top: 0;\n border-bottom: 0.2em solid rgba(255,255,255,0.35);\n}\n\n.switch input:checked~.switch-led-green {\n -webkit-box-shadow: 0 0 3em rgb(0,161,75);\n -moz-box-shadow: 0 0 3em rgb(0,161,75);\n box-shadow: 0 0 3em rgb(0,161,75);\n}\n\n.switch input:checked~.switch-led-green .switch-led-glow {\n background: #fff;\n background: rgba(255, 255, 255, 0.4);\n filter: alpha(opacity=40);\n}\n\n.switch input:checked~.switch-led-red {\n -webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n}\n\n.switch input:checked~.switch-led-red .switch-led-glow {\n background: rgba(255, 255, 255, 0);\n filter: alpha(opacity=0);\n}\n\n#switchwhite {\n visibility: hidden;\n clip: rect(0 0 0 0);\n position: absolute;\n left: 9999px;\n}\n\n.switchwhite {\n display: block;\n width: 130px;\n height: 60px;\n margin: 70px auto;\n position: relative;\n background: #ced8da;\n /* Old browsers */\n background: -moz-linear-gradient(left, #ced8da 0%, #d8e0e3 29%, #ccd4d7 34%, #d4dcdf 62%, #fff9f4 68%, #e1e9ec 74%, #b7bfc2 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ced8da), color-stop(29%,#d8e0e3), color-stop(34%,#ccd4d7), color-stop(62%,#d4dcdf), color-stop(68%,#fff9f4), color-stop(74%,#e1e9ec), color-stop(100%,#b7bfc2));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* IE10+ */\n background: linear-gradient(to right, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );\n /* IE6-9 */\n transition: all 0.2s ease-out;\n cursor: pointer;\n border-radius: 0.35em;\n box-shadow: 0 0 1px 2px rgba(0,0,0,0.7),\n inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 0 1px rgba(0,0,0,0.3),\n 0 8px 10px rgba(0,0,0,0.15);\n}\n\n.switchwhite:before {\n display: block;\n position: absolute;\n left: -35px;\n right: -35px;\n top: -25px;\n bottom: -25px;\n z-index: -2;\n content: \"\";\n border-radius: 0.4em;\n background: #d5dde0;\n background: linear-gradient(#d7dfe2, #bcc7cd);\n box-shadow: inset 0 2px 0 rgba(255,255,255,0.6),\n inset 0 -1px 1px 1px rgba(0,0,0,0.3),\n 0 0 8px 2px rgba(0,0,0,0.2),\n 0 2px 4px 2px rgba(0,0,0,0.1);\n pointer-events: none;\n transition: all 0.2s ease-out;\n}\n\n.switchwhite:after {\n content: \"\";\n position: absolute;\n right: -25px;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #788b91;\n margin-top: -8px;\n z-index: -1;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -47px 32px 15px 13px rgba(0,0,0,0.25);\n}\n\n#switchwhite:checked ~ .switchwhite {\n background: #b7bfc2;\n /* Old browsers */\n background: -moz-linear-gradient(left, #b7bfc2 0%, #e1e9ec 26%, #fff9f4 32%, #d4dcdf 38%, #ccd4d7 66%, #d8e0e3 71%, #ced8da 100%);\n /* FF3.6+ */\n background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b7bfc2), color-stop(26%,#e1e9ec), color-stop(32%,#fff9f4), color-stop(38%,#d4dcdf), color-stop(66%,#ccd4d7), color-stop(71%,#d8e0e3), color-stop(100%,#ced8da));\n /* Chrome,Safari4+ */\n background: -webkit-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Chrome10+,Safari5.1+ */\n background: -o-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* Opera 11.10+ */\n background: -ms-linear-gradient(left, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* IE10+ */\n background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n /* W3C */\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );\n /* IE6-9 */\n}\n\n#switchwhite:checked ~ .switchwhite:after {\n background: #b1ffff;\n box-shadow: inset 0 -1px 8px rgba(0,0,0,0.7),\n inset 0 -2px 2px rgba(0,0,0,0.2),\n 0 1px 0 white,\n 0 -1px 0 rgba(0,0,0,0.5),\n -110px 32px 15px 13px rgba(0,0,0,0.25);\n}"},{"created":"2024-01-22T17:07:49.000Z","isPrivate":0,"projectId":"d652ad","snapshot":null,"tags":null,"title":"switch by Creatlydev","updated":"2024-01-22T17:07:49.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1551,"cssLen":581,"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":".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, .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}"},{"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}"}]}},"actionData":null,"errors":null}