FRONTEND_MVC/assets/less/components/post.less

.post-view{
  .share-this{
    overflow: hidden;
	text-align: center;
	margin:10px;
  }
  .youtube-iframe-placeholder{
    cursor: pointer;
    &:after{
      content: "";
      position: absolute;
      width: 68px;
      height: 68px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background: url(/img/youtube-red.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  #infinity_newsfeed{
    display: none;
    .post{
      border-top: 1px solid @border-gray;
      .lead{
        padding-bottom: 0;
      }
    }
  }
  @media(max-width: @size-mobile){
    #lenta-container{
      display: none;
    }
    #infinity_newsfeed{
      display: flex;
      .list{
        max-width: 100%;
        .post{
          .commnets{
            margin-left: 20px;
            svg{
              width: 10px;
              height: 10px;
              fill: #a8a8a8;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
.post{
  background: white;
  padding: 30px;
  @media(max-width: @size-mobile) {
    margin: 0 -15px;
    padding: 15px;
  }
  iframe{
    max-width: 100% !important;
    width: 100%;
//    height: auto;
//    aspect-ratio: 16/9; //не все iframe видео
  }
  h1{
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  h2{
    font: 30px/30px "Source Serif Pro","Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
    color: #222;
    font-weight: bold;
	line-height: 1.5;
  }
  a{
    color: @link-color;
  }
  .person{
	  border-bottom: dashed 1px #888;
  }
  .lead{
    font-size: 20px;
    line-height: 140%;
    padding-bottom: 20px;
    color: #737373;
  }
  .published_at,.image-title{
    margin-bottom: 20px;
    font: 12px/14px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
    color: #878787;
  }
  .image-title-fix{
		position: relative;
		background-color: #fff;
		width: 100%;
		display: flex;
		padding-top: 20px;
  }
  .share_and_comment{
    display: flex;
    a{
      width: 41px;
      height: 41px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(59,85,115,.08);
      border-radius: 11px;
      margin-right: 5px;
      &.comments_btn{
        width: auto;
        padding: 0 20px;
        font: 14px/1 "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
        color: #3b5573;
      }
      img{
        width: 15px;
        height: 15px;
      }
      svg{
        fill: #00077b;
        &.icon-ok{
          width: 9px;
          height: 15px;
        }
        &.icon-vk{
          width: 16px;
          height: 9px;
        }
        &.icon-tw{
          width: 15px;
          height: 12px;
        }
      }
    }
  }
  .text{
    font: 20px/30px "Source Serif Pro","Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
    color: #222;
    h6 {
      background-color: #f7f5ee;
      padding: 20px 10px 20px 20px;
      margin: 30px 0;
      border-left: 2px solid #f6911f;
      line-height: 150%;
      font-size: 20px;
    }
    h5{
      margin-top: -10px;
      color: #767676;
      font-size: 0.83em;
    }
    .iframe-wrapper{
      max-width: 100%;
      margin-bottom: 30px;
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      iframe{
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
	div.pic{
		margin-bottom: 20px;
	}
	.advertisement{
		border-radius: 5px;
		margin-right: 5px;
		padding: 5px 20px;
		font: 14px/16px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
		background-color: rgba(0,0,0,.06);
		line-height: 50px;
	}
	.med_advertisement{
		border-radius: 5px;
		margin-right: 5px;
		padding: 5px 20px;
		font: 16px/18px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif;
		background-color: rgba(0,0,0,.06);
	}
	img{
		max-width:100%;
	}
	.juxtapose img{
		max-width:none;
		width: initial !important;
	}
	ul{
		list-style: disc;
		padding-left: 40px;
		margin-top: 1em;
		margin-bottom: 1 em;
		margin-left: 0;
		margin-right: 0;
	}
	div.overlayadv{
		position: absolute;
		background-color: rgba(0,0,0,0.1);
		opacity:0.1;
	}
  }
  @import "post/pgs";
  @import "post/gallery";
  @import "post/inject";
  @import "post/img";
  @import "post/comments";
  @import "post/tags";
  @import "post/person-link";
  @import "post/person-wiget";
}
.reationbutton{
	filter: grayscale(1);
	transform: scale(1);
	display:block;
}
.reationbutton:hover{
	filter: grayscale(0);
	transform: scale(1.15);
}
.reactionb i{
	text-align:center;
	font-style: normal;
	color:#aaa;
	font-weight: 600;
	font-size:10px;
	margin:5px;
	line-height: 14px;
}
.reationbutton.active{
		filter: grayscale(0);
}