@body-bg:#2382ff;

.body{
  margin-top: 90px;
  .color{
    color: @body-bg;
  }
  h3{
    margin-top: 0;
  }
  #content{
    text-align: justify;
    p{
      text-indent: 30px;
    }
    &>p:last-child{
        padding: 10px 0px;
    }
  }
  #read{
    margin-top: 20px;
    text-align: center;
    .good{
      border-radius:5px;
      border:  1px solid #e6e6e6;
      display: inline-block;
      padding: 5px 30px;
      margin-bottom: 10px;
    }
  }
  .articles{
    ul{
      width: 100%;
      border-top: 1px solid #e6e6e6;
      padding: 10px 20px;
      list-style: square;
      color: #777;
      overflow: hidden;
      li{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        padding: 5px 0px;
      }
    }
  }
  #comment{
    .h5{
      display: flex;justify-content: space-between;align-content: center;
    }
    .remind{
      text-align: center;
      background-color: #e6e6e6;
      padding: 5px;
      border-radius: 5px;
      margin: 10px 0px;
    }
    .comment{
      border-top: 1px solid #e6e6e6;
      padding-top: 10px;
      .nocomment,.loading,.nodata{
        display: none;
        text-align: center;
        margin: 10px;
      }
      .nocomment{
        display: block;
        padding-bottom: 10px;
        &:hover{
          color: @body-bg;
        }
      }
      .user{
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid #e6e6e6;
        display: grid;
        grid-template-columns: 10%  90%;
        .u-img{
         width: 100%;
         text-align: center;
         .img{
           width: 100%;
           max-width: 64px;
         }
        }
        .u-content{
          margin-left: 10px;
         text-align: justify;
         .u-name{
           font-size: 16px;
         }
         .u-detail{
           padding: 5px  0px;
         }
         
        .u-flex{display: flex;justify-content: space-between;align-items: center;
        }
        }
      }
    }
  }
}

// 交互板
#toast{
  #report{
    display: none;
    text-align: start;
    ul{list-style: none;padding: 0;
      li{
        padding: 5px;
        border-bottom: 1px solid #e6e6e6;
       }
    }
  }
  #ping{
    display: none;
    .alert{
      display: none;
      padding: 5px;margin-bottom: 5px;
    }
  }
}