rating style updated

watch video completed 95%
This commit is contained in:
jamilrehman 2016-03-24 19:48:49 +05:00
parent b2064091b2
commit 699e369d8e
8 changed files with 418 additions and 553 deletions

View file

@ -1,53 +1,25 @@
<!-- CB like and dislike section -->
<div class="rating clearfix">
<!--CB like and dislike section-->
<div id="" class="clearfix rating">
<div class="clearfix rating-holder">
<div class="like-dislike">
<a {if !$disable} onclick="rate('{$id}','5','{$type}')"{/if} href="javascript:void(0)" class="btn-like">Likes <i></i></a>
<span>{$likes} Likes</span>
<div class="likes like-dislike">
<a {if !$disable} onclick="rate('{$id}','5','{$type}')"{/if} href="javascript:void(0)"><span class="icon-thumbup"></span></a>
<span>{prettyNum($likes)}</span>
</div>
<div id="circle"></div>
<div class="like-dislike">
<a {if !$disable} onclick="rate('{$id}','1','{$type}')"{/if} href="javascript:void(0)" class="btn-dislike"><i></i> Dislike</a>
<span>{$dislikes} Dislike</span>
<div class="dislikes like-dislike">
<a {if !$disable} onclick="rate('{$id}','1','{$type}')"{/if} href="javascript:void(0)"><span class="icon-thumbdown"></span></a>
<span>{prettyNum($dislikes)}</span>
</div>
</div>
{if $rating_msg}
<div id="rating_result_container" class="like-error clearfix">
{$rating_msg}
<div id="rating_result_container" class="clearfix rating-alert">
{if $rating_msg}{$rating_msg}{/if}
</div>
{/if}
</div>
<script type="text/javascript">
var _percent = 0;
{if $perc}
_percent = '{$perc}';
_percent = parseInt(_percent);
{/if}
var _numb = parseInt(_percent);
if ( _numb > 49 )
$('._percentage').addClass('likes_perc_more');
else
$('._percentage').addClass('likes_perc_less');
function updateLikeCircle(pre) {
if(pre)
_percent=pre;
console.log('hello '+_percent);
$( '#circle' ).progressCircle({
nPercent : _percent,
showPercentText : _percent,
thickness : 5,
/*circleSize : 50*/
});
}
updateLikeCircle();
var _percent = '{$perc}';
var _numb = parseInt(_percent);
if ( _numb > 49 )
$('._percentage').addClass('likes_perc_more');
else
$('._percentage').addClass('likes_perc_less');
</script>

View file

@ -1,21 +1,152 @@
{$video=$vdo}
{$type='video'}
{$channel = $userquery->get_user_details($video.userid)}
<div id="main" class="clearfix">
<div class="custom-container clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 player-holder">
<div id="cb_player" class="cb_player">
{FlashPlayer vdetails=$video width='100%' height='100%'}
</div><!-- cb_player end -->
</div>
<!-- end of player-holder -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-right popular-vids watch_vids clearfix">
<div class="adbox-holder clearfix hidden-xs">
<p>Advertisement <span class="caret"></span></p>
{AD place='ad_300x250'}
<div id="main" class="clearfix container">
<div class="clearfix">
<section id="content" class="clearfix videos">
<div class="clearfix player-holder">
<div id="cb_player" class="cb_player">
{FlashPlayer vdetails=$video width='100%' height='100%'}
</div><!-- cb_player end -->
</div>
<!-- end of player-holder -->
<div class="clearfix leaderboard-ad ad">
{AD place='ad_728x90'}
</div>
<div class="video-details clearfix">
<header class="clearfix details">
<h1>{$video.title|truncate:55}</h1>
<div class="user-video-info clearfix">
<a href="{$userquery->profile_link($video)}" class="avatar">
<img src="{$userquery->avatar($video,'small',userid())}" class="img-responsive">
</a>
<h2 class="user-title">
<a href="{$userquery->profile_link($video)}"> {$video.username}</a>
</h2>
<div class="views-counter">
<span>{prettyNum($vdo.views)}</span>
</div>
</div>
<div class="user-likes-sub clearfix">
<div class="clearfix like-rating col-lg-6 col-md-6 col-sm-6 col-xs-12" id="rating_container">
{if $vdo.allow_rating != 'no'}
{show_video_rating rating=$vdo.rating ratings=$vdo.rated_by total='10' id=$vdo.videoid type=video}
{/if}
</div>
<div class="clearfix subscribe-col col-lg-6 col-md-6 col-sm-6 col-xs-12">
{if $video.userid != userid()}
<a id="subscribeUser" class="btn btn-subscribe btn-primary" href="javascript:void(0)">
<span>{lang('Subscribe')}</span>
</a>
{/if}
</div>
</div>
</header>
<div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
<div class="view-tabs clearfix">
<ul class="clearfix nav nav-tabs">
<li class="active">
<a href="#cb-item-info" data-toggle="tab"><span class="icon-info"></span>{lang('Info')}</a>
</li>
<li>
<a href="#cb-item-share" data-toggle="tab"><span class="icon-share"></span>Share/Embed</a>
</li>
<li>
<a href="#cb-item-addto" data-toggle="tab"><span class="icon-plusrounded"></span>{lang('Add to')}</a>
</li>
<li>
<a href="#cb-item-report" data-toggle="tab"><span class="icon-flag"></span>{lang('Report')}
</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in clearfix active" id="cb-item-info">
<div class="clearfix watch-vid-details">
<h2>{description($video.description)}</h2>
<ul class="clearfix desc-list">
<li><strong>{lang('Category')}</strong>:&nbsp;{$vdo.category|categories:video}</li>
<li><strong>{lang('Duration')}</strong>:&nbsp;{if $video.duration>1}{$video.duration|SetTime}{else}00:00{/if}</li>
<li><strong>{lang('Date')}</strong>:&nbsp; {$video.date_added}</li>
<li>
<strong class="pull-left">{lang('Tags')}:&nbsp;&nbsp;</strong>
<span class="pull-left">{$vdo.tags|tags:videos}</span>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade in clearfix" id="cb-item-share">
<ul class="social-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank" class="btn btn-fb">
<span class="fa fa-facebook"></span> Facebook
</a>
</li>
<li>
<a href="https://twitter.com/share" target="_blank" class="btn btn-tw">
<span class="fa fa-twitter"></span> Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank" class="btn btn-gplus">
<span class="fa fa-google-plus"></span> Google Plus
</a>
</li>
</ul>
{show_share_form id=$vdo.videoid type=video}
</div>
<div class="tab-pane fade in clearfix" id="cb-item-addto">
<div class="clearfix btn-fav">
<div id="video_action_result_cont"></div>
<a class="btn btn-block btn-primary" href="javascript:void(0)" onclick="add_to_fav('video','{$vdo.videoid}');">Add to My Favorites</a>
</div>
<div class="clearfix">
{show_playlist_form id=$vdo.videoid type=video}
{if userid()}
<div class="clearfix">
<div class="clearfix btn-holder text-right">
<a href="javascript:void(0)" onclick="$('#addCollectionCont').toggle()" class="btn btn-primary">+ {lang code='add_to_my_collection'}</a>
</div>
<div id="addCollectionCont" style="display:none">
{show_collection_form id=$vdo.videoid type=Video}
</div>
</div>
{/if}
</div>
</div>
<div class="tab-pane fade in clearfix" id="cb-item-report">
<h2>Report Video</h2>
{show_flag_form id=$vdo.videoid type=video}
</div>
</div>
</div>
<div class="clearfix" id="comments-block">
<div id="test1"></div>
<div id="reply" class="clearfix">
<div class="pad-bottom">
<div class="addComment clearfix">
<h2 class="com_count" id="com_count">
{$vdo.comments_count} <span>{lang code='comments'} </span>
</h2>
{if $myquery->is_commentable($vdo,'v')}
{include file="$style_dir/blocks/comments/add_comment.html" id=$vdo.videoid type=v}
{else}
<div class="alert alert-warning">
{lang code='comm_disabled_for_vid'}
</div>
{/if}
</div>
<div id="userCommentsList">
</div>
</div>
</div>
</div>
</div>
</section>
<aside id="sidebar">
<div class="box-ad ad">{AD place='ad_300x250'}</div>
<h2>Popular Videos</h2>
<div class="clearfix sidebar-videos">
{if $smarty.get.play_list}
{section name=plist loop=$items}
{include file="$style_dir/blocks/manage/account_video.html" video=$items[plist] control="onWatch" pid=$playlist.playlist_id}
@ -30,7 +161,7 @@
{break}
{/if}
<div class="clearfix popular-video">
{include file="$style_dir/blocks/videos/video.html" display_type='popVideos'}
{include file="$style_dir/blocks/videos/video.html" display_type='popVideos_sidebar'}
</div>
{/foreach}
@ -38,142 +169,8 @@
<div class="well well-info">No Videos Found !</div>
{/if}
{/if}
</div>
<!-- end of related videos and ad box -->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 video_info_actions clearfix">
<div class="clearfix title-area">
<h1>{$video.title|truncate:55}</h1>
<span class="views-count clearfix">
<i class="fa fa-eye"></i>&nbsp;{$vdo.views|number_format}
</span>
</div>
<div class="user-likes-count clearfix">
<div class="user-info col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="{$userquery->profile_link($channel)}" class="avatar">
<img src="{$userquery->avatar($video,'small',userid())}" width="55" height="55">
</a>
<div class="sub-title">
<strong class="user_title">
<a href="{$userquery->profile_link($video)}"> {$video.username}</a>
</strong>
{if $video.userid != userid()}
<a id="subscribeUser" class="btn btn-subscribe btn-primary" href="javascript:void(0)">
<span>{lang('Subscribe')}</span>
<i>{$video.subscribers}</i>
</a>
{/if}
</div>
</div>
<div class="clearfix like-rating col-lg-6 col-md-6 col-sm-6 col-xs-12" id="rating_container">
{if $vdo.allow_rating != 'no'}
{show_video_rating rating=$vdo.rating ratings=$vdo.rated_by total='10' id=$vdo.videoid type=video}
{/if}
</div>
</div>
<div class="tune-tabs clearfix">
<div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
<ul class="clearfix nav nav-tabs">
<li class="active">
<a href="#cb-item-info" data-toggle="tab"><span class="icon-info"></span>{lang('Info')}</a>
</li>
<li>
<a href="#cb-item-share" data-toggle="tab"><span class="icon-share"></span>Share/Embed</a>
</li>
<li>
<a href="#cb-item-addto" data-toggle="tab"><span class="icon-add"></span>{lang('Add to')}</a>
</li>
<li>
<a href="#cb-item-report" data-toggle="tab"><span class="icon-flag"></span>{lang('Report')}
</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in clearfix active" id="cb-item-info">
<div class="clearfix watch-vid-details">
<h2>{description($video.description)}</h2>
<ul class="clearfix desc-list">
<li><strong>{lang('Category')}</strong>:&nbsp;{$vdo.category|categories:video}</li>
<li><strong>{lang('Duration')}</strong>:&nbsp;{if $video.duration>1}{$video.duration|SetTime}{else}00:00{/if}</li>
<li><strong>{lang('Date')}</strong>:&nbsp; {$video.date_added}</li>
<li>
<strong class="pull-left">{lang('Tags')}:&nbsp;&nbsp;</strong>
<span class="pull-left">{$vdo.tags|tags:videos}</span>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade in clearfix" id="cb-item-share">
<ul class="social-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank" class="btn btn-fb">
<span class="fa fa-facebook"></span> Facebook
</a>
</li>
<li>
<a href="https://twitter.com/share" target="_blank" class="btn btn-tw">
<span class="fa fa-twitter"></span> Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank" class="btn btn-gplus">
<span class="fa fa-google-plus"></span> Google Plus
</a>
</li>
</ul>
{show_share_form id=$vdo.videoid type=video}
</div>
<div class="tab-pane fade in clearfix" id="cb-item-addto">
<div class="clearfix btn-fav">
<div id="video_action_result_cont"></div>
<a class="btn btn-block btn-primary" href="javascript:void(0)" onclick="add_to_fav('video','{$vdo.videoid}');">Add to My Favorites</a>
</div>
<div class="clearfix">
{show_playlist_form id=$vdo.videoid type=video}
{if userid()}
<div class="clearfix">
<div class="clearfix btn-holder text-right">
<a href="javascript:void(0)" onclick="$('#addCollectionCont').toggle()" class="btn btn-primary">+ {lang code='add_to_my_collection'}</a>
</div>
<div id="addCollectionCont" style="display:none">
{show_collection_form id=$vdo.videoid type=Video}
</div>
</div>
{/if}
</div>
</div>
<div class="tab-pane fade in clearfix" id="cb-item-report">
<h2>Report Video</h2>
{show_flag_form id=$vdo.videoid type=video}
</div>
</div>
</div>
<div class="clearfix" id="comments-block">
<div id="test1"></div>
<div id="reply" class="clearfix">
<div class="pad-bottom">
<div class="addComment clearfix">
<h2 class="com_count" id="com_count">
{$vdo.comments_count} <span>{lang code='comments'} </span>
</h2>
{if $myquery->is_commentable($vdo,'v')}
{include file="$style_dir/blocks/comments/add_comment.html" id=$vdo.videoid type=v}
{else}
<div class="alert alert-warning">
{lang code='comm_disabled_for_vid'}
</div>
{/if}
</div>
<div id="userCommentsList">
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>

View file

@ -12,13 +12,13 @@
border-color: #e0e0e0; }
.btn-primary {
background: #1976d2;
border-color: #1976d2;
font-weight: 700;
background: #0080b4;
border-color: #0080b4;
font-weight: 400;
color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:hover {
background: #1976d2;
border-color: #1976d2;
background: #0080b4;
border-color: #0080b4;
color: #fff; }
.btn-success {
@ -63,13 +63,13 @@
border-color: #e0e0e0; }
.btn-primary {
background: #1976d2;
border-color: #1976d2;
font-weight: 700;
background: #0080b4;
border-color: #0080b4;
font-weight: 400;
color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:hover {
background: #1976d2;
border-color: #1976d2;
background: #0080b4;
border-color: #0080b4;
color: #fff; }
.btn-success {
@ -528,13 +528,13 @@
border-color: #e0e0e0; }
.btn-primary {
background: #1976d2;
border-color: #1976d2;
font-weight: 700;
background: #0080b4;
border-color: #0080b4;
font-weight: 400;
color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:hover {
background: #1976d2;
border-color: #1976d2;
background: #0080b4;
border-color: #0080b4;
color: #fff; }
.btn-success {
@ -654,13 +654,13 @@
border-color: #e0e0e0; }
.btn-primary {
background: #1976d2;
border-color: #1976d2;
font-weight: 700;
background: #0080b4;
border-color: #0080b4;
font-weight: 400;
color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:hover {
background: #1976d2;
border-color: #1976d2;
background: #0080b4;
border-color: #0080b4;
color: #fff; }
.btn-success {
@ -1628,140 +1628,95 @@ h1 {
.video_player {
height: inherit; }
.watch_vids .popular-video .cb_quickie {
padding: 3px 0; }
.video-details {
background: #fff;
padding: 0; }
.video-details .title-area {
margin: 0 0 13px; }
.video-details .title-area h1 {
float: left;
font-size: 20px;
line-height: 28px;
margin: 0 5px 0 0;
font-weight: 400;
padding: 16px; }
.video-details header.details {
margin: 0 0 20px; }
.video-details header.details h1 {
font-size: 25px;
line-height: 25 px;
margin: 0 0 16px;
font-weight: 600;
color: #333; }
.video-details .title-area .views-count {
float: right;
font-size: 14px;
line-height: 28px; }
.video-details .user-likes-count {
margin: 0 -15px; }
.video-details .user-likes-count .user-info .avatar {
display: inline-block;
vertical-align: middle;
width: 55px;
height: 55px;
margin: 0 5px 0 0;
border-radius: 50%; }
.video-details .user-likes-count .user-info .avatar img {
display: block;
width: 100%;
height: auto;
border-radius: 50%; }
.video-details .user-likes-count .user-info .sub-title {
display: inline-block;
vertical-align: middle; }
.video-details .user-likes-count .user-info .sub-title .user_title {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 600;
margin: 0 0 3px; }
.video-details .user-likes-count .user-info .sub-title .user_title a {
color: #333; }
.video-details .user-likes-count .user-info .sub-title .user_title a:hover {
text-decoration: none; }
.video-details .user-likes-count .user-info .sub-title .btn-subscribe {
font-size: 12px;
line-height: 18px;
.video-details header.details .user-video-info {
margin: 0 0 12px;
display: table;
width: 100%; }
.video-details header.details .user-video-info .views-counter,
.video-details header.details .user-video-info .avatar,
.video-details header.details .user-video-info .user-title {
display: table-cell;
vertical-align: middle; }
.video-details header.details .user-video-info .avatar {
width: 58px; }
.video-details header.details .user-video-info .avatar img {
width: 58px;
height: 58px;
border-radius: 29px; }
.video-details header.details .user-video-info .user-title {
font-size: 18px;
line-height: 20px;
font-weight: 400;
padding: 0;
border: none; }
.video-details .user-likes-count .user-info .sub-title .btn-subscribe span {
float: left;
padding: 0 6px;
border: solid #0059b3;
border-width: 1px 0 1px 1px;
border-radius: 2px 0 0 2px; }
.video-details .user-likes-count .user-info .sub-title .btn-subscribe i {
float: right;
background: #f0f0f0;
color: #333;
padding: 0 6px;
width: 25px;
border: solid #adadad;
border-width: 1px 1px 1px 0;
border-radius: 0 2px 2px 0;
font-style: normal; }
margin: 0;
padding: 0 0 0 16px; }
.video-details header.details .user-video-info .user-title a {
color: #000; }
.video-details header.details .user-video-info .views-counter {
text-align: right;
width: 166px;
font-size: 25px;
line-height: 25px;
padding: 12px 0 11px 16px; }
.video-details header.details .user-video-info .views-counter span {
display: inline-block;
vertical-align: top;
border-bottom: 3px solid #e7e7e7;
width: 100%;
height: 34px; }
.video-details .user-likes-sub {
margin: 0 -15px; }
.video-details .user-likes-sub .like-rating .rating {
padding: 3px 0 2px; }
.video-details .user-likes-sub .subscribe-col {
text-align: right; }
.video-details .user-likes-sub .btn-subscribe {
font-size: 14px;
line-height: 14px; }
/* rating */
.rating {
text-align: right;
color: #7e7e7e;
font-size: 12px;
line-height: 17px;
padding: 0 0 40px;
margin: 0 0 -40px;
position: relative; }
.rating .rating-holder {
position: relative;
display: inline-block;
vertical-align: top; }
.rating .rating-holder:before, .rating .rating-holder:after {
content: "";
position: absolute;
width: 85px;
height: 1px;
background: #e1e1e1;
top: 50%;
left: 0; }
.rating .rating-holder:after {
left: auto;
right: 0; }
.rating #circle,
color: silver;
font-size: 16px;
line-height: 20px; }
.rating .like-dislike {
display: inline-block;
vertical-align: middle; }
.rating .like-dislike {
width: 80px;
margin: 0 0 0 5px;
text-align: right; }
.rating .like-dislike:first-child {
margin: 0 5px 0 0;
text-align: left; }
vertical-align: middle;
margin: 0 16px 0 0; }
.rating .like-dislike a {
display: block; }
.rating .like-dislike a:hover {
text-decoration: none; }
.rating .like-dislike a i {
color: silver; }
.rating .like-dislike a span {
font-size: 18px;
line-height: 20px;
display: inline-block;
vertical-align: middle;
height: 14px;
width: 24px; }
.rating .like-dislike a.btn-like i {
margin: 0 5px 0 0;
background: url(../images/sprite.png) no-repeat -15px -1361px; }
.rating .like-dislike a.btn-like:hover i {
background-position: -15px -1380px; }
.rating .like-dislike a.btn-dislike i {
margin: 0 5px 0 0;
background: url(../images/sprite.png) no-repeat -12px -1411px; }
.rating .like-dislike a.btn-dislike:hover i {
background-position: -12px -1428px; }
margin: 0 10px 0 0; }
.rating .like-dislike.likes {
color: #0080b4; }
.rating .like-dislike.likes a {
color: #0080b4; }
.rating .like-error {
text-align: left;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px; }
display: block; }
.rating .like-error span {
display: block; }
/* tune-tabs */
.error {
display: block;
padding: 10px;
background: #f97373;
color: #fff; }
/* view-tabs */
.cat-tabs {
margin: 0 0 20px;
border: 1px solid #d9d9d9;
@ -1787,44 +1742,49 @@ h1 {
border-color: #0080b4;
font-weight: 700; }
.tune-tabs {
.view-tabs {
color: #333;
margin: 0 0 20px; }
.tune-tabs h2 {
.view-tabs h2 {
font-size: 16px;
line-height: 18px;
margin: 0 0 10px; }
.tune-tabs .alert-info {
.view-tabs .alert-info {
background: none;
color: #333;
font-size: 13px;
line-height: 18px;
border: none;
padding: 0; }
.tune-tabs .nav-tabs.nav {
font-size: 13px;
border-bottom: 1px solid #d9d9d9;
border-bottom-width: 1px; }
.tune-tabs .nav-tabs.nav > li {
margin: 0 0 -1px; }
.tune-tabs .nav-tabs.nav > li > a {
border-bottom: 1px solid #d9d9d9;
border-width: 0 0 2px;
border-color: transparent;
margin: 0; }
.tune-tabs .nav-tabs.nav > li > a:hover {
.view-tabs .nav-tabs.nav {
font-size: 16px;
border: 1px solid #d9d9d9;
border-width: 1px 0; }
.view-tabs .nav-tabs.nav > li {
margin: 0; }
.view-tabs .nav-tabs.nav > li > a {
border: none;
margin: 0;
padding: 10px 16px 10px 0;
color: #7c7c7c; }
.view-tabs .nav-tabs.nav > li > a:hover {
border-color: #0080b4;
background: none;
color: #333; }
.tune-tabs .nav-tabs.nav > li.active > a, .tune-tabs .nav-tabs.nav > li.active > a:hover, .tune-tabs .nav-tabs.nav > li.active > a:focus {
border-color: #0080b4;
color: #333;
.view-tabs .nav-tabs.nav > li > a span {
display: inline-block;
vertical-align: top;
margin: 0 10px 0 0;
font-size: 18px;
line-height: 22px; }
.view-tabs .nav-tabs.nav > li.active > a, .view-tabs .nav-tabs.nav > li.active > a:hover, .view-tabs .nav-tabs.nav > li.active > a:focus {
color: #0080b4;
background: none; }
.tune-tabs .tab-content > .tab-pane {
.view-tabs .tab-content > .tab-pane {
padding: 10px 0 0; }
.tune-tabs .tab-content .infotable table td {
.view-tabs .tab-content .infotable table td {
width: 50%; }
.tune-tabs .tab-content .infotable table td img {
.view-tabs .tab-content .infotable table td img {
display: inline-block;
vertical-align: middle;
margin: 0 5px 0 0; }
@ -2672,11 +2632,6 @@ textarea#comment_box {
margin: 0;
padding: 10px; }
.error {
padding: 10px;
background: #f97373;
color: #fff; }
.form_result,
#flag_form_result {
margin: 0 0 10px; }

File diff suppressed because one or more lines are too long

View file

@ -3,7 +3,7 @@
position:absolute;
width:100%;
bottom:0;
background:$blue-color;
background:$blue;
padding:18px 0;
font-size: 16px;
line-height:20px;
@ -16,7 +16,7 @@
color: #fff;
&:hover{
text-decoration: none;
//color: $blue-color;
//color: $blue;
}
}
.icon-holder{

View file

@ -80,7 +80,7 @@
left: 0;
width: 100%;
height: 3px;
background: $blue-color;
background: $blue;
}
}
}
@ -95,7 +95,7 @@
left: 0;
width: 100%;
height: 3px;
background: $blue-color;
background: $blue;
}
}
}
@ -144,7 +144,7 @@
box-shadow: none;
color: $black;
&.btn-search{
background: $blue-color;
background: $blue;
color: $white;
font-size: 20px;
width: 40px;
@ -200,7 +200,7 @@
}
&:hover{
color: $white;
background:$blue-color;
background:$blue;
}
}
&:first-child >a{
@ -213,7 +213,7 @@
> .active > a,
> .active > a:hover,
> .active > a:focus{
background:$blue-color;
background:$blue;
color:$white;
}
}

View file

@ -13,15 +13,13 @@ $dark-btn:#17181a;
$header-btn:#262727;
$dropdown-bg:#424242;
// $duration-bg:rgba(0,0,0,0.8);
$blue-color:#0080b4;
$blue:#0080b4;
$body-bg:#eee;
$block-bg:#eee;
$block-color:#333;
$heading-color:#666;
$search-toggle:#999;
$base-font:'Source Sans Pro', sans-serif;
$base-color:#000;
$base-color:$black;
$iconfont: 'icomoon';
$default-border:1px solid #d9d9d9;
$fb-color:#2b4b90;
@ -215,17 +213,17 @@ $probox-bg: #f8f8f8;
}
}
.btn-primary{
background:#1976d2;
border-color:#1976d2;
font-weight: 700;
background:$blue;
border-color:$blue;
font-weight: 400;
color:#fff;
&:hover,
&:focus,
&:active,
&.active,
&:hover{
background:#1976d2;
border-color:#1976d2;
background:$blue;
border-color:$blue;
color:#fff;
}
}

View file

@ -209,15 +209,15 @@ h1{
color: $black;
text-decoration: none;
&:hover{
color: $blue-color;
color: $blue;
}
}
}
.author{
margin: 0 0 2px;
color:$blue-color;
color:$blue;
a{
color: $blue-color;
color: $blue;
text-decoration: none;
}
}
@ -308,8 +308,8 @@ h1{
background: none;
cursor: pointer;
&.icon-tick{
background:$blue-color;
border-color:$blue-color;
background:$blue;
border-color:$blue;
}
}
.vid-type{
@ -436,16 +436,16 @@ h1{
color: $black;
text-decoration: none;
&:hover{
color: $blue-color;
color: $blue;
}
}
}
.author{
display: block;
margin: 0 0 5px;
color:$blue-color;
color:$blue;
a{
color: $blue-color;
color: $blue;
text-decoration: none;
}
}
@ -724,11 +724,11 @@ h1{
font-size: 15px;
@include vertical-top();
i{
color: $blue-color;
color: $blue;
@include transition($transition:all 0.1s ease-in-out);
}
&:hover{
color: $blue-color;
color: $blue;
text-decoration: none;
i{
margin: 0 0 0 5px;
@ -916,174 +916,116 @@ h1{
.video_player{
height: inherit;
}
.watch_vids{
.popular-video .cb_quickie{
padding: 3px 0;
}
}
.video-details{
background: $white;
padding: 0;
.title-area{
margin: 0 0 13px;
padding: 16px;
header.details{
margin: 0 0 20px;
h1{
float: left;
font-size: 20px;
line-height: 28px;
margin: 0 5px 0 0;
font-weight: 400;
font-size: 25px;
line-height: 25 px;
margin: 0 0 16px;
font-weight: 600;
color:$block-color;
}
.views-count{
float: right;
font-size: 14px;
line-height: 28px;
.user-video-info{
margin: 0 0 12px;
display: table;
width: 100%;
.views-counter,
.avatar,
.user-title{
display: table-cell;
vertical-align: middle;
}
.avatar{
width: 58px;
img{
width:58px;
height:58px;
border-radius: 29px;
}
}
.user-title{
font-size: 18px;
line-height: 20px;
font-weight: 400;
margin: 0;
padding: 0 0 0 16px;
a{
color: $black;
}
}
.views-counter{
text-align: right;
width: 166px;
font-size: 25px;
line-height: 25px;
padding: 12px 0 11px 16px;
span{
@include vertical-top();
border-bottom: 3px solid darken($body-bg,2.6%);
width: 100%;
height: 34px;
}
}
}
}
.user-likes-count{
.user-likes-sub{
margin: 0 -15px;
.user-info{
.avatar{
@include vertical-middle();
width: 55px;
height: 55px;
margin: 0 5px 0 0;
border-radius: 50%;
img{
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
}
.sub-title{
@include vertical-middle();
.user_title{
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 600;
margin: 0 0 3px;
a{
color:$block-color;
&:hover{
text-decoration: none;
}
}
}
.btn-subscribe{
font-size: 12px;
line-height: 18px;
font-weight: 400;
padding: 0;
border:none;
span{
float: left;
padding: 0 6px;
border:solid #0059b3;
border-width: 1px 0 1px 1px;
border-radius:2px 0 0 2px;
}
i{
float: right;
background:#f0f0f0;
color:$block-color;
padding: 0 6px;
width: 25px;
border:solid #adadad;
border-width: 1px 1px 1px 0;
border-radius: 0 2px 2px 0;
font-style: normal;
}
}
.like-rating{
.rating{
padding: 3px 0 2px;
}
}
.subscribe-col{
text-align: right;
}
.btn-subscribe{
font-size: 14px;
line-height: 14px;
}
}
}
/* rating */
.rating{
text-align: right;
color: #7e7e7e;
font-size: 12px;
line-height: 17px;
padding: 0 0 40px;
margin: 0 0 -40px;
position: relative;
.rating-holder{
position: relative;
@include vertical-top();
&:before,
&:after{
content: "";
position: absolute;
width: 85px;
height: 1px;
background:#e1e1e1;
top: 50%;
left: 0;
}
&:after{
left: auto;
right: 0;
}
}
#circle,
color: darken($body-bg,18%);
font-size: 16px;
line-height: 20px;
.like-dislike{
@include vertical-middle();
}
.like-dislike{
width: 80px;
margin: 0 0 0 5px;
text-align:right;
&:first-child{
margin: 0 5px 0 0;
text-align:left;
}
margin: 0 16px 0 0;
a{
display: block;
&:hover{
text-decoration: none;
}
i{
color: darken($body-bg,18%);
span{
font-size: 18px;
line-height: 20px;
@include vertical-middle();
height: 14px;
width: 24px;
margin: 0 10px 0 0;
}
&.btn-like{
i{
margin: 0 5px 0 0;
background: $sprite -15px -1361px;
}
&:hover i{
background-position: -15px -1380px;
}
}
&.btn-dislike{
i{
margin: 0 5px 0 0;
background: $sprite -12px -1411px;
}
&:hover i{
background-position: -12px -1428px;
}
}
&.likes{
color: $blue;
a{
color: $blue;
}
}
}
.like-error{
text-align: left;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
display: block;
span{
display: block;
}
}
}
/* tune-tabs */
.error{
display: block;
padding: 10px;
background: #f97373;
color: #fff;
}
/* view-tabs */
.cat-tabs{
margin: 0 0 20px;
border:$default-border;
@ -1101,19 +1043,19 @@ h1{
border-bottom: 3px solid transparent;
&:hover{
text-decoration: none;
border-color: $blue-color;
border-color: $blue;
}
}
&.selected{
a{
border-color: $blue-color;
border-color: $blue;
font-weight: 700;
}
}
}
}
}
.tune-tabs{
.view-tabs{
color: $block-color;
margin: 0 0 20px;
h2{
@ -1130,27 +1072,32 @@ h1{
padding: 0;
}
.nav-tabs.nav{
font-size: 13px;
border-bottom:$default-border;
border-bottom-width: 1px;
font-size: 16px;
border:$default-border;
border-width: 1px 0;
>li{
margin: 0 0 -1px;
margin: 0;
>a{
border-bottom:$default-border;
border-width: 0 0 2px;
border-color:transparent;
border:none;
margin: 0;
padding: 10px 16px 10px 0;
color: lighten($grey-txt,2.7%);
&:hover{
border-color:$blue-color;
border-color:$blue;
background: none;
color: $block-color;
}
span{
@include vertical-top();
margin: 0 10px 0 0;
font-size: 18px;
line-height: 22px;
}
}
&.active > a,
&.active > a:hover,
&.active > a:focus{
border-color:$blue-color;
color: $block-color;
color: $blue;
background: none;
}
}
@ -1182,10 +1129,10 @@ h1{
li{
margin: 0 0 10px;
a{
color: $blue-color;
color: $blue;
&:hover{
text-decoration: none;
color: darken($blue-color,10%);
color: darken($blue,10%);
}
}
}
@ -1302,7 +1249,7 @@ h1{
&:hover{
background:$white;
border-color:$white;
color: $blue-color;
color: $blue;
}
i{
@include vertical-top();
@ -1319,7 +1266,7 @@ h1{
> span:hover{
background:$white;
border-color:$white;
color: $blue-color;
color: $blue;
}
}
}
@ -1607,7 +1554,7 @@ textarea#comment_box{
&:hover{
text-decoration: none;
.avatar{
background:$blue-color;
background:$blue;
}
}
}
@ -1618,7 +1565,7 @@ textarea#comment_box{
border-radius:50%;
padding: 3px;
background: #fff;
border:1px solid $blue-color;
border:1px solid $blue;
margin: 0 auto 10px;
}
h2{
@ -1857,7 +1804,7 @@ textarea#comment_box{
}
.changeCover{
display: none;
background: $blue-color;
background: $blue;
border-radius: 4px;
color: #fff;
position: absolute;
@ -2032,7 +1979,7 @@ textarea#comment_box{
font-size: 20px;
line-height: 20px;
&:hover{
color: $blue-color;
color: $blue;
}
}
}
@ -2222,11 +2169,7 @@ textarea#comment_box{
}
.error{
padding: 10px;
background: #f97373;
color: #fff;
}
.form_result,
#flag_form_result{
margin: 0 0 10px;
@ -2703,7 +2646,7 @@ textarea#comment_box{
padding: 5px 10px;
min-width: 50px;
border-radius:12px;
background:$blue-color;
background:$blue;
color: #fff;
i{
vertical-align: middle;
@ -2711,7 +2654,7 @@ textarea#comment_box{
line-height: 8px;
background: #fff;
padding: 2px 5px 1px;
color: $blue-color;
color: $blue;
margin: 0 5px 0 0;
}
}