├── README.md ├── background.html ├── background.js ├── index.html ├── manifest.json ├── resources ├── cache.js ├── icon.png ├── img │ └── jsoneditor-icons.svg ├── jsoneditor.css ├── jsoneditor.js ├── localforage.min.js ├── main.css ├── main.js ├── toast.min.css └── toast.min.js └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # 简约好用的json编辑chrome插件 2 | 3 | ## 简介 4 | 5 | 基于 [josdejong/jsoneditor](https://github.com/josdejong/jsoneditor) 封装的chrome插件,喜欢简洁的朋友一定要试试!(效果视频:https://v.douyin.com/NpY9VNd/ ) 6 | 7 | ![效果图](https://raw.githubusercontent.com/sunzsh/chromeapp-jsonedit/506bbb4c14878fe97a3e80d400a6231cf2f78f90/screenshot.png) 8 | 9 | 10 | ## 更新记录 11 | ### 2022-04-12 12 | 1. 解决初次安装时报错(不影响使用) 13 | 2. 解决剪切板内容为非标准json时打开`clipboard`模式会报错的问题 14 | ### 2022-04-06 15 | 1. 支持在地址后追加参数来指定打开方式,例如:`...index.html?clipboard` 16 | * `无参数` 默认加载最后一次编辑过的json 17 | * `none` 打开一个空的编辑器 18 | * `clipboard` 自动读取剪切板里的内容加载并格式化 19 | 2. 支持字体缩放并记忆 20 | 3. 恢复支持了格式错误的提醒 21 | 4. 重构了自定义按钮的样式 22 | 23 | ## 使用方法 24 | > 由于chrome目前已经不支持app类型的插件上架应用商店了,所以只能下载源码后自己安装了(很简单) 25 | 26 | 1. 下载源码 27 | 2. 在chrome中打开 `chrome://extensions` 28 | 3. 右上角找到并开启“开发者模式” 29 | 4. 将源码的根目录拖拽到chrome中(安装成功) 30 | 5. 在chrome中打开 `chrome://apps` ,找到“JsonEditor” 单击打开 31 | 6. 打开url中可以追加 `?clipboard` 自动加载剪切板里的json 32 | 7. \[可选\] 方便以后进入,建议打开后,添加到收藏夹 33 | 8. \[可选\] 可以配合安装 [alfred插件](https://github.com/sunzsh/favoritesWorkflow4Alfred/blob/main/jsonEditor.alfredworkflow) 快速打开(支持按住command自动加载剪切板内json) 34 | 35 | ## 特别鸣谢 36 | * ★★★ 没有 [Jos de Jong](https://github.com/josdejong) 开源的 [josdejong/jsoneditor](https://github.com/josdejong/jsoneditor) ,就不会有这个小工具 37 | * [sungf](https://github.com/sungf) 、 [zhaoeryu](https://github.com/zhaoeryu) 贡献的源码提供了历史记录的功能 38 | * [git-403](https://github.com/git-403) 贡献了加载加载剪切板的代码和思路 39 | * [Cherry-toto](https://github.com/Cherry-toto) 贡献了字体缩放的初始代码 40 | -------------------------------------------------------------------------------- /background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onMessage.addListener( 2 | function(request, sender, sendResponse){ 3 | var result = ''; 4 | var sandbox = document.getElementById('sandbox'); 5 | sandbox.value = ''; 6 | sandbox.select(); 7 | if (document.execCommand('paste')) { 8 | result = sandbox.value; 9 | } 10 | sandbox.value = ''; 11 | sendResponse({clipboard: result}); 12 | } 13 | ) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JSONEditor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 40 | 41 | 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "JsonEditor", 4 | "version": "1.1.1", 5 | "description": "简单Json编辑器", 6 | "icons": 7 | { 8 | "16": "resources/icon.png", 9 | "48": "resources/icon.png", 10 | "128": "resources/icon.png" 11 | }, 12 | "permissions": 13 | [ 14 | "storage", "clipboardRead" 15 | ], 16 | "homepage_url": "https://github.com/sunzsh", 17 | "app": 18 | { 19 | "launch": { 20 | "local_path": "index.html" 21 | } 22 | }, 23 | "background": { 24 | "persistent": true, 25 | "page": "background.html" 26 | }, 27 | 28 | "omnibox": { "keyword" : "json" }, 29 | "content_security_policy": "script-src-elem 'self' data:; object-src 'self'; script-src 'self'" 30 | } 31 | -------------------------------------------------------------------------------- /resources/cache.js: -------------------------------------------------------------------------------- 1 | class CacheDao { 2 | constructor (key) { 3 | this.key = key 4 | this.maxLength = 5 5 | } 6 | 7 | async setItem(item) { 8 | let arr = await this.getItem() 9 | if(!Array.isArray(arr)) { 10 | arr = [] 11 | } 12 | if(arr.length >= this.maxLength) { 13 | arr.pop() 14 | } 15 | arr.unshift({ 16 | timestamp: Math.round(new Date() / 1000), 17 | value: item 18 | }) 19 | localforage.setItem(this.key, arr) 20 | } 21 | 22 | getItem() { 23 | try{ 24 | return localforage.getItem(this.key) 25 | }catch(err) { 26 | // nothing.. 27 | } 28 | return [] 29 | } 30 | } 31 | const cacheDao = new CacheDao('__jsoneditor_history') 32 | 33 | function beautifyTime(timestamp){ 34 | var mistiming = Math.round(new Date() / 1000)-timestamp; 35 | var postfix = mistiming>0 ? '前' : '后' 36 | mistiming = Math.abs(mistiming) 37 | var arrr = ['年','个月','星期','天','小时','分钟','秒']; 38 | var arrn = [31536000,2592000,604800,86400,3600,60,1]; 39 | 40 | for(var i=0; i<7; i++){ 41 | var inm = Math.floor(mistiming/arrn[i]) 42 | if(inm!=0){ 43 | return inm+arrr[i] + postfix 44 | } 45 | } 46 | return '刚刚' 47 | } -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunzsh/chromeapp-jsonedit/ce02716e0b03f88dd5311cdaffdb30e338c6a0a7/resources/icon.png -------------------------------------------------------------------------------- /resources/img/jsoneditor-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | JSON Editor Icons 18 | 20 | 21 | 23 | image/svg+xml 24 | 26 | JSON Editor Icons 27 | 28 | 29 | 30 | 32 | 56 | 60 | 61 | 62 | 69 | 76 | 83 | 90 | 97 | 100 | 107 | 114 | 115 | 119 | 126 | 133 | 134 | 141 | 148 | 155 | 157 | 164 | 171 | 178 | 179 | 182 | 189 | 196 | 203 | 204 | 211 | 217 | 223 | 230 | 235 | 240 | 247 | 253 | 258 | 265 | 271 | 277 | 284 | 291 | 298 | 305 | 312 | 319 | 326 | 332 | 340 | 346 | 352 | 359 | 367 | 375 | 382 | 389 | 396 | 403 | 410 | 417 | 424 | 431 | 437 | 445 | 451 | 457 | 464 | 472 | 480 | 487 | 494 | 501 | 508 | 515 | 522 | 529 | 536 | 541 | 546 | 551 | 557 | 563 | 568 | 573 | 578 | 583 | 588 | 604 | 621 | 638 | 655 | 661 | 667 | 673 | 679 | 686 | 692 | 695 | 702 | 709 | 716 | 723 | 729 | 730 | 736 | 743 | 749 | 750 | -------------------------------------------------------------------------------- /resources/jsoneditor.css: -------------------------------------------------------------------------------- 1 | .jsoneditor input, 2 | .jsoneditor input:not([type]), 3 | .jsoneditor input[type=text], 4 | .jsoneditor input[type=search], 5 | .jsoneditor-modal input, 6 | .jsoneditor-modal input:not([type]), 7 | .jsoneditor-modal input[type=text], 8 | .jsoneditor-modal input[type=search] { 9 | height: auto; 10 | border: inherit; 11 | box-shadow: none; 12 | font-size: inherit; 13 | box-sizing: inherit; 14 | padding: inherit; 15 | font-family: inherit; 16 | transition: none; 17 | line-height: inherit; 18 | } 19 | 20 | .jsoneditor input:focus, 21 | .jsoneditor input:not([type]):focus, 22 | .jsoneditor input[type=text]:focus, 23 | .jsoneditor input[type=search]:focus, 24 | .jsoneditor-modal input:focus, 25 | .jsoneditor-modal input:not([type]):focus, 26 | .jsoneditor-modal input[type=text]:focus, 27 | .jsoneditor-modal input[type=search]:focus { 28 | border: inherit; 29 | box-shadow: inherit; 30 | } 31 | 32 | .jsoneditor textarea, 33 | .jsoneditor-modal textarea { 34 | height: inherit; 35 | } 36 | 37 | .jsoneditor select, 38 | .jsoneditor-modal select { 39 | display: inherit; 40 | height: inherit; 41 | } 42 | 43 | .jsoneditor label, 44 | .jsoneditor-modal label { 45 | font-size: inherit; 46 | font-weight: inherit; 47 | color: inherit; 48 | } 49 | 50 | .jsoneditor table, 51 | .jsoneditor-modal table { 52 | border-collapse: collapse; 53 | width: auto; 54 | } 55 | 56 | .jsoneditor td, 57 | .jsoneditor th, 58 | .jsoneditor-modal td, 59 | .jsoneditor-modal th { 60 | padding: 0; 61 | display: table-cell; 62 | text-align: left; 63 | vertical-align: inherit; 64 | border-radius: inherit; 65 | } 66 | 67 | .jsoneditor .autocomplete.dropdown { 68 | position: absolute; 69 | background: #ffffff; 70 | box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); 71 | border: 1px solid #d3d3d3; 72 | overflow-x: hidden; 73 | overflow-y: auto; 74 | cursor: default; 75 | margin: 0; 76 | padding: 5px; 77 | text-align: left; 78 | outline: 0; 79 | font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace; 80 | font-size: 14px; 81 | } 82 | 83 | .jsoneditor .autocomplete.dropdown .item { 84 | color: #1a1a1a; 85 | } 86 | 87 | .jsoneditor .autocomplete.dropdown .item.hover { 88 | background-color: #ebebeb; 89 | } 90 | 91 | .jsoneditor .autocomplete.hint { 92 | color: #a1a1a1; 93 | top: 4px; 94 | left: 4px; 95 | } 96 | 97 | .jsoneditor-contextmenu-root { 98 | position: relative; 99 | width: 0; 100 | height: 0; 101 | } 102 | 103 | .jsoneditor-contextmenu { 104 | position: absolute; 105 | box-sizing: content-box; 106 | z-index: 2; 107 | } 108 | 109 | .jsoneditor-contextmenu .jsoneditor-menu { 110 | position: relative; 111 | left: 0; 112 | top: 0; 113 | width: 128px; 114 | height: auto; 115 | background: #ffffff; 116 | border: 1px solid #d3d3d3; 117 | box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); 118 | list-style: none; 119 | margin: 0; 120 | padding: 0; 121 | } 122 | 123 | .jsoneditor-contextmenu .jsoneditor-menu button { 124 | position: relative; 125 | padding: 0 8px 0 0; 126 | margin: 0; 127 | width: 128px; 128 | height: auto; 129 | border: none; 130 | cursor: pointer; 131 | color: #4d4d4d; 132 | background: transparent; 133 | font-size: 14px; 134 | font-family: arial, sans-serif; 135 | box-sizing: border-box; 136 | text-align: left; 137 | } 138 | 139 | .jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner { 140 | padding: 0; 141 | border: 0; 142 | } 143 | 144 | .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default { 145 | width: 96px; 146 | } 147 | 148 | .jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand { 149 | float: right; 150 | width: 32px; 151 | height: 24px; 152 | border-left: 1px solid #e5e5e5; 153 | } 154 | 155 | .jsoneditor-contextmenu .jsoneditor-menu li { 156 | overflow: hidden; 157 | } 158 | 159 | .jsoneditor-contextmenu .jsoneditor-menu li ul { 160 | display: none; 161 | position: relative; 162 | left: -10px; 163 | top: 0; 164 | border: none; 165 | box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5); 166 | padding: 0 10px; 167 | -webkit-transition: all 0.3s ease-out; 168 | -moz-transition: all 0.3s ease-out; 169 | -o-transition: all 0.3s ease-out; 170 | transition: all 0.3s ease-out; 171 | } 172 | 173 | .jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon { 174 | margin-left: 24px; 175 | } 176 | 177 | .jsoneditor-contextmenu .jsoneditor-menu li ul li button { 178 | padding-left: 24px; 179 | animation: all ease-in-out 1s; 180 | } 181 | 182 | .jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand { 183 | position: absolute; 184 | top: 0; 185 | right: 0; 186 | width: 24px; 187 | height: 24px; 188 | padding: 0; 189 | margin: 0 4px 0 0; 190 | background-image: url("./img/jsoneditor-icons.svg"); 191 | background-position: 0 -72px; 192 | } 193 | 194 | .jsoneditor-contextmenu .jsoneditor-icon { 195 | position: absolute; 196 | top: 0; 197 | left: 0; 198 | width: 24px; 199 | height: 24px; 200 | border: none; 201 | padding: 0; 202 | margin: 0; 203 | background-image: url("./img/jsoneditor-icons.svg"); 204 | } 205 | 206 | .jsoneditor-contextmenu .jsoneditor-text { 207 | padding: 4px 0 4px 24px; 208 | word-wrap: break-word; 209 | } 210 | 211 | .jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin { 212 | padding-right: 24px; 213 | } 214 | 215 | .jsoneditor-contextmenu .jsoneditor-separator { 216 | height: 0; 217 | border-top: 1px solid #e5e5e5; 218 | padding-top: 5px; 219 | margin-top: 5px; 220 | } 221 | 222 | .jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon { 223 | background-position: -24px 0; 224 | } 225 | 226 | .jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon { 227 | background-position: 0 0; 228 | } 229 | 230 | .jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon { 231 | background-position: 0 0; 232 | } 233 | 234 | .jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon { 235 | background-position: -48px 0; 236 | } 237 | 238 | .jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon { 239 | background-position: -168px 0; 240 | } 241 | 242 | .jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon { 243 | background-position: -192px 0; 244 | } 245 | 246 | .jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon { 247 | background-position: -216px 0; 248 | } 249 | 250 | .jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon { 251 | background-position: 0 -24px; 252 | } 253 | 254 | .jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon { 255 | background-position: -144px 0; 256 | } 257 | 258 | .jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon { 259 | background-position: -120px 0; 260 | } 261 | 262 | .jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon { 263 | background-position: -72px 0; 264 | } 265 | 266 | .jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon { 267 | background-position: -96px 0; 268 | } 269 | 270 | .jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon { 271 | background-image: none; 272 | width: 6px; 273 | } 274 | 275 | .jsoneditor-contextmenu ul, 276 | .jsoneditor-contextmenu li { 277 | box-sizing: content-box; 278 | position: relative; 279 | } 280 | 281 | .jsoneditor-contextmenu .jsoneditor-menu button:hover, 282 | .jsoneditor-contextmenu .jsoneditor-menu button:focus { 283 | color: #1a1a1a; 284 | background-color: #f5f5f5; 285 | outline: none; 286 | } 287 | 288 | .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected, 289 | .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover, 290 | .jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus { 291 | color: #ffffff; 292 | background-color: #ee422e; 293 | } 294 | 295 | .jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover, 296 | .jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus { 297 | background-color: #f5f5f5; 298 | } 299 | 300 | .jsoneditor-modal { 301 | max-width: 95%; 302 | border-radius: 2px !important; 303 | padding: 45px 15px 15px 15px !important; 304 | box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); 305 | color: #4d4d4d; 306 | line-height: 1.3em; 307 | } 308 | 309 | .jsoneditor-modal.jsoneditor-modal-transform { 310 | width: 600px !important; 311 | } 312 | 313 | .jsoneditor-modal .pico-modal-header { 314 | position: absolute; 315 | box-sizing: border-box; 316 | top: 0; 317 | left: 0; 318 | width: 100%; 319 | padding: 0 10px; 320 | height: 30px; 321 | line-height: 30px; 322 | font-family: arial, sans-serif; 323 | font-size: 11pt; 324 | background: #3883fa; 325 | color: #ffffff; 326 | } 327 | 328 | .jsoneditor-modal table { 329 | width: 100%; 330 | } 331 | 332 | .jsoneditor-modal table td { 333 | padding: 3px 0; 334 | } 335 | 336 | .jsoneditor-modal table td.jsoneditor-modal-input { 337 | text-align: right; 338 | padding-right: 0; 339 | white-space: nowrap; 340 | } 341 | 342 | .jsoneditor-modal table td.jsoneditor-modal-actions { 343 | padding-top: 15px; 344 | } 345 | 346 | .jsoneditor-modal table th { 347 | vertical-align: middle; 348 | } 349 | 350 | .jsoneditor-modal p:first-child { 351 | margin-top: 0; 352 | } 353 | 354 | .jsoneditor-modal a { 355 | color: #3883fa; 356 | } 357 | 358 | .jsoneditor-modal .jsoneditor-jmespath-block { 359 | margin-bottom: 10px; 360 | } 361 | 362 | .jsoneditor-modal .pico-close { 363 | background: none !important; 364 | font-size: 24px !important; 365 | top: 7px !important; 366 | right: 7px !important; 367 | color: #ffffff; 368 | } 369 | 370 | .jsoneditor-modal input { 371 | padding: 4px; 372 | } 373 | 374 | .jsoneditor-modal input[type=text] { 375 | cursor: inherit; 376 | } 377 | 378 | .jsoneditor-modal input[disabled] { 379 | background: #d3d3d3; 380 | color: #808080; 381 | } 382 | 383 | .jsoneditor-modal .jsoneditor-select-wrapper { 384 | position: relative; 385 | display: inline-block; 386 | } 387 | 388 | .jsoneditor-modal .jsoneditor-select-wrapper:after { 389 | content: ""; 390 | width: 0; 391 | height: 0; 392 | border-left: 5px solid transparent; 393 | border-right: 5px solid transparent; 394 | border-top: 6px solid #666; 395 | position: absolute; 396 | right: 8px; 397 | top: 14px; 398 | pointer-events: none; 399 | } 400 | 401 | .jsoneditor-modal select { 402 | padding: 3px 24px 3px 10px; 403 | min-width: 180px; 404 | max-width: 350px; 405 | -webkit-appearance: none; 406 | -moz-appearance: none; 407 | appearance: none; 408 | text-indent: 0; 409 | text-overflow: ""; 410 | font-size: 14px; 411 | line-height: 1.5em; 412 | } 413 | 414 | .jsoneditor-modal select::-ms-expand { 415 | display: none; 416 | } 417 | 418 | .jsoneditor-modal .jsoneditor-button-group input { 419 | padding: 4px 10px; 420 | margin: 0; 421 | border-radius: 0; 422 | border-left-style: none; 423 | } 424 | 425 | .jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first { 426 | border-top-left-radius: 3px; 427 | border-bottom-left-radius: 3px; 428 | border-left-style: solid; 429 | } 430 | 431 | .jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last { 432 | border-top-right-radius: 3px; 433 | border-bottom-right-radius: 3px; 434 | } 435 | 436 | .jsoneditor-modal .jsoneditor-transform-preview { 437 | background: #f5f5f5; 438 | height: 200px; 439 | } 440 | 441 | .jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error { 442 | color: #ee422e; 443 | } 444 | 445 | .jsoneditor-modal .jsoneditor-jmespath-wizard { 446 | line-height: 1.2em; 447 | width: 100%; 448 | padding: 0; 449 | border-radius: 3px; 450 | } 451 | 452 | .jsoneditor-modal .jsoneditor-jmespath-label { 453 | font-weight: bold; 454 | color: dodgerblue; 455 | margin-top: 20px; 456 | margin-bottom: 5px; 457 | } 458 | 459 | .jsoneditor-modal .jsoneditor-jmespath-wizard-table { 460 | width: 100%; 461 | border-collapse: collapse; 462 | } 463 | 464 | .jsoneditor-modal .jsoneditor-jmespath-wizard-label { 465 | font-style: italic; 466 | margin: 4px 0 2px 0; 467 | } 468 | 469 | .jsoneditor-modal .jsoneditor-inline { 470 | position: relative; 471 | display: inline-block; 472 | width: 100%; 473 | padding-top: 2px; 474 | padding-bottom: 2px; 475 | } 476 | 477 | .jsoneditor-modal .jsoneditor-inline:not(:last-child) { 478 | padding-right: 2px; 479 | } 480 | 481 | .jsoneditor-modal .jsoneditor-jmespath-filter { 482 | display: flex; 483 | flex-wrap: wrap; 484 | } 485 | 486 | .jsoneditor-modal .jsoneditor-jmespath-filter-field { 487 | width: 180px; 488 | } 489 | 490 | .jsoneditor-modal .jsoneditor-jmespath-filter-relation { 491 | width: 100px; 492 | } 493 | 494 | .jsoneditor-modal .jsoneditor-jmespath-filter-value { 495 | min-width: 180px; 496 | flex: 1; 497 | } 498 | 499 | .jsoneditor-modal .jsoneditor-jmespath-sort-field { 500 | width: 170px; 501 | } 502 | 503 | .jsoneditor-modal .jsoneditor-jmespath-sort-order { 504 | width: 150px; 505 | } 506 | 507 | .jsoneditor-modal .jsoneditor-jmespath-select-fields { 508 | width: 100%; 509 | } 510 | 511 | .jsoneditor-modal .selectr-selected { 512 | border-color: #d3d3d3; 513 | padding: 4px 28px 4px 8px; 514 | } 515 | 516 | .jsoneditor-modal .selectr-selected .selectr-tag { 517 | background-color: #3883fa; 518 | border-radius: 5px; 519 | } 520 | 521 | .jsoneditor-modal table th, 522 | .jsoneditor-modal table td { 523 | text-align: left; 524 | vertical-align: middle; 525 | font-weight: normal; 526 | color: #4d4d4d; 527 | border-spacing: 0; 528 | border-collapse: collapse; 529 | } 530 | 531 | .jsoneditor-modal select, 532 | .jsoneditor-modal textarea, 533 | .jsoneditor-modal input, 534 | .jsoneditor-modal input[type=text], 535 | .jsoneditor-modal input[type=text]:focus, 536 | .jsoneditor-modal #query { 537 | background: #ffffff; 538 | border: 1px solid #d3d3d3; 539 | color: #4d4d4d; 540 | border-radius: 3px; 541 | padding: 4px; 542 | } 543 | 544 | .jsoneditor-modal textarea, 545 | .jsoneditor-modal #query { 546 | border-radius: unset; 547 | } 548 | 549 | .jsoneditor-modal, 550 | .jsoneditor-modal table td, 551 | .jsoneditor-modal table th, 552 | .jsoneditor-modal select, 553 | .jsoneditor-modal option, 554 | .jsoneditor-modal textarea, 555 | .jsoneditor-modal input, 556 | .jsoneditor-modal input[type=text], 557 | .jsoneditor-modal #query { 558 | font-size: 10.5pt; 559 | font-family: arial, sans-serif; 560 | } 561 | 562 | .jsoneditor-modal #query, 563 | .jsoneditor-modal .jsoneditor-transform-preview { 564 | font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace; 565 | font-size: 14px; 566 | width: 100%; 567 | box-sizing: border-box; 568 | } 569 | 570 | .jsoneditor-modal input[type=button], 571 | .jsoneditor-modal input[type=submit] { 572 | background: #f5f5f5; 573 | padding: 4px 20px; 574 | } 575 | 576 | .jsoneditor-modal select, 577 | .jsoneditor-modal input { 578 | cursor: pointer; 579 | } 580 | 581 | .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, 582 | .jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc { 583 | background: #3883fa; 584 | border-color: #3883fa; 585 | color: #ffffff; 586 | } 587 | 588 | .jsoneditor { 589 | color: #1a1a1a; 590 | border: thin solid #3883fa; 591 | -moz-box-sizing: border-box; 592 | -webkit-box-sizing: border-box; 593 | box-sizing: border-box; 594 | width: 100%; 595 | height: 100%; 596 | position: relative; 597 | padding: 0; 598 | line-height: 100%; 599 | } 600 | 601 | div.jsoneditor-field, 602 | div.jsoneditor-value, 603 | div.jsoneditor-readonly, 604 | div.jsoneditor-default { 605 | border: 1px solid transparent; 606 | min-height: 16px; 607 | min-width: 32px; 608 | line-height: 16px; 609 | padding: 2px; 610 | margin: 1px; 611 | word-wrap: break-word; 612 | float: left; 613 | } 614 | 615 | div.jsoneditor-field p, 616 | div.jsoneditor-value p { 617 | margin: 0; 618 | } 619 | 620 | div.jsoneditor-value { 621 | word-break: break-word; 622 | } 623 | 624 | div.jsoneditor-value.jsoneditor-empty::after { 625 | content: "value"; 626 | } 627 | 628 | div.jsoneditor-value.jsoneditor-string { 629 | color: #006000; 630 | } 631 | 632 | div.jsoneditor-value.jsoneditor-number { 633 | color: #ee422e; 634 | } 635 | 636 | div.jsoneditor-value.jsoneditor-boolean { 637 | color: #ff8c00; 638 | } 639 | 640 | div.jsoneditor-value.jsoneditor-null { 641 | color: #004ed0; 642 | } 643 | 644 | div.jsoneditor-value.jsoneditor-color-value { 645 | color: #1a1a1a; 646 | } 647 | 648 | div.jsoneditor-value.jsoneditor-invalid { 649 | color: #1a1a1a; 650 | } 651 | 652 | div.jsoneditor-readonly { 653 | min-width: 16px; 654 | color: #808080; 655 | } 656 | 657 | div.jsoneditor-empty { 658 | border-color: #d3d3d3; 659 | border-style: dashed; 660 | border-radius: 2px; 661 | } 662 | 663 | div.jsoneditor-field.jsoneditor-empty::after { 664 | content: "field"; 665 | } 666 | 667 | div.jsoneditor td { 668 | vertical-align: top; 669 | } 670 | 671 | div.jsoneditor td.jsoneditor-separator { 672 | padding: 3px 0; 673 | vertical-align: top; 674 | color: #808080; 675 | } 676 | 677 | div.jsoneditor td.jsoneditor-tree { 678 | vertical-align: top; 679 | } 680 | 681 | div.jsoneditor.busy pre.jsoneditor-preview { 682 | background: #f5f5f5; 683 | color: #808080; 684 | } 685 | 686 | div.jsoneditor.busy div.jsoneditor-busy { 687 | display: inherit; 688 | } 689 | 690 | div.jsoneditor code.jsoneditor-preview { 691 | background: none; 692 | } 693 | 694 | div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview { 695 | width: 100%; 696 | height: 100%; 697 | box-sizing: border-box; 698 | overflow: auto; 699 | padding: 2px; 700 | margin: 0; 701 | white-space: pre-wrap; 702 | word-break: break-all; 703 | } 704 | 705 | div.jsoneditor-default { 706 | color: #808080; 707 | padding-left: 10px; 708 | } 709 | 710 | div.jsoneditor-tree { 711 | width: 100%; 712 | height: 100%; 713 | position: relative; 714 | overflow: auto; 715 | background: #ffffff; 716 | } 717 | 718 | div.jsoneditor-tree button.jsoneditor-button { 719 | width: 24px; 720 | height: 24px; 721 | padding: 0; 722 | margin: 0; 723 | border: none; 724 | cursor: pointer; 725 | background-color: transparent; 726 | background-image: url("./img/jsoneditor-icons.svg"); 727 | } 728 | 729 | div.jsoneditor-tree button.jsoneditor-button:focus { 730 | background-color: #f5f5f5; 731 | outline: #e5e5e5 solid 1px; 732 | } 733 | 734 | div.jsoneditor-tree button.jsoneditor-collapsed { 735 | background-position: 0 -48px; 736 | } 737 | 738 | div.jsoneditor-tree button.jsoneditor-expanded { 739 | background-position: 0 -72px; 740 | } 741 | 742 | div.jsoneditor-tree button.jsoneditor-contextmenu-button { 743 | background-position: -48px -72px; 744 | } 745 | 746 | div.jsoneditor-tree button.jsoneditor-invisible { 747 | visibility: hidden; 748 | background: none; 749 | } 750 | 751 | div.jsoneditor-tree button.jsoneditor-dragarea { 752 | background-image: url("./img/jsoneditor-icons.svg"); 753 | background-position: -72px -72px; 754 | cursor: move; 755 | } 756 | 757 | div.jsoneditor-tree *:focus { 758 | outline: none; 759 | } 760 | 761 | div.jsoneditor-tree div.jsoneditor-show-more { 762 | display: inline-block; 763 | padding: 3px 4px; 764 | margin: 2px 0; 765 | background-color: #e5e5e5; 766 | border-radius: 3px; 767 | color: #808080; 768 | font-family: arial, sans-serif; 769 | font-size: 14px; 770 | } 771 | 772 | div.jsoneditor-tree div.jsoneditor-show-more a { 773 | display: inline-block; 774 | color: #808080; 775 | } 776 | 777 | div.jsoneditor-tree div.jsoneditor-color { 778 | display: inline-block; 779 | width: 12px; 780 | height: 12px; 781 | margin: 4px; 782 | border: 1px solid #808080; 783 | cursor: pointer; 784 | } 785 | 786 | div.jsoneditor-tree div.jsoneditor-color.jsoneditor-color-readonly { 787 | cursor: inherit; 788 | } 789 | 790 | div.jsoneditor-tree div.jsoneditor-date { 791 | background: #a1a1a1; 792 | color: #ffffff; 793 | font-family: arial, sans-serif; 794 | border-radius: 3px; 795 | display: inline-block; 796 | padding: 3px; 797 | margin: 0 3px; 798 | } 799 | 800 | div.jsoneditor-tree table.jsoneditor-tree { 801 | border-collapse: collapse; 802 | border-spacing: 0; 803 | width: 100%; 804 | } 805 | 806 | div.jsoneditor-tree .jsoneditor-button { 807 | display: block; 808 | } 809 | 810 | div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error { 811 | width: 24px; 812 | height: 24px; 813 | padding: 0; 814 | margin: 0 4px 0 0; 815 | background-image: url("./img/jsoneditor-icons.svg"); 816 | background-position: -168px -48px; 817 | background-color: transparent; 818 | } 819 | 820 | div.jsoneditor-outer { 821 | position: static; 822 | width: 100%; 823 | height: 100%; 824 | margin: 0; 825 | padding: 0; 826 | -moz-box-sizing: border-box; 827 | -webkit-box-sizing: border-box; 828 | box-sizing: border-box; 829 | } 830 | 831 | div.jsoneditor-outer.has-nav-bar { 832 | margin-top: -26px; 833 | padding-top: 26px; 834 | } 835 | 836 | div.jsoneditor-outer.has-nav-bar.has-main-menu-bar { 837 | margin-top: -61px; 838 | padding-top: 61px; 839 | } 840 | 841 | div.jsoneditor-outer.has-status-bar { 842 | margin-bottom: -26px; 843 | padding-bottom: 26px; 844 | } 845 | 846 | div.jsoneditor-outer.has-main-menu-bar { 847 | margin-top: -35px; 848 | padding-top: 35px; 849 | } 850 | 851 | div.jsoneditor-busy { 852 | position: absolute; 853 | top: 15%; 854 | left: 0; 855 | box-sizing: border-box; 856 | width: 100%; 857 | text-align: center; 858 | display: none; 859 | } 860 | 861 | div.jsoneditor-busy span { 862 | background-color: #ffffab; 863 | border: 1px solid #ffee00; 864 | border-radius: 3px; 865 | padding: 5px 15px; 866 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 867 | } 868 | 869 | div.jsoneditor-field.jsoneditor-empty::after, 870 | div.jsoneditor-value.jsoneditor-empty::after { 871 | pointer-events: none; 872 | color: #d3d3d3; 873 | font-size: 8pt; 874 | } 875 | 876 | div.jsoneditor-value.jsoneditor-url, 877 | a.jsoneditor-value.jsoneditor-url { 878 | color: #006000; 879 | text-decoration: underline; 880 | } 881 | 882 | a.jsoneditor-value.jsoneditor-url { 883 | display: inline-block; 884 | padding: 2px; 885 | margin: 2px; 886 | } 887 | 888 | a.jsoneditor-value.jsoneditor-url:hover, 889 | a.jsoneditor-value.jsoneditor-url:focus { 890 | color: #ee422e; 891 | } 892 | 893 | div.jsoneditor-field[contenteditable=true]:focus, 894 | div.jsoneditor-field[contenteditable=true]:hover, 895 | div.jsoneditor-value[contenteditable=true]:focus, 896 | div.jsoneditor-value[contenteditable=true]:hover, 897 | div.jsoneditor-field.jsoneditor-highlight, 898 | div.jsoneditor-value.jsoneditor-highlight { 899 | background-color: #ffffab; 900 | border: 1px solid #ffee00; 901 | border-radius: 2px; 902 | } 903 | 904 | div.jsoneditor-field.jsoneditor-highlight-active, 905 | div.jsoneditor-field.jsoneditor-highlight-active:focus, 906 | div.jsoneditor-field.jsoneditor-highlight-active:hover, 907 | div.jsoneditor-value.jsoneditor-highlight-active, 908 | div.jsoneditor-value.jsoneditor-highlight-active:focus, 909 | div.jsoneditor-value.jsoneditor-highlight-active:hover { 910 | background-color: #ffee00; 911 | border: 1px solid #ffc700; 912 | border-radius: 2px; 913 | } 914 | 915 | div.jsoneditor-value.jsoneditor-object, 916 | div.jsoneditor-value.jsoneditor-array { 917 | min-width: 16px; 918 | } 919 | 920 | div.jsoneditor-tree button.jsoneditor-contextmenu-button:hover, 921 | div.jsoneditor-tree button.jsoneditor-contextmenu-button:focus, 922 | div.jsoneditor-tree button.jsoneditor-contextmenu-button.jsoneditor-selected, 923 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button { 924 | background-position: -48px -48px; 925 | } 926 | 927 | div.jsoneditor-tree div.jsoneditor-show-more a:hover, 928 | div.jsoneditor-tree div.jsoneditor-show-more a:focus { 929 | color: #ee422e; 930 | } 931 | 932 | textarea.jsoneditor-text, 933 | .ace-jsoneditor { 934 | min-height: 150px; 935 | } 936 | 937 | textarea.jsoneditor-text.ace_editor, 938 | .ace-jsoneditor.ace_editor { 939 | font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace; 940 | } 941 | 942 | textarea.jsoneditor-text { 943 | width: 100%; 944 | height: 100%; 945 | margin: 0; 946 | -moz-box-sizing: border-box; 947 | -webkit-box-sizing: border-box; 948 | box-sizing: border-box; 949 | outline-width: 0; 950 | border: none; 951 | background-color: #ffffff; 952 | resize: none; 953 | } 954 | 955 | tr.jsoneditor-highlight, 956 | tr.jsoneditor-selected { 957 | background-color: #d3d3d3; 958 | } 959 | 960 | tr.jsoneditor-selected button.jsoneditor-dragarea, 961 | tr.jsoneditor-selected button.jsoneditor-contextmenu-button { 962 | visibility: hidden; 963 | } 964 | 965 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea, 966 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button { 967 | visibility: visible; 968 | } 969 | 970 | div.jsoneditor-tree button.jsoneditor-dragarea:hover, 971 | div.jsoneditor-tree button.jsoneditor-dragarea:focus, 972 | tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea { 973 | background-position: -72px -48px; 974 | } 975 | 976 | div.jsoneditor tr, 977 | div.jsoneditor th, 978 | div.jsoneditor td { 979 | padding: 0; 980 | margin: 0; 981 | } 982 | 983 | div.jsoneditor-field, 984 | div.jsoneditor-value, 985 | div.jsoneditor td, 986 | div.jsoneditor th, 987 | div.jsoneditor textarea, 988 | pre.jsoneditor-preview, 989 | .jsoneditor-schema-error, 990 | .jsoneditor-popover { 991 | font-family: consolas, menlo, monaco, "Ubuntu Mono", "source-code-pro", monospace; 992 | font-size: 14px; 993 | color: #1a1a1a; 994 | } 995 | 996 | .jsoneditor-schema-error { 997 | cursor: default; 998 | display: inline-block; 999 | height: 24px; 1000 | line-height: 24px; 1001 | position: relative; 1002 | text-align: center; 1003 | width: 24px; 1004 | } 1005 | 1006 | .jsoneditor-popover { 1007 | background-color: #4c4c4c; 1008 | border-radius: 3px; 1009 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); 1010 | color: #ffffff; 1011 | padding: 7px 10px; 1012 | position: absolute; 1013 | cursor: auto; 1014 | width: 200px; 1015 | } 1016 | 1017 | .jsoneditor-popover.jsoneditor-above { 1018 | bottom: 32px; 1019 | left: -98px; 1020 | } 1021 | 1022 | .jsoneditor-popover.jsoneditor-above:before { 1023 | border-top: 7px solid #4c4c4c; 1024 | bottom: -7px; 1025 | } 1026 | 1027 | .jsoneditor-popover.jsoneditor-below { 1028 | top: 32px; 1029 | left: -98px; 1030 | } 1031 | 1032 | .jsoneditor-popover.jsoneditor-below:before { 1033 | border-bottom: 7px solid #4c4c4c; 1034 | top: -7px; 1035 | } 1036 | 1037 | .jsoneditor-popover.jsoneditor-left { 1038 | top: -7px; 1039 | right: 32px; 1040 | } 1041 | 1042 | .jsoneditor-popover.jsoneditor-left:before { 1043 | border-left: 7px solid #4c4c4c; 1044 | border-top: 7px solid transparent; 1045 | border-bottom: 7px solid transparent; 1046 | content: ""; 1047 | top: 19px; 1048 | right: -14px; 1049 | left: inherit; 1050 | margin-left: inherit; 1051 | margin-top: -7px; 1052 | position: absolute; 1053 | } 1054 | 1055 | .jsoneditor-popover.jsoneditor-right { 1056 | top: -7px; 1057 | left: 32px; 1058 | } 1059 | 1060 | .jsoneditor-popover.jsoneditor-right:before { 1061 | border-right: 7px solid #4c4c4c; 1062 | border-top: 7px solid transparent; 1063 | border-bottom: 7px solid transparent; 1064 | content: ""; 1065 | top: 19px; 1066 | left: -14px; 1067 | margin-left: inherit; 1068 | margin-top: -7px; 1069 | position: absolute; 1070 | } 1071 | 1072 | .jsoneditor-popover:before { 1073 | border-right: 7px solid transparent; 1074 | border-left: 7px solid transparent; 1075 | content: ""; 1076 | display: block; 1077 | left: 50%; 1078 | margin-left: -7px; 1079 | position: absolute; 1080 | } 1081 | 1082 | .jsoneditor-text-errors tr.jump-to-line:hover { 1083 | text-decoration: underline; 1084 | cursor: pointer; 1085 | } 1086 | 1087 | .jsoneditor-schema-error:hover .jsoneditor-popover, 1088 | .jsoneditor-schema-error:focus .jsoneditor-popover { 1089 | display: block; 1090 | animation: fade-in 0.3s linear 1, move-up 0.3s linear 1; 1091 | } 1092 | 1093 | @keyframes fade-in { 1094 | from { 1095 | opacity: 0; 1096 | } 1097 | 1098 | to { 1099 | opacity: 1; 1100 | } 1101 | } 1102 | 1103 | /* JSON schema errors displayed at the bottom of the editor in mode text and code */ 1104 | 1105 | .jsoneditor .jsoneditor-validation-errors-container { 1106 | max-height: 130px; 1107 | overflow-y: auto; 1108 | } 1109 | 1110 | .jsoneditor .jsoneditor-validation-errors { 1111 | width: 100%; 1112 | overflow: hidden; 1113 | } 1114 | 1115 | .jsoneditor .jsoneditor-additional-errors { 1116 | position: absolute; 1117 | margin: auto; 1118 | bottom: 31px; 1119 | left: calc(50% - 92px); 1120 | color: #808080; 1121 | background-color: #ebebeb; 1122 | padding: 7px 15px; 1123 | border-radius: 8px; 1124 | } 1125 | 1126 | .jsoneditor .jsoneditor-additional-errors.visible { 1127 | visibility: visible; 1128 | opacity: 1; 1129 | transition: opacity 2s linear; 1130 | } 1131 | 1132 | .jsoneditor .jsoneditor-additional-errors.hidden { 1133 | visibility: hidden; 1134 | opacity: 0; 1135 | transition: visibility 0s 2s, opacity 2s linear; 1136 | } 1137 | 1138 | .jsoneditor .jsoneditor-text-errors { 1139 | width: 100%; 1140 | border-collapse: collapse; 1141 | border-top: 1px solid #ffc700; 1142 | } 1143 | 1144 | .jsoneditor .jsoneditor-text-errors td { 1145 | padding: 3px 6px; 1146 | vertical-align: middle; 1147 | } 1148 | 1149 | .jsoneditor .jsoneditor-text-errors td pre { 1150 | margin: 0; 1151 | white-space: pre-wrap; 1152 | } 1153 | 1154 | .jsoneditor .jsoneditor-text-errors tr { 1155 | background-color: #ffffab; 1156 | } 1157 | 1158 | .jsoneditor .jsoneditor-text-errors tr.parse-error { 1159 | background-color: #ee2e2e70; 1160 | } 1161 | 1162 | .jsoneditor-text-errors .jsoneditor-schema-error { 1163 | border: none; 1164 | width: 24px; 1165 | height: 24px; 1166 | padding: 0; 1167 | margin: 0 4px 0 0; 1168 | cursor: pointer; 1169 | } 1170 | 1171 | .jsoneditor-text-errors tr .jsoneditor-schema-error { 1172 | background-image: url("./img/jsoneditor-icons.svg"); 1173 | background-position: -168px -48px; 1174 | background-color: transparent; 1175 | } 1176 | 1177 | .jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error { 1178 | background-image: url("./img/jsoneditor-icons.svg"); 1179 | background-position: -25px 0px; 1180 | background-color: transparent; 1181 | } 1182 | 1183 | .jsoneditor-anchor { 1184 | cursor: pointer; 1185 | } 1186 | 1187 | .jsoneditor-anchor .picker_wrapper.popup.popup_bottom { 1188 | top: 28px; 1189 | left: -10px; 1190 | } 1191 | 1192 | .fadein { 1193 | -webkit-animation: fadein 0.3s; 1194 | animation: fadein 0.3s; 1195 | -moz-animation: fadein 0.3s; 1196 | -o-animation: fadein 0.3s; 1197 | } 1198 | 1199 | @keyframes fadein { 1200 | 0% { 1201 | opacity: 0; 1202 | } 1203 | 1204 | 100% { 1205 | opacity: 1; 1206 | } 1207 | } 1208 | 1209 | .jsoneditor-modal input[type=search].selectr-input { 1210 | border: 1px solid #d3d3d3; 1211 | width: calc(100% - 4px); 1212 | margin: 2px; 1213 | padding: 4px; 1214 | box-sizing: border-box; 1215 | } 1216 | 1217 | .jsoneditor-modal button.selectr-input-clear { 1218 | right: 8px; 1219 | } 1220 | 1221 | .jsoneditor-menu { 1222 | width: 100%; 1223 | height: 35px; 1224 | padding: 2px; 1225 | margin: 0; 1226 | -moz-box-sizing: border-box; 1227 | -webkit-box-sizing: border-box; 1228 | box-sizing: border-box; 1229 | color: #ffffff; 1230 | background-color: #3883fa; 1231 | border-bottom: 1px solid #3883fa; 1232 | } 1233 | 1234 | .jsoneditor-menu > button, 1235 | .jsoneditor-menu > .jsoneditor-modes > button { 1236 | width: 26px; 1237 | height: 26px; 1238 | margin: 2px; 1239 | padding: 0; 1240 | border-radius: 2px; 1241 | border: 1px solid transparent; 1242 | background-color: transparent; 1243 | background-image: url("./img/jsoneditor-icons.svg"); 1244 | color: #ffffff; 1245 | opacity: 0.8; 1246 | font-family: arial, sans-serif; 1247 | font-size: 14px; 1248 | float: left; 1249 | } 1250 | 1251 | .jsoneditor-menu > button:hover, 1252 | .jsoneditor-menu > .jsoneditor-modes > button:hover { 1253 | background-color: rgba(255, 255, 255, 0.2); 1254 | border: 1px solid rgba(255, 255, 255, 0.4); 1255 | } 1256 | 1257 | .jsoneditor-menu > button:focus, 1258 | .jsoneditor-menu > button:active, 1259 | .jsoneditor-menu > .jsoneditor-modes > button:focus, 1260 | .jsoneditor-menu > .jsoneditor-modes > button:active { 1261 | background-color: rgba(255, 255, 255, 0.3); 1262 | } 1263 | 1264 | .jsoneditor-menu > button:disabled, 1265 | .jsoneditor-menu > .jsoneditor-modes > button:disabled { 1266 | opacity: 0.5; 1267 | background-color: transparent; 1268 | border: none; 1269 | } 1270 | 1271 | .jsoneditor-menu > button.jsoneditor-collapse-all { 1272 | background-position: 0 -96px; 1273 | } 1274 | 1275 | .jsoneditor-menu > button.jsoneditor-expand-all { 1276 | background-position: 0 -120px; 1277 | } 1278 | 1279 | .jsoneditor-menu > button.jsoneditor-sort { 1280 | background-position: -120px -96px; 1281 | } 1282 | 1283 | .jsoneditor-menu > button.jsoneditor-transform { 1284 | background-position: -144px -96px; 1285 | } 1286 | 1287 | .jsoneditor.jsoneditor-mode-view > .jsoneditor-menu > button.jsoneditor-sort, 1288 | .jsoneditor.jsoneditor-mode-form > .jsoneditor-menu > button.jsoneditor-sort, 1289 | .jsoneditor.jsoneditor-mode-view > .jsoneditor-menu > button.jsoneditor-transform, 1290 | .jsoneditor.jsoneditor-mode-form > .jsoneditor-menu > button.jsoneditor-transform { 1291 | display: none; 1292 | } 1293 | 1294 | .jsoneditor-menu > button.jsoneditor-undo { 1295 | background-position: -24px -96px; 1296 | } 1297 | 1298 | .jsoneditor-menu > button.jsoneditor-undo:disabled { 1299 | background-position: -24px -120px; 1300 | } 1301 | 1302 | .jsoneditor-menu > button.jsoneditor-redo { 1303 | background-position: -48px -96px; 1304 | } 1305 | 1306 | .jsoneditor-menu > button.jsoneditor-redo:disabled { 1307 | background-position: -48px -120px; 1308 | } 1309 | 1310 | .jsoneditor-menu > button.jsoneditor-compact { 1311 | background-position: -72px -96px; 1312 | } 1313 | 1314 | .jsoneditor-menu > button.jsoneditor-format { 1315 | background-position: -72px -120px; 1316 | } 1317 | 1318 | .jsoneditor-menu > button.jsoneditor-repair { 1319 | background-position: -96px -96px; 1320 | } 1321 | 1322 | .jsoneditor-menu > .jsoneditor-modes { 1323 | display: inline-block; 1324 | float: left; 1325 | } 1326 | 1327 | .jsoneditor-menu > .jsoneditor-modes > button { 1328 | background-image: none; 1329 | width: auto; 1330 | padding-left: 6px; 1331 | padding-right: 6px; 1332 | } 1333 | 1334 | .jsoneditor-menu > button.jsoneditor-separator, 1335 | .jsoneditor-menu > .jsoneditor-modes > button.jsoneditor-separator { 1336 | margin-left: 10px; 1337 | } 1338 | 1339 | .jsoneditor-menu a { 1340 | font-family: arial, sans-serif; 1341 | font-size: 14px; 1342 | color: #ffffff; 1343 | opacity: 0.8; 1344 | vertical-align: middle; 1345 | } 1346 | 1347 | .jsoneditor-menu a:hover { 1348 | opacity: 1; 1349 | } 1350 | 1351 | .jsoneditor-menu .jsoneditor-poweredBy { 1352 | font-size: 8pt; 1353 | position: absolute; 1354 | right: 0; 1355 | top: 0; 1356 | padding: 10px; 1357 | } 1358 | .jsoneditor-menu .jsoneditor-poweredBy a { 1359 | font-size: 8pt; 1360 | } 1361 | 1362 | .jsoneditor-navigation-bar { 1363 | width: 100%; 1364 | height: 26px; 1365 | line-height: 26px; 1366 | padding: 0; 1367 | margin: 0; 1368 | border-bottom: 1px solid #d3d3d3; 1369 | -moz-box-sizing: border-box; 1370 | -webkit-box-sizing: border-box; 1371 | box-sizing: border-box; 1372 | color: #808080; 1373 | background-color: #ebebeb; 1374 | overflow: hidden; 1375 | font-family: arial, sans-serif; 1376 | font-size: 14px; 1377 | } 1378 | 1379 | .jsoneditor-search { 1380 | font-family: arial, sans-serif; 1381 | position: absolute; 1382 | right: 4px; 1383 | top: 4px; 1384 | border-collapse: collapse; 1385 | border-spacing: 0; 1386 | display: flex; 1387 | } 1388 | 1389 | .jsoneditor-search input { 1390 | color: #1a1a1a; 1391 | width: 120px; 1392 | border: none; 1393 | outline: none; 1394 | margin: 1px; 1395 | line-height: 20px; 1396 | font-family: arial, sans-serif; 1397 | } 1398 | 1399 | .jsoneditor-search button { 1400 | width: 16px; 1401 | height: 24px; 1402 | padding: 0; 1403 | margin: 0; 1404 | border: none; 1405 | background: url("./img/jsoneditor-icons.svg"); 1406 | vertical-align: top; 1407 | } 1408 | 1409 | .jsoneditor-search button:hover { 1410 | background-color: transparent; 1411 | } 1412 | 1413 | .jsoneditor-search button.jsoneditor-refresh { 1414 | width: 18px; 1415 | background-position: -99px -73px; 1416 | } 1417 | 1418 | .jsoneditor-search button.jsoneditor-next { 1419 | cursor: pointer; 1420 | background-position: -124px -73px; 1421 | } 1422 | 1423 | .jsoneditor-search button.jsoneditor-next:hover { 1424 | background-position: -124px -49px; 1425 | } 1426 | 1427 | .jsoneditor-search button.jsoneditor-previous { 1428 | cursor: pointer; 1429 | background-position: -148px -73px; 1430 | margin-right: 2px; 1431 | } 1432 | 1433 | .jsoneditor-search button.jsoneditor-previous:hover { 1434 | background-position: -148px -49px; 1435 | } 1436 | 1437 | .jsoneditor-results { 1438 | font-family: arial, sans-serif; 1439 | color: #ffffff; 1440 | padding-right: 5px; 1441 | line-height: 26px; 1442 | } 1443 | 1444 | .jsoneditor-frame { 1445 | border: 1px solid transparent; 1446 | background-color: #ffffff; 1447 | padding: 0 2px; 1448 | margin: 0; 1449 | } 1450 | 1451 | .jsoneditor-statusbar { 1452 | line-height: 26px; 1453 | height: 26px; 1454 | color: #808080; 1455 | background-color: #ebebeb; 1456 | border-top: 1px solid #d3d3d3; 1457 | -moz-box-sizing: border-box; 1458 | -webkit-box-sizing: border-box; 1459 | box-sizing: border-box; 1460 | font-size: 14px; 1461 | } 1462 | 1463 | .jsoneditor-statusbar > .jsoneditor-curserinfo-val { 1464 | margin-right: 12px; 1465 | } 1466 | 1467 | .jsoneditor-statusbar > .jsoneditor-curserinfo-count { 1468 | margin-left: 4px; 1469 | } 1470 | 1471 | .jsoneditor-statusbar > .jsoneditor-validation-error-icon { 1472 | float: right; 1473 | width: 24px; 1474 | height: 24px; 1475 | padding: 0; 1476 | margin-top: 1px; 1477 | background-image: url("./img/jsoneditor-icons.svg"); 1478 | background-position: -168px -48px; 1479 | cursor: pointer; 1480 | } 1481 | 1482 | .jsoneditor-statusbar > .jsoneditor-validation-error-count { 1483 | float: right; 1484 | margin: 0 4px 0 0; 1485 | cursor: pointer; 1486 | } 1487 | 1488 | .jsoneditor-statusbar > .jsoneditor-parse-error-icon { 1489 | float: right; 1490 | width: 24px; 1491 | height: 24px; 1492 | padding: 0; 1493 | margin: 1px; 1494 | background-image: url("./img/jsoneditor-icons.svg"); 1495 | background-position: -25px 0px; 1496 | } 1497 | 1498 | .jsoneditor-statusbar .jsoneditor-array-info a { 1499 | color: inherit; 1500 | } 1501 | 1502 | div.jsoneditor-statusbar > .jsoneditor-curserinfo-label, 1503 | div.jsoneditor-statusbar > .jsoneditor-size-info { 1504 | margin: 0 4px; 1505 | } 1506 | 1507 | .jsoneditor-treepath { 1508 | padding: 0 5px; 1509 | overflow: hidden; 1510 | white-space: nowrap; 1511 | outline: none; 1512 | } 1513 | 1514 | .jsoneditor-treepath.show-all { 1515 | word-wrap: break-word; 1516 | white-space: normal; 1517 | position: absolute; 1518 | background-color: #ebebeb; 1519 | z-index: 1; 1520 | box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3); 1521 | } 1522 | 1523 | .jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn { 1524 | display: none; 1525 | } 1526 | 1527 | .jsoneditor-treepath div.jsoneditor-contextmenu-root { 1528 | position: absolute; 1529 | left: 0; 1530 | } 1531 | 1532 | .jsoneditor-treepath .jsoneditor-treepath-show-all-btn { 1533 | position: absolute; 1534 | background-color: #ebebeb; 1535 | left: 0; 1536 | height: 20px; 1537 | padding: 0 3px; 1538 | cursor: pointer; 1539 | } 1540 | 1541 | .jsoneditor-treepath .jsoneditor-treepath-element { 1542 | margin: 1px; 1543 | font-family: arial, sans-serif; 1544 | font-size: 14px; 1545 | } 1546 | 1547 | .jsoneditor-treepath .jsoneditor-treepath-seperator { 1548 | margin: 2px; 1549 | font-size: 9pt; 1550 | font-family: arial, sans-serif; 1551 | } 1552 | 1553 | .jsoneditor-treepath span.jsoneditor-treepath-element:hover, 1554 | .jsoneditor-treepath span.jsoneditor-treepath-seperator:hover { 1555 | cursor: pointer; 1556 | text-decoration: underline; 1557 | } 1558 | 1559 | /*! 1560 | * Selectr 2.4.0 1561 | * https://github.com/Mobius1/Selectr 1562 | * 1563 | * Released under the MIT license 1564 | */ 1565 | 1566 | .selectr-container { 1567 | position: relative; 1568 | } 1569 | 1570 | .selectr-container li { 1571 | list-style: none; 1572 | } 1573 | 1574 | .selectr-hidden { 1575 | position: absolute; 1576 | overflow: hidden; 1577 | clip: rect(0px, 0px, 0px, 0px); 1578 | width: 1px; 1579 | height: 1px; 1580 | margin: -1px; 1581 | padding: 0; 1582 | border: 0 none; 1583 | } 1584 | 1585 | .selectr-visible { 1586 | position: absolute; 1587 | left: 0; 1588 | top: 0; 1589 | width: 100%; 1590 | height: 100%; 1591 | opacity: 0; 1592 | z-index: 11; 1593 | } 1594 | 1595 | .selectr-desktop.multiple .selectr-visible { 1596 | display: none; 1597 | } 1598 | 1599 | .selectr-desktop.multiple.native-open .selectr-visible { 1600 | top: 100%; 1601 | min-height: 200px !important; 1602 | height: auto; 1603 | opacity: 1; 1604 | display: block; 1605 | } 1606 | 1607 | .selectr-container.multiple.selectr-mobile .selectr-selected { 1608 | z-index: 0; 1609 | } 1610 | 1611 | .selectr-selected { 1612 | position: relative; 1613 | z-index: 1; 1614 | box-sizing: border-box; 1615 | width: 100%; 1616 | padding: 7px 28px 7px 14px; 1617 | cursor: pointer; 1618 | border: 1px solid #999999; 1619 | border-radius: 3px; 1620 | background-color: #ffffff; 1621 | } 1622 | 1623 | .selectr-selected::before { 1624 | position: absolute; 1625 | top: 50%; 1626 | right: 10px; 1627 | width: 0; 1628 | height: 0; 1629 | content: ""; 1630 | -o-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1631 | -ms-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1632 | -moz-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1633 | -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1634 | transform: rotate(0deg) translate3d(0px, -50%, 0px); 1635 | border-width: 4px 4px 0 4px; 1636 | border-style: solid; 1637 | border-color: #6c7a86 transparent transparent; 1638 | } 1639 | 1640 | .selectr-container.open .selectr-selected::before, 1641 | .selectr-container.native-open .selectr-selected::before { 1642 | border-width: 0 4px 4px 4px; 1643 | border-style: solid; 1644 | border-color: transparent transparent #6c7a86; 1645 | } 1646 | 1647 | .selectr-label { 1648 | display: none; 1649 | overflow: hidden; 1650 | width: 100%; 1651 | white-space: nowrap; 1652 | text-overflow: ellipsis; 1653 | } 1654 | 1655 | .selectr-placeholder { 1656 | color: #6c7a86; 1657 | } 1658 | 1659 | .selectr-tags { 1660 | margin: 0; 1661 | padding: 0; 1662 | white-space: normal; 1663 | } 1664 | 1665 | .has-selected .selectr-tags { 1666 | margin: 0 0 -2px; 1667 | } 1668 | 1669 | .selectr-tag { 1670 | list-style: none; 1671 | position: relative; 1672 | float: left; 1673 | padding: 2px 25px 2px 8px; 1674 | margin: 0 2px 2px 0; 1675 | cursor: default; 1676 | color: #ffffff; 1677 | border: medium none; 1678 | border-radius: 10px; 1679 | background: #acb7bf none repeat scroll 0 0; 1680 | } 1681 | 1682 | .selectr-container.multiple.has-selected .selectr-selected { 1683 | padding: 5px 28px 5px 5px; 1684 | } 1685 | 1686 | .selectr-options-container { 1687 | position: absolute; 1688 | z-index: 10000; 1689 | top: calc(100% - 1px); 1690 | left: 0; 1691 | display: none; 1692 | box-sizing: border-box; 1693 | width: 100%; 1694 | border-width: 0 1px 1px; 1695 | border-style: solid; 1696 | border-color: transparent #999999 #999999; 1697 | border-radius: 0 0 3px 3px; 1698 | background-color: #ffffff; 1699 | } 1700 | 1701 | .selectr-container.open .selectr-options-container { 1702 | display: block; 1703 | } 1704 | 1705 | .selectr-input-container { 1706 | position: relative; 1707 | display: none; 1708 | } 1709 | 1710 | .selectr-clear, 1711 | .selectr-input-clear, 1712 | .selectr-tag-remove { 1713 | position: absolute; 1714 | top: 50%; 1715 | right: 22px; 1716 | width: 20px; 1717 | height: 20px; 1718 | padding: 0; 1719 | cursor: pointer; 1720 | -o-transform: translate3d(0px, -50%, 0px); 1721 | -ms-transform: translate3d(0px, -50%, 0px); 1722 | -moz-transform: translate3d(0px, -50%, 0px); 1723 | -webkit-transform: translate3d(0px, -50%, 0px); 1724 | transform: translate3d(0px, -50%, 0px); 1725 | border: medium none; 1726 | background-color: transparent; 1727 | z-index: 11; 1728 | } 1729 | 1730 | .selectr-clear, 1731 | .selectr-input-clear { 1732 | display: none; 1733 | } 1734 | 1735 | .selectr-container.has-selected .selectr-clear, 1736 | .selectr-input-container.active .selectr-input-clear { 1737 | display: block; 1738 | } 1739 | 1740 | .selectr-selected .selectr-tag-remove { 1741 | right: 2px; 1742 | } 1743 | 1744 | .selectr-clear::before, 1745 | .selectr-clear::after, 1746 | .selectr-input-clear::before, 1747 | .selectr-input-clear::after, 1748 | .selectr-tag-remove::before, 1749 | .selectr-tag-remove::after { 1750 | position: absolute; 1751 | top: 5px; 1752 | left: 9px; 1753 | width: 2px; 1754 | height: 10px; 1755 | content: " "; 1756 | background-color: #6c7a86; 1757 | } 1758 | 1759 | .selectr-tag-remove::before, 1760 | .selectr-tag-remove::after { 1761 | top: 4px; 1762 | width: 3px; 1763 | height: 12px; 1764 | background-color: #ffffff; 1765 | } 1766 | 1767 | .selectr-clear:before, 1768 | .selectr-input-clear::before, 1769 | .selectr-tag-remove::before { 1770 | -o-transform: rotate(45deg); 1771 | -ms-transform: rotate(45deg); 1772 | -moz-transform: rotate(45deg); 1773 | -webkit-transform: rotate(45deg); 1774 | transform: rotate(45deg); 1775 | } 1776 | 1777 | .selectr-clear:after, 1778 | .selectr-input-clear::after, 1779 | .selectr-tag-remove::after { 1780 | -o-transform: rotate(-45deg); 1781 | -ms-transform: rotate(-45deg); 1782 | -moz-transform: rotate(-45deg); 1783 | -webkit-transform: rotate(-45deg); 1784 | transform: rotate(-45deg); 1785 | } 1786 | 1787 | .selectr-input-container.active, 1788 | .selectr-input-container.active .selectr-clear { 1789 | display: block; 1790 | } 1791 | 1792 | .selectr-input { 1793 | top: 5px; 1794 | left: 5px; 1795 | box-sizing: border-box; 1796 | width: calc(100% - 30px); 1797 | margin: 10px 15px; 1798 | padding: 7px 30px 7px 9px; 1799 | border: 1px solid #999999; 1800 | border-radius: 3px; 1801 | } 1802 | 1803 | .selectr-notice { 1804 | display: none; 1805 | box-sizing: border-box; 1806 | width: 100%; 1807 | padding: 8px 16px; 1808 | border-top: 1px solid #999999; 1809 | border-radius: 0 0 3px 3px; 1810 | background-color: #ffffff; 1811 | } 1812 | 1813 | .selectr-container.notice .selectr-notice { 1814 | display: block; 1815 | } 1816 | 1817 | .selectr-container.notice .selectr-selected { 1818 | border-radius: 3px 3px 0 0; 1819 | } 1820 | 1821 | .selectr-options { 1822 | position: relative; 1823 | top: calc(100% + 2px); 1824 | display: none; 1825 | overflow-x: auto; 1826 | overflow-y: scroll; 1827 | max-height: 200px; 1828 | margin: 0; 1829 | padding: 0; 1830 | } 1831 | 1832 | .selectr-container.open .selectr-options, 1833 | .selectr-container.open .selectr-input-container, 1834 | .selectr-container.notice .selectr-options-container { 1835 | display: block; 1836 | } 1837 | 1838 | .selectr-option { 1839 | position: relative; 1840 | display: block; 1841 | padding: 5px 20px; 1842 | list-style: outside none none; 1843 | cursor: pointer; 1844 | font-weight: normal; 1845 | } 1846 | 1847 | .selectr-options.optgroups > .selectr-option { 1848 | padding-left: 25px; 1849 | } 1850 | 1851 | .selectr-optgroup { 1852 | font-weight: bold; 1853 | padding: 0; 1854 | } 1855 | 1856 | .selectr-optgroup--label { 1857 | font-weight: bold; 1858 | margin-top: 10px; 1859 | padding: 5px 15px; 1860 | } 1861 | 1862 | .selectr-match { 1863 | text-decoration: underline; 1864 | } 1865 | 1866 | .selectr-option.selected { 1867 | background-color: #ddd; 1868 | } 1869 | 1870 | .selectr-option.active { 1871 | color: #ffffff; 1872 | background-color: #5897fb; 1873 | } 1874 | 1875 | .selectr-option.disabled { 1876 | opacity: 0.4; 1877 | } 1878 | 1879 | .selectr-option.excluded { 1880 | display: none; 1881 | } 1882 | 1883 | .selectr-container.open .selectr-selected { 1884 | border-color: #999999 #999999 transparent #999999; 1885 | border-radius: 3px 3px 0 0; 1886 | } 1887 | 1888 | .selectr-container.open .selectr-selected::after { 1889 | -o-transform: rotate(180deg) translate3d(0px, 50%, 0px); 1890 | -ms-transform: rotate(180deg) translate3d(0px, 50%, 0px); 1891 | -moz-transform: rotate(180deg) translate3d(0px, 50%, 0px); 1892 | -webkit-transform: rotate(180deg) translate3d(0px, 50%, 0px); 1893 | transform: rotate(180deg) translate3d(0px, 50%, 0px); 1894 | } 1895 | 1896 | .selectr-disabled { 1897 | opacity: 0.6; 1898 | } 1899 | 1900 | .selectr-empty, 1901 | .has-selected .selectr-placeholder { 1902 | display: none; 1903 | } 1904 | 1905 | .has-selected .selectr-label { 1906 | display: block; 1907 | } 1908 | 1909 | /* TAGGABLE */ 1910 | 1911 | .taggable .selectr-selected { 1912 | padding: 4px 28px 4px 4px; 1913 | } 1914 | 1915 | .taggable .selectr-selected::after { 1916 | display: table; 1917 | content: " "; 1918 | clear: both; 1919 | } 1920 | 1921 | .taggable .selectr-label { 1922 | width: auto; 1923 | } 1924 | 1925 | .taggable .selectr-tags { 1926 | float: left; 1927 | display: block; 1928 | } 1929 | 1930 | .taggable .selectr-placeholder { 1931 | display: none; 1932 | } 1933 | 1934 | .input-tag { 1935 | float: left; 1936 | min-width: 90px; 1937 | width: auto; 1938 | } 1939 | 1940 | .selectr-tag-input { 1941 | border: medium none; 1942 | padding: 3px 10px; 1943 | width: 100%; 1944 | font-family: inherit; 1945 | font-weight: inherit; 1946 | font-size: inherit; 1947 | } 1948 | 1949 | .selectr-input-container.loading::after { 1950 | position: absolute; 1951 | top: 50%; 1952 | right: 20px; 1953 | width: 20px; 1954 | height: 20px; 1955 | content: ""; 1956 | -o-transform: translate3d(0px, -50%, 0px); 1957 | -ms-transform: translate3d(0px, -50%, 0px); 1958 | -moz-transform: translate3d(0px, -50%, 0px); 1959 | -webkit-transform: translate3d(0px, -50%, 0px); 1960 | transform: translate3d(0px, -50%, 0px); 1961 | -o-transform-origin: 50% 0 0; 1962 | -ms-transform-origin: 50% 0 0; 1963 | -moz-transform-origin: 50% 0 0; 1964 | -webkit-transform-origin: 50% 0 0; 1965 | transform-origin: 50% 0 0; 1966 | -moz-animation: 500ms linear 0s normal forwards infinite running selectr-spin; 1967 | -webkit-animation: 500ms linear 0s normal forwards infinite running selectr-spin; 1968 | animation: 500ms linear 0s normal forwards infinite running selectr-spin; 1969 | border-width: 3px; 1970 | border-style: solid; 1971 | border-color: #aaa #ddd #ddd; 1972 | border-radius: 50%; 1973 | } 1974 | 1975 | @-webkit-keyframes selectr-spin { 1976 | 0% { 1977 | -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1978 | transform: rotate(0deg) translate3d(0px, -50%, 0px); 1979 | } 1980 | 1981 | 100% { 1982 | -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px); 1983 | transform: rotate(360deg) translate3d(0px, -50%, 0px); 1984 | } 1985 | } 1986 | 1987 | @keyframes selectr-spin { 1988 | 0% { 1989 | -webkit-transform: rotate(0deg) translate3d(0px, -50%, 0px); 1990 | transform: rotate(0deg) translate3d(0px, -50%, 0px); 1991 | } 1992 | 1993 | 100% { 1994 | -webkit-transform: rotate(360deg) translate3d(0px, -50%, 0px); 1995 | transform: rotate(360deg) translate3d(0px, -50%, 0px); 1996 | } 1997 | } 1998 | 1999 | .selectr-container.open.inverted .selectr-selected { 2000 | border-color: transparent #999999 #999999; 2001 | border-radius: 0 0 3px 3px; 2002 | } 2003 | 2004 | .selectr-container.inverted .selectr-options-container { 2005 | border-width: 1px 1px 0; 2006 | border-color: #999999 #999999 transparent; 2007 | border-radius: 3px 3px 0 0; 2008 | background-color: #ffffff; 2009 | } 2010 | 2011 | .selectr-container.inverted .selectr-options-container { 2012 | top: auto; 2013 | bottom: calc(100% - 1px); 2014 | } 2015 | 2016 | .selectr-container ::-webkit-input-placeholder { 2017 | color: #6c7a86; 2018 | opacity: 1; 2019 | } 2020 | 2021 | .selectr-container ::-moz-placeholder { 2022 | color: #6c7a86; 2023 | opacity: 1; 2024 | } 2025 | 2026 | .selectr-container :-ms-input-placeholder { 2027 | color: #6c7a86; 2028 | opacity: 1; 2029 | } 2030 | 2031 | .selectr-container ::placeholder { 2032 | color: #6c7a86; 2033 | opacity: 1; 2034 | } -------------------------------------------------------------------------------- /resources/localforage.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | localForage -- Offline Storage, Improved 3 | Version 1.10.0 4 | https://localforage.github.io/localForage 5 | (c) 2013-2017 Mozilla, Apache License 2.0 6 | */ 7 | !function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.localforage=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c||a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g=43)}}).catch(function(){return!1})}function n(a){return"boolean"==typeof xa?va.resolve(xa):m(a).then(function(a){return xa=a})}function o(a){var b=ya[a.name],c={};c.promise=new va(function(a,b){c.resolve=a,c.reject=b}),b.deferredOperations.push(c),b.dbReady?b.dbReady=b.dbReady.then(function(){return c.promise}):b.dbReady=c.promise}function p(a){var b=ya[a.name],c=b.deferredOperations.pop();if(c)return c.resolve(),c.promise}function q(a,b){var c=ya[a.name],d=c.deferredOperations.pop();if(d)return d.reject(b),d.promise}function r(a,b){return new va(function(c,d){if(ya[a.name]=ya[a.name]||B(),a.db){if(!b)return c(a.db);o(a),a.db.close()}var e=[a.name];b&&e.push(a.version);var f=ua.open.apply(ua,e);b&&(f.onupgradeneeded=function(b){var c=f.result;try{c.createObjectStore(a.storeName),b.oldVersion<=1&&c.createObjectStore(wa)}catch(c){if("ConstraintError"!==c.name)throw c;console.warn('The database "'+a.name+'" has been upgraded from version '+b.oldVersion+" to version "+b.newVersion+', but the storage "'+a.storeName+'" already exists.')}}),f.onerror=function(a){a.preventDefault(),d(f.error)},f.onsuccess=function(){var b=f.result;b.onversionchange=function(a){a.target.close()},c(b),p(a)}})}function s(a){return r(a,!1)}function t(a){return r(a,!0)}function u(a,b){if(!a.db)return!0;var c=!a.db.objectStoreNames.contains(a.storeName),d=a.versiona.db.version;if(d&&(a.version!==b&&console.warn('The database "'+a.name+"\" can't be downgraded from version "+a.db.version+" to version "+a.version+"."),a.version=a.db.version),e||c){if(c){var f=a.db.version+1;f>a.version&&(a.version=f)}return!0}return!1}function v(a){return new va(function(b,c){var d=new FileReader;d.onerror=c,d.onloadend=function(c){var d=btoa(c.target.result||"");b({__local_forage_encoded_blob:!0,data:d,type:a.type})},d.readAsBinaryString(a)})}function w(a){return g([l(atob(a.data))],{type:a.type})}function x(a){return a&&a.__local_forage_encoded_blob}function y(a){var b=this,c=b._initReady().then(function(){var a=ya[b._dbInfo.name];if(a&&a.dbReady)return a.dbReady});return i(c,a,a),c}function z(a){o(a);for(var b=ya[a.name],c=b.forages,d=0;d0&&(!a.db||"InvalidStateError"===e.name||"NotFoundError"===e.name))return va.resolve().then(function(){if(!a.db||"NotFoundError"===e.name&&!a.db.objectStoreNames.contains(a.storeName)&&a.version<=a.db.version)return a.db&&(a.version=a.db.version+1),t(a)}).then(function(){return z(a).then(function(){A(a,b,c,d-1)})}).catch(c);c(e)}}function B(){return{forages:[],db:null,dbReady:null,deferredOperations:[]}}function C(a){function b(){return va.resolve()}var c=this,d={db:null};if(a)for(var e in a)d[e]=a[e];var f=ya[d.name];f||(f=B(),ya[d.name]=f),f.forages.push(c),c._initReady||(c._initReady=c.ready,c.ready=y);for(var g=[],h=0;h>4,k[i++]=(15&d)<<4|e>>2,k[i++]=(3&e)<<6|63&f;return j}function O(a){var b,c=new Uint8Array(a),d="";for(b=0;b>2],d+=Da[(3&c[b])<<4|c[b+1]>>4],d+=Da[(15&c[b+1])<<2|c[b+2]>>6],d+=Da[63&c[b+2]];return c.length%3==2?d=d.substring(0,d.length-1)+"=":c.length%3==1&&(d=d.substring(0,d.length-2)+"=="),d}function P(a,b){var c="";if(a&&(c=Ua.call(a)),a&&("[object ArrayBuffer]"===c||a.buffer&&"[object ArrayBuffer]"===Ua.call(a.buffer))){var d,e=Ga;a instanceof ArrayBuffer?(d=a,e+=Ia):(d=a.buffer,"[object Int8Array]"===c?e+=Ka:"[object Uint8Array]"===c?e+=La:"[object Uint8ClampedArray]"===c?e+=Ma:"[object Int16Array]"===c?e+=Na:"[object Uint16Array]"===c?e+=Pa:"[object Int32Array]"===c?e+=Oa:"[object Uint32Array]"===c?e+=Qa:"[object Float32Array]"===c?e+=Ra:"[object Float64Array]"===c?e+=Sa:b(new Error("Failed to get type for BinaryArray"))),b(e+O(d))}else if("[object Blob]"===c){var f=new FileReader;f.onload=function(){var c=Ea+a.type+"~"+O(this.result);b(Ga+Ja+c)},f.readAsArrayBuffer(a)}else try{b(JSON.stringify(a))}catch(c){console.error("Couldn't convert value into a JSON string: ",a),b(null,c)}}function Q(a){if(a.substring(0,Ha)!==Ga)return JSON.parse(a);var b,c=a.substring(Ta),d=a.substring(Ha,Ta);if(d===Ja&&Fa.test(c)){var e=c.match(Fa);b=e[1],c=c.substring(e[0].length)}var f=N(c);switch(d){case Ia:return f;case Ja:return g([f],{type:b});case Ka:return new Int8Array(f);case La:return new Uint8Array(f);case Ma:return new Uint8ClampedArray(f);case Na:return new Int16Array(f);case Pa:return new Uint16Array(f);case Oa:return new Int32Array(f);case Qa:return new Uint32Array(f);case Ra:return new Float32Array(f);case Sa:return new Float64Array(f);default:throw new Error("Unkown type: "+d)}}function R(a,b,c,d){a.executeSql("CREATE TABLE IF NOT EXISTS "+b.storeName+" (id INTEGER PRIMARY KEY, key unique, value)",[],c,d)}function S(a){var b=this,c={db:null};if(a)for(var d in a)c[d]="string"!=typeof a[d]?a[d].toString():a[d];var e=new va(function(a,d){try{c.db=openDatabase(c.name,String(c.version),c.description,c.size)}catch(a){return d(a)}c.db.transaction(function(e){R(e,c,function(){b._dbInfo=c,a()},function(a,b){d(b)})},d)});return c.serializer=Va,e}function T(a,b,c,d,e,f){a.executeSql(c,d,e,function(a,g){g.code===g.SYNTAX_ERR?a.executeSql("SELECT name FROM sqlite_master WHERE type='table' AND name = ?",[b.storeName],function(a,h){h.rows.length?f(a,g):R(a,b,function(){a.executeSql(c,d,e,f)},f)},f):f(a,g)},f)}function U(a,b){var c=this;a=j(a);var d=new va(function(b,d){c.ready().then(function(){var e=c._dbInfo;e.db.transaction(function(c){T(c,e,"SELECT * FROM "+e.storeName+" WHERE key = ? LIMIT 1",[a],function(a,c){var d=c.rows.length?c.rows.item(0).value:null;d&&(d=e.serializer.deserialize(d)),b(d)},function(a,b){d(b)})})}).catch(d)});return h(d,b),d}function V(a,b){var c=this,d=new va(function(b,d){c.ready().then(function(){var e=c._dbInfo;e.db.transaction(function(c){T(c,e,"SELECT * FROM "+e.storeName,[],function(c,d){for(var f=d.rows,g=f.length,h=0;h0)return void f(W.apply(e,[a,h,c,d-1]));g(b)}})})}).catch(g)});return h(f,c),f}function X(a,b,c){return W.apply(this,[a,b,c,1])}function Y(a,b){var c=this;a=j(a);var d=new va(function(b,d){c.ready().then(function(){var e=c._dbInfo;e.db.transaction(function(c){T(c,e,"DELETE FROM "+e.storeName+" WHERE key = ?",[a],function(){b()},function(a,b){d(b)})})}).catch(d)});return h(d,b),d}function Z(a){var b=this,c=new va(function(a,c){b.ready().then(function(){var d=b._dbInfo;d.db.transaction(function(b){T(b,d,"DELETE FROM "+d.storeName,[],function(){a()},function(a,b){c(b)})})}).catch(c)});return h(c,a),c}function $(a){var b=this,c=new va(function(a,c){b.ready().then(function(){var d=b._dbInfo;d.db.transaction(function(b){T(b,d,"SELECT COUNT(key) as c FROM "+d.storeName,[],function(b,c){var d=c.rows.item(0).c;a(d)},function(a,b){c(b)})})}).catch(c)});return h(c,a),c}function _(a,b){var c=this,d=new va(function(b,d){c.ready().then(function(){var e=c._dbInfo;e.db.transaction(function(c){T(c,e,"SELECT key FROM "+e.storeName+" WHERE id = ? LIMIT 1",[a+1],function(a,c){var d=c.rows.length?c.rows.item(0).key:null;b(d)},function(a,b){d(b)})})}).catch(d)});return h(d,b),d}function aa(a){var b=this,c=new va(function(a,c){b.ready().then(function(){var d=b._dbInfo;d.db.transaction(function(b){T(b,d,"SELECT key FROM "+d.storeName,[],function(b,c){for(var d=[],e=0;e '__WebKitDatabaseInfoTable__'",[],function(c,d){for(var e=[],f=0;f0}function ha(a){var b=this,c={};if(a)for(var d in a)c[d]=a[d];return c.keyPrefix=ea(a,b._defaultConfig),ga()?(b._dbInfo=c,c.serializer=Va,va.resolve()):va.reject()}function ia(a){var b=this,c=b.ready().then(function(){for(var a=b._dbInfo.keyPrefix,c=localStorage.length-1;c>=0;c--){var d=localStorage.key(c);0===d.indexOf(a)&&localStorage.removeItem(d)}});return h(c,a),c}function ja(a,b){var c=this;a=j(a);var d=c.ready().then(function(){var b=c._dbInfo,d=localStorage.getItem(b.keyPrefix+a);return d&&(d=b.serializer.deserialize(d)),d});return h(d,b),d}function ka(a,b){var c=this,d=c.ready().then(function(){for(var b=c._dbInfo,d=b.keyPrefix,e=d.length,f=localStorage.length,g=1,h=0;h=0;b--){var c=localStorage.key(b);0===c.indexOf(a)&&localStorage.removeItem(c)}}):va.reject("Invalid arguments"),h(d,b),d}function ra(a,b){a[b]=function(){var c=arguments;return a.ready().then(function(){return a[b].apply(a,c)})}}function sa(){for(var a=1;a { 7 | try { 8 | localforage.setItem(jsonkey,editor.get()) 9 | } catch (e) {} 10 | }, 11 | } 12 | 13 | const mode = window.location.search.substring(1) 14 | const editor = new JSONEditor(container, options) 15 | async function init() { 16 | let json = '' 17 | try { 18 | try{ 19 | // 获取url后面的json字符串 20 | if (!mode || mode == '') { 21 | json = await localforage.getItem(jsonkey) || json 22 | } else if ('none' == mode) { 23 | json = '' 24 | } else if ('clipboard' == mode) { 25 | chrome.runtime.sendMessage({}, function (response){ 26 | json = response.clipboard; 27 | try { 28 | editor.set(JSON.parse(json)) 29 | } catch(e) { } 30 | }); 31 | return 32 | } 33 | }catch(e) { 34 | json = await localforage.getItem(jsonkey) || json 35 | } 36 | } catch (e) { } 37 | if (json) { 38 | editor.set(json) 39 | } else { 40 | editor.setText(json) 41 | } 42 | } 43 | init() 44 | 45 | editor.focus() 46 | // 设置JSONEditor实例 47 | window.JSONEditorInstance = editor 48 | 49 | //加载时设置默认字体大小 50 | var font = parseInt(localStorage.getItem('jsonedit_fontsize')); 51 | if (font < 0) { 52 | font = 15; 53 | localStorage.setItem('jsonedit_fontsize', font); 54 | } 55 | document.querySelector('.ace_editor').style.fontSize = font + 'px'; 56 | -------------------------------------------------------------------------------- /resources/toast.min.css: -------------------------------------------------------------------------------- 1 | .toast{padding:15px 0;width:200px;font-family:sans-serif;font-weight:100;position:fixed;top:10px;right:0;color:#fff;animation-name:showToast;animation-duration:2.1s;box-shadow:3px 3px 3px #adadad}.toast.good{background:#009600}.toast.bad{background:#a00}.toast.warn{background:#d4ac00}.toast>p{margin:0;padding:0 10px}@keyframes showToast{0% {right: -250px} 10% {right: 10px} 90% {right: 10px} 100% {right: -250px}} 2 | -------------------------------------------------------------------------------- /resources/toast.min.js: -------------------------------------------------------------------------------- 1 | function toast(e,t){var n=document.createElement("div"),d=document.createElement("p");n.appendChild(d),d.innerHTML=t,n.className="toast "+e,document.body.appendChild(n),setTimeout(function(){document.body.removeChild(n)},2e3)} 2 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunzsh/chromeapp-jsonedit/ce02716e0b03f88dd5311cdaffdb30e338c6a0a7/screenshot.png --------------------------------------------------------------------------------