@import syntax
@import code

$light-highlight = #f4f4f4
$med-highlight =  #2980b9
$dark-highlight = #2980b9

.details
  color: #444
  font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
  font-size: 15px
  line-height: 1.7em

  .beta
    line-height: 1.9em

  abbr
    cursor: help

  header
    background-color: $light-highlight
    margin: 0 -20px
    padding: 0.5em 0 2em 0

    h1
    aside
      color: $dark-highlight
      margin-top: 20px
      margin-bottom: 0px

    h1
      line-height: 1em
      font-size: 36px

    aside

      a
        font-weight: normal
        color: $dark-highlight

        &:hover
          color: $dark-highlight
          text-decoration: none

    small
      font-size: 14px
      line-height: 1.25em
      display: block
      font-weight: normal
      color: $dark-highlight

      &:first-child
        margin-top: 8px

    .shift
      font-size: 22px
      float: left
      margin: 2px 5px 0 0

    .part
      border-right: 1px solid #999
      margin-left: 8px
      padding-right: @margin-left
      padding-top: 5px
      float: left

      &:first-child
        margin-left: 0
        padding-top: 0
        padding-bottom: 5px

      &:last-child
        border-right: 0px solid #999

    strong
      background-color: $dark-highlight
      border-radius: 2px
      color: white
      float: left
      font-size: 22px
      margin-top: 5px
      padding: 0 5px
      margin-right: 5px

  aside
    color: $med-highlight

    a
      font-weight: normal
      color: @color

      &:hover
        color: @color
        text-decoration: none

  a:hover
    color: #4183C4
    text-decoration: underline

  .properties
    padding: 4em 0
    min-height: 240px

    .name a
      color: #333

  h2
    color: $med-highlight

    s
      float: left
      margin: 3px 10px 0 0

    small
      text-align: right
      min-width: 60px

  .show-all
    color: $med-highlight
    font-size: 15px
    border-bottom: 1px solid @color

    &:hover
      color: @color
      text-decoration: none

  td.type
    font-size: 11px
    text-transform: uppercase
    padding: 1px 0
    width: 32px

  s.status
    height: 12px
    width: 12px
    background: #1bb985
    background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 100%)
    border: 1px solid darken(@background, 20%)
    border-radius: 2px
    display: inline-block

    &.missing
      background: #ca0b00
      background-image: linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 100%)
      border: 1px solid darken(@background, 20%)

  .dependencies
  .maintainers
    p
      color: #999

  .maintainer
    overflow: hidden
    margin: 15px 0

    strong
      display: inline-block
      margin-top: 10px

  .gravatar
    background-repeat: no-repeat
    background-size: cover
    border-radius: 100px
    float: left
    font-weight: bold
    height: 50px
    line-height: @height
    margin: 0 25px 0 0
    text-indent: @height + 20
    width: @height

  table
    border-collapse: collapse
    border-spacing: 0
    color: #999

    td
      color: #333
      padding: 2px 4px
      border: none
      white-space: nowrap
      overflow: hidden

    .version
      text-overflow: ellipsis
      max-width: 50px

    .license
      text-overflow: ellipsis
      max-width: 90px
      text-align: right

  .downloads .graph
    height: 150px
    margin-bottom: 30px

    .sparklet .x-axis .tick text
      color: #333

    .sparklet .chart-tooltip
      background: #333
      color: #FFF

      &:after
        border-top-color: #333

.utility
  margin-top: 1em

  h3
    font-size: 16px
    text-align: right
    color: $dark-highlight
    padding: 10px 0

  pre
    font-size: 12px
    background-color: #666
    color: white
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace
    border-radius: 5px
    padding: 10px

  h3
  pre
    margin-top: 15px
    margin-bottom: 15px

.readme
  background-color: $light-highlight
  margin: 0 -20px

//
// Custom markdown code that shouldn't affect the rest of page.
//
.markdown
  color: #444
  font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
  font-size: 15px
  line-height: 1.7
  position: relative

  .icon
    color: $dark-highlight
    display: block
    margin-top: 24px

    s
      font-size: 48px

    h3
      display: inline-block

  a
    color: #4183C4
    text-decoration: none

    &:hover
      text-decoration: underline

  h1,
  h2,
  h3,
  h3,
  h4,
  h5,
  h6
    margin: 1em 0 15px
    padding: 0
    font-weight: bold
    line-height: 1.7
    cursor: text
    position: relative

  h1
    border-bottom: 1px solid #666
    font-size: 2.5em

  h2
    font-size: 2em
    border-bottom: 1px solid #EEE

  h3
    font-size: 1.5em

  h3[id]
    color: #444

  h4
    font-size: 1.2em

  h5
    font-size: 1em

  h6
    font-size: 1em
    color: #777

  ul,
  ol
    margin: 0
    padding: 0 0 0 30px

  p,
  ul,
  ol,
  dl,
  table,
  blockquote
    margin: 15px 0

  ul ul,
  ul ol,
  ol ol,
  ol ul
    margin-top: 0
    margin-bottom: 0

  code
  pre
  kbd
  samp
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace

  code
    background-color: #FAFAFA
    border-radius: 3px
    border: 1px solid #DDD
    display: inline-block
    line-height: 1.3
    margin: 0
    font-size: 12px
    max-width: 100%
    overflow: auto
    padding: 0
    vertical-align: middle

    &:before
    &:after
      content: "\00a0"  // Extra spacing

  table:not(.rendermetable)
    border-collapse: collapse
    border-spacing: 0

    tr
      background-color: #FFF
      border-top: 1px solid #CCC

      &:nth-child(2n)
        background-color: #F8F8F8

    td,
    th
      border: 1px solid #DDD
      padding: 6px 13px

  dl
    padding: 0

    dt
      font-size: 14px
      font-style: italic
      font-weight: bold
      margin-top: 15px
      padding: 0

    dd
      margin-bottom: 15px
      margin-left: 0
      padding: 0 15px

  blockquote
    border-left: 4px solid #DDD
    padding: 0 15px
    color: #777

    &>:last-child
      margin-bottom: 0px

    &>:first-child
      margin-top: 0px

  pre code
    width: 100%
    background: #FFF
    border-radius: 0
    padding: 12px
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;

    &:before
    &:after
      content: ''

  img
    max-width: 100%