{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"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 "},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"038b01","snapshot":null,"tags":null,"title":"switch by Yaya12085","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3142,"cssLen":1432,"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 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 rgba(77, 124, 255, 0.281);\n animation: animeBorder .3s linear alternate-reverse infinite;\n}\n\n.container input:checked + .button .icon svg {\n fill: rgb(77, 124, 255);\n animation: animeFill .3s linear alternate-reverse infinite;\n}\n\n@keyframes animeFill {\n to {\n fill: rgba(77, 124, 255, 0.642);\n }\n}\n\n@keyframes animeBorder {\n to {\n border-color: rgba(77, 124, 255, 0.137);\n }\n}"},{"created":"2024-01-22T17:06:09.000Z","isPrivate":0,"projectId":"c7459e","snapshot":null,"tags":null,"title":"switch by alexruix","updated":"2024-01-22T17:06:09.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":268,"cssLen":1169,"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":"/* 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: #B0B0B0;\n border: 1px solid #B0B0B0;\n transition: .4s;\n border-radius: 32px;\n outline: none;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 2rem;\n width: 2rem;\n border-radius: 50%;\n outline: 2px solid #B0B0B0;\n left: -1px;\n bottom: -1px;\n background-color: #fff;\n transition: transform .25s ease-in-out 0s;\n}\n\n.slider-icon {\n opacity: 0;\n height: 12px;\n width: 12px;\n stroke-width: 8;\n position: absolute;\n z-index: 999;\n stroke: #222222;\n right: 60%;\n top: 30%;\n transition: right ease-in-out .3s, opacity ease-in-out .15s;\n}\n\ninput:checked + .slider {\n background-color: #222222;\n}\n\ninput:checked + .slider .slider-icon {\n opacity: 1;\n right: 20%;\n}\n\ninput:checked + .slider:before {\n transform: translateX(1.5em);\n outline-color: #181818;\n}"},{"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}"}]}},"actionData":null,"errors":null}