theme.less

/*  
  |------------------+
  |    VARIABLES     |
  +------------------|
*/

@background: #1f2c34;
@dark: #2b2b2b;
@grey-dark: #556270;
@grey: #ddd;
@comment: #999999;
@white:#fff;
@white-transparent: rgba( 255, 255, 255, 0.1 );

@green: #c7f464; // color pastel #bbdb93
@red: #f36273;
@red-light: #ff8b94;
@orange: #fdb078;
@blue: #68dfe7;
@blue-sea: #9fedd4;
@yellow:  #ffde52;
@yellow-light: #f7e293;
@magenta: #f565c0;


/*  
  |--------------------+
  |   GLOBAL STYLES    |
  +--------------------|
*/

.CodeMirror, 
.CodeMirror-scroll {
  background-color: @background;
  color: @grey;
}

.CodeMirror-activeline-background, 
.CodeMirror-selected {
  background-color: @white-transparent;
}

.CodeMirror-gutter, 
.CodeMirror-linenumbers {
  background-color: @background;
  color: @grey-dark;
}

.CodeMirror-cursor, .CodeMirror-cursors{
  border-left: 1px solid @grey !important;
}

.cm-comment, 
.cm-m-css.cm-comment {
  color: @comment;
  margin: 0 0 0 5px;
}

.CodeMirror-matchingbracket {
  background-color: @white-transparent;
  color: @yellow !important; 
  text-shadow: 0 0 1px @yellow;
  font-weight: bold;
  padding: 1px;
  border-bottom: 2px solid @orange;
}

/*  
  |------------------------+
  |    GENERALES STYLES    |
  +------------------------|
*/
 
.cm-qualifier {
  color: @red-light;
}

.cm-string,
.cm-number {
  color: @orange;
}

.cm-def,
.cm-meta {
  color: @magenta;
}

.cm-variable-2, 
.cm-variable-1, 
.cm-variable,
.cm-attribute {
  color: @green;
}

.cm-property, 
.cm-keyword {
  color: @blue;
}

.cm-builtin {
  color: @red;
}

.cm-variable-3 {
  color: @blue-sea;
}

/*  
  |------------------+
  |    CSS STYLES    |
  +------------------|
*/


.cm-m-css, 
.cm-m-sass.cm-operator {
  color: @grey;
}

.cm-m-css.cm-builtin {
  color: @red;
}

.cm-m-css.cm-qualifier,
.cm-m-sass.cm-atom {
  color: @red-light !important;
}

.cm-m-css.cm-number,
.cm-m-sass.cm-unit {
  color: @orange;
}

.cm-m-css.cm-variable-2,
.cm-m-css.cm-variable-1,
.cm-m-css.cm-variable,
.cm-m-css.cm-atom,
.cm-m-sass.cm-attribute,
.cm-m-stylus.cm-atom {
  color: @green;
}

.cm-m-css.cm-variable-3,
.cm-m-stylus.cm-variable-3 {
  color: @blue-sea;
}

.cm-m-css.cm-tag,
.cm-m-stylus.cm-tag {
  color: @yellow-light;
}

.cm-m-css.cm-property {
  color: @blue;
}

.cm-m-css.cm-def,
.cm-m-css.cm-meta,
.cm-m-stylus.cm-def,
.cm-m-stylus.cm-meta,
.cm-m-sass.cm-def,
.cm-m-sass.cm-meta{
  font-weight: bold;
  color: @blue-sea;
}

.cm-m-css.cm-keyword, 
.cm-m-css.cm-attribute {
  color: @blue-sea;  
}


/*  
  |------------------+
  |    HTML STYLES   |
  +------------------|
*/


.cm-m-xml.cm-bracket {
  color: @white;
}

.cm-m-xml.cm-tag,
.cm-m-markdown.cm-tag {
  color: @blue;
}

.cm-m-xml.cm-bracket.CodeMirror-matchingtag, 
.cm-m-xml.cm-tag.CodeMirror-matchingtag {
  background-color: @background;
  color: @yellow;
  font-weight: bold;
}

.cm-m-xml.CodeMirror-matchingtag{
  background-color: @background;
}

.cm-m-xml.cm-def,
.cm-m-xml.cm-meta{
  font-weight: bold;
}

.cm-m-markdown.cm-link{
  color: @red-light;
}

.cm-m-markdown.cm-header {
  color: @yellow-light;
}

/*  
  |----------------------+
  |  JAVASCRIPT STYLES   |
  +----------------------|
*/

.cm-m-javascript.cm-keyword {
  color: @green;
}

.cm-m-javascript.cm-property {
  color: @yellow;
}

.cm-m-javascript.cm-variable,
.cm-m-javascript.cm-variable-2,
.cm-m-javascript.cm-variable-3,
.cm-m-javascript.cm-def {
  color: @blue-sea !important;
}

.cm-m-javascript.cm-operator{
  color: @blue;
}

.cm-m-javascript.cm-number {
  color: @red;
}

.cm-m-javascript.cm-atom {
  color: @red-light;
}



/*  
  |----------------------+
  |     PHP STYLES       |
  +----------------------|
*/

.cm-m-clike.cm-operator {
  color: @blue-sea;
}

.cm-m-clike.cm-variable-2 {
  border-bottom: 1px dashed @grey-dark;
}

.cm-m-clike.cm-variable {
  color: @yellow-light;
}

.cm-m-clike.cm-number {
  color: @yellow;
}