1 /* custom */ |
1 /* custom */ |
2 .CodeMirror span.bws-readonly { |
2 .CodeMirror span.bws-readonly { |
3 color: #aaa; |
3 color: #aaa; |
4 } |
4 } |
5 /* BASICS */ |
5 /* BASICS */ |
6 |
6 |
7 .CodeMirror { |
7 .CodeMirror { |
8 /* Set height, width, borders, and global font properties here */ |
8 /* Set height, width, borders, and global font properties here */ |
9 font-family: monospace; |
9 font-family: monospace; |
10 height: 500px; |
10 height: 500px; |
11 border: 1px solid #ddd; |
11 border: 1px solid #ddd; |
12 } |
12 } |
13 .CodeMirror-scroll { |
13 .CodeMirror-scroll { |
14 /* Set scrolling behaviour here */ |
14 /* Set scrolling behaviour here */ |
15 overflow: auto; |
15 overflow: auto; |
16 } |
16 } |
17 |
17 |
18 /* PADDING */ |
18 /* PADDING */ |
19 |
19 |
20 .CodeMirror-lines { |
20 .CodeMirror-lines { |
21 padding: 4px 0; /* Vertical padding around content */ |
21 padding: 4px 0; /* Vertical padding around content */ |
22 } |
22 } |
23 .CodeMirror pre { |
23 .CodeMirror pre { |
24 padding: 0 4px; /* Horizontal padding of content */ |
24 padding: 0 4px; /* Horizontal padding of content */ |
25 } |
25 } |
26 |
26 |
27 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { |
27 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { |
28 background-color: white; /* The little square between H and V scrollbars */ |
28 background-color: white; /* The little square between H and V scrollbars */ |
29 } |
29 } |
30 |
30 |
31 /* GUTTER */ |
31 /* GUTTER */ |
32 |
32 |
33 .CodeMirror-gutters { |
33 .CodeMirror-gutters { |
34 border-right: 1px solid #ddd; |
34 border-right: 1px solid #ddd; |
35 background-color: #f7f7f7; |
35 background-color: #f7f7f7; |
36 white-space: nowrap; |
36 white-space: nowrap; |
37 } |
37 } |
38 .CodeMirror-linenumbers {} |
38 .CodeMirror-linenumbers {} |
39 .CodeMirror-linenumber { |
39 .CodeMirror-linenumber { |
40 padding: 0 3px 0 5px; |
40 padding: 0 3px 0 5px; |
41 min-width: 20px; |
41 min-width: 20px; |
42 text-align: right; |
42 text-align: right; |
43 color: #999; |
43 color: #999; |
44 -moz-box-sizing: content-box; |
44 -moz-box-sizing: content-box; |
45 box-sizing: content-box; |
45 box-sizing: content-box; |
46 } |
46 } |
47 |
47 |
48 /* CURSOR */ |
48 /* CURSOR */ |
49 |
49 |
50 .CodeMirror div.CodeMirror-cursor { |
50 .CodeMirror div.CodeMirror-cursor { |
51 border-left: 1px solid black; |
51 border-left: 1px solid black; |
52 } |
52 } |
53 /* Shown when moving in bi-directional text */ |
53 /* Shown when moving in bi-directional text */ |
54 .CodeMirror div.CodeMirror-secondarycursor { |
54 .CodeMirror div.CodeMirror-secondarycursor { |
55 border-left: 1px solid silver; |
55 border-left: 1px solid silver; |
56 } |
56 } |
57 .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { |
57 .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { |
58 width: auto; |
58 width: auto; |
59 border: 0; |
59 border: 0; |
60 background: #7e7; |
60 background: #7e7; |
61 } |
61 } |
62 /* Can style cursor different in overwrite (non-insert) mode */ |
62 /* Can style cursor different in overwrite (non-insert) mode */ |
63 div.CodeMirror-overwrite div.CodeMirror-cursor {} |
63 div.CodeMirror-overwrite div.CodeMirror-cursor {} |
64 |
64 |
65 .cm-tab { display: inline-block; } |
65 .cm-tab { display: inline-block; } |
66 |
66 |
67 .CodeMirror-ruler { |
67 .CodeMirror-ruler { |
68 border-left: 1px solid #ccc; |
68 border-left: 1px solid #ccc; |
69 position: absolute; |
69 position: absolute; |
70 } |
70 } |
71 |
71 |
72 /* DEFAULT THEME */ |
72 /* DEFAULT THEME */ |
73 |
73 |
74 .cm-s-default .cm-keyword {color: #708;} |
74 .cm-s-default .cm-keyword {color: #708;} |
108 .CodeMirror-activeline-background {background: #e8f2ff;} |
108 .CodeMirror-activeline-background {background: #e8f2ff;} |
109 |
109 |
110 /* STOP */ |
110 /* STOP */ |
111 |
111 |
112 /* The rest of this file contains styles related to the mechanics of |
112 /* The rest of this file contains styles related to the mechanics of |
113 the editor. You probably shouldn't touch them. */ |
113 the editor. You probably shouldn't touch them. */ |
114 |
114 |
115 .CodeMirror { |
115 .CodeMirror { |
116 line-height: 1; |
116 line-height: 1; |
117 position: relative; |
117 position: relative; |
118 overflow: hidden; |
118 overflow: hidden; |
119 background: white; |
119 background: white; |
120 color: black; |
120 color: black; |
121 } |
121 } |
122 |
122 |
123 .CodeMirror-scroll { |
123 .CodeMirror-scroll { |
124 /* 30px is the magic margin used to hide the element's real scrollbars */ |
124 /* 30px is the magic margin used to hide the element's real scrollbars */ |
125 /* See overflow: hidden in .CodeMirror */ |
125 /* See overflow: hidden in .CodeMirror */ |
126 margin-bottom: -30px; margin-right: -30px; |
126 margin-bottom: -30px; margin-right: -30px; |
127 padding-bottom: 30px; |
127 padding-bottom: 30px; |
128 height: 100%; |
128 height: 100%; |
129 outline: none; /* Prevent dragging from highlighting the element */ |
129 outline: none; /* Prevent dragging from highlighting the element */ |
130 position: relative; |
130 position: relative; |
131 -moz-box-sizing: content-box; |
131 -moz-box-sizing: content-box; |
132 box-sizing: content-box; |
132 box-sizing: content-box; |
133 } |
133 } |
134 .CodeMirror-sizer { |
134 .CodeMirror-sizer { |
135 position: relative; |
135 position: relative; |
136 border-right: 30px solid transparent; |
136 border-right: 30px solid transparent; |
137 -moz-box-sizing: content-box; |
137 -moz-box-sizing: content-box; |
138 box-sizing: content-box; |
138 box-sizing: content-box; |
139 } |
139 } |
140 |
140 |
141 /* The fake, visible scrollbars. Used to force redraw during scrolling |
141 /* The fake, visible scrollbars. Used to force redraw during scrolling |
142 before actuall scrolling happens, thus preventing shaking and |
142 before actuall scrolling happens, thus preventing shaking and |
143 flickering artifacts. */ |
143 flickering artifacts. */ |
144 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { |
144 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { |
145 position: absolute; |
145 position: absolute; |
146 z-index: 6; |
146 z-index: 6; |
147 display: none; |
147 display: none; |
148 } |
148 } |
149 .CodeMirror-vscrollbar { |
149 .CodeMirror-vscrollbar { |
150 right: 0; top: 0; |
150 right: 0; top: 0; |
151 overflow-x: hidden; |
151 overflow-x: hidden; |
152 overflow-y: scroll; |
152 overflow-y: scroll; |
153 } |
153 } |
154 .CodeMirror-hscrollbar { |
154 .CodeMirror-hscrollbar { |
155 bottom: 0; left: 0; |
155 bottom: 0; left: 0; |
156 overflow-y: hidden; |
156 overflow-y: hidden; |
157 overflow-x: scroll; |
157 overflow-x: scroll; |
158 } |
158 } |
159 .CodeMirror-scrollbar-filler { |
159 .CodeMirror-scrollbar-filler { |
160 right: 0; bottom: 0; |
160 right: 0; bottom: 0; |
161 } |
161 } |
162 .CodeMirror-gutter-filler { |
162 .CodeMirror-gutter-filler { |
163 left: 0; bottom: 0; |
163 left: 0; bottom: 0; |
164 } |
164 } |
165 |
165 |
166 .CodeMirror-gutters { |
166 .CodeMirror-gutters { |
167 position: absolute; left: 0; top: 0; |
167 position: absolute; left: 0; top: 0; |
168 padding-bottom: 30px; |
168 padding-bottom: 30px; |
169 z-index: 3; |
169 z-index: 3; |
170 } |
170 } |
171 .CodeMirror-gutter { |
171 .CodeMirror-gutter { |
172 white-space: normal; |
172 white-space: normal; |
173 height: 100%; |
173 height: 100%; |
174 -moz-box-sizing: content-box; |
174 -moz-box-sizing: content-box; |
175 box-sizing: content-box; |
175 box-sizing: content-box; |
176 padding-bottom: 30px; |
176 padding-bottom: 30px; |
177 margin-bottom: -32px; |
177 margin-bottom: -32px; |
178 display: inline-block; |
178 display: inline-block; |
179 /* Hack to make IE7 behave */ |
179 /* Hack to make IE7 behave */ |
180 *zoom:1; |
180 *zoom:1; |
181 *display:inline; |
181 *display:inline; |
182 } |
182 } |
183 .CodeMirror-gutter-elt { |
183 .CodeMirror-gutter-elt { |
184 position: absolute; |
184 position: absolute; |
185 cursor: default; |
185 cursor: default; |
186 z-index: 4; |
186 z-index: 4; |
187 } |
187 } |
188 |
188 |
189 .CodeMirror-lines { |
189 .CodeMirror-lines { |
190 cursor: text; |
190 cursor: text; |
191 } |
191 } |
192 .CodeMirror pre { |
192 .CodeMirror pre { |
193 /* Reset some styles that the rest of the page might have set */ |
193 /* Reset some styles that the rest of the page might have set */ |
194 -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; |
194 -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; |
195 border-width: 0; |
195 border-width: 0; |
196 background: transparent; |
196 background: transparent; |
197 font-family: inherit; |
197 font-family: inherit; |
198 font-size: inherit; |
198 font-size: inherit; |
199 margin: 0; |
199 margin: 0; |
200 white-space: pre; |
200 white-space: pre; |
201 word-wrap: normal; |
201 word-wrap: normal; |
202 line-height: inherit; |
202 line-height: inherit; |
203 color: inherit; |
203 color: inherit; |
204 z-index: 2; |
204 z-index: 2; |
205 position: relative; |
205 position: relative; |
206 overflow: visible; |
206 overflow: visible; |
207 } |
207 } |
208 .CodeMirror-wrap pre { |
208 .CodeMirror-wrap pre { |
209 word-wrap: break-word; |
209 word-wrap: break-word; |
210 white-space: pre-wrap; |
210 white-space: pre-wrap; |
211 word-break: normal; |
211 word-break: normal; |
212 } |
212 } |
213 |
213 |
214 .CodeMirror-linebackground { |
214 .CodeMirror-linebackground { |
215 position: absolute; |
215 position: absolute; |
216 left: 0; right: 0; top: 0; bottom: 0; |
216 left: 0; right: 0; top: 0; bottom: 0; |
217 z-index: 0; |
217 z-index: 0; |
218 } |
218 } |
219 |
219 |
220 .CodeMirror-linewidget { |
220 .CodeMirror-linewidget { |
221 position: relative; |
221 position: relative; |
222 z-index: 2; |
222 z-index: 2; |
223 overflow: auto; |
223 overflow: auto; |
224 } |
224 } |
225 |
225 |
226 .CodeMirror-widget {} |
226 .CodeMirror-widget {} |
227 |
227 |
228 .CodeMirror-wrap .CodeMirror-scroll { |
228 .CodeMirror-wrap .CodeMirror-scroll { |
229 overflow-x: hidden; |
229 overflow-x: hidden; |
230 } |
230 } |
231 |
231 |
232 .CodeMirror-measure { |
232 .CodeMirror-measure { |
233 position: absolute; |
233 position: absolute; |
234 width: 100%; |
234 width: 100%; |
235 height: 0; |
235 height: 0; |
236 overflow: hidden; |
236 overflow: hidden; |
237 visibility: hidden; |
237 visibility: hidden; |
238 } |
238 } |
239 .CodeMirror-measure pre { position: static; } |
239 .CodeMirror-measure pre { position: static; } |
240 |
240 |
241 .CodeMirror div.CodeMirror-cursor { |
241 .CodeMirror div.CodeMirror-cursor { |
242 position: absolute; |
242 position: absolute; |
243 border-right: none; |
243 border-right: none; |
244 width: 0; |
244 width: 0; |
245 } |
245 } |
246 |
246 |
247 div.CodeMirror-cursors { |
247 div.CodeMirror-cursors { |
248 visibility: hidden; |
248 visibility: hidden; |
249 position: relative; |
249 position: relative; |
250 z-index: 1; |
250 z-index: 1; |
251 } |
251 } |
252 .CodeMirror-focused div.CodeMirror-cursors { |
252 .CodeMirror-focused div.CodeMirror-cursors { |
253 visibility: visible; |
253 visibility: visible; |
254 } |
254 } |
255 |
255 |
256 .CodeMirror-selected { background: #d9d9d9; } |
256 .CodeMirror-selected { background: #d9d9d9; } |
257 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } |
257 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } |
258 |
258 |
259 .cm-searching { |
259 .cm-searching { |
260 background: #ffa; |
260 background: #ffa; |
261 background: rgba(255, 255, 0, .4); |
261 background: rgba(255, 255, 0, .4); |
262 } |
262 } |
263 |
263 |
264 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ |
264 /* IE7 hack to prevent it from returning funny offsetTops on the spans */ |
265 .CodeMirror span { *vertical-align: text-bottom; } |
265 .CodeMirror span { *vertical-align: text-bottom; } |
266 |
266 |
267 /* Used to force a border model for a node */ |
267 /* Used to force a border model for a node */ |
268 .cm-force-border { padding-right: .1px; } |
268 .cm-force-border { padding-right: .1px; } |
269 |
269 |
270 @media print { |
270 @media print { |
271 /* Hide the cursor when printing */ |
271 /* Hide the cursor when printing */ |
272 .CodeMirror div.CodeMirror-cursors { |
272 .CodeMirror div.CodeMirror-cursors { |
273 visibility: hidden; |
273 visibility: hidden; |
274 } |
274 } |
275 } |
275 } |