{源码}来自troy的多说CSS样式-本站采用的

原文链接美化多说评论框-Tory的星球

CSS样式如下：

[codee]

@charset "UTF-8";
/*!
Name: Duoshuo Style of Material Design
Version: 1.0.0
Url: https://itroy.cc
Author: Troy
Author Url: https://itroy.cc
Description: A material design style for Duoshuo.
Licensed under MIT.
*/
/* 多说 */
#ds-thread {
padding: 10px calc((100% - 700px) / 2);
margin: 0 auto;
background-color: #eee;
}
@media (max-width: 568px) {
#ds-thread {
padding-right: 15px;
padding-left: 15px;
}
}
@media (max-width: 740px) {
#ds-thread {
width: auto;
padding-right: 20px;
padding-left: 20px;
}
}
/* 字体 */
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
font-family: "Microsoft YaHei UI", "Microsoft YaHei";
font-size: 12px;
letter-spacing: 1px;
}
/* 评论图标 */
#ds-thread #ds-reset ul.ds-comments-tabs .ds-service-icon {
display: none;
}
/* 评论数量 */
#ds-thread #ds-reset .ds-comments-info {
padding-top: 20px;
}
/* 喜欢 */
#ds-thread #ds-reset .ds-meta {
padding-top: 20px;
}
/* 被顶起来的评论 */
#ds-thread #ds-reset #ds-hot-posts {
margin: 8px 10px;
}
/* 头像 */
#ds-reset .ds-avatar {
background: none;
box-shadow: none;
}
/* 评论框 */
#ds-thread #ds-reset .ds-replybox {
height: 100px;
padding-left: 100px;
margin-bottom: 50px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
/* 评论框头像 */
#ds-thread #ds-reset .ds-replybox .ds-avatar {
position: absolute;
width: 100px;
height: 100px;
margin: 0;
overflow: hidden;
background: #f7f7f7;
border-radius: 2px 0 0 2px;
}
@media (max-width: 568px) {
#ds-thread #ds-reset .ds-replybox .ds-avatar {
width: 50px;
height: 50px;
}
#ds-reset form {
margin-left: 12px;
}
}
#ds-thread #ds-reset .ds-replybox .ds-avatar img {
width: 100%;
height: 100%;
border-radius: 0;
}
#ds-thread #ds-reset .ds-replybox .ds-avatar img:hover {
width: 100%;
height: 100%;
border-radius: 0;
}
/* 评论头像 */
#ds-thread #ds-reset .ds-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
background: #f7f7f7;
transition: transform .8s ease-out;
}
/* 评论框文字区域 */
#ds-thread #ds-reset .ds-textarea-wrapper {
position: relative;
border: 0;
border-bottom: none;
overflow: hidden;
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
height: 50px;
letter-spacing: 0;
line-height: 1.5;
font-size: 14px;
color: #333;
}
/* 发表按钮 */
#ds-thread #ds-reset .ds-post-button {
position: absolute;
font-family: "Material Icons";
font-size: 28px;
right: 20px;
width: 56px !important;
height: 56px;
padding: 0;
overflow: hidden;
color: #fff;
background-color: #00bcd4;
border: 0;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
transition: .3s;
/* Support for IE. */
font-feature-settings: 'liga';
}
#ds-thread.ds-narrow #ds-reset .ds-post-button {
width: 56px;
}
#ds-thread #ds-reset .ds-post-button:hover {
background-color: #00bcd4;
box-shadow: 0 2px 6px rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.2);
}
#ds-thread #ds-reset .ds-post-button:active {
background-color: #00c7e1;
}
/* 评论框工具栏 */
#ds-thread #ds-reset .ds-post-toolbar {
box-shadow: 0 0;
}
#ds-thread #ds-reset .ds-post-options {
border: 0;
}
/* 评论信息 */
#ds-thread #ds-reset .ds-comments-info {
border-top: 1px solid #ddd;
}
/* 隐藏分享选项 */
#ds-thread #ds-reset .ds-sync {
display: none;
}
/* 评论数量 */
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
display: block;
padding: 0;
background: none;
border: 0;
font-size: 40px;
text-align: center;
color: #222;
}
/* 一些杂项 */
#ds-thread #ds-reset .ds-comment-body {
padding-left: 60px;
}
/* 信息框 */
#ds-notify {
width: 360px;
max-width: 360px;
height: 77px;
padding: 0;
right: 0 !important;
background-color: #1f1f1f;
border: 1px solid #484848;
transition: .3s;
}
#ds-notify #ds-reset {
padding: 12px;
}
#ds-notify #ds-reset ul.ds-notify-unread li a {
color: #fff;
}
/* 信息框 logo */
#ds-notify #ds-reset a.ds-logo {
width: 50px;
height: 50px;
background: url(https://static.itroy.cc/ic_info_white_48dp_2x.png);
background-size: cover;
}
/* 信息框 文字 */
#ds-notify #ds-reset ul.ds-notify-unread {
line-height: 1.5;
margin-left: 60px;
}

[/codee]