.comment-actions-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 2px solid #3a3b3c;
margin-bottom: 20px;
}
.comment-stats {
display: flex;
align-items: center;
gap: 15px;
font-size: 14px;
color: #b0b3b8;
}
.comment-stat-item {
display: flex;
align-items: center;
gap: 5px;
}
.comment-stat-item i {
font-size: 16px;
}
.reaction-count {
display: inline-flex;
align-items: center;
gap: 5px;
}
.reaction-icons {
display: inline-flex;
align-items: center;
margin-right: 4px;
}
.reaction-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
margin-left: -4px;
border: 2px solid #fff;
}
.reaction-icon:first-child {
margin-left: 0;
}
.reaction-icon.like {
background: #1877f2;
color: #fff;
}
.reaction-icon.love {
background: #f33e58;
color: #fff;
} .comment-action-buttons {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-top: 1px solid #3a3b3c;
border-bottom: 1px solid #3a3b3c;
margin-bottom: 20px;
}
.comment-action-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
color: #b0b3b8;
cursor: pointer;
transition: background-color 0.2s ease;
}
.comment-action-btn:hover {
background-color: #3a3b3c;
}
.comment-action-btn i {
font-size: 18px;
}
.comment-action-btn.liked {
color: #1877f2;
}
.comment-action-btn.liked i {
color: #1877f2;
} #madara-comments.comments-area #respond.comment-respond {
background: #242526;
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
}
#madara-comments.comments-area #respond.comment-respond h4.comment-reply-title {
font-size: 18px;
font-weight: 600;
color: #e4e6eb;
margin-bottom: 16px;
}
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment {
margin-bottom: 12px;
}
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment {
background: #3a3b3c;
border: 1px solid #3a3b3c;
border-radius: 20px;
padding: 10px 16px;
font-size: 15px;
line-height: 1.5;
color: #e4e6eb;
resize: vertical;
min-height: 80px;
transition: border-color 0.2s ease;
}
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment:focus {
outline: none;
border-color: #1877f2;
}
#madara-comments.comments-area
#respond.comment-respond
.comment-form
> *:not(.comment-form-comment):not(.form-submit):not(.comment-notes):not(.logged-in-as)
input {
background: #3a3b3c;
border: 1px solid #3a3b3c;
border-radius: 6px;
padding: 10px 12px;
font-size: 14px;
color: #e4e6eb;
transition: border-color 0.2s ease;
}
#madara-comments.comments-area
#respond.comment-respond
.comment-form
> *:not(.comment-form-comment):not(.form-submit):not(.comment-notes):not(.logged-in-as)
input:focus {
outline: none;
border-color: #1877f2;
}
#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit #submit {
background: #1877f2;
color: #fff;
border: none;
border-radius: 6px;
padding: 10px 24px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
}
#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit #submit:hover {
background: #166fe5;
} #madara-comments.comments-area ol.comment-list li.comment article.comment-body {
background: #242526;
border: 1px solid #3a3b3c;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-left {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 12px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-right .comment-author .heading {
font-size: 15px;
font-weight: 600;
color: #e4e6eb;
margin-bottom: 4px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-right .comment-metadata {
font-size: 13px;
color: #b0b3b8;
margin-bottom: 8px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-right .comment-content {
font-size: 15px;
line-height: 1.3333;
color: #e4e6eb;
margin-bottom: 8px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body div.reply {
position: static;
margin-top: 8px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body div.reply a {
color: #b0b3b8;
font-size: 13px;
font-weight: 600;
text-transform: none;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body div.reply a:hover {
text-decoration: underline;
} #madara-comments.comments-area .comments-title {
font-size: 20px;
font-weight: 700;
color: #e4e6eb;
margin-bottom: 16px;
} .comments-sort {
margin-bottom: 16px;
}
.comments-sort select {
background: #3a3b3c;
border: 1px solid #3a3b3c;
border-radius: 6px;
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
color: #e4e6eb;
cursor: pointer;
} @media (max-width: 767px) {
.comment-action-buttons {
gap: 4px;
}
.comment-action-btn {
padding: 6px 8px;
font-size: 13px;
}
.comment-action-btn i {
font-size: 16px;
}
.comment-stats {
font-size: 13px;
gap: 10px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-left {
width: 32px;
height: 32px;
margin-right: 8px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-right .comment-author .heading {
font-size: 14px;
}
#madara-comments.comments-area ol.comment-list li.comment article.comment-body .block-right .comment-content {
font-size: 14px;
}
} body.text-ui-dark .comment-actions-bar {
border-bottom-color: #3a3b3c;
}
body.text-ui-dark .comment-action-buttons {
border-top-color: #3a3b3c;
border-bottom-color: #3a3b3c;
}
body.text-ui-dark .comment-action-btn {
color: #b0b3b8;
}
body.text-ui-dark .comment-action-btn:hover {
background-color: #3a3b3c;
}
body.text-ui-dark #madara-comments.comments-area #respond.comment-respond {
background: #242526;
}
body.text-ui-dark #madara-comments.comments-area #respond.comment-respond h4.comment-reply-title {
color: #e4e6eb;
}
body.text-ui-dark #madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment {
background: #3a3b3c;
border-color: #3a3b3c;
color: #e4e6eb;
}
body.text-ui-dark
#madara-comments.comments-area
#respond.comment-respond
.comment-form
> *:not(.comment-form-comment):not(.form-submit):not(.comment-notes):not(.logged-in-as)
input {
background: #3a3b3c;
border-color: #3a3b3c;
color: #e4e6eb;
}
body.text-ui-dark #madara-comments.comments-area ol.comment-list li.comment article.comment-body {
background: #242526;
border-color: #3a3b3c;
}
body.text-ui-dark
#madara-comments.comments-area
ol.comment-list
li.comment
article.comment-body
.block-right
.comment-author
.heading {
color: #e4e6eb;
}
body.text-ui-dark
#madara-comments.comments-area
ol.comment-list
li.comment
article.comment-body
.block-right
.comment-content {
color: #e4e6eb;
}
body.text-ui-dark .comment-stats {
color: #b0b3b8;
}