/*!
 * Name: VueWPress
 * Author: Darlang
 * Version: 0.2
 * Licese: MIT;
 * Link: https://www.darlang.com
 * Github: https://github.com/crlang/vuewpress
*/

/*-----------------------------------------------------------------------
---------------------------- init definition ----------------------------
-----------------------------------------------------------------------*/

/*!
 *
 * 层级定义：
 *    pop：交互层，最大层级，用户交互
 *    msk: 蒙版层，用于导航及内容层上级遮罩，低于交互层
 *    nav: 定位层，固定某个部件，位于内容层上方，用于导航，返回顶部等
 *    con: 内容层，普通内容层级，默认层级
 *
 */
$z-pop: 1003;
$z-msk: 1001;
$z-fix:  999;
$z-lod:  997;

/*!
 *
 * 颜色定义
 *--网站色
 *    主色：#1e90ff
 *    辅色：#a4b0be
 *    反色：#ff6348
 *--情景色
 * 危险： #c0392b => #e74c3c
 * 警告： #d35400 => #e67e22
 * 一般： #7f8c8d => #95a5a6
 * 安全： #27ae6d => #2ecc71
 *
 */
$MC:  #0984e3;
$MCN: #00cec9;
$AC:  #a4b0be;
$UMC: #ff6348;
$dangM: #c0392b;
$dangN: #e74c3c;
$wranM: #d35400;
$wranN: #e67e22;
$infoM: #7f8c8d;
$infoN: #95a5a6;
$succM: #27ae6d;
$succN: #2ecc71;

/*-----------------------------------------------------------------------
----------------------------- Global  Style -----------------------------
-----------------------------------------------------------------------*/

#app {
  padding: 2.5rem 0 3.4375rem 0;
}

.wrap {
  max-width: 48rem;
  padding: 0 0.9375rem;
  margin: auto;
}

.fixed-header,
.fixed-footer {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  z-index: $z-fix;
}

/* header */
.fixed-header {
  top: 0;
  .top-bar {
    background: linear-gradient(120deg,$MC 0,$MCN 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    .pg-back {
      padding: 0.5rem 0.75rem;
    }
    .pg-title {
      width: calc(100% - 5rem);
      padding: 0.5rem 0;
      font-weight: 300;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .pg-nav {
      padding: 0.5rem 0.75rem;
    }
  }
  .pg-nav-content {
    position: absolute;
    right: 0;
    min-width: 7.5rem;
    opacity: 0;
    transform: translateY(50%);
    transition: all 0.25s linear;
    &.show {
      opacity: 1;
      transform: translateY(0);
    }
    .weui-cells {
      margin-top: 0;
      border: 1px solid #eee;
      .weui-cell:before {
        left: 0.3125rem;
        right: 0.3125rem;
      }
    }
  }
}

/* footer */
.fixed-footer {
  bottom: 0;
}
/* footer nav */
.fixed-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $z-fix;
  background: #fff;
  padding: 10px;
  border-top: 1px solid #eee;
  > ul {
    display: flex;
    text-align: center;
    > li {
      width: 100%;
    }
  }
}

/*-----------------------------------------------------------------------
------------------------------ Home  Style ------------------------------
-----------------------------------------------------------------------*/
.articles {
  .articles-nav {
    margin: 0 0 0.625rem;
    padding: 0;
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      &::-webkit-scrollbar {
        display: none;
      }
      margin: auto -0.9375rem;
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      li {
        display: inline-block;
        padding: 0.875rem 0.625rem;
        color: #888;
        cursor: pointer;
        &.active {
          color: $MC;
          border-bottom: 1px solid $MC;
        }
      }
    }
  }
  .articles-list {
    padding: 1.25rem 0;
    ul {
      li {
        display: flex;
        padding-bottom: 0.9375rem;
        margin-bottom: 0.9375rem;
        border-bottom: 1px solid #eee;
        .img-prev {
          width: 10rem;
          height: 7.5rem;
          background-size: cover;
          background-position: center center;
          border-radius: 0.3125rem;
          border: 1px solid #eee;
        }
        .cont-prev {
          width: calc(100% - 10.9375rem);
          margin-right: 0.9375rem;
          .title {
            font-size: 1rem;
            font-weight: bold;
            color: #222;
            margin-bottom: 0.9375rem;
          }
          .desc{
            font-size: 0.75rem;
            font-weight: lighter;
            color: #888;
            margin-bottom: 0.9375rem;
            a.more-link {
              display: none;
            }
          }
          .time{
            font-size: 0.75rem;
            color: #999;
          }
        }
      }
    }
  }
}

/* home categories */
.home-categories {
  margin: 0.625rem 0;
  ul {
    display: flex;
    margin: auto -0.9375rem;
    li {
      width: 25%;
      text-align: center;
    }
  }
}

/*-----------------------------------------------------------------------
----------------------------- article Style -----------------------------
-----------------------------------------------------------------------*/
.article {
  padding: 0.9375rem 0;
  div > .title {
    font-size: 1.5rem;
    color: #333;
  }
  div > .meta {
    font-size: 0.875rem;
    color: #888;
  }
  .article-desc {
    padding: 0.9375rem 0;
    color: #999;
    font-size: 0.9375rem;
    margin-bottom: 0;
    a.more-link {
      display: none;
    }
    &:after {
      display: block;
      width: 10rem;
      height: 0.25rem;
      border-radius: 0.1875rem;
      background: #efefef;
      content: "";
      margin-top: 1rem;
    }
  }
  .article-content {
    width: 100%;
    font-size: 0.875rem;
    > p {
      margin-bottom: 0.625rem;
    }
    a {
      color: $MC;
      text-decoration: underline;
    }
    .dp-highlighter {
      width: 100%;
      overflow-x: auto;
      margin: 0.9375rem 0;
      ol {
        margin: 0 0 0.125rem 0.9375rem;
        li {
          white-space: nowrap;
        }
      }
    }
  }
  .article-protected {
    margin: 2.1875rem 0.625rem;
    padding: 1.5625rem 0.9375rem;
    border: 0.125rem dashed #0887e2;
    > p {
      color: #999;
      line-height: 1;
      margin: 0.3125rem 0;
      font-size: 0.875rem;
      text-align: right;
    }
    > input {
      position: relative;
      &::placeholder {
        color: #999;
      }
      &::before {
        content: "\e600";
      }
    }
  }
  .article-comments {
    > h3 {
      font-size: 1.125rem;
      margin-top: 2.1875rem;
    }
    ul {
      li {
        margin: 0.625rem auto;
        padding: 0.625rem 0;
        border-bottom: 1px solid #ccc;
      }
    }
    .comment-content {
      display: flex;
      .comment-avatar {
        text-align: center;
        width: 3.75rem;
        padding: 0 0.3125rem;
        img {
          display: inline-block;
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          border: 1px solid #eee;
          white-space: nowrap;
          text-overflow: clip;
          overflow: hidden;
        }
        p {
          font-size: 0.875rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow-x: hidden;
        }
      }
      .comment-desc {
        width: calc(100% - 3.75rem);
        .comment-info {
          font-size: 0.75rem;
          color: #999;
          margin-top: 0.3125rem;
          span:first-child {
            font-size: 1rem;
            font-weight: bold;
            color: #222;
          }
        }
        .comment-response {
          // min-height: 3rem;
          font-size: 0.875rem;
          color: #555;
        }
      }
    }
  }
}
.fixed-response {
  display: flex;
  .response-input {
    width: calc(100% - 2.875rem);
    input {
      border: none;
      box-shadow: none;
      border-radius: 0;
      border-bottom: 1px solid #aaa;
      &:focus {
        border-color: $MC;
      }
    }
  }
  .response-submit {
    button {
      background: none;
      line-height: 1;
      outline: none;
      &:active {
        color: $MC;
      }
      i {
        font-size: 22px;
      }
    }
  }
}

/*-----------------------------------------------------------------------
------------------------------ topic Style ------------------------------
-----------------------------------------------------------------------*/
.topic {
  padding: 1.25rem 0;
  ul {
    li {
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      position: relative;
      border-bottom: 1px solid #eee;
      &::after {
        display: block;
        content: "\2022";
        position: absolute;
        left: calc(50% - 1.3125rem);
        bottom: -0.5625rem;
        width: 2.625rem;
        height: 1.125rem;
        margin: auto;
        text-align: center;
        font-size: 1.125rem;
        line-height: 1;
        color: #999;
        background: #fff;
      }
      .thumb {
        max-height: 18.75rem;
        overflow: hidden;
        text-align: center;
      }
      .title {
        font-size: 1rem;
        font-weight: bolder;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.page {
  padding: 1.25rem 0;
  div > .title {
    font-size: 1.5rem;
    color: #333;
    text-align: center;
  }
  div > .meta {
    font-size: .875rem;
    color: #888;
    text-align: center;
    padding-bottom: 1.875rem;
    margin-bottom: 1.875rem;
    border-bottom: 1px dashed #ccc;
  }
  .page-content {
    margin-top: 0.9375rem;
  }
}

/*-----------------------------------------------------------------------
--------------------------------- Tags ----------------------------------
-----------------------------------------------------------------------*/
.tags {
  .tags-content {
    margin: 0.9375rem 0;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        padding: 0.625rem;
        margin: 0 0.3125rem 0.9375rem;
        background: $infoN;
        color: #fff;
        border: 1px solid $infoM;
        border-radius: 50%;
        transition: all 0.25s ease-in;
      }
    }
  }
}
.articles {
  .tag-content {
    ul {
      li {
        .cont-prev {
          width: 100%;
        }
      }
    }
  }
}

/*-----------------------------------------------------------------------
------------------------------ Media list -------------------------------
-----------------------------------------------------------------------*/
.media {
  .media-content {
    margin: 0.9375rem 0;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        text-align: center;
      }
    }
  }
}

/*-----------------------------------------------------------------------
------------------------------ Media list -------------------------------
-----------------------------------------------------------------------*/
.comments {
  padding: 15px 0;
  .comments-order {
    border-bottom: 1px solid #eee;
  }
  .comments-content {
    ul {
      li {
        margin: 0.3125rem auto;
        padding: 0.3125rem 0;
        border-bottom: 1px solid #ccc;
      }
    }
    .comment-content {
      display: flex;
      .comment-avatar {
        text-align: center;
        width: 3.75rem;
        padding: 0 0.3125rem;
        img {
          width: 3rem;
          height: 3rem;
        }
        p {
          font-size: 0.875rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow-x: hidden;
        }
      }
      .comment-desc {
        width: calc(100% - 3.75rem);
        .comment-response {
          min-height: 3rem;
          font-size: 0.875rem;
          color: #555;
        }
        .comment-info {
          font-size: 0.75rem;
          color: #999;
          margin-top: 0.3125rem;
          a {
            color: inherit;
          }
        }
      }
    }
  }
}
/*-----------------------------------------------------------------------
-------------------------------- member ---------------------------------
-----------------------------------------------------------------------*/
.member {
  overflow: hidden;
  .wrap {
    margin: auto -0.9375rem;
  }
  .user-bg,
  .user-list ul,
  .user-myself {
    box-shadow: 0 0 1.25rem #eee;
  }
  .user-bg {
    padding: 2.5rem 0;
    background: $MC;
    background-image: linear-gradient(80deg,$MC 0,$MCN 100%);
    .user-avatar {
    width: 4rem;
    height: 4rem;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 1.5625rem rgba(0, 0, 0, 0.25);
    }
    .user-name {
      text-align: center;
      margin-top: 0.9375rem;
      color: #333;
    }
  }
  .user-myself {
    margin: 0.9375rem 0;
    padding: 0.625rem 0;
    ul {
      display: flex;
      li {
        width: 33.333333%;
        text-align: center;
        color: #999;
        i {
          font-size: 1.5rem;
        }
      }
    }
  }
  .user-list {
    ul {
      margin: 0.9375rem auto;
      li {
        padding: .625rem 0.9375rem;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        transition: all 0.25s linear;
        &:hover,
        &:active,
        &:focus {
          background: #fafafa;
          color: #555;
          outline: none;
        }
        span {
          font-size: 0.875rem;
          color: #999;
          i {
            display: inline-block;
            color: #666;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}

/*-----------------------------------------------------------------------
--------------------------------- post ----------------------------------
-----------------------------------------------------------------------*/
.post {
  overflow-x: hidden;
  .wrap {
    padding: 0;
  }
}

/*-----------------------------------------------------------------------
------------------------------- pages nav -------------------------------
-----------------------------------------------------------------------*/
.pages-nav {
  .prev-next {
    display: flex;
    border: 1px solid #eee;
    margin: 1.5625rem auto;
    .prev-page,
    .next-page {
      width: 50%;
      padding: 0.4375rem;
      text-align: center;
      background: #eee;
      &.empty {
        background: #fafafa;
      }
    }
  }
}

/*-----------------------------------------------------------------------
-------------------------- fixed compoment css --------------------------
-----------------------------------------------------------------------*/
.weui-toptips{
  &.weui-toptips_warn {
    padding: 10px;
    background: linear-gradient(120deg, $dangM, $dangN);
    &.weui-toptips_succ {
      background: linear-gradient(120deg, $succM, $succN);
    }
    &.weui-toptips_info {
      background: linear-gradient(120deg, $infoM, $infoN);
    }
  }
}