codemirror.css (8706B)
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 direction: ltr; 9 } 10 11 /* PADDING */ 12 13 .CodeMirror-lines { 14 padding: 4px 0; /* Vertical padding around content */ 15 } 16 .CodeMirror pre.CodeMirror-line, 17 .CodeMirror pre.CodeMirror-line-like { 18 padding: 0 4px; /* Horizontal padding of content */ 19 } 20 21 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { 22 background-color: white; /* The little square between H and V scrollbars */ 23 } 24 25 /* GUTTER */ 26 27 .CodeMirror-gutters { 28 border-right: 1px solid #ddd; 29 background-color: #f7f7f7; 30 white-space: nowrap; 31 } 32 .CodeMirror-linenumbers {} 33 .CodeMirror-linenumber { 34 padding: 0 3px 0 5px; 35 min-width: 20px; 36 text-align: right; 37 color: #999; 38 white-space: nowrap; 39 } 40 41 .CodeMirror-guttermarker { color: black; } 42 .CodeMirror-guttermarker-subtle { color: #999; } 43 44 /* CURSOR */ 45 46 .CodeMirror-cursor { 47 border-left: 1px solid black; 48 border-right: none; 49 width: 0; 50 } 51 /* Shown when moving in bi-directional text */ 52 .CodeMirror div.CodeMirror-secondarycursor { 53 border-left: 1px solid silver; 54 } 55 .cm-fat-cursor .CodeMirror-cursor { 56 width: auto; 57 border: 0 !important; 58 background: #7e7; 59 } 60 .cm-fat-cursor div.CodeMirror-cursors { 61 z-index: 1; 62 } 63 .cm-fat-cursor .CodeMirror-line::selection, 64 .cm-fat-cursor .CodeMirror-line > span::selection, 65 .cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; } 66 .cm-fat-cursor .CodeMirror-line::-moz-selection, 67 .cm-fat-cursor .CodeMirror-line > span::-moz-selection, 68 .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; } 69 .cm-fat-cursor { caret-color: transparent; } 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: 0; 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, .cm-s-default .cm-type {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 142 div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;} 143 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;} 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 /* 50px is the magic margin used to hide the element's real scrollbars */ 161 /* See overflow: hidden in .CodeMirror */ 162 margin-bottom: -50px; margin-right: -50px; 163 padding-bottom: 50px; 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: 50px 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 outline: none; 181 } 182 .CodeMirror-vscrollbar { 183 right: 0; top: 0; 184 overflow-x: hidden; 185 overflow-y: scroll; 186 } 187 .CodeMirror-hscrollbar { 188 bottom: 0; left: 0; 189 overflow-y: hidden; 190 overflow-x: scroll; 191 } 192 .CodeMirror-scrollbar-filler { 193 right: 0; bottom: 0; 194 } 195 .CodeMirror-gutter-filler { 196 left: 0; bottom: 0; 197 } 198 199 .CodeMirror-gutters { 200 position: absolute; left: 0; top: 0; 201 min-height: 100%; 202 z-index: 3; 203 } 204 .CodeMirror-gutter { 205 white-space: normal; 206 height: 100%; 207 display: inline-block; 208 vertical-align: top; 209 margin-bottom: -50px; 210 } 211 .CodeMirror-gutter-wrapper { 212 position: absolute; 213 z-index: 4; 214 background: none !important; 215 border: none !important; 216 } 217 .CodeMirror-gutter-background { 218 position: absolute; 219 top: 0; bottom: 0; 220 z-index: 4; 221 } 222 .CodeMirror-gutter-elt { 223 position: absolute; 224 cursor: default; 225 z-index: 4; 226 } 227 .CodeMirror-gutter-wrapper ::selection { background-color: transparent } 228 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } 229 230 .CodeMirror-lines { 231 cursor: text; 232 min-height: 1px; /* prevents collapsing before first draw */ 233 } 234 .CodeMirror pre.CodeMirror-line, 235 .CodeMirror pre.CodeMirror-line-like { 236 /* Reset some styles that the rest of the page might have set */ 237 -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; 238 border-width: 0; 239 background: transparent; 240 font-family: inherit; 241 font-size: inherit; 242 margin: 0; 243 white-space: pre; 244 word-wrap: normal; 245 line-height: inherit; 246 color: inherit; 247 z-index: 2; 248 position: relative; 249 overflow: visible; 250 -webkit-tap-highlight-color: transparent; 251 -webkit-font-variant-ligatures: contextual; 252 font-variant-ligatures: contextual; 253 } 254 .CodeMirror-wrap pre.CodeMirror-line, 255 .CodeMirror-wrap pre.CodeMirror-line-like { 256 word-wrap: break-word; 257 white-space: pre-wrap; 258 word-break: normal; 259 } 260 261 .CodeMirror-linebackground { 262 position: absolute; 263 left: 0; right: 0; top: 0; bottom: 0; 264 z-index: 0; 265 } 266 267 .CodeMirror-linewidget { 268 position: relative; 269 z-index: 2; 270 padding: 0.1px; /* Force widget margins to stay inside of the container */ 271 } 272 273 .CodeMirror-widget {} 274 275 .CodeMirror-rtl pre { direction: rtl; } 276 277 .CodeMirror-code { 278 outline: none; 279 } 280 281 /* Force content-box sizing for the elements where we expect it */ 282 .CodeMirror-scroll, 283 .CodeMirror-sizer, 284 .CodeMirror-gutter, 285 .CodeMirror-gutters, 286 .CodeMirror-linenumber { 287 -moz-box-sizing: content-box; 288 box-sizing: content-box; 289 } 290 291 .CodeMirror-measure { 292 position: absolute; 293 width: 100%; 294 height: 0; 295 overflow: hidden; 296 visibility: hidden; 297 } 298 299 .CodeMirror-cursor { 300 position: absolute; 301 pointer-events: none; 302 } 303 .CodeMirror-measure pre { position: static; } 304 305 div.CodeMirror-cursors { 306 visibility: hidden; 307 position: relative; 308 z-index: 3; 309 } 310 div.CodeMirror-dragcursors { 311 visibility: visible; 312 } 313 314 .CodeMirror-focused div.CodeMirror-cursors { 315 visibility: visible; 316 } 317 318 .CodeMirror-selected { background: #d9d9d9; } 319 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 320 .CodeMirror-crosshair { cursor: crosshair; } 321 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } 322 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } 323 324 .cm-searching { 325 background-color: #ffa; 326 background-color: rgba(255, 255, 0, .4); 327 } 328 329 /* Used to force a border model for a node */ 330 .cm-force-border { padding-right: .1px; } 331 332 @media print { 333 /* Hide the cursor when printing */ 334 .CodeMirror div.CodeMirror-cursors { 335 visibility: hidden; 336 } 337 } 338 339 /* See issue #2901 */ 340 .cm-tab-wrap-hack:after { content: ''; } 341 342 /* Help users use markselection to safely style text background */ 343 span.CodeMirror-selectedtext { background: none; }