美化多说评论框

TOP

        多说样式已死,本文终结。

一段话

        前段时间换了个扁平化的 Blog 主题,然而感觉多说默认的样式好违和,近日魔改了一下多说的样式。

美(chou)化后的效果图

duoshuo_comment_box_demo

另一段话

        路人甲 : “哇!Troy 菊苣的评论框好漂亮!求 style.css !”
        Troy: “好哇好哇~交易之后就告诉你~”

        那么……以下是链接/内容……
        duoshuo.css

@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;
}

        duoshuo_ua.css

@charset "UTF-8";
/*!
    Name: Duoshuo UA Style
    Version: 1.0.0
    Url: https://itroy.cc
    Author: Troy
    Author Url: https://itroy.cc
    Description: Duoshuo UA style.
    Licensed under MIT.
*/
span.ua {
    color: #fff;
}
.ua span {
    padding: 0 5px !important;
    border-radius: 4px;
}
.ua_other {
    background-color: #ccc !important;
}
.os_other {
    background-color: #ccc !important;
}
.ua_ie {
    background-color: #428bca !important;
}
.ua_firefox {
    background-color: #f0ad4e !important;
}
.ua_maxthon {
    background-color: #7373b9 !important;
}
.ua_ucweb {
    background-color: #ff740f !important;
}
.ua_sogou {
    background-color: #78ace9 !important;
}
.ua_2345explorer {
    background-color: #2478b8 !important;
}
.ua_2345chrome {
    background-color: #f9d024 !important;
}
.ua_mi {
    background-color: #ff4a00 !important;
}
.ua_lbbrowser {
    background-color: #fc9d2e !important;
}
.ua_chrome {
    background-color: #ee6252 !important;
}
.ua_qq {
    background-color: #3d88a8 !important;
}
.ua_apple {
    background-color: #e95620 !important;
}
.ua_opera {
    background-color: #d9534f !important;
}
.os_vista, .os_2000, .os_windows, .os_xp, .os_7, .os_8, .os_8_1 {
    background-color: #39b3d7 !important;
}
.os_android {
    background-color: #98c13d !important;
}
.os_ubuntu {
    background-color: #dd4814 !important;
}
.os_linux {
    background-color: #3a3a3a !important;
}
.os_mac {
    background-color: #666666 !important;
}
.os_unix {
    background-color: #006600 !important;
}
.os_nokia {
    background-color: #014485 !important;
}
.admin {
    background-color: #00a67c !important;
}

        新人渣作,有些地方可能写的很不标准很不正确,各位菊苣们轻喷……

还有一段话

        为了更好的美(chou)化,你还需要把多说的默认头像换成:
        
        然后再把发布按钮的文字更改为:send
        然后再把正在发布的文字更改为:hourglass_empty
        应该就这些了吧……(逃……)

34 条评论

发表评论

*