[Next]修改Next多说评论框样式

原文发表在我的博客：修改Next多说评论框样式
效果也可以在我的博客观看，另求关注、求交流、求意见、求建议。

前些天 @苏阳mliml 留言要本博客的留言框样式，这几天没太留意博客所以昨天才看到。由于改动次数太多了，代码乱七八糟的，正好也借此机会整理了一下现阶段多说评论框的样式。也欢迎其他博主留言、评论、加友情链接。

多说因为是使用 JavaScript 加载模块的，所以不能通过修改HTML的方法来修改整体的框架，只能通过一些取巧的方式写 CSS 来得到比较理想的效果。

效果图

20161209

需要注意的几点

• 样式里主要进行了风格的适配、对 Retina 屏幕的适配以及多处细节的修改，因为是根据本博客写的，所以复制后还需要部分修改来适配自己的博客。
• 修改里隐藏了一部分作用不大但是影响观感的功能，需要的人可以重新显示出来修改成配套的样式。
• Next 主题里默认使用 Stylus 预处理 CSS 样式，其他主题建议使用 Stylus 进行预处理后再进行导入或者为站点配置 Stylus。Stylus 语法很简单，修改样式前建议看一下 Stylus入门使用方法。
• Next 主题多说样式文件是 your-blog-path/themes/next/source/css/_common/components/third-party/duoshuo.styl
• 此样式只适用于多说的平铺模式，其他模式没有测试，可能会出现问题。

样式文件代码

.theme-next {
  /*浏览器兼容begin*/
    box-shadow(){
      box-shadow: arguments;
      -moz-box-shadow: arguments;
      -webkit-box-shadow: arguments;
      -o-box-shadow: arguments;
    }
    
    transition(){
      transition: arguments;
      -moz-transition: arguments;
      -webkit-transition: arguments;
      -o-transition: arguments;
    }
    
    border-radius(){
      border-radius: arguments;
      -moz-border-radius: arguments;
      -webkit-border-radius: arguments;
      -o-border-radius: arguments;
    }
  /*浏览器兼容end*/
  
  $duoshuoMaxWidth = 700px
  $duoshuoBoxShadow = 0 2px 10px -4px #0001
  $duoshuoBoxShadowHover = 0 8px 10px -4px #0002
  $duoshuoBoxBackgroundColor = #fff
  $duoshuoInnerBoxBackgroundColor = #00000005
  $duoshuoModalBackground = #000A
  $duoshuoDialogBoxShadow = 0 10px 25px rgba(0, 0, 0, 0.5)
  
  // 评论区域整体
  #ds-thread #ds-reset {
    color: #555;
    max-width: $duoshuoMaxWidth;
    margin: 20px auto;
    .ds-comment-body p{
      margin 1em 0 0.5em 0;
    }
    .ds-comment-header br{
      display: none;
    }
    .ds-toolbar{
      .ds-visitor{
        padding: 10px 0;
      }
      //菜单
      .ds-account-control{
        padding: 10px 0;
        .ds-bind-more{
          display: none;
        }
        ul{
          overflow: hidden;
          background: #fff;
          left: 13px;
          top: 30px;
          width: 60px;
          border: none;
          box-shadow: 0 1px 5px -1px #0003;
          transition: box-shadow 0.4s;
          &:hover{
            box-shadow: 0 3px 6px -1px #0004;
          }
        }
      }
    }
    //评论框
    .ds-replybox {
      margin: 5px 0 0 0;  
      form {
        background: $duoshuoBoxBackgroundColor;
        border-radius: 4px;
        box-shadow: $duoshuoBoxShadow;
        transition: box-shadow 0.4s;
        &:hover{
          box-shadow: $duoshuoBoxShadowHover;
        }
      }
    }
    //输入框
    .ds-textarea-wrapper {
      border: none;
      background: none;
      //添加高度变化动效
      textarea {
        overflow-y: hidden;
        transition: height 0.2s;
      }
    }
    //气泡
    #ds-bubble{
      border: none;
      .ds-time{
        display: none;
      }
    }
    //评论框工具栏
    .ds-post-toolbar {
      box-sizing: border-box;
      border: none;
      background: none;
      box-shadow: none;
      .ds-toolbar-buttons {
        display: none;
      }
      .ds-post-options {
        height: 40px;
        border: none;
        background: none;
        .ds-sync {
          display: none;
        }
      }
    }
    //回复按钮
    .ds-post-button {
      top: 4px;
      right: 5px;
      width: 90px;
      height: 30px;
      border: 0;
      text-shadow: none;
      font-weight: 200;
      border-radius: 3px;
      background: #555;
      color: #fff;
      box-shadow: none;
      &:hover {
        background: #222;
        color: #fff;
      }
    }
    //评论数量和排序
    .ds-comments-info {
      padding: 10px 0;
      .ds-sort {
        top: initial !important;
        bottom: 0 !important;
      }
      li.ds-tab a.ds-current {
        border: none;
        color: #60676d;
        transition: background 0.2s;  
        text-shadow: none;

        &:hover {
          background-color: #eee;
          color: #60676d;
        }
      }
      li.ds-tab a {
        border-radius: 3px;
        padding: 5px;
      }
    }
    //非弹窗登录图标
    .ds-login-buttons{
      visibility: hidden;
    }
    //评论
    .ds-comments{
      border: none;
      //评论回复框
      .ds-comment-body form{
        background: $duoshuoInnerBoxBackgroundColor !important;
        box-shadow: none !important;
      }
      li.ds-post{
        border: none;
        overflow: visible !important;
        .ds-post-self{
          border: none;
          padding: 10px 0 !important;
          overflow: visible !important;
          .ds-comment-body{
            margin: 0;
            padding: 10px !important;
            background: $duoshuoBoxBackgroundColor;
            overflow: hidden;
            border-radius: 4px;
            box-shadow: $duoshuoBoxShadow;
            transition: box-shadow 0.4s;
            &:hover{
              box-shadow: $duoshuoBoxShadowHover;
            }
          }
        }
      }
    }
  }
  
  //评论区头像
  #ds-thread #ds-reset .ds-avatar,#ds-ctx .ds-avatar{
    box-shadow: none;
    border-radius: 50%;
    overflow: hidden;
  }
  #ds-reset .ds-avatar{
    float: left;
    margin-right: 10px;
  }
  
  //查看对话内部时间标签，由于是A标签且链接为undefined，但是多说内部的代码不能改只能隐藏掉了。
  .ds-ctx-head .ds-time{
    display: none !important;
  }
  
  //隐藏掉不必要的东西
  .ds-powered-by,.ds-post-likes,.ds-post-repost,.ds-dialog-footer,#ds-indicator{
    display: none !important;
  }
  
  //全屏弹窗
  #ds-wrapper{
    top: 0 !important;
    background: $duoshuoModalBackground;
    transition: background 0.4s !important;
    #ds-reset{
      h2{
        margin: 15px 0px 30px 0px;
        text-shadow: none;
      }
      .ds-icons-32{
        margin: 0 0 30px 10px;
        a{
          margin: 0px 10px 0 0;
          background-size: 32px 32px !important;
          background-position: 0 0 !important;
        }
      }
    }
    .ds-dialog{
      border-radius: 3px;
      left: 0 !important;
      right: 0 !important;
      margin 0 auto;
      top: 20%;
      position: fixed;
      box-shadow: $duoshuoDialogBoxShadow;
      .ds-dialog-inner{
        width: 100%;
        margin: 0;
        border: none !important;
        background: #fff;
      }
    }
  }
  
  /*ds-icons 改为fontawaysome适配高清屏 begin*/
    .ds-icon,.ds-dialog-close,.ds-service-icon{
      position: relative;
      display: inline-block !important;
      font: normal normal normal 14px/1 FontAwesome !important;
      outline: none;
      font-size: inherit !important;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: none !important;
      width: 18px !important;
    }
    .ds-dialog-close{
      color: #ccc !important;
      transition: color 0.2s !important;
      &:hover{
        color: #555 !important;
      }
    }
    .ds-icon-settings::before{
      content: "\f013";
    }
    .ds-icon-reply::before{
      content: "\f112";
    }
    .ds-icon-report::before{
      content: "\f024";
    }
    .ds-icon-delete::before{
      content: "\f1f8";
    }
    .ds-dialog-close:before{
      content: "\f00d";
    }
    .ds-service-icon:before{
      content: "\f086";
    }
  /*ds-icons 改为fontawaysome适配高清屏 end*/
  
  /*登录弹框图标begin*/
    .ds-icons-32{
      a.ds-weixin {
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_22@2x_b.png') !important;
      } 
      a.ds-qq {
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_24@2x_b.png') !important;
      }
      a.ds-weibo {
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_1@2x_b.png') !important;
      }
      a.ds-renren {
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_7@2x_b.png') !important;
      }
      a.ds-kaixin {
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_8@2x_b.png') !important;
      }
      a.ds-douban {
      margin: 0 0 0 0 !important;
        background-image: url('http://f1.webshare.mob.com/code/res/icon/sns_icon_5@2x_b.png') !important;
      }
    }
  /*登录弹框图标end*/
  
  /*最近访客begin*/
    #ds-recent-visitors .ds-avatar{
      float: left;
      overflow: hidden;
      border-radius: 50%;
    }
    .ds-recent-container{
      line-height: 40px;
      text-align: center;
    }
    
    .ds-recent-container .ds-recent-title{
      font-size: 20px;
      font-weight: 200;
    }
    .ds-recent-visitors{
      display: inline-block;
      -webkit-margin-before: 0;
      -webkit-margin-after: 0;
      -webkit-padding-start: 0;
      vertical-align: middle;
    }
  /*最近访客end*/
  

/*duoshuo UA style begin*/

  #ds-reset .duoshuo-ua-platform,
  #ds-reset .duoshuo-ua-browser {
    color: #999;

    .fa {
      display: inline-block;
      margin-right: 3px;
    }
  }
  
  #ds-reset .duoshuo-ua-browser {
    display: none;
  }

/*duoshuo UA style end*/

}