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

\n \n

","css":".toggle-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n border-radius: .5em;\n padding: .125em;\n background-image: linear-gradient(to bottom, #d5d5d5, #e8e8e8);\n box-shadow: 0 1px 1px rgb(255 255 255 / .6);\n /* resize for demo */\n font-size: 1.5em;\n}\n\n.toggle-checkbox {\n appearance: none;\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n /* fix em sizing */\n font: inherit;\n opacity: 0;\n cursor: pointer;\n}\n\n.toggle-container {\n display: flex;\n align-items: center;\n position: relative;\n border-radius: .375em;\n width: 3em;\n height: 1.5em;\n background-color: #e8e8e8;\n box-shadow: inset 0 0 .0625em .125em rgb(255 255 255 / .2), inset 0 .0625em .125em rgb(0 0 0 / .4);\n transition: background-color .4s linear;\n}\n\n.toggle-checkbox:checked + .toggle-container {\n background-color: #f3b519;\n}\n\n.toggle-button {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n left: .0625em;\n border-radius: .3125em;\n width: 1.375em;\n height: 1.375em;\n background-color: #e8e8e8;\n box-shadow: inset 0 -.0625em .0625em .125em rgb(0 0 0 / .1), inset 0 -.125em .0625em rgb(0 0 0 / .2), inset 0 .1875em .0625em rgb(255 255 255 / .3), 0 .125em .125em rgb(0 0 0 / .5);\n transition: left .4s;\n}\n\n.toggle-checkbox:checked + .toggle-container > .toggle-button {\n left: 1.5625em;\n}\n\n.toggle-button-circles-container {\n display: grid;\n grid-template-columns: repeat(3, min-content);\n gap: .125em;\n position: absolute;\n margin: 0 auto;\n}\n\n.toggle-button-circle {\n border-radius: 50%;\n width: .125em;\n height: .125em;\n background-image: radial-gradient(circle at 50% 0, #f5f5f5, #c4c4c4);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"401fe6","snapshot":null,"tags":null,"title":"switch by JkHuger","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":638,"cssLen":4281,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n","css":"/* Default */\n.theme {\n display: flex;\n align-items: center;\n -webkit-tap-highlight-color: transparent;\n}\n\n.theme__fill,\n.theme__icon {\n transition: 0.3s;\n}\n\n.theme__fill {\n background-color: var(--bg);\n display: block;\n mix-blend-mode: difference;\n position: fixed;\n inset: 0;\n height: 100%;\n transform: translateX(-100%);\n}\n\n.theme__icon,\n.theme__toggle {\n z-index: 1;\n}\n\n.theme__icon,\n.theme__icon-part {\n position: absolute;\n}\n\n.theme__icon {\n display: block;\n top: 0.5em;\n left: 0.5em;\n width: 1.5em;\n height: 1.5em;\n}\n\n.theme__icon-part {\n border-radius: 50%;\n box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n width: 1em;\n height: 1em;\n transition: box-shadow var(--transDur) ease-in-out,\n\t\topacity var(--transDur) ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n transform: scale(0.5);\n}\n\n.theme__icon-part ~ .theme__icon-part {\n background-color: hsl(0,0%,100%);\n border-radius: 0.05em;\n top: 50%;\n left: calc(50% - 0.05em);\n transform: rotate(0deg) translateY(0.5em);\n transform-origin: 50% 0;\n width: 0.1em;\n height: 0.2em;\n}\n\n.theme__icon-part:nth-child(3) {\n transform: rotate(45deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(4) {\n transform: rotate(90deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(5) {\n transform: rotate(135deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(6) {\n transform: rotate(180deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(7) {\n transform: rotate(225deg) translateY(0.45em);\n}\n\n.theme__icon-part:nth-child(8) {\n transform: rotate(270deg) translateY(0.5em);\n}\n\n.theme__icon-part:nth-child(9) {\n transform: rotate(315deg) translateY(0.5em);\n}\n\n.theme__label,\n.theme__toggle,\n.theme__toggle-wrap {\n position: relative;\n}\n\n.theme__toggle,\n.theme__toggle:before {\n display: block;\n}\n\n.theme__toggle {\n background-color: hsl(48,90%,85%);\n border-radius: 25% / 50%;\n box-shadow: 0 0 0 0.125em var(--primaryT);\n padding: 0.25em;\n width: 6em;\n height: 3em;\n -webkit-appearance: none;\n appearance: none;\n transition: background-color var(--transDur) ease-in-out,\n\t\tbox-shadow 0.15s ease-in-out,\n\t\ttransform var(--transDur) ease-in-out;\n}\n\n.theme__toggle:before {\n background-color: hsl(48,90%,55%);\n border-radius: 50%;\n content: \"\";\n width: 2.5em;\n height: 2.5em;\n transition: 0.3s;\n}\n\n.theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primary);\n outline: transparent;\n}\n\n/* Checked */\n.theme__toggle:checked {\n background-color: hsl(198,90%,15%);\n}\n\n.theme__toggle:checked:before,\n.theme__toggle:checked ~ .theme__icon {\n transform: translateX(3em);\n}\n\n.theme__toggle:checked:before {\n background-color: hsl(198,90%,55%);\n}\n\n.theme__toggle:checked ~ .theme__fill {\n transform: translateX(0);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {\n box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;\n transform: scale(1);\n top: 0.2em;\n left: -0.2em;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {\n opacity: 0;\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {\n transform: rotate(45deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {\n transform: rotate(90deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {\n transform: rotate(135deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {\n transform: rotate(180deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {\n transform: rotate(225deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {\n transform: rotate(270deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {\n transform: rotate(315deg) translateY(0.8em);\n}\n\n.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {\n transform: rotate(360deg) translateY(0.8em);\n}\n\n.theme__toggle-wrap {\n margin: 0 0.75em;\n}\n\n@supports selector(:focus-visible) {\n .theme__toggle:focus {\n box-shadow: 0 0 0 0.125em var(--primaryT);\n }\n\n .theme__toggle:focus-visible {\n box-shadow: 0 0 0 0.125em var(--primary);\n }\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"3a3d2b","snapshot":null,"tags":null,"title":"switch by vinodjangid07","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":109,"cssLen":864,"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: 80px;\n height: 40px;\n background-color: rgb(199, 199, 199);\n border-radius: 20px;\n cursor: pointer;\n transition-duration: .3s;\n}\n\n.toggleSwitch::after {\n content: \"\";\n position: absolute;\n height: 40px;\n width: 40px;\n left: 0px;\n background: conic-gradient(rgb(104, 104, 104),white,rgb(104, 104, 104),white,rgb(104, 104, 104));\n border-radius: 50%;\n transition-duration: .3s;\n box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);\n}\n\n#checkboxInput:checked+.toggleSwitch::after {\n transform: translateX(100%);\n transition-duration: .3s;\n}\n/* Switch background change */\n#checkboxInput:checked+.toggleSwitch {\n background-color: rgb(153, 197, 151);\n transition-duration: .3s;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"1d494c","snapshot":null,"tags":null,"title":"switch by csemszepp","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":220,"cssLen":2860,"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":".container {\n display: flex;\n align-items: center;\n justify-content: center;\n --hue: 220deg;\n --width: 15rem;\n --accent-hue: 22deg;\n --duration: 0.6s;\n --easing: cubic-bezier(1, 0, 1, 1);\n}\n\n.togglesw {\n display: none;\n}\n\n.switch {\n --shadow-offset: calc(var(--width) / 20);\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n width: var(--width);\n height: calc(var(--width) / 2.5);\n border-radius: var(--width);\n box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),\n inset -10px -10px 10px hsl(var(--hue) 20% 93%);\n}\n\n.indicator {\n content: '';\n position: absolute;\n width: 40%;\n height: 60%;\n transition: all var(--duration) var(--easing);\n box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),\n inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),\n inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);\n}\n\n.indicator.left {\n --hue: var(--accent-hue);\n overflow: hidden;\n left: 10%;\n border-radius: 100px 0 0 100px;\n background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));\n}\n\n.indicator.left::after {\n content: '';\n position: absolute;\n opacity: 0.6;\n width: 100%;\n height: 100%;\n}\n\n.indicator.right {\n right: 10%;\n border-radius: 0 100px 100px 0;\n background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));\n}\n\n.button {\n position: absolute;\n z-index: 1;\n width: 55%;\n height: 80%;\n left: 5%;\n border-radius: 100px;\n background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);\n transition: all var(--duration) var(--easing);\n box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),\n 2px 2px 6px hsl(var(--hue) 18% 50% / 40%),\n 10px 20px 10px hsl(var(--hue) 18% 50% / 40%),\n 20px 30px 30px hsl(var(--hue) 18% 50% / 60%);\n}\n\n.button::before, \n.button::after {\n content: '';\n position: absolute;\n top: 10%;\n width: 41%;\n height: 80%;\n border-radius: 100%;\n}\n\n.button::before {\n left: 5%;\n box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);\n background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);\n}\n\n.button::after {\n right: 5%;\n box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);\n background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);\n}\n\n.togglesw:checked ~ .button {\n left: 40%;\n}\n\n.togglesw:not(:checked) ~ .indicator.left,\n.togglesw:checked ~ .indicator.right {\n box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),\n inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),\n inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"e636f0","snapshot":null,"tags":null,"title":"switch by Galahhad","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1246,"cssLen":25446,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n

\n ","css":"/* REMASTERED */\n/* RTX-ON */\n/* completely redone toggle and droid */\n\n.bb8-toggle {\n --toggle-size: 16px;\n /* finally I removed the scale now everything depends on the font-size */\n /* --margin-top-for-head: 1.75em; */\n /* it's just in case 👆 */\n --toggle-width: 10.625em;\n --toggle-height: 5.625em;\n --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);\n --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)\n no-repeat;\n --bb8-diameter: 4.375em;\n --radius: 99em;\n --transition: 0.4s;\n --accent: #de7d2f;\n --bb8-bg: #fff;\n}\n\n.bb8-toggle,\n.bb8-toggle *,\n.bb8-toggle *::before,\n.bb8-toggle *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.bb8-toggle {\n cursor: pointer;\n margin-top: var(--margin-top-for-head);\n font-size: var(--toggle-size);\n}\n\n.bb8-toggle__checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: none;\n}\n\n.bb8-toggle__container {\n width: var(--toggle-width);\n height: var(--toggle-height);\n background: var(--toggle-bg);\n background-size: 100% 11.25em;\n background-position-y: -5.625em;\n border-radius: var(--radius);\n position: relative;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n position: absolute;\n top: calc(var(--toggle-offset) - 1.688em + 0.188em);\n left: var(--toggle-offset);\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n z-index: 2;\n}\n\n.bb8__head-container {\n position: relative;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n z-index: 2;\n -webkit-transform-origin: 1.25em 3.75em;\n -ms-transform-origin: 1.25em 3.75em;\n transform-origin: 1.25em 3.75em;\n}\n\n.bb8__head {\n overflow: hidden;\n margin-bottom: -0.188em;\n width: 2.5em;\n height: 1.688em;\n background: -o-linear-gradient(\n transparent 0.063em,\n dimgray 0.063em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.5em,\n transparent 0.5em 1.313em,\n silver 1.313em 1.438em,\n transparent 1.438em\n ),\n -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);\n background: -o-linear-gradient(\n transparent 0.063em,\n dimgray 0.063em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.5em,\n transparent 0.5em 1.313em,\n silver 1.313em 1.438em,\n transparent 1.438em\n ),\n -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);\n background: -o-linear-gradient(\n transparent 0.063em,\n dimgray 0.063em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.5em,\n transparent 0.5em 1.313em,\n silver 1.313em 1.438em,\n transparent 1.438em\n ),\n -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);\n background: -o-linear-gradient(\n transparent 0.063em,\n dimgray 0.063em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.5em,\n transparent 0.5em 1.313em,\n silver 1.313em 1.438em,\n transparent 1.438em\n ),\n -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent\n 1.25em),\n -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);\n background: linear-gradient(\n transparent 0.063em,\n dimgray 0.063em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.5em,\n transparent 0.5em 1.313em,\n silver 1.313em 1.438em,\n transparent 1.438em\n ),\n linear-gradient(\n 45deg,\n transparent 0.188em,\n var(--bb8-bg) 0.188em 1.25em,\n transparent 1.25em\n ),\n linear-gradient(\n -45deg,\n transparent 0.188em,\n var(--bb8-bg) 0.188em 1.25em,\n transparent 1.25em\n ),\n linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);\n border-radius: var(--radius) var(--radius) 0 0;\n position: relative;\n z-index: 1;\n -webkit-filter: drop-shadow(0 0.063em 0.125em gray);\n filter: drop-shadow(0 0.063em 0.125em gray);\n}\n\n.bb8__head::before {\n content: \"\";\n position: absolute;\n width: 0.563em;\n height: 0.563em;\n background: -o-radial-gradient(\n 0.25em 0.375em,\n 0.125em circle,\n red,\n transparent\n ),\n -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent\n 100%),\n -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);\n background: -o-radial-gradient(\n 0.25em 0.375em,\n 0.125em circle,\n red,\n transparent\n ),\n -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent\n 100%),\n -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);\n background: -o-radial-gradient(\n 0.25em 0.375em,\n 0.125em circle,\n red,\n transparent\n ),\n -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent\n 100%),\n -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);\n background: -o-radial-gradient(\n 0.25em 0.375em,\n 0.125em circle,\n red,\n transparent\n ),\n -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent\n 100%),\n -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);\n background: radial-gradient(\n 0.125em circle at 0.25em 0.375em,\n red,\n transparent\n ),\n radial-gradient(\n 0.063em circle at 0.375em 0.188em,\n var(--bb8-bg) 50%,\n transparent 100%\n ),\n linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);\n border-radius: var(--radius);\n top: 0.413em;\n left: 50%;\n -webkit-transform: translate(-50%);\n -ms-transform: translate(-50%);\n transform: translate(-50%);\n -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,\n 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;\n box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,\n 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;\n z-index: 1;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8__head::after {\n content: \"\";\n position: absolute;\n bottom: 0.375em;\n left: 0;\n width: 100%;\n height: 0.188em;\n background: -o-linear-gradient(\n left,\n var(--accent) 0.125em,\n transparent 0.125em 0.188em,\n var(--accent) 0.188em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.938em,\n transparent 0.938em 1em,\n var(--accent) 1em 1.125em,\n transparent 1.125em 1.875em,\n var(--accent) 1.875em 2em,\n transparent 2em 2.063em,\n var(--accent) 2.063em 2.25em,\n transparent 2.25em 2.313em,\n var(--accent) 2.313em 2.375em,\n transparent 2.375em 2.438em,\n var(--accent) 2.438em\n );\n background: -webkit-gradient(\n linear,\n left top,\n right top,\n color-stop(0.125em, var(--accent)),\n color-stop(0.125em, transparent),\n color-stop(0.188em, var(--accent)),\n color-stop(0.313em, transparent),\n color-stop(0.375em, var(--accent)),\n color-stop(0.938em, transparent),\n color-stop(1em, var(--accent)),\n color-stop(1.125em, transparent),\n color-stop(1.875em, var(--accent)),\n color-stop(2em, transparent),\n color-stop(2.063em, var(--accent)),\n color-stop(2.25em, transparent),\n color-stop(2.313em, var(--accent)),\n color-stop(2.375em, transparent),\n color-stop(2.438em, var(--accent))\n );\n background: linear-gradient(\n to right,\n var(--accent) 0.125em,\n transparent 0.125em 0.188em,\n var(--accent) 0.188em 0.313em,\n transparent 0.313em 0.375em,\n var(--accent) 0.375em 0.938em,\n transparent 0.938em 1em,\n var(--accent) 1em 1.125em,\n transparent 1.125em 1.875em,\n var(--accent) 1.875em 2em,\n transparent 2em 2.063em,\n var(--accent) 2.063em 2.25em,\n transparent 2.25em 2.313em,\n var(--accent) 2.313em 2.375em,\n transparent 2.375em 2.438em,\n var(--accent) 2.438em\n );\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8__antenna {\n position: absolute;\n -webkit-transform: translateY(-90%);\n -ms-transform: translateY(-90%);\n transform: translateY(-90%);\n width: 0.059em;\n border-radius: var(--radius) var(--radius) 0 0;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8__antenna:nth-child(1) {\n height: 0.938em;\n right: 0.938em;\n background: -o-linear-gradient(#000 0.188em, silver 0.188em);\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n color-stop(0.188em, #000),\n color-stop(0.188em, silver)\n );\n background: linear-gradient(#000 0.188em, silver 0.188em);\n}\n\n.bb8__antenna:nth-child(2) {\n height: 0.375em;\n left: 50%;\n -webkit-transform: translate(-50%, -90%);\n -ms-transform: translate(-50%, -90%);\n transform: translate(-50%, -90%);\n background: silver;\n}\n\n.bb8__body {\n width: 4.375em;\n height: 4.375em;\n background: var(--bb8-bg);\n border-radius: var(--radius);\n position: relative;\n overflow: hidden;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n z-index: 1;\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n transform: rotate(45deg);\n background: -webkit-gradient(\n linear,\n right top,\n left top,\n color-stop(4%, var(--bb8-bg)),\n color-stop(4%, var(--accent)),\n color-stop(10%, transparent),\n color-stop(90%, var(--accent)),\n color-stop(96%, var(--bb8-bg))\n ),\n -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),\n -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),\n -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));\n background: -o-linear-gradient(\n right,\n var(--bb8-bg) 4%,\n var(--accent) 4% 10%,\n transparent 10% 90%,\n var(--accent) 90% 96%,\n var(--bb8-bg) 96%\n ),\n -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%\n 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),\n -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent\n 2.188em),\n -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent\n 2.188em);\n background: linear-gradient(\n -90deg,\n var(--bb8-bg) 4%,\n var(--accent) 4% 10%,\n transparent 10% 90%,\n var(--accent) 90% 96%,\n var(--bb8-bg) 96%\n ),\n linear-gradient(\n var(--bb8-bg) 4%,\n var(--accent) 4% 10%,\n transparent 10% 90%,\n var(--accent) 90% 96%,\n var(--bb8-bg) 96%\n ),\n linear-gradient(\n to right,\n transparent 2.156em,\n silver 2.156em 2.219em,\n transparent 2.188em\n ),\n linear-gradient(\n transparent 2.156em,\n silver 2.156em 2.219em,\n transparent 2.188em\n );\n background-color: var(--bb8-bg);\n}\n\n.bb8__body::after {\n content: \"\";\n bottom: 1.5em;\n left: 0.563em;\n position: absolute;\n width: 0.188em;\n height: 0.188em;\n background: rgb(236, 236, 236);\n color: rgb(236, 236, 236);\n border-radius: 50%;\n -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,\n 2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;\n box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,\n 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;\n}\n\n.bb8__body::before {\n content: \"\";\n width: 2.625em;\n height: 2.625em;\n position: absolute;\n border-radius: 50%;\n z-index: 0.1;\n overflow: hidden;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n border: 0.313em solid var(--accent);\n background: -o-radial-gradient(\n center,\n 1em circle,\n rgb(236, 236, 236) 50%,\n transparent 51%\n ),\n -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),\n -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent\n 58%),\n -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)\n 58%);\n background: -o-radial-gradient(\n center,\n 1em circle,\n rgb(236, 236, 236) 50%,\n transparent 51%\n ),\n -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),\n -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent\n 58%),\n -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)\n 58%);\n background: radial-gradient(\n 1em circle at center,\n rgb(236, 236, 236) 50%,\n transparent 51%\n ),\n radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),\n -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),\n -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));\n background: radial-gradient(\n 1em circle at center,\n rgb(236, 236, 236) 50%,\n transparent 51%\n ),\n radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),\n linear-gradient(\n -90deg,\n transparent 42%,\n var(--accent) 42% 58%,\n transparent 58%\n ),\n linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);\n}\n\n.artificial__hidden {\n position: absolute;\n border-radius: inherit;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.bb8__shadow {\n content: \"\";\n width: var(--bb8-diameter);\n height: 20%;\n border-radius: 50%;\n background: #3a271c;\n -webkit-box-shadow: 0.313em 0 3.125em #3a271c;\n box-shadow: 0.313em 0 3.125em #3a271c;\n opacity: 0.25;\n position: absolute;\n bottom: 0;\n left: calc(var(--toggle-offset) - 0.938em);\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n -webkit-transform: skew(-70deg);\n -ms-transform: skew(-70deg);\n transform: skew(-70deg);\n z-index: 1;\n}\n\n.bb8-toggle__scenery {\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n position: relative;\n border-radius: inherit;\n}\n\n.bb8-toggle__scenery::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 30%;\n bottom: 0;\n background: #b18d71;\n z-index: 1;\n}\n\n.bb8-toggle__cloud {\n z-index: 1;\n position: absolute;\n border-radius: 50%;\n}\n\n.bb8-toggle__cloud:nth-last-child(1) {\n width: 0.875em;\n height: 0.625em;\n -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)\n drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);\n filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)\n drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);\n right: 1.875em;\n top: 2.813em;\n background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);\n background: -webkit-gradient(\n linear,\n left bottom,\n right top,\n from(#ffffffae),\n to(#ffffffae)\n );\n background: linear-gradient(to top right, #ffffffae, #ffffffae);\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8-toggle__cloud:nth-last-child(2) {\n top: 0.625em;\n right: 4.375em;\n width: 0.875em;\n height: 0.375em;\n background: #dfdedeae;\n -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)\n drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);\n filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)\n drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);\n -webkit-transition: 0.6s;\n -o-transition: 0.6s;\n transition: 0.6s;\n}\n\n.bb8-toggle__cloud:nth-last-child(3) {\n top: 1.25em;\n right: 0.938em;\n width: 0.875em;\n height: 0.375em;\n background: #ffffffae;\n -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)\n drop-shadow(-0.625em 0.313em #ffffffae);\n filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)\n drop-shadow(-0.625em 0.313em #ffffffae);\n -webkit-transition: 0.8s;\n -o-transition: 0.8s;\n transition: 0.8s;\n}\n\n.gomrassen,\n.hermes,\n.chenini {\n position: absolute;\n border-radius: var(--radius);\n background: -o-linear-gradient(#fff, #6e8ea2);\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(#fff),\n to(#6e8ea2)\n );\n background: linear-gradient(#fff, #6e8ea2);\n top: 100%;\n}\n\n.gomrassen {\n left: 0.938em;\n width: 1.875em;\n height: 1.875em;\n -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;\n box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.gomrassen::before,\n.gomrassen::after {\n content: \"\";\n position: absolute;\n border-radius: inherit;\n -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);\n box-shadow: inset 0 0 0.063em rgb(140, 162, 169);\n background: rgb(184, 196, 200);\n}\n\n.gomrassen::before {\n left: 0.313em;\n top: 0.313em;\n width: 0.438em;\n height: 0.438em;\n}\n\n.gomrassen::after {\n width: 0.25em;\n height: 0.25em;\n left: 1.25em;\n top: 0.75em;\n}\n\n.hermes {\n left: 3.438em;\n width: 0.625em;\n height: 0.625em;\n -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;\n box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;\n -webkit-transition: 0.6s;\n -o-transition: 0.6s;\n transition: 0.6s;\n}\n\n.chenini {\n left: 4.375em;\n width: 0.5em;\n height: 0.5em;\n -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;\n box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;\n -webkit-transition: 0.8s;\n -o-transition: 0.8s;\n transition: 0.8s;\n}\n\n.tatto-1,\n.tatto-2 {\n position: absolute;\n width: 1.25em;\n height: 1.25em;\n border-radius: var(--radius);\n}\n\n.tatto-1 {\n background: #fefefe;\n right: 3.125em;\n top: 0.625em;\n -webkit-box-shadow: 0 0 0.438em #fdf4e1;\n box-shadow: 0 0 0.438em #fdf4e1;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.tatto-2 {\n background: -o-linear-gradient(#e6ac5c, #d75449);\n background: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(#e6ac5c),\n to(#d75449)\n );\n background: linear-gradient(#e6ac5c, #d75449);\n right: 1.25em;\n top: 2.188em;\n -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;\n box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;\n -webkit-transition: 0.7s;\n -o-transition: 0.7s;\n transition: 0.7s;\n}\n\n.bb8-toggle__star {\n position: absolute;\n width: 0.063em;\n height: 0.063em;\n background: #fff;\n border-radius: var(--radius);\n -webkit-filter: drop-shadow(0 0 0.063em #fff);\n filter: drop-shadow(0 0 0.063em #fff);\n color: #fff;\n top: 100%;\n}\n\n.bb8-toggle__star:nth-child(1) {\n left: 3.75em;\n -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,\n -3.125em 1.875em, 1.25em 2.813em;\n box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,\n -3.125em 1.875em, 1.25em 2.813em;\n -webkit-transition: 0.2s;\n -o-transition: 0.2s;\n transition: 0.2s;\n}\n\n.bb8-toggle__star:nth-child(2) {\n left: 4.688em;\n -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,\n -3.125em 1.25em, 1.25em -1.563em;\n box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,\n -3.125em 1.25em, 1.25em -1.563em;\n -webkit-transition: 0.3s;\n -o-transition: 0.3s;\n transition: 0.3s;\n}\n\n.bb8-toggle__star:nth-child(3) {\n left: 5.313em;\n -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,\n -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;\n box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,\n -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.bb8-toggle__star:nth-child(4) {\n left: 1.875em;\n width: 0.125em;\n height: 0.125em;\n -webkit-transition: 0.5s;\n -o-transition: 0.5s;\n transition: 0.5s;\n}\n\n.bb8-toggle__star:nth-child(5) {\n left: 5em;\n width: 0.125em;\n height: 0.125em;\n -webkit-transition: 0.6s;\n -o-transition: 0.6s;\n transition: 0.6s;\n}\n\n.bb8-toggle__star:nth-child(6) {\n left: 2.5em;\n width: 0.125em;\n height: 0.125em;\n -webkit-transition: 0.7s;\n -o-transition: 0.7s;\n transition: 0.7s;\n}\n\n.bb8-toggle__star:nth-child(7) {\n left: 3.438em;\n width: 0.125em;\n height: 0.125em;\n -webkit-transition: 0.8s;\n -o-transition: 0.8s;\n transition: 0.8s;\n}\n\n/* actions */\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(1) {\n top: 0.625em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(2) {\n top: 1.875em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(3) {\n top: 1.25em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(4) {\n top: 3.438em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(5) {\n top: 3.438em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(6) {\n top: 0.313em;\n}\n\n.bb8-toggle__checkbox:checked\n + .bb8-toggle__container\n .bb8-toggle__star:nth-child(7) {\n top: 1.875em;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {\n right: -100%;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {\n top: 0.938em;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {\n top: 2.5em;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {\n top: 2.75em;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container {\n background-position-y: 0;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {\n top: 100%;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {\n top: 100%;\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {\n left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {\n left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);\n -webkit-transform: skew(70deg);\n -ms-transform: skew(70deg);\n transform: skew(70deg);\n}\n\n.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(225deg);\n}\n\n.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {\n left: 100%;\n}\n\n.bb8-toggle__checkbox:not(:checked):hover\n + .bb8-toggle__container\n .bb8__antenna:nth-child(1) {\n right: 1.5em;\n}\n\n.bb8-toggle__checkbox:hover\n + .bb8-toggle__container\n .bb8__antenna:nth-child(2) {\n left: 0.938em;\n}\n\n.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {\n background-position: 1.375em 0;\n}\n\n.bb8-toggle__checkbox:checked:hover\n + .bb8-toggle__container\n .bb8__head::before {\n left: 0;\n}\n\n.bb8-toggle__checkbox:checked:hover\n + .bb8-toggle__container\n .bb8__antenna:nth-child(2) {\n left: calc(100% - 0.938em);\n}\n\n.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {\n background-position: -1.375em 0;\n}\n\n.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {\n -webkit-transform: rotate(25deg);\n -ms-transform: rotate(25deg);\n transform: rotate(25deg);\n}\n\n.bb8-toggle__checkbox:checked:active\n + .bb8-toggle__container\n .bb8__head-container {\n -webkit-transform: rotate(-25deg);\n -ms-transform: rotate(-25deg);\n transform: rotate(-25deg);\n}\n\n.bb8:hover .bb8__head::before,\n.bb8:hover .bb8__antenna:nth-child(2) {\n left: 50% !important;\n}\n\n.bb8:hover .bb8__antenna:nth-child(1) {\n right: 0.938em !important;\n}\n\n.bb8:hover .bb8__head::after {\n background-position: 0 0 !important;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"8450be","snapshot":null,"tags":null,"title":"switch by Custyyyy","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":93,"cssLen":1808,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".check {\n position: relative;\n background: linear-gradient(90deg, #f19af3, #f099b5);\n line-height: 0;\n font-size: 25px;\n}\n\n.check input[type=\"checkbox\"],\n.check label,\n.check label::before,\n.check label::after {\n appearance: none;\n display: inline-block;\n font-size: inherit;\n border-radius: 1em;\n border: 0;\n transition: .35s ease-in-out;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n.check {\n appearance: none;\n display: inline-block;\n border-radius: 1em;\n border: 0;\n transition: .35s ease-in-out;\n box-sizing: border-box;\n cursor: pointer;\n}\n\n.check label {\n width: 2.2em;\n height: 1em;\n background: #d7d7d7;\n overflow: hidden;\n}\n\n.check input[type=\"checkbox\"] {\n position: absolute;\n z-index: 1;\n width: .8em;\n height: .8em;\n top: .1em;\n left: .1em;\n background: linear-gradient(45deg, #dedede, #ffffff);\n box-shadow: 0 6px 7px rgba(0,0,0,0.3);\n outline: none;\n}\n\n.check input[type=\"checkbox\"]:checked {\n left: 1.3em;\n}\n\n.check input[type=\"checkbox\"]:checked + label {\n background: transparent;\n}\n\n.check label::before,\n.check label::after {\n content: \"· ·\";\n position: absolute;\n overflow: hidden;\n left: .50em;\n top: .5em;\n height: 1em;\n letter-spacing: -.04em;\n color: #9b9b9b;\n font-family: \"Times New Roman\", serif;\n z-index: 2;\n font-size: .6em;\n border-radius: 0;\n transform-origin: 0 0 -.5em;\n backface-visibility: hidden;\n}\n\n.check label::after {\n content: \"?\";\n top: .65em;\n left: .6em;\n height: .1em;\n width: .35em;\n font-size: .2em;\n transform-origin: 0 0 -.4em;\n}\n\n.check input[type=\"checkbox\"]:checked + label::before,\n.check input[type=\"checkbox\"]:checked + label::after {\n left: 2.55em;\n top: .4em;\n line-height: .1em;\n transform: rotateY(360deg);\n}\n\n.check input[type=\"checkbox\"]:checked + label::after {\n height: .16em;\n top: .55em;\n left: 2.6em;\n font-size: .6em;\n line-height: 0;\n}\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"c43b3d","snapshot":null,"tags":null,"title":"switch by Galahhad","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3747,"cssLen":7891,"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":".theme-switch {\n --toggle-size: 30px;\n /* the size is adjusted using font-size,\n this is not transform scale,\n so you can choose any size */\n --container-width: 5.625em;\n --container-height: 2.5em;\n --container-radius: 6.25em;\n /* radius 0 - minecraft mode :) */\n --container-light-bg: #3D7EAE;\n --container-night-bg: #1D1F2C;\n --circle-container-diameter: 3.375em;\n --sun-moon-diameter: 2.125em;\n --sun-bg: #ECCA2F;\n --moon-bg: #C4C9D1;\n --spot-color: #959DB1;\n --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);\n --stars-color: #fff;\n --clouds-color: #F3FDFF;\n --back-clouds-color: #AACADF;\n --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);\n --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);\n}\n\n.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-size: var(--toggle-size);\n}\n\n.theme-switch__container {\n width: var(--container-width);\n height: var(--container-height);\n background-color: var(--container-light-bg);\n border-radius: var(--container-radius);\n overflow: hidden;\n cursor: pointer;\n -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);\n box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n position: relative;\n}\n\n.theme-switch__container::before {\n content: \"\";\n position: absolute;\n z-index: 1;\n inset: 0;\n -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;\n box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;\n border-radius: var(--container-radius)\n}\n\n.theme-switch__checkbox {\n display: none;\n}\n\n.theme-switch__circle-container {\n width: var(--circle-container-diameter);\n height: var(--circle-container-diameter);\n background-color: rgba(255, 255, 255, 0.1);\n position: absolute;\n left: var(--circle-container-offset);\n top: var(--circle-container-offset);\n border-radius: var(--container-radius);\n -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);\n box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-transition: var(--circle-transition);\n -o-transition: var(--circle-transition);\n transition: var(--circle-transition);\n pointer-events: none;\n}\n\n.theme-switch__sun-moon-container {\n pointer-events: auto;\n position: relative;\n z-index: 2;\n width: var(--sun-moon-diameter);\n height: var(--sun-moon-diameter);\n margin: auto;\n border-radius: var(--container-radius);\n background-color: var(--sun-bg);\n -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;\n box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;\n -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));\n filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));\n overflow: hidden;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n.theme-switch__moon {\n -webkit-transform: translateX(100%);\n -ms-transform: translateX(100%);\n transform: translateX(100%);\n width: 100%;\n height: 100%;\n background-color: var(--moon-bg);\n border-radius: inherit;\n -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;\n box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n position: relative;\n}\n\n.theme-switch__spot {\n position: absolute;\n top: 0.75em;\n left: 0.312em;\n width: 0.75em;\n height: 0.75em;\n border-radius: var(--container-radius);\n background-color: var(--spot-color);\n -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;\n box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;\n}\n\n.theme-switch__spot:nth-of-type(2) {\n width: 0.375em;\n height: 0.375em;\n top: 0.937em;\n left: 1.375em;\n}\n\n.theme-switch__spot:nth-last-of-type(3) {\n width: 0.25em;\n height: 0.25em;\n top: 0.312em;\n left: 0.812em;\n}\n\n.theme-switch__clouds {\n width: 1.25em;\n height: 1.25em;\n background-color: var(--clouds-color);\n border-radius: var(--container-radius);\n position: absolute;\n bottom: -0.625em;\n left: 0.312em;\n -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);\n box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);\n -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);\n -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);\n transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);\n}\n\n.theme-switch__stars-container {\n position: absolute;\n color: var(--stars-color);\n top: -100%;\n left: 0.312em;\n width: 2.75em;\n height: auto;\n -webkit-transition: var(--transition);\n -o-transition: var(--transition);\n transition: var(--transition);\n}\n\n/* actions */\n\n.theme-switch__checkbox:checked + .theme-switch__container {\n background-color: var(--container-night-bg);\n}\n\n.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {\n left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));\n}\n\n.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {\n left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)\n}\n\n.theme-switch__circle-container:hover {\n left: calc(var(--circle-container-offset) + 0.187em);\n}\n\n.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {\n -webkit-transform: translate(0);\n -ms-transform: translate(0);\n transform: translate(0);\n}\n\n.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {\n bottom: -4.062em;\n}\n\n.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"30301d","snapshot":null,"tags":null,"title":"switch by JaydipPrajapati1910","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":176,"cssLen":2247,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t

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

\n\t\t\t

\n\t\t

\n\t

\n\n","css":".toggle > div {\n position: relative;\n padding: 10px;\n width: 150px;\n height: 75px;\n border-radius: 50px;\n box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1);\n background: rgb(189, 191, 193);\n background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%);\n}\n\n.toggle > div > input[type=checkbox] {\n position: absolute;\n opacity: 0;\n top: -3px;\n left: 17px;\n width: 130px;\n height: 55px;\n z-index: 5;\n}\n\n.toggle > div > input[type=checkbox] ~ div {\n width: 130px;\n height: 55px;\n border-radius: 50px;\n border: 1px solid #979797;\n box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);\n background: rgb(253, 252, 251);\n background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%);\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div {\n box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);\n background: rgb(229, 229, 229);\n background: linear-gradient(to right, rgba(229, 229, 229, 1) 39%, rgba(253, 252, 251, 1) 63%);\n}\n\n.toggle > div > input[type=checkbox] ~ div:before {\n content: attr(data-unchecked);\n display: block;\n position: absolute;\n border-radius: 10px;\n top: 27px;\n left: 30px;\n}\n\n.toggle > div > input[type=checkbox] ~ div:after {\n content: attr(data-checked);\n color: #df0000;\n text-shadow: 0 1px 0 #fff, 0px 0 7px #df0000;\n filter: dropshadow(color=#df0000, offx=0, offy=0);\n display: block;\n position: absolute;\n border-radius: 10px;\n top: 27px;\n left: 100px;\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div:before {\n color: #119400;\n text-shadow: 0 1px 0 #fff, 0px 0 7px #007a08;\n filter: dropshadow(color=#007a08, offx=0, offy=0);\n}\n\n.toggle > div > input[type=checkbox]:checked ~ div:after {\n color: #000;\n text-shadow: none;\n filter: dropshadow(none);\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"2eb92b","snapshot":null,"tags":null,"title":"switch by Galahhad","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":107,"cssLen":790,"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.slider {\n width: 60px;\n height: 30px;\n background-color: lightgray;\n border-radius: 20px;\n overflow: hidden;\n display: flex;\n align-items: center;\n border: 4px solid transparent;\n transition: .3s;\n box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;\n cursor: pointer;\n}\n\n.slider::before {\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n transform: translateX(-30px);\n border-radius: 20px;\n transition: .3s;\n box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);\n}\n\n.checkbox:checked ~ .slider::before {\n transform: translateX(30px);\n box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);\n}\n\n.checkbox:checked ~ .slider {\n background-color: #2196F3;\n}\n\n.checkbox:active ~ .slider::before {\n transform: translate(0);\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"5fb567","snapshot":null,"tags":null,"title":"switch by guilhermeyohan","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":126,"cssLen":1145,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".checkbox-apple {\n position: relative;\n width: 50px;\n height: 25px;\n margin: 20px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.checkbox-apple label {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 25px;\n border-radius: 50px;\n background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.checkbox-apple label:after {\n content: '';\n position: absolute;\n top: 1px;\n left: 1px;\n width: 23px;\n height: 23px;\n border-radius: 50%;\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n transition: all 0.3s ease;\n}\n\n.checkbox-apple input[type=\"checkbox\"]:checked + label {\n background: linear-gradient(to bottom, #4cd964, #5de24e);\n}\n\n.checkbox-apple input[type=\"checkbox\"]:checked + label:after {\n transform: translateX(25px);\n}\n\n.checkbox-apple label:hover {\n background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);\n}\n\n.checkbox-apple label:hover:after {\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.yep {\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 25px;\n}"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"64524c","snapshot":null,"tags":null,"title":"switch by MuhammadHasann","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":247,"cssLen":1195,"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":".toggle-cont {\n width: 100px;\n height: 50px;\n border-radius: 9999px;\n}\n\n.toggle-cont .toggle-input {\n display: none;\n}\n\n.toggle-cont .toggle-label {\n cursor: pointer;\n position: relative;\n display: inline-block;\n padding: 6px;\n width: 100%;\n height: 100%;\n background: #272727;\n border-radius: 9999px;\n box-sizing: content-box;\n box-shadow: 0px 0px 16px -8px #fefefe;\n}\n\n.toggle-cont .toggle-label .cont-label-play {\n position: relative;\n width: 50px;\n aspect-ratio: 1 / 1;\n background: #5e5e5e;\n border-radius: 9999px;\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.toggle-cont .toggle-input:checked + .toggle-label .cont-label-play {\n background: #f43f5e;\n transform: translateX(50px);\n}\n\n.toggle-cont .toggle-label .label-play {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: inline-block;\n width: 24px;\n aspect-ratio: 1 / 1;\n background: #fefefe;\n border-radius: 4px;\n clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.toggle-cont .toggle-input:checked + .toggle-label .label-play {\n width: 20px;\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}\n"},{"created":"2024-01-22T17:06:11.000Z","isPrivate":0,"projectId":"b4ab42","snapshot":null,"tags":null,"title":"switch by PriyanshuGupta28","updated":"2024-01-22T17:06:11.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":396,"cssLen":1406,"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","css":".checkbox-wrapper-51 input[type=\"checkbox\"] {\n visibility: hidden;\n display: none;\n}\n\n.checkbox-wrapper-51 .toggle {\n position: relative;\n display: block;\n width: 42px;\n height: 24px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transform: translate3d(0, 0, 0);\n}\n\n.checkbox-wrapper-51 .toggle:before {\n content: \"\";\n position: relative;\n top: 1px;\n left: 1px;\n width: 40px;\n height: 22px;\n display: block;\n background: #c8ccd4;\n border-radius: 12px;\n transition: background 0.2s ease;\n}\n\n.checkbox-wrapper-51 .toggle span {\n position: absolute;\n top: 0;\n left: 0;\n width: 24px;\n height: 24px;\n display: block;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 2px 6px rgba(154,153,153,0.75);\n transition: all 0.2s ease;\n}\n\n.checkbox-wrapper-51 .toggle span svg {\n margin: 7px;\n fill: none;\n}\n\n.checkbox-wrapper-51 .toggle span svg path {\n stroke: #c8ccd4;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 24;\n stroke-dashoffset: 0;\n transition: all 0.5s linear;\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle:before {\n background: #1175c7;\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle span {\n transform: translateX(18px);\n}\n\n.checkbox-wrapper-51 input[type=\"checkbox\"]:checked + .toggle span path {\n stroke: #000000;\n stroke-dasharray: 25;\n stroke-dashoffset: 25;\n}"}]}},"actionData":null,"errors":null}