index.less

/* Skeletor Syntax 0.4.3
 *
 * https://github.com/ramonmcros/skeletor-syntax
 *
 * Code licensed under the MIT license
 */

@import "styles/syntax-variables";

atom-text-editor,atom-text-editor {
  background-color: @background;
  color: @light-blue;

  .wrap-guide {
    background-color: lighten(@background, 20%);
  }

  .indent-guide {
    color: @comments;
  }

  .invisible-character {
    color: @comments;
  }

  .gutter {
    background-color: @background;
    color: @very-light-gray;

    .line-number {
      &.cursor-line {
        background-color: lighten(@background, 10%);
        color: @white;
      }

      &.cursor-line-no-selection {
        color: @white;
      }
    }
  }

  .gutter .line-number.folded,
  .gutter .line-number:after,
  .fold-marker:after {
    color: @very-light-gray;
  }

  .invisible {
    color: @white;
  }

  .cursor {
    color: @white;
  }

  .line.cursor-line {
    background: lighten(@background, 10%);
  }

  .selection .region {
    background-color: lighten(@background, 10%);
  }
}


atom-text-editor .search-results .syntax--marker .region {
  background-color: transparent;
  border: 1px solid @syntax-result-marker-color;
}

atom-text-editor .search-results .syntax--marker.current-result .region {
  border: 1px solid @syntax-result-marker-color-selected;
}

.syntax--comment,
.syntax--comment.syntax--comment.syntax--block {
  color: @comments;
}

.syntax--entity {
  &.syntax--name {

    &.syntax--tag.syntax--mustache,
    &.syntax--function.syntax--mustache {
      color: @blue-gray;
    }
    &.syntax--type {
      color: @blue;
    }

    &.syntax--function {
      color: @green;

      &.syntax--scss {
        color: @purple;
      }

      &.syntax--ruby {
        color: @purple;
      }
    }
  }

  &.syntax--other.syntax--inherited-class {
    color: @blue-gray;
  }
}

.syntax--keyword {
  color: @purple;

  &.syntax--control,
  &.syntax--operator {
    color: @yellow;
  }

  &.syntax--operator.syntax--less {
    color: @yellow;
  }

  &.syntax--css,
  &.syntax--scss {
    color: @yellow;

    &.syntax--important {
      color: @orchid;
    }

    &.syntax--unit {
      color: @orchid;
    }
  }
  &.syntax--other.syntax--sql {
    color: @orchid;
  }
}

.syntax--storage {
  color: @yellow;

  &.syntax--function {
    color: @purple;
    font-style: italic;
  }

  &.syntax--type.syntax--class {
    color: @green;
  }

  &.syntax--sql,
  &.syntax--jade {
    color: @green;
  }
}

.syntax--constant {
  color: @purple;

  &.syntax--character {
    color: @blue-gray;
  }

  &.syntax--json,
  &.syntax--numeric.syntax--js,
  &.syntax--php {
    color: @orchid;
  }
}

.syntax--variable {
  color: @light-blue;

  &.syntax--parameter, {
    color: @orange;

    &.syntax--css,
    &.syntax--scss {
      color: @green;
    }
  }

  &.syntax--shell {
    color: @purple;
  }
}

.syntax--invalid.syntax--illegal {
  background-color: @purple;
  color: @white;
}

.syntax--string {
  color: @blue;

  .syntax--punctuation .syntax--source.syntax--ruby {
    color: @blue-gray;
  }

  &.syntax--regexp {
    color: @blue;

    .syntax--source.syntax--ruby.syntax--embedded {
      color: @green;
    }
  }

  &.syntax--css,
  &.syntax--scss {
    color: @light-blue;
  }

  &.syntax--other.syntax--link {
    color: @red;
  }
}

.syntax--punctuation {
  &.syntax--definition {
    &.syntax--comment {
      color: @comments;
    }

    &.syntax--parameters,
    &.syntax--array {
      color: @light-blue;
    }

    &.syntax--heading,
    &.syntax--identity {
      color: @blue;
    }

    &.syntax--bold {
      color: @blue-gray;
      font-weight: bold;
    }

    &.syntax--italic {
      color: @purple;
      font-style: italic;
    }
  }

  &.syntax--expression.syntax--php {
    color: @light-blue;
  }

  &.syntax--section.syntax--embedded {
    color: @blue-gray;
  }

  &.syntax--ts {
    &.syntax--accessor,
    &.syntax--terminator,
    &.syntax--block {
      color: @white;
    }
  }
}

.syntax--ts {
  &.syntax--object-literal {
    .syntax--separator {
      color: @yellow;
    }
  }
}

.syntax--meta.syntax--brace.syntax--round.syntax--ts {
  color: @white;
}

.syntax--support {
  &.syntax--function  {
    color: @blue;

    &.syntax--sql {
      color: @green;
    }

    &.syntax--js,
    &.syntax--scss {
      color: @purple;
    }
  }

  &.syntax--ruby {
    color: @orchid;
  }

  &.syntax--php {
    color: @green;
  }
}

.syntax--entity {
  &.syntax--name.syntax--class, &.syntax--name.syntax--type.syntax--class {
    color: @yellow;

    &.syntax--ruby {
      color: @green;
    }
  }

  &.syntax--name.syntax--section {
    color: @blue;
  }

  &.syntax--name.syntax--tag {
    color: @yellow;
  }

  &.syntax--other.syntax--attribute-name {
    color: @purple;

    &.syntax--id {
      color: @purple;
    }
  }
}

.syntax--meta {
  &.syntax--class {
    color: @purple;
  }

  &.syntax--link {
    color: @green;
  }

  &.syntax--require {
    color: @blue;
  }

  &.syntax--selector {
    color: @light-blue;
  }

  &.syntax--separator {
    background-color: @blue-gray;
    color: @light-blue;
  }
}

.syntax--none {
  color: @white;
}

.syntax--property-name.syntax--scss {
  color: @blue;
}

.syntax--entity.syntax--name.syntax--tag.syntax--reference.syntax--scss {
  color: @yellow;
}

.syntax--markup {
  &.syntax--bold {
    color: @blue-gray;
    font-weight: bold;
  }

  &.syntax--changed {
    color: @purple;
  }

  &.syntax--deleted {
    color: @red;
  }

  &.syntax--italic {
    color: @orchid;
    font-style: italic;
  }

  &.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
    color: @blue;
  }

  &.syntax--inserted {
    color: @blue-gray;
  }

  &.syntax--list {
    color: @blue;
  }

  &.syntax--quote {
    color: @green;
  }

  &.syntax--raw.syntax--inline {
    color: @blue-gray;
  }

  &.syntax--heading {
       position: relative;

       &.syntax--heading-1 {
           font-size: 135%;
           bottom: 0.35em;
           opacity: 1.0;
       }

       &.syntax--heading-2 {
           font-size: 125%;
           bottom: 0.25em;
           opacity: 0.95;
       }

       &.syntax--heading-3 {
           font-size: 115%;
           bottom: 0.15em;
           opacity: 0.90;
       }

       &.syntax--heading-4,
       &.syntax--heading-5,
       &.syntax--heading-6 {
           font-size: 105%;
           bottom: 0.05em;
           opacity: 0.85;
       }
   }
}

//create space for H1 at top of document
atom-text-editor[data-grammar="source gfm"]:not(.mini),
atom-text-editor[data-grammar="source gfm"]:not(.mini).editor {

  .gutter,
  .scroll-view {
    padding-top: 0.75em;

    .line-number-0 {
      padding-top: 0.75em;
      top: -0.75em !important; //overrule inline style
      }
   }
}

.syntax--property-name.syntax--css {
  color: @blue;
}

.syntax--source.syntax--gfm .syntax--markup {
  -webkit-font-smoothing: auto;
}

.syntax--heading.syntax--gfm {
  color: @purple;
}

.syntax--list.syntax--gfm {
  color: @blue;
}

.syntax--comment.syntax--quote.syntax--gfm {
  color: @light-blue;
}

.syntax--support.syntax--quote.syntax--gfm {
  color: @blue-gray;
  background: @blue-gray;
}

.syntax--mention.syntax--gfm,
.syntax--username.syntax--gfm {
  color: @orchid;
}

.syntax--entity.syntax--gfm {
  color: @yellow;
}

.syntax--link.syntax--gfm {
  color: @blue;

  .syntax--punctuation.syntax--gfm {
    color: @light-blue;
  }
}

.syntax--table.syntax--gfm {
  .syntax--border {
    color: @blue;
  }
}

.syntax--strike.syntax--gfm {
  color: @red;
  text-decoration: line-through;
}

.syntax--raw.syntax--gfm ,
.syntax--code.syntax--gfm {
  color: @green;

  .syntax--source {
    color: @light-blue;

    .syntax--support.syntax--gfm {
      color: @green;
    }
  }
}

.syntax--code.syntax--gfm .syntax--link {
  color: @blue;
}

.syntax--critic {
  &.syntax--addition {
    color: @green;
  }
  &.syntax--deletion {
    color: @red;
  }
  &.syntax--substitution {
    color: @orange;
  }
  &.syntax--highlight {
    color: @yellow;
  }
}

.syntax--entity.syntax--name.syntax--tag.syntax--yaml {
  color: @purple;
}

.syntax--json {

	.syntax--structure.syntax--dictionary {

    .syntax--string.syntax--quoted.syntax--double {
		  color: @blue;
    }

    .syntax--punctuation.syntax--definition.syntax--string {
      color: @purple;
    }
  }

	.syntax--structure.syntax--dictionary.syntax--value > .syntax--string.syntax--quoted.syntax--double {
    color: @light-blue;
  }
}

.syntax--punctuation.syntax--definition.syntax--entry.syntax--yaml {
  color: @yellow;
}

.syntax--punctuation.syntax--separator.syntax--key-value.syntax--yaml {
  color: @light-blue;
}

.syntax--constant.syntax--numeric.syntax--yaml {
  color: @orchid;
}

.syntax--variable.syntax--other.syntax--instance.syntax--ruby {
  color: @orange;

  .syntax--punctuation {
    color: @orange;
  }
}

.syntax--punctuation.syntax--tag.syntax--liquid,
.syntax--punctuation.syntax--output.syntax--liquid {
  color: @blue-gray;
}

.syntax--entity.syntax--name.syntax--tag.syntax--liquid {
  color: @green;
}

.syntax--support.syntax--class.syntax--liquid {
  color: @light-blue;
}

.syntax--constant.syntax--numeric.syntax--liquid {
  color: @orchid;
}

.syntax--support.syntax--function.syntax--liquid {
  color: @purple;
}

// Requires language-jade package https://atom.io/packages/language-jade

.syntax--entity.syntax--other.syntax--attribute-name.syntax--id.syntax--jade {
  color: @blue-gray;
}

.syntax--meta.syntax--control.syntax--flow.syntax--jade .syntax--storage.syntax--function.syntax--type.syntax--jade {
  font-style: normal;
}

// Requires processing-language package: https://atom.io/packages/processing-language
.syntax--entity.syntax--name.syntax--function.syntax--processing {
  color: @purple;
}

.syntax--constant.syntax--numeric.syntax--processing {
  color: @orchid;
}

.syntax--entity.syntax--other.syntax--attribute-name.syntax--id.syntax--css {
  color: @blue-gray;
}


.syntax--constant.syntax--character.syntax--escape.syntax--scss,
.syntax--interpolation.syntax--scss {
  color: @green;
}

.syntax--string.syntax--scss {
  color: @blue;
}

.syntax--entity.syntax--other.syntax--attribute-name.syntax--pseudo-class.syntax--css {
  color: @purple	
}

atom-text-editor[mini] .scroll-view,
atom-text-editor([mini]) .scroll-view {
  padding-left: 1px;
}