]> BookStack Code Mirror - bookstack/blob - resources/assets/sass/_codemirror.scss
#47 - Fixes the issues with the test case.
[bookstack] / resources / assets / sass / _codemirror.scss
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 ::selection { background-color: transparent }
227 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
228
229 .CodeMirror-lines {
230   cursor: text;
231   min-height: 1px; /* prevents collapsing before first draw */
232 }
233 .CodeMirror pre {
234   /* Reset some styles that the rest of the page might have set */
235   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
236   border-width: 0;
237   background: transparent;
238   font-family: inherit;
239   font-size: inherit;
240   margin: 0;
241   white-space: pre;
242   word-wrap: normal;
243   line-height: inherit;
244   color: inherit;
245   z-index: 2;
246   position: relative;
247   overflow: visible;
248   -webkit-tap-highlight-color: transparent;
249   -webkit-font-variant-ligatures: contextual;
250   font-variant-ligatures: contextual;
251 }
252 .CodeMirror-wrap pre {
253   word-wrap: break-word;
254   white-space: pre-wrap;
255   word-break: normal;
256 }
257
258 .CodeMirror-linebackground {
259   position: absolute;
260   left: 0; right: 0; top: 0; bottom: 0;
261   z-index: 0;
262 }
263
264 .CodeMirror-linewidget {
265   position: relative;
266   z-index: 2;
267   overflow: auto;
268 }
269
270 .CodeMirror-widget {}
271
272 .CodeMirror-rtl pre { direction: rtl; }
273
274 .CodeMirror-code {
275   outline: none;
276 }
277
278 /* Force content-box sizing for the elements where we expect it */
279 .CodeMirror-scroll,
280 .CodeMirror-sizer,
281 .CodeMirror-gutter,
282 .CodeMirror-gutters,
283 .CodeMirror-linenumber {
284   -moz-box-sizing: content-box;
285   box-sizing: content-box;
286 }
287
288 .CodeMirror-measure {
289   position: absolute;
290   width: 100%;
291   height: 0;
292   overflow: hidden;
293   visibility: hidden;
294 }
295
296 .CodeMirror-cursor {
297   position: absolute;
298   pointer-events: none;
299 }
300 .CodeMirror-measure pre { position: static; }
301
302 div.CodeMirror-cursors {
303   visibility: hidden;
304   position: relative;
305   z-index: 3;
306 }
307 div.CodeMirror-dragcursors {
308   visibility: visible;
309 }
310
311 .CodeMirror-focused div.CodeMirror-cursors {
312   visibility: visible;
313 }
314
315 .CodeMirror-selected { background: #d9d9d9; }
316 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
317 .CodeMirror-crosshair { cursor: crosshair; }
318 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
319 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
320
321 .cm-searching {
322   background: #ffa;
323   background: rgba(255, 255, 0, .4);
324 }
325
326 /* Used to force a border model for a node */
327 .cm-force-border { padding-right: .1px; }
328
329 @media print {
330   /* Hide the cursor when printing */
331   .CodeMirror div.CodeMirror-cursors {
332     visibility: hidden;
333   }
334 }
335
336 /* See issue #2901 */
337 .cm-tab-wrap-hack:after { content: ''; }
338
339 /* Help users use markselection to safely style text background */
340 span.CodeMirror-selectedtext { background: none; }
341
342
343 /*
344
345     Name:       Base16 Default Light
346     Author:     Chris Kempson (http://chriskempson.com)
347
348     CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
349     Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
350
351 */
352
353 .cm-s-base16-light.CodeMirror { background: #f8f8f8; color: #444444; }
354 .cm-s-base16-light div.CodeMirror-selected { background: #e0e0e0; }
355 .cm-s-base16-light .CodeMirror-line::selection, .cm-s-base16-light .CodeMirror-line > span::selection, .cm-s-base16-light .CodeMirror-line > span > span::selection { background: #e0e0e0; }
356 .cm-s-base16-light .CodeMirror-line::-moz-selection, .cm-s-base16-light .CodeMirror-line > span::-moz-selection, .cm-s-base16-light .CodeMirror-line > span > span::-moz-selection { background: #e0e0e0; }
357 .cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 0px; }
358 .cm-s-base16-light .CodeMirror-guttermarker { color: #ac4142; }
359 .cm-s-base16-light .CodeMirror-guttermarker-subtle { color: #b0b0b0; }
360 .cm-s-base16-light .CodeMirror-linenumber { color: #b0b0b0; }
361 .cm-s-base16-light .CodeMirror-cursor { border-left: 1px solid #505050; }
362
363 .cm-s-base16-light span.cm-comment { color: #8f5536; }
364 .cm-s-base16-light span.cm-atom { color: #aa759f; }
365 .cm-s-base16-light span.cm-number { color: #aa759f; }
366
367 .cm-s-base16-light span.cm-property, .cm-s-base16-light span.cm-attribute { color: #90a959; }
368 .cm-s-base16-light span.cm-keyword { color: #ac4142; }
369 .cm-s-base16-light span.cm-string { color: #f4bf75; }
370
371 .cm-s-base16-light span.cm-variable { color: #90a959; }
372 .cm-s-base16-light span.cm-variable-2 { color: #6a9fb5; }
373 .cm-s-base16-light span.cm-def { color: #d28445; }
374 .cm-s-base16-light span.cm-bracket { color: #202020; }
375 .cm-s-base16-light span.cm-tag { color: #ac4142; }
376 .cm-s-base16-light span.cm-link { color: #aa759f; }
377 .cm-s-base16-light span.cm-error { background: #ac4142; color: #505050; }
378
379 .cm-s-base16-light .CodeMirror-activeline-background { background: #DDDCDC; }
380 .cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
381
382 /**
383  * Custom BookStack overrides
384  */
385 .cm-s-base16-light.CodeMirror {
386   font-size: 12px;
387   height: auto;
388   margin-bottom: $-l;
389   border: 1px solid #DDD;;
390 }
391 .cm-s-base16-light .CodeMirror-gutters { background: #f5f5f5; border-right: 1px solid #DDD; }
392
393 .flex-fill .CodeMirror {
394   position: absolute;
395   top: 0;
396   bottom: 0;
397   left: 0;
398   width: 100%;
399   height: 100%;
400 }