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