]> BookStack Code Mirror - bookstack/blob - resources/sass/_codemirror.scss
Merge branch 'master' into dark-mode
[bookstack] / resources / sass / _codemirror.scss
1 /* BASICS */
2
3 .CodeMirror {
4   /* Set height, width, borders, and global font properties here */
5   height: 300px;
6   color: black;
7 }
8
9 /* PADDING */
10
11 .CodeMirror-lines {
12   padding: 4px 0; /* Vertical padding around content */
13 }
14 .CodeMirror pre {
15   padding: 0 4px; /* Horizontal padding of content */
16 }
17
18 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
19   background-color: white; /* The little square between H and V scrollbars */
20 }
21
22 /* GUTTER */
23
24 .CodeMirror-gutters {
25   border-right: 1px solid #ddd;
26   background-color: #f7f7f7;
27   white-space: nowrap;
28 }
29 .CodeMirror-linenumbers {}
30 .CodeMirror-linenumber {
31   padding: 0 3px 0 5px;
32   min-width: 20px;
33   text-align: right;
34   color: #999;
35   white-space: nowrap;
36 }
37
38 .CodeMirror-guttermarker { color: black; }
39 .CodeMirror-guttermarker-subtle { color: #999; }
40
41 /* CURSOR */
42
43 .CodeMirror-cursor {
44   border-left: 1px solid black;
45   border-right: none;
46   width: 0;
47 }
48 /* Shown when moving in bi-directional text */
49 .CodeMirror div.CodeMirror-secondarycursor {
50   border-left: 1px solid silver;
51 }
52 .cm-fat-cursor .CodeMirror-cursor {
53   width: auto;
54   border: 0 !important;
55   background: #7e7;
56 }
57 .cm-fat-cursor div.CodeMirror-cursors {
58   z-index: 1;
59 }
60
61 .cm-animate-fat-cursor {
62   width: auto;
63   border: 0;
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   background-color: #7e7;
68 }
69 @-moz-keyframes blink {
70   0% {}
71   50% { background-color: transparent; }
72   100% {}
73 }
74 @-webkit-keyframes blink {
75   0% {}
76   50% { background-color: transparent; }
77   100% {}
78 }
79 @keyframes blink {
80   0% {}
81   50% { background-color: transparent; }
82   100% {}
83 }
84
85 /* Can style cursor different in overwrite (non-insert) mode */
86 .CodeMirror-overwrite .CodeMirror-cursor {}
87
88 .cm-tab { display: inline-block; text-decoration: inherit; }
89
90 .CodeMirror-rulers {
91   position: absolute;
92   left: 0; right: 0; top: -50px; bottom: -20px;
93   overflow: hidden;
94 }
95 .CodeMirror-ruler {
96   border-left: 1px solid #ccc;
97   top: 0; bottom: 0;
98   position: absolute;
99 }
100
101 /* DEFAULT THEME */
102
103 .cm-s-default .cm-header {color: blue;}
104 .cm-s-default .cm-quote {color: #090;}
105 .cm-negative {color: #d44;}
106 .cm-positive {color: #292;}
107 .cm-header, .cm-strong {font-weight: bold;}
108 .cm-em {font-style: italic;}
109 .cm-link {text-decoration: underline;}
110 .cm-strikethrough {text-decoration: line-through;}
111
112 .cm-s-default .cm-keyword {color: #708;}
113 .cm-s-default .cm-atom {color: #219;}
114 .cm-s-default .cm-number {color: #164;}
115 .cm-s-default .cm-def {color: #00f;}
116 .cm-s-default .cm-variable,
117 .cm-s-default .cm-punctuation,
118 .cm-s-default .cm-property,
119 .cm-s-default .cm-operator {}
120 .cm-s-default .cm-variable-2 {color: #05a;}
121 .cm-s-default .cm-variable-3 {color: #085;}
122 .cm-s-default .cm-comment {color: #a50;}
123 .cm-s-default .cm-string {color: #a11;}
124 .cm-s-default .cm-string-2 {color: #f50;}
125 .cm-s-default .cm-meta {color: #555;}
126 .cm-s-default .cm-qualifier {color: #555;}
127 .cm-s-default .cm-builtin {color: #30a;}
128 .cm-s-default .cm-bracket {color: #997;}
129 .cm-s-default .cm-tag {color: #170;}
130 .cm-s-default .cm-attribute {color: #00c;}
131 .cm-s-default .cm-hr {color: #999;}
132 .cm-s-default .cm-link {color: #00c;}
133
134 .cm-s-default .cm-error {color: #f00;}
135 .cm-invalidchar {color: #f00;}
136
137 .CodeMirror-composing { border-bottom: 2px solid; }
138
139 /* Default styles for common addons */
140
141 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
142 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
143 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
144 .CodeMirror-activeline-background {background: #e8f2ff;}
145
146 /* STOP */
147
148 /* The rest of this file contains styles related to the mechanics of
149    the editor. You probably shouldn't touch them. */
150
151 .CodeMirror {
152   position: relative;
153   overflow: hidden;
154   background: white;
155 }
156
157 .CodeMirror-scroll {
158   overflow: scroll !important; /* Things will break if this is overridden */
159   /* 30px is the magic margin used to hide the element's real scrollbars */
160   /* See overflow: hidden in .CodeMirror */
161   margin-bottom: -30px; margin-right: -30px;
162   padding-bottom: 30px;
163   height: 100%;
164   outline: none; /* Prevent dragging from highlighting the element */
165   position: relative;
166 }
167 .CodeMirror-sizer {
168   position: relative;
169   border-right: 30px solid transparent;
170 }
171
172 /* The fake, visible scrollbars. Used to force redraw during scrolling
173    before actual scrolling happens, thus preventing shaking and
174    flickering artifacts. */
175 .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
176   position: absolute;
177   z-index: 6;
178   display: none;
179 }
180 .CodeMirror-vscrollbar {
181   right: 0; top: 0;
182   overflow-x: hidden;
183   overflow-y: scroll;
184 }
185 .CodeMirror-hscrollbar {
186   bottom: 0; left: 0;
187   overflow-y: hidden;
188   overflow-x: scroll;
189 }
190 .CodeMirror-scrollbar-filler {
191   right: 0; bottom: 0;
192 }
193 .CodeMirror-gutter-filler {
194   left: 0; bottom: 0;
195 }
196
197 .CodeMirror-gutters {
198   position: absolute; left: 0; top: 0;
199   min-height: 100%;
200   z-index: 3;
201 }
202 .CodeMirror-gutter {
203   white-space: normal;
204   height: 100%;
205   display: inline-block;
206   vertical-align: top;
207   margin-bottom: -30px;
208 }
209 .CodeMirror-gutter-wrapper {
210   position: absolute;
211   z-index: 4;
212   background: none !important;
213   border: none !important;
214 }
215 .CodeMirror-gutter-background {
216   position: absolute;
217   top: 0; bottom: 0;
218   z-index: 4;
219 }
220 .CodeMirror-gutter-elt {
221   position: absolute;
222   cursor: default;
223   z-index: 4;
224 }
225 .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
226 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
227
228 .CodeMirror-lines {
229   cursor: text;
230   min-height: 1px; /* prevents collapsing before first draw */
231 }
232 .CodeMirror pre {
233   /* Reset some styles that the rest of the page might have set */
234   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
235   border-width: 0;
236   background: transparent;
237   font-size: inherit;
238   margin: 0;
239   white-space: pre;
240   word-wrap: normal;
241   line-height: inherit;
242   color: inherit;
243   z-index: 2;
244   position: relative;
245   overflow: visible;
246   -webkit-tap-highlight-color: transparent;
247   -webkit-font-variant-ligatures: contextual;
248   font-variant-ligatures: contextual;
249   &:after {
250     content: none;
251     display: none;
252   }
253 }
254 .CodeMirror-wrap pre {
255   word-wrap: break-word;
256   white-space: pre-wrap;
257   word-break: normal;
258 }
259
260 .CodeMirror-linebackground {
261   position: absolute;
262   left: 0; right: 0; top: 0; bottom: 0;
263   z-index: 0;
264 }
265
266 .CodeMirror-linewidget {
267   position: relative;
268   z-index: 2;
269   overflow: auto;
270 }
271
272 .CodeMirror-widget {}
273
274 .CodeMirror-rtl pre { direction: rtl; }
275
276 .CodeMirror-code {
277   outline: none;
278 }
279
280 /* Force content-box sizing for the elements where we expect it */
281 .CodeMirror-scroll,
282 .CodeMirror-sizer,
283 .CodeMirror-gutter,
284 .CodeMirror-gutters,
285 .CodeMirror-linenumber {
286   -moz-box-sizing: content-box;
287   box-sizing: content-box;
288 }
289
290 .CodeMirror-measure {
291   position: absolute;
292   width: 100%;
293   height: 0;
294   overflow: hidden;
295   visibility: hidden;
296 }
297
298 .CodeMirror-cursor {
299   position: absolute;
300   pointer-events: none;
301 }
302 .CodeMirror-measure pre { position: static; }
303
304 div.CodeMirror-cursors {
305   visibility: hidden;
306   position: relative;
307   z-index: 3;
308 }
309 div.CodeMirror-dragcursors {
310   visibility: visible;
311 }
312
313 .CodeMirror-focused div.CodeMirror-cursors {
314   visibility: visible;
315 }
316
317 .CodeMirror-selected { background: #d9d9d9; }
318 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
319 .CodeMirror-crosshair { cursor: crosshair; }
320 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
321 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
322
323 .cm-searching {
324   background: #ffa;
325   background: rgba(255, 255, 0, .4);
326 }
327
328 /* Used to force a border model for a node */
329 .cm-force-border { padding-right: .1px; }
330
331 @media print {
332   /* Hide the cursor when printing */
333   .CodeMirror div.CodeMirror-cursors {
334     visibility: hidden;
335   }
336 }
337
338 /* See issue #2901 */
339 .cm-tab-wrap-hack:after { content: ''; }
340
341 /* Help users use markselection to safely style text background */
342 span.CodeMirror-selectedtext { background: none; }
343
344 /**
345  * Codemirror Default theme
346  */
347
348 .cm-s-default .cm-header {color: blue;}
349 .cm-s-default .cm-quote {color: #090;}
350 .cm-negative {color: #d44;}
351 .cm-positive {color: #292;}
352 .cm-header, .cm-strong {font-weight: bold;}
353 .cm-em {font-style: italic;}
354 .cm-link {text-decoration: underline;}
355 .cm-strikethrough {text-decoration: line-through;}
356
357 .cm-s-default .cm-keyword {color: #708;}
358 .cm-s-default .cm-atom {color: #219;}
359 .cm-s-default .cm-number {color: #164;}
360 .cm-s-default .cm-def {color: #00f;}
361 .cm-s-default .cm-variable,
362 .cm-s-default .cm-punctuation,
363 .cm-s-default .cm-property,
364 .cm-s-default .cm-operator {}
365 .cm-s-default .cm-variable-2 {color: #05a;}
366 .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
367 .cm-s-default .cm-comment {color: #a50;}
368 .cm-s-default .cm-string {color: #a11;}
369 .cm-s-default .cm-string-2 {color: #f50;}
370 .cm-s-default .cm-meta {color: #555;}
371 .cm-s-default .cm-qualifier {color: #555;}
372 .cm-s-default .cm-builtin {color: #30a;}
373 .cm-s-default .cm-bracket {color: #997;}
374 .cm-s-default .cm-tag {color: #170;}
375 .cm-s-default .cm-attribute {color: #00c;}
376 .cm-s-default .cm-hr {color: #999;}
377 .cm-s-default .cm-link {color: #00c;}
378
379 .cm-s-default .cm-error {color: #f00;}
380 .cm-invalidchar {color: #f00;}
381
382 .CodeMirror-composing { border-bottom: 2px solid; }
383
384 /* Default styles for common addons */
385
386 div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
387 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
388 .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
389 .CodeMirror-activeline-background {background: #e8f2ff;}
390
391 /* STOP */
392
393 /**
394  * Codemirror Darcula theme
395  */
396
397 /**
398     Name: IntelliJ IDEA darcula theme
399     From IntelliJ IDEA by JetBrains
400  */
401
402 .cm-s-darcula  { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;}
403 .cm-s-darcula.CodeMirror { background: #2B2B2B; color: #A9B7C6; }
404
405 .cm-s-darcula span.cm-meta { color: #BBB529; }
406 .cm-s-darcula span.cm-number { color: #6897BB; }
407 .cm-s-darcula span.cm-keyword { color: #CC7832; line-height: 1em; font-weight: bold; }
408 .cm-s-darcula span.cm-def { color: #A9B7C6; font-style: italic; }
409 .cm-s-darcula span.cm-variable { color: #A9B7C6; }
410 .cm-s-darcula span.cm-variable-2 { color: #A9B7C6; }
411 .cm-s-darcula span.cm-variable-3 { color: #9876AA; }
412 .cm-s-darcula span.cm-type { color: #AABBCC; font-weight: bold; }
413 .cm-s-darcula span.cm-property { color: #FFC66D; }
414 .cm-s-darcula span.cm-operator { color: #A9B7C6; }
415 .cm-s-darcula span.cm-string { color: #6A8759; }
416 .cm-s-darcula span.cm-string-2 { color: #6A8759; }
417 .cm-s-darcula span.cm-comment { color: #61A151; font-style: italic; }
418 .cm-s-darcula span.cm-link { color: #CC7832; }
419 .cm-s-darcula span.cm-atom { color: #CC7832; }
420 .cm-s-darcula span.cm-error { color: #BC3F3C; }
421 .cm-s-darcula span.cm-tag { color: #629755; font-weight: bold; font-style: italic; text-decoration: underline; }
422 .cm-s-darcula span.cm-attribute { color: #6897bb; }
423 .cm-s-darcula span.cm-qualifier { color: #6A8759; }
424 .cm-s-darcula span.cm-bracket { color: #A9B7C6; }
425 .cm-s-darcula span.cm-builtin { color: #FF9E59; }
426 .cm-s-darcula span.cm-special { color: #FF9E59; }
427 .cm-s-darcula span.cm-matchhighlight { color: #FFFFFF; background-color: rgba(50, 89, 48, .7); font-weight: normal;}
428 .cm-s-darcula span.cm-searching { color: #FFFFFF; background-color: rgba(61, 115, 59, .7); font-weight: normal;}
429
430 .cm-s-darcula .CodeMirror-cursor { border-left: 1px solid #A9B7C6; }
431 .cm-s-darcula .CodeMirror-activeline-background { background: #323232; }
432 .cm-s-darcula .CodeMirror-gutters { background: #313335; border-right: 1px solid #313335; }
433 .cm-s-darcula .CodeMirror-guttermarker { color: #FFEE80; }
434 .cm-s-darcula .CodeMirror-guttermarker-subtle { color: #D0D0D0; }
435 .cm-s-darcula .CodeMirrir-linenumber { color: #606366; }
436 .cm-s-darcula .CodeMirror-matchingbracket { background-color: #3B514D; color: #FFEF28 !important; font-weight: bold; }
437
438 .cm-s-darcula div.CodeMirror-selected { background: #214283; }
439
440 .CodeMirror-hints.darcula {
441   font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
442   color: #9C9E9E;
443   background-color: #3B3E3F !important;
444 }
445
446 .CodeMirror-hints.darcula .CodeMirror-hint-active {
447   background-color: #494D4E !important;
448   color: #9C9E9E !important;
449 }
450
451 /**
452  * Custom BookStack overrides
453  */
454 .CodeMirror, .CodeMirror pre {
455   font-size: 12px;
456 }
457 .CodeMirror {
458   font-size: 12px;
459   height: auto;
460   margin-bottom: $-l;
461   border: 1px solid;
462   @include lightDark(border-color, #DDD, #111)
463 }
464
465 .cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 0; color: #333; }
466
467 .code-fill .CodeMirror {
468   position: absolute;
469   top: 0;
470   bottom: 0;
471   left: 0;
472   width: 100%;
473   height: 100%;
474   margin-bottom: 0;
475 }
476
477 /**
478  * Custom Copy Button
479  */
480 .CodeMirror-copy {
481   position: absolute;
482   top: -1px;
483   right: -1px;
484   background-color: #EEE;
485   border: 1px solid #DDD;
486   @include lightDark(background-color, #eee, #333);
487   @include lightDark(border-color, #ddd, #444);
488   @include lightDark(fill, #444, #888);
489   padding: $-xs;
490   line-height: 0;
491   cursor: pointer;
492   z-index: 5;
493   user-select: none;
494   opacity: 0;
495   pointer-events: none;
496   svg {
497     transition: all ease-in 240ms;
498     transform: translateY(0);
499   }
500   &.success {
501     background-color: lighten($positive, 10%);
502     svg {
503       fill: #FFF;
504       transform: translateY(-3px);
505     }
506   }
507 }
508 .CodeMirror:hover .CodeMirror-copy {
509   user-select: all;
510   opacity: 1;
511   pointer-events: all;
512 }