/home/moonrcjl/template.moontelict.com/a.laxfy/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 #F8F8F8;
background: #F8F8F8;
@media #{$lg} {
padding: 25px 25px 35px 25px;
}
@media #{$md} {
padding: 25px 15px 35px 15px;
}
@media #{$xs} {
padding: 25px 10px 35px 10px;
}
}
&-meta {
& span {
height: 30px;
line-height: 30px;
color: #000;
display: inline-block;
border: 1px solid #ddd;
border-radius: 50px;
text-align: center;
padding: 0px 15px;
margin: 4px 1px;
& a {
&:hover {
color: var(--mt-theme-1);
}
}
&: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: 25px;
}
}
&-details {
& blockquote {
border: 1px solid var(--mt-border-2);
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: var(--mt-common-black);
line-height: 1.2;
margin-bottom: 30px;
}
& cite {
color: #0A0E1A;
font-size: 20px;
font-style: normal;
}
}
&-list {
& ul {
& li {
list-style: none;
margin-bottom: 20px;
& i {
margin-right: 5px;
}
}
}
}
}
&-4 {
& .mt-postbox-content {
padding: 0px 35px 35px 35px;
border: 1px solid transparent;
background: transparent;
@media #{$xs} {
padding: 0;
}
}
}
&-tag {
@media #{$xs} {
margin-bottom: 20px;
}
& span {
color: var(--mt-common-black);
font-weight: 900;
margin-right: 5px;
}
& a {
font-size: 13px;
font-weight: 900;
border: 1px solid var(--mt-border-2);
color: var(--mt-common-black);
padding: 0px 20px;
height: 50px;
text-align: center;
display: inline-block;
line-height: 50px;
border-radius: 50px;
margin-right: 5px;
margin-bottom: 5px;
&:hover {
background-color: var(--mt-theme-1);
color: #fff;
}
}
}
&-social {
& a {
border: 1px solid #57595C;
line-height: 42px;
text-align: center;
font-size: 14px;
color: #57595C;
border-radius: 50px;
height: 42px;
width: 42px;
display: inline-block;
@include transition(.4s);
&:hover {
background-color: var(--mt-theme-1);
color: #fff;
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-2);
&.children {
padding-left: 60px;
@media #{$xs} {
padding-left: 20px;
}
}
}
}
&-thumb {
float: left;
& img {
width: 50px;
height: 50px;
margin-right: 20px;
object-fit: cover;
}
}
&-text {
overflow: hidden;
position: relative;
& span {
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
display: block;
margin-bottom: 8px;
}
}
&-author {
font-size: 20px;
margin-bottom: 5px;
}
}
&-2 {
& .mt-postbox {
&-content {
padding: 0px 130px;
border: 1px solid transparent;
background: transparent;
@media #{$md,$xs} {
padding: 0;
}
& .mtblog__meta {
& span {
color: #000;
& i {
margin: 0px 5px;
}
}
}
}
&-thumb-sm img {
width: 100%;
height: 186px;
object-fit: cover;
}
&-social {
& span {
font-size: 18px;
font-weight: 600;
color: #000;
margin-right: 10px;
}
}
}
}
&-3 {
& .mt-postbox {
&-content {
padding: 25px 0;
border: transparent;
background: #02203D;
}
&-meta {
& span {
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
& a:hover {
color: var(--mt-common-white);
}
}
}
&-title {
color: var(--mt-common-white);
}
&-content {
& p {
color: rgba(255, 255, 255, 0.7);
}
}
&-tag {
& span {
color: var(--mt-common-white);
}
& a {
font-size: 13px;
font-weight: 900;
border: 1px solid rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
&:hover {
background-color: var(--mt-theme-1);
color: #fff;
border: 1px solid var(--mt-theme-1);
}
}
}
&-social a {
border: 1px solid rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.7);
&:hover {
border: 1px solid var(--mt-theme-1);
}
}
}
}
&-5 {
& .mt-postbox-tag a:hover {
background-color: var(--mt-theme-3);
color: #000;
}
& .mt-postbox-social a:hover {
background-color: var(--mt-theme-3);
color: #000;
border: 1px solid var(--mt-theme-3);
}
}
}
.mt-blogpost {
&-3 {
& .mtcontact__form-inputbox {
& input,
textarea {
background-color: transparent;
border: 1px solid rgb(94 91 91 / 70%);
color: rgb(255 255 255 / 70%);
}
}
}
}
.reply {
position: absolute;
right: 0;
top: 0;
font-size: 15px;
border: 1px solid #ddd;
padding: 4px 10px;
color: #000;
@include transition(.4s);
&: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-white);
&-prev {
@include transform(translateY(-50%));
}
&-next {
left: auto;
right: 30px;
}
}
.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: #222;
line-height: 100px;
font-size: 21px;
background-color: var(--mt-theme-2);
display: inline-block;
}
}
.mt-text-btn {
color: #222;
& i {
@include transform(rotate(-45deg));
}
&:hover {
color: var(--mt-theme-1);
& i {
color: var(--mt-theme-1);
}
}
}