{"loaderData":{"0":null,"0-3":{"total":7364,"projects":[{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"2b3d67","snapshot":null,"tags":null,"title":"switch by JaydipPrajapati1910","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1556,"cssLen":3727,"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":".switch {\n /* switch */\n --switch-width: 46px;\n --switch-height: 24px;\n --switch-bg: rgb(131, 131, 131);\n --switch-checked-bg: #222;\n --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);\n --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);\n /* circle */\n --circle-diameter: 18px;\n --circle-bg: #fff;\n --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);\n --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);\n --circle-transition: var(--switch-transition);\n /* icon */\n --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);\n --icon-cross-color: var(--switch-bg);\n --icon-cross-size: 6px;\n --icon-checkmark-color: var(--switch-checked-bg);\n --icon-checkmark-size: 10px;\n /* effect line */\n --effect-width: calc(var(--circle-diameter) / 2);\n --effect-height: calc(var(--effect-width) / 2 - 1px);\n --effect-bg: var(--circle-bg);\n --effect-border-radius: 1px;\n --effect-transition: all .2s ease-in-out;\n}\n\n.switch input {\n display: none;\n}\n\n.switch {\n display: inline-block;\n}\n\n.switch svg {\n -webkit-transition: var(--icon-transition);\n -o-transition: var(--icon-transition);\n transition: var(--icon-transition);\n position: absolute;\n height: auto;\n}\n\n.switch .checkmark {\n width: var(--icon-checkmark-size);\n color: var(--icon-checkmark-color);\n -webkit-transform: scale(0);\n -ms-transform: scale(0);\n transform: scale(0);\n}\n\n.switch .cross {\n width: var(--icon-cross-size);\n color: var(--icon-cross-color);\n}\n\n.slider {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: var(--switch-width);\n height: var(--switch-height);\n background: var(--switch-bg);\n border-radius: 999px;\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 position: relative;\n -webkit-transition: var(--switch-transition);\n -o-transition: var(--switch-transition);\n transition: var(--switch-transition);\n cursor: pointer;\n}\n\n.circle {\n width: var(--circle-diameter);\n height: var(--circle-diameter);\n background: var(--circle-bg);\n border-radius: inherit;\n -webkit-box-shadow: var(--circle-shadow);\n box-shadow: var(--circle-shadow);\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 -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-transition: var(--circle-transition);\n -o-transition: var(--circle-transition);\n transition: var(--circle-transition);\n z-index: 1;\n position: absolute;\n left: var(--switch-offset);\n}\n\n.slider::before {\n content: \"\";\n position: absolute;\n width: var(--effect-width);\n height: var(--effect-height);\n left: calc(var(--switch-offset) + (var(--effect-width) / 2));\n background: var(--effect-bg);\n border-radius: var(--effect-border-radius);\n -webkit-transition: var(--effect-transition);\n -o-transition: var(--effect-transition);\n transition: var(--effect-transition);\n}\n\n/* actions */\n\n.switch input:checked+.slider {\n background: var(--switch-checked-bg);\n}\n\n.switch input:checked+.slider .checkmark {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n}\n\n.switch input:checked+.slider .cross {\n -webkit-transform: scale(0);\n -ms-transform: scale(0);\n transform: scale(0);\n}\n\n.switch input:checked+.slider::before {\n left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));\n}\n\n.switch input:checked+.slider .circle {\n left: calc(100% - var(--circle-diameter) - var(--switch-offset));\n -webkit-box-shadow: var(--circle-checked-shadow);\n box-shadow: var(--circle-checked-shadow);\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"aa08d4","snapshot":null,"tags":null,"title":"switch by catraco","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1202,"cssLen":1049,"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-name {\n --dark-sky: #5050e5;\n --moon: #ffd365;\n --light-sky: #35d5e5;\n --sun: #ffed89;\n display: inline-block;\n position: relative;\n border-radius: 5em;\n cursor: pointer;\n width: 80px;\n height: 40px;\n overflow: hidden;\n transition: all .5s;\n}\n\n.switch-name .back {\n background-color: var(--dark-sky);\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transition: .5s ease-in-out;\n}\n\n.switch-name .checkbox {\n opacity: 0;\n}\n\n.switch-name .checkbox:checked ~ .back {\n background-color: var(--light-sky);\n}\n\n.switch-name .checkbox:checked ~ .moon {\n transform: translate(100%) rotate(180deg);\n opacity: 0;\n}\n\n.switch-name .checkbox:checked ~ .sun {\n transform: translate(100%) rotate(180deg);\n opacity: 1;\n}\n\n.switch-name .moon {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n padding: .4em;\n fill: var(--moon);\n transition: .5s;\n}\n\n.switch-name .sun {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n padding: .4em;\n fill: var(--sun);\n transition: .5s;\n opacity: 0;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"9f1f35","snapshot":null,"tags":null,"title":"switch by The-Best-Codes","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":148,"cssLen":681,"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 display: inline-block;\n position: relative;\n width: 60px;\n height: 34px;\n}\n\n.toggle-input {\n display: none;\n}\n\n.toggle-label {\n position: absolute;\n top: 0;\n left: 0;\n width: 60px;\n height: 34px;\n background-color: #ccc;\n border-radius: 34px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.toggle-label:before {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 30px;\n height: 30px;\n background-color: #fff;\n border-radius: 50%;\n transition: transform 0.3s;\n}\n\n.toggle-input:checked + .toggle-label {\n background-color: #4fbf26;\n}\n\n.toggle-input:checked + .toggle-label:before {\n transform: translateX(26px);\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"3738da","snapshot":null,"tags":null,"title":"switch by prashantj510","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1751,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".toggle-button-cover {\n display: table-cell;\n position: relative;\n width: 150px;\n height: 140px;\n box-sizing: border-box;\n}\n\n.button-cover {\n height: 100px;\n margin: 20px;\n background-color: #fff;\n box-shadow: 0 10px 20px -8px #c5d6d6;\n border-radius: 4px;\n}\n\n.button-cover:before {\n counter-increment: button-counter;\n content: counter(button-counter);\n position: absolute;\n right: 0;\n bottom: 0;\n color: #d7e3e3;\n font-size: 12px;\n line-height: 1;\n padding: 5px;\n}\n\n.button-cover,\n.knobs,\n.layer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.button {\n position: relative;\n top: 50%;\n width: 74px;\n height: 36px;\n margin: -20px auto 0 auto;\n overflow: hidden;\n}\n\n.checkbox {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 3;\n}\n\n.knobs {\n z-index: 2;\n}\n\n.layer {\n width: 100%;\n background-color: #ebf7fc;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\n.button.r,\n.button.r .layer {\n border-radius: 100px;\n}\n\n#button-3 .knobs:before {\n content: \"°C\";\n position: absolute;\n top: 4px;\n left: 4px;\n width: 20px;\n height: 10px;\n color: #fff;\n font-size: 12px;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n padding: 9px 4px;\n background-color: #1c739b;\n border-radius: 50%;\n transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);\n}\n\n#button-3 .checkbox:active + .knobs:before {\n width: 46px;\n border-radius: 100px;\n}\n\n#button-3 .checkbox:checked:active + .knobs:before {\n margin-left: -26px;\n}\n\n#button-3 .checkbox:checked + .knobs:before {\n content: \"°F\";\n left: 42px;\n background-color: #b6413b;\n}\n\n#button-3 .checkbox:checked ~ .layer {\n background-color: #fcebeb;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"019736","snapshot":null,"tags":null,"title":"switch by Mohsinech","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":130,"cssLen":963,"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 {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(1, 103, 255);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n overflow: hidden;\n}\n\n.toggle span {\n position: absolute;\n height: 2px;\n width: 40px;\n background-color: rgb(255, 255, 255);\n border-radius: 4px;\n cursor: pointer;\n transition: 0.5s;\n}\n\n.toggle span:nth-child(1) {\n transform: translateY(-15px);\n width: 25px;\n left: 15px;\n}\n\n.toggle.toggle:hover span:nth-child(1) {\n width: 40px;\n transform: translateY(0px) rotate(45deg);\n transition-delay: 0.125s;\n}\n\n.toggle span:nth-child(2) {\n transform: translateY(15px);\n width: 15px;\n left: 15px;\n}\n\n.toggle.toggle:hover span:nth-child(2) {\n width: 40px;\n transform: translateY(0px) rotate(315deg);\n transition-delay: 0.125s;\n}\n\n.toggle:hover span:nth-child(3) {\n transform: translateX(60px);\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"205008","snapshot":null,"tags":null,"title":"switch by YaroslavFilipenko","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":145,"cssLen":807,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

","css":".switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 20px;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #b1b9c3;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.slider:before {\n position: absolute;\n content: '';\n height: 30px;\n width: 30px;\n bottom: -5px;\n background: #18333E;\n -webkit-transition: 0.4s;\n transition: 0.4s;\n}\n\n.slider.round {\n border-radius: 34px;\n}\n\n.slider.round:before {\n border-radius: 50%;\n}\n\ninput:checked+.slider {\n background-color: #b1b9c3;\n}\n\ninput:checked+.slider:before {\n -webkit-transform: translateX(35px);\n -ms-transform: translateX(35px);\n transform: translateX(35px);\n background: #F2F8FD;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"925def","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1321,"cssLen":4754,"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 height: 100%;\n background: #f4f4f4;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.title {\n height: 25%;\n font-family: Cookie;\n font-size: 48pt;\n text-align: center;\n}\n\n.switch {\n --cookie-size: 3em;\n --outer-border: 0.5em;\n --inner-border: 0.5em;\n --border-color: #d8a04d;\n --height: calc(var(--cookie-size) + (2 * (var(--outer-border) + var(--inner-border))));\n --width: calc(var(--height) * 2);\n position: relative;\n width: var(--width);\n height: var(--height);\n}\n\n.switch input {\n display: none;\n}\n\n.switch label {\n cursor: pointer;\n}\n\n.switch input:checked ~ .cookie {\n transform: translateX(calc(var(--width) / 2)) rotate(360deg);\n color: #d8a04d;\n background-color: currentColor;\n}\n\n.switch input:checked ~ .cookie span[class^=\"cookie-part-\"],\n.switch input:checked ~ .cookie span[class^=\"chocolate-chips-\"] {\n transform: translate(0px, 0px);\n}\n\n.background {\n height: 100%;\n border-radius: calc(var(--width) / 4);\n border: var(--outer-border) solid var(--border-color);\n background: linear-gradient(to right, #484848 0%,#202020 100%);\n}\n\n.cookie {\n --chip-size: calc(var(--cookie-size) / 8);\n --split-offset: calc(var(--cookie-size) / 24);\n position: absolute;\n top: calc(var(--outer-border) + var(--inner-border));\n left: calc(var(--outer-border) + var(--inner-border));\n ;\n width: var(--cookie-size);\n height: var(--cookie-size);\n border-radius: 50%;\n transition: transform 1s linear;\n}\n\n.cookie span[class^=\"cookie-part-\"] {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n color: #d8a04d;\n background-color: currentColor;\n}\n\n.cookie-part-1 {\n clip-path: polygon(0% 0%, 55% 0%, 52% 8%, 55% 10%, 55% 16%, 52% 19%, 52% 24%, 47% 26%, 45% 30%, 50% 33%, 47% 37%, 47% 42%, 51% 47%, 47% 49%, 40% 50%, 34% 50%, 30% 53%, 25% 53%, 20% 56%, 16% 56%, 14% 61%, 0% 60%);\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));\n}\n\n.cookie-part-2 {\n clip-path: polygon(55% 0%, 100% 0%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 47% 42%, 47% 37%, 50% 33%, 45% 30%, 47% 26%, 52% 24%, 52% 19%, 55% 16%, 55% 10%, 52% 8%);\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));\n}\n\n.cookie-part-3 {\n clip-path: polygon(0% 60%, 14% 61%, 16% 56%, 20% 56%, 25% 53%, 30% 53%, 34% 50%, 40% 50%, 47% 49%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%, 0% 100%);\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));\n}\n\n.cookie-part-4 {\n clip-path: polygon(100% 100%, 100% 72%, 88% 68%, 84% 61%, 78% 60%, 77% 56%, 75% 53%, 71% 55%, 66% 50%, 63% 47%, 58% 49%, 56% 44%, 51% 47%, 55% 53%, 60% 56%, 56% 62%, 53% 67%, 57% 72%, 57% 81%, 57% 87%, 63% 92%, 60% 100%);\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));\n}\n\n.cookie span[class^=\"chocolate-chips-\"] {\n position: absolute;\n color: #754e27;\n background-color: #865729;\n height: var(--chip-size);\n width: var(--chip-size);\n border-radius: 50%;\n box-shadow: inset -0.35em 0;\n}\n\n.cookie .chocolate-chips-1a {\n top: 41%;\n left: 5%;\n}\n\n.cookie .chocolate-chips-1b {\n top: 20%;\n left: 18%;\n}\n\n.cookie .chocolate-chips-1c {\n top: 35%;\n left: 33%;\n}\n\n.cookie .chocolate-chips-1d {\n top: 6%;\n left: 39%;\n}\n\n.cookie .chocolate-chips-2a {\n --chip-size: calc(var(--cookie-size) / 10);\n top: 24%;\n right: 35%;\n}\n\n.cookie .chocolate-chips-2b {\n top: 36%;\n right: 23%;\n}\n\n.cookie .chocolate-chips-2c {\n top: 7%;\n right: 29%;\n}\n\n.cookie .chocolate-chips-2d {\n top: 42%;\n right: 7%;\n}\n\n.cookie .chocolate-chips-2e {\n top: 19%;\n right: 12%;\n}\n\n.cookie .chocolate-chips-3a {\n --chip-size: calc(var(--cookie-size) / 6);\n bottom: 24%;\n left: 18%;\n}\n\n.cookie .chocolate-chips-3b {\n bottom: 34%;\n left: 42%;\n}\n\n.cookie .chocolate-chips-3c {\n bottom: 9%;\n left: 39%;\n}\n\n.cookie .chocolate-chips-4a {\n bottom: 27%;\n right: 29%;\n}\n\n.cookie .chocolate-chips-4b {\n bottom: 12%;\n right: 23%;\n}\n\n.cookie .chocolate-chips-4c {\n --chip-size: calc(var(--cookie-size) / 12);\n bottom: 28%;\n right: 17%;\n}\n\n.cookie span[class^=\"chocolate-chips-1\"] {\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * -1));\n}\n\n.cookie span[class^=\"chocolate-chips-2\"] {\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * -1));\n}\n\n.cookie span[class^=\"chocolate-chips-3\"] {\n transform: translate(calc(var(--split-offset) * -1), calc(var(--split-offset) * 1));\n}\n\n.cookie span[class^=\"chocolate-chips-4\"] {\n transform: translate(calc(var(--split-offset) * 1), calc(var(--split-offset) * 1));\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"96244b","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3403,"cssLen":1359,"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":".container {\n width: 7em;\n height: 7em;\n position: relative;\n}\n\n.button {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 4px solid #090909;\n background-color: transparent;\n background-image: linear-gradient(145deg, #171717, #444245);\n box-sizing: border-box;\n box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container input {\n display: none;\n}\n\n.button::before {\n position: absolute;\n content: \"\";\n width: 7.25em;\n height: 7.25em;\n border-radius: inherit;\n background-color: transparent;\n background-image: linear-gradient(145deg, #262626, #606060);\n z-index: -1;\n box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;\n}\n\n.button .icon {\n width: 60px;\n height: 60px;\n display: inline-block;\n}\n\n.button .icon svg {\n height: 100%;\n width: 100%;\n fill: #a5a5a5;\n}\n\n.container input:checked + .button {\n box-shadow: inset -2px -2px 0 #5e5e5e, inset 2px 2px 0 #1c1c1c;\n border: 4px solid lime;\n animation: animeBorder 0.3s linear alternate-reverse infinite;\n}\n\n.container input:checked + .button .icon svg {\n fill: lime;\n animation: animeFill 0.3s linear alternate-reverse infinite;\n}\n\n@keyframes animeFill {\n to {\n fill: lime;\n }\n}\n\n@keyframes animeBorder {\n to {\n border-color: lime;\n }\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"a0d881","snapshot":null,"tags":null,"title":"switch by sahilxkhadka","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1088,"cssLen":795,"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 position: relative;\n width: 48px;\n height: 48px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: rgb(60,64,67);\n color: #fff;\n border-radius: 50%;\n cursor: pointer;\n transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.mic-on, .mic-off {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all .3s ease-in-out;\n}\n\n.mic-on {\n z-index: 4;\n}\n\n.mic-off {\n position: absolute;\n inset: 0;\n z-index: 5;\n opacity: 0;\n}\n\n.switch:hover {\n background-color: rgba(60,64,67, 0.8);\n}\n\n#checkbox {\n display: none;\n}\n\n#checkbox:checked + .switch {\n background-color: red\n}\n\n#checkbox:checked + .switch .mic-off {\n opacity: 1;\n}\n\n#checkbox:active + .switch {\n scale: 1.2;\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"782d3c","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":825,"cssLen":1751,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: 99px;\n padding: .125em;\n background-image: linear-gradient(to bottom, #777676, #212121);\n box-shadow: 0 1px 1px rgba(0, 0, 0, 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: 99px;\n width: 3em;\n height: 1.5em;\n background-color: #212121;\n box-shadow: inset 0 0 .0625em .125em rgba(5, 5, 5, 0.2), inset 0 .0625em .125em rgba(0, 0, 0, 0.4);\n transition: background-color .4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: rgba(11, 108, 253, 0.1);\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: .0625em;\n border-radius: 99px;\n width: 1.375em;\n height: 1.375em;\n background-color: #212121;\n box-shadow: inset 0 -.0625em .0625em .125em rgba(5, 5, 5, 0.2), inset 0 -.125em .0625em rgba(5, 5, 5, 0.2), inset 0 .1875em .0625em rgba(219, 219, 219, 0.3), 0 .125em .125em rgb(0 0 0 / .5);\n transition: left .4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 1.5625em;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, min-content);\n gap: .125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: .125em;\n height: .125em;\n background-image: radial-gradient(circle at 50% 0, #5e5d5d, #807d7d);\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"802154","snapshot":null,"tags":null,"title":"switch by SouravBandyopadhyay","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":225,"cssLen":1622,"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-button-cover {\n display: inline-block;\n position: relative;\n width: 200px;\n height: 140px;\n box-sizing: border-box;\n}\n\n.button-cover:before {\n counter-increment: button-counter;\n content: counter(button-counter);\n position: absolute;\n right: 0;\n bottom: 0;\n color: #d7e3e3;\n font-size: 12px;\n line-height: 1;\n padding: 5px;\n}\n\n.button-cover,\n.knobs,\n.layer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.button {\n position: relative;\n top: 50%;\n width: 74px;\n height: 36px;\n margin: -20px auto 0 auto;\n overflow: hidden;\n}\n\n.button.r,\n.button.r .layer {\n border-radius: 100px;\n}\n\n.checkbox {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 3;\n}\n\n.knobs {\n z-index: 2;\n}\n\n.layer {\n width: 100%;\n background-color: #ebf7fc;\n transition: 0.3s ease all;\n z-index: 1;\n}\n\n#button-2 .knobs:before,\n#button-2 .knobs:after {\n content: 'YES';\n position: absolute;\n top: 4px;\n left: 4px;\n width: 20px;\n height: 10px;\n color: #fff;\n font-size: 10px;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n padding: 9px 4px;\n background-color: #03f480;\n border-radius: 50%;\n transition: 0.3s ease all;\n}\n\n#button-2 .knobs:before {\n content: 'YES';\n}\n\n#button-2 .knobs:after {\n content: 'NO';\n}\n\n#button-2 .knobs:after {\n right: -28px;\n left: auto;\n background-color: #f44336;\n}\n\n#button-2 .checkbox:checked + .knobs:before {\n left: -28px;\n}\n\n#button-2 .checkbox:checked + .knobs:after {\n right: 4px;\n}\n\n#button-2 .checkbox:checked ~ .layer {\n background-color: #fcebeb;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"588bef","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":130,"cssLen":1404,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n On\n Off\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: 100px;\n height: 2em;\n}\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 color: #000;\n font-weight: 600;\n border-radius: 30px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n transition: .4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"On\";\n height: 90%;\n width: 48%;\n left: 2%;\n border-radius: 20px;\n background-color: white;\n color: green;\n display: grid;\n align-content: center;\n justify-content: center;\n box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1);\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);\n transition: .4s;\n}\n\n.slider:after {\n content: \"\";\n position: absolute;\n top: -7px;\n left: -7px;\n right: -7px;\n bottom: -7px;\n border-radius: 1.71em;\n background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));\n z-index: -1;\n}\n\n.switch input:checked + .slider {\n background-color: #21f3a3;\n color: #fff;\n}\n\n.switch input:checked + .slider:before {\n content: \"Off\";\n transform: translateX(100%);\n color: red;\n}\n\n.switch input {\n display: none;\n}"}]}},"actionData":null,"errors":null}