{源码}来自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]