forked from UKSOURCE/hailearning.edu.vn
fix: resolve header.json conflict
This commit is contained in:
@@ -99,6 +99,54 @@ Version: 1.0.0
|
||||
color: var(--header);
|
||||
}
|
||||
|
||||
/* --------------------------------------------
|
||||
Pagination (match theme-btn style: round, red/white)
|
||||
---------------------------------------------- */
|
||||
.hai-pagination {
|
||||
gap: 10px;
|
||||
}
|
||||
.hai-pagination .page-item {
|
||||
margin: 0;
|
||||
}
|
||||
.hai-pagination .page-link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50% !important;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--white);
|
||||
color: var(--header);
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: none;
|
||||
}
|
||||
.hai-pagination .page-link:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.hai-pagination .page-link:hover {
|
||||
background-color: var(--theme);
|
||||
border-color: var(--theme);
|
||||
color: var(--white);
|
||||
}
|
||||
.hai-pagination .page-item.active .page-link,
|
||||
.hai-pagination .page-item.active span.page-link {
|
||||
background-color: var(--theme);
|
||||
border-color: var(--theme);
|
||||
color: var(--white);
|
||||
}
|
||||
.hai-pagination .page-item.disabled .page-link,
|
||||
.hai-pagination .page-item.disabled span.page-link {
|
||||
opacity: 0.6;
|
||||
background: var(--white);
|
||||
border-color: var(--border);
|
||||
color: var(--header);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
color: var(--theme-2);
|
||||
text-transform: capitalize;
|
||||
@@ -6548,6 +6596,10 @@ html.lenis body {
|
||||
.recent-thumb
|
||||
img {
|
||||
border-radius: 8px;
|
||||
width: 88px;
|
||||
min-width: 88px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.main-sideber
|
||||
.news-sideber-box
|
||||
@@ -6633,10 +6685,28 @@ html.lenis body {
|
||||
}
|
||||
|
||||
.news-details-wrapper .news-details-post .news-details-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 852px;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
.news-details-wrapper .news-details-post .news-details-image img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.news-details-wrapper .news-details-post .news-details-image img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.news-details-wrapper .news-details-post .details-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@@ -6669,6 +6739,32 @@ html.lenis body {
|
||||
height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
/* Gallery images responsive for mobile */
|
||||
@media (max-width: 991px) {
|
||||
.news-details-wrapper .news-details-post .details-content .gallery-images-row {
|
||||
justify-content: space-between;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-top: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item {
|
||||
flex: 0 0 47.5%;
|
||||
max-width: 47.5%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item .thumb {
|
||||
margin: 0;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .gallery-images-row .gallery-item .thumb img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .sideber {
|
||||
background-color: var(--theme-2);
|
||||
padding: 24px 30px;
|
||||
@@ -6813,9 +6909,19 @@ html.lenis body {
|
||||
.comments-area
|
||||
.news-single-comment {
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment
|
||||
.image {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
@@ -6823,7 +6929,12 @@ html.lenis body {
|
||||
.news-single-comment
|
||||
.image
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
min-width: 80px;
|
||||
min-height: 80px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
@@ -6836,6 +6947,33 @@ html.lenis body {
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment {
|
||||
position: relative;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment
|
||||
.content
|
||||
.head {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment
|
||||
.content
|
||||
.head
|
||||
.con {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
@@ -6852,6 +6990,8 @@ html.lenis body {
|
||||
color: var(--white);
|
||||
background-color: var(--header);
|
||||
border-radius: 100px;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
@@ -6863,6 +7003,34 @@ html.lenis body {
|
||||
.reply:hover {
|
||||
background-color: var(--theme);
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment
|
||||
.reply-absolute {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: var(--white);
|
||||
background-color: var(--header);
|
||||
border-radius: 100px;
|
||||
padding: 6px 14px;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
.comments-area
|
||||
.news-single-comment
|
||||
.reply-absolute:hover {
|
||||
background-color: var(--theme);
|
||||
}
|
||||
.news-details-wrapper
|
||||
.news-details-post
|
||||
.details-content
|
||||
@@ -6879,6 +7047,116 @@ html.lenis body {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
/* Comments responsive for mobile */
|
||||
@media (max-width: 767px) {
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .comments-heading {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .comments-heading h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment {
|
||||
gap: 12px !important;
|
||||
padding-top: 16px !important;
|
||||
padding-bottom: 16px !important;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image {
|
||||
flex-shrink: 0;
|
||||
width: 50px;
|
||||
min-width: 50px;
|
||||
max-width: 50px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head {
|
||||
gap: 8px !important;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .reply-absolute {
|
||||
top: 12px;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con span {
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .con h4 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content .head .reply {
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .content p {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .replies {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .replies .news-single-comment {
|
||||
padding-top: 12px !important;
|
||||
padding-bottom: 12px !important;
|
||||
}
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .btn-outline-primary,
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .btn-outline-secondary {
|
||||
font-size: 14px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Comment avatar (initial letter) */
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
background: #6c757d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.news-details-wrapper .news-details-post .details-content .comments-area .news-single-comment .image .comment-avatar-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.news-details-wrapper .news-details-post .details-content .form-clt {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user