codemirror.css 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. /* BASICS */
  2. .CodeMirror {
  3. /* Set height, width, borders, and global font properties here */
  4. font-family: monospace;
  5. height: 300px;
  6. }
  7. .CodeMirror-scroll {
  8. /* Set scrolling behaviour here */
  9. overflow: auto;
  10. }
  11. /* PADDING */
  12. .CodeMirror-lines {
  13. padding: 4px 0; /* Vertical padding around content */
  14. }
  15. .CodeMirror pre {
  16. padding: 0 4px; /* Horizontal padding of content */
  17. }
  18. .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  19. background-color: white; /* The little square between H and V scrollbars */
  20. }
  21. /* GUTTER */
  22. .CodeMirror-gutters {
  23. border-right: 1px solid #ddd;
  24. background-color: #f7f7f7;
  25. white-space: nowrap;
  26. }
  27. .CodeMirror-linenumbers {
  28. }
  29. .CodeMirror-linenumber {
  30. padding: 0 3px 0 5px;
  31. min-width: 20px;
  32. text-align: right;
  33. color: #999;
  34. -moz-box-sizing: content-box;
  35. box-sizing: content-box;
  36. }
  37. .CodeMirror-guttermarker {
  38. color: black;
  39. }
  40. .CodeMirror-guttermarker-subtle {
  41. color: #999;
  42. }
  43. /* CURSOR */
  44. .CodeMirror div.CodeMirror-cursor {
  45. border-left: 1px solid black;
  46. }
  47. /* Shown when moving in bi-directional text */
  48. .CodeMirror div.CodeMirror-secondarycursor {
  49. border-left: 1px solid silver;
  50. }
  51. .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
  52. width: auto;
  53. border: 0;
  54. background: #7e7;
  55. }
  56. .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
  57. z-index: 1;
  58. }
  59. .cm-animate-fat-cursor {
  60. width: auto;
  61. border: 0;
  62. -webkit-animation: blink 1.06s steps(1) infinite;
  63. -moz-animation: blink 1.06s steps(1) infinite;
  64. animation: blink 1.06s steps(1) infinite;
  65. }
  66. @-moz-keyframes blink {
  67. 0% {
  68. background: #7e7;
  69. }
  70. 50% {
  71. background: none;
  72. }
  73. 100% {
  74. background: #7e7;
  75. }
  76. }
  77. @-webkit-keyframes blink {
  78. 0% {
  79. background: #7e7;
  80. }
  81. 50% {
  82. background: none;
  83. }
  84. 100% {
  85. background: #7e7;
  86. }
  87. }
  88. @keyframes blink {
  89. 0% {
  90. background: #7e7;
  91. }
  92. 50% {
  93. background: none;
  94. }
  95. 100% {
  96. background: #7e7;
  97. }
  98. }
  99. /* Can style cursor different in overwrite (non-insert) mode */
  100. div.CodeMirror-overwrite div.CodeMirror-cursor {
  101. }
  102. .cm-tab {
  103. display: inline-block;
  104. text-decoration: inherit;
  105. }
  106. .CodeMirror-ruler {
  107. border-left: 1px solid #ccc;
  108. position: absolute;
  109. }
  110. /* DEFAULT THEME */
  111. .cm-s-default .cm-keyword {
  112. color: #708;
  113. }
  114. .cm-s-default .cm-atom {
  115. color: #219;
  116. }
  117. .cm-s-default .cm-number {
  118. color: #164;
  119. }
  120. .cm-s-default .cm-def {
  121. color: #00f;
  122. }
  123. .cm-s-default .cm-variable,
  124. .cm-s-default .cm-punctuation,
  125. .cm-s-default .cm-property,
  126. .cm-s-default .cm-operator {
  127. }
  128. .cm-s-default .cm-variable-2 {
  129. color: #05a;
  130. }
  131. .cm-s-default .cm-variable-3 {
  132. color: #085;
  133. }
  134. .cm-s-default .cm-comment {
  135. color: #a50;
  136. }
  137. .cm-s-default .cm-string {
  138. color: #a11;
  139. }
  140. .cm-s-default .cm-string-2 {
  141. color: #f50;
  142. }
  143. .cm-s-default .cm-meta {
  144. color: #555;
  145. }
  146. .cm-s-default .cm-qualifier {
  147. color: #555;
  148. }
  149. .cm-s-default .cm-builtin {
  150. color: #30a;
  151. }
  152. .cm-s-default .cm-bracket {
  153. color: #997;
  154. }
  155. .cm-s-default .cm-tag {
  156. color: #170;
  157. }
  158. .cm-s-default .cm-attribute {
  159. color: #00c;
  160. }
  161. .cm-s-default .cm-header {
  162. color: blue;
  163. }
  164. .cm-s-default .cm-quote {
  165. color: #090;
  166. }
  167. .cm-s-default .cm-hr {
  168. color: #999;
  169. }
  170. .cm-s-default .cm-link {
  171. color: #00c;
  172. }
  173. .cm-negative {
  174. color: #d44;
  175. }
  176. .cm-positive {
  177. color: #292;
  178. }
  179. .cm-header, .cm-strong {
  180. font-weight: bold;
  181. }
  182. .cm-em {
  183. font-style: italic;
  184. }
  185. .cm-link {
  186. text-decoration: underline;
  187. }
  188. .cm-s-default .cm-error {
  189. color: #f00;
  190. }
  191. .cm-invalidchar {
  192. color: #f00;
  193. }
  194. /* Default styles for common addons */
  195. div.CodeMirror span.CodeMirror-matchingbracket {
  196. color: #0f0;
  197. }
  198. div.CodeMirror span.CodeMirror-nonmatchingbracket {
  199. color: #f22;
  200. }
  201. .CodeMirror-matchingtag {
  202. background: rgba(255, 150, 0, .3);
  203. }
  204. .CodeMirror-activeline-background {
  205. background: #e8f2ff;
  206. }
  207. /* STOP */
  208. /* The rest of this file contains styles related to the mechanics of
  209. the editor. You probably shouldn't touch them. */
  210. .CodeMirror {
  211. line-height: 1;
  212. position: relative;
  213. overflow: hidden;
  214. background: white;
  215. color: black;
  216. }
  217. .CodeMirror-scroll {
  218. /* 30px is the magic margin used to hide the element's real scrollbars */
  219. /* See overflow: hidden in .CodeMirror */
  220. margin-bottom: -30px;
  221. margin-right: -30px;
  222. padding-bottom: 30px;
  223. height: 100%;
  224. outline: none; /* Prevent dragging from highlighting the element */
  225. position: relative;
  226. -moz-box-sizing: content-box;
  227. box-sizing: content-box;
  228. }
  229. .CodeMirror-sizer {
  230. position: relative;
  231. border-right: 30px solid transparent;
  232. -moz-box-sizing: content-box;
  233. box-sizing: content-box;
  234. }
  235. /* The fake, visible scrollbars. Used to force redraw during scrolling
  236. before actuall scrolling happens, thus preventing shaking and
  237. flickering artifacts. */
  238. .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  239. position: absolute;
  240. z-index: 6;
  241. display: none;
  242. }
  243. .CodeMirror-vscrollbar {
  244. right: 0;
  245. top: 0;
  246. overflow-x: hidden;
  247. overflow-y: scroll;
  248. }
  249. .CodeMirror-hscrollbar {
  250. bottom: 0;
  251. left: 0;
  252. overflow-y: hidden;
  253. overflow-x: scroll;
  254. }
  255. .CodeMirror-scrollbar-filler {
  256. right: 0;
  257. bottom: 0;
  258. }
  259. .CodeMirror-gutter-filler {
  260. left: 0;
  261. bottom: 0;
  262. }
  263. .CodeMirror-gutters {
  264. position: absolute;
  265. left: 0;
  266. top: 0;
  267. padding-bottom: 30px;
  268. z-index: 3;
  269. }
  270. .CodeMirror-gutter {
  271. white-space: normal;
  272. height: 100%;
  273. -moz-box-sizing: content-box;
  274. box-sizing: content-box;
  275. padding-bottom: 30px;
  276. margin-bottom: -32px;
  277. display: inline-block;
  278. /* Hack to make IE7 behave */
  279. *zoom: 1;
  280. *display: inline;
  281. }
  282. .CodeMirror-gutter-elt {
  283. position: absolute;
  284. cursor: default;
  285. z-index: 4;
  286. }
  287. .CodeMirror-lines {
  288. cursor: text;
  289. min-height: 1px; /* prevents collapsing before first draw */
  290. }
  291. .CodeMirror pre {
  292. /* Reset some styles that the rest of the page might have set */
  293. -moz-border-radius: 0;
  294. -webkit-border-radius: 0;
  295. border-radius: 0;
  296. border-width: 0;
  297. background: transparent;
  298. font-family: inherit;
  299. font-size: inherit;
  300. margin: 0;
  301. white-space: pre;
  302. word-wrap: normal;
  303. line-height: inherit;
  304. color: inherit;
  305. z-index: 2;
  306. position: relative;
  307. overflow: visible;
  308. }
  309. .CodeMirror-wrap pre {
  310. word-wrap: break-word;
  311. white-space: pre-wrap;
  312. word-break: normal;
  313. }
  314. .CodeMirror-linebackground {
  315. position: absolute;
  316. left: 0;
  317. right: 0;
  318. top: 0;
  319. bottom: 0;
  320. z-index: 0;
  321. }
  322. .CodeMirror-linewidget {
  323. position: relative;
  324. z-index: 2;
  325. overflow: auto;
  326. }
  327. .CodeMirror-widget {
  328. }
  329. .CodeMirror-wrap .CodeMirror-scroll {
  330. overflow-x: hidden;
  331. }
  332. .CodeMirror-measure {
  333. position: absolute;
  334. width: 100%;
  335. height: 0;
  336. overflow: hidden;
  337. visibility: hidden;
  338. }
  339. .CodeMirror-measure pre {
  340. position: static;
  341. }
  342. .CodeMirror div.CodeMirror-cursor {
  343. position: absolute;
  344. border-right: none;
  345. width: 0;
  346. }
  347. div.CodeMirror-cursors {
  348. visibility: hidden;
  349. position: relative;
  350. z-index: 3;
  351. }
  352. .CodeMirror-focused div.CodeMirror-cursors {
  353. visibility: visible;
  354. }
  355. .CodeMirror-selected {
  356. background: #d9d9d9;
  357. }
  358. .CodeMirror-focused .CodeMirror-selected {
  359. background: #d7d4f0;
  360. }
  361. .CodeMirror-crosshair {
  362. cursor: crosshair;
  363. }
  364. .cm-searching {
  365. background: #ffa;
  366. background: rgba(255, 255, 0, .4);
  367. }
  368. /* IE7 hack to prevent it from returning funny offsetTops on the spans */
  369. .CodeMirror span {
  370. *vertical-align: text-bottom;
  371. }
  372. /* Used to force a border model for a node */
  373. .cm-force-border {
  374. padding-right: .1px;
  375. }
  376. @media print {
  377. /* Hide the cursor when printing */
  378. .CodeMirror div.CodeMirror-cursors {
  379. visibility: hidden;
  380. }
  381. }
  382. /* Help users use markselection to safely style text background */
  383. span.CodeMirror-selectedtext {
  384. background: none;
  385. }