/ajax/libs/jsoneditor/2.2.0/jsoneditor.css

https://gitlab.com/Blueprint-Marketing/cdnjs · CSS · 597 lines · 492 code · 95 blank · 10 comment · 0 complexity · 3c14934cbbd219e54cf34a7447c42c6b MD5 · raw file

  1. .jsoneditor .field,
  2. .jsoneditor .value,
  3. .jsoneditor .readonly {
  4. border: 1px solid transparent;
  5. min-height: 16px;
  6. min-width: 32px;
  7. padding: 2px;
  8. margin: 1px;
  9. word-wrap: break-word;
  10. float: left;
  11. }
  12. /* adjust margin of p elements inside editable divs, needed for Opera, IE */
  13. .jsoneditor .field p,
  14. .jsoneditor .value p {
  15. margin: 0;
  16. }
  17. .jsoneditor .value {
  18. word-break: break-word;
  19. }
  20. .jsoneditor .readonly {
  21. min-width: 16px;
  22. color: gray;
  23. }
  24. .jsoneditor .empty {
  25. border-color: lightgray;
  26. border-style: dashed;
  27. border-radius: 2px;
  28. }
  29. .jsoneditor .field.empty {
  30. background-image: url('img/jsoneditor-icons.png');
  31. background-position: 0 -144px;
  32. }
  33. .jsoneditor .value.empty {
  34. background-image: url('img/jsoneditor-icons.png');
  35. background-position: -48px -144px;
  36. }
  37. .jsoneditor .value.url {
  38. color: green;
  39. text-decoration: underline;
  40. }
  41. .jsoneditor a.value.url:hover,
  42. .jsoneditor a.value.url:focus {
  43. color: red;
  44. }
  45. .jsoneditor .separator {
  46. padding: 3px 0;
  47. vertical-align: top;
  48. color: gray;
  49. }
  50. .jsoneditor .field[contenteditable=true]:focus,
  51. .jsoneditor .field[contenteditable=true]:hover,
  52. .jsoneditor .value[contenteditable=true]:focus,
  53. .jsoneditor .value[contenteditable=true]:hover,
  54. .jsoneditor .field.highlight,
  55. .jsoneditor .value.highlight {
  56. background-color: #FFFFAB;
  57. border: 1px solid yellow;
  58. border-radius: 2px;
  59. }
  60. .jsoneditor .field.highlight-active,
  61. .jsoneditor .field.highlight-active:focus,
  62. .jsoneditor .field.highlight-active:hover,
  63. .jsoneditor .value.highlight-active,
  64. .jsoneditor .value.highlight-active:focus,
  65. .jsoneditor .value.highlight-active:hover {
  66. background-color: #ffee00;
  67. border: 1px solid #ffc700;
  68. border-radius: 2px;
  69. }
  70. .jsoneditor button {
  71. width: 24px;
  72. height: 24px;
  73. padding: 0;
  74. margin: 0;
  75. border: none;
  76. cursor: pointer;
  77. background: transparent url('img/jsoneditor-icons.png');
  78. }
  79. .jsoneditor button.collapsed {
  80. background-position: 0 -48px;
  81. }
  82. .jsoneditor button.expanded {
  83. background-position: 0 -72px;
  84. }
  85. .jsoneditor button.contextmenu {
  86. background-position: -48px -72px;
  87. }
  88. .jsoneditor button.contextmenu:hover,
  89. .jsoneditor button.contextmenu:focus,
  90. .jsoneditor button.contextmenu.selected {
  91. background-position: -48px -48px;
  92. }
  93. .jsoneditor div.content *:focus {
  94. outline: none;
  95. }
  96. .jsoneditor div.content button:focus {
  97. /* TODO: nice outline for buttons with focus
  98. outline: #97B0F8 solid 2px;
  99. box-shadow: 0 0 8px #97B0F8;
  100. */
  101. background-color: #f5f5f5;
  102. outline: #e5e5e5 solid 1px;
  103. }
  104. .jsoneditor button.invisible {
  105. visibility: hidden;
  106. background: none;
  107. }
  108. div.jsoneditor {
  109. color: #1A1A1A;
  110. border: 1px solid #97B0F8;
  111. -moz-box-sizing: border-box;
  112. -webkit-box-sizing: border-box;
  113. box-sizing: border-box;
  114. width: 100%;
  115. height: 100%;
  116. overflow: auto;
  117. position: relative;
  118. padding: 0;
  119. }
  120. .jsoneditor table.content {
  121. border-collapse: collapse;
  122. border-spacing: 0;
  123. width: 100%;
  124. margin: 0;
  125. }
  126. .jsoneditor div.outer {
  127. width: 100%;
  128. height: 100%;
  129. margin: -35px 0 0 0;
  130. padding: 35px 0 0 0;
  131. -moz-box-sizing: border-box;
  132. -webkit-box-sizing: border-box;
  133. box-sizing: border-box;
  134. overflow: hidden;
  135. }
  136. .jsoneditor div.content {
  137. width: 100%;
  138. height: 100%;
  139. position: relative;
  140. overflow: auto;
  141. }
  142. .jsoneditor textarea.content {
  143. width: 100%;
  144. height: 100%;
  145. margin: 0;
  146. -moz-box-sizing: border-box;
  147. -webkit-box-sizing: border-box;
  148. box-sizing: border-box;
  149. border: none;
  150. background-color: white;
  151. resize: none;
  152. }
  153. .jsoneditor tr.highlight {
  154. background-color: #FFFFAB;
  155. }
  156. .jsoneditor button.dragarea {
  157. background: url('img/jsoneditor-icons.png') -72px -72px;
  158. cursor: move;
  159. }
  160. .jsoneditor button.dragarea:hover,
  161. .jsoneditor button.dragarea:focus {
  162. background-position: -72px -48px;
  163. }
  164. .jsoneditor tr,
  165. .jsoneditor th,
  166. .jsoneditor td {
  167. padding: 0;
  168. margin: 0;
  169. }
  170. .jsoneditor td {
  171. vertical-align: top;
  172. }
  173. .jsoneditor td.tree {
  174. vertical-align: top;
  175. }
  176. .jsoneditor .field,
  177. .jsoneditor .value,
  178. .jsoneditor td,
  179. .jsoneditor th,
  180. .jsoneditor textarea {
  181. font-family: droid sans mono, monospace, courier new, courier, sans-serif;
  182. font-size: 10pt;
  183. color: #1A1A1A;
  184. }
  185. /* ContextMenu - main menu */
  186. .jsoneditor-contextmenu {
  187. position: absolute;
  188. }
  189. .jsoneditor-contextmenu ul {
  190. position: relative;
  191. left: 0;
  192. top: 0;
  193. width: 124px;
  194. background: white;
  195. border: 1px solid #d3d3d3;
  196. box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
  197. z-index: 1;
  198. list-style: none;
  199. margin: 0;
  200. padding: 0;
  201. }
  202. .jsoneditor-contextmenu ul li button {
  203. padding: 0;
  204. margin: 0;
  205. width: 124px;
  206. height: 24px;
  207. border: none;
  208. cursor: pointer;
  209. color: #4d4d4d;
  210. background: transparent;
  211. line-height: 24px;
  212. text-align: left;
  213. }
  214. /* Fix button padding in firefox */
  215. .jsoneditor-contextmenu ul li button::-moz-focus-inner {
  216. padding: 0;
  217. border: 0;
  218. }
  219. .jsoneditor-contextmenu ul li button:hover,
  220. .jsoneditor-contextmenu ul li button:focus {
  221. color: #1a1a1a;
  222. background-color: #f5f5f5;
  223. outline: none;
  224. }
  225. .jsoneditor-contextmenu ul li button.default {
  226. width: 92px;
  227. }
  228. .jsoneditor-contextmenu ul li button.expand {
  229. float: right;
  230. width: 32px;
  231. height: 24px;
  232. border-left: 1px solid #e5e5e5;
  233. }
  234. .jsoneditor-contextmenu div.icon {
  235. float: left;
  236. width: 24px;
  237. height: 24px;
  238. border: none;
  239. padding: 0;
  240. margin: 0;
  241. background-image: url('img/jsoneditor-icons.png');
  242. }
  243. .jsoneditor-contextmenu ul li button div.expand {
  244. float: right;
  245. width: 24px;
  246. height: 24px;
  247. padding: 0;
  248. margin: 0 4px 0 0;
  249. background: url('img/jsoneditor-icons.png') 0 -72px;
  250. opacity: 0.4;
  251. }
  252. .jsoneditor-contextmenu ul li button:hover div.expand,
  253. .jsoneditor-contextmenu ul li button:focus div.expand,
  254. .jsoneditor-contextmenu ul li.selected div.expand,
  255. .jsoneditor-contextmenu ul li button.expand:hover div.expand,
  256. .jsoneditor-contextmenu ul li button.expand:focus div.expand {
  257. opacity: 1;
  258. }
  259. .jsoneditor-contextmenu .separator {
  260. height: 0;
  261. border-top: 1px solid #e5e5e5;
  262. padding-top: 5px;
  263. margin-top: 5px;
  264. }
  265. .jsoneditor-contextmenu button.remove > .icon {
  266. background-position: -24px -24px;
  267. }
  268. .jsoneditor-contextmenu button.remove:hover > .icon,
  269. .jsoneditor-contextmenu button.remove:focus > .icon {
  270. background-position: -24px 0;
  271. }
  272. .jsoneditor-contextmenu button.append > .icon {
  273. background-position: 0 -24px;
  274. }
  275. .jsoneditor-contextmenu button.append:hover > .icon,
  276. .jsoneditor-contextmenu button.append:focus > .icon {
  277. background-position: 0 0;
  278. }
  279. .jsoneditor-contextmenu button.insert > .icon {
  280. background-position: 0 -24px;
  281. }
  282. .jsoneditor-contextmenu button.insert:hover > .icon,
  283. .jsoneditor-contextmenu button.insert:focus > .icon {
  284. background-position: 0 0;
  285. }
  286. .jsoneditor-contextmenu button.duplicate > .icon {
  287. background-position: -48px -24px;
  288. }
  289. .jsoneditor-contextmenu button.duplicate:hover > .icon,
  290. .jsoneditor-contextmenu button.duplicate:focus > .icon {
  291. background-position: -48px 0;
  292. }
  293. .jsoneditor-contextmenu button.sort-asc > .icon {
  294. background-position: -168px -24px;
  295. }
  296. .jsoneditor-contextmenu button.sort-asc:hover > .icon,
  297. .jsoneditor-contextmenu button.sort-asc:focus > .icon {
  298. background-position: -168px 0;
  299. }
  300. .jsoneditor-contextmenu button.sort-desc > .icon {
  301. background-position: -192px -24px;
  302. }
  303. .jsoneditor-contextmenu button.sort-desc:hover > .icon,
  304. .jsoneditor-contextmenu button.sort-desc:focus > .icon {
  305. background-position: -192px 0;
  306. }
  307. /* ContextMenu - sub menu */
  308. .jsoneditor-contextmenu ul li ul li .selected {
  309. background-color: #D5DDF6;
  310. }
  311. .jsoneditor-contextmenu ul li {
  312. overflow: hidden;
  313. }
  314. .jsoneditor-contextmenu ul li ul {
  315. display: none;
  316. position: relative;
  317. left: -10px;
  318. top: 0;
  319. border: none;
  320. box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
  321. padding: 0 10px;
  322. /* TODO: transition is not supported on IE8-9 */
  323. -webkit-transition: all 0.3s ease-out;
  324. -moz-transition: all 0.3s ease-out;
  325. -o-transition: all 0.3s ease-out;
  326. transition: all 0.3s ease-out;
  327. }
  328. .jsoneditor-contextmenu ul li.selected ul {
  329. }
  330. .jsoneditor-contextmenu ul li ul li button {
  331. padding-left: 24px;
  332. }
  333. .jsoneditor-contextmenu ul li ul li button:hover,
  334. .jsoneditor-contextmenu ul li ul li button:focus {
  335. background-color: #f5f5f5;
  336. }
  337. .jsoneditor-contextmenu button.type-string > .icon {
  338. background-position: -144px -24px;
  339. }
  340. .jsoneditor-contextmenu button.type-string:hover > .icon,
  341. .jsoneditor-contextmenu button.type-string:focus > .icon,
  342. .jsoneditor-contextmenu button.type-string.selected > .icon{
  343. background-position: -144px 0;
  344. }
  345. .jsoneditor-contextmenu button.type-auto > .icon {
  346. background-position: -120px -24px;
  347. }
  348. .jsoneditor-contextmenu button.type-auto:hover > .icon,
  349. .jsoneditor-contextmenu button.type-auto:focus > .icon,
  350. .jsoneditor-contextmenu button.type-auto.selected > .icon {
  351. background-position: -120px 0;
  352. }
  353. .jsoneditor-contextmenu button.type-object > .icon {
  354. background-position: -72px -24px;
  355. }
  356. .jsoneditor-contextmenu button.type-object:hover > .icon,
  357. .jsoneditor-contextmenu button.type-object:focus > .icon,
  358. .jsoneditor-contextmenu button.type-object.selected > .icon{
  359. background-position: -72px 0;
  360. }
  361. .jsoneditor-contextmenu button.type-array > .icon {
  362. background-position: -96px -24px;
  363. }
  364. .jsoneditor-contextmenu button.type-array:hover > .icon,
  365. .jsoneditor-contextmenu button.type-array:focus > .icon,
  366. .jsoneditor-contextmenu button.type-array.selected > .icon{
  367. background-position: -96px 0;
  368. }
  369. .jsoneditor .menu {
  370. width: 100%;
  371. height: 35px;
  372. padding: 2px;
  373. margin: 0;
  374. overflow: hidden;
  375. -moz-box-sizing: border-box;
  376. -webkit-box-sizing: border-box;
  377. box-sizing: border-box;
  378. color: #1A1A1A;
  379. background-color: #D5DDF6;
  380. border-bottom: 1px solid #97B0F8;
  381. }
  382. .jsoneditor .menu button {
  383. width: 26px;
  384. height: 26px;
  385. margin: 2px;
  386. padding: 2px;
  387. border-radius: 2px;
  388. border: 1px solid #aec0f8;
  389. background: #e3eaf6 url('img/jsoneditor-icons.png');
  390. }
  391. .jsoneditor .menu button:hover {
  392. background-color: #f0f2f5;
  393. }
  394. .jsoneditor .menu button:active {
  395. background-color: #ffffff;
  396. }
  397. .jsoneditor .menu button:disabled {
  398. background-color: #e3eaf6;
  399. }
  400. .jsoneditor .menu button.collapse-all {
  401. background-position: 0 -96px;
  402. }
  403. .jsoneditor .menu button.expand-all {
  404. background-position: 0 -120px;
  405. }
  406. .jsoneditor .menu button.undo {
  407. background-position: -24px -96px;
  408. }
  409. .jsoneditor .menu button.undo:disabled {
  410. background-position: -24px -120px;
  411. }
  412. .jsoneditor .menu button.redo {
  413. background-position: -48px -96px;
  414. }
  415. .jsoneditor .menu button.redo:disabled {
  416. background-position: -48px -120px;
  417. }
  418. .jsoneditor .menu button.compact {
  419. background-position: -72px -96px;
  420. }
  421. .jsoneditor .menu button.format {
  422. background-position: -72px -120px;
  423. }
  424. .jsoneditor .menu a {
  425. font-family: arial, sans-serif;
  426. font-size: 10pt;
  427. color: #97B0F8;
  428. vertical-align: middle;
  429. }
  430. .jsoneditor .menu a:hover {
  431. color: red;
  432. }
  433. .jsoneditor .menu a.poweredBy {
  434. font-size: 8pt;
  435. position: absolute;
  436. right: 0;
  437. top: 0;
  438. padding: 10px;
  439. }
  440. /* TODO: css for button:disabled is not supported by IE8 */
  441. .jsoneditor .search input,
  442. .jsoneditor .search .results {
  443. font-family: arial, sans-serif;
  444. font-size: 10pt;
  445. color: #1A1A1A;
  446. }
  447. .jsoneditor .search {
  448. position: absolute;
  449. right: 2px;
  450. top: 2px;
  451. }
  452. .jsoneditor .search .frame {
  453. border: 1px solid #97B0F8;
  454. background-color: white;
  455. padding: 0 2px;
  456. margin: 0;
  457. }
  458. .jsoneditor .search .frame table {
  459. border-collapse: collapse;
  460. }
  461. .jsoneditor .search input {
  462. width: 120px;
  463. border: none;
  464. outline: none;
  465. margin: 1px;
  466. }
  467. .jsoneditor .search .results {
  468. color: #4d4d4d;
  469. padding-right: 5px;
  470. line-height: 24px;
  471. }
  472. .jsoneditor .search button {
  473. width: 16px;
  474. height: 24px;
  475. padding: 0;
  476. margin: 0;
  477. border: none;
  478. background: url('img/jsoneditor-icons.png');
  479. vertical-align: top;
  480. }
  481. .jsoneditor .search button:hover {
  482. background-color: transparent;
  483. }
  484. .jsoneditor .search button.refresh {
  485. width: 18px;
  486. background-position: -99px -73px;
  487. }
  488. .jsoneditor .search button.next {
  489. cursor: pointer;
  490. background-position: -124px -73px;
  491. }
  492. .jsoneditor .search button.next:hover {
  493. background-position: -124px -49px;
  494. }
  495. .jsoneditor .search button.previous {
  496. cursor: pointer;
  497. background-position: -148px -73px;
  498. margin-right: 2px;
  499. }
  500. .jsoneditor .search button.previous:hover {
  501. background-position: -148px -49px;
  502. }