{"loaderData":{"0":null,"0-3":{"total":7283,"projects":[{"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}"},{"created":"2024-01-22T17:06:10.000Z","isPrivate":0,"projectId":"b9e862","snapshot":null,"tags":null,"title":"switch by arghyaBiswasDev","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":92,"cssLen":892,"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 #adb5bd;\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.27em;\n bottom: 0.25em;\n background-color: #adb5bd;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #007bff;\n border: 1px solid #007bff;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #007bff;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.4em);\n background-color: #fff;\n}"},{"created":"2024-01-22T17:06:10.000Z","isPrivate":0,"projectId":"2fe8f2","snapshot":null,"tags":null,"title":"switch by Pradeepsaranbishnoi","updated":"2024-01-22T17:06:10.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":172,"cssLen":1263,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\tToggle\n

","css":".bauble_box .bauble_label {\n background: #2c2;\n background-position: 62px 5px;\n background-repeat: no-repeat;\n background-size: auto 5px;\n border: 0;\n border-radius: 50px;\n box-shadow: inset 0 10px 20px rgba(0,0,0,.4), 0 -1px 0px rgba(0,0,0,.2), inset 0 -1px 0px #fff;\n cursor: pointer;\n display: inline-block;\n font-size: 0;\n height: 40px;\n position: relative;\n -webkit-transition: all 500ms ease;\n transition: all 500ms ease;\n width: 90px;\n}\n\n.bauble_box .bauble_label:before {\n background-color: rgba(255,255,255,.2);\n background-position: 0 0;\n background-repeat: repeat;\n background-size: 30% auto;\n border-radius: 50%;\n box-shadow: inset 0 -5px 25px #050, 0 10px 20px rgba(0,0,0,.4);\n content: '';\n display: block;\n height: 30px;\n left: 5px;\n position: absolute;\n top: 6px;\n -webkit-transition: all 500ms ease;\n transition: all 500ms ease;\n width: 30px;\n z-index: 2;\n}\n\n.bauble_box input.bauble_input {\n opacity: 0;\n z-index: 0;\n}\n\n/* Checked */\n.bauble_box input.bauble_input:checked + .bauble_label {\n background-color: #c22;\n}\n\n.bauble_box input.bauble_input:checked + .bauble_label:before {\n background-position: 150% 0;\n box-shadow: inset 0 -5px 25px #500, 0 10px 20px rgba(0,0,0,.4);\n left: calc( 100% - 35px );\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"d5ddbf","snapshot":null,"tags":null,"title":"switch by rishichawda","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4579,"cssLen":1029,"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#theme-toggle-button {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 7em;\n cursor: pointer;\n}\n\n/* Hide default HTML checkbox */\n#toggle {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n#container,\n#patches,\n#stars,\n#button,\n#sun,\n#moon,\n#cloud {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 0.25s;\n}\n\n/* night sky background */\n#toggle:checked + svg #container {\n fill: #2b4360;\n}\n\n/* move button to right when checked */\n#toggle:checked + svg #button {\n transform: translate(28px, 2.333px);\n}\n\n/* show/hide sun and moon based on checkbox state */\n#sun {\n opacity: 1;\n}\n\n#toggle:checked + svg #sun {\n opacity: 0;\n}\n\n#moon {\n opacity: 0;\n}\n\n#toggle:checked + svg #moon {\n opacity: 1;\n}\n\n/* show or hide background items on checkbox state */\n#cloud {\n opacity: 1;\n}\n\n#toggle:checked + svg #cloud {\n opacity: 0;\n}\n\n#stars {\n opacity: 0;\n}\n\n#toggle:checked + svg #stars {\n opacity: 1;\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"593b26","snapshot":null,"tags":null,"title":"switch by gharsh11032000","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1174,"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 inset: 0;\n background: white;\n border-radius: 50px;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n right: 0.3em;\n bottom: 0.3em;\n transform: translateX(150%);\n background-color: #59d102;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.slider:after {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #cccccc;\n border-radius: inherit;\n transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #59d102;\n}\n\n.switch input:checked + .slider:before {\n transform: translateY(0);\n}\n\n.switch input:checked + .slider::after {\n transform: translateX(-150%);\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"d64423","snapshot":null,"tags":null,"title":"switch by varoonrao","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":73,"cssLen":2161,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".checkbox-con {\n margin: 10px;\n display: flex;\n align-items: center;\n color: white;\n}\n\n.checkbox-con input[type=\"checkbox\"] {\n appearance: none;\n width: 48px;\n height: 27px;\n border: 2px solid #ff0000;\n border-radius: 20px;\n background: #f1e1e1;\n position: relative;\n box-sizing: border-box;\n}\n\n.checkbox-con input[type=\"checkbox\"]::before {\n content: \"\";\n width: 14px;\n height: 14px;\n background: rgba(234, 7, 7, 0.5);\n border: 2px solid #ea0707;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n transform: translate(13%, 15%);\n transition: all 0.3s ease-in-out;\n}\n\n.checkbox-con input[type=\"checkbox\"]::after {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.55021 5.84315L17.1568 16.4498L16.4497 17.1569L5.84311 6.55026L6.55021 5.84315Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1567 6.55021L6.55012 17.1568L5.84302 16.4497L16.4496 5.84311L17.1567 6.55021Z' fill='%23EA0707' fill-opacity='0.89'/%3E%3C/svg%3E\");\n position: absolute;\n top: 0;\n left: 20px;\n}\n\n.checkbox-con input[type=\"checkbox\"]:checked {\n border: 2px solid #02c202;\n background: #e2f1e1;\n}\n\n.checkbox-con input[type=\"checkbox\"]:checked::before {\n background: rgba(2, 194, 2, 0.5);\n border: 2px solid #02c202;\n transform: translate(133%, 13%);\n transition: all 0.3s ease-in-out;\n}\n\n.checkbox-con input[type=\"checkbox\"]:checked::after {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.8185 0.114533C15.0314 0.290403 15.0614 0.605559 14.8855 0.818454L5.00187 12.5L0.113036 6.81663C-0.0618274 6.60291 -0.0303263 6.2879 0.183396 6.11304C0.397119 5.93817 0.71213 5.96967 0.886994 6.18339L5.00187 11L14.1145 0.181573C14.2904 -0.0313222 14.6056 -0.0613371 14.8185 0.114533Z' fill='%2302C202' fill-opacity='0.9'/%3E%3C/svg%3E\");\n position: absolute;\n top: 5px;\n left: 5px;\n}\n\n.checkbox-con label {\n margin-left: 10px;\n cursor: pointer;\n user-select: none;\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"66541b","snapshot":null,"tags":null,"title":"switch by Praashoo7","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":856,"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 box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);\n transition: .4s;\n border-radius: 5px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 0.1em;\n border-radius: 0px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n transition: .4s;\n}\n\ninput:checked + .slider {\n background-color: #171717;\n box-shadow: inset 2px 5px 10px rgb(0, 0, 0);\n}\n\ninput:checked + .slider:before {\n transform: translateX(2.8em) rotate(360deg);\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"6047f9","snapshot":null,"tags":null,"title":"switch by mobinkakei","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":647,"cssLen":1788,"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":".toggler {\n width: 72px;\n margin: 40px auto;\n}\n\n.toggler input {\n display: none;\n}\n\n.toggler label {\n display: block;\n position: relative;\n width: 72px;\n height: 36px;\n border: 1px solid #d6d6d6;\n border-radius: 36px;\n background: #e4e8e8;\n cursor: pointer;\n}\n\n.toggler label::after {\n display: block;\n border-radius: 100%;\n background-color: #d7062a;\n content: '';\n animation-name: toggler-size;\n animation-duration: 0.15s;\n animation-timing-function: ease-out;\n animation-direction: forwards;\n animation-iteration-count: 1;\n animation-play-state: running;\n}\n\n.toggler label::after, .toggler label .toggler-on, .toggler label .toggler-off {\n position: absolute;\n top: 50%;\n left: 25%;\n width: 26px;\n height: 26px;\n transform: translateY(-50%) translateX(-50%);\n transition: left 0.15s ease-in-out, background-color 0.2s ease-out, width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s ease-in-out;\n}\n\n.toggler input:checked + label::after, .toggler input:checked + label .toggler-on, .toggler input:checked + label .toggler-off {\n left: 75%;\n}\n\n.toggler input:checked + label::after {\n background-color: #50ac5d;\n animation-name: toggler-size2;\n}\n\n.toggler .toggler-on, .toggler .toggler-off {\n opacity: 1;\n z-index: 2;\n}\n\n.toggler input:checked + label .toggler-off, .toggler input:not(:checked) + label .toggler-on {\n width: 0;\n height: 0;\n opacity: 0;\n}\n\n.toggler .path {\n fill: none;\n stroke: #fefefe;\n stroke-width: 7px;\n stroke-linecap: round;\n stroke-miterlimit: 10;\n}\n\n@keyframes toggler-size {\n 0%, 100% {\n width: 26px;\n height: 26px;\n }\n\n 50% {\n width: 20px;\n height: 20px;\n }\n}\n\n@keyframes toggler-size2 {\n 0%, 100% {\n width: 26px;\n height: 26px;\n }\n\n 50% {\n width: 20px;\n height: 20px;\n }\n}\n "}]}},"actionData":null,"errors":null}