codemirror.css (8486B)
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-ruler { 92 border-left: 1px solid #ccc; 93 position: absolute; 94 } 95 96 /* DEFAULT THEME */ 97 98 .cm-s-default .cm-header {color: blue;} 99 .cm-s-default .cm-quote {color: #090;} 100 .cm-negative {color: #d44;} 101 .cm-positive {color: #292;} 102 .cm-header, .cm-strong {font-weight: bold;} 103 .cm-em {font-style: italic;} 104 .cm-link {text-decoration: underline;} 105 .cm-strikethrough {text-decoration: line-through;} 106 107 .cm-s-default .cm-keyword {color: #708;} 108 .cm-s-default .cm-atom {color: #219;} 109 .cm-s-default .cm-number {color: #164;} 110 .cm-s-default .cm-def {color: #00f;} 111 .cm-s-default .cm-variable, 112 .cm-s-default .cm-punctuation, 113 .cm-s-default .cm-property, 114 .cm-s-default .cm-operator {} 115 .cm-s-default .cm-variable-2 {color: #05a;} 116 .cm-s-default .cm-variable-3 {color: #085;} 117 .cm-s-default .cm-comment {color: #a50;} 118 .cm-s-default .cm-string {color: #a11;} 119 .cm-s-default .cm-string-2 {color: #f50;} 120 .cm-s-default .cm-meta {color: #555;} 121 .cm-s-default .cm-qualifier {color: #555;} 122 .cm-s-default .cm-builtin {color: #30a;} 123 .cm-s-default .cm-bracket {color: #997;} 124 .cm-s-default .cm-tag {color: #170;} 125 .cm-s-default .cm-attribute {color: #00c;} 126 .cm-s-default .cm-hr {color: #999;} 127 .cm-s-default .cm-link {color: #00c;} 128 129 .cm-s-default .cm-error {color: #f00;} 130 .cm-invalidchar {color: #f00;} 131 132 .CodeMirror-composing { border-bottom: 2px solid; } 133 134 /* Default styles for common addons */ 135 136 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 137 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} 138 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } 139 .CodeMirror-activeline-background {background: #e8f2ff;} 140 141 /* STOP */ 142 143 /* The rest of this file contains styles related to the mechanics of 144 the editor. You probably shouldn't touch them. */ 145 146 .CodeMirror { 147 position: relative; 148 overflow: hidden; 149 background: white; 150 } 151 152 .CodeMirror-scroll { 153 overflow: scroll !important; /* Things will break if this is overridden */ 154 /* 30px is the magic margin used to hide the element's real scrollbars */ 155 /* See overflow: hidden in .CodeMirror */ 156 margin-bottom: -30px; margin-right: -30px; 157 padding-bottom: 30px; 158 height: 100%; 159 outline: none; /* Prevent dragging from highlighting the element */ 160 position: relative; 161 } 162 .CodeMirror-sizer { 163 position: relative; 164 border-right: 30px solid transparent; 165 } 166 167 /* The fake, visible scrollbars. Used to force redraw during scrolling 168 before actual scrolling happens, thus preventing shaking and 169 flickering artifacts. */ 170 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 171 position: absolute; 172 z-index: 6; 173 display: none; 174 } 175 .CodeMirror-vscrollbar { 176 right: 0; top: 0; 177 overflow-x: hidden; 178 overflow-y: scroll; 179 } 180 .CodeMirror-hscrollbar { 181 bottom: 0; left: 0; 182 overflow-y: hidden; 183 overflow-x: scroll; 184 } 185 .CodeMirror-scrollbar-filler { 186 right: 0; bottom: 0; 187 } 188 .CodeMirror-gutter-filler { 189 left: 0; bottom: 0; 190 } 191 192 .CodeMirror-gutters { 193 position: absolute; left: 0; top: 0; 194 min-height: 100%; 195 z-index: 3; 196 } 197 .CodeMirror-gutter { 198 white-space: normal; 199 height: 100%; 200 display: inline-block; 201 vertical-align: top; 202 margin-bottom: -30px; 203 /* Hack to make IE7 behave */ 204 *zoom:1; 205 *display:inline; 206 } 207 .CodeMirror-gutter-wrapper { 208 position: absolute; 209 z-index: 4; 210 background: none !important; 211 border: none !important; 212 } 213 .CodeMirror-gutter-background { 214 position: absolute; 215 top: 0; bottom: 0; 216 z-index: 4; 217 } 218 .CodeMirror-gutter-elt { 219 position: absolute; 220 cursor: default; 221 z-index: 4; 222 } 223 .CodeMirror-gutter-wrapper { 224 -webkit-user-select: none; 225 -moz-user-select: none; 226 user-select: none; 227 } 228 229 .CodeMirror-lines { 230 cursor: text; 231 min-height: 1px; /* prevents collapsing before first draw */ 232 } 233 .CodeMirror pre { 234 /* Reset some styles that the rest of the page might have set */ 235 -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; 236 border-width: 0; 237 background: transparent; 238 font-family: inherit; 239 font-size: inherit; 240 margin: 0; 241 white-space: pre; 242 word-wrap: normal; 243 line-height: inherit; 244 color: inherit; 245 z-index: 2; 246 position: relative; 247 overflow: visible; 248 -webkit-tap-highlight-color: transparent; 249 -webkit-font-variant-ligatures: none; 250 font-variant-ligatures: none; 251 } 252 .CodeMirror-wrap pre { 253 word-wrap: break-word; 254 white-space: pre-wrap; 255 word-break: normal; 256 } 257 258 .CodeMirror-linebackground { 259 position: absolute; 260 left: 0; right: 0; top: 0; bottom: 0; 261 z-index: 0; 262 } 263 264 .CodeMirror-linewidget { 265 position: relative; 266 z-index: 2; 267 overflow: auto; 268 } 269 270 .CodeMirror-widget {} 271 272 .CodeMirror-code { 273 outline: none; 274 } 275 276 /* Force content-box sizing for the elements where we expect it */ 277 .CodeMirror-scroll, 278 .CodeMirror-sizer, 279 .CodeMirror-gutter, 280 .CodeMirror-gutters, 281 .CodeMirror-linenumber { 282 -moz-box-sizing: content-box; 283 box-sizing: content-box; 284 } 285 286 .CodeMirror-measure { 287 position: absolute; 288 width: 100%; 289 height: 0; 290 overflow: hidden; 291 visibility: hidden; 292 } 293 294 .CodeMirror-cursor { position: absolute; } 295 .CodeMirror-measure pre { position: static; } 296 297 div.CodeMirror-cursors { 298 visibility: hidden; 299 position: relative; 300 z-index: 3; 301 } 302 div.CodeMirror-dragcursors { 303 visibility: visible; 304 } 305 306 .CodeMirror-focused div.CodeMirror-cursors { 307 visibility: visible; 308 } 309 310 .CodeMirror-selected { background: #d9d9d9; } 311 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 312 .CodeMirror-crosshair { cursor: crosshair; } 313 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } 314 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } 315 316 .cm-searching { 317 background: #ffa; 318 background: rgba(255, 255, 0, .4); 319 } 320 321 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ 322 .CodeMirror span { *vertical-align: text-bottom; } 323 324 /* Used to force a border model for a node */ 325 .cm-force-border { padding-right: .1px; } 326 327 @media print { 328 /* Hide the cursor when printing */ 329 .CodeMirror div.CodeMirror-cursors { 330 visibility: hidden; 331 } 332 } 333 334 /* See issue #2901 */ 335 .cm-tab-wrap-hack:after { content: ''; } 336 337 /* Help users use markselection to safely style text background */ 338 span.CodeMirror-selectedtext { background: none; }