File: /var/www/html/wpprotonperinggit/wp-content/themes/voiture/sass/template/_post.scss
/*
* General Post Style using for all with naming class entry
*/
.post.no-results{
text-align: center;
.widget-search{
margin: 25px auto 0;
max-width: 600px;
}
.title-no-results{
color: $text-color;
margin: 0 0 10px;
color: $headings-color;
font-size: 25px;
@media(min-width: 1200px){
font-size: 30px;
}
}
margin: 0 0 30px;
@media(min-width: 1200px){
margin: 0 0 50px;
}
}
.entry-title{
font-size: 16px;
margin: 0;
word-wrap: break-word;
text-transform: capitalize;
}
.detail-title{
margin: 0 0 10px;
font-size: 22px;
@media(min-width: 1200px){
font-size: 34px;
margin: 0 0 15px;
}
}
.entry-create{
font-size: 13px;
margin: 0 0 15px;
> *{
@include rtl-margin-right(2px);
}
.author{
font-style: italic;
text-transform: capitalize;
}
}
.comment-form-cookies-consent{
[type="checkbox"]{
@include rtl-margin-right(7px);
}
}
.entry-link{
margin-top: 20px;
.readmore {
color: $theme-color;
text-transform: capitalize;
font-weight: 500;
font-size: 12px;
&:hover{
color: #000;
}
}
}
.entry-meta{
margin:0;
.fa,.icon{
@include rtl-margin-right(3px);
}
}
.wp-block-quote,
blockquote{
@include border-radius(8px);
font-weight: 500;
font-style: italic;
color:$link-color;
font-size: var(--voiture-main-font-size);
padding:20px 35px;
@media(min-width: 1200px){
padding:40px 55px;
}
border:0;
background:#EEF2F6;
cite{
font-size: var(--voiture-main-font-size);
color: $text-color;
}
p{
margin-bottom: 12px;
}
}
.entry-vote{
z-index: 1;
display: table;
text-align: center;
top: 20px;
position: absolute;
background: rgba($black,.5);
@include square(44px);
@include rtl-right(20px);
.entry-vote-inner{
color: $white;
display: table-cell;
vertical-align: middle;
font-weight: $headings-font-weight;
}
&.vote-perfect{
.entry-vote-inner{
color: $red;
}
}
&.vote-good{
.entry-vote-inner{
color: $yellow;
}
}
&.vote-average{
.entry-vote-inner{
color: #91e536;
}
}
&.vote-bad{
.entry-vote-inner{
color: $orange;
}
}
&.vote-poor{
.entry-vote-inner{
color: $green;
}
}
}
.type-post{
margin-bottom:$theme-margin;
}
.blog-title{
margin-bottom: $theme-margin;
}
.layout-posts-list{
> .post {
margin-bottom: $theme-margin / 2;
@media(min-width: 992px){
margin-bottom: $theme-margin;
}
}
}
//commentform
#review_form,
#commentform{
margin-bottom:10px;
label{
font-weight: 400;
color: $link-color;
margin:0 0 10px;
}
.comment-form-cookies-consent{
display: none;
font-size: 14px;
label{
margin-bottom: 0;
display: inline;
}
}
.form-group{
margin-bottom: 20px;
position: relative;
}
.form-control{
margin: 0;
}
textarea.form-control{
height: 120px;
@media(min-width: 1200px){
height: 190px;
}
resize: none;
}
.form-submit{
margin-bottom: 0;
}
#cancel-comment-reply-link{
color: $brand-danger;
}
#submit{
@media(min-width: 1200px){
min-width: 260px;
text-align: center;
}
}
}
/* Post type: List widget list*/
.posts-list{
list-style: none;
padding:0;
margin:0;
> li{
margin: 0 0 20px;
&:last-child{
margin:0;
}
}
.entry-title{
font-weight: 400;
line-height: $line-height-base;
font-size: $font-size-base;
margin:0 0 5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.image{
width:105px;
@include rtl-padding-right(15px);
+ .inner{
width: calc(100% - 105px);
}
.image-inner{
max-height: 80px;
overflow: hidden;
@include border-radius($border-radius-base);
}
}
}
// post-grid
.post-layout{
@include transition(all 0.3s ease-in-out 0s);
background: #fff;
.post-sticky{
background:$brand-danger;
color:#fff;
display:inline-block;
padding:0 15px;
margin:5px 0;
font-size:14px;
}
.categories-name{
display: inline-block;
color: #fff;
padding:3px 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
@include border-radius(50px);
background-color:$theme-color;
}
.top-detail-info{
margin: 0;
}
.entry-title{
margin-top: 10px;
.stick-icon{
display: inline-block;
line-height: 1;
@include rtl-margin-right(7px);
}
}
.more-bottom{
margin-top: 15px;
@media(min-width: 1200px){
margin-top: 20px;
}
}
.post-thumbnail{
overflow: hidden;
display: block;
@include border-radius($border-radius-base);
img{
@include transition(all 0.3s ease-in-out 0s);
}
}
.top-image{
position:relative;
margin-bottom: 18px;
.list-categories{
top:10px;
@include rtl-left(10px);
@media(min-width: 768px){
top:20px;
@include rtl-left(20px);
}
z-index: 2;
position:absolute;
}
}
iframe{
max-width: 100%;
}
.col-content{
.list-categories{
margin-bottom: 10px;
}
}
&.sticky{
border-color: $theme-color;
@include box-shadow(0 18px 60px 0 rgba(23, 26, 33, 0.05));
}
&:hover{
.post-thumbnail{
img{
@include scale(1.05);
}
}
.btn-readmore .plus{
background-color: $theme-color;
color: #fff;
@include box-shadow(0 7px 20px 0 var(--voiture-theme-color-020));
}
}
}
.post-grid{
overflow: hidden;
@include border-radius($border-radius-base);
border: 1px solid $border-color;
padding: 10px;
.top-image{
margin:0;
}
.col-content{
padding:15px 10px;
}
.entry-title{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.post-list-item{
border:1px solid $border-color;
padding: 10px;
overflow: hidden;
@include border-radius($border-radius-base);
.top-image{
margin:0;
width: 200px;
@media(min-width: 768px){
width: 300px;
}
@media(min-width: 1200px){
width: 390px;
}
+ .col-content{
padding: 0 15px;
flex:1;
-ms-flex:1;
-webkit-box-flex:1;
@media(min-width: 1200px){
padding:0 30px;
}
}
}
.col-content{
width: 100%;
}
.entry-title{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
@media(min-width: 992px){
font-size: 20px;
}
}
.description{
margin-top: 5px;
@media(min-width: 1200px){
margin-top: 12px;
}
}
&.nothumb{
@media(min-width: 1200px){
padding: 30px;
}
}
.groups-button{
margin-top: 10px;
}
.product-block{
border: 0;
margin: 0;
padding: 0;
@include border-radius(0);
background-color: transparent;
}
}
/* Post type: By Category */
.top-blog-info{
padding:25px 0;
margin-bottom:20px;
border-bottom:1px solid $border-color;
i{
@include rtl-margin-right(10px);
}
.categories{
@include rtl-margin-right(35px);
}
.author{
a{
color: $theme-color;
}
}
a{
color: $text-color;
&:hover,&:active{
color:$theme-color;
}
}
}
.category-posts{
position: relative;
&::after{
content: "";
top: 20px;
position: absolute;
@include rtl-right(0);
@include size(1px,1000px);
background: $border-color;
}
.post{
border-bottom: 1px solid $border-color;
}
.category-posts-label{
padding: 1px 3px;
@include border-radius(0);
background: $theme-color;
font-weight: $category-posts-label-font-weight;
@include font-size(font-size,$category-posts-label-font-size);
text-transform: $category-posts-label-transform;
a{
color: $category-posts-label-color;
}
}
.entry-meta{
&::after{
display: none;
}
}
.posts-more{
.post{
&:last-child{
border: 0px;
}
}
.entry-title{
@include font-size(font-size,$category-posts-subtitle-font-size);
a{
color: $gray-light;
&:hover{
color: $theme-color;
}
}
}
}
}
/*------------------------------------*\
Comment List
\*------------------------------------*/
.comment-list{
padding:0;
margin: 0;
list-style: none;
.comment-respond{
margin-bottom: 20px;
@media(min-width: 1200px){
margin-bottom: 40px;
}
small{
@include rtl-margin-left(5px);
}
#submit{
min-width: auto !important;
}
textarea#comment{
height: 120px;
}
}
#cancel-comment-reply-link{
color:$brand-danger;
}
.comment-author{
> *{
@include rtl-margin-right(15px);
&:last-child{
@include rtl-margin-right(0);
}
}
}
.name-comment{
color: $headings-color;
margin:0 ;
font-weight: 600;
text-transform: capitalize;
line-height: 1.4;
+ .star-rating{
@include rtl-margin-left(15px);
}
}
.children{
list-style: none;
margin: 0;
padding:0;
@include rtl-padding-left(15px);
@media(min-width: 1200px){
@include rtl-padding-left(75px);
}
}
.comment-edit-link{
color:$brand-danger;
}
.comment-reply-link{
color:#02ccad;
white-space: nowrap;
}
.comment-box{
overflow:hidden;
@include rtl-padding-left(10px);
@media(min-width: 1200px){
@include rtl-padding-left(20px);
}
}
.comment-text{
margin-top: 12px;
p:last-child{
margin:0;
}
}
div.avatar{
@include size(70px,70px);
overflow: hidden;
@include border-radius(50%);
@include rtl-float-left();
img{
margin:0;
}
}
.the-comment{
margin: 0 0 20px;
@media(min-width:1200px){
margin: 0 0 40px;
}
}
}
.commentform {
@media(min-width:1200px){
padding-top: 20px;
}
.comment-notes{
display: none;
}
}
// comment default
.comment-respond{
border:1px solid $border-color;
@include border-radius($border-radius-base);
padding:20px;
background-color: #F9F9F9;
@media(min-width: 1200px){
padding: 40px;
}
#commentform{
margin-bottom: 0;
}
}
.logged-in-as{
a + a{
color: $brand-danger;
}
}
/*------------------------------------*\
Single post
\*------------------------------------*/
.entry-content-detail{
.list-categories{
margin-bottom: 10px;
}
.categories-name{
display: inline-block;
color: #fff;
padding:3px 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
@include border-radius($border-radius-base);
background-color:$theme-color;
}
.entry-thumb{
margin-bottom: 20px;
@media(min-width: 1200px){
margin-bottom: 30px;
}
}
}
.social-networks{
li{
padding-left: 10px;
padding-right: 10px;
&:last-child{
a{
margin-right: 0;
}
}
a{
font-size: 14px;
&:hover{
color: $theme-color;
}
}
}
}
.tag-links,
.post-share {
margin-bottom: 10px;
span i {
@include rtl-margin-right(5px);
}
}
.detail-post{
#comments{
@media(min-width: 1200px){
padding-top: 20px;
}
}
}
//post-navigation
.post-navigation{
position: relative;
@media(min-width: 1200px){
padding:5px 0;
}
.screen-reader-text{
display: none;
}
.nav-links{
@include flexbox();
margin-left: -($theme-margin / 2);
margin-right: -($theme-margin / 2);
> *{
width: 50%;
@include rtl-float-left();
padding-left: $theme-margin / 2;
padding-right: $theme-margin / 2;
i{
font-weight: 400;
font-size: 10px;
@include rtl-margin-right(5px);
}
&.nav-next{
@include rtl-text-align-right();
@include rtl-margin-left(auto);
i{
margin:0;
@include rtl-margin-left(5px);
}
.title-direct{
@include rtl-float-right();
}
}
> a{
&:hover{
.navi{
color: $theme-color;
}
}
}
}
.title-direct{
color: $link-color;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 80%;
}
.navi{
@include transition(all 0.3s ease-in-out 0s);
color: $link-hover-color;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 2px;
}
}
}
.author-info{
padding:20px 0;
@media(min-width:992px){
padding:40px 0;
}
border-top:1px solid $border-color;
.author-title{
font-size: 18px;
font-weight:400;
margin:0 0 5px;
}
.avatar-img {
@include rtl-padding-right(20px);
.avatar {
overflow: hidden;
max-width: none;
}
}
}
//related-posts
.wrapper-posts-releated{
background-color: #F6F8F9;
padding: $theme-margin 0;
@media(min-width: 768px){
padding: 45px 0;
}
@media(min-width: 1200px){
padding:85px 0;
}
&.sublistings{
border-top: 1px solid $border-color;
background-color: #fff;
}
.listing-item,
.type-post{
margin-bottom: 0;
}
}
.related-posts{
.title{
font-size: 20px;
margin:0 0 15px;
text-align: center;
@media(min-width:1200px){
margin-bottom: 30px;
font-size: 30px;
}
}
}
/*------------------------------------*\
Blog Masonry Page
\*------------------------------------*/
.blog-masonry{
.entry-thumb{
margin-bottom: 0;
}
}
// post gallery
.gallery{
margin-left: -($theme-margin / 2);
margin-right: -($theme-margin / 2);
overflow: hidden;
.gallery-item{
@include rtl-float-left();
margin-bottom:($theme-margin / 2);
padding-right: ($theme-margin / 2);
padding-left: ($theme-margin / 2);
position: relative;
figcaption{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: #fff;
max-height: 50%;
font-size: 12px;
background: rgba(0,0,0,0.5);
margin-left: ($theme-margin / 2);
margin-right: ($theme-margin / 2);
@include opacity(0);
padding:8px ($theme-margin / 2);
}
&:hover{
figcaption{
@include opacity(1);
}
}
}
&.gallery-columns-9{
.gallery-item{
width: 11%;
}
}
&.gallery-columns-8{
.gallery-item{
width: 12.5%;
}
}
&.gallery-columns-7{
.gallery-item{
width: 14%;
}
}
&.gallery-columns-6{
.gallery-item{
width: 16.5%;
}
}
&.gallery-columns-5{
.gallery-item{
width: 20%;
}
}
&.gallery-columns-4{
.gallery-item{
width: 25%;
}
}
&.gallery-columns-3{
.gallery-item{
width: 33%;
}
}
&.gallery-columns-1{
.gallery-item{
width: 100%;
}
}
&.gallery-columns-2{
.gallery-item{
width: 50%;
}
}
}
// navigation
.comment-navigation{
overflow: hidden;
padding: 20px 0;
.nav-links{
> div{
display: inline-block;
+ div{
line-height: 1.1;
@include rtl-margin-left($theme-margin / 2);
@include rtl-padding-left($theme-margin / 2);
@include rtl-border-left(2px solid $border-color);
}
}
}
}
.top-detail-info{
margin-bottom: 20px;
@media(min-width: 1200px){
margin-bottom: 40px;
}
> *{
display: inline-block;
vertical-align:middle;
@include rtl-margin-right(10px);
@media(min-width: 1200px){
@include rtl-margin-right(18px);
}
&:last-child{
@include rtl-margin-right(0);
}
}
a{
color: $text-color;
&:hover,&:focus{
color: $link-color;
}
}
i{
display: inline-block;
font-size: 15px;
@include rtl-margin-right(2px);
vertical-align: middle;
@media(min-width: 1200px){
@include rtl-margin-right(5px);
}
}
}
.main-content-detail {
padding-top: $theme-padding;
@media(min-width: 1200px){
padding-top: 70px;
}
&.main .inner-content-bottom{
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
&.container-fluid{
padding-left: 0;
padding-right: 0;
}
}
.detail-post{
iframe{
max-width: 100%;
}
.bottom-info{
margin-bottom:20px;
.suffix{
font-style:italic;
}
.author{
text-transform:uppercase;
}
> div{
display:inline-block;
vertical-align:middle;
}
a{
color:$text-color;
&:hover,&:active{
color:$theme-color;
}
}
}
.tag-social {
border-bottom: 1px solid $border-color;
border-top: 1px solid $border-color;
padding:20px 0;
@media(min-width: 1200px){
padding:45px 0;
}
}
.entry-tags-list{
display: block;
margin:10px 0 0;
position: relative;
}
.post-navigation{
border-width: 1px 0;
border-style: solid;
border-color: $border-color;
padding:20px 0;
margin-top: -1px;
@media(min-width: 1200px){
padding:45px 0;
}
}
.entry-description{
margin-bottom: 20px;
@media(min-width: 1200px){
margin-bottom: 45px;
}
}
}
.author-post{
.avatar {
@include border-radius(50%);
}
.avatar-img{
@include rtl-float-left();
@include rtl-padding-right(8px);
}
.name-author{
display:inline-block;
margin-top:9px;
}
}
.author-wrapper{
.avatar-img{
overflow: hidden;
@include border-radius(50%);
@include size(40px,40px);
@include flexbox();
align-items:center;
-webkit-align-items:center;
-ms-align-items:center;
justify-content:center;
-webkit-justify-content:center;
-ms-justify-content:center;
img{
margin:0 !important;
}
}
.author-title{
font-size: $font-size-base;
font-weight: 400;
margin:0;
text-transform: capitalize;
a{
color: #777777;
&:hover,&:focus{
color: $link-color;
}
}
}
.right-inner{
@include rtl-padding-left(10px);
}
}
.comment-reply-title{
font-size: 18px;
margin: 0 0 10px;
@media(min-width: 1200px){
margin-bottom: 15px;
}
#cancel-comment-reply-link{
color:$brand-danger;
}
}
.comments-title{
font-size: 18px;
margin: 0 0 20px;
@media(min-width: 1200px){
margin-bottom: 30px;
}
}