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