Hugo-theme-stack/assets/scss/partials/comments/disqusjs.scss

395 lines
7.4 KiB
SCSS
Raw Normal View History

.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)
}
}