jsoneditor.css 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. .jsoneditor-field, .jsoneditor-value, .jsoneditor-field-readonly, .jsoneditor-readonly {
  2. border: 1px solid transparent;
  3. min-height: 16px;
  4. min-width: 24px;
  5. padding: 2px;
  6. margin: 1px;
  7. outline: none;
  8. word-wrap: break-word;
  9. float: left;
  10. }
  11. /* adjust margin of p elements inside editable divs, needed for Opera, IE */
  12. .jsoneditor-field p, .jsoneditor-value p {
  13. margin: 0;
  14. }
  15. .jsoneditor-value {
  16. word-break: break-word;
  17. }
  18. .jsoneditor-empty {
  19. background-color: #E5E5E5;
  20. border-radius: 2px;
  21. }
  22. .jsoneditor-separator {
  23. padding: 3px 0;
  24. vertical-align: top;
  25. }
  26. .jsoneditor-value:focus, .jsoneditor-field:focus,
  27. .jsoneditor-value:hover, .jsoneditor-field:hover,
  28. .jsoneditor-search-highlight {
  29. background-color: #FFFFAB;
  30. border: 1px solid yellow;
  31. border-radius: 2px;
  32. }
  33. .jsoneditor-search-highlight-active,
  34. .jsoneditor-search-highlight-active:focus,
  35. .jsoneditor-search-highlight-active:hover {
  36. background-color: #ffee00;
  37. border: 1px solid #ffc700;
  38. border-radius: 2px;
  39. }
  40. .jsoneditor-field-readonly:hover {
  41. border: 1px solid white;
  42. }
  43. .jsoneditor-readonly {
  44. color: gray;
  45. }
  46. button.jsoneditor-remove, button.jsoneditor-append, button.jsoneditor-duplicate,
  47. button.jsoneditor-collapsed, button.jsoneditor-expanded,
  48. button.jsoneditor-invisible, button.jsoneditor-dragarea,
  49. button.jsoneditor-type-auto, button.jsoneditor-type-string,
  50. button.jsoneditor-type-array, button.jsoneditor-type-object {
  51. width: 24px;
  52. height: 24px;
  53. padding: 0;
  54. margin: 0;
  55. border: none;
  56. cursor: pointer;
  57. background: url('jsoneditor-icons.png');
  58. }
  59. button:disabled {
  60. color: #808080;
  61. }
  62. button.jsoneditor-collapsed {
  63. background-position: -168px 0;
  64. }
  65. button.jsoneditor-expanded {
  66. background-position: -168px -24px;
  67. }
  68. button.jsoneditor-invisible {
  69. visibility: hidden;
  70. background: none;
  71. }
  72. button.jsoneditor-collapsed, button.jsoneditor-expanded,
  73. button.jsoneditor-invisible {
  74. float: left;
  75. }
  76. button.jsoneditor-remove {
  77. background-position: -24px -24px;
  78. }
  79. button.jsoneditor-remove:hover {
  80. background-position: -24px 0;
  81. }
  82. button.jsoneditor-append {
  83. background-position: 0 -24px;
  84. }
  85. button.jsoneditor-append:hover {
  86. background-position: 0 0;
  87. }
  88. button.jsoneditor-duplicate {
  89. background-position: -48px -24px;
  90. }
  91. button.jsoneditor-duplicate:hover {
  92. background-position: -48px 0;
  93. }
  94. button.jsoneditor-type-string {
  95. background-position: -144px -24px;
  96. }
  97. button.jsoneditor-type-string:hover {
  98. background-position: -144px 0;
  99. }
  100. button.jsoneditor-type-auto {
  101. background-position: -120px -24px;
  102. }
  103. button.jsoneditor-type-auto:hover {
  104. background-position: -120px 0;
  105. }
  106. button.jsoneditor-type-object {
  107. background-position: -72px -24px;
  108. }
  109. button.jsoneditor-type-object:hover {
  110. background-position: -72px 0;
  111. }
  112. button.jsoneditor-type-array {
  113. background-position: -96px -24px;
  114. }
  115. button.jsoneditor-type-array:hover {
  116. background-position: -96px 0;
  117. }
  118. div.jsoneditor-select {
  119. border: 1px solid gray;
  120. background-color: white;
  121. box-shadow: 4px 4px 10px rgba(128, 128, 128, 0.5);
  122. }
  123. div.jsoneditor-option {
  124. color: #4D4D4D;
  125. background-color: white;
  126. border: none;
  127. margin: 0;
  128. display: block;
  129. text-align: left;
  130. cursor: pointer;
  131. }
  132. div.jsoneditor-option:hover {
  133. background-color: #FFFFAB;
  134. color: #1A1A1A;
  135. }
  136. div.jsoneditor-option-selected {
  137. background-color: #C1C1C1;
  138. }
  139. div.jsoneditor-option-text {
  140. height: 24px;
  141. line-height: 24px;
  142. padding: 0 12px 0 0;
  143. display: inline-block;
  144. }
  145. div.jsoneditor-option-string, div.jsoneditor-option-auto,
  146. div.jsoneditor-option-object, div.jsoneditor-option-array {
  147. float: left;
  148. width: 24px;
  149. height: 24px;
  150. display: inline-block;
  151. background: url('jsoneditor-icons.png');
  152. }
  153. div.jsoneditor-option-string {
  154. background-position: -144px 0;
  155. }
  156. div.jsoneditor-option-auto {
  157. background-position: -120px 0;
  158. }
  159. div.jsoneditor-option-object {
  160. background-position: -72px 0;
  161. }
  162. div.jsoneditor-option-array {
  163. background-position: -96px 0;
  164. }
  165. div.jsoneditor-frame {
  166. color: #1A1A1A;
  167. border: 1px solid #C1C1C1;
  168. box-sizing: border-box;
  169. width: 100%;
  170. height: 100%;
  171. overflow: auto;
  172. position: relative;
  173. padding: 0;
  174. }
  175. table.jsoneditor-table {
  176. border-collapse: collapse;
  177. border-spacing: 0;
  178. width: 100%;
  179. margin: 0;
  180. }
  181. div.jsoneditor-content-outer, div.jsonformatter-content {
  182. width: 100%;
  183. height: 100%;
  184. margin: -35px 0 0 0;
  185. padding: 35px 0 0 0;
  186. -moz-box-sizing: border-box;
  187. -webkit-box-sizing: border-box;
  188. box-sizing: border-box;
  189. overflow: hidden;
  190. }
  191. div.jsoneditor-content {
  192. width: 100%;
  193. height: 100%;
  194. position: relative;
  195. overflow: auto;
  196. }
  197. textarea.jsonformatter-textarea {
  198. width: 100%;
  199. height: 100%;
  200. margin: 0;
  201. -moz-box-sizing: border-box;
  202. -webkit-box-sizing: border-box;
  203. box-sizing: border-box;
  204. border: none;
  205. background-color: white;
  206. resize: none;
  207. }
  208. tr.jsoneditor-tr-highlight {
  209. background-color: #FFFFAB;
  210. }
  211. button.jsoneditor-dragarea {
  212. width: 16px;
  213. height: 24px;
  214. /*
  215. margin: 3px 0;
  216. background: url('img/dots_gray.gif') top center;
  217. background-repeat: repeat-y;
  218. */
  219. background: url('jsoneditor-icons.png') -220px 0;
  220. display: block;
  221. cursor: move;
  222. }
  223. div.jsoneditor-menu {
  224. width: 100%;
  225. height: 35px;
  226. padding: 2px;
  227. margin: 0;
  228. overflow: hidden;
  229. -moz-box-sizing: border-box;
  230. -webkit-box-sizing: border-box;
  231. box-sizing: border-box;
  232. color: #1A1A1A;
  233. border-bottom: 1px solid #C1C1C1;
  234. }
  235. table.jsoneditor-search {
  236. position: absolute;
  237. right: 2px;
  238. top: 2px;
  239. }
  240. table.jsoneditor-search-input {
  241. border-collapse: collapse;
  242. }
  243. div.jsoneditor-search {
  244. border: 1px solid #C1C1C1;
  245. background-color: white;
  246. padding: 0 2px;
  247. margin: 0;
  248. }
  249. input.jsoneditor-search {
  250. width: 120px;
  251. border: none;
  252. outline: none;
  253. margin: 1px;
  254. }
  255. div.jsoneditor-search-results {
  256. color: #4d4d4d;
  257. padding-right: 5px;
  258. }
  259. button.jsoneditor-search-refresh, button.jsoneditor-search-next,
  260. button.jsoneditor-search-previous {
  261. width: 16px;
  262. height: 24px;
  263. padding: 0;
  264. margin: 0;
  265. border: none;
  266. background: url('jsoneditor-icons.png');
  267. vertical-align: top;
  268. }
  269. button.jsoneditor-search-refresh {
  270. width: 18px;
  271. background-position: -243px -25px;
  272. }
  273. button.jsoneditor-search-next {
  274. cursor: pointer;
  275. background-position: -268px -25px;
  276. }
  277. button.jsoneditor-search-next:hover {
  278. background-position: -268px -1px;
  279. }
  280. button.jsoneditor-search-previous {
  281. cursor: pointer;
  282. background-position: -292px -25px;
  283. margin-right: 2px;
  284. }
  285. button.jsoneditor-search-previous:hover {
  286. background-position: -292px -1px;
  287. }
  288. button.jsoneditor-menu {
  289. width: 26px;
  290. height: 26px;
  291. margin: 2px;
  292. padding: 2px;
  293. border-radius: 2px;
  294. border: 1px solid #aec0f8;
  295. background: #D0F0EF url('jsoneditor-icons.png');
  296. }
  297. button.jsoneditor-menu:hover {
  298. background-color: #FFFFFF;
  299. }
  300. button.jsoneditor-menu:active {
  301. background-color: #ffffff;
  302. }
  303. button.jsoneditor-menu:disabled {
  304. background-color: #D0F0EF;
  305. }
  306. button.jsoneditor-collapse-all {
  307. background-position: -312px 0;
  308. }
  309. button.jsoneditor-expand-all {
  310. background-position: -312px -24px;
  311. }
  312. button.jsoneditor-undo {
  313. background-position: -336px 0;
  314. }
  315. button.jsoneditor-redo {
  316. background-position: -360px 0;
  317. }
  318. button.jsoneditor-undo:disabled {
  319. background-position: -336px -24px;
  320. }
  321. button.jsoneditor-redo:disabled {
  322. background-position: -360px -24px;
  323. }
  324. /* TODO: css for button:disabled is not supported by IE8 */
  325. button.jsoneditor-compact {
  326. background-position: -384px 0;
  327. }
  328. button.jsoneditor-format {
  329. background-position: -384px -24px;
  330. }
  331. tr, th, td {
  332. padding: 0;
  333. margin: 0;
  334. }
  335. td.jsoneditor-td {
  336. vertical-align: top;
  337. }
  338. td.jsoneditor-td {
  339. padding: 0 3px;
  340. }
  341. td.jsoneditor-td-edit {
  342. background-color: #F5F5F5;
  343. padding: 0;
  344. }
  345. td.jsoneditor-td-tree {
  346. vertical-align: top;
  347. }
  348. td.jsoneditor-droparea {
  349. height: 24px;
  350. border-top: 1px dashed gray;
  351. border-bottom: 1px dashed gray;
  352. background-color: #FFFF80;
  353. }
  354. .jsoneditor-field, .jsoneditor-value, .jsoneditor-td, .jsoneditor-th,
  355. .jsoneditor-type,
  356. .jsonformatter-textarea {
  357. font-family: droid sans mono, monospace, courier new, courier, sans-serif;
  358. font-size: 10pt;
  359. color: #1A1A1A;
  360. }
  361. .jsoneditor-hidden-focus {
  362. position: absolute;
  363. left: -1000px;
  364. top: -1000px;
  365. border: none;
  366. outline: none;
  367. }
  368. #by-jsonlint{
  369. text-align: right;
  370. }