44 /* Set height, width, borders, and global font properties here */
55 font-family : monospace;
66 height : 300px ;
7- }
8- .CodeMirror-scroll {
9- /* Set scrolling behaviour here */
10- overflow : auto;
7+ color : black;
8+ direction : ltr;
119}
1210
1311/* PADDING */
3634 min-width : 20px ;
3735 text-align : right;
3836 color : # 999 ;
37+ white-space : nowrap;
3938}
4039
40+ .CodeMirror-guttermarker { color : black; }
41+ .CodeMirror-guttermarker-subtle { color : # 999 ; }
42+
4143/* CURSOR */
4244
43- .CodeMirror div . CodeMirror -cursor {
45+ .CodeMirror-cursor {
4446 border-left : 1px solid black;
45- z-index : 3 ;
47+ border-right : none;
48+ width : 0 ;
4649}
4750/* Shown when moving in bi-directional text */
4851.CodeMirror div .CodeMirror-secondarycursor {
4952 border-left : 1px solid silver;
5053}
51- .CodeMirror . cm-keymap- fat-cursor div .CodeMirror-cursor {
54+ .cm-fat-cursor .CodeMirror-cursor {
5255 width : auto;
53- border : 0 ;
56+ border : 0 !important ;
5457 background : # 7e7 ;
58+ }
59+ .cm-fat-cursor div .CodeMirror-cursors {
5560 z-index : 1 ;
5661}
62+ .cm-fat-cursor-mark {
63+ background-color : rgba (20 , 255 , 20 , 0.5 );
64+ -webkit-animation : blink 1.06s steps (1 ) infinite;
65+ -moz-animation : blink 1.06s steps (1 ) infinite;
66+ animation : blink 1.06s steps (1 ) infinite;
67+ }
68+ .cm-animate-fat-cursor {
69+ width : auto;
70+ border : 0 ;
71+ -webkit-animation : blink 1.06s steps (1 ) infinite;
72+ -moz-animation : blink 1.06s steps (1 ) infinite;
73+ animation : blink 1.06s steps (1 ) infinite;
74+ background-color : # 7e7 ;
75+ }
76+ @-moz-keyframes blink {
77+ 0% {}
78+ 50% { background-color : transparent; }
79+ 100% {}
80+ }
81+ @-webkit-keyframes blink {
82+ 0% {}
83+ 50% { background-color : transparent; }
84+ 100% {}
85+ }
86+ @keyframes blink {
87+ 0% {}
88+ 50% { background-color : transparent; }
89+ 100% {}
90+ }
91+
5792/* Can style cursor different in overwrite (non-insert) mode */
58- .CodeMirror div .CodeMirror-cursor . CodeMirror-overwrite {}
93+ .CodeMirror-overwrite .CodeMirror-cursor {}
5994
60- .cm-tab { display : inline-block; }
95+ .cm-tab { display : inline-block; text-decoration : inherit; }
96+
97+ .CodeMirror-rulers {
98+ position : absolute;
99+ left : 0 ; right : 0 ; top : -50px ; bottom : -20px ;
100+ overflow : hidden;
101+ }
102+ .CodeMirror-ruler {
103+ border-left : 1px solid # ccc ;
104+ top : 0 ; bottom : 0 ;
105+ position : absolute;
106+ }
61107
62108/* DEFAULT THEME */
63109
110+ .cm-s-default .cm-header {color : blue;}
111+ .cm-s-default .cm-quote {color : # 090 ;}
112+ .cm-negative {color : # d44 ;}
113+ .cm-positive {color : # 292 ;}
114+ .cm-header , .cm-strong {font-weight : bold;}
115+ .cm-em {font-style : italic;}
116+ .cm-link {text-decoration : underline;}
117+ .cm-strikethrough {text-decoration : line-through;}
118+
64119.cm-s-default .cm-keyword {color : # 708 ;}
65120.cm-s-default .cm-atom {color : # 219 ;}
66121.cm-s-default .cm-number {color : # 164 ;}
67122.cm-s-default .cm-def {color : # 00f ;}
68- .cm-s-default .cm-variable {color : black;}
123+ .cm-s-default .cm-variable ,
124+ .cm-s-default .cm-punctuation ,
125+ .cm-s-default .cm-property ,
126+ .cm-s-default .cm-operator {}
69127.cm-s-default .cm-variable-2 {color : # 05a ;}
70- .cm-s-default .cm-variable-3 {color : # 085 ;}
71- .cm-s-default .cm-property {color : black;}
72- .cm-s-default .cm-operator {color : black;}
128+ .cm-s-default .cm-variable-3 , .cm-s-default .cm-type {color : # 085 ;}
73129.cm-s-default .cm-comment {color : # a50 ;}
74130.cm-s-default .cm-string {color : # a11 ;}
75131.cm-s-default .cm-string-2 {color : # f50 ;}
76132.cm-s-default .cm-meta {color : # 555 ;}
77- .cm-s-default .cm-error {color : # f00 ;}
78133.cm-s-default .cm-qualifier {color : # 555 ;}
79134.cm-s-default .cm-builtin {color : # 30a ;}
80135.cm-s-default .cm-bracket {color : # 997 ;}
81136.cm-s-default .cm-tag {color : # 170 ;}
82137.cm-s-default .cm-attribute {color : # 00c ;}
83- .cm-s-default .cm-header {color : blue;}
84- .cm-s-default .cm-quote {color : # 090 ;}
85138.cm-s-default .cm-hr {color : # 999 ;}
86139.cm-s-default .cm-link {color : # 00c ;}
87140
88- .cm-negative {color : # d44 ;}
89- .cm-positive {color : # 292 ;}
90- .cm-header , .cm-strong {font-weight : bold;}
91- .cm-em {font-style : italic;}
92- .cm-link {text-decoration : underline;}
93-
141+ .cm-s-default .cm-error {color : # f00 ;}
94142.cm-invalidchar {color : # f00 ;}
95143
96- div .CodeMirror span .CodeMirror-matchingbracket {color : # 0f0 ;}
97- div .CodeMirror span .CodeMirror-nonmatchingbracket {color : # f22 ;}
144+ .CodeMirror-composing { border-bottom : 2px solid; }
145+
146+ /* Default styles for common addons */
147+
148+ div .CodeMirror span .CodeMirror-matchingbracket {color : # 0b0 ;}
149+ div .CodeMirror span .CodeMirror-nonmatchingbracket {color : # a22 ;}
150+ .CodeMirror-matchingtag { background : rgba (255 , 150 , 0 , .3 ); }
98151.CodeMirror-activeline-background {background : # e8f2ff ;}
99152
100153/* STOP */
@@ -103,28 +156,28 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
103156 the editor. You probably shouldn't touch them. */
104157
105158.CodeMirror {
106- line-height : 1 ;
107159 position : relative;
108160 overflow : hidden;
109161 background : white;
110- color : black;
111162}
112163
113164.CodeMirror-scroll {
165+ overflow : scroll !important ; /* Things will break if this is overridden */
114166 /* 30px is the magic margin used to hide the element's real scrollbars */
115167 /* See overflow: hidden in .CodeMirror */
116168 margin-bottom : -30px ; margin-right : -30px ;
117- padding-bottom : 30px ; padding-right : 30 px ;
169+ padding-bottom : 30px ;
118170 height : 100% ;
119171 outline : none; /* Prevent dragging from highlighting the element */
120172 position : relative;
121173}
122174.CodeMirror-sizer {
123175 position : relative;
176+ border-right : 30px solid transparent;
124177}
125178
126179/* The fake, visible scrollbars. Used to force redraw during scrolling
127- before actuall scrolling happens, thus preventing shaking and
180+ before actual scrolling happens, thus preventing shaking and
128181 flickering artifacts. */
129182.CodeMirror-vscrollbar , .CodeMirror-hscrollbar , .CodeMirror-scrollbar-filler , .CodeMirror-gutter-filler {
130183 position : absolute;
@@ -150,27 +203,38 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
150203
151204.CodeMirror-gutters {
152205 position : absolute; left : 0 ; top : 0 ;
153- padding-bottom : 30 px ;
206+ min-height : 100 % ;
154207 z-index : 3 ;
155208}
156209.CodeMirror-gutter {
157210 white-space : normal;
158211 height : 100% ;
159- padding-bottom : 30px ;
160- margin-bottom : -32px ;
161212 display : inline-block;
162- /* Hack to make IE7 behave */
163- * zoom : 1 ;
164- * display : inline;
213+ vertical-align : top;
214+ margin-bottom : -30px ;
215+ }
216+ .CodeMirror-gutter-wrapper {
217+ position : absolute;
218+ z-index : 4 ;
219+ background : none !important ;
220+ border : none !important ;
221+ }
222+ .CodeMirror-gutter-background {
223+ position : absolute;
224+ top : 0 ; bottom : 0 ;
225+ z-index : 4 ;
165226}
166227.CodeMirror-gutter-elt {
167228 position : absolute;
168229 cursor : default;
169230 z-index : 4 ;
170231}
232+ .CodeMirror-gutter-wrapper ::selection { background-color : transparent }
233+ .CodeMirror-gutter-wrapper ::-moz-selection { background-color : transparent }
171234
172235.CodeMirror-lines {
173236 cursor : text;
237+ min-height : 1px ; /* prevents collapsing before first draw */
174238}
175239.CodeMirror pre {
176240 /* Reset some styles that the rest of the page might have set */
@@ -187,22 +251,16 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
187251 z-index : 2 ;
188252 position : relative;
189253 overflow : visible;
254+ -webkit-tap-highlight-color : transparent;
255+ -webkit-font-variant-ligatures : contextual;
256+ font-variant-ligatures : contextual;
190257}
191258.CodeMirror-wrap pre {
192259 word-wrap : break-word;
193260 white-space : pre-wrap;
194261 word-break : normal;
195262}
196- .CodeMirror-code pre {
197- border-right : 30px solid transparent;
198- width : -webkit-fit-content;
199- width : -moz-fit-content;
200- width : fit-content;
201- }
202- .CodeMirror-wrap .CodeMirror-code pre {
203- border-right : none;
204- width : auto;
205- }
263+
206264.CodeMirror-linebackground {
207265 position : absolute;
208266 left : 0 ; right : 0 ; top : 0 ; bottom : 0 ;
@@ -212,48 +270,77 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
212270.CodeMirror-linewidget {
213271 position : relative;
214272 z-index : 2 ;
215- overflow : auto;
273+ padding : 0.1 px ; /* Force widget margins to stay inside of the container */
216274}
217275
218- .CodeMirror-widget {
276+ .CodeMirror-widget {}
277+
278+ .CodeMirror-rtl pre { direction : rtl; }
279+
280+ .CodeMirror-code {
281+ outline : none;
219282}
220283
221- .CodeMirror-wrap .CodeMirror-scroll {
222- overflow-x : hidden;
284+ /* Force content-box sizing for the elements where we expect it */
285+ .CodeMirror-scroll ,
286+ .CodeMirror-sizer ,
287+ .CodeMirror-gutter ,
288+ .CodeMirror-gutters ,
289+ .CodeMirror-linenumber {
290+ -moz-box-sizing : content-box;
291+ box-sizing : content-box;
223292}
224293
225294.CodeMirror-measure {
226295 position : absolute;
227- width : 100% ; height : 0px ;
296+ width : 100% ;
297+ height : 0 ;
228298 overflow : hidden;
229299 visibility : hidden;
230300}
231- .CodeMirror-measure pre { position : static; }
232301
233- .CodeMirror div . CodeMirror -cursor {
302+ .CodeMirror-cursor {
234303 position : absolute;
304+ pointer-events : none;
305+ }
306+ .CodeMirror-measure pre { position : static; }
307+
308+ div .CodeMirror-cursors {
235309 visibility : hidden;
236- border-right : none ;
237- width : 0 ;
310+ position : relative ;
311+ z-index : 3 ;
238312}
239- .CodeMirror-focused div .CodeMirror-cursor {
313+ div .CodeMirror-dragcursors {
314+ visibility : visible;
315+ }
316+
317+ .CodeMirror-focused div .CodeMirror-cursors {
240318 visibility : visible;
241319}
242320
243321.CodeMirror-selected { background : # d9d9d9 ; }
244322.CodeMirror-focused .CodeMirror-selected { background : # d7d4f0 ; }
323+ .CodeMirror-crosshair { cursor : crosshair; }
324+ .CodeMirror-line ::selection , .CodeMirror-line > span ::selection , .CodeMirror-line > span > span ::selection { background : # d7d4f0 ; }
325+ .CodeMirror-line ::-moz-selection , .CodeMirror-line > span ::-moz-selection , .CodeMirror-line > span > span ::-moz-selection { background : # d7d4f0 ; }
245326
246327.cm-searching {
247- background : # ffa ;
248- background : rgba (255 , 255 , 0 , .4 );
328+ background-color : # ffa ;
329+ background-color : rgba (255 , 255 , 0 , .4 );
249330}
250331
251- /* IE7 hack to prevent it from returning funny offsetTops on the spans */
252- .CodeMirror span { * vertical-align : text-bottom ; }
332+ /* Used to force a border model for a node */
333+ .cm-force-border { padding-right : .1 px ; }
253334
254335@media print {
255336 /* Hide the cursor when printing */
256- .CodeMirror div .CodeMirror-cursor {
337+ .CodeMirror div .CodeMirror-cursors {
257338 visibility : hidden;
258339 }
259340}
341+
342+ /* See issue #2901 */
343+ .cm-tab-wrap-hack : after { content : '' ; }
344+
345+ /* Help users use markselection to safely style text background */
346+ span .CodeMirror-selectedtext { background : none; }
0 commit comments