path: root/themes/hugo-theme-stack/assets/scss/partials/comments/disqusjs.scss

.disqus-container {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    padding: var(--card-padding);
}

#dsqjs * {
    margin: 0;
    padding: 0
}

#dsqjs a {
    text-decoration: none;
    color: #076dd0
}

#dsqjs .dsqjs-hide {
    display: none!important
}

#dsqjs .dsqjs-disabled {
    cursor: not-allowed;
    opacity: .5
}

#dsqjs #dsqjs-msg {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 14px
}

#dsqjs #dsqjs-msg .dsqjs-msg-btn {
    cursor: pointer
}

#dsqjs .dsqjs-bullet {
    line-height: 1.4;
    margin: 0 2px
}

#dsqjs .dsqjs-bullet:after {
    color: #c2c6cc;
    content: "·";
    font-weight: 700
}

#dsqjs .dsqjs-clearfix:after,#dsqjs .dsqjs-clearfix:before {
    display: table;
    content: "";
    line-height: 0;
    clear: both
}

#dsqjs .dsqjs-nav {
    position: relative;
    margin: 0 0 20px;
    border-bottom: 2px solid #e7e9ee
}

#dsqjs ol,#dsqjs ul {
    list-style: none;
    list-style-type: none
}

#dsqjs .dsqjs-no-comment {
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow: hidden;
    color: #2a2e2e;
    margin-bottom: 6px
}

#dsqjs .dsqjs-nav-tab {
    float: left;
    text-transform: capitalize;
    font-size: 15px;
    padding: 12px 8px;
    color: #656c7a;
    display: block;
    margin: 0 15px 0 0;
    font-weight: 700;
    line-height: 1;
    position: relative;
    transition: all .2s ease-in-out
}

#dsqjs .dsqjs-nav-tab:last-child {
    margin: 0
}

#dsqjs .dsqjs-tab-active {
    color: #2a2e2e
}

#dsqjs .dsqjs-tab-active>span:after {
    content: " ";
    display: block;
    height: 2px;
    background-color: #076dd0!important;
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0
}

#dsqjs .dsqjs-post-list .dsqjs-post-item {
    position: relative;
    margin-bottom: 16px
}

#dsqjs .dsqjs-post-list .dsqjs-post-avatar {
    float: left;
    margin-right: 10px;
    position: relative;
    background: #dbdfe4;
    padding: 0;
    display: block;
    border-radius: 4px
}

#dsqjs .dsqjs-post-list .dsqjs-post-avatar img {
    width: 44px;
    height: 44px;
    display: block;
    border-radius: 4px
}

#dsqjs .dsqjs-post-list .dsqjs-post-header {
    line-height: 1;
    font-size: 14px;
    margin-bottom: 3px
}

#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-post-author {
    color: #656c7a;
    font-weight: 700
}

#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-admin-badge {
    color: #fff;
    background: #687a86;
    padding: 1px 3px;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    top: -1px;
    left: 1px
}

#dsqjs .dsqjs-post-list .dsqjs-post-header .dsqjs-meta {
    display: inline-block;
    font-size: 12px;
    color: #656c7a
}

#dsqjs .dsqjs-post-body {
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow: hidden;
    color: #2a2e2e
}

#dsqjs .dsqjs-post-body code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background: #f5f5f5;
    color: inherit;
    border-radius: 3px
}

#dsqjs .dsqjs-post-body pre {
    padding: .5em;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    border-radius: 3px;
    background: #f5f5f5;
    margin: .5em 0
}

#dsqjs .dsqjs-post-body blockquote {
    padding: 0 .8em;
    margin: .5em 0;
    color: #6a737d;
    border-left: .25em solid #dfe2e5
}

#dsqjs .dsqjs-post-body p:last-child {
    margin: 0
}

#dsqjs .dsqjs-post-list.dsqjs-children>li {
    margin-left: 30px
}

#dsqjs .dsqjs-post-list.dsqjs-children .dsqjs-post-avatar img {
    width: 38px;
    height: 38px
}

#dsqjs .dsqjs-load-more {
    font-size: 14px;
    font-weight: 400;
    display: block;
    text-align: center;
    padding: 11px 14px;
    margin: 0 0 24px;
    background: #687a86;
    color: #fff;
    cursor: pointer
}

#dsqjs .dsqjs-load-more:hover {
    opacity: .8
}

#dsqjs footer {
    text-align: right;
    line-height: 1.5;
    padding-top: 10px;
    padding-right: 10px;
    border-top: 2px solid #e7e9ee;
    margin-top: 12px;
    font-weight: 700;
    font-size: 16px;
    color: #555
}

#dsqjs .dsqjs-disqus-logo {
    background-image: url(https://c.disquscdn.com/next/embed/assets/img/sprite.654110a9206fd22f08cca0798e34a65e.png);
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 86px 40.5px;
    height: 16.5px;
    width: 86px;
}

#dsqjs .dsqjs-order {
    display: flex;
    float: right;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 12px
}

#dsqjs .dsqjs-order-radio {
    display: none
}

#dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
    color: #fff;
    background-color: #888
}

#dsqjs .dsqjs-order-label {
    display: block;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    font-size: 12px;
    border-radius: 2px;
    padding: 0 5px;
    background-color: #dcdcdc;
    cursor: pointer
}

#dsqjs p.dsqjs-has-more {
    margin-bottom: 24px;
    margin-left: 48px;
    font-size: 13px;
    line-height: 15px
}

#dsqjs p.dsqjs-has-more a.dsqjs-has-more-btn {
    color: #656c7a;
    text-decoration: underline;
    cursor: pointer
}

@media (min-width: 768px) {
    #dsqjs .dsqjs-post-list.dsqjs-children>li {
        margin-left:48px
    }

    #dsqjs .dsqjs-post-list .dsqjs-post-avatar {
        margin-right: 12px
    }

    #dsqjs .dsqjs-post-list .dsqjs-post-item {
        margin-bottom: 20px
    }
}

@media (min-width: 1024px) {
    #dsqjs .dsqjs-post-list.dsqjs-children>li {
        margin-left:60px
    }
}

:root[data-scheme="light"]  {
    #dsqjs .dsqjs-disqus-logo {
        background-position: 0 -7px;
    }
}

:root[data-scheme="dark"]  {
    #dsqjs {
        --t-s: rgba(255,255,255,0.9);
        --alt: #3e4b5e;
        --link-hover: #47a2e0;
        --hover-bg: #3e4b5e;
        --tag: #3e4b5e;
        --border: #435266;
        --pre: #3c495b;
        --c-bg: #2f3947;
        --code: #c3c7cb;
        --kbd: #4e5f77;
        --hl: #abb2bf;
        --hlc: #808895;
        --hlk: #c678dd;
        --hln: #e06c75;
        --hll: #56b6c2;
        --hls: #98c379;
        --hlt: #e6c07b;
        --hlv: #d19a66;
        --bg: #181c27;
        --main: #252d38;
        --t: rgba(255,255,255,0.86);
        --t-l: rgba(255,255,255,0.66);
        --logo: #fff;
        --link: #38a3fd;
        --title: rgba(255,255,255,0.92);
        --fab: #364151;
        --shadow: none;
    }

    #disqus_thread {
        color: var(--body-text-color)
    }

    #dsqjs #dsqjs-msg {
        color: var(--t)
    }

    #dsqjs a {
        color:var(--link)
    }

    #dsqjs a:focus,#dsqjs a:hover {
        color: var(--link-hover)
    }

    #dsqjs .dsqjs-disqus-logo {
        background-position: 0 -24px;
    }

    #dsqjs .dsqjs-nav,#dsqjs footer {
        border-color: var(--hlc)
    }

    #dsqjs .dsqjs-load-more,#dsqjs .dsqjs-load-more:hover,#dsqjs .dsqjs-nav-tab,#dsqjs .dsqjs-no-comment,#dsqjs .dsqjs-post-content {
        color: var(--t)
    }

    #dsqjs .dsqjs-order-label {
        background-color: var(--hlc)
    }

    #dsqjs .dsqjs-order-radio:checked+.dsqjs-order-label {
        background-color: var(--kbd)
    }

    #dsqjs .dsqjs-tab-active>span:after {
        background-color: #2e9fff
    }

    #dsqjs .dsqjs-footer,#dsqjs .dsqjs-meta {
        color: var(--t-l)
    }

    #dsqjs .dsqjs-post-body blockquote {
        border-color: var(--border)
    }
}