{"loaderData":{"0":null,"0-2":{"total":7188,"projects":[{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"c7c896","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":238,"cssLen":1356,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n GLASS EFFECT\n

\n JOE WATSON SBF\n

0000 000 000 0000

\n VALID 01/28\n

\n","css":".container {\n color: white;\n position: relative;\n font-family: sans-serif;\n}\n\n.container::before,\n.container::after {\n content: \"\";\n background-color: #fab5704c;\n position: absolute;\n}\n\n.container::before {\n border-radius: 50%;\n width: 6rem;\n height: 6rem;\n top: 30%;\n right: 7%;\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n height: 3rem;\n top: 8%;\n right: 5%;\n border: 1px solid;\n}\n\n.container .box {\n width: 11.875em;\n height: 15.875em;\n padding: 1rem;\n background-color: rgba(255, 255, 255, 0.074);\n border: 1px solid rgba(255, 255, 255, 0.222);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n border-radius: 0.7rem;\n transition: all ease 0.3s;\n}\n\n.container .box {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.container .box .title {\n font-size: 2rem;\n font-weight: 500;\n letter-spacing: 0.1em;\n}\n\n.container .box div strong {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.container .box div p {\n margin: 0;\n font-size: 0.9em;\n font-weight: 300;\n letter-spacing: 0.1em;\n}\n\n.container .box div span {\n font-size: 0.7rem;\n font-weight: 300;\n}\n\n.container .box div span:nth-child(3) {\n font-weight: 500;\n margin-right: 0.2rem;\n}\n\n.container .box:hover {\n box-shadow: 0px 0px 20px 1px #ffbb763f;\n border: 1px solid rgba(255, 255, 255, 0.454);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"51d60f","snapshot":null,"tags":null,"title":"switch by alfoly1988","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":864,"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 {\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: rgb(75, 73, 74);\n transition: 0.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: black;\n box-shadow: inset 8px -4px 0 0 white;\n transition: 0.4s;\n}\n\n.switch input:checked + .slider {\n background-color: #2196f3;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n background-color: yellow;\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"802d08","snapshot":null,"tags":null,"title":"switch by AmIt-DasIT","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1176,"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: #223243;\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: #223243;\n box-shadow: inset 2px -2px 0 1.8px #fff;\n transition: .4s;\n animation: anima1 0.3s linear;\n}\n\n@keyframes anima1 {\n 0% {\n transform: translateX(1.5em);\n }\n\n 80% {\n transform: translateX(-0.3em);\n }\n\n 100% {\n transform: translateX(0em);\n }\n}\n\n.switch input:checked + .slider:before {\n background-color: yellow;\n box-shadow: none;\n transform: translateX(1.5em);\n animation: anima 0.3s linear;\n}\n\n@keyframes anima {\n 0% {\n transform: translateX(0px)\n }\n\n 80% {\n transform: translateX(1.6em)\n }\n\n 100% {\n transform: translateX(1.4em)\n }\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"55d920","snapshot":null,"tags":null,"title":"switch by devestter","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1905,"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: 200px;\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: 90px;\n height: 38px;\n margin: -20px auto 0 auto;\n overflow: hidden;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\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: #524949;\n transition: 1s ease all;\n z-index: 1;\n}\n\n.button.r,\n.button.r .layer {\n border-radius: 12px;\n}\n\n#button-3 .knobs:before {\n content: \"ON\";\n position: absolute;\n top: 4px;\n left: 7px;\n width: 23px;\n height: 11px;\n color: rgb(22, 21, 21);\n font-size: 10px;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n padding: 9px 4px;\n background-color: rgb(240, 235, 233);\n border-radius: 30%;\n transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#button-3 .checkbox:active + .knobs:before {\n width: 36px;\n border-radius: 2px;\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: \"OFF\";\n left: 50px;\n background-color: #f44336;\n color: white;\n}\n\n#button-3 .checkbox:checked ~ .layer {\n background-color: #524949;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"f1dea5","snapshot":null,"tags":null,"title":"switch by r7chardgh","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":870,"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 {\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.toggle {\n position: relative;\n display: flex;\n width: 2.8em;\n height: 1em;\n background-color: rgb(165, 165, 165);\n justify-content: center;\n}\n\n.toggle::before {\n content: \"\";\n position: absolute;\n z-index: -1;\n width: .8em;\n height: 2em;\n margin-bottom: .5em;\n bottom: 0;\n background-color: rgb(153, 104, 39);\n box-shadow: 0 -1em 0 0 rgb(165, 165, 165);\n transform-origin: bottom;\n transform: rotateZ(-30deg);\n transition: transform 150ms;\n}\n\n.switch input:checked + .toggle::before {\n transform: rotateZ(30deg);\n}\n\n.switch input:checked + .toggle {\n box-shadow: 0 -1em 2em 0 rgb(230, 111, 111);\n} \n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"91731b","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":1178,"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 display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.toggle input {\n opacity: 0;\n width: 0;\n height: 0;\n transition: transform 0.2s ease-in-out;\n}\n\n.slider {\n box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #FF3CAC;\n background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);\n transition: 0.2 ease-in-out;\n border-radius: 34px;\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: #4158D0;\n background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);\n transition: transform 0.3s ease-in-out;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.input:checked + .slider {\n background-color: #8BC6EC;\n background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);\n}\n\n.input:checked + .slider:before {\n transform: translateX(26px);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"a21ec5","snapshot":null,"tags":null,"title":"switch by tarantino421","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":148,"cssLen":1028,"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":".buttons__burger {\n --size: 3rem;\n --clr: #000;\n width: var(--size);\n height: calc(0.7 * var(--size));\n cursor: pointer;\n position: relative;\n display: block;\n}\n\n.buttons__burger #burger {\n display: none;\n width: 100%;\n height: 100%;\n}\n\n.buttons__burger span {\n display: block;\n position: absolute;\n width: 100%;\n border-radius: 0.5rem;\n border: 3px solid var(--clr);\n background-color: var(--clr);\n transition: 0.15s ease-in-out;\n}\n\n.buttons__burger span:nth-of-type(1) {\n top: 0;\n right: 0;\n transform-origin: right center;\n}\n\n.buttons__burger span:nth-of-type(2) {\n top: 50%;\n transform: translateY(-50%);\n}\n\n.buttons__burger span:nth-of-type(3) {\n top: 100%;\n right: 0;\n transform-origin: right center;\n transform: translateY(-100%);\n}\n\n.buttons__burger #burger:checked ~ span:nth-of-type(1) {\n transform: translateY(-30%) rotate(40deg);\n width: 50%;\n top: 50%;\n}\n\n.buttons__burger #burger:checked ~ span:nth-of-type(3) {\n transform: translateY(-70%) rotate(-40deg);\n width: 50%;\n top: 50%;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"1fc4bf","snapshot":null,"tags":null,"title":"switch by Ali-Tahmazi99","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":140,"cssLen":1050,"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":"input[type = \"checkbox\"] {\n visibility: hidden;\n display: none;\n appearance: none;\n -webkit-appearance: none;\n}\n\nlabel.container {\n display: block;\n width: 60px;\n height: 30px;\n background: #d3d3d3;\n border-radius: 50px;\n position: relative;\n cursor: pointer;\n box-shadow: 9px 9px 29px #969696,\n -9px -9px 29px #ffffff;\n}\n\nlabel.shadow {\n width: 50px;\n height: 20px;\n position: absolute;\n border-radius: 50px;\n left: 5px;\n top: 5px;\n box-shadow: inset 3px 3px 10px #969696,\n inset -3px -3px 5px #ffffffbd;\n cursor: pointer;\n}\n\n.container span {\n display: inline-block;\n width: 20px;\n height: 20px;\n background-color: #ffaa00;\n margin: 5px;\n border-radius: 50px;\n font-size: 20px;\n transition: all 0.3s ease-in;\n position: relative;\n left: 0;\n z-index: 1;\n}\n\n.container span::after {\n position: absolute;\n top: 6px;\n left: 4px;\n transition-delay: 5s;\n}\n\ninput[type = \"checkbox\"]:checked ~ span {\n left: 29px;\n transition: 0.3s ease-in;\n background: #0a100d;\n transform: rotate(220deg);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"fab444","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":69,"cssLen":2618,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n","css":".ch, .ch:before, .ch:after {\n transition: all 0.3s ease-in-out;\n}\n\n.ch {\n background-color: rgb(27,123,145);\n border-radius: 0.2em;\n box-shadow: 0 0.05em 0 0.05em rgba(0,0,0,0.3) inset;\n font-size: 20px;\n overflow: hidden;\n position: relative;\n width: 3em;\n height: 1.5em;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n z-index: 0;\n}\n\n.ch:before, .ch:after {\n content: \"\";\n display: block;\n position: absolute;\n}\n\n.ch:before {\n background-color: currentColor;\n border-radius: 0.125em;\n box-shadow: 0 0 0 0.05em inset,\n\t\t-0.12em -0.12em 0 rgb(109,148,184) inset,\n\t\t-0.4em -0.3em 0 0.05em inset,\n\t\t0.12em 0.12em 0 rgb(255,255,255) inset;\n color: rgb(149,188,224);\n opacity: 0.9;\n bottom: 0;\n left: 0.125em;\n width: 1.25em;\n height: 1.25em;\n z-index: 2;\n}\n\n.ch:after {\n background-image: /* white */radial-gradient(0.2em 0.5em at 38% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.3em 0.8em at 52% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\tradial-gradient(0.25em 0.4em at 67% 95%, rgb(255,255,255) 49%, rgba(255,255,255,0) 50%),\n\t\t/* yellow */\n\t\tradial-gradient(0.25em 0.7em at 36% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 52% 95%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\tradial-gradient(0.25em 0.6em at 70% 93%, rgb(255,224,0) 49%, rgba(255,224,0,0) 50%),\n\t\t/* orange */\n\t\tradial-gradient(0.3em 0.8em at 32% 81%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.5em 1.6em at 52% 95%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\tradial-gradient(0.3em 0.9em at 74% 86%, rgb(255,144,0) 49%, rgba(255,144,0,0) 50%),\n\t\t/* red-orange */\n\t\tradial-gradient(0.4em 1em at 25% 70%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.7em 2.75em at 52% 100%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%),\n\t\tradial-gradient(0.4em 1.2em at 79% 75%, rgb(255,76,0) 49%, rgba(255,76,0,0) 50%);\n background-position: 100% 1.5em;\n background-size: 1.5em 1.5em;\n background-repeat: no-repeat;\n border-radius: 0 0 0 0.1em / 0 0 0 0;\n box-shadow: 0 0 0 0 rgb(169,208,244) inset;\n bottom: 0;\n left: 0;\n width: 1.5em;\n height: 1.5em;\n z-index: 1;\n}\n/* Checked */\n.ch:checked {\n background-color: rgb(92,8,8);\n}\n\n.ch:checked:before {\n border-radius: 50%;\n transform: translate(1.5em,1.5em) rotate(45deg) scale(0.5);\n}\n\n.ch:checked:after {\n background-position: 100% 0;\n box-shadow: 0 -0.15em 0 0 rgb(169,208,244) inset;\n width: 3em;\n}\n\n/* Other States */\n.ch:focus {\n\t/* Usually an anti-A11Y practice but set to remove an annoyance just for this demo */\n outline: 0;\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"f5136d","snapshot":null,"tags":null,"title":"switch by TroyRandall","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":744,"cssLen":1397,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n 14\n

\n","css":"/* The switch - the box around the slider */\n.comment-react {\n margin: 0;\n display: flex;\n justify-content: center;\n padding: 5px;\n background-color: #f1f1f1;\n border-radius: 5px;\n scale: 1.5;\n width: 100px;\n}\n\n.comment-react button {\n width: 35px;\n height: 35px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: transparent;\n border: 0;\n outline: none;\n}\n\n.comment-react button:after {\n content: \"\";\n width: 40px;\n height: 40px;\n position: absolute;\n left: -3px;\n top: -3px;\n background-color: #f5356e;\n border-radius: 50%;\n z-index: 0;\n transform: scale(0);\n}\n\n.comment-react button svg {\n position: relative;\n z-index: 9;\n}\n\n.comment-react button:hover:after {\n animation: ripple 0.6s ease-in-out forwards;\n}\n\n.comment-react button:hover svg {\n fill: #f5356e;\n}\n\n.comment-react button:hover svg path {\n stroke: #f5356e;\n fill: #f5356e;\n}\n\n.comment-react hr {\n width: 80%;\n height: 1px;\n background-color: #dfe1e6;\n margin: auto;\n border: 0;\n}\n\n.comment-react span {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n font-size: 20px;\n font-weight: 600;\n color: #707277;\n padding-right: 10px;\n text-align: center;\n}\n\n@keyframes ripple {\n 0% {\n transform: scale(0);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"b7a341","snapshot":null,"tags":null,"title":"switch by Shoh2008","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":102,"cssLen":804,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch .input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #2e2e2e;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #4e4;\n transition: .4s;\n}\n\n.input:checked + .slider {\n background-color: #000;\n}\n\n.input:focus + .slider {\n box-shadow: 0 0 1px #000;\n}\n\n.input:checked + .slider:before {\n transform: translateX(1.5em);\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"99f290","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11697,"cssLen":567,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":"body {\n font-size: 20px;\n background-color: #d5d9e0;\n padding: 40px;\n}\n\n#checkbox-on {\n display: none;\n}\n\n.control-element {\n cursor: pointer;\n}\n\n.text-label {\n font-size: 1.8em;\n font-family: sans-serif;\n fill: #6D7788;\n text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);\n pointer-events: none;\n}\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.position-container {\n cursor: pointer;\n}\n\n.svg-switch-container {\n width: 10em;\n}\n"}]}},"actionData":null,"errors":null}