.page-item-detail {
border: 2px solid transparent;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #667eea 0%, #764ba2 100%)
border-box;
}
.page-item-detail:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
} .page-item-detail:nth-child(4n + 1) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #667eea 0%, #764ba2 100%)
border-box;
}
.page-item-detail:nth-child(4n + 2) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
border-box;
}
.page-item-detail:nth-child(4n + 3) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
border-box;
}
.page-item-detail:nth-child(4n + 4) {
background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)
border-box;
} .page-item-detail:nth-child(4n + 1):hover {
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 20px rgba(118, 75, 162, 0.3);
}
.page-item-detail:nth-child(4n + 2):hover {
box-shadow: 0 8px 25px rgba(240, 147, 251, 0.5), 0 0 20px rgba(245, 87, 108, 0.3);
}
.page-item-detail:nth-child(4n + 3):hover {
box-shadow: 0 8px 25px rgba(79, 172, 254, 0.5), 0 0 20px rgba(0, 242, 254, 0.3);
}
.page-item-detail:nth-child(4n + 4):hover {
box-shadow: 0 8px 25px rgba(67, 233, 123, 0.5), 0 0 20px rgba(56, 249, 215, 0.3);
} .c-page__content .widget .page-item-detail {
border-width: 2px;
} @media (max-width: 768px) {
.page-item-detail {
border-width: 1.5px;
}
.page-item-detail:hover {
transform: translateY(-3px);
}
}
@media (max-width: 480px) {
.page-item-detail {
border-width: 1px;
}
}.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;
}body.manga-page .page-content-listing.single-page .listing-chapters_wrap {
background: #1a1a1a;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
} .c-blog__heading.style-2 {
background: transparent;
border-bottom: 2px solid #333;
padding-bottom: 15px;
margin-bottom: 20px;
}
.c-blog__heading.style-2 h2 {
color: #fff;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
} body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap {
background: transparent;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 0;
} body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li.wp-manga-chapter {
background: #242526;
border: 1px solid #3a3b3c;
border-radius: 6px;
padding: 12px 15px;
margin: 0;
position: relative;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 60px;
}
body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap
li.wp-manga-chapter:hover {
background: #2d2e2f;
border-color: #4a4b4c;
transform: translateY(-2px);
} body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap
li.wp-manga-chapter:before {
display: none;
} body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li:after {
display: none;
} body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li .wp-manga-chapter a {
color: #e4e6eb;
font-size: 14px;
font-weight: 500;
padding: 0;
display: block;
margin-bottom: 5px;
}
body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap
li
.wp-manga-chapter
a:hover {
color: #fff;
} body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap
li
.chapter-release-date {
color: #b0b3b8;
font-size: 12px;
position: static;
transform: none;
display: block;
margin-top: 5px;
} body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap
li
.chapter-release-date
i {
background: #e74c3c;
color: #fff;
padding: 2px 6px;
border-radius: 3px;
font-style: normal;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
margin-left: 5px;
} .page-content-listing.single-page li.wp-manga-chapter.unread {
border-left: 3px solid #e74c3c;
}
.page-content-listing.single-page li.wp-manga-chapter.unread a {
color: #fff;
font-weight: 600;
} body.manga-page .listing-chapters_wrap .c-chapter-readmore {
text-align: center;
margin-top: 20px;
}
body.manga-page .listing-chapters_wrap .c-chapter-readmore .btn {
background: #3a3b3c;
color: #e4e6eb;
padding: 10px 30px;
border-radius: 6px;
border: 1px solid #4a4b4c;
transition: all 0.3s ease;
}
body.manga-page .listing-chapters_wrap .c-chapter-readmore .btn:hover {
background: #4a4b4c;
color: #fff;
} @media (max-width: 992px) {
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap {
grid-template-columns: repeat(3, 1fr);
}
} @media (max-width: 768px) {
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li.wp-manga-chapter {
padding: 10px 12px;
min-height: 55px;
}
} @media (max-width: 480px) {
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap {
grid-template-columns: 1fr;
}
} body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap.volumns .sub-chap {
display: contents;
}
body.manga-page
.page-content-listing.single-page
.listing-chapters_wrap
> ul.main.version-chap.volumns
.sub-chap
.sub-chap-list {
display: contents;
}
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap.volumns li.parent {
grid-column: 1 / -1;
background: #2d2e2f;
padding: 15px 20px;
border-radius: 6px;
margin-bottom: 10px;
}
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap.volumns li.parent > a {
color: #fff;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}.col-md-5col {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.col-md-5col {
flex: 0 0 20%;
max-width: 20%;
}
} @media (max-width: 767px) {
.col-md-5col {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 480px) {
.col-md-5col {
flex: 0 0 100%;
max-width: 100%;
}
} .c-row .col-md-5col .c-blog_item {
margin-bottom: 30px;
} .col-md-5col .c-blog__thumbnail img {
width: 100%;
height: auto;
object-fit: cover;
}