tweak editor styles

dark-theme.css

@@ -356,13 +356,6 @@ span.ui.basic.yellow.label {
   background-color: #0000001a;
   color: #999;
 }
-.CodeMirror {
-  background: #232323;
-  color: #fff;
-}
-.CodeMirror .CodeMirror-cursor {
-  border-color: #fff;
-}
 .ui.form textarea,
 .repository.file.editor
   .commit-form-wrapper

simplemde-dark.css

@@ -3,7 +3,7 @@
 @charset "UTF-8";
 /* THIS FILE IS COPIED FROM CODEMIRROR.CSS, PLEASE DONOT EDIT IT. */
 /* BASICS */
-.CodeMirror {
+.cm-s-paper.CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: 300px;
@@ -11,30 +11,30 @@
 }
 
 /* PADDING */
-.CodeMirror-lines {
+.cm-s-paper .CodeMirror-lines {
   padding: 4px 0;
   /* Vertical padding around content */
 }
 
-.CodeMirror pre {
+.cm-s-paper .CodeMirror pre {
   padding: 0 4px;
   /* Horizontal padding of content */
 }
 
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
+.cm-s-paper .CodeMirror-scrollbar-filler,
+.cm-s-paper .CodeMirror-gutter-filler {
   background-color: white;
   /* The little square between H and V scrollbars */
 }
 
 /* GUTTER */
-.CodeMirror-gutters {
+.cm-s-paper .CodeMirror-gutters {
   border-right: 1px solid #ddd;
   background-color: #f7f7f7;
   white-space: nowrap;
 }
 
-.CodeMirror-linenumber {
+.cm-s-paper .CodeMirror-linenumber {
   padding: 0 3px 0 5px;
   min-width: 20px;
   text-align: right;
@@ -42,37 +42,37 @@
   white-space: nowrap;
 }
 
-.CodeMirror-guttermarker {
+.cm-s-paper .CodeMirror-guttermarker {
   color: black;
 }
 
-.CodeMirror-guttermarker-subtle {
+.cm-s-paper .CodeMirror-guttermarker-subtle {
   color: #999;
 }
 
 /* CURSOR */
-.CodeMirror-cursor {
+.cm-s-paper .CodeMirror-cursor {
   border-left: 1px solid black;
   border-right: none;
   width: 0;
 }
 
 /* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
+.cm-s-paper.CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
 
-.cm-fat-cursor .CodeMirror-cursor {
+.cm-s-paper .cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0 !important;
   background: #7e7;
 }
 
-.cm-fat-cursor div.CodeMirror-cursors {
+.cm-s-paper .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
 
-.cm-animate-fat-cursor {
+.cm-s-paper .cm-animate-fat-cursor {
   width: auto;
   border: 0;
   -webkit-animation: blink 1.06s steps(1) infinite;
@@ -101,12 +101,12 @@
 }
 
 /* Can style cursor different in overwrite (non-insert) mode */
-.cm-tab {
+.cm-s-paper .cm-tab {
   display: inline-block;
   text-decoration: inherit;
 }
 
-.CodeMirror-rulers {
+.cm-s-paper .CodeMirror-rulers {
   position: absolute;
   left: 0;
   right: 0;
@@ -115,154 +115,73 @@
   overflow: hidden;
 }
 
-.CodeMirror-ruler {
+.cm-s-paper .CodeMirror-ruler {
   border-left: 1px solid #ccc;
   top: 0;
   bottom: 0;
   position: absolute;
 }
 
-/* DEFAULT THEME */
-.cm-s-default .cm-header {
-  color: blue;
-}
-
-.cm-s-default .cm-quote {
-  color: #090;
-}
-
-.cm-negative {
+.cm-s-paper .cm-negative {
   color: #d44;
 }
 
-.cm-positive {
+.cm-s-paper .cm-positive {
   color: #292;
 }
 
-.cm-header,
-.cm-strong {
+.cm-s-paper .cm-header,
+.cm-s-paper .cm-strong {
   font-weight: bold;
 }
 
-.cm-em {
+.cm-s-paper .cm-em {
   font-style: italic;
 }
 
-.cm-link {
+.cm-s-paper .cm-link {
   text-decoration: underline;
 }
 
-.cm-strikethrough {
+.cm-s-paper .cm-strikethrough {
   text-decoration: line-through;
 }
 
-.cm-s-default .cm-keyword {
-  color: #708;
-}
-
-.cm-s-default .cm-atom {
-  color: #219;
-}
-
-.cm-s-default .cm-number {
-  color: #164;
-}
-
-.cm-s-default .cm-def {
-  color: #00f;
-}
-
-.cm-s-default .cm-variable-2 {
-  color: #05a;
-}
-
-.cm-s-default .cm-variable-3 {
-  color: #085;
-}
-
-.cm-s-default .cm-comment {
-  color: #a50;
-}
-
-.cm-s-default .cm-string {
-  color: #a11;
-}
-
-.cm-s-default .cm-string-2 {
-  color: #f50;
-}
-
-.cm-s-default .cm-meta {
-  color: #555;
-}
-
-.cm-s-default .cm-qualifier {
-  color: #555;
-}
-
-.cm-s-default .cm-builtin {
-  color: #30a;
-}
-
-.cm-s-default .cm-bracket {
-  color: #997;
-}
-
-.cm-s-default .cm-tag {
-  color: #170;
-}
-
-.cm-s-default .cm-attribute {
-  color: #00c;
-}
-
-.cm-s-default .cm-hr {
-  color: #999;
-}
-
-.cm-s-default .cm-link {
-  color: #00c;
-}
-
-.cm-s-default .cm-error {
-  color: #f00;
-}
-
-.cm-invalidchar {
+.cm-s-paper .cm-invalidchar {
   color: #f00;
 }
 
-.CodeMirror-composing {
+.cm-s-paper .CodeMirror-composing {
   border-bottom: 2px solid;
 }
 
 /* Default styles for common addons */
-div.CodeMirror span.CodeMirror-matchingbracket {
+div.cm-s-paper.CodeMirror span.CodeMirror-matchingbracket {
   color: #0f0;
 }
 
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
+div.cm-s-paper.CodeMirror span.CodeMirror-nonmatchingbracket {
   color: #f22;
 }
 
-.CodeMirror-matchingtag {
+.cm-s-paper .CodeMirror-matchingtag {
   background: rgba(255, 150, 0, 0.3);
 }
 
-.CodeMirror-activeline-background {
+.cm-s-paper .CodeMirror-activeline-background {
   background: #e8f2ff;
 }
 
 /* STOP */
 /* The rest of this file contains styles related to the mechanics of
    the editor. You probably shouldn't touch them. */
-.CodeMirror {
+.cm-s-paper.CodeMirror {
   position: relative;
   overflow: hidden;
   background: white;
 }
 
-.CodeMirror-scroll {
+.cm-s-paper .CodeMirror-scroll {
   overflow: scroll !important;
   /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
@@ -276,7 +195,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   position: relative;
 }
 
-.CodeMirror-sizer {
+.cm-s-paper .CodeMirror-sizer {
   position: relative;
   border-right: 30px solid transparent;
 }
@@ -284,40 +203,40 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 /* The fake, visible scrollbars. Used to force redraw during scrolling
    before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar,
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
+.cm-s-paper .CodeMirror-vscrollbar,
+.cm-s-paper .CodeMirror-hscrollbar,
+.cm-s-paper .CodeMirror-scrollbar-filler,
+.cm-s-paper .CodeMirror-gutter-filler {
   position: absolute;
   z-index: 6;
   display: none;
 }
 
-.CodeMirror-vscrollbar {
+.cm-s-paper .CodeMirror-vscrollbar {
   right: 0;
   top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 
-.CodeMirror-hscrollbar {
+.cm-s-paper .CodeMirror-hscrollbar {
   bottom: 0;
   left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
 }
 
-.CodeMirror-scrollbar-filler {
+.cm-s-paper .CodeMirror-scrollbar-filler {
   right: 0;
   bottom: 0;
 }
 
-.CodeMirror-gutter-filler {
+.cm-s-paper .CodeMirror-gutter-filler {
   left: 0;
   bottom: 0;
 }
 
-.CodeMirror-gutters {
+.cm-s-paper .CodeMirror-gutters {
   position: absolute;
   left: 0;
   top: 0;
@@ -325,7 +244,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   z-index: 3;
 }
 
-.CodeMirror-gutter {
+.cm-s-paper .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
   display: inline-block;
@@ -333,40 +252,40 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   margin-bottom: -30px;
 }
 
-.CodeMirror-gutter-wrapper {
+.cm-s-paper .CodeMirror-gutter-wrapper {
   position: absolute;
   z-index: 4;
   background: none !important;
   border: none !important;
 }
 
-.CodeMirror-gutter-background {
+.cm-s-paper .CodeMirror-gutter-background {
   position: absolute;
   top: 0;
   bottom: 0;
   z-index: 4;
 }
 
-.CodeMirror-gutter-elt {
+.cm-s-paper .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
 
-.CodeMirror-gutter-wrapper {
+.cm-s-paper .CodeMirror-gutter-wrapper {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.CodeMirror-lines {
+.cm-s-paper .CodeMirror-lines {
   cursor: text;
   min-height: 1px;
   /* prevents collapsing before first draw */
 }
 
-.CodeMirror pre {
+.cm-s-paper.CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
   border-radius: 0;
   border-width: 0;
@@ -386,13 +305,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   font-variant-ligatures: contextual;
 }
 
-.CodeMirror-wrap pre {
+.cm-s-paper.CodeMirror-wrap pre {
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
 }
 
-.CodeMirror-linebackground {
+.cm-s-paper .CodeMirror-linebackground {
   position: absolute;
   left: 0;
   right: 0;
@@ -401,26 +320,26 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   z-index: 0;
 }
 
-.CodeMirror-linewidget {
+.cm-s-paper .CodeMirror-linewidget {
   position: relative;
   z-index: 2;
   overflow: auto;
 }
 
-.CodeMirror-code {
+.cm-s-paper .CodeMirror-code {
   outline: none;
 }
 
 /* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
+.cm-s-paper .CodeMirror-scroll,
+.cm-s-paper .CodeMirror-sizer,
+.cm-s-paper .CodeMirror-gutter,
+.cm-s-paper .CodeMirror-gutters,
+.cm-s-paper .CodeMirror-linenumber {
   box-sizing: content-box;
 }
 
-.CodeMirror-measure {
+.cm-s-paper .CodeMirror-measure {
   position: absolute;
   width: 100%;
   height: 0;
@@ -428,87 +347,87 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   visibility: hidden;
 }
 
-.CodeMirror-cursor {
+.cm-s-paper .CodeMirror-cursor {
   position: absolute;
   pointer-events: none;
 }
 
-.CodeMirror-measure pre {
+.cm-s-paper .CodeMirror-measure pre {
   position: static;
 }
 
-div.CodeMirror-cursors {
+.cm-s-paper div.CodeMirror-cursors {
   visibility: hidden;
   position: relative;
   z-index: 3;
 }
 
-div.CodeMirror-dragcursors {
+.cm-s-paper div.CodeMirror-dragcursors {
   visibility: visible;
 }
 
-.CodeMirror-focused div.CodeMirror-cursors {
+.cm-s-paper.CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
 
-.CodeMirror-selected {
+.cm-s-paper .CodeMirror-selected {
   background: #d9d9d9;
 }
 
-.CodeMirror-focused .CodeMirror-selected {
+.cm-s-paper.CodeMirror-focused .CodeMirror-selected {
   background: #d7d4f0;
 }
 
-.CodeMirror-crosshair {
+.cm-s-paper .CodeMirror-crosshair {
   cursor: crosshair;
 }
 
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
+.cm-s-paper .CodeMirror-line::-moz-selection,
+.cm-s-paper .CodeMirror-line > span::-moz-selection,
+.cm-s-paper .CodeMirror-line > span > span::-moz-selection {
   background: #d7d4f0;
 }
 
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
+.cm-s-paper .CodeMirror-line::selection,
+.cm-s-paper .CodeMirror-line > span::selection,
+.cm-s-paper .CodeMirror-line > span > span::selection {
   background: #d7d4f0;
 }
 
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
+.cm-s-paper .CodeMirror-line::-moz-selection,
+.cm-s-paper .CodeMirror-line > span::-moz-selection,
+.cm-s-paper .CodeMirror-line > span > span::-moz-selection {
   background: #d7d4f0;
 }
 
-.cm-searching {
+.cm-s-paper .cm-searching {
   background: #ffa;
   background: rgba(255, 255, 0, 0.4);
 }
 
 /* Used to force a border model for a node */
-.cm-force-border {
+.cm-s-paper .cm-force-border {
   padding-right: 0.1px;
 }
 
 @media print {
   /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
+  .cm-s-paper.CodeMirror div.CodeMirror-cursors {
     visibility: hidden;
   }
 }
 
 /* See issue #2901 */
-.cm-tab-wrap-hack:after {
+.cm-s-paper .cm-tab-wrap-hack:after {
   content: "";
 }
 
 /* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext {
+.cm-s-paper span.CodeMirror-selectedtext {
   background: none;
 }
 
-.CodeMirror {
+.cm-s-paper.CodeMirror {
   background-color: #444;
   border: 1px solid #555;
   border-bottom-left-radius: 3px;
@@ -523,14 +442,14 @@ span.CodeMirror-selectedtext {
   z-index: 1;
 }
 
-.CodeMirror-scroll {
+.cm-s-paper .CodeMirror-scroll {
   margin-bottom: -32px;
   margin-right: -32px;
   min-height: 300px;
   padding-bottom: 32px;
 }
 
-.CodeMirror-fullscreen {
+.cm-s-paper .CodeMirror-fullscreen {
   background-color: #444;
   border: 0;
   border-top: 1px solid #555;
@@ -543,114 +462,114 @@ span.CodeMirror-selectedtext {
   z-index: 9;
 }
 
-.CodeMirror-sided {
+.cm-s-paper .CodeMirror-sided {
   width: 50% !important;
 }
 
-.CodeMirror .CodeMirror-placeholder {
+.cm-s-paper.CodeMirror .CodeMirror-placeholder {
   color: #777;
 }
 
-.CodeMirror-cursor {
+.cm-s-paper .CodeMirror-cursor {
   border-left-color: #aaa;
 }
 
-.CodeMirror-lines {
+.cm-s-paper .CodeMirror-lines {
   padding: 0;
 }
 
-.CodeMirror pre {
+.cm-s-paper.CodeMirror pre {
   padding: 0 0;
 }
 
-.CodeMirror-selected,
-.CodeMirror-focused .CodeMirror-selected,
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
+.cm-s-paper .CodeMirror-selected,
+.cm-s-paper.CodeMirror-focused .CodeMirror-selected,
+.cm-s-paper .CodeMirror-line::-moz-selection,
+.cm-s-paper .CodeMirror-line > span::-moz-selection,
+.cm-s-paper .CodeMirror-line > span > span::-moz-selection {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-.CodeMirror-selected,
-.CodeMirror-focused .CodeMirror-selected,
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
+.cm-s-paper .CodeMirror-selected,
+.cm-s-paper.CodeMirror-focused .CodeMirror-selected,
+.cm-s-paper .CodeMirror-line::selection,
+.cm-s-paper .CodeMirror-line > span::selection,
+.cm-s-paper .CodeMirror-line > span > span::selection {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-.CodeMirror .CodeMirror-code .cm-tag {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-tag {
   color: #95bf40;
 }
 
-.CodeMirror .CodeMirror-code .cm-attribute {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-attribute {
   color: #95bf40;
 }
 
-.CodeMirror .CodeMirror-code .cm-string {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-string {
   color: #777;
 }
 
-.CodeMirror .CodeMirror-code .cm-link {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-link {
   color: #ffd500;
 }
 
-.CodeMirror .CodeMirror-code .cm-url {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-url {
   color: #777;
 }
 
-.CodeMirror .CodeMirror-code .cm-hr {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-hr {
   color: #777;
 }
 
-.CodeMirror .CodeMirror-code .cm-formatting-header,
-.CodeMirror .CodeMirror-code .cm-formatting-em,
-.CodeMirror .CodeMirror-code .cm-formatting-strong,
-.CodeMirror .CodeMirror-code .cm-formatting-strikethrough,
-.CodeMirror .CodeMirror-code .cm-formatting-code,
-.CodeMirror .CodeMirror-code .cm-formatting-code-block {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-header,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-em,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-strong,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-strikethrough,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-code,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-formatting-code-block {
   color: #777;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-1,
-.CodeMirror .CodeMirror-code .cm-header-2,
-.CodeMirror .CodeMirror-code .cm-header-3,
-.CodeMirror .CodeMirror-code .cm-header-4,
-.CodeMirror .CodeMirror-code .cm-header-5,
-.CodeMirror .CodeMirror-code .cm-header-6 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-1,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-2,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-3,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-4,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-5,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-6 {
   line-height: 2;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-1 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-1 {
   font-size: 32px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-2 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-2 {
   font-size: 26px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-3 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-3 {
   font-size: 24px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-4 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-4 {
   font-size: 22px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-5 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-5 {
   font-size: 20px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-6 {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header-6 {
   font-size: 18px;
 }
 
-.CodeMirror .CodeMirror-code .cm-header,
-.CodeMirror .CodeMirror-code .cm-strong {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-header,
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-strong {
   font-weight: 600;
 }
 
-.CodeMirror .CodeMirror-code .cm-comment {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-comment {
   background-color: rgba(255, 255, 255, 0.05);
   font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
@@ -658,19 +577,21 @@ span.CodeMirror-selectedtext {
   padding: 6px 0 4px;
 }
 
-.CodeMirror .CodeMirror-code span.CodeMirror-selectedtext.cm-comment {
+.cm-s-paper.CodeMirror
+  .CodeMirror-code
+  span.CodeMirror-selectedtext.cm-comment {
   background-color: rgba(255, 255, 255, 0.05);
 }
 
-.CodeMirror .CodeMirror-code .cm-quote {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-quote {
   color: #777;
 }
 
-.CodeMirror .CodeMirror-code .cm-strikethrough {
+.cm-s-paper.CodeMirror .CodeMirror-code .cm-strikethrough {
   text-decoration: line-through;
 }
 
-.editor-preview {
+.cm-s-paper .editor-preview {
   height: 100%;
   left: 0;
   position: absolute;
@@ -679,7 +600,7 @@ span.CodeMirror-selectedtext {
   z-index: 2;
 }
 
-.editor-preview-side {
+.cm-s-paper .editor-preview-side {
   border: 0;
   border-left: 1px solid #555;
   border-top: 1px solid #555;
@@ -691,8 +612,8 @@ span.CodeMirror-selectedtext {
   z-index: 9;
 }
 
-.editor-preview,
-.editor-preview-side {
+.cm-s-paper .editor-preview,
+.cm-s-paper .editor-preview-side {
   background-color: #444;
   box-sizing: border-box;
   color: #aaa;
@@ -703,8 +624,8 @@ span.CodeMirror-selectedtext {
   overflow: auto;
   padding: 0 14px 14px;
 }
-.editor-preview pre,
-.editor-preview-side pre {
+.cm-s-paper .editor-preview pre,
+.cm-s-paper .editor-preview-side pre {
   background-color: rgba(255, 255, 255, 0.05);
   font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
@@ -715,68 +636,68 @@ span.CodeMirror-selectedtext {
   -webkit-overflow-scrolling: touch;
   padding: 14px;
 }
-.editor-preview pre code,
-.editor-preview-side pre code {
+.cm-s-paper .editor-preview pre code,
+.cm-s-paper .editor-preview-side pre code {
   background-color: transparent;
   font-size: 14px;
   padding: 0;
 }
 
-.editor-preview-active,
-.editor-preview-active-side {
+.cm-s-paper .editor-preview-active,
+.cm-s-paper .editor-preview-active-side {
   display: block;
 }
 
-.editor-preview table,
-.editor-preview-side table {
+.cm-s-paper .editor-preview table,
+.cm-s-paper .editor-preview-side table {
   background-color: #444;
   border: 0;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
 }
-.editor-preview table caption,
-.editor-preview-side table caption {
+.cm-s-paper .editor-preview table caption,
+.cm-s-paper .editor-preview-side table caption {
   caption-side: bottom;
   color: #777;
   padding: 7px;
   text-align: left;
 }
-.editor-preview table th,
-.editor-preview table td,
-.editor-preview-side table th,
-.editor-preview-side table td {
+.cm-s-paper .editor-preview table th,
+.cm-s-paper .editor-preview table td,
+.cm-s-paper .editor-preview-side table th,
+.cm-s-paper .editor-preview-side table td {
   border: 0;
   border-bottom: 1px solid #555;
   padding: 7px;
   text-align: left;
 }
-.editor-preview table th,
-.editor-preview-side table th {
+.cm-s-paper .editor-preview table th,
+.cm-s-paper .editor-preview-side table th {
   background-color: rgba(255, 255, 255, 0.05);
   font-weight: 600;
 }
 
-.editor-preview audio:not([controls]),
-.editor-preview-side audio:not([controls]) {
+.cm-s-paper .editor-preview audio:not([controls]),
+.cm-s-paper .editor-preview-side audio:not([controls]) {
   display: none;
   height: 0;
 }
 
-.editor-preview img,
-.editor-preview-side img {
+.cm-s-paper .editor-preview img,
+.cm-s-paper .editor-preview-side img {
   max-width: 100%;
   vertical-align: middle;
 }
 
-.editor-preview audio,
-.editor-preview video,
-.editor-preview-side audio,
-.editor-preview-side video {
+.cm-s-paper .editor-preview audio,
+.cm-s-paper .editor-preview video,
+.cm-s-paper .editor-preview-side audio,
+.cm-s-paper .editor-preview-side video {
   width: 100%;
 }
 
-.editor-toolbar {
+.cm-s-paper .editor-toolbar {
   background-color: #444;
   border: 1px solid #555;
   border-bottom: 0;
@@ -790,19 +711,19 @@ span.CodeMirror-selectedtext {
   -ms-user-select: none;
   user-select: none;
 }
-.editor-toolbar::before,
-.editor-toolbar::after {
+.cm-s-paper .editor-toolbar::before,
+.cm-s-paper .editor-toolbar::after {
   content: " ";
   display: block;
   height: 1px;
 }
-.editor-toolbar::before {
+.cm-s-paper .editor-toolbar::before {
   margin-bottom: 7px;
 }
-.editor-toolbar::after {
+.cm-s-paper .editor-toolbar::after {
   margin-top: 7px;
 }
-.editor-toolbar a {
+.cm-s-paper .editor-toolbar a {
   border: 1px solid transparent;
   border-radius: 3px;
   color: #777 !important;
@@ -815,15 +736,15 @@ span.CodeMirror-selectedtext {
   text-decoration: none !important;
   width: 30px;
 }
-.editor-toolbar a.active,
-.editor-toolbar a:hover {
+.cm-s-paper .editor-toolbar a.active,
+.cm-s-paper .editor-toolbar a:hover {
   border-color: #555;
   color: #aaa !important;
 }
-.editor-toolbar a::before {
+.cm-s-paper .editor-toolbar a::before {
   line-height: 30px;
 }
-.editor-toolbar a.fa-header-x::after {
+.cm-s-paper .editor-toolbar a.fa-header-x::after {
   bottom: -0.25em;
   font-family: inherit;
   font-size: 80%;
@@ -831,22 +752,22 @@ span.CodeMirror-selectedtext {
   position: relative;
   vertical-align: baseline;
 }
-.editor-toolbar a.fa-header-1::after {
+.cm-s-paper .editor-toolbar a.fa-header-1::after {
   content: "1";
 }
-.editor-toolbar a.fa-header-2::after {
+.cm-s-paper .editor-toolbar a.fa-header-2::after {
   content: "2";
 }
-.editor-toolbar a.fa-header-3::after {
+.cm-s-paper .editor-toolbar a.fa-header-3::after {
   content: "3";
 }
-.editor-toolbar a.fa-header-bigger::after {
+.cm-s-paper .editor-toolbar a.fa-header-bigger::after {
   content: "▲";
 }
-.editor-toolbar a.fa-header-smaller::after {
+.cm-s-paper .editor-toolbar a.fa-header-smaller::after {
   content: "▼";
 }
-.editor-toolbar i.separator {
+.cm-s-paper .editor-toolbar i.separator {
   border-right: 1px solid #555;
   color: transparent;
   display: inline-block;
@@ -854,11 +775,11 @@ span.CodeMirror-selectedtext {
   text-indent: -10px;
   width: 0;
 }
-.editor-toolbar:hover a {
+.cm-s-paper .editor-toolbar:hover a {
   color: #aaa !important;
 }
 
-.editor-toolbar.fullscreen {
+.cm-s-paper .editor-toolbar.fullscreen {
   background-color: #444;
   border: 0;
   box-sizing: border-box;
@@ -874,8 +795,8 @@ span.CodeMirror-selectedtext {
   width: 100%;
   z-index: 9;
 }
-.editor-toolbar.fullscreen::before,
-.editor-toolbar.fullscreen::after {
+.cm-s-paper .editor-toolbar.fullscreen::before,
+.cm-s-paper .editor-toolbar.fullscreen::after {
   height: 58px;
   left: 0;
   margin: 0;
@@ -886,19 +807,19 @@ span.CodeMirror-selectedtext {
 }
 
 @media only screen and (max-width: 700px) {
-  .editor-toolbar a.no-mobile {
+  .cm-s-paper .editor-toolbar a.no-mobile {
     display: none;
   }
 }
 
-.editor-toolbar.disabled-for-preview a:not(.no-disable) {
+.cm-s-paper .editor-toolbar.disabled-for-preview a:not(.no-disable) {
   background-color: #444;
   border-color: transparent;
   pointer-events: none;
   text-shadow: inherit;
 }
 
-.editor-statusbar {
+.cm-s-paper .editor-statusbar {
   color: #777;
   font-family: inherit;
   font-size: 80%;
@@ -906,19 +827,19 @@ span.CodeMirror-selectedtext {
   text-align: right;
 }
 
-.editor-statusbar span {
+.cm-s-paper .editor-statusbar span {
   display: inline-block;
   margin-left: 1em;
 }
 
-.editor-statusbar .lines::before {
+.cm-s-paper .editor-statusbar .lines::before {
   content: "lines: ";
 }
 
-.editor-statusbar .words::before {
+.cm-s-paper .editor-statusbar .words::before {
   content: "words: ";
 }
 
-.editor-statusbar .characters::before {
+.cm-s-paper .editor-statusbar .characters::before {
   content: "characters: ";
 }