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 */ 58 div.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 102 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 103 div.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 243 div.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
