bootstrap-markdown.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. .md-editor {
  2. display: block;
  3. border: 1px solid #ddd
  4. }
  5. .md-editor .md-footer, .md-editor > .md-header {
  6. display: block;
  7. padding: 6px 4px;
  8. background: #f5f5f5
  9. }
  10. .md-editor > .md-header {
  11. margin: 0
  12. }
  13. .md-editor > .md-preview {
  14. background: #fff;
  15. border-top: 1px dashed #ddd;
  16. border-bottom: 1px dashed #ddd;
  17. min-height: 10px;
  18. overflow: auto;
  19. padding:8px;
  20. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  21. font-size: 14px;
  22. }
  23. .md-editor > textarea {
  24. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  25. font-size: 14px;
  26. outline: 0;
  27. margin: 0;
  28. display: block;
  29. padding: 8px;
  30. width: 100%;
  31. border: 0;
  32. border-top: 1px dashed #ddd;
  33. border-bottom: 1px dashed #ddd;
  34. border-radius: 0;
  35. box-shadow: none;
  36. }
  37. .md-editor > textarea:focus {
  38. box-shadow: none;
  39. background: #fff
  40. }
  41. .md-editor.active {
  42. border-color: #66afe9;
  43. outline: 0;
  44. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  45. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
  46. }
  47. .md-editor .md-controls {
  48. float: right;
  49. padding: 3px
  50. }
  51. .md-editor .md-controls .md-control {
  52. right: 5px;
  53. color: #bebebe;
  54. padding: 3px 3px 3px 10px
  55. }
  56. .md-editor .md-controls .md-control:hover {
  57. color: #333
  58. }
  59. .md-editor.md-fullscreen-mode {
  60. width: 100%;
  61. height: 100%;
  62. position: fixed;
  63. top: 0;
  64. left: 0;
  65. z-index: 99999;
  66. padding: 60px 30px 15px;
  67. background: #fff !important;
  68. border: 0 !important
  69. }
  70. .md-editor.md-fullscreen-mode .md-footer {
  71. display: none
  72. }
  73. .md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview {
  74. margin: 0 auto !important;
  75. height: 100% !important;
  76. font-size: 20px !important;
  77. padding: 20px !important;
  78. color: #999;
  79. line-height: 1.6em !important;
  80. resize: none !important;
  81. box-shadow: none !important;
  82. background: #fff !important;
  83. border: 0 !important
  84. }
  85. .md-editor.md-fullscreen-mode .md-preview {
  86. color: #333;
  87. overflow: auto
  88. }
  89. .md-editor.md-fullscreen-mode .md-input:focus, .md-editor.md-fullscreen-mode .md-input:hover {
  90. color: #333;
  91. background: #fff !important
  92. }
  93. .md-editor.md-fullscreen-mode .md-header {
  94. background: 0 0;
  95. text-align: center;
  96. position: fixed;
  97. width: 100%;
  98. top: 20px
  99. }
  100. .md-editor.md-fullscreen-mode .btn-group {
  101. float: none
  102. }
  103. .md-editor.md-fullscreen-mode .btn {
  104. border: 0;
  105. background: 0 0;
  106. color: #b3b3b3
  107. }
  108. .md-editor.md-fullscreen-mode .btn.active, .md-editor.md-fullscreen-mode .btn:active, .md-editor.md-fullscreen-mode .btn:focus, .md-editor.md-fullscreen-mode .btn:hover {
  109. box-shadow: none;
  110. color: #333
  111. }
  112. .md-editor.md-fullscreen-mode .md-fullscreen-controls {
  113. position: absolute;
  114. top: 20px;
  115. right: 20px;
  116. text-align: right;
  117. z-index: 1002;
  118. display: block
  119. }
  120. .md-editor.md-fullscreen-mode .md-fullscreen-controls a {
  121. color: #b3b3b3;
  122. clear: right;
  123. margin: 10px;
  124. width: 30px;
  125. height: 30px;
  126. text-align: center
  127. }
  128. .md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
  129. color: #333;
  130. text-decoration: none
  131. }
  132. .md-editor.md-fullscreen-mode .md-editor {
  133. height: 100% !important;
  134. position: relative
  135. }
  136. .md-editor .md-fullscreen-controls {
  137. display: none
  138. }
  139. .md-nooverflow {
  140. overflow: hidden;
  141. position: fixed;
  142. width: 100%
  143. }
  144. .md-relative {
  145. position: relative;
  146. }
  147. .md-relative .uploadimage, .md-relative .uploadfile {
  148. position: absolute;
  149. right: 0;
  150. top: 0;
  151. width: 39px;
  152. height: 31px;
  153. opacity: 0;
  154. z-index: 9;
  155. overflow: hidden;
  156. }
  157. body.darktheme .md-editor {
  158. border-color: #444;
  159. }
  160. body.darktheme .md-editor.active {
  161. -webkit-box-shadow: none;
  162. box-shadow: none;
  163. }
  164. body.darktheme .md-editor .md-footer, body.darktheme .md-editor > .md-header {
  165. background-color: #3c3e3d;
  166. border-color: #444;
  167. color: #eee;
  168. }
  169. body.darktheme .md-editor > textarea {
  170. background-color: #262626;
  171. }
  172. body.darktheme .md-editor > textarea:focus {
  173. background-color: #262626;
  174. }
  175. body.darktheme .md-editor .btn-toolbar .btn {
  176. background-color: #262626;
  177. }
  178. body.darktheme .md-editor .btn-toolbar .btn:hover {
  179. color: #ccc;
  180. }
  181. body.darktheme .md-editor.md-fullscreen-mode {
  182. background-color: #3c3e3c !important;
  183. }
  184. body.darktheme .md-editor.md-fullscreen-mode .md-input, body.darktheme .md-editor.md-fullscreen-mode .md-preview {
  185. background-color: #262626 !important;
  186. color: #ccc;
  187. }