{"html":"

\n\n","css":".template {\n /* ------------------------------------------------------------ */\n /* fill */\n --fill: #0000;\n --fill-hover: hsla(0, 0%, 45%, 0.2);\n --fill-active: hsl(0, 0%, 10%);\n /* txt */\n --txt: #ccc;\n /*-------------------------*/\n --br: 0.625rem;\n --gap: 0.25rem;\n --popup-main-h: 20rem;\n /* ---------------------------------------------------------- */\n display: flex;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-size: 0.975rem;\n color: var(--txt);\n}\n\n/* button */\n.button {\n position: relative;\n display: inline-block;\n list-style-type: none;\n list-style: none;\n appearance: none;\n outline: 0;\n border: 0;\n cursor: pointer;\n text-decoration: none;\n font-size: inherit;\n color: inherit;\n white-space: nowrap;\n padding: calc(var(--gap) * 2) calc(var(--gap) * 8) calc(var(--gap) * 2)\n calc(var(--gap) * 4);\n text-align: left;\n background-color: var(--fill);\n border-radius: var(--br) calc(var(--br) / 2) calc(var(--br) / 2) var(--br);\n transition: background-color 500ms;\n}\n\n.button:hover {\n background-color: var(--fill-hover);\n}\n\n.button.quit:hover {\n background-color: #962434;\n}\n\n.button:focus,\n.button:active,\n.button.active {\n background-color: var(--fill-active);\n}\n\nhr {\n margin: 0.8rem;\n\n border: 1px dashed #313131;\n}\n\n/* popup */\n.popup {\n position: relative;\n}\n\n.popup-header {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n gap: calc(var(--gap) * 3);\n}\n\n.popup-main {\n position: absolute;\n top: 100%;\n right: 0;\n opacity: 0;\n margin-top: var(--gap);\n border-radius: var(--br);\n padding: 0 calc(var(--gap) * 1.5);\n background-color: hsl(0, 0%, 10%);\n box-shadow: hsl(0, 0%, 12%) 0px 0px 0px 1px;\n transition: 0.4s;\n overflow: hidden;\n height: var(--popup-main-h);\n}\n\n.popup:focus .popup-main {\n margin-top: 1rem;\n opacity: 1;\n}\n\n.list-box {\n scrollbar-width: none;\n scroll-behavior: smooth;\n overscroll-behavior: contain;\n overflow: auto;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: calc(var(--gap) * 2) 0 calc(var(--gap) * 3) 0;\n}\n"}

wicked-lionfish-36

👁 实时预览

📝 源代码