documize/gui/app/styles/core/section/code.scss

.section-code-editor {
	margin-top: 6px;

	> .syntax-selector {
		margin-bottom: 15px;
	}
}

/* BASICS */

.CodeMirror {
	/* Set height, width, borders, and global font properties here */
	font-family: monospace;
	height: 300px;
	color: black;
	direction: ltr;
  }

  /* PADDING */

  .CodeMirror-lines {
	padding: 4px 0; /* Vertical padding around content */
  }
  .CodeMirror pre {
	padding: 0 4px; /* Horizontal padding of content */
  }

  .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
	background-color: white; /* The little square between H and V scrollbars */
  }

  /* GUTTER */

  .CodeMirror-gutters {
	border-right: 1px solid #ddd;
	background-color: #f7f7f7;
	white-space: nowrap;
  }
  .CodeMirror-linenumbers {}
  .CodeMirror-linenumber {
	padding: 0 3px 0 5px;
	min-width: 20px;
	text-align: right;
	color: #999;
	white-space: nowrap;
  }

  .CodeMirror-guttermarker { color: black; }
  .CodeMirror-guttermarker-subtle { color: #999; }

  /* CURSOR */

  .CodeMirror-cursor {
	border-left: 1px solid black;
	border-right: none;
	width: 0;
  }
  /* Shown when moving in bi-directional text */
  .CodeMirror div.CodeMirror-secondarycursor {
	border-left: 1px solid silver;
  }
  .cm-fat-cursor .CodeMirror-cursor {
	width: auto;
	border: 0 !important;
	background: #7e7;
  }
  .cm-fat-cursor div.CodeMirror-cursors {
	z-index: 1;
  }
  .cm-fat-cursor-mark {
	background-color: rgba(20, 255, 20, 0.5);
	-webkit-animation: blink 1.06s steps(1) infinite;
	-moz-animation: blink 1.06s steps(1) infinite;
	animation: blink 1.06s steps(1) infinite;
  }
  .cm-animate-fat-cursor {
	width: auto;
	border: 0;
	-webkit-animation: blink 1.06s steps(1) infinite;
	-moz-animation: blink 1.06s steps(1) infinite;
	animation: blink 1.06s steps(1) infinite;
	background-color: #7e7;
  }
  @-moz-keyframes blink {
	0% {}
	50% { background-color: transparent; }
	100% {}
  }
  @-webkit-keyframes blink {
	0% {}
	50% { background-color: transparent; }
	100% {}
  }
  @keyframes blink {
	0% {}
	50% { background-color: transparent; }
	100% {}
  }

  /* Can style cursor different in overwrite (non-insert) mode */
  .CodeMirror-overwrite .CodeMirror-cursor {}

  .cm-tab { display: inline-block; text-decoration: inherit; }

  .CodeMirror-rulers {
	position: absolute;
	left: 0; right: 0; top: -50px; bottom: -20px;
	overflow: hidden;
  }
  .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 {color: #d44;}
  .cm-positive {color: #292;}
  .cm-header, .cm-strong {font-weight: bold;}
  .cm-em {font-style: italic;}
  .cm-link {text-decoration: underline;}
  .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,
  .cm-s-default .cm-punctuation,
  .cm-s-default .cm-property,
  .cm-s-default .cm-operator {}
  .cm-s-default .cm-variable-2 {color: #05a;}
  .cm-s-default .cm-variable-3, .cm-s-default .cm-type {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 {color: #f00;}

  .CodeMirror-composing { border-bottom: 2px solid; }

  /* Default styles for common addons */

  div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
  div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
  .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
  .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 {
	position: relative;
	overflow: hidden;
	background: white;
  }

  .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 */
	/* See overflow: hidden in .CodeMirror */
	margin-bottom: -30px; margin-right: -30px;
	padding-bottom: 30px;
	height: 100%;
	outline: none; /* Prevent dragging from highlighting the element */
	position: relative;
  }
  .CodeMirror-sizer {
	position: relative;
	border-right: 30px solid transparent;
  }

  /* 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 {
	position: absolute;
	z-index: 6;
	display: none;
  }
  .CodeMirror-vscrollbar {
	right: 0; top: 0;
	overflow-x: hidden;
	overflow-y: scroll;
  }
  .CodeMirror-hscrollbar {
	bottom: 0; left: 0;
	overflow-y: hidden;
	overflow-x: scroll;
  }
  .CodeMirror-scrollbar-filler {
	right: 0; bottom: 0;
  }
  .CodeMirror-gutter-filler {
	left: 0; bottom: 0;
  }

  .CodeMirror-gutters {
	position: absolute; left: 0; top: 0;
	min-height: 100%;
	z-index: 3;
  }
  .CodeMirror-gutter {
	white-space: normal;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: -30px;
  }
  .CodeMirror-gutter-wrapper {
	position: absolute;
	z-index: 4;
	background: none !important;
	border: none !important;
  }
  .CodeMirror-gutter-background {
	position: absolute;
	top: 0; bottom: 0;
	z-index: 4;
  }
  .CodeMirror-gutter-elt {
	position: absolute;
	cursor: default;
	z-index: 4;
  }
  .CodeMirror-gutter-wrapper ::selection { background-color: transparent }
  .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

  .CodeMirror-lines {
	cursor: text;
	min-height: 1px; /* prevents collapsing before first draw */
  }
  .CodeMirror pre {
	/* Reset some styles that the rest of the page might have set */
	-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
	border-width: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	line-height: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-variant-ligatures: contextual;
	font-variant-ligatures: contextual;
  }
  .CodeMirror-wrap pre {
	word-wrap: break-word;
	white-space: pre-wrap;
  word-break: normal;
  font-size: 1rem;
  font-family: monospace, 'Courier New', Courier;
  }

  .CodeMirror-linebackground {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	z-index: 0;
  }

  .CodeMirror-linewidget {
	position: relative;
	z-index: 2;
	padding: 0.1px; /* Force widget margins to stay inside of the container */
  }

  .CodeMirror-widget {}

  .CodeMirror-rtl pre { direction: rtl; }

  .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 {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
  }

  .CodeMirror-measure {
	position: absolute;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden;
  }

  .CodeMirror-cursor {
	position: absolute;
	pointer-events: none;
  }
  .CodeMirror-measure pre { position: static; }

  div.CodeMirror-cursors {
	visibility: hidden;
	position: relative;
	z-index: 3;
  }
  div.CodeMirror-dragcursors {
	visibility: visible;
  }

  .CodeMirror-focused div.CodeMirror-cursors {
	visibility: visible;
  }

  .CodeMirror-selected { background: #d9d9d9; }
  .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
  .CodeMirror-crosshair { cursor: crosshair; }
  .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
  .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

  .cm-searching {
	background-color: #ffa;
	background-color: rgba(255, 255, 0, .4);
  }

  /* Used to force a border model for a node */
  .cm-force-border { padding-right: .1px; }

  @media print {
	/* Hide the cursor when printing */
	.CodeMirror div.CodeMirror-cursors {
	  visibility: hidden;
	}
  }

  /* See issue #2901 */
  .cm-tab-wrap-hack:after { content: ''; }

  /* Help users use markselection to safely style text background */
  span.CodeMirror-selectedtext { background: none; }



/*

    Name:       material
    Author:     Michael Kaminsky (http://github.com/mkaminsky11)

    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)

*/

.cm-s-material.CodeMirror {
	background-color: #263238;
	color: rgba(233, 237, 237, 1);
  }
  .cm-s-material .CodeMirror-gutters {
	background: #263238;
	color: rgb(83,127,126);
	border: none;
  }
  .cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
  .cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
  .cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
  .cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
  .cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
  .cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }

  .cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
  .cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
  .cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
  .cm-s-material .cm-variable-2 { color: #80CBC4; }
  .cm-s-material .cm-variable-3 { color: #82B1FF; }
  .cm-s-material .cm-builtin { color: #DECB6B; }
  .cm-s-material .cm-atom { color: #F77669; }
  .cm-s-material .cm-number { color: #F77669; }
  .cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
  .cm-s-material .cm-string { color: #C3E88D; }
  .cm-s-material .cm-string-2 { color: #80CBC4; }
  .cm-s-material .cm-comment { color: #546E7A; }
  .cm-s-material .cm-variable { color: #82B1FF; }
  .cm-s-material .cm-tag { color: #80CBC4; }
  .cm-s-material .cm-meta { color: #80CBC4; }
  .cm-s-material .cm-attribute { color: #FFCB6B; }
  .cm-s-material .cm-property { color: #80CBAE; }
  .cm-s-material .cm-qualifier { color: #DECB6B; }
  .cm-s-material .cm-variable-3 { color: #DECB6B; }
  .cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
  .cm-s-material .cm-error {
	color: rgba(255, 255, 255, 1.0);
	background-color: #EC5F67;
  }
  .cm-s-material .CodeMirror-matchingbracket {
	text-decoration: underline;
	color: white !important;
  }


  /*

	  Name:       yeti
	  Author:     Michael Kaminsky (http://github.com/mkaminsky11)

	  Original yeti color scheme by Jesse Weed (https://github.com/jesseweed/yeti-syntax)

  */


  .cm-s-yeti.CodeMirror {
	background-color: #ECEAE8 !important;
	color: #d1c9c0 !important;
	border: none;
  }

  .cm-s-yeti .CodeMirror-gutters {
	color: #adaba6;
	background-color: #E5E1DB;
	border: none;
  }
  .cm-s-yeti .CodeMirror-cursor { border-left: solid thin #d1c9c0; }
  .cm-s-yeti .CodeMirror-linenumber { color: #adaba6; }
  .cm-s-yeti.CodeMirror-focused div.CodeMirror-selected { background: #DCD8D2; }
  .cm-s-yeti .CodeMirror-line::selection, .cm-s-yeti .CodeMirror-line > span::selection, .cm-s-yeti .CodeMirror-line > span > span::selection { background: #DCD8D2; }
  .cm-s-yeti .CodeMirror-line::-moz-selection, .cm-s-yeti .CodeMirror-line > span::-moz-selection, .cm-s-yeti .CodeMirror-line > span > span::-moz-selection { background: #DCD8D2; }
  .cm-s-yeti span.cm-comment { color: #d4c8be; }
  .cm-s-yeti span.cm-string, .cm-s-yeti span.cm-string-2 { color: #96c0d8; }
  .cm-s-yeti span.cm-number { color: #a074c4; }
  .cm-s-yeti span.cm-variable { color: #55b5db; }
  .cm-s-yeti span.cm-variable-2 { color: #a074c4; }
  .cm-s-yeti span.cm-def { color: #55b5db; }
  .cm-s-yeti span.cm-operator { color: #9fb96e; }
  .cm-s-yeti span.cm-keyword { color: #9fb96e; }
  .cm-s-yeti span.cm-atom { color: #a074c4; }
  .cm-s-yeti span.cm-meta { color: #96c0d8; }
  .cm-s-yeti span.cm-tag { color: #96c0d8; }
  .cm-s-yeti span.cm-attribute { color: #9fb96e; }
  .cm-s-yeti span.cm-qualifier { color: #96c0d8; }
  .cm-s-yeti span.cm-property { color: #a074c4; }
  .cm-s-yeti span.cm-builtin { color: #a074c4; }
  .cm-s-yeti span.cm-variable-3 { color: #96c0d8; }
  .cm-s-yeti .CodeMirror-activeline-background { background: #E7E4E0; }
  .cm-s-yeti .CodeMirror-matchingbracket { text-decoration: underline; }

/*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/

/*
Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/

.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3  { color: #fdf6e3; }
.solarized.solar-yellow  { color: #b58900; }
.solarized.solar-orange  { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet  { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }

/* Color scheme for code-mirror */

.cm-s-solarized {
  line-height: 1.45em;
  color-profile: sRGB;
  rendering-intent: auto;
}
.cm-s-solarized.cm-s-dark {
  color: #839496;
  background-color: #002b36;
  text-shadow: #002b36 0 1px;
}
.cm-s-solarized.cm-s-light {
  background-color: #fdf6e3;
  color: #657b83;
  text-shadow: #eee8d5 0 1px;
}

.cm-s-solarized .CodeMirror-widget {
  text-shadow: none;
}

.cm-s-solarized .cm-header { color: #586e75; }
.cm-s-solarized .cm-quote { color: #93a1a1; }

.cm-s-solarized .cm-keyword { color: #cb4b16; }
.cm-s-solarized .cm-atom { color: #d33682; }
.cm-s-solarized .cm-number { color: #d33682; }
.cm-s-solarized .cm-def { color: #2aa198; }

.cm-s-solarized .cm-variable { color: #839496; }
.cm-s-solarized .cm-variable-2 { color: #b58900; }
.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; }

.cm-s-solarized .cm-property { color: #2aa198; }
.cm-s-solarized .cm-operator { color: #6c71c4; }

.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }

.cm-s-solarized .cm-string { color: #859900; }
.cm-s-solarized .cm-string-2 { color: #b58900; }

.cm-s-solarized .cm-meta { color: #859900; }
.cm-s-solarized .cm-qualifier { color: #b58900; }
.cm-s-solarized .cm-builtin { color: #d33682; }
.cm-s-solarized .cm-bracket { color: #cb4b16; }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-solarized .cm-tag { color: #93a1a1; }
.cm-s-solarized .cm-attribute { color: #2aa198; }
.cm-s-solarized .cm-hr {
  color: transparent;
  border-top: 1px solid #586e75;
  display: block;
}
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; }
.cm-s-solarized .cm-em {
  color: #999;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar {
  color: #586e75;
  border-bottom: 1px dotted #dc322f;
}

.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }
.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }

.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }

/* Editor styling */



/* Little shadow on the view-port of the buffer view */
.cm-s-solarized.CodeMirror {
  -moz-box-shadow: inset 7px 0 12px -6px #000;
  -webkit-box-shadow: inset 7px 0 12px -6px #000;
  box-shadow: inset 7px 0 12px -6px #000;
}

/* Remove gutter border */
.cm-s-solarized .CodeMirror-gutters {
  border-right: 0;
}

/* Gutter colors and line number styling based of color scheme (dark / light) */

/* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: #073642;
}

.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  color: #586e75;
  text-shadow: #021014 0 -1px;
}

/* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
  background-color: #eee8d5;
}

.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
  color: #839496;
}

/* Common */
.cm-s-solarized .CodeMirror-linenumber {
  padding: 0 5px;
}
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }

.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}

/* Cursor */
.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }

/* Fat cursor */
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }

/* Active line */
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.06);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.06);
}