@import "../common/global/miscellaneous";
@import "../common/global/variables";

//左侧菜单
.document-index-read-frame {

  padding: 10px 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .global-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    li {
      padding: 5px 15px;
      a {
        font-size: 16px;
        color: black;
        font-weight: bold;
        &:hover {
          color: @brand-primary;
        }
      }

    }
  }

  .index-block {
    margin-left: 14px;

    .line {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      padding: 5px 10px 5px 15px;

      font-size: 14px;
      color: #444;
      cursor: pointer;

      .fa {
        width: 8px;
        color: #aaa;

      }
      &.fat {
        color: #000;
      }

      .title-span {
        color: #222;
        &:hover {
          color: #777;
        }
      }

      &.placeholder {
        .title-span {
          border-bottom: 1px dashed red;
        }
      }
      &.active {
        color: @brand-primary;
        font-weight: bold;
      }

      &:hover {
        color: #777;
      }

    }
  }

  //第一层级不缩进
  > .index-block {
    margin-left: 0;
    //第一级粗体

    > .line {
      > .title-span {
        font-weight: bold;
      }
    }

  }

}

.page-document-read {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  @upper-height: 50px;
  @left-width: 280px;
  justify-content: space-between;

  .upper-part {
    height: @upper-height;
    line-height: @upper-height;
    background-color: white;
    border-bottom: 1px solid #eee;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .logo-title {
      .logo-a {
        margin: 0 15px;
        display: inline-block;
        .logo {
          width: @upper-height;
          height: @upper-height;
        }
      }

      .title {
        font-size: 18px;
        color: #222;
        font-weight: bold;
        &:hover {
          color: #777;
        }
      }
    }
    .preference-navi {
      padding-right: 30px;
      a {

        display: inline-block;
        line-height: @upper-height;
        height: @upper-height;
        font-size: 16px;
        color: #555;
        margin-left: 15px;

        &:hover {
          color: @brand-primary;
          border-bottom: 2px solid @brand-primary;
        }
      }
    }

  }

  .middle-part {
    flex: 1;

    position: relative;

    .left-part {

      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;

      width: @left-width;
      background-color: #fafafa;
      border-right: 1px solid #eee;
      z-index: 200;

      //大屏幕
      @media (min-width: @screen-md-min) {
        left: 0;
      }
      //小屏幕
      @media (max-width: @screen-md-min) {
        left: -@left-width;
      }

      &.show-drawer {

        //大屏幕
        @media (min-width: @screen-md-min) {
          left: 0;
        }
        //小屏幕
        @media (max-width: @screen-md-min) {
          left: 0;
        }
      }

    }
    .right-part {

      position: absolute;
      top: 0;
      left: @left-width;
      right: 0;
      bottom: 0;

      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;

      height: 100%;
      background-color: white;
      overflow-x: hidden;
      overflow-y: auto;

      padding: 20px;
      z-index: 100;

      //大屏幕
      @media (min-width: @screen-md-min) {
        left: @left-width;
      }
      //小屏幕
      @media (max-width: @screen-md-min) {
        left: 0;
      }

    }

  }

}
