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