{"html":"

\n \n

\n","css":"/* The switch container */\n.switch {\n --transition: 300ms;\n --transition500: 500ms;\n --color-dark: #0c0f14;\n --color-darkGray: #21262e;\n --color-gray: #52555a;\n --color-offwhite: #cecece;\n --shadow-color: var(--color-dark);\n position: relative;\n display: flex;\n align-items: center;\n width: 60px;\n height: fit-content;\n background-color: var(--color-dark);\n border-radius: 30px;\n padding: 4px;\n transition: var(--transition500);\n user-select: none;\n cursor: pointer;\n overflow: hidden;\n}\n\n/* Svg styles */\n.switch .svg {\n transition: var(--transition);\n position: absolute;\n left: 5px;\n}\n.switch .moon {\n width: 18px;\n fill: var(--color-gray);\n opacity: 1;\n}\n\n.switch .sun {\n transform: translateY(-50%);\n width: 12px;\n height: 12px;\n border-radius: 50%;\n left: calc(100% - 21.5px);\n top: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n scale: 0.8;\n opacity: 0;\n}\n\n.switch .sun .dot {\n positon: relative;\n display: block;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--color-dark);\n background: white;\n z-index: 1;\n box-shadow: 11px 0px 0px var(--shadow-color),\n 10.3px 0px 0px var(--shadow-color), -11px 0px 0px var(--shadow-color),\n -10.3px 0px 0px var(--shadow-color), 0px -11px 0px var(--shadow-color),\n 0px -10.3px 0px var(--shadow-color), 0px 11px 0px var(--shadow-color),\n 0px 10.3px 0px var(--shadow-color), 8px 8px 0px var(--shadow-color),\n 7.3px 7.3px 0px var(--shadow-color), 8px -8px 0px var(--shadow-color),\n 7.3px -7.3px 0px var(--shadow-color), -8px -8px 0px var(--shadow-color),\n -7.3px -7.3px 0px var(--shadow-color), -8px 8px 0px var(--shadow-color),\n -7.3px 7.3px 0px var(--shadow-color);\n}\n\n.switch .sun .dot::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: white;\n border: 2px solid var(--color-dark);\n}\n\n/*checkbox styles */\n.switch .circle {\n appearance: none;\n position: relative;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n left: 0;\n background-color: var(--color-darkGray);\n border: 1px solid var(--color-darkGray);\n transition: var(--transition500);\n box-shadow: 1px 1px 20px 3px var(--color-darkGray);\n}\n\n.switch:has(.circle:checked) {\n background: var(--color-offwhite);\n}\n\n.switch .circle:hover {\n margin-left: 3px;\n}\n.switch .circle:checked:hover {\n margin-left: -3px;\n}\n\n.switch .circle:checked {\n left: calc(100% - 24px);\n background: white;\n border-color: white;\n box-shadow: 1px 1px 30px 12px white;\n}\n\n.switch:has(.circle:checked) > .sun {\n opacity: 1;\n}\n\n.switch:has(.circle:checked) > .moon {\n opacity: 0;\n}\n"}

honest-deer-30

👁 实时预览

📝 源代码