{"html":"","css":"/* radio settings 👇 */\n\n.theme-popup {\n /* total */\n --total_text_color: #e0e0e0;\n --total_font_family: Menlo, Roboto Mono, monospace;\n /* button */\n --btn_bg: #3A3A3A;\n --btn_padding: 0.5em;\n --btn_height: 2em;\n --btn_border_radius: 0.3125em;\n --btn_outline_width: 0.0625em;\n --btn_outline_color: #A0A0A0;\n --btn_outline_offset: 0.0625em;\n --btn_gap: 0.3125em;\n /* list */\n --list_padding: 0.5em;\n --list_bg: var(--btn_bg);\n --list_border_radius: var(--btn_border_radius);\n --list_gap: 0.1875em;\n --list_btn_hover_bg: #5A5656;\n --list_btn_active: #b9b9b970;\n --list_btn_border_radius: 0.25em;\n --list_btn_padding: 0.35em 1em;\n --list_btn_gap: 0.4375em;\n --list_btn_outline_width: 0.0625em;\n --list_btn_outline_color: rgb(212, 210, 210);\n --list_offset: 0.35em;\n --list_btn_font_size: 14px;\n --list_position_left: 0;\n --list_position_right: unset;\n /* 👆 if you want to change sides just switch one property */\n /* from properties to \"unset\" and the other to 0 */\n}\n\n.theme-popup__button .theme-popup__icons svg,\n#light,\n#dark, \n#default, \n#checkbox,\n.theme-popup__list-container {\n display: none;\n}\n\n.theme-popup {\n color: var(--total_text_color);\n font-family: var(--total_font_family);\n position: relative;\n user-select: none;\n}\n\n.theme-popup__list-container {\n position: absolute;\n left: var(--list_position_left);\n right: var(--list_position_right);\n top: calc(var(--btn_height) + var(--list_offset));\n}\n\n.theme-popup__icons {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n}\n\n.theme-popup__button {\n line-height: var(--btn_height);\n background-color: var(--btn_bg);\n padding: 0 var(--btn_padding);\n display: inline-flex;\n align-items: center;\n column-gap: var(--btn_gap);\n border-radius: var(--btn_border_radius);\n border: none;\n color: inherit;\n font-family: inherit;\n outline: none;\n font-weight: bold;\n}\n\n.theme-popup__list {\n margin: 0;\n list-style-type: none;\n padding: var(--list_padding);\n border-radius: var(--list_border_radius);\n background-color: var(--list_bg);\n display: flex;\n flex-direction: column;\n row-gap: var(--list_gap);\n}\n\n.theme-popup__list label {\n display: flex;\n align-items: center;\n justify-content: start;\n column-gap: var(--list_btn_gap);\n padding: var(--list_btn_padding);\n border-radius: var(--list_btn_border_radius);\n white-space: nowrap;\n}\n\n.theme-popup__list label span {\n font-size: var(--list_btn_font_size);\n}\n\n/* actions */\n\n#checkbox:checked~.theme-popup__button {\n outline: var(--btn_outline_width) solid var(--btn_outline_color);\n outline-offset: var(--btn_outline_offset);\n}\n\n#checkbox:checked~.theme-popup__list-container {\n display: block;\n}\n\n.theme-popup__list label:hover,\n.theme-popup__button:hover,\n#checkbox:checked~.theme-popup__button {\n background-color: var(--list_btn_hover_bg);\n}\n\n#default:checked~.theme-popup__list-container label[for=\"default\"],\n#light:checked~.theme-popup__list-container label[for=\"light\"],\n#dark:checked~.theme-popup__list-container label[for=\"dark\"] {\n background-color: var(--list_btn_active);\n outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color);\n}\n\n#default:checked~label svg.default,\n#light:checked~label svg.sun,\n#dark:checked~label svg.moon {\n display: block;\n}"}

perfect-cheetah-72

👁 实时预览

📝 源代码