{"loaderData":{"0":null,"0-2":{"total":7189,"projects":[{"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}"},{"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}"}]}},"actionData":null,"errors":null}