responsive fixes and design completed
This commit is contained in:
jamilrehman
parent
a98ea93797
commit
b9aefe7aa9
22 changed files with 1984 additions and 2208 deletions
|
|
@ -66,7 +66,7 @@
|
|||
{if $total_vids}
|
||||
<div style="display: none" id="total_videos_recent">{$total_vids}</div>
|
||||
{/if}
|
||||
<div style="display: none" class="item-video col-lg-4 col-md-4 col-sm-4 col-xs-6">
|
||||
<div style="display: none" class="item-video col-lg-4 col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="clearfix thumb-holder">
|
||||
<a class="video-link" href="{videoLink($video)}" title="{$video.title|title}">
|
||||
<img class="img-responsive" src="{getThumb vdetails=$video size=512x320 }">
|
||||
|
|
|
|||
|
|
@ -13,16 +13,16 @@
|
|||
</div>
|
||||
<ul class="counters">
|
||||
<li>
|
||||
<i class="icon-videos"></i>{$user.total_videos} Videos
|
||||
<i class="icon-videos"></i>{$user.total_videos} <span>Videos</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-photos"></i>{$user.total_photos} Photos
|
||||
<i class="icon-photos"></i>{$user.total_photos} <span>Photos</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-views"></i>{$user.profile_hits} Views
|
||||
<i class="icon-views"></i>{$user.profile_hits} <span>Views</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-subscribers"></i>{$user.subscribers} Contacts
|
||||
<i class="icon-subscribers"></i>{$user.subscribers} <span>Contacts</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
<div class="clearfix row">
|
||||
{if $users}
|
||||
{foreach $users as $user}
|
||||
<div class="item-channel col-lg-3 col-md-3 col-sm-4 col-xs-12">
|
||||
<div class="item-channel col-lg-3 col-md-4 col-sm-4 col-xs-12">
|
||||
{include file="$style_dir/blocks/channels.html" block_type = 'itemChannel'}
|
||||
</div>
|
||||
{/foreach}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
{if $collections}
|
||||
{foreach from=$collections item=collection}
|
||||
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-6">
|
||||
<div class="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$baseurl}/view_collection.php?cid={$collection.collection_id}&type={$collection.type}" title="{$collection.collection_name}">
|
||||
|
|
|
|||
|
|
@ -47,6 +47,12 @@
|
|||
<script src="{$theme}/js/jquery-1.11.3.min.js"></script>
|
||||
<link rel="stylesheet" href="{$baseurl}/styles/global/jquery_ui.css">
|
||||
|
||||
<script>
|
||||
var loading = '<i class="glyphicon glyphicon-refresh animate-spin"></i> {lang code="loading"}...';
|
||||
var baseurl = "{$baseurl}";
|
||||
var imageurl = "{$imageurl}";
|
||||
var userid = "{userid()}";
|
||||
</script>
|
||||
<script src="{$theme}/js/custom.js"></script>
|
||||
|
||||
<script src="{$theme}/js/bootstrap.min.js"></script>
|
||||
|
|
@ -56,11 +62,6 @@
|
|||
|
||||
<script src="{$theme}/js/progress-circle.js"></script>
|
||||
|
||||
<script>
|
||||
var loading = '<i class="glyphicon glyphicon-refresh animate-spin"></i> {lang code="loading"}...';
|
||||
var baseurl = "{$baseurl}";
|
||||
var imageurl = "{$imageurl}";
|
||||
</script>
|
||||
<script src="{$baseurl}/js/clipbucket.js"></script>
|
||||
<script src="{$theme}/js/uslider_js/jquery.mousewheel.js"></script>
|
||||
<script src='https://www.google.com/recaptcha/api.js'></script>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,9 @@
|
|||
<span>clipbucket</span>
|
||||
</a>
|
||||
</h1>
|
||||
<button class="navbar-toggle" data-toggle="collapse" data-target="#bs-collapse">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<button class="navbar-toggle" data-toggle="collapse" data-target="#bs-collapse">Menu<span class="icon-down-arrow"></span></button>
|
||||
|
||||
<a href="javascript:void(0)" class="btn-search-toggle btn visible-xs">
|
||||
<i class="icon-search"></i>
|
||||
</a>
|
||||
|
|
@ -62,41 +60,42 @@
|
|||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col search">
|
||||
<form class="search-form" action="{link name='search_result'}">
|
||||
<div class="cbsearchtype">
|
||||
<div class="search-drop">
|
||||
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle search-drop-btn" type="button">
|
||||
<span class="search-type">{if $pageType}{$pageType|ucfirst}{elseif $currentPage == 'videos' || $currentPage == 'channels' || $currentPage == 'photos'}{$currentPage|ucfirst}{else}Videos{/if}</span>
|
||||
<span class="icon-down-arrow"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
{$counter = 1}
|
||||
{foreach from=$Cbucket->search_types item=t key=stypes}
|
||||
{if $stypes|lower == 'groups'}
|
||||
{continue}
|
||||
{/if}
|
||||
{if $counter == 3}
|
||||
<li value="{$stypes}" {if $pageType == $stypes || $currentPage == $stypes} class="active" {/if}>
|
||||
<a class="s-types" href="#">{$stypes|ucfirst}</a>
|
||||
</li>
|
||||
{else}
|
||||
<li value="{$stypes}" {if $pageType == $stypes || $currentPage == $stypes} class="active" {/if}>
|
||||
<a class="s-types" href="#">{$stypes|ucfirst}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{$counter = $counter + 1}
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" name="query" placeholder="search keyword here" value="{'query'|get_form_val:true}" id="query">
|
||||
<input type="hidden" name="type" class="type" value="{if isset($smarty.get.type)}{$smarty.get.type}{elseif $currentPage}{$currentPage}{else}videos{/if}" id="type">
|
||||
<button tabindex="-1" type="submit" name="cbsearch" id="cbsearch" class="btn btn-default btn-search icon-search"></button>
|
||||
</div>
|
||||
</form><!-- form Ends -->
|
||||
</div>
|
||||
|
||||
<div class="col btn-holder text-right">
|
||||
<div class="col btn-holder user_menu text-right">
|
||||
<div class="search">
|
||||
<form class="search-form" action="{link name='search_result'}">
|
||||
<div class="cbsearchtype">
|
||||
<div class="search-drop">
|
||||
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle search-drop-btn" type="button">
|
||||
<span class="search-type">{if $pageType}{$pageType|ucfirst}{elseif $currentPage == 'videos' || $currentPage == 'channels' || $currentPage == 'photos'}{$currentPage|ucfirst}{else}Videos{/if}</span>
|
||||
<span class="icon-down-arrow"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
{$counter = 1}
|
||||
{foreach from=$Cbucket->search_types item=t key=stypes}
|
||||
{if $stypes|lower == 'groups'}
|
||||
{continue}
|
||||
{/if}
|
||||
{if $counter == 3}
|
||||
<li value="{$stypes}" {if $pageType == $stypes || $currentPage == $stypes} class="active" {/if}>
|
||||
<a class="s-types" href="#">{$stypes|ucfirst}</a>
|
||||
</li>
|
||||
{else}
|
||||
<li value="{$stypes}" {if $pageType == $stypes || $currentPage == $stypes} class="active" {/if}>
|
||||
<a class="s-types" href="#">{$stypes|ucfirst}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{$counter = $counter + 1}
|
||||
{/foreach}
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control" name="query" placeholder="search keyword here" value="{'query'|get_form_val:true}" id="query">
|
||||
<input type="hidden" name="type" class="type" value="{if isset($smarty.get.type)}{$smarty.get.type}{elseif $currentPage}{$currentPage}{else}videos{/if}" id="type">
|
||||
<button tabindex="-1" type="submit" name="cbsearch" id="cbsearch" class="btn btn-default btn-search icon-search"></button>
|
||||
</div>
|
||||
</form><!-- form Ends -->
|
||||
</div>
|
||||
|
||||
<ul class="nav navbar-nav navbar-right right-menu">
|
||||
{if userid()}
|
||||
<li class="dropdown upload_link">
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
{if $collections}
|
||||
{foreach from=$collections item=collection}
|
||||
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div class="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$baseurl}/view_collection.php?cid={$collection.collection_id}&type={$collection.type}" title="{$collection.collection_name}">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{$leftMenuLinks = array_slice($myAccountLinks, 6)}
|
||||
<div id="main" class="clearfix container">
|
||||
<div class="clearfix">
|
||||
<section id="content" class="clearfix">
|
||||
<section id="content" class="clearfix photos">
|
||||
<div class="clearfix leaderboard-ad ad">
|
||||
{AD place='ad_728x90'}
|
||||
</div>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div class="clearfix row">
|
||||
{if $photos}
|
||||
{foreach from=$photos item=p_list}
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-6">
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
{include file="$style_dir/blocks/photo.html" photo=$p_list display_type = "default_photo"}
|
||||
</div>
|
||||
{/foreach}
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
<div class="clearfix row">
|
||||
{foreach from=$collections item=collection}
|
||||
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div class="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$baseurl}/view_collection.php?cid={$collection.collection_id}&type={$collection.type}" title="{$collection.collection_name}">
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="clearfix row">
|
||||
{if $videos}
|
||||
{foreach $videos as $video}
|
||||
<div class="item-video col-lg-3 col-md-3 col-sm-4 col-xs-6">
|
||||
<div class="item-video col-lg-3 col-md-4 col-sm-4 col-xs-12">
|
||||
{include file="$style_dir/blocks/videos/video.html" display_type='homeVideos'}
|
||||
</div>
|
||||
{/foreach}
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
{$photos=get_photos(["user"=>userid(),"limit" =>5])}
|
||||
{if $photos}
|
||||
{foreach from=$photos item=p_list}
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-6">
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
{include file="$style_dir/blocks/photo.html" photo=$p_list display_type = "default_photo"}
|
||||
</div>
|
||||
{/foreach}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,15 @@
|
|||
</h1>
|
||||
<div id="photos" class="clearfix row">
|
||||
{section name=list loop=$objects}
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-6">
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-12">
|
||||
{include file="$style_dir/blocks/collection.html" object=$objects[list] display_type=view_collection type=$c.type}
|
||||
</div>
|
||||
{sectionelse}
|
||||
<div class="well well-info">
|
||||
{$c.collection_name} has 0 items.
|
||||
</div>
|
||||
<div class="item-photo col-xs-12">
|
||||
<div class="well well-info">
|
||||
{$c.collection_name} has 0 items.
|
||||
</div>
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-6">
|
||||
{/section}
|
||||
</div>
|
||||
<div align="center" class="clearfix">
|
||||
|
|
@ -103,7 +105,7 @@
|
|||
<div class="clearfix row">
|
||||
{foreach from=$collections item=collection}
|
||||
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div class="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$baseurl}/view_collection.php?cid={$collection.collection_id}&type={$collection.type}" title="{$collection.collection_name}">
|
||||
|
|
|
|||
|
|
@ -182,7 +182,7 @@
|
|||
{if $collections}
|
||||
{foreach from=$collections item=collection}
|
||||
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<div class="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$cbphoto->photo_links($item,'view_item')}">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -364,7 +364,8 @@
|
|||
.scrollable-area-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100% !important; }
|
||||
width: 100% !important;
|
||||
height: auto !important; }
|
||||
|
||||
.scrollable-area-wrapper .hscrollbar,
|
||||
.scrollable-area-wrapper .vscrollbar {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -19,28 +19,69 @@ function headerFooter(){
|
|||
var flag = 0;
|
||||
function responsiveFixes(){
|
||||
var WinWidth = $(window).width();
|
||||
var HeaderSearchDefault = $("#header ").find('.search');
|
||||
var searchHtml = HeaderSearchDefault.html();
|
||||
var navSearchHtml = $("#header .navbar-header");
|
||||
if(flag==0)
|
||||
console.log(WinWidth);
|
||||
var SearchHtml = $("#header .menu-holder .user_menu").html();
|
||||
var navseach = $('#header .navbar-header');
|
||||
var menuLinks = $("#header .menu-holder");
|
||||
|
||||
if (WinWidth <992)
|
||||
{
|
||||
if (WinWidth <992)
|
||||
var length1 = navseach.find('.user_menu').length;
|
||||
if(length1==0)
|
||||
{
|
||||
$("<div class='search'>"+searchHtml+"</div>").appendTo(navSearchHtml);
|
||||
HeaderSearchDefault.remove();
|
||||
|
||||
$(navseach).append('<div class="col btn-holder user_menu text-right logged-out">'+SearchHtml+"</div>");
|
||||
}
|
||||
else if( WinWidth <1260 )
|
||||
$('.menu-holder').find('.user_menu').remove();
|
||||
}
|
||||
else
|
||||
{
|
||||
var searchBtns = navseach.find('.user_menu').html();
|
||||
var length2 = menuLinks.find('.user_menu').length;
|
||||
|
||||
if(length2==0)
|
||||
{
|
||||
$(".btn-newacc").html("Signup");
|
||||
menuLinks.append('<div class="col btn-holder user_menu text-right logged-out">'+searchBtns+"</div>");
|
||||
}
|
||||
else
|
||||
navseach.find('.user_menu').remove();
|
||||
|
||||
}
|
||||
if( WinWidth <1280 )
|
||||
{
|
||||
$(".btn-newacc").html("Signup");
|
||||
}
|
||||
else
|
||||
{
|
||||
$(".btn-newacc").html("Create new account");
|
||||
}
|
||||
|
||||
if(userid)
|
||||
{
|
||||
$(".user_menu").addClass('logged-in');
|
||||
$(".user_menu").removeClass('logged-out');
|
||||
}
|
||||
else{
|
||||
$(".user_menu").removeClass('logged-in');
|
||||
$(".user_menu").addClass('logged-out');
|
||||
}
|
||||
|
||||
if( WinWidth <768 )
|
||||
{
|
||||
var length3 = $('.menu-holder').find('.newuser-links').length;
|
||||
if(length3==0)
|
||||
{
|
||||
$(".btn-newacc").html("Create new account");
|
||||
$("<div class='col search'>"+searchHtml+"</div>").insertBefore("#header .btn-holder");
|
||||
HeaderSearchDefault.remove();
|
||||
var rightLinkHtml = $('.navbar-right').html();
|
||||
$('.menu-holder').prepend("<ul class='newuser-links'>"+rightLinkHtml+"</ul>");
|
||||
$('.navbar-right').remove();
|
||||
}
|
||||
}
|
||||
else{
|
||||
var length4 = $('.user_menu').find('.right-menu').length;
|
||||
if(length4==0)
|
||||
{
|
||||
var newLinkHtml = $('.newuser-links').html();
|
||||
$('.user_menu').append("<ul class='nav navbar-nav navbar-right right-menu'>"+newLinkHtml+"</ul>");
|
||||
$('.newuser-links').remove();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
function preLoadingBlock(){
|
||||
|
|
@ -53,10 +94,23 @@ function preLoadingBlock(){
|
|||
var thumbHeight = thumbWidth * (10/16);
|
||||
$(".videos .thumb-video").css('height', thumbHeight+'px');
|
||||
}
|
||||
function loginHeight(){
|
||||
var loginHeight = $("#login_form").outerHeight();
|
||||
loginHeight = loginHeight - 40;
|
||||
$(".account-holder .side-box").css('height', loginHeight+'px');
|
||||
}
|
||||
$(document).ready(function(){
|
||||
//footer at bototm
|
||||
headerFooter();
|
||||
|
||||
if(userid)
|
||||
{
|
||||
$(".user_menu").addClass('logged-in');
|
||||
$(".user_menu").removeClass('logged-out');
|
||||
}
|
||||
else{
|
||||
$(".user_menu").removeClass('logged-in');
|
||||
$(".user_menu").addClass('logged-out');
|
||||
}
|
||||
responsiveFixes();
|
||||
|
||||
$(".navbar-sm-login-links a").click(function(){
|
||||
|
|
@ -69,19 +123,10 @@ $(document).ready(function(){
|
|||
$('.adbox-holder').hide();
|
||||
}
|
||||
|
||||
$('#header ul li.dropdown, .search-drop').hover(function() {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
|
||||
}, function() {
|
||||
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(100);
|
||||
$(".btn-search-toggle").click(function() {
|
||||
$(".navbar-header").toggleClass('show-search');
|
||||
});
|
||||
var sign_count = '';
|
||||
sign_count = $('#header').find('.navbar-sm-login-links').length;
|
||||
if(sign_count!=0){
|
||||
$('#header .btn-holder').addClass('logged-out');
|
||||
}
|
||||
else{
|
||||
$('#header .btn-holder').removeClass('logged-out');
|
||||
}
|
||||
loginHeight();
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -253,6 +298,9 @@ function homePageVideos(qlist_items) {
|
|||
$('#recent_load_more').trigger("click");
|
||||
$('#recent_load_more').hide();
|
||||
|
||||
// var windowWith = $(window).width();
|
||||
// alert(windowWith);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -261,4 +309,5 @@ $(window).resize(function(){
|
|||
headerFooter();
|
||||
preLoadingBlock();
|
||||
responsiveFixes();
|
||||
loginHeight();
|
||||
});
|
||||
|
|
@ -73,63 +73,53 @@
|
|||
/**/
|
||||
@media only screen and (max-width: 991px) {
|
||||
#footer{
|
||||
.footer-holder{
|
||||
padding: 0;
|
||||
}
|
||||
.icon-holder,
|
||||
.column{
|
||||
display: block;
|
||||
}
|
||||
.icon-holder{
|
||||
float: left;
|
||||
}
|
||||
.column.copyright-poweredby,
|
||||
.lang_wrapper,
|
||||
.footer-links{
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
ul{
|
||||
margin: 0 0 10px;
|
||||
width: 400px;
|
||||
li{
|
||||
float: none;
|
||||
@include vertical-top();
|
||||
margin: 0 10px;
|
||||
width: 33%;
|
||||
margin: 0 0 10px -4px;
|
||||
padding: 0 5px;
|
||||
&:first-child{
|
||||
margin: 0 10px;
|
||||
margin: 0 0 10px -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lang_wrapper{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.column.copyright-poweredby{
|
||||
padding: 0 5px 0 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
#footer{
|
||||
.custom-container{
|
||||
padding: 0 15px;
|
||||
}
|
||||
.footer-holder{
|
||||
padding: 0 0 0 60px;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.icon-holder{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
ul li{
|
||||
margin: 0 10px 5px;
|
||||
&:first-child{
|
||||
margin: 0 10px 5px;
|
||||
.column{
|
||||
display: block;
|
||||
width: 100%;
|
||||
&.lang_wrapper,
|
||||
&.copyright-poweredby{
|
||||
text-align: center;
|
||||
}
|
||||
&.lang_wrapper{
|
||||
margin: 0 0 10px;
|
||||
form{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column.copyright-poweredby{
|
||||
padding: 0 5px;
|
||||
ul{
|
||||
width: 100%;
|
||||
li{
|
||||
float: none;
|
||||
@include vertical-top();
|
||||
width: 50%;
|
||||
margin: 0 0 10px -4px;
|
||||
padding: 0 5px;
|
||||
&:first-child{
|
||||
margin: 0 0 10px -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,9 @@
|
|||
@include vertical-bottom();
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
.navbar-toggle .icon-down-arrow{
|
||||
line-height: 20px;
|
||||
}
|
||||
.search-drop .icon-down-arrow{
|
||||
line-height: 22px;
|
||||
}
|
||||
|
|
@ -46,12 +49,17 @@
|
|||
padding: 0 0 0 10px;
|
||||
text-align: left;
|
||||
&.search{
|
||||
width: 446px;
|
||||
width: 320px;
|
||||
}
|
||||
&.btn-holder{
|
||||
width: 260px;
|
||||
&.user_menu{
|
||||
text-align: right;
|
||||
width: 740px;
|
||||
.search{
|
||||
width: 320px;
|
||||
@include vertical-middle();
|
||||
}
|
||||
&.logged-out{
|
||||
width: 220px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +75,7 @@
|
|||
&>a{
|
||||
color: $black;
|
||||
display: block;
|
||||
padding:12px;
|
||||
padding:12px 5px;
|
||||
&:focus,
|
||||
&:hover{
|
||||
color:$black;
|
||||
|
|
@ -239,11 +247,11 @@
|
|||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
padding:5px 4px 9px;
|
||||
color:$search-toggle;
|
||||
color:$black;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover{
|
||||
color:$search-toggle;
|
||||
color:$black;
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
|
|
@ -291,13 +299,20 @@
|
|||
.navbar-default .navbar-nav > .open > a:hover,
|
||||
.navbar-default .navbar-nav > .open > a:focus{
|
||||
|
||||
}
|
||||
.navbar-nav{
|
||||
float: none !important;
|
||||
}
|
||||
.navbar-default {
|
||||
.navbar-toggle{
|
||||
padding: 0;
|
||||
margin: 0 0 0 5px;
|
||||
width: 34px;
|
||||
margin: 0 0 0 16px;
|
||||
width: 70px;
|
||||
height: 34px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
padding: 6px 0;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -306,27 +321,18 @@
|
|||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
margin: 6px 0 0;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: #000;
|
||||
&:first-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-nav > .open > a.user-area,
|
||||
.navbar-nav > .open > a.user-area:focus,
|
||||
.navbar-nav > .open > a.user-area:hover{
|
||||
background: none;
|
||||
}
|
||||
.navbar-nav.navbar-right:last-child{
|
||||
margin: 0;
|
||||
.navbar-right{
|
||||
float: none !important;
|
||||
@include vertical-middle();
|
||||
}
|
||||
.right-menu{
|
||||
margin: 0;
|
||||
margin: 0 0 0 10px;
|
||||
font-size: 14px;
|
||||
&.navbar-nav{
|
||||
> li{
|
||||
|
|
@ -438,59 +444,141 @@
|
|||
}
|
||||
}
|
||||
/**/
|
||||
@media only screen and (max-width: 1259px) {
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
#header{
|
||||
.main-links > ul > li > a{
|
||||
padding: 12px 6px;
|
||||
.main-links > ul{
|
||||
font-size: 15px;
|
||||
line-height: 36px;
|
||||
> li > a{
|
||||
padding: 12px 5px;
|
||||
}
|
||||
}
|
||||
.menu-holder .col{
|
||||
text-align: center;
|
||||
&.search{
|
||||
width: 280px;
|
||||
}
|
||||
&.btn-holder{
|
||||
width: 180px;
|
||||
&.user_menu{
|
||||
width: 600px;
|
||||
.search{
|
||||
width: 286px;
|
||||
}
|
||||
&.logged-out{
|
||||
width: 150px;
|
||||
width: 430px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-upload{
|
||||
padding: 4px 8px;
|
||||
.icon-upload{
|
||||
margin: 0;
|
||||
}
|
||||
span,
|
||||
.icon-down-arrow{
|
||||
display: none;
|
||||
.btn-upload .icon-down-arrow{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navbar-default .right-menu{
|
||||
margin: 0 0 0 10px;
|
||||
&.navbar-nav > li {
|
||||
padding: 0;
|
||||
> a.btn-upload{
|
||||
padding: 4px 8px;
|
||||
border-radius: 50%;
|
||||
span{
|
||||
display: none;
|
||||
}
|
||||
.icon-upload{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px){
|
||||
@media only screen and (max-width: 1100px) {
|
||||
#header{
|
||||
.main-links > ul{
|
||||
font-size: 14px;
|
||||
line-height: 36px;
|
||||
> li > a{
|
||||
padding: 12px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-holder .col{
|
||||
&.user_menu{
|
||||
width: 410px;
|
||||
}
|
||||
&.logged-out{
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-default .right-menu.navbar-nav > li{
|
||||
padding: 0 0 0 10px;
|
||||
&:first-child{
|
||||
padding: 0;
|
||||
}
|
||||
> a.user-area{
|
||||
img{
|
||||
margin: 0;
|
||||
}
|
||||
span{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.logo{
|
||||
float: left;
|
||||
}
|
||||
/**/
|
||||
.header-holder{
|
||||
display: block;
|
||||
.navbar-header{
|
||||
display: block;
|
||||
width: 100%;
|
||||
.search{
|
||||
width: 300px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.navbar-collapse{
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
}
|
||||
.navbar-header {
|
||||
float:none !important;
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
.search{
|
||||
width: 300px;
|
||||
@include vertical-middle();
|
||||
}
|
||||
}
|
||||
.user_menu{
|
||||
float: right;
|
||||
width: 450px;
|
||||
}
|
||||
#header{
|
||||
.menu-holder{
|
||||
display: block;
|
||||
.col{
|
||||
display: block;
|
||||
padding: 0;
|
||||
.main-links{
|
||||
display: block;
|
||||
ul{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
li{
|
||||
display: block;
|
||||
a{
|
||||
padding: 5px;
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
&:hover{
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&.active a{
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -499,22 +587,166 @@
|
|||
.btn-search-toggle{
|
||||
float: right;
|
||||
}
|
||||
.navbar-collapse.collapse {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-collapse.collapse.in {
|
||||
display: block !important;
|
||||
}
|
||||
.navbar-header .collapse, .navbar-toggle {
|
||||
display:block !important;
|
||||
}
|
||||
.navbar-header {
|
||||
float:none;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px){
|
||||
|
||||
.navbar-header .collapse,
|
||||
.navbar-toggle {
|
||||
display:block !important;
|
||||
}
|
||||
.navbar-toggle{
|
||||
float: left;
|
||||
}
|
||||
.navbar-collapse.collapse {
|
||||
display: none !important;
|
||||
}
|
||||
.navbar-collapse.collapse.in {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
.navbar-header{
|
||||
padding: 10px;
|
||||
}
|
||||
.user_menu{
|
||||
width: 100%;
|
||||
float: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -999px;
|
||||
background: $white;
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
.show-search .user_menu{
|
||||
left: 0;
|
||||
top: 100%;
|
||||
}
|
||||
.navbar-header .search{
|
||||
width: 100%;
|
||||
}
|
||||
.newuser-links{
|
||||
@include list-style();
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
>li{
|
||||
float: right;
|
||||
width: 50%;
|
||||
>a{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background: $white;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
text-decoration: $black;
|
||||
a:hover{
|
||||
background: $white;
|
||||
color: $black;
|
||||
}
|
||||
&.btn-default{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
.icon-upload{
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover{
|
||||
background: $white;
|
||||
color: $black;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
img{
|
||||
@include vertical-middle();
|
||||
margin: 0 -2px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
&.myaccount-dd{
|
||||
//text-align: right;
|
||||
a{
|
||||
padding: 0;
|
||||
span{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-sm-login-links{
|
||||
a:hover{
|
||||
background: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.open > .btn-default.dropdown-toggle:hover,
|
||||
.open > .btn-default.dropdown-toggle:focus,
|
||||
.open > .btn-default.dropdown-toggle:active{
|
||||
background: $white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.navbar-default .navbar-collapse{
|
||||
border: none;
|
||||
}
|
||||
#header{
|
||||
padding: 0;
|
||||
.menu-holder{
|
||||
padding: 0 10px;
|
||||
}
|
||||
.dropdown-menu{
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
> li {
|
||||
> a{
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding:3px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.myaccount-dd{
|
||||
.dropdown-menu{
|
||||
min-width:100%;
|
||||
}
|
||||
}
|
||||
.btn-upload .icon-down-arrow{
|
||||
display: inline-block;
|
||||
}
|
||||
.navbar-default .navbar-toggle{
|
||||
margin: 0 0 0 14px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
padding: 3px;
|
||||
&:after,
|
||||
&:before,
|
||||
.icon-down-arrow{
|
||||
content: "";
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
height: 3px;
|
||||
width: 34px;
|
||||
margin: 0;
|
||||
background: $black;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 8px;
|
||||
}
|
||||
&:after{
|
||||
top: 18px;
|
||||
}
|
||||
&:before{
|
||||
top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -107,4 +107,24 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.sidebar-items{
|
||||
.featured-video{
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 0 16px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
&:first-child{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
#sidebar{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
@import "mymixins";
|
||||
@import "header";
|
||||
@import "sidebar";
|
||||
@import "footer";
|
||||
* {max-height: 1000000px;}
|
||||
html,
|
||||
body{
|
||||
|
|
@ -172,6 +169,7 @@ h1{
|
|||
padding: 0 0 0 15px;
|
||||
}
|
||||
.featured-video{
|
||||
cursor: pointer;
|
||||
background:$white;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
|
|
@ -281,7 +279,7 @@ h1{
|
|||
top: 0;
|
||||
width: 100%;
|
||||
@include gradient-bg();
|
||||
padding: 15px 94px 15px 20px;
|
||||
padding: 10px 94px 15px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -316,8 +314,8 @@ h1{
|
|||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border:1px solid #fff;
|
||||
color: $white;
|
||||
border:1px solid $white;
|
||||
border-radius: 2px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -413,7 +411,7 @@ h1{
|
|||
.featured-videos .item-video .thumb-holder{
|
||||
.video-link{
|
||||
.title{
|
||||
padding: 15px 94px 15px 20px;
|
||||
padding: 10px 94px 15px 10px;
|
||||
}
|
||||
.item-footer{
|
||||
padding: 20px;
|
||||
|
|
@ -1381,6 +1379,7 @@ h1{
|
|||
}
|
||||
}
|
||||
.radio-inline{
|
||||
margin: 0 16px 10px 0;
|
||||
padding: 0;
|
||||
line-height: 22px;
|
||||
input[type="radio"]{
|
||||
|
|
@ -1399,7 +1398,7 @@ h1{
|
|||
}
|
||||
/* end of watch video */
|
||||
/* photos page */
|
||||
.photos-block{
|
||||
.photos{
|
||||
.row{
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
|
@ -1482,7 +1481,7 @@ h1{
|
|||
}
|
||||
}
|
||||
/**/
|
||||
.photos-block .heading{
|
||||
.photos .heading{
|
||||
margin: 0 0 10px;
|
||||
h2,
|
||||
h1{
|
||||
|
|
@ -1866,16 +1865,12 @@ textarea#comment_box{
|
|||
/* end of comments */
|
||||
/* channels page */
|
||||
.channels{
|
||||
padding: 0 15px 0 0;
|
||||
&.inner-block .heading{
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
.row{
|
||||
margin: 0 -10px;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
}
|
||||
.item-channel{
|
||||
padding: 0 10px;
|
||||
padding: 0 8px;
|
||||
margin: 0 0 20px;
|
||||
.channel-holder{
|
||||
background: $white;
|
||||
|
|
@ -1908,6 +1903,8 @@ textarea#comment_box{
|
|||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.info{
|
||||
padding: 10px 0;
|
||||
|
|
@ -1990,6 +1987,11 @@ textarea#comment_box{
|
|||
margin:0 0 0 5px;
|
||||
}
|
||||
}
|
||||
.friend-block{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.ratting-counts{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -2330,7 +2332,7 @@ textarea#comment_box{
|
|||
@include vertical-middle();
|
||||
width: 46%;
|
||||
margin: 0 0 0 -4px;
|
||||
padding: 130px 60px;
|
||||
padding: 100px 60px;
|
||||
}
|
||||
.user-form{
|
||||
background:$white;
|
||||
|
|
@ -2799,24 +2801,10 @@ textarea#comment_box{
|
|||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
.collection-photos{
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
#photos{
|
||||
|
||||
}
|
||||
}
|
||||
.item-info{
|
||||
margin-bottom:10px;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
/**/
|
||||
.cb-box{
|
||||
background:$white;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* groups */
|
||||
.creat_group{
|
||||
.checkbox{
|
||||
|
|
@ -2859,624 +2847,257 @@ textarea#comment_box{
|
|||
}
|
||||
}
|
||||
/**/
|
||||
@media only screen and (max-width:1100px) {
|
||||
.popular-vids.watch_vids{
|
||||
.popular-video{
|
||||
.title,
|
||||
.author{
|
||||
margin: 0 0 5px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.view-date{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popular-vids{
|
||||
overflow-y: auto;
|
||||
}
|
||||
.video-block,
|
||||
.popular-video{
|
||||
.title,
|
||||
.author{
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
}
|
||||
.popular-video .view-date{
|
||||
margin:0;
|
||||
}
|
||||
.video-block,
|
||||
.popular-video{
|
||||
.icon-date,
|
||||
.icon-eye{
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.cat-videos{
|
||||
.video_row{
|
||||
height: 260px;
|
||||
}
|
||||
.video-block{
|
||||
width: 30%;
|
||||
.vid-info{
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.video_row,
|
||||
.scrollable-area-wrapper{
|
||||
width:auto !important;
|
||||
height:auto !important;
|
||||
}
|
||||
}
|
||||
.popular-vids{
|
||||
padding: 12px 0 0;
|
||||
.adbox-holder{
|
||||
margin: 0 0 10px -4px;
|
||||
}
|
||||
.popular-video{
|
||||
width: 50%;
|
||||
@include vertical-top();
|
||||
margin: 0 0 20px -4px;
|
||||
&:nth-child(2n){
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner{
|
||||
.caption{
|
||||
font-size: 14px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/* tunepk ended */
|
||||
/* watch videos */
|
||||
.player-banner{
|
||||
padding:0;
|
||||
h1{
|
||||
display: block;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
.title-area{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
/**/
|
||||
.searchBox{
|
||||
margin:0 0 20px;
|
||||
}
|
||||
h3{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.page-hidding h2{
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.addComment{
|
||||
h3{
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.avatar{
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
.comment_text_new{
|
||||
//width: 85%;
|
||||
}
|
||||
}
|
||||
.sidebar .item_video h5,
|
||||
.item_video h5{
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.item_video .time,
|
||||
.item_video .views-time{
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
#coverContainer h3,
|
||||
#coverContainer .text-box .figures li span{
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.vid-detail h2{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.vid-detail span.duration i{
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.suggested-grp{
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
.photo-item .hover{
|
||||
display: block;
|
||||
}
|
||||
.photos-block{
|
||||
padding: 0;
|
||||
}
|
||||
.show-image .photoname{
|
||||
display: block;
|
||||
}
|
||||
/* view channel */
|
||||
.cover{
|
||||
.cover-holder{
|
||||
>img{
|
||||
max-height: 276px;
|
||||
height: 256px;
|
||||
}
|
||||
}
|
||||
.avatar-block{
|
||||
.avatar{
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
h2{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tune-tabs{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.rating{
|
||||
text-align: center;
|
||||
.rating-holder{
|
||||
display: block;
|
||||
&:before,
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.like-dislike{
|
||||
text-align: center;
|
||||
margin: 5px 0 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
a{
|
||||
@include vertical-middle();
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
&:first-child{
|
||||
margin: 0 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.buy-premium{
|
||||
display: none !important;
|
||||
}
|
||||
.leaderboard-holder{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.sideactive{
|
||||
.middle-section{
|
||||
@include transform($string:translateX(160px) translateY(0px));
|
||||
@include transition($transition:all 0.3s linear);
|
||||
}
|
||||
}
|
||||
#main,
|
||||
.custom-container{
|
||||
padding: 0;
|
||||
}
|
||||
.sideactive{
|
||||
.middle-section{
|
||||
padding-left: 0;
|
||||
-moz-transform:translateX(160px);
|
||||
-webkit-transform:translateX(160px);
|
||||
-o-transform:translateX(160px);
|
||||
-ms-transform:translateX(160px);
|
||||
}
|
||||
}
|
||||
.carousel-control{
|
||||
&.left{
|
||||
span{
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right{
|
||||
span{
|
||||
left: auto;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-indicators{
|
||||
bottom: 0;
|
||||
}
|
||||
.banner{
|
||||
margin: 0 0 20px !important;
|
||||
.caption{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.video-block,
|
||||
.popular-video{
|
||||
.vid-info{
|
||||
min-height: auto;
|
||||
}
|
||||
.view-date{
|
||||
padding: 0;
|
||||
}
|
||||
.title,
|
||||
.author{
|
||||
margin: 0 0 5px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
@import "header";
|
||||
@import "sidebar";
|
||||
@import "footer";
|
||||
@media only screen and (max-width:1200px) {
|
||||
.featured-video .video_thumb{
|
||||
width: 100%;
|
||||
margin: 0 0 5px;
|
||||
float: none;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.popular-vids{
|
||||
padding: 0 15px;
|
||||
.popular-video{
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
&:nth-child(2n){
|
||||
padding: 0;
|
||||
.item-photo{
|
||||
.photo-info{
|
||||
strong{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cat-videos{
|
||||
padding: 0 10px 0 14px;
|
||||
.video-block{
|
||||
width: 33.33%;
|
||||
padding: 0 5px;
|
||||
margin: 0 0 20px -4px;
|
||||
}
|
||||
.video_row{
|
||||
white-space: normal;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:1100px) {
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.editorpick-holder{
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
/* for all videos */
|
||||
.cb_quickie.add_icon{
|
||||
display: none;
|
||||
.absolute-div{
|
||||
padding: 0;
|
||||
}
|
||||
.photos-block .heading h1,
|
||||
.channel_right .heading h1,
|
||||
.inner-block .heading h1{
|
||||
font-size: 18px;
|
||||
i{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.video-details{
|
||||
padding: 0 15px;
|
||||
.user-info{
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.title-area{
|
||||
text-align: center;
|
||||
.views-count,
|
||||
h1{
|
||||
float: none;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
.user-likes-count .user-info{
|
||||
text-align: center;
|
||||
.avatar{
|
||||
.editorpick-videos{
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
.scrollable-area{
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
padding: 0 0 0 8px;
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
margin: 0 auto 5px;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
.player-area{
|
||||
margin: 0 0 10px;
|
||||
> div{
|
||||
.featured-video{
|
||||
width: 50%;
|
||||
@include vertical-top();
|
||||
margin: 0 0 16px -4px;
|
||||
padding: 0 8px;
|
||||
border: none;
|
||||
&:first-child{
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
.item-video .thumb-holder .video-link .title{
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
.sidebar-channels .channel-item .channel-info{
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
padding: 0;
|
||||
h3{
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
.views-videos span{
|
||||
display: block;
|
||||
padding: 0;
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
&:first-child{
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.videos{
|
||||
.video-info{
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.video-details,
|
||||
.view-details{
|
||||
header.details{
|
||||
h1{
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ch-user-vids{
|
||||
padding: 0 10px;
|
||||
.video-block{
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 0 10px;
|
||||
.user-video-info .views-counter{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.rating{
|
||||
margin: 0 0 0;
|
||||
text-align: center;
|
||||
.rating-holder{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.tune-tabs .nav-tabs.nav.nav{
|
||||
> li > a{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.social-share{
|
||||
li a{
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
.addComment #add_comment_button{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.cat-tabs{
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
.panel-body{
|
||||
font-size: 12px;
|
||||
li a{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.featured-channels{
|
||||
.item_channel{
|
||||
margin: 0 0 20px;
|
||||
.channel-holder{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.video-block{
|
||||
padding: 0;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
/* tunepk ended */
|
||||
#cb_player,
|
||||
.player-holder{
|
||||
#opacity,
|
||||
#related_1{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/**/
|
||||
.labels .label{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
.view-photo-nxt,
|
||||
.view-photo-pre{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: -20px 0 0;
|
||||
padding: 4px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
color: #fff;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
/* watch videos */
|
||||
.photo-info-social .btn-subscribe,
|
||||
.banner-holder .btn-subscribe{
|
||||
margin: 0;
|
||||
}
|
||||
.player-banner{
|
||||
.avatar{
|
||||
display: none;
|
||||
}
|
||||
.subscribe-block{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.btn{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.photo-info-social,
|
||||
.banner-holder{
|
||||
.socialmedia-info{
|
||||
>ul.nav-tabs{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
>li{
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
>a{
|
||||
>span{
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**/
|
||||
.addComment{
|
||||
.avatar{
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.comment_text_new{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.btn-sqr{
|
||||
height: 34px;
|
||||
float: right;
|
||||
}
|
||||
.watchchanel-info{
|
||||
margin: 0;
|
||||
.avatar{
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
//
|
||||
.watch-views{
|
||||
margin:0;
|
||||
padding: 0 15px;
|
||||
.social-drop{
|
||||
text-align: left;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.views-count{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60px;
|
||||
padding: 10px 0;
|
||||
margin: 0 5px 0 0;
|
||||
i{
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.video_thumb .play-icon{
|
||||
font-size: 30px;
|
||||
height: 30px;
|
||||
width: 28px;
|
||||
margin: -15px 0 0 -14px;
|
||||
}
|
||||
// .item_playlist .views-time,
|
||||
.item_video .views-time{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.watchvideo-titlearea .watch-vid-title h1{
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.watch-vid-user-sec .title{
|
||||
font-weight: 400 !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
.title,
|
||||
.user{
|
||||
display: block !important;
|
||||
}
|
||||
.page-hidding h2{
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
/* view channel */
|
||||
.cover{
|
||||
.avatar-block{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.ch-body{
|
||||
margin: 0 0 10px;
|
||||
padding: 0 10px;
|
||||
>div{
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
.ch-user-vids{
|
||||
padding: 0;
|
||||
}
|
||||
.item_channel{
|
||||
padding: 0 10px;
|
||||
}
|
||||
/**/
|
||||
.photos-block{
|
||||
.photo-info-social{
|
||||
padding: 0;
|
||||
}
|
||||
.socialmedia-info > ul{
|
||||
display: table;
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
>li{
|
||||
display: table-cell;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
>a{
|
||||
>span{
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.counters li{
|
||||
span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.quicklist_box{
|
||||
display: none !important;
|
||||
.signin-block{
|
||||
.user-form{
|
||||
padding: 30px 40px;
|
||||
}
|
||||
.side-box{
|
||||
padding: 80px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:670px){
|
||||
.cat-videos{
|
||||
@media only screen and (max-width: 767px) {
|
||||
#content{
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding: 0 10px;
|
||||
.video-block{
|
||||
width: 50%;
|
||||
margin: 0 0 20px;
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
float: left;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.featured-video{
|
||||
.title{
|
||||
font-size: 14px;
|
||||
}
|
||||
.views-date{
|
||||
.date,
|
||||
span{
|
||||
display: block;
|
||||
}
|
||||
.date{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.inner-block .heading{
|
||||
.dropdowns,
|
||||
h1{
|
||||
display: block;
|
||||
.videos{
|
||||
.video-info{
|
||||
height: 80px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
}
|
||||
.filter-dropdowns{
|
||||
.cat-col{
|
||||
display: none;
|
||||
}
|
||||
.sorting-col{
|
||||
padding: 0;
|
||||
}
|
||||
.dropdowns{
|
||||
}
|
||||
.item-photo{
|
||||
.photo-info{
|
||||
strong{
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-tabs{
|
||||
.nav-tabs.nav{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
> li > a span{}
|
||||
}
|
||||
}
|
||||
|
||||
#add_playlist_form,
|
||||
#new_playlist_form{
|
||||
.form-group{
|
||||
> div:first-child,
|
||||
> div{
|
||||
padding: 0;
|
||||
}
|
||||
> div:first-child{
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flat-tabs .nav-tabs.nav > li > a{
|
||||
padding: 8px;
|
||||
}
|
||||
.cover{
|
||||
.avatar{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
left: 20px;
|
||||
bottom: 100px;
|
||||
}
|
||||
.ratting-counts{
|
||||
padding: 10px 0 10px 90px;
|
||||
height:80px;
|
||||
.user-ratting{
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
.counters{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
.dropdown{
|
||||
li{
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
.cat-videos{
|
||||
padding: 0 15px;
|
||||
.video-block{
|
||||
width:100%;
|
||||
margin: 0 0 20px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
float: none;
|
||||
img{
|
||||
width: 100%;
|
||||
.profile-buttons{
|
||||
padding:10px 20px;
|
||||
text-align: center;
|
||||
h2{
|
||||
float: none;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.btn-holder{
|
||||
text-align: center;
|
||||
}
|
||||
.btn-default{
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.videos-block .video-block{
|
||||
width: 100%;
|
||||
}
|
||||
.popular-video .view-date{
|
||||
margin: 5px 0 0;
|
||||
.icon-date,
|
||||
.icon-eye{
|
||||
float: none;
|
||||
.signin-block{
|
||||
.user-form,
|
||||
.side-box{
|
||||
display: block;
|
||||
margin: 0 0 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
h2{
|
||||
margin: 0 0 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.user-form{
|
||||
padding:20px;
|
||||
|
||||
}
|
||||
.side-box{
|
||||
padding: 20px;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.signup-block .user-form,
|
||||
.forgot-block .user-form{
|
||||
padding: 20px;
|
||||
h2{
|
||||
margin: 0 0 20px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
||||
|
||||
}
|
||||
|
|
@ -309,6 +309,7 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.scrollable-area-wrapper .hscrollbar,
|
||||
.scrollable-area-wrapper .vscrollbar {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue