Fixes for watch video and videos
photos page structure and style added
This commit is contained in:
jamilrehman
parent
d974dbc163
commit
d53b99f7e4
15 changed files with 2711 additions and 231 deletions
|
|
@ -11,7 +11,7 @@
|
|||
<input type="hidden" name="alternate_embed_code" id="alternate_embed_code" value="{if $Cbucket->configs.embed_type=='iframe'}{$cbvid->embed_code($vdo,'embed_object')|htmlspecialchars}{else}{$cbvid->embed_code($vdo,'iframe')|htmlspecialchars}{/if}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group custom-elements">
|
||||
<label class="block-label">{lang('Player size')}</label>
|
||||
<div class="clearfix">
|
||||
<label class="radio-inline">
|
||||
|
|
@ -37,25 +37,29 @@
|
|||
</div>
|
||||
|
||||
{if $pakplayer=='yes'}
|
||||
<div class="form-group">
|
||||
<div class="form-group custom-elements">
|
||||
Autoplay video :
|
||||
<label>
|
||||
<input type="radio" name="autoplay" value="yes" onclick="{$updateEmbedCode}(embedPlayerWidth,embedPlayerHeight,'yes')" {if $Cbucket->configs.autoplay_embed=='yes'} checked{/if}>Yes
|
||||
<input type="radio" name="autoplay" value="yes" onclick="{$updateEmbedCode}(embedPlayerWidth,embedPlayerHeight,'yes')" {if $Cbucket->configs.autoplay_embed=='yes'} checked{/if}>
|
||||
Yes
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="autoplay" value="no" onclick="{$updateEmbedCode}(embedPlayerWidth,embedPlayerHeight,'no')" {if $Cbucket->configs.autoplay_embed!='yes'} checked{/if}>No
|
||||
<input type="radio" name="autoplay" value="no" onclick="{$updateEmbedCode}(embedPlayerWidth,embedPlayerHeight,'no')" {if $Cbucket->configs.autoplay_embed!='yes'} checked{/if}>
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group custom-elements">
|
||||
<label class="block-label">{lang('Embed type')}</label>
|
||||
<div class="clearfix">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="embed_type" value="iframe" onclick="switchEmbedCode('iframe')" {if $Cbucket->configs.embed_type=='iframe'} checked{/if}>Iframe
|
||||
<input type="radio" name="embed_type" value="iframe" onclick="switchEmbedCode('iframe')" {if $Cbucket->configs.embed_type=='iframe'} checked{/if}>
|
||||
Iframe
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="embed_type" value="iframe" onclick="switchEmbedCode('embed_object')" {if $Cbucket->configs.embed_type=='embed_object'} checked{/if}>Embed Object
|
||||
<input type="radio" name="embed_type" value="iframe" onclick="switchEmbedCode('embed_object')" {if $Cbucket->configs.embed_type=='embed_object'} checked{/if}>
|
||||
Embed Object
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,40 @@
|
|||
{if $display_type == ""}
|
||||
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 col-valign-top photo-item">
|
||||
<a class="photo-holder" href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">
|
||||
{get_photo details=$photo size='l' class='img-responsive photo-land' output='html'}
|
||||
<i class="icon-zoom"></i>
|
||||
</a>
|
||||
<div class="photo-info">
|
||||
{if $photo.photo_title=='no-tag'}
|
||||
<strong><a href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">no-title</a></strong>
|
||||
{else}
|
||||
<strong><a href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">{$photo.photo_title|truncate:50}</a></strong>
|
||||
{/if}
|
||||
<span>By <a href="{$userquery->profile_link($photo.userid)}">{$photo.username}</a></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{if $display_type == "featuredPhoto_sidebar"}
|
||||
<a class="photo-holder" href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">
|
||||
{get_photo details=$photo size='l' class='img-responsive photo-land' output='html'}
|
||||
<i class="icon-zoom"></i>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{if $display_type == "search_photos"}
|
||||
<a class="searchresult-photo" href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">
|
||||
{get_photo details=$photo size='l' class='img-responsive photo-land' output='html'}
|
||||
<div class="hover">
|
||||
<span class="photo-title">
|
||||
{if $photo.photo_title=='no-tag'}no-title
|
||||
{else}
|
||||
{$photo.photo_title|truncate:25}
|
||||
{/if}
|
||||
</span>
|
||||
<span class="plus hidden-xs hidden-sm">plus</span>
|
||||
<div class="hover hidden-xs hidden-sm">
|
||||
<i class="icon-zoom"></i>
|
||||
</div>
|
||||
</a>
|
||||
<div class="photo-info">
|
||||
{if $photo.photo_title=='no-tag'}
|
||||
<strong><a href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">no-title</a></strong>
|
||||
{else}
|
||||
<strong><a href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">{$photo.photo_title|truncate:50}</a></strong>
|
||||
{/if}
|
||||
<span>By <a href="{$userquery->profile_link($photo.userid)}">{$photo.username}</a></span>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
{if $display_type == 'related_photos'}
|
||||
|
|
@ -65,8 +86,3 @@
|
|||
{get_photo details=$photo output='html' width='110' height='64' size='m' style='display:block;margin:0px auto;'}
|
||||
</li> <!-- itemBox {$photo.photo_key} end -->
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
{$myAccountLinks = $userquery->my_account_links()}
|
||||
{$leftMenuLinks = array_slice($myAccountLinks, 6)}
|
||||
<div id="main" class="clearfix">
|
||||
<div class="custom-container clearfix">
|
||||
{*include file="$style_dir/blocks/manage/account_menu.html"*}
|
||||
<div class="clearfix photos-block">
|
||||
<!-- Page Heading -->
|
||||
<header class="heading clearfix">
|
||||
<div id="main" class="clearfix container">
|
||||
<div class="clearfix">
|
||||
<section id="content" class="clearfix photos-block">
|
||||
<div class="clearfix leaderboard-ad ad">
|
||||
{AD place='ad_728x90'}
|
||||
</div>
|
||||
{assign var=sorting_links value=sorting_links()}
|
||||
<h1>{lang code="Browsing All Categories"}<i class="icon-arrow-right"></i></h1>
|
||||
<div class="dropdowns clearfix">
|
||||
<div class="filter-dropdowns clearfix">
|
||||
<div class="sorting-col clearfix">
|
||||
<!--Sorting By View-->
|
||||
<div class="dropdown">
|
||||
{if $smarty.get.sort}
|
||||
|
|
@ -52,30 +52,73 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
<!-- /Page Heading -->
|
||||
<div class="clearfix row">
|
||||
|
||||
{$counter=0}
|
||||
|
||||
{section name=p_list loop=$photos}
|
||||
|
||||
{$photos[p_list].counter=$counter}
|
||||
|
||||
{include file="$style_dir/blocks/photo.html" photo=$photos[p_list]}
|
||||
|
||||
{$counter=$counter+1}
|
||||
|
||||
{sectionelse}
|
||||
<div class="clearfix">{lang code='no_results_found'}</div>
|
||||
{/section}
|
||||
{if $photos}
|
||||
{foreach from=$photos item=p_list}
|
||||
<div class="item-photo col-lg-4 col-md-4 col-sm-6 col-xs-6">
|
||||
{include file="$style_dir/blocks/photo.html" photo=$p_list}
|
||||
</div>
|
||||
{/foreach}
|
||||
{else}
|
||||
<div class="well well-info">{lang code='no_results_found'}</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
<div align="center" class="clearfix">
|
||||
{include file="$style_dir/blocks/pagination.html"}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<aside id="sidebar">
|
||||
<div class="box-ad ad">{AD place='ad_300x250'}</div>
|
||||
<h2>Featured Photos</h2>
|
||||
<div class="clearfix sidebar-items">
|
||||
{$featured=get_photos(["featured"=>"yes","limit"=>6])}
|
||||
{if $featured}
|
||||
<div class="row">
|
||||
{foreach $featured as $photo}
|
||||
<div class="item-photo col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
{include file="$style_dir/blocks/photo.html" display_type='featuredPhoto_sidebar'}
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{else}
|
||||
<div class="well well-info">No Videos Found !</div>
|
||||
{/if}
|
||||
</div>
|
||||
{$row = $myquery->Get_Website_Details()}
|
||||
{if $row.collectionsSection == 'yes'}
|
||||
{$collections = $cbcollection->get_collections(['limit'=>5, 'active'=>'yes'])}
|
||||
<h2>{lang code="Top Collections"}</h2>
|
||||
<div class="clearfix collections-grid">
|
||||
<div class="clearfix row">
|
||||
{$limit=10}
|
||||
{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="collection-holder">
|
||||
<div class="photo-block">
|
||||
<a href="{$cbphoto->photo_links($item,'view_item')}">
|
||||
<img alt="{$collection.title}" title="{$collection.title}" class="img-responsive" id="photo_{$collection.ci_id}" src="{$first_col_thumb}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="collection-info">
|
||||
<span>{$collection.total_objects}</span>Photo(s)
|
||||
</div>
|
||||
<img src="{$theme}/images/photo-bg.png" alt="" class="photo-bg">
|
||||
</div>
|
||||
<span>{$collection.collection_name}</span>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{else}
|
||||
<div class="col-md-12 nopadding">No Collection</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
<aside id="sidebar">
|
||||
<div class="box-ad ad">{AD place='ad_300x250'}</div>
|
||||
<h2>Featured Videos</h2>
|
||||
<div class="clearfix sidebar-videos">
|
||||
<div class="clearfix sidebar-items">
|
||||
{$featured=$cbvid->get_videos(["featured"=>"yes","limit"=>6])}
|
||||
{if $featured}
|
||||
{foreach $featured as $video}
|
||||
|
|
|
|||
|
|
@ -694,20 +694,30 @@
|
|||
.sidebar-channels .channel-item .channel-info .views-videos span:first-child:after {
|
||||
display: none; }
|
||||
|
||||
.sidebar-videos {
|
||||
.sidebar-items {
|
||||
background: #fff;
|
||||
padding: 6px 16px 0; }
|
||||
.sidebar-videos .featured-video {
|
||||
padding: 16px 16px 0; }
|
||||
.sidebar-items .featured-video {
|
||||
font-size: 14px;
|
||||
line-height: 14px; }
|
||||
.sidebar-videos .featured-video .title {
|
||||
.sidebar-items .featured-video:first-child {
|
||||
padding: 0 0 14px; }
|
||||
.sidebar-items .featured-video .title {
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 6px; }
|
||||
.sidebar-videos .featured-video .author {
|
||||
.sidebar-items .featured-video .author {
|
||||
font-size: 13px;
|
||||
line-height: 13px; }
|
||||
.sidebar-items .row {
|
||||
margin: 0 -8px; }
|
||||
.sidebar-items .item-photo .photo-holder i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
margin: -15px 0 0 -15px; }
|
||||
|
||||
/* variables */
|
||||
/**/
|
||||
|
|
@ -1937,7 +1947,10 @@ h1 {
|
|||
.share_form .form-group label.block-label span {
|
||||
font-size: 14px;
|
||||
color: #757575; }
|
||||
.share_form .form-group .radio-inline input[type="radio"] {
|
||||
.share_form .form-group .radio-inline {
|
||||
padding: 0;
|
||||
line-height: 22px; }
|
||||
.share_form .form-group .radio-inline input[type="radio"] {
|
||||
margin-top: 2px; }
|
||||
.share_form textarea {
|
||||
resize: none; }
|
||||
|
|
@ -1947,6 +1960,72 @@ h1 {
|
|||
font-weight: 600; }
|
||||
|
||||
/* end of watch video */
|
||||
/* photos page */
|
||||
.photos-block .row {
|
||||
margin: 0 -8px; }
|
||||
|
||||
.item-photo {
|
||||
padding: 0 8px;
|
||||
margin: 0 0 16px; }
|
||||
.item-photo .photo-holder {
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
z-index: 1; }
|
||||
.item-photo .photo-holder:after {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: -9999px; }
|
||||
.item-photo .photo-holder i {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
top: 50%;
|
||||
left: -9999px;
|
||||
margin: -20px 0 0 -20px; }
|
||||
.item-photo .photo-holder:hover:after {
|
||||
left: 0; }
|
||||
.item-photo .photo-holder:hover i {
|
||||
left: 50%; }
|
||||
.item-photo .photo-info {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 82px; }
|
||||
.item-photo .photo-info strong,
|
||||
.item-photo .photo-info span {
|
||||
display: block; }
|
||||
.item-photo .photo-info strong {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 8px; }
|
||||
.item-photo .photo-info strong a {
|
||||
color: #000; }
|
||||
.item-photo .photo-info span {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
color: #0080b4; }
|
||||
.item-photo .photo-info span a {
|
||||
color: #0080b4; }
|
||||
|
||||
/**/
|
||||
.custom-container {
|
||||
max-width: 1170px;
|
||||
padding: 0 15px;
|
||||
|
|
@ -2952,24 +3031,6 @@ textarea#comment_box {
|
|||
font-weight: 300;
|
||||
margin: 0 0 20px; }
|
||||
|
||||
.photo-holder {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 0 20px;
|
||||
margin: 0 0 20px; }
|
||||
.photo-holder:hover .view-photo-nxt,
|
||||
.photo-holder:hover .view-photo-pre {
|
||||
display: block; }
|
||||
.photo-holder > img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto; }
|
||||
.photo-holder .img_bg_area {
|
||||
height: 100%;
|
||||
border-right: 1px solid #bbbbbb; }
|
||||
.photo-holder .img_bg_small {
|
||||
height: 100%; }
|
||||
|
||||
#collectionItemView .photos-block {
|
||||
padding: 0; }
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,77 @@
|
|||
/* variables */
|
||||
/**/
|
||||
/**/
|
||||
/* buttons */
|
||||
.btn-default {
|
||||
background: #ededed;
|
||||
border-color: #e0e0e0;
|
||||
font-weight: 700;
|
||||
color: #000; }
|
||||
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .btn-default:hover {
|
||||
background: #ededed;
|
||||
border-color: #e0e0e0; }
|
||||
|
||||
.btn-primary {
|
||||
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: #0080b4;
|
||||
border-color: #0080b4;
|
||||
color: #fff; }
|
||||
|
||||
.btn-success {
|
||||
background: #4caf50;
|
||||
border-color: #4caf50;
|
||||
font-weight: 700;
|
||||
color: #fff; }
|
||||
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success:hover {
|
||||
background: #4caf50;
|
||||
border-color: #4caf50;
|
||||
color: #fff; }
|
||||
|
||||
/* form elements */
|
||||
.form-control {
|
||||
color: #000;
|
||||
background: #f6f6f6;
|
||||
border-color: #d9d9d9;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
height: 42px;
|
||||
/* placeholder input styles */ }
|
||||
.form-control input[type="text"]::-webkit-input-placeholder {
|
||||
/* WebKit browsers */
|
||||
color: #bdbdbd; }
|
||||
.form-control input[type="text"]:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
color: #bdbdbd; }
|
||||
.form-control input[type="text"]::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
color: #bdbdbd;
|
||||
opacity: 1; }
|
||||
.form-control input[type="text"]:-ms-input-placeholder {
|
||||
/* Internet Explorer 10+ */
|
||||
color: #bdbdbd; }
|
||||
|
||||
/* sprite */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
||||
.playlists-dropdown .item_playlist .playlist-thumb .date-time,
|
||||
.playlists-dropdown .playlist-header .close-playlists,
|
||||
.headerIcon.active.playlist-icon a,
|
||||
.headerIcon.active.channels-icon a,
|
||||
.headerIcon.active.video-icon a,
|
||||
.headerIcon.playlist-icon a,
|
||||
.headerIcon.channels-icon a,
|
||||
.headerIcon.video-icon a,
|
||||
.navbar-default .right-menu.navbar-nav > li > a.user-area .btn-setting,
|
||||
.navbar-default .right-menu.navbar-nav > li > a.btn-upload,
|
||||
.ch-playlists .playlist-thumb .date-time,
|
||||
.rating .like-dislike a.btn-dislike i,
|
||||
.rating .like-dislike a.btn-like i {
|
||||
background-image: url("../images/sprite@2x.png") !important;
|
||||
/* Translate the @2x sprite's dimensions back to 1x */
|
||||
background-size: 60px 4400px !important; } }
|
||||
.jcf-hidden {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
|
|
@ -8,8 +82,8 @@
|
|||
.chk-area {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url("../images/custom-elements-sprite.png") no-repeat -253px -14px; }
|
||||
|
||||
.chk-checked {
|
||||
|
|
@ -64,15 +138,20 @@
|
|||
.rad-area {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url("../images/custom-elements-sprite.png") no-repeat -283px -15px; }
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
font: 22px/22px "icomoon";
|
||||
background: #f6f6f6;
|
||||
color: #bebebe; }
|
||||
.rad-area:after {
|
||||
content: "\e909"; }
|
||||
|
||||
.rad-checked {
|
||||
background-position: -283px -48px; }
|
||||
|
||||
.rad-disabled {
|
||||
background-position: -283px -80px; }
|
||||
background: #f6f6f6;
|
||||
color: #0080b4; }
|
||||
.rad-checked:after {
|
||||
content: "\e90a"; }
|
||||
|
||||
/* custom select styles */
|
||||
.select-area {
|
||||
|
|
@ -238,8 +317,7 @@
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
border-radius: 2px; }
|
||||
width: 10px; }
|
||||
|
||||
.scrollable-area-wrapper .hscroll-left,
|
||||
.scrollable-area-wrapper .vscroll-up,
|
||||
|
|
@ -253,16 +331,15 @@
|
|||
|
||||
.scrollable-area-wrapper .hscroll-line,
|
||||
.scrollable-area-wrapper .vscroll-line {
|
||||
width: 4px;
|
||||
float: left;
|
||||
border-radius: 2px; }
|
||||
background: #ecf0f1;
|
||||
width: 11px;
|
||||
float: left; }
|
||||
|
||||
.scrollable-area-wrapper .hscroll-slider,
|
||||
.scrollable-area-wrapper .vscroll-slider {
|
||||
background: #0080b4;
|
||||
width: 4px;
|
||||
height: 80px !important;
|
||||
border-radius: 2px; }
|
||||
background: #34495e;
|
||||
width: 11px;
|
||||
height: 20px; }
|
||||
|
||||
.scrollable-area-wrapper .hscrollbar {
|
||||
position: static;
|
||||
|
|
@ -275,27 +352,6 @@
|
|||
|
||||
/* Retian Sprite */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
||||
/*logo sprite*/
|
||||
.chk-area,
|
||||
.chk-checked,
|
||||
.chk-disabled,
|
||||
.rad-area,
|
||||
.rad-checked,
|
||||
.rad-disabled,
|
||||
.no-yes .chk-area,
|
||||
.no-yes .chk-checked,
|
||||
.no-yes .chk-disabled,
|
||||
.check-out .chk-area,
|
||||
.check-out .chk-checked,
|
||||
.check-out .chk-disabled,
|
||||
.on-off .chk-area,
|
||||
.on-off .chk-checked,
|
||||
.on-off .chk-disabled,
|
||||
.select-area .select-opener,
|
||||
.select-circle .jcf-upload-button {
|
||||
/* Reference the @2x Sprite */
|
||||
background-image: url("../images/custom-elements-sprite@2x.png") !important;
|
||||
/* Translate the @2x sprite's dimensions back to 1x */
|
||||
background-size: 320px 150px !important; } }
|
||||
/*logo sprite*/ }
|
||||
|
||||
/*# sourceMappingURL=custom-elements.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -51,12 +51,6 @@ $(document).ready(function(){
|
|||
|
||||
responsiveFixes();
|
||||
|
||||
$("body").on('click', '.btn-playlist, .close-playlists', function(){
|
||||
$(".playlists-dropdown").toggleClass('active');
|
||||
jcf.customForms.replaceAll('.custom-elements');
|
||||
});
|
||||
|
||||
|
||||
$(".navbar-sm-login-links a").click(function(){
|
||||
$("body").removeClass('sideactive');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@
|
|||
}
|
||||
}
|
||||
.search-icon{
|
||||
font:17px/20px $iconfont;
|
||||
font:17px/20px $font-icon;
|
||||
}
|
||||
.navbar-header{
|
||||
padding: 10px 0;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $orange:#ffa000;
|
|||
$dark-btn:#17181a;
|
||||
$header-btn:#262727;
|
||||
$dropdown-bg:#424242;
|
||||
// $duration-bg:rgba(0,0,0,0.8);
|
||||
$opacity:0.6;
|
||||
$blue:#0080b4;
|
||||
$body-bg:#eee;
|
||||
$block-color:#333;
|
||||
|
|
@ -20,7 +20,7 @@ $heading-color:#666;
|
|||
$search-toggle:#999;
|
||||
$base-font:'Source Sans Pro', sans-serif;
|
||||
$base-color:$black;
|
||||
$iconfont: 'icomoon';
|
||||
$font-icon: 'icomoon';
|
||||
$bordercolor:#d9d9d9;
|
||||
$default-border:1px solid $bordercolor;
|
||||
$fb-color:#2b4b90;
|
||||
|
|
@ -30,6 +30,9 @@ $com-color:#2d2d2d;
|
|||
$probox-bg: #f8f8f8;
|
||||
$input-bg: #f6f6f6;
|
||||
/**/
|
||||
@mixin overlaybg($color, $opacity){
|
||||
background: rgba($color, $opacity);
|
||||
}
|
||||
@mixin txtinput(){
|
||||
color:$base-color;
|
||||
background: $input-bg;
|
||||
|
|
@ -52,6 +55,7 @@ $input-bg: #f6f6f6;
|
|||
color: lighten($base-color,74%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin gradient-bg(){
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.6+0,0.59+43,0.55+49,0.26+70,0.12+82,0.05+90,0.01+100 */
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.59) 43%, rgba(0,0,0,0.55) 49%, rgba(0,0,0,0.26) 70%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0.01) 100%); /* FF3.6-15 */
|
||||
|
|
|
|||
|
|
@ -72,12 +72,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.sidebar-videos{
|
||||
.sidebar-items{
|
||||
background: $white;
|
||||
padding: 6px 16px 0;
|
||||
padding: 16px 16px 0;
|
||||
.featured-video{
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
&:first-child{
|
||||
padding: 0 0 14px;
|
||||
}
|
||||
.title{
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
|
|
@ -89,4 +92,18 @@
|
|||
line-height: 13px;
|
||||
}
|
||||
}
|
||||
.row{
|
||||
margin: 0 -8px;
|
||||
}
|
||||
.item-photo{
|
||||
.photo-holder{
|
||||
i{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
line-height: 30px;
|
||||
margin: -15px 0 0 -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1184,6 +1184,8 @@ h1{
|
|||
}
|
||||
}
|
||||
.radio-inline{
|
||||
padding: 0;
|
||||
line-height: 22px;
|
||||
input[type="radio"]{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
@ -1199,6 +1201,87 @@ h1{
|
|||
}
|
||||
}
|
||||
/* end of watch video */
|
||||
/* photos page */
|
||||
.photos-block{
|
||||
.row{
|
||||
margin: 0 -8px;
|
||||
}
|
||||
}
|
||||
.item-photo{
|
||||
padding: 0 8px;
|
||||
margin: 0 0 16px;
|
||||
.photo-holder{
|
||||
display: block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
z-index: 1;
|
||||
&:after{
|
||||
@include overlaybg($color:$black, $opacity:0.8);
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: -9999px;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
top: 50%;
|
||||
left: -9999px;
|
||||
margin: -20px 0 0 -20px;
|
||||
}
|
||||
&:hover{
|
||||
&:after{
|
||||
left: 0;
|
||||
}
|
||||
i{
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.photo-info{
|
||||
overflow: hidden;
|
||||
background: $white;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-weight: 300;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 82px;
|
||||
strong,
|
||||
span{
|
||||
display: block;
|
||||
}
|
||||
strong{
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 8px;
|
||||
a{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
span{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
color: $blue;
|
||||
a{
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**/
|
||||
.custom-container{
|
||||
max-width: 1170px;
|
||||
padding: 0 15px;
|
||||
|
|
@ -2351,30 +2434,7 @@ textarea#comment_box{
|
|||
.vid-detail-sec .avatar{
|
||||
|
||||
}
|
||||
.photo-holder {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0 0 20px;
|
||||
margin: 0 0 20px;
|
||||
&:hover{
|
||||
.view-photo-nxt,
|
||||
.view-photo-pre{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.img_bg_area {
|
||||
height: 100%;
|
||||
border-right: 1px solid #bbbbbb;
|
||||
}
|
||||
.img_bg_small {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#collectionItemView{
|
||||
.photos-block{
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import "mymixins";
|
||||
$custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repeat;
|
||||
.jcf-hidden {
|
||||
display: block !important;
|
||||
|
|
@ -8,10 +9,9 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
.chk-area {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: $custom-elements-sprite-bg -253px -14px;
|
||||
|
||||
}
|
||||
.chk-checked {
|
||||
background-position: -253px -45px;
|
||||
|
|
@ -76,18 +76,31 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
.rad-area {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $custom-elements-sprite-bg -283px -15px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
font: 22px/22px $font-icon;
|
||||
background:$input-bg;
|
||||
color: darken($input-bg,22%);
|
||||
&:after{
|
||||
content: "\e909";
|
||||
}
|
||||
//background: $custom-elements-sprite-bg -283px -15px;
|
||||
}
|
||||
|
||||
.rad-checked {
|
||||
background-position: -283px -48px;
|
||||
//background-position: -283px -48px;
|
||||
background:$input-bg;
|
||||
color:$blue;
|
||||
&:after{
|
||||
content: "\e90a";
|
||||
}
|
||||
}
|
||||
.rad-focus {
|
||||
//border-color: #f00;
|
||||
}
|
||||
.rad-disabled {
|
||||
background-position: -283px -80px;
|
||||
//background-position: -283px -80px;
|
||||
}
|
||||
/* custom select styles */
|
||||
.select-area {
|
||||
|
|
@ -262,8 +275,7 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
width: 10px;
|
||||
}
|
||||
.scrollable-area-wrapper .hscroll-left,
|
||||
.scrollable-area-wrapper .vscroll-up,
|
||||
|
|
@ -277,17 +289,15 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
}
|
||||
.scrollable-area-wrapper .hscroll-line,
|
||||
.scrollable-area-wrapper .vscroll-line {
|
||||
// background: #ecf0f1;
|
||||
width: 4px;
|
||||
background: #ecf0f1;
|
||||
width: 11px;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.scrollable-area-wrapper .hscroll-slider,
|
||||
.scrollable-area-wrapper .vscroll-slider {
|
||||
background: #0080b4;
|
||||
width: 4px;
|
||||
height: 80px !important;
|
||||
border-radius: 2px;
|
||||
background: #34495e;
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
}
|
||||
.scrollable-area-wrapper .hscrollbar {
|
||||
position: static;
|
||||
|
|
@ -300,29 +310,28 @@ $custom-elements-sprite-bg: url('../images/custom-elements-sprite.png') no-repea
|
|||
}
|
||||
/* Retian Sprite */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 100dpi) {
|
||||
|
||||
/*logo sprite*/
|
||||
.chk-area,
|
||||
.chk-checked,
|
||||
.chk-disabled,
|
||||
.rad-area,
|
||||
.rad-checked,
|
||||
.rad-disabled,
|
||||
.no-yes .chk-area,
|
||||
.no-yes .chk-checked,
|
||||
.no-yes .chk-disabled,
|
||||
.check-out .chk-area,
|
||||
.check-out .chk-checked,
|
||||
.check-out .chk-disabled,
|
||||
.on-off .chk-area,
|
||||
.on-off .chk-checked,
|
||||
.on-off .chk-disabled,
|
||||
.select-area .select-opener,
|
||||
.select-circle .jcf-upload-button
|
||||
{
|
||||
/* Reference the @2x Sprite */
|
||||
background-image:url('../images/custom-elements-sprite@2x.png') !important;
|
||||
/* Translate the @2x sprite's dimensions back to 1x */
|
||||
background-size: 320px 150px !important;
|
||||
}
|
||||
// .chk-area,
|
||||
// .chk-checked,
|
||||
// .chk-disabled,
|
||||
// .rad-area,
|
||||
// .rad-checked,
|
||||
// .rad-disabled,
|
||||
// .no-yes .chk-area,
|
||||
// .no-yes .chk-checked,
|
||||
// .no-yes .chk-disabled,
|
||||
// .check-out .chk-area,
|
||||
// .check-out .chk-checked,
|
||||
// .check-out .chk-disabled,
|
||||
// .on-off .chk-area,
|
||||
// .on-off .chk-checked,
|
||||
// .on-off .chk-disabled,
|
||||
// .select-area .select-opener,
|
||||
// .select-circle .jcf-upload-button
|
||||
// {
|
||||
// /* Reference the @2x Sprite */
|
||||
// background-image:url('../images/custom-elements-sprite@2x.png') !important;
|
||||
// /* Translate the @2x sprite's dimensions back to 1x */
|
||||
// background-size: 320px 150px !important;
|
||||
// }
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue