/home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/blog/_postbox.scss
@use '../../utils' as *;
/*----------------------------------------*/
/* 5.2 Postbox css
/*----------------------------------------*/
// postbox css start
.mt-postbox {
&-title {
& a {
&:hover {
// color: var(--mt-theme-1);
}
}
}
&-content {
padding: 25px 35px 35px 35px;
border: 1px solid #fff;
background: #fff;
@media #{$md} {
padding: 25px 20px 35px 20px;
}
@media #{$xs} {
padding: 25px 15px 35px 15px;
}
}
&-meta {
& span {
height: 40px;
line-height: 40px;
color: var(--mt-common-black);
display: inline-block;
border: 1px solid var(--mt-border-1);
border-radius: 50px;
text-align: center;
padding: 0px 20px;
margin: 4px 1px;
transition: 0.3s;
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-black);
}
&:after {
position: absolute;
content: "";
background: #57595C;
height: 16px;
width: 2px;
right: 0;
top: 2px;
}
& i {
margin-right: 2px;
font-size: 15px;
}
&:last-child {
&:after {
display: none;
}
}
}
}
&-title {
@media #{$xs} {
font-size: 30px;
}
}
&-details {
& blockquote {
border: 1px solid #57595C;
text-align: center;
border-radius: 20px;
padding: 60px;
@media #{$xs} {
padding: 30px;
}
& i {
font-size: 50px;
margin-bottom: 25px;
}
& p {
font-size: 30px;
font-family: var(--mt-ff-heading);
color: #000;
line-height: 1.2;
margin-bottom: 30px;
}
& cite {
color: #0A0E1A;
font-size: 20px;
font-style: normal;
}
}
}
&-tag {
@media #{$xs} {
margin-bottom: 20px;
}
& span {
color: var(--mt-common-black);
font-weight: 900;
margin-right: 5px;
}
& a {
font-size: 14px;
font-weight: 600;
border: 1px solid var(--mt-border-1);
color: var(--mt-common-black);
padding: 0px 15px;
height: 40px;
text-align: center;
display: inline-block;
line-height: 40px;
border-radius: 5px;
margin-right: 5px;
margin-bottom: 5px;
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-black);
}
}
}
&-social {
& a {
font-size: 18px;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
color: var(--mt-common-black);
border: 1px solid var(--mt-border-1);
border-radius: 50%;
transition: 0.3s;
margin-right: 5px;
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-black);
border: 1px solid var(--mt-theme-1);
}
}
}
&-comments {
& ul {
list-style: none;
& li {
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 1px solid var(--mt-border-1);
&:last-child {
border-bottom: none;
}
&.children {
padding-left: 60px;
@media #{$xs} {
padding-left: 20px;
}
}
}
}
&-thumb {
float: left;
& img {
width: 86px;
height: 86px;
margin-right: 20px;
object-fit: cover;
border-radius: 50px;
}
}
&-text {
overflow: hidden;
position: relative;
& span {
font-size: 16px;
display: inline-block;
margin-bottom: 8px;
& cite {
width: 30px;
height: 1px;
background: var(--mt-border-3);
display: inline-block;
margin: 0 5px;
@include transform(translateY(-3px));
}
& i {
width: 7px;
height: 7px;
background: var(--mt-border-3);
border-radius: 50px;
display: inline-block;
margin: 0 5px;
@include transform(translateY(-1px));
}
}
}
&-author {
font-size: 24px;
@media #{$xs} {
font-size: 20px;
}
}
}
}
.mt-blog-video {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
@include transform(translateY(-50%));
& a {
height: 100px;
width: 100px;
border-radius: 100%;
color: var(--mt-common-black);
line-height: 100px;
font-size: 21px;
background-color: var(--mt-theme-1);
display: inline-block;
}
}
.reply {
position: absolute;
left: 25%;
top: 0px;
font-size: 15px;
border: 1px solid var(--mt-border-1);
padding: 3px 15px;
color: var(--mt-common-black);
transition: 0.3s;
@media #{$xl} {
left: 30%;
}
@media #{$lg} {
left: 35%;
}
@media #{$md} {
left: 35%;
}
@media #{$xs} {
left: inherit;
right: 0;
}
&:hover {
color: var(--mt-common-white);
background-color: var(--mt-common-black);
}
}
.mt-swiper-blog-button {
height: 70px;
width: 70px;
background: var(--mt-theme-1);
display: inline-block;
border-radius: 100%;
line-height: 70px;
font-size: 25px;
text-align: center;
position: absolute;
top: 50%;
z-index: 2;
@include transform(translateY(-50%));
left: 30px;
color: var(--mt-common-black);
&-prev {
@include transform(translateY(-50%));
}
&-next {
left: auto;
right: 30px;
}
}
.postbox {
&__author {
padding: 35px 30px;
border: 1px solid var(--mt-border-1);
@media #{$lg,$md} {
padding: 45px 40px;
}
@media #{$xs} {
padding: 35px 20px;
flex-wrap: wrap;
}
&-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
color: var(--mt-common-black);
}
&-thumb {
flex: 0 0 auto;
margin-right: 25px;
@media #{$xs} {
margin-bottom: 30px;
}
}
&-content {
margin-right: 30px;
& p {
color: #464946;
text-transform: capitalize;
@media #{$lg,$md,$xs} {
font-size: 14px;
& br {
display: none;
}
}
}
}
&-social {
position: absolute;
right: 10px;
top: 20px;
& a {
font-size: 15px;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
display: block;
color: var(--mt-common-white);
background-color: var(--mt-common-black);
border-radius: 50%;
transition: 0.3s;
margin-bottom: 5px;
&:hover {
color: var(--mt-common-black);
background-color: var(--mt-theme-1);
}
}
}
}
&__pagination {
gap: 90px;
& button {
font-size: 24px;
color: var(--mt-common-black);
font-weight: 700;
& span {
font-size: 25px;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
color: var(--mt-common-black);
border: 1px solid var(--mt-border-1);
border-radius: 50%;
transition: 0.3s;
margin-right: 5px;
margin-left: 5px;
}
&.active {
& span {
background-color: var(--mt-theme-1);
border: 1px solid var(--mt-theme-1);
color: var(--mt-common-black);
}
}
&:hover {
color: var(--mt-common-black);
& span {
background-color: var(--mt-theme-1);
border: 1px solid var(--mt-theme-1);
color: var(--mt-common-black);
}
}
}
}
}