duoshuo.css

@charset "UTF-8";
/*!
    Name: Duoshuo Style of Material Design
    Version: 1.2.0
    Url: https://itroy.cc
    Author: Troy
    Author Url: https://itroy.cc
    Description: A material design style for Duoshuo.
    Licensed under MIT.
*/

/* Material Icons */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(//gapis.geekzu.org/g-fonts/s/materialicons/v19/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* 多说 */
#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-login-buttons .ds-social-links {
    width: auto;
}
#ds-thread #ds-reset .ds-login-buttons .ds-service-list li {
    width: 70px;
}
#ds-reset .ds-service-link {
    padding-left: 0;
    background: none;
}

/* 多说 icon */
#ds-thread #ds-reset .ds-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* 喜欢 */
#ds-thread #ds-reset .ds-meta {
    padding-top: 20px;
}
#ds-thread #ds-reset a.ds-like-thread-button {
    text-shadow: none;
    background-image: none;
    background-color: #fff;
    border: 0;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .1);
}
#ds-thread #ds-reset .ds-icon-heart {
    background: none;
    color: #ff6464 !important;
}

/* 被顶起来的评论 */
#ds-thread #ds-reset #ds-hot-posts {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .1);
}

/* 帐号管理 */
#ds-thread #ds-reset .ds-icon-settings {
    background: none;
    font-size: 12px;
}
#ds-thread #ds-reset .ds-account-control ul {
    border: 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

/* 头像 */
#ds-reset .ds-avatar {
    background: none;
    box-shadow: none;
}

/* 评论框 */
#ds-thread #ds-reset .ds-replybox {
    height: 100px;
    padding-left: 100px !important;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
#ds-thread #ds-reset .ds-inline-replybox {
    margin: 10px 0 30px 0;
}

/* 评论框头像 */
#ds-thread #ds-reset .ds-replybox .ds-avatar {
    position: absolute;
    width: 100px !important;
    height: 100px !important;
    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 !important;
        height: 50px !important;
    }
    #ds-reset form {
        margin-left: 12px;
    }
}*/
#ds-thread #ds-reset .ds-replybox .ds-avatar img {
    width: 100% !important;
    height: 100% !important;
    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 !important;
    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-weight: normal;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    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;
}
#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-toolbar-buttons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 21px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
#ds-thread #ds-reset .ds-toolbar-button {
    background: none;
}
#ds-thread #ds-reset .ds-toolbar-button:hover {
    color: #888;
}

/* 表情框 */
#ds-smilies-tooltip {
    max-width: calc(100% - 150px);
    border: 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
#ds-smilies-tooltip ul.ds-smilies-tabs {
    width: 115px;
    height: 160px;
    max-width: calc(100% - 150px);
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, .1);
}
@media (max-width: 356px) {
    #ds-smilies-tooltip ul.ds-smilies-tabs {
        max-width: calc(100% - 115px);
    }
}
#ds-smilies-tooltip ul.ds-smilies-tabs li a.ds-current {
    color: #333;
    background: #fafafa;
    box-shadow: none;
}
#ds-smilies-tooltip ul.ds-smilies-tabs li a {
    background: #eee;
}
#ds-smilies-tooltip ul.ds-smilies-tabs li a {
    border-bottom: 0;
}
@media (max-width: 568px) {
    #ds-smilies-tooltip .ds-smilies-container {
        margin-left: calc(100% - 150px);
    }
}
@media (max-width: 356px) {
    #ds-smilies-tooltip .ds-smilies-container {
        margin-left: calc(100% - 115px);
    }
}
#ds-smilies-tooltip .ds-smilies-container li {
    margin: 4px;
}

/* 评论信息 */
#ds-thread #ds-reset .ds-comments-info {
    margin-top: 50px;
    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-actions .ds-icon {
    background: none;
    font-size: 12px;
}
#ds-thread #ds-reset .ds-icon-reply, #ds-thread #ds-reset .ds-icon-share, #ds-thread #ds-reset .ds-icon-report, #ds-thread #ds-reset .ds-icon-delete {
    width: 14px;
}

/* 一些杂项 */
#ds-thread #ds-reset .ds-comment-body {
    padding-left: 60px;
}

/* 信息框 */
#ds-notify {
    width: 360px;
    max-width: 360px;
    height: 80px;
    padding: 0;
    right: 0 !important;
    bottom: 12px !important;
    background-color: #1f1f1f;
    border: 1px solid #484848;
    border-radius: 0;
    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 .ds-notify-logo {
    float: left;
    color: #fff;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 56px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* 信息框 文字 */
#ds-notify #ds-reset ul.ds-notify-unread {
    float: left;
    line-height: 1.5;
    margin: 6px 0 0 16px;
}

/* 信息框 关闭 */
#ds-notify #ds-reset .ds-notify-close {
    float: right;
    color: #fff;
    cursor: pointer;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    transition: .3s;
}