{"loaderData":{"0":null,"0-2":{"total":6508,"projects":[{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"a450be","snapshot":null,"tags":null,"title":"switch by JaydipPrajapati1910","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2154,"cssLen":2061,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t\n\t\t\t\n\t\t \n\t\t \n\t\t \n \n\t

","css":".btn-container {\n display: table-cell;\n vertical-align: middle;\n text-align: center;\n}\n\n.btn-container i {\n display: inline-block;\n position: relative;\n top: -9px;\n}\n\nlabel {\n font-size: 13px;\n color: #424242;\n font-weight: 500;\n}\n\n.btn-color-mode-switch {\n display: inline-block;\n margin: 0px;\n position: relative;\n}\n\n.btn-color-mode-switch > label.btn-color-mode-switch-inner {\n margin: 0px;\n width: 140px;\n height: 30px;\n background: #E0E0E0;\n border-radius: 26px;\n overflow: hidden;\n position: relative;\n transition: all 0.3s ease;\n /*box-shadow: 0px 0px 8px 0px rgba(17, 17, 17, 0.34) inset;*/\n display: block;\n}\n\n.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {\n content: attr(data-on);\n position: absolute;\n font-size: 12px;\n font-weight: 500;\n top: 7px;\n right: 20px;\n}\n\n.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {\n content: attr(data-off);\n width: 70px;\n height: 16px;\n background: #fff;\n border-radius: 26px;\n position: absolute;\n left: 2px;\n top: 2px;\n text-align: center;\n transition: all 0.3s ease;\n box-shadow: 0px 0px 6px -2px #111;\n padding: 5px 0px;\n}\n\n.btn-color-mode-switch > .alert {\n display: none;\n background: #FF9800;\n border: none;\n color: #fff;\n}\n\n.btn-color-mode-switch input[type=\"checkbox\"] {\n cursor: pointer;\n width: 50px;\n height: 25px;\n opacity: 0;\n position: absolute;\n top: 0;\n z-index: 1;\n margin: 0px;\n}\n\n.btn-color-mode-switch input[type=\"checkbox\"]:checked + label.btn-color-mode-switch-inner {\n background: #151515;\n color: #fff;\n}\n\n.btn-color-mode-switch input[type=\"checkbox\"]:checked + label.btn-color-mode-switch-inner:after {\n content: attr(data-on);\n left: 68px;\n background: #3c3c3c;\n}\n\n.btn-color-mode-switch input[type=\"checkbox\"]:checked + label.btn-color-mode-switch-inner:before {\n content: attr(data-off);\n right: auto;\n left: 20px;\n}\n\n.btn-color-mode-switch input[type=\"checkbox\"]:checked ~ .alert {\n display: block;\n}\n\n.dark-preview {\n background: #0d0d0d;\n}\n\n.white-preview {\n background: #fff;\n}\n\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"ec6719","snapshot":null,"tags":null,"title":"switch by faxriddin20","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":148,"cssLen":1566,"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: red;\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:16.000Z","isPrivate":0,"projectId":"ebdec8","snapshot":null,"tags":null,"title":"switch by andrew-demchenk0","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":11784,"cssLen":994,"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 font-size: 17px;\n position: relative;\n display: inline-block;\n width: 70px;\n height: 34.5px;\n overflow: hidden;\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: #ccc;\n transition: .4s;\n border-radius: 30px;\n}\n\n.commutator {\n cursor: pointer;\n position: absolute;\n top: -29%;\n left: -14%;\n transition: .4s;\n}\n\n.iron-man {\n position: absolute;\n top: -27%;\n left: -100%;\n transform: rotate(90deg);\n}\n\n.input:checked + .slider {\n background-color: #2196F3;\n}\n\n.input:checked + .slider .commutator {\n transform: translateX(34.5px);\n opacity: 0;\n}\n\n.input:checked + .slider .iron-man {\n animation: show_5911 1.3s ease-in-out forwards;\n}\n\n@keyframes show_5911 {\n 0% {\n transform: translateX(0px) rotate(90deg);\n }\n\n 50% {\n transform: translateX(75px) rotate(90deg);\n }\n\n 100% {\n transform: translateX(79px) rotate(0deg);\n }\n}"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"11869e","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":109,"cssLen":828,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":" \n \n ","css":"/* To hide the checkbox */\n#checkboxInput {\n display: none;\n}\n\n.toggleSwitch {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 50px;\n height: 17px;\n background-color: rgb(82, 82, 82);\n border-radius: 20px;\n cursor: pointer;\n transition-duration: .2s;\n}\n\n.toggleSwitch::after {\n content: \"\";\n position: absolute;\n height: 22px;\n width: 22px;\n left: 0px;\n background-color: rgb(41, 41, 41);\n border-radius: 50%;\n transition-duration: .2s;\n border: 2px solid rgb(82, 82, 82);\n}\n\n#checkboxInput:checked+.toggleSwitch::after {\n transform: translateX(100%);\n transition-duration: .2s;\n border: 2px solid rgb(165, 255, 105);\n}\n/* Switch background change */\n#checkboxInput:checked+.toggleSwitch {\n background-color: rgb(165, 255, 105);\n transition-duration: .2s;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"fee68d","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":83,"cssLen":3021,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".switch {\n position: relative;\n width: 130px;\n height: 50px;\n margin: 0px;\n appearance: none;\n -webkit-appearance: none;\n background-color: rgb(4,52,73);\n background-size: cover;\n background-repeat: no-repeat;\n border-radius: 25px;\n transition: background-image .7s ease-in-out;\n outline: none;\n cursor: pointer;\n overflow: hidden;\n}\n\n.switch:checked {\n background-color: rgb(0, 195, 255);\n background-size: cover;\n transition: background-image 1s ease-in-out;\n}\n\n.switch:after {\n content: '';\n width: 46px;\n height: 46px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n left: 2px;\n top: 2px;\n transform: translateX(0px);\n animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);\n box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);\n}\n\n@keyframes off {\n 0% {\n transform: translateX(80px);\n width: 46px;\n }\n\n 50% {\n width: 75px;\n border-radius: 25px;\n }\n\n 100% {\n transform: translateX(0px);\n width: 46px;\n }\n}\n\n.switch:checked:after {\n animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);\n box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);\n}\n\n@keyframes on {\n 0% {\n transform: translateX(0px);\n width: 46px;\n }\n\n 50% {\n width: 75px;\n border-radius: 25px;\n }\n\n 100% {\n transform: translateX(80px);\n width: 46px;\n }\n}\n\n.switch:checked:before {\n content: '';\n width: 15px;\n height: 15px;\n border-radius: 50%;\n position: absolute;\n left: 15px;\n top: 5px;\n transform-origin: 53px 10px;\n background-color: transparent;\n box-shadow: 5px -1px 0px #fff;\n filter: blur(0px);\n animation: sun .7s forwards ease;\n}\n\n@keyframes sun {\n 0% {\n transform: rotate(170deg);\n background-color: transparent;\n box-shadow: 5px -1px 0px #fff;\n filter: blur(0px);\n }\n\n 50% {\n background-color: transparent;\n box-shadow: 5px -1px 0px #fff;\n filter: blur(0px);\n }\n\n 90% {\n background-color: #f5daaa;\n box-shadow: 0px 0px 10px #f5deb4,\n 0px 0px 20px #f5deb4,\n 0px 0px 30px #f5deb4,\n inset 0px 0px 2px #efd3a3;\n filter: blur(1px);\n }\n\n 100% {\n transform: rotate(0deg);\n background-color: #f5daaa;\n box-shadow: 0px 0px 10px #f5deb4,\n 0px 0px 20px #f5deb4,\n 0px 0px 30px #f5deb4,\n inset 0px 0px 2px #efd3a3;\n filter: blur(1px);\n }\n}\n\n.switch:before {\n content: '';\n width: 15px;\n height: 15px;\n border-radius: 50%;\n position: absolute;\n left: 15px;\n top: 5px;\n filter: blur(1px);\n background-color: #f5daaa;\n box-shadow: 0px 0px 10px #f5deb4,\n0px 0px 20px #f5deb4,\n0px 0px 30px #f5deb4,\n inset 0px 0px 2px #efd3a3;\n transform-origin: 53px 10px;\n animation: moon .7s forwards ease;\n}\n\n@keyframes moon {\n 0% {\n transform: rotate(0deg);\n filter: blur(1px);\n }\n\n 50% {\n filter: blur(1px);\n }\n\n 90% {\n background-color: transparent;\n box-shadow: 5px -1px 0px #fff;\n filter: blur(0px);\n }\n\n 100% {\n transform: rotate(170deg);\n background-color: transparent;\n box-shadow: 5px -1px 0px #fff;\n filter: blur(0px);\n }\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"00df6b","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":269,"cssLen":1242,"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":".flipswitch {\n position: relative;\n width: 86px;\n}\n\n.flipswitch input[type=checkbox] {\n display: none;\n}\n\n.flipswitch-label {\n display: block;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid #999999;\n border-radius: 8px;\n}\n\n.flipswitch-inner {\n width: 200%;\n margin-left: -100%;\n transition: margin 0.3s ease-in 0s;\n}\n\n.flipswitch-inner:before, .flipswitch-inner:after {\n float: left;\n width: 50%;\n height: 24px;\n padding: 0;\n line-height: 24px;\n font-size: 18px;\n color: white;\n font-family: Trebuchet, Arial, sans-serif;\n font-weight: bold;\n box-sizing: border-box;\n}\n\n.flipswitch-inner:before {\n content: \"ON\";\n padding-left: 12px;\n background-color: #256799;\n color: #FFFFFF;\n}\n\n.flipswitch-inner:after {\n content: \"OFF\";\n padding-right: 12px;\n background-color: #EBEBEB;\n color: #888888;\n text-align: right;\n}\n\n.flipswitch-switch {\n width: 31px;\n margin: -3.5px;\n background: #FFFFFF;\n border: 1px solid #999999;\n border-radius: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n right: 59px;\n transition: all 0.3s ease-in 0s;\n}\n\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {\n margin-left: 0;\n}\n\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {\n right: 0;\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"28e268","snapshot":null,"tags":null,"title":"switch by neitt0","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":861,"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: 8em;\n height: 4em;\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 transition: 0.4s;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 4em;\n width: 4em;\n background-color: white;\n transition: 0.2s;\n transition-timing-function: cubic-bezier(0.75, 0.02, 0.86, 1.31);\n transform-origin: bottom right;\n}\n\n.switch input:checked + .slider {\n background-color: #2196f3;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #2196f3;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(0em) rotate(90deg);\n}\n"},{"created":"2024-01-22T17:06:16.000Z","isPrivate":0,"projectId":"c770a9","snapshot":null,"tags":null,"title":"switch by guilhermeyohan","updated":"2024-01-22T17:06:16.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":84,"cssLen":914,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n ","css":"#toggle_checkbox {\n display: none;\n}\n\nlabel {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n display: block;\n width: 70px;\n height: 30px;\n margin: 0 auto;\n transform: translateY(-50%);\n cursor: pointer;\n}\n\nlabel:before {\n top: 2px;\n left: 3px;\n width: 26px;\n height: 26px;\n border: 3px solid rgb(2, 169, 38);\n}\n\nlabel:after {\n top: 0;\n right: 0;\n width: 70px;\n height: 30px;\n border: 3px solid #103445;\n}\n\nlabel:before, label:after {\n content: \"\";\n position: absolute;\n border-radius: 50px;\n box-sizing: border-box;\n transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width, 0.5s ease height, 0.5s ease border-color;\n}\n\n#toggle_checkbox:checked + label:before {\n top: 0;\n left: 0;\n width: 70px;\n height: 30px;\n border-color: #143240;\n}\n\n#toggle_checkbox:checked + label:after {\n top: 2px;\n right: 3px;\n width: 26px;\n height: 26px;\n border-color: red;\n}"},{"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}"}]}},"actionData":null,"errors":null}