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