修改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
  • 此样式只适用于多说的平铺模式，其他模式没有测试，可能会出现问题。

样式文件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
.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*/

}

本文链接：修改Next多说评论框样式
版权声明：本文章采用CC BY-NC-SA 3.0 CN许可协议进行许可。转载请注明出处！