{"loaderData":{"0":null,"0-3":{"total":7365,"projects":[{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"1d810d","snapshot":null,"tags":null,"title":"switch by ClawHack1","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":146,"cssLen":1570,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

\n","css":"/* Genel stil */\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 40px;\n height: 24px;\n margin: 10px;\n}\n\n/* Giriş stil */\n.toggle-switch .toggle-input {\n display: none;\n}\n\n/* Anahtarın stilinin etrafındaki etiketin stil */\n.toggle-switch .toggle-label {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 24px;\n background-color: #2196F3;\n border-radius: 34px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n/* Anahtarın yuvarlak kısmının stil */\n.toggle-switch .toggle-label::before {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n top: 2px;\n left: 2px;\n background-color: #fff;\n box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s;\n}\n\n/* Anahtarın etkin hale gelmesindeki stil değişiklikleri */\n.toggle-switch .toggle-input:checked + .toggle-label {\n background-color: #4CAF50;\n}\n\n.toggle-switch .toggle-input:checked + .toggle-label::before {\n transform: translateX(16px);\n}\n\n/* Light tema */\n.toggle-switch.light .toggle-label {\n background-color: #BEBEBE;\n}\n\n.toggle-switch.light .toggle-input:checked + .toggle-label {\n background-color: #9B9B9B;\n}\n\n.toggle-switch.light .toggle-input:checked + .toggle-label::before {\n transform: translateX(6px);\n}\n\n/* Dark tema */\n.toggle-switch.dark .toggle-label {\n background-color: #4B4B4B;\n}\n\n.toggle-switch.dark .toggle-input:checked + .toggle-label {\n background-color: #717171;\n}\n\n.toggle-switch.dark .toggle-input:checked + .toggle-label::before {\n transform: translateX(16px);\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"51a1c2","snapshot":null,"tags":null,"title":"switch by mobinkakei","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":184,"cssLen":788,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

\n","css":".label {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n color: #394a56;\n}\n\n.label-text {\n margin-left: 16px;\n}\n\n.toggle {\n isolation: isolate;\n position: relative;\n height: 30px;\n width: 60px;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: -8px -4px 8px 0px #ffffff,\n 8px 4px 12px 0px #d1d9e6,\n 4px 4px 4px 0px #d1d9e6 inset,\n -4px -4px 4px 0px #ffffff inset;\n}\n\n.toggle-state {\n display: none;\n}\n\n.indicator {\n height: 100%;\n width: 200%;\n background: #ecf0f3;\n border-radius: 15px;\n transform: translate3d(-75%, 0, 0);\n transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);\n box-shadow: -8px -4px 8px 0px #ffffff,\n 8px 4px 12px 0px #d1d9e6;\n}\n\n.toggle-state:checked ~ .indicator {\n transform: translate3d(25%, 0, 0);\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"3be4a9","snapshot":null,"tags":null,"title":"switch by bandirevanth","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":154,"cssLen":2387,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n Yes\n No\n","css":"/* Switch starts here */\n.rocker {\n display: inline-block;\n position: relative;\n /*\n SIZE OF SWITCH\n ==============\n All sizes are in em - therefore\n changing the font-size here\n will change the size of the switch.\n See .rocker-small below as example.\n */\n font-size: 2em;\n font-weight: bold;\n text-align: center;\n text-transform: uppercase;\n color: #888;\n width: 7em;\n height: 4em;\n overflow: hidden;\n border-bottom: 0.5em solid #eee;\n}\n\n.rocker-small {\n font-size: 0.75em;\n /* Sizes the switch */\n margin: 1em;\n}\n\n.rocker::before {\n content: \"\";\n position: absolute;\n top: 0.5em;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #999;\n border: 0.5em solid #eee;\n border-bottom: 0;\n}\n\n.rocker input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.switch-left,\n.switch-right {\n cursor: pointer;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.5em;\n width: 3em;\n transition: 0.2s;\n user-select: none;\n}\n\n.switch-left {\n height: 2.4em;\n width: 2.75em;\n left: 0.85em;\n bottom: 0.4em;\n background-color: #ddd;\n transform: rotate(15deg) skewX(15deg);\n}\n\n.switch-right {\n right: 0.5em;\n bottom: 0;\n background-color: #bd5757;\n color: #fff;\n}\n\n.switch-left::before,\n.switch-right::before {\n content: \"\";\n position: absolute;\n width: 0.4em;\n height: 2.45em;\n bottom: -0.45em;\n background-color: #ccc;\n transform: skewY(-65deg);\n}\n\n.switch-left::before {\n left: -0.4em;\n}\n\n.switch-right::before {\n right: -0.375em;\n background-color: transparent;\n transform: skewY(65deg);\n}\n\ninput:checked + .switch-left {\n background-color: #0084d0;\n color: #fff;\n bottom: 0px;\n left: 0.5em;\n height: 2.5em;\n width: 3em;\n transform: rotate(0deg) skewX(0deg);\n}\n\ninput:checked + .switch-left::before {\n background-color: transparent;\n width: 3.0833em;\n}\n\ninput:checked + .switch-left + .switch-right {\n background-color: #ddd;\n color: #888;\n bottom: 0.4em;\n right: 0.8em;\n height: 2.4em;\n width: 2.75em;\n transform: rotate(-15deg) skewX(-15deg);\n}\n\ninput:checked + .switch-left + .switch-right::before {\n background-color: #ccc;\n}\n\n/* Keyboard Users */\ninput:focus + .switch-left {\n color: #333;\n}\n\ninput:checked:focus + .switch-left {\n color: #fff;\n}\n\ninput:focus + .switch-left + .switch-right {\n color: #fff;\n}\n\ninput:checked:focus + .switch-left + .switch-right {\n color: #333;\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"9d11c6","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":222,"cssLen":912,"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.toggle {\n position: relative;\n width: 40px;\n height: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition-duration: .5s;\n}\n\n.bars {\n width: 100%;\n height: 4px;\n background-color: rgb(176, 92, 255);\n border-radius: 4px;\n}\n\n#bar2 {\n transition-duration: .8s;\n}\n\n#bar1,#bar3 {\n width: 70%;\n}\n\n#checkbox:checked + .toggle .bars {\n position: absolute;\n transition-duration: .5s;\n}\n\n#checkbox:checked + .toggle #bar2 {\n transform: scaleX(0);\n transition-duration: .5s;\n}\n\n#checkbox:checked + .toggle #bar1 {\n width: 100%;\n transform: rotate(45deg);\n transition-duration: .5s;\n}\n\n#checkbox:checked + .toggle #bar3 {\n width: 100%;\n transform: rotate(-45deg);\n transition-duration: .5s;\n}\n\n#checkbox:checked + .toggle {\n transition-duration: .5s;\n transform: rotate(180deg);\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"aabd09","snapshot":null,"tags":null,"title":"switch by Admin12121","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":252,"cssLen":2628,"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":".switch-button {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n justify-content: center;\n margin: auto;\n height: 55px;\n}\n\n.switch-button .switch-outer {\n height: 100%;\n background: #252532;\n width: 115px;\n border-radius: 165px;\n -webkit-box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;\n box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;\n border: 1px solid #32303e;\n padding: 6px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n\n.switch-button .switch-outer input[type=\"checkbox\"] {\n opacity: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n position: absolute;\n}\n\n.switch-button .switch-outer .button-toggle {\n height: 42px;\n width: 42px;\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(#3b3a4e),\n to(#272733)\n );\n background: -o-linear-gradient(#3b3a4e, #272733);\n background: linear-gradient(#3b3a4e, #272733);\n border-radius: 100%;\n -webkit-box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;\n box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;\n position: relative;\n z-index: 2;\n -webkit-transition: left 0.3s ease-in;\n -o-transition: left 0.3s ease-in;\n transition: left 0.3s ease-in;\n left: 0;\n}\n\n.switch-button\n .switch-outer\n input[type=\"checkbox\"]:checked\n + .button\n .button-toggle {\n left: 58%;\n}\n\n.switch-button\n .switch-outer\n input[type=\"checkbox\"]:checked\n + .button\n .button-indicator {\n -webkit-animation: indicator 1s forwards;\n animation: indicator 1s forwards;\n}\n\n.switch-button .switch-outer .button {\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n -webkit-box-pack: justify;\n justify-content: space-between;\n}\n\n.switch-button .switch-outer .button-indicator {\n height: 25px;\n width: 25px;\n top: 50%;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n border-radius: 50%;\n border: 3px solid #ef565f;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n right: 10px;\n position: relative;\n}\n\n@-webkit-keyframes indicator {\n 30% {\n opacity: 0;\n }\n\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n border: 3px solid #60d480;\n left: -68%;\n }\n}\n\n@keyframes indicator {\n 30% {\n opacity: 0;\n }\n\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n border: 3px solid #60d480;\n left: -68%;\n }\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"c79674","snapshot":null,"tags":null,"title":"switch by JaydipPrajapati1910","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1752,"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: 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: \"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: #03a9f4;\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: \"NO\";\n left: 42px;\n background-color: #f44336;\n}\n\n#button-3 .checkbox:checked ~ .layer {\n background-color: #fcebeb;\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"ddd6fa","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":851,"cssLen":1243,"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\n\n","css":"/* The switch - the box around the speaker*/\n.toggleSwitch {\n width: 50px;\n height: 50px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(39, 39, 39);\n border-radius: 50%;\n cursor: pointer;\n transition-duration: .3s;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);\n overflow: hidden;\n}\n\n/* Hide default HTML checkbox */\n#checkboxInput {\n display: none;\n}\n\n.bell {\n width: 18px;\n}\n\n.bell path {\n fill: white;\n}\n\n.speaker {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n transition-duration: .3s;\n}\n\n.speaker svg {\n width: 18px;\n}\n\n.mute-speaker {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n z-index: 3;\n transition-duration: .3s;\n}\n\n.mute-speaker svg {\n width: 18px;\n}\n\n#checkboxInput:checked +.toggleSwitch .speaker {\n opacity: 0;\n transition-duration: .3s;\n}\n\n#checkboxInput:checked +.toggleSwitch .mute-speaker {\n opacity: 1;\n transition-duration: .3s;\n}\n\n#checkboxInput:active + .toggleSwitch {\n transform: scale(0.7);\n}\n\n#checkboxInput:hover + .toggleSwitch {\n background-color: rgb(61, 61, 61);\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"cd1df9","snapshot":null,"tags":null,"title":"switch by Shoh2008","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":66,"cssLen":1033,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".checkbox-wrapper-41 {\n --size: 100px;\n}\n\n.checkbox-wrapper-41 input[type=\"checkbox\"] {\n -webkit-appearance: none;\n width: var(--size);\n height: calc(var(--size) / 2);\n background-color: #fff;\n border: 3px solid #222;\n border-radius: 30px 100px 100px 100px;\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n outline: none;\n cursor: pointer;\n position: relative;\n transition: all 0.5s;\n}\n\n.checkbox-wrapper-41 input[type=\"checkbox\"]::before {\n content: \"\";\n position: absolute;\n width: calc(var(--size) / 2);\n height: calc(var(--size) / 2);\n left: 0;\n top: 50%;\n transform: translateY(-50%) scale(0.7);\n border: 3px solid #222;\n border-radius: 30px 100px 100px 100px;\n background-color: #fde881;\n box-sizing: border-box;\n transition: all 0.5s;\n}\n\n.checkbox-wrapper-41 input[type=\"checkbox\"]:checked {\n background-color: #fde881;\n border-radius: 100px 100px 30px 100px;\n}\n\n.checkbox-wrapper-41 input[type=\"checkbox\"]:checked::before {\n left: 50%;\n background-color: #fff;\n border-radius: 100px 100px 30px 100px;\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"d09c2e","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":762,"cssLen":967,"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","css":"#lock {\n display: none;\n}\n.lock-label {\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgb(80, 80, 80);\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s;\n}\n.lock-wrapper {\n width: fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transform: rotate(-10deg);\n}\n.shackle {\n background-color: transparent;\n height: 9px;\n width: 14px;\n border-top-right-radius: 10px;\n border-top-left-radius: 10px;\n border-top: 3px solid white;\n border-left: 3px solid white;\n border-right: 3px solid white;\n transition: all 0.3s;\n}\n.lock-body {\n width: 15px;\n}\n#lock:checked + .lock-label .lock-wrapper .shackle {\n transform: rotateY(150deg) translateX(3px);\n transform-origin: right;\n}\n#lock:checked + .lock-label {\n background-color: rgb(167, 71, 245);\n}\n.lock-label:active {\n transform: scale(0.9);\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"065629","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":606,"cssLen":932,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\n \n\n","css":"#checkbox {\n display: none;\n}\n\n.switch {\n position: relative;\n width: 70px;\n height: 70px;\n background-color: rgb(99, 99, 99);\n border-radius: 50%;\n z-index: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid rgb(126, 126, 126);\n box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;\n}\n.switch svg {\n width: 1.2em;\n}\n.switch svg path {\n fill: rgb(48, 48, 48);\n}\n#checkbox:checked + .switch {\n box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,\n 0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,\n 0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),\n 0px 0px 5px rgb(151, 243, 255);\n border: 2px solid rgb(255, 255, 255);\n background-color: rgb(146, 180, 184);\n}\n#checkbox:checked + .switch svg {\n filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));\n}\n#checkbox:checked + .switch svg path {\n fill: rgb(255, 255, 255);\n}\n"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"e7bec0","snapshot":null,"tags":null,"title":"switch by Nawsome","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":3133,"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 display: block;\n background-color: black;\n width: 150px;\n height: 195px;\n box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;\n border-radius: 5px;\n padding: 20px;\n perspective: 700px;\n}\n\n.switch input {\n display: none;\n}\n\n.switch input:checked + .button {\n transform: translateZ(20px) rotateX(25deg);\n box-shadow: 0 -10px 20px #ff1818;\n}\n\n.switch input:checked + .button .light {\n animation: flicker 0.2s infinite 0.3s;\n}\n\n.switch input:checked + .button .shine {\n opacity: 1;\n}\n\n.switch input:checked + .button .shadow {\n opacity: 0;\n}\n\n.switch .button {\n display: block;\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n transform-origin: center center -20px;\n transform: translateZ(20px) rotateX(-25deg);\n transform-style: preserve-3d;\n background-color: #9b0621;\n height: 100%;\n position: relative;\n cursor: pointer;\n background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);\n background-repeat: no-repeat;\n}\n\n.switch .button::before {\n content: \"\";\n background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;\n background-repeat: no-repeat;\n width: 100%;\n height: 50px;\n transform-origin: top;\n transform: rotateX(-90deg);\n position: absolute;\n top: 0;\n}\n\n.switch .button::after {\n content: \"\";\n background-image: linear-gradient(#650000, #320000);\n width: 100%;\n height: 50px;\n transform-origin: top;\n transform: translateY(50px) rotateX(-90deg);\n position: absolute;\n bottom: 0;\n box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);\n}\n\n.switch .light {\n opacity: 0;\n animation: light-off 1s;\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);\n}\n\n.switch .dots {\n position: absolute;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);\n background-size: 10px 10px;\n}\n\n.switch .characters {\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;\n background-repeat: no-repeat;\n}\n\n.switch .shine {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n opacity: 0.3;\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;\n background-repeat: no-repeat;\n}\n\n.switch .shadow {\n transition: all 0.3s cubic-bezier(1, 0, 1, 1);\n opacity: 1;\n position: absolute;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));\n background-repeat: no-repeat;\n}\n\n@keyframes flicker {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0.8;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes light-off {\n 0% {\n opacity: 1;\n }\n\n 80% {\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"c6e733","snapshot":null,"tags":null,"title":"switch by mrhyddenn","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":236,"cssLen":2535,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n","css":"input {\n display: none\n}\n\n.on,.off {\n position: absolute;\n text-align: center;\n text-shadow: inset 1px 1px 1px black;\n width: 100%;\n}\n\n.on {\n color: #fff;\n top: 10px;\n transition: all 0.1s;\n font-family: sans-serif\n}\n\n.off {\n color: #636161;\n bottom: 5px;\n transition: all 0.1s;\n transform: scaleY(0.85);\n}\n\n.but {\n background-color: #000;\n border-radius: 400px 400px 400px 400px / 400px 400px 300px 300px;\n border-bottom-width: 0px;\n box-shadow: inset 8px 6px 5px -7px rgba(0,0,0,1)\n ,inset -8px 6px 5px -7px rgba(0,0,0,1)\n ,inset 0 -3px 2px -2px rgba(200,200,200,.5)\n ,0 3px 3px -2px rgba(0,0,0,1)\n ,inset 0 -230px 60px -200px rgba(255,255,255,.2)\n ,inset 0 220px 40px -200px rgba(0,0,0,.3);\n display: block;\n font-size: 17px;\n height: 60px;\n position: relative;\n transition: all 0.2s;\n width: 40px;\n}\n\n.back {\n background-color: #000;\n background-image: -webkit-linear-gradient(0deg, transparent 30%, transparent 65%)\n ,-webkit-linear-gradient(0deg, rgba(245, 245, 245, 0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);\n border-radius: 115px;\n box-sizing: border-box;\n height: 85px;\n padding: 4px 4px;\n transition: all 0.2s;\n width: 50px;\n}\n\ninput:checked + .back .on,input:checked + .back .off {\n text-shadow: inset 1px 1px 1px black;\n}\n\ninput:checked + .back .on {\n color: rgb(141, 141, 141);\n top: 10px;\n transform: scaleY(0.85);\n}\n\ninput:checked + .back .off {\n color: #fff;\n bottom: 5px;\n transform: scaleY(1);\n}\n\ninput:checked + .back .but {\n background: #232323;\n background-image: -webkit-radial-gradient(55% 18%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));\n border-radius: 410px 410px 410px 410px / 310px 310px 410px 410px;\n box-shadow: inset 8px -4px 5px -7px rgba(0,0,0,1)\n ,inset -8px -4px 5px -7px rgba(0,0,0,1)\n , 0 -3px 8px -4px rgba(250,250,250,.4)\n ,inset 0 3px 4px -2px rgba(10,10,10,1)\n ,inset 0 280px 40px -200px rgba(0,0,0,.2)\n ,inset 0 -200px 40px -200px rgba(180,180,180,.2);\n margin-top: 20px;\n}\n\ninput:checked + .back {\n background-image: -webkit-linear-gradient(90deg, black 30%, transparent 65%)\n ,-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);\n box-shadow: 28px 28px 28px -28px rgba(0,0,0,.1)\n ,-28px 28px 28px -22px rgba(0,0,0,.1)\n ,0 30px 30px 0px rgba(0,0,0,.2)\n ,inset 0 1px 2px 0 rgba(0,0,0,.6);\n padding: 2px 4px;\n}\n\n.l,.r {\n margin: 0 auto;\n text-align: center;\n}\n\n.round,#onoff,.back,.but,.on,.off {\n user-select: none;\n}"}]}},"actionData":null,"errors":null}