{"html":"\n","css":"/* The design is inspired from Galahhad*/\n\n.popup {\n --burger-line-width: 1.125em;\n --burger-line-height: 0.125em;\n --burger-offset: 0.625em;\n --burger-bg: #00bf63;\n --burger-color: #333;\n --burger-line-border-radius: 0.1875em;\n --burger-diameter: 3.125em;\n --burger-btn-border-radius: calc(var(--burger-diameter) / 2);\n --burger-line-transition: 0.3s;\n --burger-transition: all 0.1s ease-in-out;\n --burger-hover-scale: 1.1;\n --burger-active-scale: 0.95;\n --burger-enable-outline-color: var(--burger-bg);\n --burger-enable-outline-width: 0.125em;\n --burger-enable-outline-offset: var(--burger-enable-outline-width);\n /* nav */\n --nav-padding-x: 0.25em;\n --nav-padding-y: 0.625em;\n --nav-border-radius: 0.375em;\n --nav-border-color: #ccc;\n --nav-border-width: 0.0625em;\n --nav-shadow-color: rgba(0, 0, 0, 0.2);\n --nav-shadow-width: 0 1px 5px;\n --nav-bg: #eee;\n --nav-font-family: \"Poppins\", sans-serif;\n --nav-default-scale: 0.8;\n --nav-active-scale: 1;\n --nav-position-left: 0;\n --nav-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 /* title */\n --nav-title-size: 0.625em;\n --nav-title-color: #777;\n --nav-title-padding-x: 1rem;\n --nav-title-padding-y: 0.25em;\n /* nav button */\n --nav-button-padding-x: 1rem;\n --nav-button-padding-y: 0.375em;\n --nav-button-border-radius: 0.375em;\n --nav-button-font-size: 17px;\n --nav-button-hover-bg: #00bf63;\n --nav-button-hover-text-color: #fff;\n --nav-button-distance: 0.875em;\n /* underline */\n --underline-border-width: 0.0625em;\n --underline-border-color: #ccc;\n --underline-margin-y: 0.3125em;\n}\n\n/* popup settings 👆 */\n\n.popup {\n display: inline-block;\n text-rendering: optimizeLegibility;\n position: relative;\n}\n\n.popup input {\n display: none;\n}\n\n.burger {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background: var(--burger-bg);\n width: var(--burger-diameter);\n height: var(--burger-diameter);\n border-radius: var(--burger-btn-border-radius);\n border: none;\n cursor: pointer;\n overflow: hidden;\n transition: var(--burger-transition);\n outline: var(--burger-enable-outline-width) solid transparent;\n outline-offset: 0;\n}\n\n.popup-window {\n transform: scale(var(--nav-default-scale));\n visibility: hidden;\n opacity: 0;\n position: absolute;\n padding: var(--nav-padding-y) var(--nav-padding-x);\n background: var(--nav-bg);\n font-family: var(--nav-font-family);\n color: var(--nav-text-color);\n border-radius: var(--nav-border-radius);\n box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);\n border: var(--nav-border-width) solid var(--nav-border-color);\n top: calc(\n var(--burger-diameter) + var(--burger-enable-outline-width) +\n var(--burger-enable-outline-offset)\n );\n left: var(--nav-position-left);\n right: var(--nav-position-right);\n transition: var(--burger-transition);\n margin-top: 10px;\n}\n\n.popup-window legend {\n padding: var(--nav-title-padding-y) var(--nav-title-padding-x);\n margin: 0;\n color: var(--nav-title-color);\n font-size: var(--nav-title-size);\n text-transform: uppercase;\n}\n\n.popup-window ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.popup-window ul button {\n outline: none;\n width: 100%;\n border: none;\n background: none;\n display: flex;\n align-items: center;\n color: var(--burger-color);\n font-size: var(--nav-button-font-size);\n padding: var(--nav-button-padding-y) var(--nav-button-padding-x);\n white-space: nowrap;\n border-radius: var(--nav-button-border-radius);\n cursor: pointer;\n column-gap: var(--nav-button-distance);\n}\n\n.popup-window ul li:nth-child(1) svg,\n.popup-window ul li:nth-child(2) svg {\n color: #00bf63;\n}\n\n.popup-window ul li:nth-child(4) svg,\n.popup-window ul li:nth-child(5) svg {\n color: rgb(153, 153, 153);\n}\n\n.popup-window ul li:nth-child(7) svg {\n color: red;\n}\n\n.popup-window hr {\n margin: var(--underline-margin-y) 0;\n border: none;\n border-bottom: var(--underline-border-width) solid\n var(--underline-border-color);\n}\n\n/* actions */\n\n.popup-window ul button:hover,\n.popup-window ul button:focus-visible,\n.popup-window ul button:hover svg,\n.popup-window ul button:focus-visible svg {\n color: var(--nav-button-hover-text-color);\n background: var(--nav-button-hover-bg);\n}\n\n.burger:hover {\n transform: scale(var(--burger-hover-scale));\n}\n\n.burger:active {\n transform: scale(var(--burger-active-scale));\n}\n\n.burger:focus:not(:hover) {\n outline-color: var(--burger-enable-outline-color);\n outline-offset: var(--burger-enable-outline-offset);\n}\n\n.popup input:checked + .burger span:nth-child(1) {\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n}\n\n.popup input:checked + .burger span:nth-child(2) {\n bottom: 50%;\n transform: translateY(50%) rotate(-45deg);\n}\n\n.popup input:checked + .burger span:nth-child(3) {\n transform: translateX(\n calc(var(--burger-diameter) * -1 - var(--burger-line-width))\n );\n}\n\n.popup input:checked ~ nav {\n transform: scale(var(--nav-active-scale));\n visibility: visible;\n opacity: 1;\n}\n"}

fuzzy-warthog-26

👁 实时预览

📝 源代码