index.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. @import url("../static/vendor/codemirror/codemirror.css");
  2. @import url("../static/css/bootstrap.min.css");
  3. @import url("content-script.css");
  4. body {
  5. background-color: #fff;
  6. }
  7. html,body {
  8. padding: 0;
  9. margin: 0;
  10. height:100%;
  11. }
  12. .wp-json {
  13. width:auto;
  14. }
  15. .wp-json .panel-body {
  16. padding: 0;
  17. }
  18. #jfContent_pre {
  19. display: none;
  20. padding: 10px;
  21. }
  22. #errorMsg {
  23. color: #f00;
  24. margin-left: 10px;
  25. float: right;
  26. }
  27. .x-placeholder img{
  28. width: 400px;
  29. opacity: 0.3;
  30. margin: 5px 0 0 -8px;
  31. }
  32. .x-xdemo,a.x-xdemo {
  33. margin-left: 30px;
  34. font-size: 12px;
  35. color: blue;
  36. cursor: pointer;
  37. text-decoration: underline;
  38. }
  39. .x-xdemo:hover {
  40. text-decoration: underline;
  41. }
  42. #errorTips {
  43. border-radius: 4px;
  44. box-shadow: 6px 5px 7px rgba(229, 163, 163, 0.4);
  45. background-color: #ffecf1;
  46. border: 1px solid #dbb2b2;
  47. margin-top:10px;
  48. }
  49. #errorCode .errorEm {
  50. background-color:#ff921b;
  51. }
  52. #errorTarget {
  53. color:#000;
  54. background-color:#fff;
  55. }
  56. #errorCode {
  57. padding:0 10px 10px;
  58. word-break: break-all;
  59. }
  60. #errorCode ol {
  61. padding:0 0 0 3em;
  62. }
  63. #errorCode .x-ph {
  64. color: #f00;
  65. font-weight: bold;
  66. }
  67. #tipsBox {
  68. color:#b4465c;
  69. padding: 6px 0 4px 2em;
  70. background-color: #ffecf1;
  71. }
  72. #errorCode ol li {
  73. padding:4px 7px 0;
  74. list-style-type: decimal;
  75. color:#b4465c;
  76. background-color:#fdf7f7;
  77. }
  78. #errorCode ol li div {
  79. color:#000;
  80. }
  81. .x-error {
  82. color:red;
  83. }
  84. /*layout-up-down:上下布局模式*/
  85. .wp-json.layout-up-down .mod-json .panel-txt {
  86. position: static;
  87. width: 100%;
  88. height: 250px;
  89. margin: 0;
  90. }
  91. .wp-json.layout-up-down .CodeMirror {
  92. height: 250px;
  93. }
  94. .wp-json.layout-up-down .mod-json .rst-item {
  95. margin: 0;
  96. }
  97. .wp-json.layout-up-down .mod-json .x-placeholder {
  98. padding-top: 0;
  99. text-align: left;
  100. }
  101. /* layout-left-right: 左右布局 */
  102. .wp-json.layout-left-right .mod-json .panel-txt {
  103. width: 500px;
  104. height: calc(100% - 10px);
  105. float: left;
  106. }
  107. .wp-json.layout-left-right .mod-json .rst-item {
  108. margin: 0 20px 0 30px;
  109. padding-bottom:20px;
  110. float: left;
  111. width: calc(100% - 520px);
  112. }
  113. .wp-json.layout-left-right .mod-json .x-placeholder {
  114. padding-top: 50px;
  115. text-align: center;
  116. }
  117. .wp-json.layout-left-right .panel-body {
  118. height:calc(100% - 95px);
  119. padding-left: 15px;
  120. }
  121. .wp-json.layout-left-right #jsonSource,
  122. .wp-json.layout-left-right .CodeMirror {
  123. height: calc(100% - 10px);
  124. }
  125. .wp-json.layout-left-right #formattedJson {
  126. padding-top: 2px;
  127. }
  128. .wp-json.layout-left-right #errorTips {
  129. margin-top: 0;
  130. }
  131. .x-toolbar {
  132. padding-top:5px;
  133. padding-bottom: 5px;
  134. }
  135. .x-toolbar.x-inpage {
  136. margin:10px 20px;
  137. }
  138. .panel-title>a.x-other-tools {
  139. margin:10px 0 0;
  140. font-size: 12px;
  141. cursor: pointer;
  142. text-decoration: underline;
  143. -webkit-user-select: none;
  144. user-select: none;
  145. color: #f00;
  146. border-bottom: 1px solid #f00;
  147. float: right;
  148. }
  149. .panel-title>a.x-other-tools:hover {
  150. color:#00f;
  151. }
  152. .panel-heading {
  153. padding:5px 15px;
  154. }
  155. #layoutBar {margin-left:30px}
  156. #btnLeftRight,#btnUpDown{
  157. -webkit-border-radius:2px;-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.1);
  158. -webkit-user-select:none;background:-webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);outline: none;
  159. border:1px solid #aaa;color:#444;font-size:12px;margin-bottom:0px;
  160. position:relative;z-index:10;display:inline-block;
  161. padding: 0 10px;
  162. height: 30px;
  163. text-shadow:1px 1px rgba(255,255,255,0.3)}
  164. #btnUpDown{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;}
  165. #btnLeftRight{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
  166. #btnLeftRight:hover,#btnUpDown:hover{-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  167. background:#ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);border-color:#999;color:#222}
  168. #btnLeftRight.selected, #btnUpDown.selected{-webkit-box-shadow:inset 0px 1px 5px rgba(0,0,0,0.2);
  169. background:#ebebeb -webkit-linear-gradient(#e4e4e4, #dfdfdf 40%, #dcdcdc);color:#333}