PluginProbe
Post Snippets – Custom WordPress Code Snippets Customizer / 4.2.2
Post Snippets – Custom WordPress Code Snippets Customizer v4.2.2
4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.1 1.7.2 1.7.3 1.8 1.8.1 1.8.2 1.8.3 1.8.5 1.8.6 1.8.7 1.8.8 1.8.9 1.8.9.1 1.8.9.2 1.9 1.9.1 1.9.2 1.9.3 1.9.4 1.9.5 All 115 releases
post-snippets / assets / editor.css

editor.css in Post Snippets – Custom WordPress Code Snippets Customizer 4.2.2, at assets/editor.css

1,985 lines 45.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .codemirror-colorview {
2 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
3 repeat;
4 border: 1px solid #cecece;
5 box-sizing: border-box;
6 cursor: pointer;
7 display: inline-block;
8 height: 10px;
9 margin: 0 2px;
10 position: relative;
11 vertical-align: middle;
12 width: 10px;
13 }
14 .codemirror-colorview .codemirror-colorview-background {
15 bottom: 0;
16 content: "";
17 left: 0;
18 position: absolute;
19 right: 0;
20 top: 0;
21 }
22 .codemirror-colorview:hover {
23 border-color: #494949;
24 }
25 .codemirror-colorpicker {
26 background-color: #fff;
27 border: 1px solid rgba(0, 0, 0, 0.2);
28 border-radius: 3px;
29 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.12);
30 display: inline-block;
31 position: relative;
32 width: 224px;
33 z-index: 1000;
34 }
35 .codemirror-colorpicker > .arrow {
36 border-bottom: 10px solid rgba(0, 0, 0, 0.2);
37 border-left: 10px solid transparent;
38 border-right: 10px solid transparent;
39 display: none;
40 height: 0;
41 left: 7px;
42 pointer-events: none;
43 position: absolute;
44 top: -10px;
45 width: 0;
46 }
47 .codemirror-colorpicker > .arrow:after {
48 border-bottom: 9px solid #fff;
49 border-left: 9px solid transparent;
50 border-right: 9px solid transparent;
51 content: "";
52 height: 0;
53 left: -9px;
54 position: absolute;
55 top: 1px;
56 width: 0;
57 }
58 .codemirror-colorpicker .colorpicker-body .arrow-button {
59 background-color: transparent;
60 height: 12px;
61 padding: 0;
62 position: relative;
63 width: 10px;
64 }
65 .codemirror-colorpicker .colorpicker-body .arrow-button:before {
66 border-bottom: 3px solid #000;
67 height: 50%;
68 top: 0;
69 }
70 .codemirror-colorpicker .colorpicker-body .arrow-button:after,
71 .codemirror-colorpicker .colorpicker-body .arrow-button:before {
72 border-left: 3px solid transparent;
73 border-right: 3px solid transparent;
74 box-sizing: border-box;
75 content: "";
76 display: inline-block;
77 height: 0;
78 left: 0;
79 margin: 2px;
80 pointer-events: none;
81 position: absolute;
82 right: 0;
83 width: 0;
84 }
85 .codemirror-colorpicker .colorpicker-body .arrow-button:after {
86 border-top: 3px solid #000;
87 bottom: 0;
88 top: 50%;
89 }
90 .codemirror-colorpicker .colorpicker-body .color {
91 cursor: pointer;
92 height: 120px;
93 overflow: hidden;
94 position: relative;
95 }
96 .codemirror-colorpicker .colorpicker-body .color > .saturation,
97 .codemirror-colorpicker .colorpicker-body .color > .saturation > .value {
98 height: 100%;
99 position: relative;
100 width: 100%;
101 }
102 .codemirror-colorpicker
103 .colorpicker-body
104 .color
105 > .saturation
106 > .value
107 > .drag-pointer {
108 border-radius: 50%;
109 height: 10px;
110 position: absolute;
111 transform: translateX(-50%) translateY(-50%);
112 width: 10px;
113 }
114 .codemirror-colorpicker .colorpicker-body .color > .saturation {
115 background-color: hsla(20, 42%, 65%, 0);
116 background-image: linear-gradient(90deg, #fff, hsla(20, 42%, 65%, 0));
117 background-repeat: repeat-x;
118 }
119 .codemirror-colorpicker .colorpicker-body .color > .saturation > .value {
120 background-image: linear-gradient(0deg, #000, hsla(20, 42%, 65%, 0));
121 }
122 .codemirror-colorpicker
123 .colorpicker-body
124 .color
125 > .saturation
126 > .value
127 > .drag-pointer {
128 border: 1px solid #fff;
129 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
130 }
131 .codemirror-colorpicker .colorpicker-body .control {
132 padding: 10px 0;
133 position: relative;
134 -webkit-user-select: none;
135 -moz-user-select: none;
136 -ms-user-select: none;
137 user-select: none;
138 }
139 .codemirror-colorpicker .colorpicker-body .control > .color,
140 .codemirror-colorpicker .colorpicker-body .control > .empty {
141 border-radius: 50%;
142 box-sizing: border-box;
143 height: 30px;
144 left: 12px;
145 position: absolute;
146 top: 14px;
147 width: 30px;
148 }
149 .codemirror-colorpicker .colorpicker-body .control > .color {
150 border: 1px solid rgba(0, 0, 0, 0.1);
151 }
152 .codemirror-colorpicker .colorpicker-body .control > .hue {
153 box-sizing: border-box;
154 cursor: pointer;
155 margin: 0 0 0 42px;
156 padding: 6px 16px;
157 position: relative;
158 }
159 .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container {
160 border-radius: 3px;
161 height: 10px;
162 position: relative;
163 width: 100%;
164 }
165 .codemirror-colorpicker .colorpicker-body .control > .opacity {
166 box-sizing: border-box;
167 cursor: pointer;
168 margin: 0 0 0 42px;
169 padding: 3px 16px;
170 position: relative;
171 }
172 .codemirror-colorpicker
173 .colorpicker-body
174 .control
175 > .opacity
176 > .opacity-container {
177 border-radius: 3px;
178 height: 10px;
179 position: relative;
180 width: 100%;
181 }
182 .codemirror-colorpicker .colorpicker-body .control .drag-bar,
183 .codemirror-colorpicker .colorpicker-body .control .drag-bar2 {
184 border-radius: 50%;
185 cursor: pointer;
186 height: 12px;
187 left: 0;
188 position: absolute;
189 top: 50%;
190 transform: translateX(-50%) translateY(-50%);
191 width: 12px;
192 }
193 .codemirror-colorpicker .colorpicker-body .control > .hue > .hue-container {
194 background: linear-gradient(
195 90deg,
196 red 0,
197 #ff0 17%,
198 #0f0 33%,
199 #0ff 50%,
200 #00f 67%,
201 #f0f 83%,
202 red
203 );
204 }
205 .codemirror-colorpicker
206 .colorpicker-body
207 .control
208 > .opacity
209 > .opacity-container {
210 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
211 repeat;
212 }
213 .codemirror-colorpicker
214 .colorpicker-body
215 .control
216 > .opacity
217 > .opacity-container
218 > .color-bar {
219 bottom: 0;
220 content: "";
221 display: block;
222 left: 0;
223 position: absolute;
224 right: 0;
225 top: 0;
226 }
227 .codemirror-colorpicker .colorpicker-body .control > .empty {
228 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
229 repeat;
230 }
231 .codemirror-colorpicker .colorpicker-body .control .drag-bar,
232 .codemirror-colorpicker .colorpicker-body .control .drag-bar2 {
233 background-color: #fefefe;
234 border: 1px solid rgba(0, 0, 0, 0.05);
235 box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
236 }
237 .codemirror-colorpicker .colorpicker-body .information {
238 box-sizing: padding-box;
239 position: relative;
240 }
241 .codemirror-colorpicker .colorpicker-body .information > input {
242 bottom: 20px;
243 box-sizing: border-box;
244 font-size: 10px;
245 height: 20px;
246 padding: 0 0 0 2px;
247 position: absolute;
248 -webkit-user-select: text;
249 -moz-user-select: text;
250 -ms-user-select: text;
251 user-select: text;
252 }
253 .codemirror-colorpicker .colorpicker-body .information > input[type="number"] {
254 -webkit-appearance: none;
255 -moz-appearance: none;
256 appearance: none;
257 }
258 .codemirror-colorpicker
259 .colorpicker-body
260 .information
261 > input[type="number"]::-webkit-inner-spin-button,
262 .codemirror-colorpicker
263 .colorpicker-body
264 .information
265 > input[type="number"]::-webkit-outer-spin-button {
266 -webkit-appearance: none;
267 appearance: none;
268 margin: 0;
269 }
270 .codemirror-colorpicker
271 .colorpicker-body
272 .information.hex
273 > .information-item.hex,
274 .codemirror-colorpicker
275 .colorpicker-body
276 .information.hsl
277 > .information-item.hsl,
278 .codemirror-colorpicker
279 .colorpicker-body
280 .information.rgb
281 > .information-item.rgb {
282 display: flex;
283 }
284 .codemirror-colorpicker .colorpicker-body .information > .information-item {
285 box-sizing: border-box;
286 display: none;
287 margin-right: 40px;
288 padding: 0 5px 0 9px;
289 position: relative;
290 }
291 .codemirror-colorpicker
292 .colorpicker-body
293 .information
294 > .information-item
295 > .input-field {
296 box-sizing: border-box;
297 display: block;
298 flex: 1;
299 padding: 3px;
300 position: relative;
301 }
302 .codemirror-colorpicker
303 .colorpicker-body
304 .information
305 > .information-item
306 > .input-field
307 > .title {
308 color: #a9a9a9;
309 cursor: pointer;
310 font-size: 12px;
311 padding-top: 2px;
312 text-align: center;
313 -webkit-user-select: none;
314 -moz-user-select: none;
315 -ms-user-select: none;
316 user-select: none;
317 }
318 .codemirror-colorpicker
319 .colorpicker-body
320 .information
321 > .information-item
322 > .input-field
323 input {
324 border: 1px solid #cbcbcb;
325 border-radius: 2px;
326 box-sizing: border-box;
327 color: #333;
328 font-size: 11px;
329 height: 21px;
330 padding: 3px;
331 text-align: center;
332 -webkit-user-select: text;
333 -moz-user-select: text;
334 -ms-user-select: text;
335 user-select: text;
336 width: 100%;
337 }
338 .codemirror-colorpicker
339 .colorpicker-body
340 .information
341 > .information-item
342 > .input-field
343 input[type="number"] {
344 -webkit-appearance: none;
345 -moz-appearance: none;
346 appearance: none;
347 }
348 .codemirror-colorpicker
349 .colorpicker-body
350 .information
351 > .information-item
352 > .input-field
353 input[type="number"]::-webkit-inner-spin-button,
354 .codemirror-colorpicker
355 .colorpicker-body
356 .information
357 > .information-item
358 > .input-field
359 input[type="number"]::-webkit-outer-spin-button {
360 -webkit-appearance: none;
361 appearance: none;
362 margin: 0;
363 }
364 .codemirror-colorpicker
365 .colorpicker-body
366 .information
367 > .information-item
368 > .input-field.hsl-l
369 input[type="number"],
370 .codemirror-colorpicker
371 .colorpicker-body
372 .information
373 > .information-item
374 > .input-field.hsl-s
375 input[type="number"] {
376 padding-left: 1px;
377 padding-right: 10px;
378 }
379 .codemirror-colorpicker
380 .colorpicker-body
381 .information
382 > .information-item
383 > .input-field
384 .postfix {
385 box-sizing: border-box;
386 display: inline-block;
387 font-size: 11px;
388 height: 21px;
389 line-height: 2;
390 padding: 2px;
391 position: absolute;
392 right: 3px;
393 text-align: center;
394 top: 2px;
395 }
396 .codemirror-colorpicker .colorpicker-body .information > .information-change {
397 bottom: 0;
398 box-sizing: border-box;
399 display: block;
400 padding-top: 5px;
401 position: absolute;
402 right: 0;
403 text-align: center;
404 top: 0;
405 width: 40px;
406 }
407 .codemirror-colorpicker
408 .colorpicker-body
409 .information
410 > .information-change
411 > .format-change-button {
412 background: transparent;
413 border: 0;
414 box-sizing: border-box;
415 cursor: pointer;
416 outline: none;
417 }
418 .codemirror-colorpicker .colorpicker-body .information > .title {
419 color: #a3a3a3;
420 }
421 .codemirror-colorpicker .colorpicker-body .information > .input {
422 color: #333;
423 }
424 .codemirror-colorpicker .colorpicker-body .colorsets {
425 border-top: 1px solid #e2e2e2;
426 }
427 .codemirror-colorpicker .colorpicker-body .colorsets > .menu {
428 float: right;
429 padding: 10px 15px 10px 5px;
430 }
431 .codemirror-colorpicker .colorpicker-body .colorsets > .menu button {
432 border: 0;
433 cursor: pointer;
434 font-family: serif, sans-serif;
435 font-size: 14px;
436 font-weight: 300;
437 outline: none;
438 }
439 .codemirror-colorpicker .colorpicker-body .colorsets > .color-list {
440 box-sizing: border-box;
441 display: block;
442 line-height: 0;
443 margin-right: 30px;
444 padding: 12px 0 0 12px;
445 }
446 .codemirror-colorpicker .colorpicker-body .colorsets > .color-list .color-item {
447 background-size: contain;
448 border-radius: 2px;
449 box-sizing: border-box;
450 cursor: pointer;
451 display: inline-block;
452 height: 13px;
453 margin-bottom: 12px;
454 margin-right: 12px;
455 overflow: hidden;
456 position: relative;
457 vertical-align: middle;
458 width: 13px;
459 }
460 .codemirror-colorpicker
461 .colorpicker-body
462 .colorsets
463 > .color-list
464 .color-item:hover {
465 transform: scale(1.2);
466 }
467 .codemirror-colorpicker
468 .colorpicker-body
469 .colorsets
470 > .color-list
471 .color-item
472 .empty {
473 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
474 repeat;
475 height: 100%;
476 left: 0;
477 margin: 0;
478 padding: 0;
479 pointer-events: none;
480 position: absolute;
481 top: 0;
482 width: 100%;
483 }
484 .codemirror-colorpicker
485 .colorpicker-body
486 .colorsets
487 > .color-list
488 .color-item
489 .color-view {
490 border: 1px solid rgba(0, 0, 0, 0.1);
491 box-sizing: border-box;
492 height: 100%;
493 left: 0;
494 margin: 0;
495 padding: 0;
496 pointer-events: none;
497 position: absolute;
498 top: 0;
499 width: 100%;
500 }
501 .codemirror-colorpicker
502 .colorpicker-body
503 .colorsets
504 > .color-list
505 .add-color-item {
506 color: #8e8e8e;
507 cursor: pointer;
508 display: inline-block;
509 font-family: serif, sans-serif;
510 font-size: 16px;
511 font-weight: 400;
512 height: 13px;
513 line-height: 1;
514 margin-bottom: 12px;
515 margin-right: 12px;
516 text-align: center;
517 vertical-align: middle;
518 width: 13px;
519 }
520 .codemirror-colorpicker .colorpicker-body .color-chooser {
521 background-color: rgba(0, 0, 0, 0.5);
522 bottom: 0;
523 left: 0;
524 opacity: 0;
525 pointer-events: none;
526 position: absolute;
527 right: 0;
528 top: 0;
529 transition: opacity 0.05s ease-out;
530 }
531 .codemirror-colorpicker .colorpicker-body .color-chooser.open {
532 opacity: 1;
533 pointer-events: all;
534 }
535 .codemirror-colorpicker
536 .colorpicker-body
537 .color-chooser
538 .color-chooser-container {
539 background-color: #fff;
540 bottom: 0;
541 left: 0;
542 position: absolute;
543 right: 0;
544 top: 120px;
545 }
546 .codemirror-colorpicker
547 .colorpicker-body
548 .color-chooser
549 .color-chooser-container
550 .colorsets-item-header {
551 border-bottom: 1px solid rgba(0, 0, 0, 0.2);
552 box-sizing: border-box;
553 display: flex;
554 height: 34px;
555 left: 0;
556 padding: 3px 0;
557 position: absolute;
558 right: 0;
559 top: 0;
560 }
561 .codemirror-colorpicker
562 .colorpicker-body
563 .color-chooser
564 .color-chooser-container
565 .colorsets-item-header
566 .title {
567 box-sizing: border-box;
568 color: #000;
569 flex: 2;
570 font-size: 15px;
571 font-weight: 700;
572 margin: 0;
573 overflow: hidden;
574 padding: 5px 5px 5px 14px;
575 text-align: left;
576 text-overflow: ellipsis;
577 vertical-align: middle;
578 white-space: nowrap;
579 }
580 .codemirror-colorpicker
581 .colorpicker-body
582 .color-chooser
583 .color-chooser-container
584 .colorsets-item-header
585 .items {
586 cursor: pointer;
587 display: block;
588 flex: 1;
589 height: 100%;
590 line-height: 2;
591 padding-right: 10px;
592 text-align: right;
593 }
594 .codemirror-colorpicker
595 .colorpicker-body
596 .color-chooser
597 .color-chooser-container
598 .colorsets-list {
599 bottom: 0;
600 left: 0;
601 overflow: auto;
602 position: absolute;
603 right: 0;
604 top: 34px;
605 }
606 .codemirror-colorpicker
607 .colorpicker-body
608 .color-chooser
609 .color-chooser-container
610 .colorsets-list
611 .colorsets-item {
612 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
613 cursor: pointer;
614 display: flex;
615 padding: 3px 0;
616 }
617 .codemirror-colorpicker
618 .colorpicker-body
619 .color-chooser
620 .color-chooser-container
621 .colorsets-list
622 .colorsets-item:hover {
623 background-color: rgba(0, 0, 0, 0.05);
624 }
625 .codemirror-colorpicker
626 .colorpicker-body
627 .color-chooser
628 .color-chooser-container
629 .colorsets-list
630 .colorsets-item
631 .title {
632 box-sizing: border-box;
633 color: #000;
634 flex: 2;
635 font-size: 14px;
636 font-size: 13px;
637 font-weight: 400;
638 margin: 0;
639 overflow: hidden;
640 padding: 5px 5px 5px 14px;
641 pointer-events: none;
642 text-align: left;
643 text-overflow: ellipsis;
644 vertical-align: middle;
645 white-space: nowrap;
646 }
647 .codemirror-colorpicker
648 .colorpicker-body
649 .color-chooser
650 .color-chooser-container
651 .colorsets-list
652 .colorsets-item
653 .items {
654 cursor: pointer;
655 display: block;
656 flex: 3;
657 height: 100%;
658 line-height: 1.6;
659 pointer-events: none;
660 }
661 .codemirror-colorpicker
662 .colorpicker-body
663 .color-chooser
664 .color-chooser-container
665 .colorsets-list
666 .colorsets-item
667 .items
668 .color-item {
669 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
670 repeat;
671 background-size: contain;
672 border: 1px solid #ddd;
673 border-radius: 3px;
674 box-sizing: border-box;
675 cursor: pointer;
676 display: inline-block;
677 height: 13px;
678 margin-right: 10px;
679 overflow: hidden;
680 vertical-align: middle;
681 width: 13px;
682 }
683 .codemirror-colorpicker
684 .colorpicker-body
685 .color-chooser
686 .color-chooser-container
687 .colorsets-list
688 .colorsets-item
689 .items
690 .color-item
691 .color-view {
692 height: 100%;
693 margin: 0;
694 padding: 0;
695 pointer-events: none;
696 width: 100%;
697 }
698 .codemirror-colorpicker.sketch {
699 border-radius: 5px;
700 }
701 .codemirror-colorpicker.sketch > .colorpicker-body > .color {
702 box-sizing: border-box;
703 height: 150px;
704 margin: 10px 10px 2px;
705 }
706 .codemirror-colorpicker.sketch > .colorpicker-body > .control {
707 padding: 0;
708 }
709 .codemirror-colorpicker.sketch > .colorpicker-body > .control > .color,
710 .codemirror-colorpicker.sketch > .colorpicker-body > .control > .empty {
711 border-radius: 2px;
712 box-sizing: border-box;
713 height: 26px;
714 left: auto;
715 position: absolute;
716 right: 10px;
717 top: 1px;
718 width: 26px;
719 }
720 .codemirror-colorpicker.sketch > .colorpicker-body > .control > .color {
721 box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.5);
722 }
723 .codemirror-colorpicker.sketch > .colorpicker-body > .control > .hue {
724 margin: 0 38px 0 0;
725 padding: 2px 2px 2px 10px;
726 position: relative;
727 }
728 .codemirror-colorpicker.sketch
729 > .colorpicker-body
730 > .control
731 > .hue
732 > .hue-container {
733 border-radius: 0;
734 }
735 .codemirror-colorpicker.sketch > .colorpicker-body > .control > .opacity {
736 margin: 0 38px 0 0;
737 padding: 2px 2px 2px 10px;
738 position: relative;
739 }
740 .codemirror-colorpicker.sketch
741 > .colorpicker-body
742 > .control
743 > .opacity
744 > .opacity-container {
745 border-radius: 0;
746 }
747 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar,
748 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2 {
749 border-radius: 0;
750 border-radius: 1px;
751 bottom: 1px !important;
752 height: 50%;
753 left: 0;
754 top: 50%;
755 transform: translateX(-50%) translateY(-50%);
756 width: 2px;
757 }
758 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.first,
759 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar.first {
760 left: 0;
761 transform: translateX(50%) translateY(-50%) !important;
762 }
763 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar2.last,
764 .codemirror-colorpicker.sketch > .colorpicker-body > .control .drag-bar.last {
765 transform: translateX(-150%) translateY(-50%) !important;
766 }
767 .codemirror-colorpicker.sketch
768 > .colorpicker-body
769 > .information
770 .information-change {
771 display: none;
772 }
773 .codemirror-colorpicker.sketch
774 > .colorpicker-body
775 > .information.rgb
776 .information-item.rgb {
777 display: inherit;
778 }
779 .codemirror-colorpicker.sketch
780 > .colorpicker-body
781 > .information.rgb
782 .information-item.hsl {
783 display: none !important;
784 }
785 .codemirror-colorpicker.sketch
786 > .colorpicker-body
787 > .information.hex
788 .information-item.hex {
789 display: inherit;
790 }
791 .codemirror-colorpicker.sketch
792 > .colorpicker-body
793 > .information.hex
794 .information-item.hsl,
795 .codemirror-colorpicker.sketch
796 > .colorpicker-body
797 > .information.hsl
798 .information-item.rgb {
799 display: none !important;
800 }
801 .codemirror-colorpicker.sketch
802 > .colorpicker-body
803 > .information.hsl
804 .information-item.hsl {
805 display: inherit;
806 }
807 .codemirror-colorpicker.sketch
808 > .colorpicker-body
809 > .information
810 .information-item {
811 display: inline-flex !important;
812 margin-right: 0;
813 }
814 .codemirror-colorpicker.sketch
815 > .colorpicker-body
816 > .information
817 .information-item
818 > .input-field {
819 padding-left: 0;
820 }
821 .codemirror-colorpicker.sketch
822 > .colorpicker-body
823 > .information
824 .information-item
825 > .input-field:last-child {
826 padding-right: 0;
827 }
828 .codemirror-colorpicker.sketch
829 > .colorpicker-body
830 > .information
831 .information-item
832 > .input-field
833 > .title {
834 color: #000;
835 cursor: pointer;
836 font-size: 11px;
837 }
838 .codemirror-colorpicker.sketch
839 > .colorpicker-body
840 > .information
841 .information-item
842 > .input-field:last-child:not(:first-child) {
843 padding-right: 0;
844 }
845 .codemirror-colorpicker.sketch
846 > .colorpicker-body
847 > .information
848 .information-item.hex {
849 padding-left: 5px;
850 padding-right: 0;
851 width: 74px;
852 }
853 .codemirror-colorpicker.sketch
854 > .colorpicker-body
855 > .information
856 .information-item.rgb {
857 padding-left: 0;
858 padding-right: 0;
859 width: 140px;
860 }
861 .codemirror-colorpicker.sketch
862 > .colorpicker-body
863 > .information
864 .information-item.hsl {
865 display: none;
866 padding-left: 0;
867 padding-right: 0;
868 width: 140px;
869 }
870 .codemirror-colorpicker.sketch > .colorpicker-body > .colorsets > .color-list {
871 margin-right: 0;
872 padding-right: 12px;
873 }
874 .codemirror-colorpicker.sketch
875 > .colorpicker-body
876 > .colorsets
877 > .color-list
878 .color-item {
879 border-radius: 3px;
880 height: 16px;
881 margin-bottom: 10px;
882 margin-right: 9px;
883 width: 16px;
884 }
885 .codemirror-colorpicker.palette {
886 border-radius: 3px;
887 box-shadow: none;
888 }
889 .codemirror-colorpicker.palette > .colorpicker-body > .color,
890 .codemirror-colorpicker.palette > .colorpicker-body > .control,
891 .codemirror-colorpicker.palette > .colorpicker-body > .information {
892 display: none;
893 }
894 .codemirror-colorpicker.palette > .colorpicker-body > .colorsets {
895 border-top: 0;
896 box-sizing: border-box;
897 }
898 .codemirror-colorpicker.palette
899 > .colorpicker-body
900 > .colorsets
901 > .color-list
902 .color-item {
903 height: 15px;
904 margin-bottom: 10px;
905 margin-right: 10px;
906 width: 15px;
907 }
908 .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser {
909 box-sizing: border-box;
910 display: none;
911 }
912 .codemirror-colorpicker.palette > .colorpicker-body > .color-chooser.open {
913 border: 1px solid #d8d8d8;
914 border-radius: 3px;
915 bottom: auto;
916 box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.12);
917 display: block;
918 left: -1px;
919 right: -1px;
920 top: -1px;
921 }
922 .codemirror-colorpicker.palette
923 > .colorpicker-body
924 > .color-chooser.open
925 .color-chooser-container {
926 background-color: #fff;
927 border-radius: 2px;
928 bottom: auto;
929 box-sizing: border-box;
930 left: auto;
931 position: relative;
932 right: auto;
933 top: auto;
934 }
935 .codemirror-colorpicker.palette
936 > .colorpicker-body
937 > .color-chooser.open
938 .color-chooser-container
939 .colorsets-item-header {
940 border-top-left-radius: 3px;
941 border-top-right-radius: 3px;
942 bottom: auto;
943 left: auto;
944 position: relative;
945 right: auto;
946 top: auto;
947 }
948 .codemirror-colorpicker.palette
949 > .colorpicker-body
950 > .color-chooser.open
951 .color-chooser-container
952 .colorsets-list {
953 bottom: auto;
954 left: auto;
955 overflow: auto;
956 position: relative;
957 right: auto;
958 top: auto;
959 }
960 .codemirror-colorpicker.palette
961 > .colorpicker-body
962 > .color-chooser.open
963 .color-chooser-container
964 .colorsets-list
965 .colorsets-item:last-child {
966 border-bottom-left-radius: 3px;
967 border-bottom-right-radius: 3px;
968 }
969 .codemirror-colorpicker.macos .colorpicker-body .wheel {
970 box-sizing: border-box;
971 height: 224px;
972 position: relative;
973 width: 224px;
974 }
975 .codemirror-colorpicker.macos .colorpicker-body .wheel .wheel-canvas {
976 border-radius: 50%;
977 height: 214px;
978 left: 5px;
979 position: absolute;
980 top: 5px;
981 width: 214px;
982 }
983 .codemirror-colorpicker.macos .colorpicker-body .wheel .drag-pointer {
984 border: 1px solid #fff;
985 border-radius: 50%;
986 display: inline-block;
987 height: 10px;
988 left: 50%;
989 position: absolute;
990 top: 50%;
991 transform: translateX(-50%) translateY(-50%);
992 width: 10px;
993 z-index: 2;
994 }
995 .codemirror-colorpicker.macos .control {
996 padding-top: 0;
997 }
998 .codemirror-colorpicker.macos .control > .color,
999 .codemirror-colorpicker.macos .control > .empty {
1000 top: 4px;
1001 }
1002 .codemirror-colorpicker.macos .value {
1003 box-sizing: border-box;
1004 cursor: pointer;
1005 margin: 0 0 0 42px;
1006 padding: 6px 16px;
1007 position: relative;
1008 }
1009 .codemirror-colorpicker.macos .value > .value-container {
1010 background-image: linear-gradient(90deg, #000 0, hsla(0, 0%, 100%, 0));
1011 border-radius: 3px;
1012 box-sizing: border-box;
1013 height: 10px;
1014 position: relative;
1015 width: 100%;
1016 }
1017 .codemirror-colorpicker.macos .value > .value-container .drag-bar {
1018 border-radius: 50%;
1019 cursor: pointer;
1020 height: 12px;
1021 left: 0;
1022 position: absolute;
1023 top: 50%;
1024 transform: translateX(-50%) translateY(-50%);
1025 width: 12px;
1026 }
1027 .codemirror-colorpicker.mini {
1028 display: inline-block;
1029 width: 180px;
1030 }
1031 .codemirror-colorpicker.mini .control {
1032 padding: 0;
1033 }
1034 .codemirror-colorpicker.mini .control .hue,
1035 .codemirror-colorpicker.mini .control .opacity {
1036 margin: 0;
1037 padding: 0;
1038 }
1039 .codemirror-colorpicker.mini .control .hue > .hue-container,
1040 .codemirror-colorpicker.mini .control .opacity > .opacity-container {
1041 border-radius: 0;
1042 height: 20px;
1043 overflow: hidden;
1044 }
1045 .codemirror-colorpicker.mini .control .drag-bar,
1046 .codemirror-colorpicker.mini .control .drag-bar2 {
1047 background-color: transparent;
1048 border: 0;
1049 box-shadow: none;
1050 box-sizing: border-box;
1051 height: 100%;
1052 width: 5px;
1053 }
1054 .codemirror-colorpicker.mini .control .drag-bar2.last:before,
1055 .codemirror-colorpicker.mini .control .drag-bar2.lastafter,
1056 .codemirror-colorpicker.mini .control .drag-bar.last:before,
1057 .codemirror-colorpicker.mini .control .drag-bar.lastafter {
1058 left: 1px;
1059 }
1060 .codemirror-colorpicker.mini .control .drag-bar2.first:after,
1061 .codemirror-colorpicker.mini .control .drag-bar2.first:before,
1062 .codemirror-colorpicker.mini .control .drag-bar.first:after,
1063 .codemirror-colorpicker.mini .control .drag-bar.first:before {
1064 left: 3px;
1065 }
1066 .codemirror-colorpicker.mini .control .drag-bar2:before,
1067 .codemirror-colorpicker.mini .control .drag-bar:before {
1068 border-left: 4px solid transparent;
1069 border-right: 4px solid transparent;
1070 border-top: 4px solid #000;
1071 content: "";
1072 height: 0;
1073 left: 2px;
1074 position: absolute;
1075 top: 0;
1076 transform: translateX(-50%);
1077 width: 0;
1078 }
1079 .codemirror-colorpicker.mini .control .drag-bar2:after,
1080 .codemirror-colorpicker.mini .control .drag-bar:after {
1081 border-bottom: 4px solid #000;
1082 border-left: 4px solid transparent;
1083 border-right: 4px solid transparent;
1084 bottom: 0;
1085 content: "";
1086 height: 0;
1087 left: 2px;
1088 position: absolute;
1089 transform: translateX(-50%);
1090 width: 0;
1091 }
1092 .codemirror-colorpicker.mini-vertical {
1093 display: inline-block;
1094 width: 180px;
1095 }
1096 .codemirror-colorpicker.mini-vertical .color {
1097 display: inline-block;
1098 height: 160px;
1099 vertical-align: middle;
1100 width: 140px;
1101 }
1102 .codemirror-colorpicker.mini-vertical .control {
1103 display: inline-block;
1104 height: 160px;
1105 padding: 0;
1106 vertical-align: middle;
1107 }
1108 .codemirror-colorpicker.mini-vertical .control .hue,
1109 .codemirror-colorpicker.mini-vertical .control .opacity {
1110 display: inline-block;
1111 height: 100%;
1112 margin: 0;
1113 padding: 0;
1114 position: relative;
1115 vertical-align: middle;
1116 width: 20px;
1117 }
1118 .codemirror-colorpicker.mini-vertical .control .hue > .hue-container {
1119 background: linear-gradient(
1120 0deg,
1121 red 0,
1122 #ff0 17%,
1123 #0f0 33%,
1124 #0ff 50%,
1125 #00f 67%,
1126 #f0f 83%,
1127 red
1128 );
1129 border-radius: 0;
1130 height: 100%;
1131 overflow: hidden;
1132 }
1133 .codemirror-colorpicker.mini-vertical .control .opacity > .opacity-container {
1134 border-radius: 0;
1135 height: 100%;
1136 overflow: hidden;
1137 width: 20px;
1138 }
1139 .codemirror-colorpicker.mini-vertical .control .drag-bar,
1140 .codemirror-colorpicker.mini-vertical .control .drag-bar2 {
1141 background-color: transparent;
1142 border: 0;
1143 box-shadow: none;
1144 box-sizing: border-box;
1145 height: 2px;
1146 transform: none;
1147 width: 100%;
1148 }
1149 .codemirror-colorpicker.mini-vertical .control .drag-bar2.last:after,
1150 .codemirror-colorpicker.mini-vertical .control .drag-bar2.last:before,
1151 .codemirror-colorpicker.mini-vertical .control .drag-bar.last:after,
1152 .codemirror-colorpicker.mini-vertical .control .drag-bar.last:before {
1153 top: 2px;
1154 }
1155 .codemirror-colorpicker.mini-vertical .control .drag-bar2.first:after,
1156 .codemirror-colorpicker.mini-vertical .control .drag-bar2.first:before,
1157 .codemirror-colorpicker.mini-vertical .control .drag-bar.first:after,
1158 .codemirror-colorpicker.mini-vertical .control .drag-bar.first:before {
1159 top: -1px;
1160 }
1161 .codemirror-colorpicker.mini-vertical .control .drag-bar2:before,
1162 .codemirror-colorpicker.mini-vertical .control .drag-bar:before {
1163 border-bottom: 4px solid transparent;
1164 border-left: 4px solid #000;
1165 border-top: 4px solid transparent;
1166 content: "";
1167 height: 0;
1168 left: 0;
1169 position: absolute;
1170 top: 2px;
1171 transform: translateY(-50%);
1172 width: 0;
1173 }
1174 .codemirror-colorpicker.mini-vertical .control .drag-bar2:after,
1175 .codemirror-colorpicker.mini-vertical .control .drag-bar:after {
1176 border-bottom: 4px solid transparent;
1177 border-right: 4px solid #000;
1178 border-top: 4px solid transparent;
1179 content: "";
1180 height: 0;
1181 position: absolute;
1182 right: 0;
1183 top: 2px;
1184 transform: translateY(-50%);
1185 width: 0;
1186 }
1187 .codemirror-colorpicker.ring .colorpicker-body > .color {
1188 height: 120px;
1189 left: 52px;
1190 position: absolute;
1191 top: 52px;
1192 width: 120px;
1193 }
1194 .codemirror-colorpicker.ring .colorpicker-body .wheel {
1195 box-sizing: border-box;
1196 height: 224px;
1197 position: relative;
1198 width: 224px;
1199 }
1200 .codemirror-colorpicker.ring .colorpicker-body .wheel .wheel-canvas {
1201 border-radius: 50%;
1202 height: 214px;
1203 left: 5px;
1204 position: absolute;
1205 top: 5px;
1206 width: 214px;
1207 }
1208 .codemirror-colorpicker.ring .colorpicker-body .wheel .drag-pointer {
1209 border: 1px solid #fff;
1210 border-radius: 50%;
1211 display: inline-block;
1212 height: 10px;
1213 left: 50%;
1214 position: absolute;
1215 top: 50%;
1216 transform: translateX(-50%) translateY(-50%);
1217 width: 10px;
1218 z-index: 2;
1219 }
1220 .codemirror-colorpicker.ring .control {
1221 padding-top: 0;
1222 }
1223 .codemirror-colorpicker.ring .control .value {
1224 display: none;
1225 }
1226 .codemirror-colorpicker.ring .control > .color,
1227 .codemirror-colorpicker.ring .control > .empty {
1228 border-radius: 2px;
1229 height: 30px;
1230 top: -17px;
1231 width: 30px;
1232 }
1233 .codemirror-colorpicker.xd {
1234 display: inline-block;
1235 padding-top: 12px;
1236 width: 245px;
1237 }
1238 .codemirror-colorpicker.xd .color {
1239 border: 1px solid #cecece;
1240 border-radius: 3px;
1241 box-sizing: border-box;
1242 display: inline-block;
1243 height: 170px;
1244 margin-bottom: 12px;
1245 margin-left: 12px;
1246 overflow: hidden;
1247 vertical-align: middle;
1248 width: 170px;
1249 }
1250 .codemirror-colorpicker.xd .color > .saturation > .value > .drag-pointer {
1251 border: 2px solid #fff;
1252 box-shadow: 0 0 1px 0 #000, inset 0 0 1px 0 #000;
1253 height: 7px;
1254 width: 7px;
1255 }
1256 .codemirror-colorpicker.xd .control {
1257 display: inline-block;
1258 height: 170px;
1259 margin-bottom: 12px;
1260 margin-right: 12px;
1261 padding: 0;
1262 vertical-align: middle;
1263 }
1264 .codemirror-colorpicker.xd .control .hue,
1265 .codemirror-colorpicker.xd .control .opacity {
1266 border-radius: 3px;
1267 display: inline-block;
1268 height: 100%;
1269 margin: 0 0 0 8px;
1270 overflow: hidden;
1271 padding: 0;
1272 position: relative;
1273 vertical-align: middle;
1274 width: 13px;
1275 }
1276 .codemirror-colorpicker.xd .control .hue > .hue-container {
1277 background: linear-gradient(
1278 0deg,
1279 red 0,
1280 #ff0 17%,
1281 #0f0 33%,
1282 #0ff 50%,
1283 #00f 67%,
1284 #f0f 83%,
1285 red
1286 );
1287 border-radius: 0;
1288 height: 100%;
1289 overflow: hidden;
1290 }
1291 .codemirror-colorpicker.xd .control .opacity > .opacity-container {
1292 border-radius: 0;
1293 height: 100%;
1294 overflow: hidden;
1295 }
1296 .codemirror-colorpicker.xd .control .drag-bar,
1297 .codemirror-colorpicker.xd .control .drag-bar2 {
1298 background-color: transparent;
1299 border: 2px solid #fff;
1300 box-shadow: 0 0 1px 0 #000, inset 0 0 1px 0 #000;
1301 box-sizing: border-box;
1302 height: 10px;
1303 left: 50%;
1304 overflow: hidden;
1305 transform: none;
1306 transform: translateX(-50%) translateY(-50%);
1307 width: 10px;
1308 }
1309 .codemirror-colorpicker.xd .information {
1310 margin-top: 5px;
1311 }
1312 .codemirror-colorpicker.vscode {
1313 background-color: #333;
1314 border: 1px solid #ececec;
1315 box-sizing: border-box;
1316 width: 336px;
1317 }
1318 .codemirror-colorpicker.vscode,
1319 .codemirror-colorpicker.vscode .colorpicker-body {
1320 border-radius: 0;
1321 display: inline-block;
1322 }
1323 .codemirror-colorpicker.vscode .colorpicker-body .color-view {
1324 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC")
1325 repeat;
1326 height: 34px;
1327 }
1328 .codemirror-colorpicker.vscode
1329 .colorpicker-body
1330 .color-view
1331 .color-view-container {
1332 cursor: pointer;
1333 font-size: 14px;
1334 height: 100%;
1335 line-height: 34px;
1336 text-align: center;
1337 text-shadow: 0 0 3px #535353;
1338 -webkit-user-select: none;
1339 -moz-user-select: none;
1340 -ms-user-select: none;
1341 user-select: none;
1342 width: 100%;
1343 }
1344 .codemirror-colorpicker.vscode .colorpicker-body .color-tool {
1345 padding: 8px;
1346 }
1347 .codemirror-colorpicker.vscode .color {
1348 display: inline-block;
1349 height: 160px;
1350 vertical-align: middle;
1351 width: 240px;
1352 }
1353 .codemirror-colorpicker.vscode .control {
1354 display: inline-block;
1355 height: 160px;
1356 padding: 0 0 0 4px;
1357 vertical-align: middle;
1358 }
1359 .codemirror-colorpicker.vscode .control .hue,
1360 .codemirror-colorpicker.vscode .control .opacity {
1361 display: inline-block;
1362 height: 100%;
1363 margin: 0;
1364 padding: 0;
1365 position: relative;
1366 vertical-align: middle;
1367 width: 30px;
1368 }
1369 .codemirror-colorpicker.vscode .control .hue {
1370 padding-left: 5px;
1371 width: 35px;
1372 }
1373 .codemirror-colorpicker.vscode .control .hue > .hue-container {
1374 background: linear-gradient(
1375 0deg,
1376 red 0,
1377 #ff0 17%,
1378 #0f0 33%,
1379 #0ff 50%,
1380 #00f 67%,
1381 #f0f 83%,
1382 red
1383 );
1384 border-radius: 0;
1385 height: 100%;
1386 }
1387 .codemirror-colorpicker.vscode .control .opacity > .opacity-container {
1388 border-radius: 0;
1389 height: 100%;
1390 width: 30px;
1391 }
1392 .codemirror-colorpicker.vscode .control .drag-bar,
1393 .codemirror-colorpicker.vscode .control .drag-bar2 {
1394 background-color: transparent;
1395 border: 1px solid #fff;
1396 border-radius: 0;
1397 box-shadow: none;
1398 box-shadow: 0 0 2px 0 #000, inset 0 0 0 0 #000;
1399 box-sizing: border-box;
1400 height: 5px;
1401 transform: translateY(-50%) translateX(-2px);
1402 width: 33px;
1403 }
1404 .colorsets-contextmenu {
1405 background-color: #ececec;
1406 border: 1px solid #ccc;
1407 border-radius: 6px;
1408 display: none;
1409 font-size: 13px;
1410 list-style: none;
1411 padding: 4px 0;
1412 position: fixed;
1413 }
1414 .colorsets-contextmenu.show {
1415 display: inline-block;
1416 }
1417 .colorsets-contextmenu .menu-item {
1418 cursor: default;
1419 padding: 2px 20px;
1420 }
1421 .colorsets-contextmenu .menu-item:hover {
1422 background-color: #5ea3fb;
1423 color: #fff;
1424 }
1425 .colorsets-contextmenu.small .menu-item.small-hide {
1426 display: none;
1427 }
1428 .CodeMirror {
1429 color: #000;
1430 direction: ltr;
1431 font-family: monospace;
1432 height: 300px;
1433 }
1434 .CodeMirror-lines {
1435 padding: 4px 0;
1436 }
1437 .CodeMirror pre.CodeMirror-line,
1438 .CodeMirror pre.CodeMirror-line-like {
1439 padding: 0 4px;
1440 }
1441 .CodeMirror-gutter-filler,
1442 .CodeMirror-scrollbar-filler {
1443 background-color: #fff;
1444 }
1445 .CodeMirror-gutters {
1446 background-color: #f7f7f7;
1447 border-right: 1px solid #ddd;
1448 white-space: nowrap;
1449 }
1450 .CodeMirror-linenumber {
1451 color: #999;
1452 min-width: 20px;
1453 padding: 0 3px 0 5px;
1454 text-align: right;
1455 white-space: nowrap;
1456 }
1457 .CodeMirror-guttermarker {
1458 color: #000;
1459 }
1460 .CodeMirror-guttermarker-subtle {
1461 color: #999;
1462 }
1463 .CodeMirror-cursor {
1464 border-left: 1px solid #000;
1465 border-right: none;
1466 width: 0;
1467 }
1468 .CodeMirror div.CodeMirror-secondarycursor {
1469 border-left: 1px solid silver;
1470 }
1471 .cm-fat-cursor .CodeMirror-cursor {
1472 background: #7e7;
1473 border: 0 !important;
1474 width: auto;
1475 }
1476 .cm-fat-cursor div.CodeMirror-cursors {
1477 z-index: 1;
1478 }
1479 .cm-fat-cursor-mark {
1480 background-color: rgba(20, 255, 20, 0.5);
1481 }
1482 .cm-animate-fat-cursor,
1483 .cm-fat-cursor-mark {
1484 -webkit-animation: blink 1.06s steps(1) infinite;
1485 animation: blink 1.06s steps(1) infinite;
1486 }
1487 .cm-animate-fat-cursor {
1488 background-color: #7e7;
1489 width: auto;
1490 }
1491 @-webkit-keyframes blink {
1492 50% {
1493 background-color: transparent;
1494 }
1495 }
1496 @keyframes blink {
1497 50% {
1498 background-color: transparent;
1499 }
1500 }
1501 .cm-tab {
1502 display: inline-block;
1503 text-decoration: inherit;
1504 }
1505 .CodeMirror-rulers {
1506 bottom: 0;
1507 left: 0;
1508 overflow: hidden;
1509 position: absolute;
1510 right: 0;
1511 top: -50px;
1512 }
1513 .CodeMirror-ruler {
1514 border-left: 1px solid #ccc;
1515 bottom: 0;
1516 position: absolute;
1517 top: 0;
1518 }
1519 .cm-s-default .cm-header {
1520 color: blue;
1521 }
1522 .cm-s-default .cm-quote {
1523 color: #090;
1524 }
1525 .cm-negative {
1526 color: #d44;
1527 }
1528 .cm-positive {
1529 color: #292;
1530 }
1531 .cm-header,
1532 .cm-strong {
1533 font-weight: 700;
1534 }
1535 .cm-em {
1536 font-style: italic;
1537 }
1538 .cm-link {
1539 text-decoration: underline;
1540 }
1541 .cm-strikethrough {
1542 text-decoration: line-through;
1543 }
1544 .cm-s-default .cm-keyword {
1545 color: #708;
1546 }
1547 .cm-s-default .cm-atom {
1548 color: #219;
1549 }
1550 .cm-s-default .cm-number {
1551 color: #164;
1552 }
1553 .cm-s-default .cm-def {
1554 color: #00f;
1555 }
1556 .cm-s-default .cm-variable-2 {
1557 color: #05a;
1558 }
1559 .cm-s-default .cm-type,
1560 .cm-s-default .cm-variable-3 {
1561 color: #085;
1562 }
1563 .cm-s-default .cm-comment {
1564 color: #a50;
1565 }
1566 .cm-s-default .cm-string {
1567 color: #a11;
1568 }
1569 .cm-s-default .cm-string-2 {
1570 color: #f50;
1571 }
1572 .cm-s-default .cm-meta,
1573 .cm-s-default .cm-qualifier {
1574 color: #555;
1575 }
1576 .cm-s-default .cm-builtin {
1577 color: #30a;
1578 }
1579 .cm-s-default .cm-bracket {
1580 color: #997;
1581 }
1582 .cm-s-default .cm-tag {
1583 color: #170;
1584 }
1585 .cm-s-default .cm-attribute {
1586 color: #00c;
1587 }
1588 .cm-s-default .cm-hr {
1589 color: #999;
1590 }
1591 .cm-s-default .cm-link {
1592 color: #00c;
1593 }
1594 .cm-invalidchar,
1595 .cm-s-default .cm-error {
1596 color: red;
1597 }
1598 .CodeMirror-composing {
1599 border-bottom: 2px solid;
1600 }
1601 div.CodeMirror span.CodeMirror-matchingbracket {
1602 color: #0b0;
1603 }
1604 div.CodeMirror span.CodeMirror-nonmatchingbracket {
1605 color: #a22;
1606 }
1607 .CodeMirror-matchingtag {
1608 background: rgba(255, 150, 0, 0.3);
1609 }
1610 .CodeMirror-activeline-background {
1611 background: #e8f2ff;
1612 }
1613 .CodeMirror {
1614 background: #fff;
1615 overflow: hidden;
1616 position: relative;
1617 }
1618 .CodeMirror-scroll {
1619 height: 100%;
1620 margin-bottom: -50px;
1621 margin-right: -50px;
1622 outline: none;
1623 overflow: scroll !important;
1624 padding-bottom: 50px;
1625 position: relative;
1626 }
1627 .CodeMirror-sizer {
1628 border-right: 50px solid transparent;
1629 position: relative;
1630 }
1631 .CodeMirror-gutter-filler,
1632 .CodeMirror-hscrollbar,
1633 .CodeMirror-scrollbar-filler,
1634 .CodeMirror-vscrollbar {
1635 display: none;
1636 outline: none;
1637 position: absolute;
1638 z-index: 6;
1639 }
1640 .CodeMirror-vscrollbar {
1641 overflow-x: hidden;
1642 overflow-y: scroll;
1643 right: 0;
1644 top: 0;
1645 }
1646 .CodeMirror-hscrollbar {
1647 bottom: 0;
1648 left: 0;
1649 overflow-x: scroll;
1650 overflow-y: hidden;
1651 }
1652 .CodeMirror-scrollbar-filler {
1653 bottom: 0;
1654 right: 0;
1655 }
1656 .CodeMirror-gutter-filler {
1657 bottom: 0;
1658 left: 0;
1659 }
1660 .CodeMirror-gutters {
1661 left: 0;
1662 min-height: 100%;
1663 position: absolute;
1664 top: 0;
1665 z-index: 3;
1666 }
1667 .CodeMirror-gutter {
1668 display: inline-block;
1669 height: 100%;
1670 margin-bottom: -50px;
1671 vertical-align: top;
1672 white-space: normal;
1673 }
1674 .CodeMirror-gutter-wrapper {
1675 background: none !important;
1676 border: none !important;
1677 position: absolute;
1678 z-index: 4;
1679 }
1680 .CodeMirror-gutter-background {
1681 bottom: 0;
1682 position: absolute;
1683 top: 0;
1684 z-index: 4;
1685 }
1686 .CodeMirror-gutter-elt {
1687 cursor: default;
1688 position: absolute;
1689 z-index: 4;
1690 }
1691 .CodeMirror-gutter-wrapper ::selection {
1692 background-color: transparent;
1693 }
1694 .CodeMirror-gutter-wrapper ::-moz-selection {
1695 background-color: transparent;
1696 }
1697 .CodeMirror-lines {
1698 cursor: text;
1699 min-height: 1px;
1700 }
1701 .CodeMirror pre.CodeMirror-line,
1702 .CodeMirror pre.CodeMirror-line-like {
1703 word-wrap: normal;
1704 -webkit-tap-highlight-color: transparent;
1705 font-feature-settings: "calt";
1706 background: transparent;
1707 border-radius: 0;
1708 border-width: 0;
1709 color: inherit;
1710 font-family: inherit;
1711 font-size: inherit;
1712 -webkit-font-variant-ligatures: contextual;
1713 font-variant-ligatures: contextual;
1714 line-height: inherit;
1715 margin: 0;
1716 overflow: visible;
1717 position: relative;
1718 white-space: pre;
1719 z-index: 2;
1720 }
1721 .CodeMirror-wrap pre.CodeMirror-line,
1722 .CodeMirror-wrap pre.CodeMirror-line-like {
1723 word-wrap: break-word;
1724 white-space: pre-wrap;
1725 word-break: normal;
1726 }
1727 .CodeMirror-linebackground {
1728 bottom: 0;
1729 left: 0;
1730 position: absolute;
1731 right: 0;
1732 top: 0;
1733 z-index: 0;
1734 }
1735 .CodeMirror-linewidget {
1736 padding: 0.1px;
1737 position: relative;
1738 z-index: 2;
1739 }
1740 .CodeMirror-rtl pre {
1741 direction: rtl;
1742 }
1743 .CodeMirror-gutter,
1744 .CodeMirror-gutters,
1745 .CodeMirror-linenumber,
1746 .CodeMirror-scroll,
1747 .CodeMirror-sizer {
1748 box-sizing: content-box;
1749 }
1750 .CodeMirror-measure {
1751 height: 0;
1752 overflow: hidden;
1753 position: absolute;
1754 visibility: hidden;
1755 width: 100%;
1756 }
1757 .CodeMirror-cursor {
1758 pointer-events: none;
1759 position: absolute;
1760 }
1761 .CodeMirror-measure pre {
1762 position: static;
1763 }
1764 div.CodeMirror-cursors {
1765 position: relative;
1766 visibility: hidden;
1767 z-index: 3;
1768 }
1769 .CodeMirror-focused div.CodeMirror-cursors,
1770 div.CodeMirror-dragcursors {
1771 visibility: visible;
1772 }
1773 .CodeMirror-selected {
1774 background: #d9d9d9;
1775 }
1776 .CodeMirror-focused .CodeMirror-selected {
1777 background: #d7d4f0;
1778 }
1779 .CodeMirror-crosshair {
1780 cursor: crosshair;
1781 }
1782 .CodeMirror-line::selection,
1783 .CodeMirror-line > span::selection,
1784 .CodeMirror-line > span > span::selection {
1785 background: #d7d4f0;
1786 }
1787 .CodeMirror-line::-moz-selection,
1788 .CodeMirror-line > span::-moz-selection,
1789 .CodeMirror-line > span > span::-moz-selection {
1790 background: #d7d4f0;
1791 }
1792 .cm-searching {
1793 background-color: #ffa;
1794 background-color: rgba(255, 255, 0, 0.4);
1795 }
1796 .cm-force-border {
1797 padding-right: 0.1px;
1798 }
1799 @media print {
1800 .CodeMirror div.CodeMirror-cursors {
1801 visibility: hidden;
1802 }
1803 }
1804 .cm-tab-wrap-hack:after {
1805 content: "";
1806 }
1807 span.CodeMirror-selectedtext {
1808 background: none;
1809 }
1810 .CodeMirror-dialog {
1811 background: inherit;
1812 color: inherit;
1813 left: 0;
1814 overflow: hidden;
1815 padding: 0.1em 0.8em;
1816 position: absolute;
1817 right: 0;
1818 z-index: 15;
1819 }
1820 .CodeMirror-dialog-top {
1821 border-bottom: 1px solid #eee;
1822 top: 0;
1823 }
1824 .CodeMirror-dialog-bottom {
1825 border-top: 1px solid #eee;
1826 bottom: 0;
1827 }
1828 .CodeMirror-dialog input {
1829 background: transparent;
1830 border: none;
1831 color: inherit;
1832 font-family: monospace;
1833 outline: none;
1834 width: 20em;
1835 }
1836 .CodeMirror-dialog button {
1837 font-size: 70%;
1838 }
1839 .CodeMirror-lint-markers {
1840 width: 16px;
1841 }
1842 .CodeMirror-lint-tooltip {
1843 background-color: #ffd;
1844 border: 1px solid #000;
1845 border-radius: 4px 4px 4px 4px;
1846 color: #000;
1847 font-family: monospace;
1848 font-size: 10pt;
1849 max-width: 600px;
1850 opacity: 0;
1851 overflow: hidden;
1852 padding: 2px 5px;
1853 position: fixed;
1854 transition: opacity 0.4s;
1855 -moz-transition: opacity 0.4s;
1856 -webkit-transition: opacity 0.4s;
1857 -o-transition: opacity 0.4s;
1858 -ms-transition: opacity 0.4s;
1859 white-space: pre;
1860 white-space: pre-wrap;
1861 z-index: 100;
1862 }
1863 .CodeMirror-lint-mark {
1864 background-position: 0 100%;
1865 background-repeat: repeat-x;
1866 }
1867 .CodeMirror-lint-mark-warning {
1868 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
1869 }
1870 .CodeMirror-lint-mark-error {
1871 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
1872 }
1873 .CodeMirror-lint-marker {
1874 background-position: 50%;
1875 background-repeat: no-repeat;
1876 cursor: pointer;
1877 display: inline-block;
1878 height: 16px;
1879 position: relative;
1880 vertical-align: middle;
1881 width: 16px;
1882 }
1883 .CodeMirror-lint-message {
1884 background-position: 0 0;
1885 background-repeat: no-repeat;
1886 padding-left: 18px;
1887 }
1888 .CodeMirror-lint-marker-warning,
1889 .CodeMirror-lint-message-warning {
1890 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
1891 }
1892 .CodeMirror-lint-marker-error,
1893 .CodeMirror-lint-message-error {
1894 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
1895 }
1896 .CodeMirror-lint-marker-multiple {
1897 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
1898 background-position: 100% 100%;
1899 background-repeat: no-repeat;
1900 height: 100%;
1901 width: 100%;
1902 }
1903 .CodeMirror-lint-line-error {
1904 background-color: rgba(183, 76, 81, 0.08);
1905 }
1906 .CodeMirror-lint-line-warning {
1907 background-color: rgba(255, 211, 0, 0.1);
1908 }
1909 .CodeMirror {
1910 background-color: #fff;
1911 border: 1px solid #dfdfdf;
1912 border-radius: 3px;
1913 height: auto !important;
1914 }
1915 .CodeMirror-code {
1916 outline: none;
1917 }
1918 .CodeMirror-focused .cm-matchhighlight {
1919 color: #fff !important;
1920 outline: 1px solid green;
1921 }
1922 .cm-s-rubyblue .CodeMirror-cursor {
1923 border-left: 1px solid #fff !important;
1924 }
1925 .CodeMirror-lint-marker-multiple,
1926 [class*="CodeMirror-lint-marker"],
1927 [class*="CodeMirror-lint-message"] {
1928 background-image: none;
1929 }
1930 .CodeMirror-lint-marker-error,
1931 .CodeMirror-lint-marker-warning {
1932 cursor: help;
1933 }
1934 .CodeMirror-lint-marker-multiple {
1935 position: absolute;
1936 top: 0;
1937 }
1938 [class*="CodeMirror-lint-marker"]:before {
1939 font: normal 18px/1 dashicons;
1940 position: relative;
1941 top: -2px;
1942 }
1943 [class*="CodeMirror-lint-message"]:before {
1944 font: normal 16px/1 dashicons;
1945 left: 16px;
1946 position: absolute;
1947 }
1948 .CodeMirror-lint-message-error,
1949 .CodeMirror-lint-message-warning {
1950 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1951 margin: 5px 0 2px;
1952 padding: 3px 12px 3px 28px;
1953 }
1954 .CodeMirror-lint-message-warning {
1955 background-color: #fff8e5;
1956 border-left: 4px solid #ffb900;
1957 }
1958 .CodeMirror-lint-marker-warning:before,
1959 .CodeMirror-lint-message-warning:before {
1960 color: #f6a306;
1961 content: "\f534";
1962 }
1963 .CodeMirror-lint-message-error {
1964 background-color: #fbeaea;
1965 border-left: 4px solid #dc3232;
1966 }
1967 .CodeMirror-lint-marker-error:before,
1968 .CodeMirror-lint-message-error:before {
1969 color: #dc3232;
1970 content: "\f153";
1971 }
1972 .CodeMirror-lint-tooltip {
1973 background: none;
1974 border: none;
1975 border-radius: 0;
1976 direction: ltr;
1977 }
1978 .CodeMirror .CodeMirror-matchingbracket {
1979 background: rgba(255, 150, 0, 0.3);
1980 color: inherit;
1981 }
1982 .CodeMirror .CodeMirror-linenumber {
1983 color: #666;
1984 }
1985