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