// Package README

@import "ui-variables";

.settings-view {

  .package-readme {
    font-size: 1.25em;

    h1 { font-size: 2em;    margin-top: 1.5em; }
    h2 { font-size: 1.75em; margin-top: 1.5em; }
    h3 { font-size: 1.5em;  margin-top: 1.75em; }
    h4 { font-size: 1.25em; margin-top: 1.25em; }
    h1, h2, h3, h4 {
      color: @text-color-highlight;
    }

    a {
      color: @text-color-info;
    }

    hr {
      border-color: @text-color-subtle;
    }

    blockquote {
      border-left-color: @text-color-subtle;
    }

    pre {
      margin-bottom: 1em;
    }

    img {
      max-width: 100%;
    }

    table {
      display: block;
      margin-bottom: 1em;
      width: 100%;
      overflow: auto;
      word-break: normal;

      th {
        font-weight: bold;
        text-align: center;
      }

      th, td {
        padding: 6px 13px;
        border: 1px solid @base-border-color;
      }

      tr {
        border-top: 1px solid @base-border-color;
        background-color: @base-background-color;
        &:nth-child(2n) {
          background-color: @background-color-highlight;
        }
      }
    }

    kbd {
      display: inline-block;
      padding: .3em .4em;
      font-size: .8em;
      line-height: 1;
      color: @text-color-highlight;
      vertical-align: middle;
      background-color: lighten(@base-background-color, 10%);
      border: solid 1px @base-border-color;
      border-bottom-color: darken(@base-border-color, 10%);
      border-radius: @component-border-radius;
      box-shadow: inset 0 -1px 0 darken(@base-border-color, 10%);
    }

  }
}
