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