{"loaderData":{"0":null,"0-3":{"total":7518,"projects":[{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"30301d","snapshot":null,"tags":null,"title":"switch by JaydipPrajapati1910","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":2247,"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

\n\t

\n\n","css":".toggle > div {\n position: relative;\n padding: 10px;\n width: 150px;\n height: 75px;\n border-radius: 50px;\n box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1);\n background: rgb(189, 191, 193);\n background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%);\n}\n\n.toggle > div > input[type=checkbox] {\n position: absolute;\n opacity: 0;\n top: -3px;\n left: 17px;\n width: 130px;\n height: 55px;\n z-index: 5;\n}\n\n.toggle > div > input[type=checkbox] ~ div {\n width: 130px;\n height: 55px;\n border-radius: 50px;\n border: 1px solid #979797;\n box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);\n background: rgb(253, 252, 251);\n background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%);\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div {\n box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);\n background: rgb(229, 229, 229);\n background: linear-gradient(to right, rgba(229, 229, 229, 1) 39%, rgba(253, 252, 251, 1) 63%);\n}\n\n.toggle > div > input[type=checkbox] ~ div:before {\n content: attr(data-unchecked);\n display: block;\n position: absolute;\n border-radius: 10px;\n top: 27px;\n left: 30px;\n}\n\n.toggle > div > input[type=checkbox] ~ div:after {\n content: attr(data-checked);\n color: #df0000;\n text-shadow: 0 1px 0 #fff, 0px 0 7px #df0000;\n filter: dropshadow(color=#df0000, offx=0, offy=0);\n display: block;\n position: absolute;\n border-radius: 10px;\n top: 27px;\n left: 100px;\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div:before {\n color: #119400;\n text-shadow: 0 1px 0 #fff, 0px 0 7px #007a08;\n filter: dropshadow(color=#007a08, offx=0, offy=0);\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div:after {\n color: #000;\n text-shadow: none;\n filter: dropshadow(none);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"2eb92b","snapshot":null,"tags":null,"title":"switch by Galahhad","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":790,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n","css":".checkbox {\n display: none;\n}\n\n.slider {\n width: 60px;\n height: 30px;\n background-color: lightgray;\n border-radius: 20px;\n overflow: hidden;\n display: flex;\n align-items: center;\n border: 4px solid transparent;\n transition: .3s;\n box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;\n cursor: pointer;\n}\n\n.slider::before {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n transform: translateX(-30px);\n border-radius: 20px;\n transition: .3s;\n box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);\n}\n\n.checkbox:checked ~ .slider::before {\n transform: translateX(30px);\n box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);\n}\n\n.checkbox:checked ~ .slider {\n background-color: #2196F3;\n}\n\n.checkbox:active ~ .slider::before {\n transform: translate(0);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"5fb567","snapshot":null,"tags":null,"title":"switch by guilhermeyohan","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":1145,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-apple {\n position: relative;\n width: 50px;\n height: 25px;\n margin: 20px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.checkbox-apple label {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 25px;\n border-radius: 50px;\n background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.checkbox-apple label:after {\n content: '';\n position: absolute;\n top: 1px;\n left: 1px;\n width: 23px;\n height: 23px;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n transition: all 0.3s ease;\n}\n\n.checkbox-apple input[type=\"checkbox\"]:checked + label {\n background: linear-gradient(to bottom, #4cd964, #5de24e);\n}\n\n.checkbox-apple input[type=\"checkbox\"]:checked + label:after {\n transform: translateX(25px);\n}\n\n.checkbox-apple label:hover {\n background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);\n}\n\n.checkbox-apple label:hover:after {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.yep {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 25px;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"64524c","snapshot":null,"tags":null,"title":"switch by MuhammadHasann","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":247,"cssLen":1195,"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","css":".toggle-cont {\n width: 100px;\n height: 50px;\n border-radius: 9999px;\n}\n\n.toggle-cont .toggle-input {\n display: none;\n}\n\n.toggle-cont .toggle-label {\n cursor: pointer;\n position: relative;\n display: inline-block;\n padding: 6px;\n width: 100%;\n height: 100%;\n background: #272727;\n border-radius: 9999px;\n box-sizing: content-box;\n box-shadow: 0px 0px 16px -8px #fefefe;\n}\n\n.toggle-cont .toggle-label .cont-label-play {\n position: relative;\n width: 50px;\n aspect-ratio: 1 / 1;\n background: #5e5e5e;\n border-radius: 9999px;\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.toggle-cont .toggle-input:checked + .toggle-label .cont-label-play {\n background: #f43f5e;\n transform: translateX(50px);\n}\n\n.toggle-cont .toggle-label .label-play {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-block;\n width: 24px;\n aspect-ratio: 1 / 1;\n background: #fefefe;\n border-radius: 4px;\n clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.toggle-cont .toggle-input:checked + .toggle-label .label-play {\n width: 20px;\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"b4ab42","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":396,"cssLen":1406,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n\n\n","css":".checkbox-wrapper-51 input[type=\"checkbox\"] {\n visibility: hidden;\n display: none;\n}\n\n.checkbox-wrapper-51 .toggle {\n position: relative;\n display: block;\n width: 42px;\n height: 24px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n}\n\n.checkbox-wrapper-51 .toggle:before {\n content: \"\";\n position: relative;\n top: 1px;\n left: 1px;\n width: 40px;\n height: 22px;\n display: block;\n background: #c8ccd4;\n border-radius: 12px;\n transition: background 0.2s ease;\n}\n\n.checkbox-wrapper-51 .toggle span {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n display: block;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 2px 6px rgba(154,153,153,0.75);\n transition: all 0.2s ease;\n}\n\n.checkbox-wrapper-51 .toggle span svg {\n margin: 7px;\n fill: none;\n}\n\n.checkbox-wrapper-51 .toggle span svg path {\n stroke: #c8ccd4;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 24;\n stroke-dashoffset: 0;\n transition: all 0.5s linear;\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle:before {\n background: #1175c7;\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle span {\n transform: translateX(18px);\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle span path {\n stroke: #000000;\n stroke-dasharray: 25;\n stroke-dashoffset: 25;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"49e9aa","snapshot":null,"tags":null,"title":"switch by alexruix","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":878,"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 --background: #28096b;\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--background);\n transition: .5s;\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: 50%;\n left: 10%;\n bottom: 15%;\n box-shadow: inset 8px -4px 0px 0px #fff000;\n background: var(--background);\n transition: .5s;\n}\n\ninput:checked + .slider {\n background-color: #522ba7;\n}\n\ninput:checked + .slider:before {\n transform: translateX(100%);\n box-shadow: inset 15px -4px 0px 15px #fff000;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"061601","snapshot":null,"tags":null,"title":"switch by Madflows","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":156,"cssLen":1170,"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-switch {\n position: relative;\n width: 100px;\n height: 50px;\n --light: #d8dbe0;\n --dark: #28292c;\n --link: rgb(27, 129, 112);\n --link-hover: rgb(24, 94, 82);\n}\n\n.switch-label {\n position: absolute;\n width: 100%;\n height: 50px;\n background-color: var(--dark);\n border-radius: 25px;\n cursor: pointer;\n border: 3px solid var(--dark);\n}\n\n.checkbox {\n position: absolute;\n display: none;\n}\n\n.slider {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 25px;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n}\n\n.checkbox:checked ~ .slider {\n background-color: var(--light);\n}\n\n.slider::before {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 10px;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n -webkit-box-shadow: inset 12px -4px 0px 0px var(--light);\n box-shadow: inset 12px -4px 0px 0px var(--light);\n background-color: var(--dark);\n -webkit-transition: 0.3s;\n transition: 0.3s;\n}\n\n.checkbox:checked ~ .slider::before {\n -webkit-transform: translateX(50px);\n -ms-transform: translateX(50px);\n transform: translateX(50px);\n background-color: var(--dark);\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"29f59b","snapshot":null,"tags":null,"title":"switch by AbanoubMagdy1","updated":"2024-01-22T17:06:12.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":240,"cssLen":1202,"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 --circle-dim: 1.4em;\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: #f5aeae;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider-card {\n position: absolute;\n content: \"\";\n height: var(--circle-dim);\n width: var(--circle-dim);\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n transition: .4s;\n pointer-events: none;\n}\n\n.slider-card-face {\n position: absolute;\n inset: 0;\n backface-visibility: hidden;\n perspective: 1000px;\n border-radius: 50%;\n transition: .4s transform;\n}\n\n.slider-card-front {\n background-color: #DC3535;\n}\n\n.slider-card-back {\n background-color: #379237;\n transform: rotateY(180deg);\n}\n\ninput:checked ~ .slider-card .slider-card-back {\n transform: rotateY(0);\n}\n\ninput:checked ~ .slider-card .slider-card-front {\n transform: rotateY(-180deg);\n}\n\ninput:checked ~ .slider-card {\n transform: translateX(1.5em);\n}\n\ninput:checked ~ .slider {\n background-color: #9ed99c;\n}"},{"created":"2024-01-22T17:06:10.000Z","isPrivate":0,"projectId":"ab2f2c","snapshot":null,"tags":null,"title":"switch by ErzenXz","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":160,"cssLen":1445,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n\n","css":".toggle-switch {\n position: relative;\n display: inline-block;\n width: 80px;\n height: 40px;\n cursor: pointer;\n}\n\n.toggle-switch input[type=\"checkbox\"] {\n display: none;\n}\n\n.toggle-switch-background {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 0 2px #ccc;\n transition: background-color 0.3s ease-in-out;\n}\n\n.toggle-switch-handle {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 30px;\n height: 30px;\n background-color: #fff;\n border-radius: 50%;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s ease-in-out;\n}\n\n.toggle-switch::before {\n content: \"\";\n position: absolute;\n top: -25px;\n right: -35px;\n font-size: 12px;\n font-weight: bold;\n color: #aaa;\n text-shadow: 1px 1px #fff;\n transition: color 0.3s ease-in-out;\n}\n\n.toggle-switch input[type=\"checkbox\"]:checked + .toggle-switch-handle {\n transform: translateX(45px);\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #05c46b;\n}\n\n.toggle-switch input[type=\"checkbox\"]:checked + .toggle-switch-background {\n background-color: #05c46b;\n box-shadow: inset 0 0 0 2px #04b360;\n}\n\n.toggle-switch input[type=\"checkbox\"]:checked + .toggle-switch:before {\n content: \"On\";\n color: #05c46b;\n right: -15px;\n}\n\n.toggle-switch input[type=\"checkbox\"]:checked + .toggle-switch-background .toggle-switch-handle {\n transform: translateX(40px);\n}\n"},{"created":"2024-01-22T17:06:10.000Z","isPrivate":0,"projectId":"3d4a5f","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":1797,"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":".container {\n}\n\n.label {\n height: 60px;\n width: 120px;\n background-color: #ffffff;\n border-radius: 30px;\n -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),\n inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),\n inset 0 0 0 3px rgba(0, 0, 0, 0.3);\n box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),\n inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),\n inset 0 0 0 3px rgba(0, 0, 0, 0.3);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n -webkit-transition: -webkit-transform 0.4s;\n transition: -webkit-transform 0.4s;\n transition: transform 0.4s;\n}\n\n.label:hover {\n -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);\n transform: perspective(100px) rotateX(5deg) rotateY(-5deg);\n}\n\n#checkbox:checked ~ .label:hover {\n -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);\n transform: perspective(100px) rotateX(-5deg) rotateY(5deg);\n}\n\n#checkbox {\n display: none;\n}\n\n#checkbox:checked ~ .label::before {\n left: 70px;\n background-color: #000000;\n background-image: linear-gradient(315deg, #000000 0%, #414141 70%);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.label::before {\n position: absolute;\n content: \"\";\n height: 40px;\n width: 40px;\n border-radius: 50%;\n background-color: #000000;\n background-image: linear-gradient(\n 130deg,\n #757272 10%,\n #ffffff 11%,\n #726f6f 62%\n );\n left: 10px;\n -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);\n box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n"},{"created":"2024-01-22T17:06:10.000Z","isPrivate":0,"projectId":"0f7cde","snapshot":null,"tags":null,"title":"switch by Pradeepsaranbishnoi","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":98,"cssLen":2076,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n ","css":"#switch {\n visibility: hidden;\n clip: rect(0 0 0 0);\n position: absolute;\n left: 9999px;\n}\n\n.switch {\n display: block;\n width: 130px;\n height: 60px;\n margin: 70px auto;\n position: relative;\n background: #ced8da;\n background: linear-gradient(left, #ced8da 0%,#d8e0e3 29%,#ccd4d7 34%,#d4dcdf 62%,#fff9f4 68%,#e1e9ec 74%,#b7bfc2 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ced8da', endColorstr='#b7bfc2',GradientType=1 );\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.switch: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.switch: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#switch:checked ~ .switch {\n background: #b7bfc2;\n background: linear-gradient(to right, #b7bfc2 0%,#e1e9ec 26%,#fff9f4 32%,#d4dcdf 38%,#ccd4d7 66%,#d8e0e3 71%,#ced8da 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7bfc2', endColorstr='#ced8da',GradientType=1 );\n}\n\n#switch:checked ~ .switch: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:06:10.000Z","isPrivate":0,"projectId":"76a635","snapshot":null,"tags":null,"title":"switch by TimTrayler","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":867,"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 --secondary-container: #3a4b39;\n --primary: #84da89;\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.7em;\n height: 1.8em;\n}\n\n.switch input {\n display: none;\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: #313033;\n transition: .2s;\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.2em;\n bottom: 0.2em;\n background-color: #aeaaae;\n transition: .4s;\n}\n\ninput:checked + .slider::before {\n background-color: var(--primary);\n}\n\ninput:checked + .slider {\n background-color: var(--secondary-container);\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px var(--secondary-container);\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.9em);\n}"}]}},"actionData":null,"errors":null}