/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/*========================
COMMENTS AREA
========================*/
.comments-area {
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid rgba($black_color, 0.05);
}
.comments-area .comments-title,
.comment-respond .comment-reply-title {
margin-top: 0;
margin-bottom: 30px;
font-size: 1em;
font-weight: 700;
position: relative;
}
.comments-area ol {
margin: 0;
padding: 0;
list-style: none;
}
.comments-area ol li ol {
margin-left: 30px;
}
.comment-list .comment {
border-top: 1px solid rgba($black_color, 0.05);
margin-top: 20px;
padding-top: 20px;
}
.comment-list > .comment:first-child {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.comments-area .comment-body {
position: relative;
padding-left: 70px;
}
.comments-area .bypostauthor > .comment-body .comment-author::after {
content: "";
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 35px;
left: 35px;
}
.comment-body img.avatar {
position: absolute;
top: 5px;
left: 0;
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
}
.comment-body b.fn {
font-weight: 700;
font-size: 0.8em;
margin-bottom: 0;
display: block;
color: #202020;
}
.comment-author a {
text-decoration: none;
color: #202020;
line-height: 1.25em;
}
.comment-author a:hover {
color: #868e96;
}
.comment-body span.says {
display: none;
}
.comment-body .comment-metadata {
font-size: 0.6em;
color: #999;
line-height: 1.25em;
}
.comment-metadata a {
color: #999;
}
.comment-metadata a:hover {
color: #202020;
}
.comment-body .comment-awaiting-moderation {
font-size: 0.7em;
line-height: 1.65em;
margin-top: 10px;
margin-bottom: 0;
color: red;
letter-spacing: 0;
}
.comment-body .reply .comment-reply-link {
display: inline-block;
text-align: center;
position: relative;
vertical-align: top;
color: #202020;
font-size: 0.7em;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.8px;
padding-left: 25px;
}
.comment-body .reply .comment-reply-link:hover {
color: #868e96;
}
.comment-body .reply .comment-reply-link:before {
content: "";
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
top: 3px;
left: 0;
}
.comment-body .reply .comment-reply-link:hover:before {
background-image: url('data:image/svg+xml; utf-8, ');
}
.comment-body .comment-content {
font-size: 0.8em;
font-weight: 400;
}
.comment-body .comment-content p {
margin-top: 5px;
margin-bottom: 20px;
}
.comments-area .comment-list + .comment-respond {
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid rgba($black_color, 0.1);
}
.comment-respond .comment-reply-title a {
display: inline-block;
margin-left: 10px;
color: #202020;
vertical-align: middle;
text-transform: uppercase;
font-weight: 700;
padding-left: 10px;
border-left: 1px solid #202020;
}
.comment-respond .comment-reply-title a:hover {
color: #868e96;
}
.comment-respond .comment-form p {
margin-top: 0;
margin-bottom: 20px;
}
.comment-form p.comment-notes {
display: none;
width: 100%;
}
.comment-respond .comment-form p.comment-form-comment {
width: 100%;
}
.comment-respond .comment-form p:not(.comment-form-cookies-consent) label {
display: none;
}
.comment-respond .comment-form p.comment-form-cookies-consent {
position: relative;
width: 100%;
}
.comment-respond .comment-form p.comment-form-cookies-consent label {
font-size: 0.7em;
line-height: 1.65em;
color: $font_color;
padding-left: 25px;
position: relative;
cursor: pointer;
display: block;
}
.comment-respond .comment-form p.comment-form-cookies-consent label:hover {
text-decoration: underline;
}
.comment-respond .comment-form p.comment-form-cookies-consent label::before {
content: "";
width: 15px;
height: 15px;
border: 1px solid rgba($black_color, 0.6);
background-image: url('data:image/svg+xml; utf-8, ');
background-repeat: no-repeat;
background-size: 0;
background-position: center;
position: absolute;
top: 4px;
left: 0;
font-weight: normal;
text-align: center;
line-height: 14px;
font-size: 0;
@include transition(all ease 0.35s);
}
.comment-respond .comment-form p.comment-form-cookies-consent input[type="checkbox"]:checked + label::before {
content: "";
border-color: $black_color;
background-color: $black_color;
background-size: 10px;
}
.comment-respond .comment-form p.comment-form-cookies-consent input[type="checkbox"] {
position: absolute;
top: 11px;
left: 1px;
opacity: 0;
visibility: hidden;
}
.comment-form p.form-submit {
margin-bottom: 0;
margin-top: 0;
width: 100%;
}
@include media(xs) {
.comments-area {
.comment-body {
padding-left: 50px;
img.avatar {
width: 35px;
height: 35px;
}
}//.comment-body
.bypostauthor > .comment-body .comment-author::after {
top: 22px;
left: 22px;
}
}//.comments-area
.comment-form {
flex-direction: column;
margin-left: 0;
margin-right: 0;
}
.comment-respond .comment-form p {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}//@include media(xs)