codemirror.css (8241B)
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, .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: #0f0;} 143 div.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 } 210 .CodeMirror-gutter-wrapper { 211 position: absolute; 212 z-index: 4; 213 background: none !important; 214 border: none !important; 215 } 216 .CodeMirror-gutter-background { 217 position: absolute; 218 top: 0; bottom: 0; 219 z-index: 4; 220 } 221 .CodeMirror-gutter-elt { 222 position: absolute; 223 cursor: default; 224 z-index: 4; 225 } 226 .CodeMirror-gutter-wrapper ::selection { background-color: transparent } 227 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } 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: contextual; 250 font-variant-ligatures: contextual; 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-rtl pre { direction: rtl; } 273 274 .CodeMirror-code { 275 outline: none; 276 } 277 278 /* Force content-box sizing for the elements where we expect it */ 279 .CodeMirror-scroll, 280 .CodeMirror-sizer, 281 .CodeMirror-gutter, 282 .CodeMirror-gutters, 283 .CodeMirror-linenumber { 284 -moz-box-sizing: content-box; 285 box-sizing: content-box; 286 } 287 288 .CodeMirror-measure { 289 position: absolute; 290 width: 100%; 291 height: 0; 292 overflow: hidden; 293 visibility: hidden; 294 } 295 296 .CodeMirror-cursor { 297 position: absolute; 298 pointer-events: none; 299 } 300 .CodeMirror-measure pre { position: static; } 301 302 div.CodeMirror-cursors { 303 visibility: hidden; 304 position: relative; 305 z-index: 3; 306 } 307 div.CodeMirror-dragcursors { 308 visibility: visible; 309 } 310 311 .CodeMirror-focused div.CodeMirror-cursors { 312 visibility: visible; 313 } 314 315 .CodeMirror-selected { background: #d9d9d9; } 316 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } 317 .CodeMirror-crosshair { cursor: crosshair; } 318 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } 319 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } 320 321 .cm-searching { 322 background: #ffa; 323 background: rgba(255, 255, 0, .4); 324 } 325 326 /* Used to force a border model for a node */ 327 .cm-force-border { padding-right: .1px; } 328 329 @media print { 330 /* Hide the cursor when printing */ 331 .CodeMirror div.CodeMirror-cursors { 332 visibility: hidden; 333 } 334 } 335 336 /* See issue #2901 */ 337 .cm-tab-wrap-hack:after { content: ''; } 338 339 /* Help users use markselection to safely style text background */ 340 span.CodeMirror-selectedtext { background: none; }