jsoneditor.css 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930
  1. /* reset styling (prevent conflicts with bootstrap, materialize.css, etc.) */
  2. div.jsoneditor .jsoneditor-search input {
  3. height: auto;
  4. border: inherit;
  5. }
  6. div.jsoneditor .jsoneditor-search input:focus {
  7. border: none !important;
  8. box-shadow: none !important;
  9. }
  10. div.jsoneditor table {
  11. border-collapse: collapse;
  12. width: auto;
  13. }
  14. div.jsoneditor td,
  15. div.jsoneditor th {
  16. padding: 0;
  17. display: table-cell;
  18. text-align: left;
  19. vertical-align: inherit;
  20. border-radius: inherit;
  21. }
  22. div.jsoneditor-field,
  23. div.jsoneditor-value,
  24. div.jsoneditor-readonly {
  25. border: 1px solid transparent;
  26. min-height: 16px;
  27. min-width: 32px;
  28. padding: 2px;
  29. margin: 1px;
  30. word-wrap: break-word;
  31. float: left;
  32. }
  33. /* adjust margin of p elements inside editable divs, needed for Opera, IE */
  34. div.jsoneditor-field p,
  35. div.jsoneditor-value p {
  36. margin: 0;
  37. }
  38. div.jsoneditor-value {
  39. word-break: break-word;
  40. }
  41. div.jsoneditor-readonly {
  42. min-width: 16px;
  43. color: gray;
  44. }
  45. div.jsoneditor-empty {
  46. border-color: lightgray;
  47. border-style: dashed;
  48. border-radius: 2px;
  49. }
  50. div.jsoneditor-field.jsoneditor-empty::after,
  51. div.jsoneditor-value.jsoneditor-empty::after {
  52. pointer-events: none;
  53. color: lightgray;
  54. font-size: 8pt;
  55. }
  56. div.jsoneditor-field.jsoneditor-empty::after {
  57. content: "field";
  58. }
  59. div.jsoneditor-value.jsoneditor-empty::after {
  60. content: "value";
  61. }
  62. div.jsoneditor-value.jsoneditor-url,
  63. a.jsoneditor-value.jsoneditor-url {
  64. color: green;
  65. text-decoration: underline;
  66. }
  67. a.jsoneditor-value.jsoneditor-url {
  68. display: inline-block;
  69. padding: 2px;
  70. margin: 2px;
  71. }
  72. a.jsoneditor-value.jsoneditor-url:hover,
  73. a.jsoneditor-value.jsoneditor-url:focus {
  74. color: #ee422e;
  75. }
  76. div.jsoneditor td.jsoneditor-separator {
  77. padding: 3px 0;
  78. vertical-align: top;
  79. color: gray;
  80. }
  81. div.jsoneditor-field[contenteditable=true]:focus,
  82. div.jsoneditor-field[contenteditable=true]:hover,
  83. div.jsoneditor-value[contenteditable=true]:focus,
  84. div.jsoneditor-value[contenteditable=true]:hover,
  85. div.jsoneditor-field.jsoneditor-highlight,
  86. div.jsoneditor-value.jsoneditor-highlight {
  87. background-color: #FFFFAB;
  88. border: 1px solid yellow;
  89. border-radius: 2px;
  90. }
  91. div.jsoneditor-field.jsoneditor-highlight-active,
  92. div.jsoneditor-field.jsoneditor-highlight-active:focus,
  93. div.jsoneditor-field.jsoneditor-highlight-active:hover,
  94. div.jsoneditor-value.jsoneditor-highlight-active,
  95. div.jsoneditor-value.jsoneditor-highlight-active:focus,
  96. div.jsoneditor-value.jsoneditor-highlight-active:hover {
  97. background-color: #ffee00;
  98. border: 1px solid #ffc700;
  99. border-radius: 2px;
  100. }
  101. div.jsoneditor-value.jsoneditor-string {
  102. color: #008000;
  103. }
  104. div.jsoneditor-value.jsoneditor-object,
  105. div.jsoneditor-value.jsoneditor-array {
  106. min-width: 16px;
  107. color: #808080;
  108. }
  109. div.jsoneditor-value.jsoneditor-number {
  110. color: #ee422e;
  111. }
  112. div.jsoneditor-value.jsoneditor-boolean {
  113. color: #ff8c00;
  114. }
  115. div.jsoneditor-value.jsoneditor-null {
  116. color: #004ED0;
  117. }
  118. div.jsoneditor-value.jsoneditor-invalid {
  119. color: #000000;
  120. }
  121. div.jsoneditor-tree button {
  122. width: 24px;
  123. height: 24px;
  124. padding: 0;
  125. margin: 0;
  126. border: none;
  127. cursor: pointer;
  128. background: transparent url("img/jsoneditor-icons.svg");
  129. }
  130. div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree,
  131. div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree {
  132. cursor: pointer;
  133. }
  134. div.jsoneditor-tree button.jsoneditor-collapsed {
  135. background-position: 0 -48px;
  136. }
  137. div.jsoneditor-tree button.jsoneditor-expanded {
  138. background-position: 0 -72px;
  139. }
  140. div.jsoneditor-tree button.jsoneditor-contextmenu {
  141. background-position: -48px -72px;
  142. }
  143. div.jsoneditor-tree button.jsoneditor-contextmenu:hover,
  144. div.jsoneditor-tree button.jsoneditor-contextmenu:focus,
  145. div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,
  146. tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
  147. background-position: -48px -48px;
  148. }
  149. div.jsoneditor-tree *:focus {
  150. outline: none;
  151. }
  152. div.jsoneditor-tree button:focus {
  153. /* TODO: nice outline for buttons with focus
  154. outline: #97B0F8 solid 2px;
  155. box-shadow: 0 0 8px #97B0F8;
  156. */
  157. background-color: #f5f5f5;
  158. outline: #e5e5e5 solid 1px;
  159. }
  160. div.jsoneditor-tree button.jsoneditor-invisible {
  161. visibility: hidden;
  162. background: none;
  163. }
  164. div.jsoneditor {
  165. color: #1A1A1A;
  166. border: 1px solid #3883fa;
  167. -moz-box-sizing: border-box;
  168. -webkit-box-sizing: border-box;
  169. box-sizing: border-box;
  170. width: 100%;
  171. height: 100%;
  172. overflow: hidden;
  173. position: relative;
  174. padding: 0;
  175. line-height: 100%;
  176. }
  177. div.jsoneditor-tree table.jsoneditor-tree {
  178. border-collapse: collapse;
  179. border-spacing: 0;
  180. width: 100%;
  181. margin: 0;
  182. }
  183. div.jsoneditor-outer {
  184. position: static;
  185. width: 100%;
  186. height: 100%;
  187. margin: -35px 0 0 0;
  188. padding: 35px 0 0 0;
  189. -moz-box-sizing: border-box;
  190. -webkit-box-sizing: border-box;
  191. box-sizing: border-box;
  192. }
  193. textarea.jsoneditor-text,
  194. .ace-jsoneditor {
  195. min-height: 150px;
  196. }
  197. div.jsoneditor-tree {
  198. width: 100%;
  199. height: 100%;
  200. position: relative;
  201. overflow: auto;
  202. }
  203. textarea.jsoneditor-text {
  204. width: 100%;
  205. height: 100%;
  206. margin: 0;
  207. -moz-box-sizing: border-box;
  208. -webkit-box-sizing: border-box;
  209. box-sizing: border-box;
  210. outline-width: 0;
  211. border: none;
  212. background-color: white;
  213. resize: none;
  214. }
  215. tr.jsoneditor-highlight,
  216. tr.jsoneditor-selected {
  217. background-color: #e6e6e6;
  218. }
  219. tr.jsoneditor-selected button.jsoneditor-dragarea,
  220. tr.jsoneditor-selected button.jsoneditor-contextmenu {
  221. visibility: hidden;
  222. }
  223. tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea,
  224. tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
  225. visibility: visible;
  226. }
  227. div.jsoneditor-tree button.jsoneditor-dragarea {
  228. background: url("img/jsoneditor-icons.svg") -72px -72px;
  229. cursor: move;
  230. }
  231. div.jsoneditor-tree button.jsoneditor-dragarea:hover,
  232. div.jsoneditor-tree button.jsoneditor-dragarea:focus,
  233. tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea {
  234. background-position: -72px -48px;
  235. }
  236. div.jsoneditor tr,
  237. div.jsoneditor th,
  238. div.jsoneditor td {
  239. padding: 0;
  240. margin: 0;
  241. }
  242. div.jsoneditor td {
  243. vertical-align: top;
  244. }
  245. div.jsoneditor td.jsoneditor-tree {
  246. vertical-align: top;
  247. }
  248. div.jsoneditor-field,
  249. div.jsoneditor-value,
  250. div.jsoneditor td,
  251. div.jsoneditor th,
  252. div.jsoneditor textarea,
  253. .jsoneditor-schema-error {
  254. font-family: droid sans mono, consolas, monospace, courier new, courier, sans-serif;
  255. font-size: 10pt;
  256. color: #1A1A1A;
  257. }
  258. /* popover */
  259. .jsoneditor-schema-error {
  260. cursor: default;
  261. display: inline-block;
  262. /*font-family: arial, sans-serif;*/
  263. height: 24px;
  264. line-height: 24px;
  265. position: relative;
  266. text-align: center;
  267. width: 24px;
  268. }
  269. div.jsoneditor-tree .jsoneditor-schema-error {
  270. width: 24px;
  271. height: 24px;
  272. padding: 0;
  273. margin: 0 4px 0 0;
  274. background: url("img/jsoneditor-icons.svg") -168px -48px;
  275. }
  276. .jsoneditor-schema-error .jsoneditor-popover {
  277. background-color: #4c4c4c;
  278. border-radius: 3px;
  279. box-shadow: 0 0 5px rgba(0,0,0,0.4);
  280. color: #fff;
  281. display: none;
  282. padding: 7px 10px;
  283. position: absolute;
  284. width: 200px;
  285. z-index: 4;
  286. }
  287. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above {
  288. bottom: 32px;
  289. left: -98px;
  290. }
  291. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below {
  292. top: 32px;
  293. left: -98px;
  294. }
  295. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left {
  296. top: -7px;
  297. right: 32px;
  298. }
  299. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right {
  300. top: -7px;
  301. left: 32px;
  302. }
  303. .jsoneditor-schema-error .jsoneditor-popover:before {
  304. border-right: 7px solid transparent;
  305. border-left: 7px solid transparent;
  306. content: '';
  307. display: block;
  308. left: 50%;
  309. margin-left: -7px;
  310. position: absolute;
  311. }
  312. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above:before {
  313. border-top: 7px solid #4c4c4c;
  314. bottom: -7px;
  315. }
  316. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below:before {
  317. border-bottom: 7px solid #4c4c4c;
  318. top: -7px;
  319. }
  320. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left:before {
  321. border-left: 7px solid #4c4c4c;
  322. border-top: 7px solid transparent;
  323. border-bottom: 7px solid transparent;
  324. content: '';
  325. top: 19px;
  326. right: -14px;
  327. left: inherit;
  328. margin-left: inherit;
  329. margin-top: -7px;
  330. position: absolute;
  331. }
  332. .jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right:before {
  333. border-right: 7px solid #4c4c4c;
  334. border-top: 7px solid transparent;
  335. border-bottom: 7px solid transparent;
  336. content: '';
  337. top: 19px;
  338. left: -14px;
  339. margin-left: inherit;
  340. margin-top: -7px;
  341. position: absolute;
  342. }
  343. .jsoneditor-schema-error:hover .jsoneditor-popover,
  344. .jsoneditor-schema-error:focus .jsoneditor-popover {
  345. display: block;
  346. -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
  347. -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
  348. -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
  349. }
  350. @-webkit-keyframes fade-in {
  351. from {
  352. opacity: 0;
  353. }
  354. to {
  355. opacity: 1;
  356. }
  357. }
  358. @-moz-keyframes fade-in {
  359. from {
  360. opacity: 0;
  361. }
  362. to {
  363. opacity: 1;
  364. }
  365. }
  366. @-ms-keyframes fade-in {
  367. from {
  368. opacity: 0;
  369. }
  370. to {
  371. opacity: 1;
  372. }
  373. }
  374. /*@-webkit-keyframes move-up {*/
  375. /*from { bottom: 24px; }*/
  376. /*to { bottom: 32px; }*/
  377. /*}*/
  378. /*@-moz-keyframes move-up {*/
  379. /*from { bottom: 24px; }*/
  380. /*to { bottom: 32px; }*/
  381. /*}*/
  382. /*@-ms-keyframes move-up {*/
  383. /*from { bottom: 24px; }*/
  384. /*to { bottom: 32px; }*/
  385. /*}*/
  386. /* JSON schema errors displayed at the bottom of the editor in mode text and code */
  387. .jsoneditor .jsoneditor-text-errors {
  388. width: 100%;
  389. border-collapse: collapse;
  390. background-color: #ffef8b;
  391. border-top: 1px solid #ffd700;
  392. }
  393. .jsoneditor .jsoneditor-text-errors td {
  394. padding: 3px 6px;
  395. vertical-align: middle;
  396. }
  397. .jsoneditor-text-errors .jsoneditor-schema-error {
  398. border: none;
  399. width: 24px;
  400. height: 24px;
  401. padding: 0;
  402. margin: 0 4px 0 0;
  403. background: url("img/jsoneditor-icons.svg") -168px -48px;
  404. }
  405. /* ContextMenu - main menu */
  406. div.jsoneditor-contextmenu-root {
  407. position: relative;
  408. width: 0;
  409. height: 0;
  410. }
  411. div.jsoneditor-contextmenu {
  412. position: absolute;
  413. box-sizing: content-box;
  414. z-index: 99999;
  415. }
  416. div.jsoneditor-contextmenu ul,
  417. div.jsoneditor-contextmenu li {
  418. box-sizing: content-box;
  419. }
  420. div.jsoneditor-contextmenu ul {
  421. position: relative;
  422. left: 0;
  423. top: 0;
  424. width: 124px;
  425. background: white;
  426. border: 1px solid #d3d3d3;
  427. box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
  428. list-style: none;
  429. margin: 0;
  430. padding: 0;
  431. }
  432. div.jsoneditor-contextmenu ul li button {
  433. padding: 0;
  434. margin: 0;
  435. width: 124px;
  436. height: 24px;
  437. border: none;
  438. cursor: pointer;
  439. color: #4d4d4d;
  440. background: transparent;
  441. font-size: 10pt;
  442. font-family: arial, sans-serif;
  443. box-sizing: border-box;
  444. line-height: 26px;
  445. text-align: left;
  446. }
  447. /* Fix button padding in firefox */
  448. div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
  449. padding: 0;
  450. border: 0;
  451. }
  452. div.jsoneditor-contextmenu ul li button:hover,
  453. div.jsoneditor-contextmenu ul li button:focus {
  454. color: #1a1a1a;
  455. background-color: #f5f5f5;
  456. outline: none;
  457. }
  458. div.jsoneditor-contextmenu ul li button.jsoneditor-default {
  459. width: 92px;
  460. }
  461. div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
  462. float: right;
  463. width: 32px;
  464. height: 24px;
  465. border-left: 1px solid #e5e5e5;
  466. }
  467. div.jsoneditor-contextmenu div.jsoneditor-icon {
  468. float: left;
  469. width: 24px;
  470. height: 24px;
  471. border: none;
  472. padding: 0;
  473. margin: 0;
  474. background-image: url("img/jsoneditor-icons.svg");
  475. }
  476. div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
  477. float: right;
  478. width: 24px;
  479. height: 24px;
  480. padding: 0;
  481. margin: 0 4px 0 0;
  482. background: url("img/jsoneditor-icons.svg") 0 -72px;
  483. opacity: 0.4;
  484. }
  485. div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
  486. div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
  487. div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
  488. div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
  489. div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
  490. opacity: 1;
  491. }
  492. div.jsoneditor-contextmenu div.jsoneditor-separator {
  493. height: 0;
  494. border-top: 1px solid #e5e5e5;
  495. padding-top: 5px;
  496. margin-top: 5px;
  497. }
  498. div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon {
  499. background-position: -24px -24px;
  500. }
  501. div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon,
  502. div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon {
  503. background-position: -24px 0;
  504. }
  505. div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon {
  506. background-position: 0 -24px;
  507. }
  508. div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon,
  509. div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon {
  510. background-position: 0 0;
  511. }
  512. div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon {
  513. background-position: 0 -24px;
  514. }
  515. div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon,
  516. div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon {
  517. background-position: 0 0;
  518. }
  519. div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon {
  520. background-position: -48px -24px;
  521. }
  522. div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon,
  523. div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon {
  524. background-position: -48px 0;
  525. }
  526. div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon {
  527. background-position: -168px -24px;
  528. }
  529. div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon,
  530. div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon {
  531. background-position: -168px 0;
  532. }
  533. div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon {
  534. background-position: -192px -24px;
  535. }
  536. div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon,
  537. div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon {
  538. background-position: -192px 0;
  539. }
  540. /* ContextMenu - sub menu */
  541. div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
  542. div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
  543. div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
  544. color: white;
  545. background-color: #ee422e;
  546. }
  547. div.jsoneditor-contextmenu ul li {
  548. overflow: hidden;
  549. }
  550. div.jsoneditor-contextmenu ul li ul {
  551. display: none;
  552. position: relative;
  553. left: -10px;
  554. top: 0;
  555. border: none;
  556. box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
  557. padding: 0 10px;
  558. /* TODO: transition is not supported on IE8-9 */
  559. -webkit-transition: all 0.3s ease-out;
  560. -moz-transition: all 0.3s ease-out;
  561. -o-transition: all 0.3s ease-out;
  562. transition: all 0.3s ease-out;
  563. }
  564. div.jsoneditor-contextmenu ul li ul li button {
  565. padding-left: 24px;
  566. animation: all ease-in-out 1s;
  567. }
  568. div.jsoneditor-contextmenu ul li ul li button:hover,
  569. div.jsoneditor-contextmenu ul li ul li button:focus {
  570. background-color: #f5f5f5;
  571. }
  572. div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon {
  573. background-position: -144px -24px;
  574. }
  575. div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon,
  576. div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon,
  577. div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected > div.jsoneditor-icon {
  578. background-position: -144px 0;
  579. }
  580. div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon {
  581. background-position: -120px -24px;
  582. }
  583. div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon,
  584. div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon,
  585. div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected > div.jsoneditor-icon {
  586. background-position: -120px 0;
  587. }
  588. div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon {
  589. background-position: -72px -24px;
  590. }
  591. div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon,
  592. div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon,
  593. div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected > div.jsoneditor-icon {
  594. background-position: -72px 0;
  595. }
  596. div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon {
  597. background-position: -96px -24px;
  598. }
  599. div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon,
  600. div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon,
  601. div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected > div.jsoneditor-icon {
  602. background-position: -96px 0;
  603. }
  604. div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
  605. background-image: none;
  606. width: 6px;
  607. }
  608. div.jsoneditor-menu {
  609. width: 100%;
  610. height: 35px;
  611. padding: 2px;
  612. margin: 0;
  613. -moz-box-sizing: border-box;
  614. -webkit-box-sizing: border-box;
  615. box-sizing: border-box;
  616. color: white;
  617. background-color: #CCCCCC;
  618. border-bottom: 1px solid #CCCCCC;
  619. }
  620. div.jsoneditor-menu > button,
  621. div.jsoneditor-menu > div.jsoneditor-modes > button {
  622. width: 26px;
  623. height: 26px;
  624. margin: 2px;
  625. padding: 0;
  626. border-radius: 2px;
  627. border: 1px solid transparent;
  628. background: transparent url("img/jsoneditor-icons.svg");
  629. color: white;
  630. opacity: 0.8;
  631. font-family: arial, sans-serif;
  632. font-size: 10pt;
  633. float: left;
  634. }
  635. div.jsoneditor-menu > button:hover,
  636. div.jsoneditor-menu > div.jsoneditor-modes > button:hover {
  637. background-color: rgba(255,255,255,0.2);
  638. border: 1px solid rgba(255,255,255,0.4);
  639. }
  640. div.jsoneditor-menu > button:focus,
  641. div.jsoneditor-menu > button:active,
  642. div.jsoneditor-menu > div.jsoneditor-modes > button:focus,
  643. div.jsoneditor-menu > div.jsoneditor-modes > button:active {
  644. background-color: rgba(255,255,255,0.3);
  645. }
  646. div.jsoneditor-menu > button:disabled,
  647. div.jsoneditor-menu > div.jsoneditor-modes > button:disabled {
  648. opacity: 0.5;
  649. }
  650. div.jsoneditor-menu > button.jsoneditor-collapse-all {
  651. background-position: 0 -96px;
  652. }
  653. div.jsoneditor-menu > button.jsoneditor-expand-all {
  654. background-position: 0 -120px;
  655. }
  656. div.jsoneditor-menu > button.jsoneditor-undo {
  657. background-position: -24px -96px;
  658. }
  659. div.jsoneditor-menu > button.jsoneditor-undo:disabled {
  660. background-position: -24px -120px;
  661. }
  662. div.jsoneditor-menu > button.jsoneditor-redo {
  663. background-position: -48px -96px;
  664. }
  665. div.jsoneditor-menu > button.jsoneditor-redo:disabled {
  666. background-position: -48px -120px;
  667. }
  668. div.jsoneditor-menu > button.jsoneditor-compact {
  669. background-position: -72px -96px;
  670. }
  671. div.jsoneditor-menu > button.jsoneditor-format {
  672. background-position: -72px -120px;
  673. }
  674. div.jsoneditor-menu > div.jsoneditor-modes {
  675. display: inline-block;
  676. float: left;
  677. }
  678. div.jsoneditor-menu > div.jsoneditor-modes > button {
  679. background-image: none;
  680. width: auto;
  681. padding-left: 6px;
  682. padding-right: 6px;
  683. }
  684. div.jsoneditor-menu > button.jsoneditor-separator,
  685. div.jsoneditor-menu > div.jsoneditor-modes > button.jsoneditor-separator {
  686. margin-left: 10px;
  687. }
  688. div.jsoneditor-menu a {
  689. font-family: arial, sans-serif;
  690. font-size: 10pt;
  691. color: white;
  692. opacity: 0.8;
  693. vertical-align: middle;
  694. }
  695. div.jsoneditor-menu a:hover {
  696. opacity: 1;
  697. }
  698. div.jsoneditor-menu a.jsoneditor-poweredBy {
  699. font-size: 8pt;
  700. position: absolute;
  701. right: 0;
  702. top: 0;
  703. padding: 10px;
  704. }
  705. table.jsoneditor-search input,
  706. table.jsoneditor-search div.jsoneditor-results {
  707. font-family: arial, sans-serif;
  708. font-size: 10pt;
  709. color: #1A1A1A;
  710. background: transparent;
  711. /* For Firefox */
  712. }
  713. table.jsoneditor-search div.jsoneditor-results {
  714. color: white;
  715. padding-right: 5px;
  716. line-height: 24px;
  717. }
  718. table.jsoneditor-search {
  719. position: absolute;
  720. right: 4px;
  721. top: 4px;
  722. border-collapse: collapse;
  723. border-spacing: 0;
  724. }
  725. table.jsoneditor-search div.jsoneditor-frame {
  726. border: 1px solid transparent;
  727. background-color: white;
  728. padding: 0 2px;
  729. margin: 0;
  730. }
  731. table.jsoneditor-search div.jsoneditor-frame table {
  732. border-collapse: collapse;
  733. }
  734. table.jsoneditor-search input {
  735. width: 120px;
  736. border: none;
  737. outline: none;
  738. margin: 1px;
  739. line-height: 20px;
  740. }
  741. table.jsoneditor-search button {
  742. width: 16px;
  743. height: 24px;
  744. padding: 0;
  745. margin: 0;
  746. border: none;
  747. background: url("img/jsoneditor-icons.svg");
  748. vertical-align: top;
  749. }
  750. table.jsoneditor-search button:hover {
  751. background-color: transparent;
  752. }
  753. table.jsoneditor-search button.jsoneditor-refresh {
  754. width: 18px;
  755. background-position: -99px -73px;
  756. }
  757. table.jsoneditor-search button.jsoneditor-next {
  758. cursor: pointer;
  759. background-position: -124px -73px;
  760. }
  761. table.jsoneditor-search button.jsoneditor-next:hover {
  762. background-position: -124px -49px;
  763. }
  764. table.jsoneditor-search button.jsoneditor-previous {
  765. cursor: pointer;
  766. background-position: -148px -73px;
  767. margin-right: 2px;
  768. }
  769. table.jsoneditor-search button.jsoneditor-previous:hover {
  770. background-position: -148px -49px;
  771. }