1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>test</title> 7 <style> 8 #visual_area { 9 background-color: #808000; 10 width: 100; 11 height: 100; 12 position: absolute; 13 left: 0px; 14 } 15 #attribute_area { 16 background-color: var(--vscode-editor-background, #000000); 17 position: absolute; 18 width: 420px; 19 height: 100%; 20 right: 0px; 21 opacity: 0.9; 22 } 23 24 .div_title { 25 background-color: var(--vscode-editor-background, #313131); 26 color: var(--vscode-editor-foreground, #ffffff); 27 width: 420px; 28 height: 48px; 29 margin-top: 4px; 30 font-family: "Microsoft YaHei"; 31 display: flex; 32 } 33 34 .att_title { 35 color: var(--vscode-editor-foreground, #ffffff);; 36 font-family: "Microsoft YaHei"; 37 text-align: center; 38 margin-left: 16px; 39 line-height: 48px; 40 display: block; 41 white-space: nowrap; 42 overflow: hidden; 43 text-overflow: ellipsis; 44 } 45 46 .att_line { 47 width: 420px; 48 height: 4px; 49 margin-top: 0px; 50 background-color: #000000; 51 } 52 53 .input_text_readonly_top { 54 color: var(--vscode-editor-foreground, #ffffff); 55 display: inline-block; 56 font-family: "Microsoft YaHei"; 57 text-align: center; 58 font-size: 14px; 59 margin-top: 24px; 60 margin-left: 12px; 61 opacity: 0.6; 62 } 63 64 .input_text_readonly { 65 color: var(--vscode-editor-foreground, #ffffff); 66 display: inline-block; 67 font-family: "Microsoft YaHei"; 68 text-align: center; 69 font-size: 14px; 70 margin-top: 16px; 71 margin-left: 12px; 72 opacity: 0.6; 73 } 74 75 .input_text { 76 background-color: var(--vscode-editor-background, #000000); 77 color: var(--vscode-editor-foreground, #ffffff); 78 width: 372px; 79 height: 32px; 80 font-size: 14px; 81 margin-left: 12px; 82 font-family: "Microsoft YaHei"; 83 border-radius: 8px; 84 border: 1px solid #555555; 85 opacity: 0.9; 86 margin-top: 8px; 87 padding-left: 5px; 88 padding-right: 5px; 89 } 90 91 .input_text:hover { 92 outline: none; 93 width: 372px; 94 height: 32px; 95 border-color: var(--vscode-focusBorder, #272727); 96 } 97 98 .input_text:disabled { 99 color: var(--vscode-disabledForeground, #d4d4d4); 100 } 101 102 .button_click { 103 background-color: #272727; 104 color: #ffffff; 105 width: 384px; 106 height: 32px; 107 font-size: 14px; 108 font-family: "Microsoft YaHei"; 109 border-radius: 8px; 110 border-color: #272727; 111 border: none; 112 margin-left: 12px; 113 display: block; 114 border: 1px solid #555555; 115 outline: none; 116 } 117 118 .button_click:hover { 119 width: 384px; 120 height: 32px; 121 outline: none; 122 border-color: #ffffff; 123 } 124 125 .label_button_click { 126 background-color: var(--vscode-button-background, #000000); 127 color: var(--vscode-button-foreground, #ffffff); 128 width: 384px; 129 height: 36px; 130 margin-top: 8px; 131 margin-left: 12px; 132 font-size: 14px; 133 font-family: "Microsoft YaHei"; 134 border-radius: 8px; 135 border-color: #272727; 136 border: none; 137 display: block; 138 margin-top: 8px; 139 border: 1px solid #555555; 140 padding-left: 5px; 141 padding-right: 5px; 142 outline: none; 143 } 144 145 .label_button_click:hover { 146 outline: none; 147 width: 384px; 148 height: 36px; 149 background-color: var(--vscode-button-hoverBackground, #D3D3D3); 150 color: var(--vscode-button-foreground, #ffffff); 151 border-color: #ffffff; 152 } 153 154 .button_click_delete { 155 background-color: var(--vscode-menu-background, #272727); 156 color: var(--vscode-menu-foreground, #ffffff); 157 width: 384px; 158 height: 32px; 159 margin-left: 12px; 160 font-family: "Microsoft YaHei"; 161 font-size: 14px; 162 border-radius: 8px; 163 border-color: var(--vscode-menu-border, #272727); 164 display: block; 165 border: 1px solid var(--vscode-menu-border, #272727); 166 outline: none; 167 } 168 169 .button_click_delete:hover { 170 outline: none; 171 width: 384px; 172 height: 32px; 173 border-color: var(--vscode-menu-border, #272727); 174 } 175 176 .text_area { 177 background-color: var(--vscode-editor-background, #000000); 178 color: var(--vscode-editor-foreground, #ffffff); 179 margin-left: 12px; 180 width: 372px; 181 height: 180px; 182 margin-top: 8px; 183 resize: vertical; 184 } 185 186 #canvas_textarea { 187 border: 1px solid groove; 188 position: absolute; 189 margin-left: 16px; 190 width: 258px; 191 height: 32px; 192 border-style: none; 193 outline: none; 194 background-color: rgba(255,255,255,0.1); 195 border-radius: 17px; 196 display: none; 197 color: #ffffff; 198 padding-left: 32px; 199 caret-color: #ffffff; 200 font-size: 14px; 201 resize: none; 202 line-height: 30px; 203 } 204 205 .canvas_bg { 206 background-color: var(--vscode-editor-background, #272727); 207 color: var(--vscode-editor-foreground, #ffffff); 208 margin-left: 0px; 209 width: 0px; 210 height: 0px; 211 margin-top: 0x; 212 } 213 214 .canvas_line { 215 color: var(--vscode-charts-lines, #000000); 216 } 217 218 .ul-select { 219 position: relative; 220 } 221 222 .ul-select span { 223 position: absolute; 224 top: 15px; 225 left: 365px; 226 color: #ffffff; 227 pointer-events: none; 228 } 229 230 .ul-select ul { 231 position: absolute; 232 top: 45px; 233 left: 12px; 234 padding: 0; 235 z-index: 5; 236 width: 381px; 237 display: none; 238 list-style: none; 239 border: 1px solid #555555; 240 font-size: 0px; 241 } 242 243 .ul-select li a { 244 display: inline-block; 245 width: 100%; 246 height: 22px; 247 padding-top: 3px; 248 color: var(--vscode-menu-foreground, #ffffff); 249 text-indent: 5px; 250 background: var(--vscode-menu-background, #000000); 251 font-family: "Microsoft YaHei"; 252 font-size: 14px; 253 text-decoration: none; 254 } 255 256 .ul-select li a:hover { 257 color: var(--vscode-menu-selectionForeground, #ffffff); 258 background: var(--vscode-menu-selectionBackground, #2979f1); 259 } 260 261 .validator_label { 262 color: #ff0000; 263 font-family: "Microsoft YaHei"; 264 text-align: center; 265 font-size: 14px; 266 margin-top: 2px; 267 margin-left: 12px; 268 } 269 </style> 270 <script> 271 function selectBlur(inputObj) { 272 var t = inputObj; 273 setTimeout(() => {t.nextSibling.style.display = 'none';},150); 274 } 275 276 function selectFocus(inputObj) { 277 inputObj.nextSibling.style.display = 'block'; 278 } 279 280 function liClick(liObj, searchId) { 281 liObj.parentNode.previousSibling.value = liObj.innerText; 282 document.attrCallback.Event('select', searchId); 283 } 284 </script> 285</head> 286 287<body style="margin:0"> 288 <canvas id="visual_area"></canvas> 289 <div id="attribute_area"></div> 290 <input type="hidden" id="canvas_bg" value="value" class="canvas_bg"> 291 <input type="hidden" id="canvas_line" value="value" class="canvas_line"> 292 <textarea id="canvas_textarea"></textarea> 293 <script src="./dist/main.js"></script> 294 <script> 295 // update js code begin 296 // update js code end 297 </script> 298</body> 299 300</html>