4 /* Set height, width, borders, and global font properties here */
12 padding: 4px 0; /* Vertical padding around content */
15 padding: 0 4px; /* Horizontal padding of content */
18 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
19 background-color: white; /* The little square between H and V scrollbars */
25 border-right: 1px solid #ddd;
26 background-color: #f7f7f7;
29 .CodeMirror-linenumbers {}
30 .CodeMirror-linenumber {
38 .CodeMirror-guttermarker { color: black; }
39 .CodeMirror-guttermarker-subtle { color: #999; }
44 border-left: 1px solid black;
48 /* Shown when moving in bi-directional text */
49 .CodeMirror div.CodeMirror-secondarycursor {
50 border-left: 1px solid silver;
52 .cm-fat-cursor .CodeMirror-cursor {
57 .cm-fat-cursor div.CodeMirror-cursors {
61 .cm-animate-fat-cursor {
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;
69 @-moz-keyframes blink {
71 50% { background-color: transparent; }
74 @-webkit-keyframes blink {
76 50% { background-color: transparent; }
81 50% { background-color: transparent; }
85 /* Can style cursor different in overwrite (non-insert) mode */
86 .CodeMirror-overwrite .CodeMirror-cursor {}
88 .cm-tab { display: inline-block; text-decoration: inherit; }
92 left: 0; right: 0; top: -50px; bottom: -20px;
96 border-left: 1px solid #ccc;
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;}
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;}
134 .cm-s-default .cm-error {color: #f00;}
135 .cm-invalidchar {color: #f00;}
137 .CodeMirror-composing { border-bottom: 2px solid; }
139 /* Default styles for common addons */
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;}
148 /* The rest of this file contains styles related to the mechanics of
149 the editor. You probably shouldn't touch them. */
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;
164 outline: none; /* Prevent dragging from highlighting the element */
169 border-right: 30px solid transparent;
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 {
180 .CodeMirror-vscrollbar {
185 .CodeMirror-hscrollbar {
190 .CodeMirror-scrollbar-filler {
193 .CodeMirror-gutter-filler {
197 .CodeMirror-gutters {
198 position: absolute; left: 0; top: 0;
205 display: inline-block;
207 margin-bottom: -30px;
209 .CodeMirror-gutter-wrapper {
212 background: none !important;
213 border: none !important;
215 .CodeMirror-gutter-background {
220 .CodeMirror-gutter-elt {
225 .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
226 .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
230 min-height: 1px; /* prevents collapsing before first draw */
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;
236 background: transparent;
241 line-height: inherit;
246 -webkit-tap-highlight-color: transparent;
247 -webkit-font-variant-ligatures: contextual;
248 font-variant-ligatures: contextual;
254 .CodeMirror-wrap pre {
255 word-wrap: break-word;
256 white-space: pre-wrap;
260 .CodeMirror-linebackground {
262 left: 0; right: 0; top: 0; bottom: 0;
266 .CodeMirror-linewidget {
272 .CodeMirror-widget {}
274 .CodeMirror-rtl pre { direction: rtl; }
280 /* Force content-box sizing for the elements where we expect it */
285 .CodeMirror-linenumber {
286 -moz-box-sizing: content-box;
287 box-sizing: content-box;
290 .CodeMirror-measure {
300 pointer-events: none;
302 .CodeMirror-measure pre { position: static; }
304 div.CodeMirror-cursors {
309 div.CodeMirror-dragcursors {
313 .CodeMirror-focused div.CodeMirror-cursors {
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; }
325 background: rgba(255, 255, 0, .4);
328 /* Used to force a border model for a node */
329 .cm-force-border { padding-right: .1px; }
332 /* Hide the cursor when printing */
333 .CodeMirror div.CodeMirror-cursors {
338 /* See issue #2901 */
339 .cm-tab-wrap-hack:after { content: ''; }
341 /* Help users use markselection to safely style text background */
342 span.CodeMirror-selectedtext { background: none; }
345 * Codemirror Default theme
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;}
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;}
379 .cm-s-default .cm-error {color: #f00;}
380 .cm-invalidchar {color: #f00;}
382 .CodeMirror-composing { border-bottom: 2px solid; }
384 /* Default styles for common addons */
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;}
394 * Codemirror Darcula theme
398 Name: IntelliJ IDEA darcula theme
399 From IntelliJ IDEA by JetBrains
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; }
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;}
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; }
438 .cm-s-darcula div.CodeMirror-selected { background: #214283; }
440 .CodeMirror-hints.darcula {
441 font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
443 background-color: #3B3E3F !important;
446 .CodeMirror-hints.darcula .CodeMirror-hint-active {
447 background-color: #494D4E !important;
448 color: #9C9E9E !important;
452 * Custom BookStack overrides
454 .CodeMirror, .CodeMirror pre {
462 @include lightDark(border-color, #DDD, #111)
465 .cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 0; color: #333; }
467 .code-fill .CodeMirror {
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);
495 pointer-events: none;
497 transition: all ease-in 240ms;
498 transform: translateY(0);
501 background-color: lighten($positive, 10%);
504 transform: translateY(-3px);
508 .CodeMirror:hover .CodeMirror-copy {