git.plutz.net Git - shellwiki/blob - themes/simplemde/simplemde.css

   1 /**
   2  * simplemde v1.11.2
   3  * Copyright Next Step Webs, Inc.
   4  * @link https://github.com/NextStepWebs/simplemde-markdown-editor
   5  * @license MIT
   6  */
   7 /* BASICS */
   8
   9 .CodeMirror {
  10   /* Set height, width, borders, and global font properties here */
  11   font-family: monospace;
  12   height: 300px;
  13   color: black;
  14 }
  15
  16 /* PADDING */
  17
  18 .CodeMirror-lines {
  19   padding: 4px 0; /* Vertical padding around content */
  20 }
  21 .CodeMirror pre {
  22   padding: 0 4px; /* Horizontal padding of content */
  23 }
  24
  25 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  26   background-color: white; /* The little square between H and V scrollbars */
  27 }
  28
  29 /* GUTTER */
  30
  31 .CodeMirror-gutters {
  32   border-right: 1px solid #ddd;
  33   background-color: #f7f7f7;
  34   white-space: nowrap;
  35 }
  36 .CodeMirror-linenumbers {}
  37 .CodeMirror-linenumber {
  38   padding: 0 3px 0 5px;
  39   min-width: 20px;
  40   text-align: right;
  41   color: #999;
  42   white-space: nowrap;
  43 }
  44
  45 .CodeMirror-guttermarker { color: black; }
  46 .CodeMirror-guttermarker-subtle { color: #999; }
  47
  48 /* CURSOR */
  49
  50 .CodeMirror-cursor {
  51   border-left: 1px solid black;
  52   border-right: none;
  53   width: 0;
  54 }
  55 /* Shown when moving in bi-directional text */
  56 .CodeMirror div.CodeMirror-secondarycursor {
  57   border-left: 1px solid silver;
  58 }
  59 .cm-fat-cursor .CodeMirror-cursor {
  60   width: auto;
  61   border: 0 !important;
  62   background: #7e7;
  63 }
  64 .cm-fat-cursor div.CodeMirror-cursors {
  65   z-index: 1;
  66 }
  67
  68 .cm-animate-fat-cursor {
  69   width: auto;
  70   border: 0;
  71   -webkit-animation: blink 1.06s steps(1) infinite;
  72   -moz-animation: blink 1.06s steps(1) infinite;
  73   animation: blink 1.06s steps(1) infinite;
  74   background-color: #7e7;
  75 }
  76 @-moz-keyframes blink {
  77   0% {}
  78   50% { background-color: transparent; }
  79   100% {}
  80 }
  81 @-webkit-keyframes blink {
  82   0% {}
  83   50% { background-color: transparent; }
  84   100% {}
  85 }
  86 @keyframes blink {
  87   0% {}
  88   50% { background-color: transparent; }
  89   100% {}
  90 }
  91
  92 /* Can style cursor different in overwrite (non-insert) mode */
  93 .CodeMirror-overwrite .CodeMirror-cursor {}
  94
  95 .cm-tab { display: inline-block; text-decoration: inherit; }
  96
  97 .CodeMirror-ruler {
  98   border-left: 1px solid #ccc;
  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   /* Hack to make IE7 behave */
 210   *zoom:1;
 211   *display:inline;
 212 }
 213 .CodeMirror-gutter-wrapper {
 214   position: absolute;
 215   z-index: 4;
 216   background: none !important;
 217   border: none !important;
 218 }
 219 .CodeMirror-gutter-background {
 220   position: absolute;
 221   top: 0; bottom: 0;
 222   z-index: 4;
 223 }
 224 .CodeMirror-gutter-elt {
 225   position: absolute;
 226   cursor: default;
 227   z-index: 4;
 228 }
 229 .CodeMirror-gutter-wrapper {
 230   -webkit-user-select: none;
 231   -moz-user-select: none;
 232   user-select: none;
 233 }
 234
 235 .CodeMirror-lines {
 236   cursor: text;
 237   min-height: 1px; /* prevents collapsing before first draw */
 238 }
 239 .CodeMirror pre {
 240   /* Reset some styles that the rest of the page might have set */
 241   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
 242   border-width: 0;
 243   background: transparent;
 244   font-family: inherit;
 245   font-size: inherit;
 246   margin: 0;
 247   white-space: pre;
 248   word-wrap: normal;
 249   line-height: inherit;
 250   color: inherit;
 251   z-index: 2;
 252   position: relative;
 253   overflow: visible;
 254   -webkit-tap-highlight-color: transparent;
 255   -webkit-font-variant-ligatures: none;
 256   font-variant-ligatures: none;
 257 }
 258 .CodeMirror-wrap pre {
 259   word-wrap: break-word;
 260   white-space: pre-wrap;
 261   word-break: normal;
 262 }
 263
 264 .CodeMirror-linebackground {
 265   position: absolute;
 266   left: 0; right: 0; top: 0; bottom: 0;
 267   z-index: 0;
 268 }
 269
 270 .CodeMirror-linewidget {
 271   position: relative;
 272   z-index: 2;
 273   overflow: auto;
 274 }
 275
 276 .CodeMirror-widget {}
 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 { position: absolute; }
 301 .CodeMirror-measure pre { position: static; }
 302
 303 div.CodeMirror-cursors {
 304   visibility: hidden;
 305   position: relative;
 306   z-index: 3;
 307 }
 308 div.CodeMirror-dragcursors {
 309   visibility: visible;
 310 }
 311
 312 .CodeMirror-focused div.CodeMirror-cursors {
 313   visibility: visible;
 314 }
 315
 316 .CodeMirror-selected { background: #d9d9d9; }
 317 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
 318 .CodeMirror-crosshair { cursor: crosshair; }
 319 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
 320 .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 321
 322 .cm-searching {
 323   background: #ffa;
 324   background: rgba(255, 255, 0, .4);
 325 }
 326
 327 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
 328 .CodeMirror span { *vertical-align: text-bottom; }
 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 .CodeMirror {
 347     height: auto;
 348     min-height: 300px;
 349     border: 1px solid #ddd;
 350     border-bottom-left-radius: 4px;
 351     border-bottom-right-radius: 4px;
 352     padding: 10px;
 353     font: inherit;
 354     z-index: 1;
 355 }
 356
 357 .CodeMirror-scroll {
 358     min-height: 300px
 359 }
 360
 361 .CodeMirror-fullscreen {
 362     background: #fff;
 363     position: fixed !important;
 364     top: 50px;
 365     left: 0;
 366     right: 0;
 367     bottom: 0;
 368     height: auto;
 369     z-index: 9;
 370 }
 371
 372 .CodeMirror-sided {
 373     width: 50% !important;
 374 }
 375
 376 .editor-toolbar {
 377     position: relative;
 378     opacity: .6;
 379     -webkit-user-select: none;
 380     -moz-user-select: none;
 381     -ms-user-select: none;
 382     -o-user-select: none;
 383     user-select: none;
 384     padding: 0 10px;
 385     border-top: 1px solid #bbb;
 386     border-left: 1px solid #bbb;
 387     border-right: 1px solid #bbb;
 388     border-top-left-radius: 4px;
 389     border-top-right-radius: 4px;
 390 }
 391
 392 .editor-toolbar:after,
 393 .editor-toolbar:before {
 394     display: block;
 395     content: ' ';
 396     height: 1px;
 397 }
 398
 399 .editor-toolbar:before {
 400     margin-bottom: 8px
 401 }
 402
 403 .editor-toolbar:after {
 404     margin-top: 8px
 405 }
 406
 407 .editor-toolbar:hover,
 408 .editor-wrapper input.title:focus,
 409 .editor-wrapper input.title:hover {
 410     opacity: .8
 411 }
 412
 413 .editor-toolbar.fullscreen {
 414     width: 100%;
 415     height: 50px;
 416     overflow-x: auto;
 417     overflow-y: hidden;
 418     white-space: nowrap;
 419     padding-top: 10px;
 420     padding-bottom: 10px;
 421     box-sizing: border-box;
 422     background: #fff;
 423     border: 0;
 424     position: fixed;
 425     top: 0;
 426     left: 0;
 427     opacity: 1;
 428     z-index: 9;
 429 }
 430
 431 .editor-toolbar.fullscreen::before {
 432     width: 20px;
 433     height: 50px;
 434     background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 435     background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
 436     background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 437     background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 438     background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 439     background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
 440     position: fixed;
 441     top: 0;
 442     left: 0;
 443     margin: 0;
 444     padding: 0;
 445 }
 446
 447 .editor-toolbar.fullscreen::after {
 448     width: 20px;
 449     height: 50px;
 450     background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
 451     background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
 452     background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
 453     background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
 454     background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
 455     background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
 456     position: fixed;
 457     top: 0;
 458     right: 0;
 459     margin: 0;
 460     padding: 0;
 461 }
 462
 463 .editor-toolbar a {
 464     display: inline-block;
 465     text-align: center;
 466     text-decoration: none!important;
 467     color: #2c3e50!important;
 468     width: 30px;
 469     height: 30px;
 470     margin: 0;
 471     border: 1px solid transparent;
 472     border-radius: 3px;
 473     cursor: pointer;
 474 }
 475
 476 .editor-toolbar a.active,
 477 .editor-toolbar a:hover {
 478     background: #fcfcfc;
 479     border-color: #95a5a6;
 480 }
 481
 482 .editor-toolbar a:before {
 483     line-height: 30px
 484 }
 485
 486 .editor-toolbar i.separator {
 487     display: inline-block;
 488     width: 0;
 489     border-left: 1px solid #d9d9d9;
 490     border-right: 1px solid #fff;
 491     color: transparent;
 492     text-indent: -10px;
 493     margin: 0 6px;
 494 }
 495
 496 .editor-toolbar a.fa-header-x:after {
 497     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 498     font-size: 65%;
 499     vertical-align: text-bottom;
 500     position: relative;
 501     top: 2px;
 502 }
 503
 504 .editor-toolbar a.fa-header-1:after {
 505     content: "1";
 506 }
 507
 508 .editor-toolbar a.fa-header-2:after {
 509     content: "2";
 510 }
 511
 512 .editor-toolbar a.fa-header-3:after {
 513     content: "3";
 514 }
 515
 516 .editor-toolbar a.fa-header-bigger:after {
 517     content: "▲";
 518 }
 519
 520 .editor-toolbar a.fa-header-smaller:after {
 521     content: "▼";
 522 }
 523
 524 .editor-toolbar.disabled-for-preview a:not(.no-disable) {
 525     pointer-events: none;
 526     background: #fff;
 527     border-color: transparent;
 528     text-shadow: inherit;
 529 }
 530
 531 @media only screen and (max-width: 700px) {
 532     .editor-toolbar a.no-mobile {
 533         display: none;
 534     }
 535 }
 536
 537 .editor-statusbar {
 538     padding: 8px 10px;
 539     font-size: 12px;
 540     color: #959694;
 541     text-align: right;
 542 }
 543
 544 .editor-statusbar span {
 545     display: inline-block;
 546     min-width: 4em;
 547     margin-left: 1em;
 548 }
 549
 550 .editor-statusbar .lines:before {
 551     content: 'lines: '
 552 }
 553
 554 .editor-statusbar .words:before {
 555     content: 'words: '
 556 }
 557
 558 .editor-statusbar .characters:before {
 559     content: 'characters: '
 560 }
 561
 562 .editor-preview {
 563     padding: 10px;
 564     position: absolute;
 565     width: 100%;
 566     height: 100%;
 567     top: 0;
 568     left: 0;
 569     background: #fafafa;
 570     z-index: 7;
 571     overflow: auto;
 572     display: none;
 573     box-sizing: border-box;
 574 }
 575
 576 .editor-preview-side {
 577     padding: 10px;
 578     position: fixed;
 579     bottom: 0;
 580     width: 50%;
 581     top: 50px;
 582     right: 0;
 583     background: #fafafa;
 584     z-index: 9;
 585     overflow: auto;
 586     display: none;
 587     box-sizing: border-box;
 588     border: 1px solid #ddd;
 589 }
 590
 591 .editor-preview-active-side {
 592     display: block
 593 }
 594
 595 .editor-preview-active {
 596     display: block
 597 }
 598
 599 .editor-preview>p,
 600 .editor-preview-side>p {
 601     margin-top: 0
 602 }
 603
 604 .editor-preview pre,
 605 .editor-preview-side pre {
 606     background: #eee;
 607     margin-bottom: 10px;
 608 }
 609
 610 .editor-preview table td,
 611 .editor-preview table th,
 612 .editor-preview-side table td,
 613 .editor-preview-side table th {
 614     border: 1px solid #ddd;
 615     padding: 5px;
 616 }
 617
 618 .CodeMirror .CodeMirror-code .cm-tag {
 619     color: #63a35c;
 620 }
 621
 622 .CodeMirror .CodeMirror-code .cm-attribute {
 623     color: #795da3;
 624 }
 625
 626 .CodeMirror .CodeMirror-code .cm-string {
 627     color: #183691;
 628 }
 629
 630 .CodeMirror .CodeMirror-selected {
 631     background: #d9d9d9;
 632 }
 633
 634 .CodeMirror .CodeMirror-code .cm-header-1 {
 635     font-size: 200%;
 636     line-height: 200%;
 637 }
 638
 639 .CodeMirror .CodeMirror-code .cm-header-2 {
 640     font-size: 160%;
 641     line-height: 160%;
 642 }
 643
 644 .CodeMirror .CodeMirror-code .cm-header-3 {
 645     font-size: 125%;
 646     line-height: 125%;
 647 }
 648
 649 .CodeMirror .CodeMirror-code .cm-header-4 {
 650     font-size: 110%;
 651     line-height: 110%;
 652 }
 653
 654 .CodeMirror .CodeMirror-code .cm-comment {
 655     background: rgba(0, 0, 0, .05);
 656     border-radius: 2px;
 657 }
 658
 659 .CodeMirror .CodeMirror-code .cm-link {
 660     color: #7f8c8d;
 661 }
 662
 663 .CodeMirror .CodeMirror-code .cm-url {
 664     color: #aab2b3;
 665 }
 666
 667 .CodeMirror .CodeMirror-code .cm-strikethrough {
 668     text-decoration: line-through;
 669 }
 670
 671 .CodeMirror .CodeMirror-placeholder {
 672     opacity: .5;
 673 }
 674 .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
 675     background: rgba(255, 0, 0, .15);
 676 }