code-style.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /*通用样式*/
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. border: 0;
  6. }
  7. #code_close,
  8. #code_open {
  9. cursor: pointer;
  10. }
  11. #code_area #d_menu > div > a:hover {
  12. cursor: pointer;
  13. font-weight: bold;
  14. }
  15. #container-main {
  16. position: relative;
  17. margin: 0 auto;
  18. width: 100%;
  19. height: 575px;
  20. border: 0;
  21. }
  22. /*源码编辑面板*/
  23. #code_area {
  24. display: none;
  25. position: relative;
  26. width: 37%;
  27. height: 100%;
  28. float: left;
  29. }
  30. #openbar {
  31. padding: 0;
  32. height: 36px;
  33. overflow: hidden;
  34. }
  35. #openbar > p {
  36. line-height: 36px;
  37. background-color: #C2E3FA;
  38. text-indent: 1em;
  39. }
  40. #code {
  41. width: 96.6%;
  42. height: 91%;
  43. }
  44. .CodeMirror {
  45. width: 100%;
  46. height: 93.5%;
  47. }
  48. #code_area .copy-success {
  49. display:none;
  50. position: absolute;
  51. width: 180px;
  52. height: 45px;
  53. text-align: center;
  54. line-height: 45px;
  55. top: 20%;
  56. left: 33%;
  57. color: #fff;
  58. background-color: #0089CD;
  59. box-shadow: 0 2px 4px 0 rgba(0,136,205,0.50);
  60. font-size: 16px;
  61. border-radius: 7px;
  62. z-index: 999;
  63. }
  64. #code_area #d_menu {
  65. float: right;
  66. width: 163px;
  67. }
  68. #code_area #d_menu div {
  69. float: left;
  70. margin-right: 7px;
  71. }
  72. #code_area #d_menu i {
  73. display: block;
  74. float: left;
  75. margin-top: 11px;
  76. margin-right: 3px;
  77. }
  78. #code_area #d_menu div a {
  79. line-height: 36px;
  80. text-decoration: none;
  81. padding-bottom: 2px;
  82. }
  83. /*运行 重置 复制 按钮*/
  84. #code_area #d_clip_container a {
  85. background: url(../images/result.png) no-repeat 0 0.4px;
  86. color: #3189f3;
  87. padding-left: 16px;
  88. }
  89. #code_area #d_run_container a {
  90. background: url(../images/result.png) no-repeat 0 -24px;
  91. color: #3189f3;
  92. padding-left: 17px;
  93. }
  94. #code_area #d_refresh_container a {
  95. background: url(../images/result.png) no-repeat 0 -48px;
  96. color: #3189f3;
  97. padding-left: 20px;
  98. }
  99. /*源码编辑器开关按钮*/
  100. #code_close {
  101. display: none;
  102. background: url(../images/result.png) no-repeat 0 -142px;
  103. width: 14px;
  104. height: 90px;
  105. position: absolute;
  106. right: -16px;
  107. z-index: 9999;
  108. top: 50%;
  109. margin-top: -45px;
  110. }
  111. #code_open {
  112. display: none;
  113. background: url(../images/result.png) no-repeat 0 -242px;
  114. width: 14px;
  115. height: 90px;
  116. position: absolute;
  117. z-index: 9999;
  118. top: 50%;
  119. margin-top: -45px;
  120. }
  121. /*地图面板*/
  122. #mapContent {
  123. width: 99.8%;
  124. height: 99%;
  125. float: right;
  126. padding-top: 5px;
  127. }
  128. #examplesIframe {
  129. width: 99.8%;
  130. height: 99%;
  131. }
  132. /**clear float**/
  133. .clearfix {
  134. display: block;
  135. zoom: 1;
  136. }
  137. .clearfix:after {
  138. content: ".";
  139. display: block;
  140. height: 0;
  141. clear: both;
  142. visibility: hidden;
  143. }
  144. /*拖拽框*/
  145. #drag {
  146. display: none;
  147. width: 3px;
  148. height: 100%;
  149. background: #eee;
  150. cursor: w-resize;
  151. float: left;
  152. }
  153. #overiframe {
  154. width: 100%;
  155. height: 100%;
  156. position: absolute;
  157. z-index: 999;
  158. display: none;
  159. -webkit-user-select: none;
  160. }
  161. /**设置滚动条的样式**/
  162. ::-webkit-scrollbar {
  163. width: 10px;
  164. }
  165. /**滚动槽**/
  166. ::-webkit-scrollbar-track {
  167. box-shadow: inset 0 0 6px #d1cfcf;
  168. border-radius: 10px;
  169. }
  170. /**滚动条滑块**/
  171. ::-webkit-scrollbar-thumb {
  172. border-radius: 12px;
  173. background: #f7f7f7;
  174. -webkit-box-shadow: inset 0 0 6px #d1cfcf;
  175. }
  176. ::-webkit-scrollbar-thumb:window-inactive {
  177. background: rgba(245, 245, 245, 0.4);
  178. }