{"html":"","css":"/* The design is inspired from the mockapi.io */\n\n.popup {\n --burger-line-width: 1.125em;\n --burger-line-height: 0.125em;\n --burger-offset: 0.625em;\n --burger-bg: rgba(0, 0, 0, .15);\n --burger-color: #333;\n --burger-line-border-radius: 0.1875em;\n --burger-diameter: 2.125em;\n --burger-btn-border-radius: calc(var(--burger-diameter) / 2);\n --burger-line-transition: .3s;\n --burger-transition: all .1s ease-in-out;\n --burger-hover-scale: 1.1;\n --burger-active-scale: .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, .2);\n --nav-shadow-width: 0 1px 5px;\n --nav-bg: #eee;\n --nav-font-family: Menlo, Roboto Mono, monospace;\n --nav-default-scale: .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: 12px;\n --nav-button-hover-bg: #6495ed;\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.burger span {\n height: var(--burger-line-height);\n width: var(--burger-line-width);\n background: var(--burger-color);\n border-radius: var(--burger-line-border-radius);\n position: absolute;\n transition: var(--burger-line-transition);\n}\n\n.burger span:nth-child(1) {\n top: var(--burger-offset);\n}\n\n.burger span:nth-child(2) {\n bottom: var(--burger-offset);\n}\n\n.burger span:nth-child(3) {\n top: 50%;\n transform: translateY(-50%);\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(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset));\n left: var(--nav-position-left);\n right: var(--nav-position-right);\n transition: var(--burger-transition);\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: cornflowerblue;\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 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(calc(var(--burger-diameter) * -1 - var(--burger-line-width)));\n}\n\n.popup input:checked~nav {\n transform: scale(var(--nav-active-scale));\n visibility: visible;\n opacity: 1;\n}"}

old-falcon-43

👁 实时预览

📝 源代码