{"html":"

\n \n

\n          .code-editor  {
\n\n          \n            max-width:\n            300px;\n          
\n          \n            background-color:\n            #1d1e22;\n          
\n          \n             box-shadow:\n            0px 4px 30px  rgba(0, 0, 0, 0.5);\n          
\n          \n            border-radius:\n            8px;\n          
\n          }\n

","css":".code-editor {\n max-width: 300px;\n background-color: #1d1e22;\n box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);\n border-radius: 8px;\n padding: 2px;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 10px;\n}\n\n.title {\n font-family: Lato, sans-serif;\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 1.57px;\n color: rgb(212 212 212);\n}\n\n.icon {\n width: 20px;\n transition: .2s ease;\n}\n\n.icon:hover {\n cursor: pointer;\n border-radius: 50px;\n background-color: #6e7281;\n}\n\n.editor-content {\n margin: 0 10px 10px;\n color: white;\n}\n\n.property {\n margin-left: 30px;\n}\n\n.property:hover {\n cursor: text;\n}\n\n.editor-content .color-0 {\n color: rgb(86 156 214);\n}\n\n.editor-content .color-1 {\n color: rgb(182 206 168);\n}\n\n.editor-content .color-2 {\n color: rgb(156 220 254);\n}\n\n.editor-content .color-3 {\n color: rgb(207 146 120);\n}\n\n.color-preview-1,.color-preview-2 {\n height: 8px;\n width: 8px;\n border: 1px solid #fff;\n display: inline-block;\n margin-right: 3px;\n}\n\n.color-preview-1 {\n background-color: #1d1e22;\n}\n\n.color-preview-1 {\n background-color: rgba(0, 0, 0, 0.5);\n}"}

ugly-mule-59

👁 实时预览

📝 源代码