//vars
@npmRed: #cc3d33;
@white: #fff;
@entryBg: #F3F3F3;
@mainHeaderHeight: 50px;
@packagesHeaderHeight: 60px;
@headerBorderWidth: 2px;
@smRegistryInfoHeight: 25px;

/*** Main Styles ***/
.body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  margin: 0;
  padding: 0;

  .main-header {
    background: @white;

    .navbar {
      margin-bottom: 0;
    }

    .npm-logo {
      width: 79px;
      height: @mainHeaderHeight;
      // https://example.org/sinopia/-/static/../../-/logo
      background-image: url( ../../-/logo );
      background-repeat: no-repeat;
      background-position: center center;

      >a {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .setup {
      line-height: 1.3em;
      padding-top: 5px;
    }

    .packages-header {
      border-bottom: @headerBorderWidth solid #e6e6e6;

      .search-container {
        top: 9px;

        .search-icon {
          background: #e6e6e6;
        }
      }
    }

    .sm-registry-info {
      height: @smRegistryInfoHeight;
      line-height: 1.7em;
    }
  }

  .content {
    padding-top: 10px;

    .entry {
      .transition(height .3s);
      padding: 9px 10px;
      overflow: hidden;
      border-bottom: 1px solid #E7E7E7;

      &:last-child {
        border-bottom: none;
      }

      &:nth-child( even ) {
        background: @entryBg;
      }

      .title {
        margin: 0 0 5px 10px;
      }

      .description {
        margin: 0 0 0 18px;
        font-size: 13px;
      }

      .name:hover {
        text-decoration: none;
      }

      .name:before {
        margin: 0;
        margin-left: -10px;
        .transformTransition(.2s);
      }

      &.open .name:before {
        .rotate(90deg);
      }

      .version {
        color: #666;
      }

      .author {
        color: #666;
      }

      .readme {
        font-size: 14px;
        margin-top: 10px;
        background: @white;
        padding: 10px 12px;
        .border-radius(3px);
        border: 1px solid darken( @entryBg, 10% );
      }
    }
  }
}

.pkg-search-container {
  display: none;
}

.packages-container {
  .search-ajax {
    display: block;
    margin: 50px auto;
  }
}

.no-results {
  text-align: center;
  margin: 50px 0;
  color: #888;

  big {
    font-size: 38px;
    margin-bottom: 8px;
  }

  code {
    font-size: 1.2em;
  }
}

.red {
  color: @npmRed;
}

.light-red {
  color: lighten( @npmRed, 10% );
}

.white {
  color: @white !important;
}

.red-bg {
  background: @npmRed;
}

.light-red-bg {
  background: lighten( @npmRed, 10% );
}

.no-bg {
  background: none !important;
}

.no-border {
  border: none !important;
}
.no-rnd-cnr {
  .border-radius( 0 );
}

.center {
  text-align: center;
}

.login-btn {
  margin-left: 10px;
  margin-top: 5px;
}

.pad-right-10 {
  padding-right: 10px;
}

.inline-block {
  display: inline-block;
}