LESS

by lemon kazi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<div class="item">
										<div id="movie-iframe">
									        <div class="movie_thumbs_big">
									            									                <div id="player"></div>
									                									        </div>
									    </div>
										<div class="video">
											<!-- <p>video content</p> -->
											<div class="myIframe"> 
											   	<iframe src="http://www.youtube.com/embed/kLGaoYbR7LA?rel=0" frameborder="0">
									        	</iframe>
											</div>
											<!-- <a href="https://www.youtube.com/watch?v=kLGaoYbR7LA">


												<img src="https://img.youtube.com/vi/kLGaoYbR7LA/mqdefault.jpg" />
											</a> -->
										</div> 
										<div class="detail">
											<a href="http://local.bgmer.front/musics/test-copy-5/">
												<h5></h5>
												<h3>
												► test  Copy												</h3>
												<p class="description">
													<img alt="tag" src="http://local.bgmer.front/wp-content/themes/twentytwentyone-child/assets/images/[email protected]">
													cxxx, test music												</p>
												<p class="downloads">
													<span class="numberOfDownload">102</span><span>DL</span>
												</p>
											</a>
										</div>
										<div class="download clearfix">
											<a href="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" download="" data-file="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" data-post_id="96" data-type="short" class="download short long-video" id="short-video"><span class="download-icon"></span>SHORT <small>00:00:20</small></a>
											<a href="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" download="" data-file="http://local.bgmer.front/wp-content/uploads/2021/04/FullSizeRender.mov" data-post_id="96" data-type="long" class="download long long-video" id="long-video"><span...

CSS

.items {
        display: block;
        width: 99.7%;
        padding: 30px 2px 20px;
		@media (max-width: @Mobile) {
			width: 100%;
			padding: 0;
		}
        .item {
            display: block;
            float: left;
            width: 29.9%;
            margin-right: 5.1%;
            margin-bottom: 3.3%;
			@media (max-width: @Mobile) {
				float: none;
				width: 100%;
				margin: 0 0 45px 0;
			}
            &:nth-child(3n+3) {
                margin-right: 0;
            }
            .video {
                background: #ccc;
                height: 210px;
                border: 1.5px solid black;
                box-sizing: border-box;
				@media (max-width: @Mobile) {
					height: 169px;
				}
                p {
                    margin: 0;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .detail {
                a {
                    text-decoration: none;
					@media (max-width: @Mobile) {
						display: block;
					}
                    h5 {
                        color: #595757;
                        margin: 0;
                        padding: 7px 0 0px;
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: normal;
						@media (max-width: @Mobile) {
							font-size: 10px;
							font-family: @enfont;
							padding: 13px 0 0px 1px;
						}
                    }
                    h3 {
                        margin: 0;
                        font-size: 20px;
                        font-weight: bold;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: normal;
                        letter-spacing: normal;
 ...

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();

setInterval(function(){
    var padding = $("div").width()-$("div > span").width();
    $("div > span").html(padding/2);
},500);