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