You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

codemirror.css 9.2KB

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