Your IP : 216.73.216.171
<?php
// Album Cover Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'cover_border',
'selector' => ".fl-node-$id .pp-album-cover",
) );
// Overlay Margin
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'overlay_margin',
'selector' => ".fl-node-$id .pp-album-cover-overlay",
'unit' => 'px',
'props' => array(
'margin-top' => 'overlay_margin_top',
'margin-right' => 'overlay_margin_right',
'margin-bottom' => 'overlay_margin_bottom',
'margin-left' => 'overlay_margin_left',
),
) );
// Album Cover Hover Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'cover_hover_border',
'selector' => ".fl-node-$id .pp-album-container-wrap:hover .pp-album-cover",
) );
// Overlay Hover Margin
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'overlay_hover_margin',
'selector' => ".fl-node-$id .pp-album-container-wrap:hover .pp-album-cover-overlay",
'unit' => 'px',
'props' => array(
'margin-top' => 'overlay_hover_margin_top',
'margin-right' => 'overlay_hover_margin_right',
'margin-bottom' => 'overlay_hover_margin_bottom',
'margin-left' => 'overlay_hover_margin_left',
),
) );
?>
.fl-node-<?php echo $id; ?> .pp-album-cover img {
transform: scale(<?php echo $settings->cover_img_scale;?>);
}
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover img {
transform: scale(<?php echo $settings->cover_img_hover_scale;?>);
}
.fl-node-<?php echo $id; ?> .pp-album-cover-overlay {
background-color: <?php echo $settings->cover_overlay_bg ? pp_get_color_value( $settings->cover_overlay_bg ) : 'transparent'; ?>;
}
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover .pp-album-cover-overlay {
background-color: <?php echo $settings->cover_overlay_hover_bg; ?>;
}
.fl-node-<?php echo $id; ?> .pp-album-container-wrap {
margin: 0 auto;
cursor: pointer;
}
<?php
FLBuilderCSS::responsive_rule( array(
'settings' => $settings,
'setting_name' => 'cover_width',
'selector' => ".fl-node-$id .pp-album-container-wrap",
'prop' => 'width',
'unit' => 'px',
'enabled' => 'album_cover' == $settings->trigger_on && '' !== $settings->cover_width
) );
FLBuilderCSS::responsive_rule( array(
'settings' => $settings,
'setting_name' => 'cover_height',
'selector' => ".fl-node-$id .pp-album-container-wrap",
'prop' => 'height',
'unit' => 'px',
'enabled' => 'album_cover' == $settings->trigger_on && '' !== $settings->cover_height
) );
?>
<?php if ( ! empty( $settings->cover_height ) ) { ?>
/*
.fl-node-<?php echo $id; ?> .pp-album-cover {
position: absolute;
}
*/
<?php } ?>
.fl-node-<?php echo $id; ?> .pp-album-content-wrap {
align-items: <?php echo $settings->horizontal_align; ?>;
justify-content: <?php echo $settings->vertical_align; ?>;
}
.fl-node-<?php echo $id; ?> .pp-album-container-wrap.pp-trigger-button {
width: 100%;
display: flex;
justify-content: <?php echo $settings->btn_align; ?>;
}
<?php
// Content Padding
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_padding',
'selector' => ".fl-node-$id .pp-album-content",
'unit' => 'px',
'props' => array(
'padding-top' => 'content_padding_top',
'padding-right' => 'content_padding_right',
'padding-bottom' => 'content_padding_bottom',
'padding-left' => 'content_padding_left',
),
) );
// Content Margin
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_margin',
'selector' => ".fl-node-$id .pp-album-content",
'unit' => 'px',
'props' => array(
'margin-top' => 'content_margin_top',
'margin-right' => 'content_margin_right',
'margin-bottom' => 'content_margin_bottom',
'margin-left' => 'content_margin_left',
),
) );
// Content Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_border',
'selector' => ".fl-node-$id .pp-album-content",
) );
// Content Hover Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_hover_border',
'selector' => ".fl-node-$id .pp-album-container-wrap:hover .pp-album-content",
) );
?>
.fl-node-<?php echo $id; ?> .pp-album-content-wrap .pp-album-content {
background-color: <?php echo $settings->content_bg ? pp_get_color_value( $settings->content_bg ) : 'transparent'; ?>;
text-align: <?php echo $settings->content_text_align;?>;
transition: all 0.4s ease-in-out;
}
<?php if( isset($settings->content_bg) ) {?>
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover .pp-album-content {
background-color: <?php echo pp_get_color_value( $settings->content_hover_bg ); ?>;
}
<?php } ?>
.fl-node-<?php echo $id; ?> .pp-album-content.pp-album-cover-button-position-inline {
align-items: <?php echo $settings->inline_button_pos; ?>;
}
.fl-node-<?php echo $id; ?> .pp-album-icon {
color: <?php echo pp_get_color_value( $settings->content_icon_color ); ?>;
margin-bottom: <?php echo $settings->content_icon_spacing; ?>px;
font-size: <?php echo $settings->content_icon_size; ?>px;
transition: all 0.4s ease-in-out;
}
<?php if( isset($settings->content_icon_color_h) ) {?>
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover .pp-album-content .pp-album-icon {
color: <?php echo pp_get_color_value( $settings->content_icon_color_h ); ?>;
}
<?php } ?>
<?php
// Title Typography
FLBuilderCSS::typography_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_title_typo',
'selector' => ".fl-node-$id .pp-album-title",
) );
// Subtitle Typography
FLBuilderCSS::typography_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_subtitle_typo',
'selector' => ".fl-node-$id .pp-album-subtitle",
) );
// Button Typography
FLBuilderCSS::typography_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_button_typo',
'selector' => ".fl-node-$id .pp-album-cover-button-wrap",
) );
?>
.fl-node-<?php echo $id; ?> .pp-album-title {
color: <?php echo pp_get_color_value( $settings->content_title_color ); ?>;
margin-bottom: <?php echo $settings->content_title_spacing; ?>px;
transition: all 0.4s ease-in-out;
}
<?php if( isset($settings->content_title_color_h) ) {?>
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover .pp-album-content .pp-album-title {
color: <?php echo pp_get_color_value( $settings->content_title_color_h ); ?>;
}
<?php } ?>
.fl-node-<?php echo $id; ?> .pp-album-subtitle {
color: <?php echo pp_get_color_value( $settings->content_subtitle_color ); ?>;
transition: all 0.4s ease-in-out;
}
<?php if( isset($settings->content_subtitle_color_h) ) {?>
.fl-node-<?php echo $id; ?> .pp-album-container-wrap:hover .pp-album-content .pp-album-subtitle {
color: <?php echo pp_get_color_value( $settings->content_subtitle_color_h ); ?>;
}
<?php } ?>
.fl-node-<?php echo $id; ?> .pp-album-cover-button-wrap {
color: <?php echo pp_get_color_value( $settings->content_button_color ); ?>;
background-color: <?php echo pp_get_color_value( $settings->content_button_bg ); ?>;
transition: all 0.4s ease-in-out;
}
.fl-node-<?php echo $id; ?> .pp-album-content .pp-album-cover-button-wrap:hover {
color: <?php echo pp_get_color_value( $settings->content_button_hover_color ); ?>;
background-color: <?php echo pp_get_color_value( $settings->content_button_hover_bg ); ?>;
border-color: <?php echo pp_get_color_value( $settings->content_button_hover_border ); ?>;
}
<?php
// Content Button Padding
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_button_padding',
'selector' => ".fl-node-$id .pp-album-cover-button-wrap",
'unit' => 'px',
'props' => array(
'padding-top' => 'content_button_padding_top',
'padding-right' => 'content_button_padding_right',
'padding-bottom' => 'content_button_padding_bottom',
'padding-left' => 'content_button_padding_left',
),
) );
// Content Button Margin
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_button_margin',
'selector' => ".fl-node-$id .pp-album-cover-button-wrap",
'unit' => 'px',
'props' => array(
'margin-top' => 'content_button_margin_top',
'margin-right' => 'content_button_margin_right',
'margin-bottom' => 'content_button_margin_bottom',
'margin-left' => 'content_button_margin_left',
),
) );
// Content Button Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'content_button_border',
'selector' => ".fl-node-$id .pp-album-cover-button-wrap",
) );
?>
<?php // Trigger Button
$iconCss = 'display: flex;';
$iconSpace = $settings->icon_spacing . 'px';
if( 'left' == $settings->cover_btn_align ){
if( 'top' == $settings->icon_position ){
$iconCss .= 'flex-direction: column-reverse;';
$iconCss .= 'align-items: flex-start;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-bottom:'. $iconSpace . ';}';
}elseif( 'bottom' == $settings->icon_position ){
$iconCss .= 'flex-direction: column;';
$iconCss .= 'align-items: flex-start;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-top:'. $iconSpace . ';}';
}elseif( 'left' == $settings->icon_position ){
$iconCss .= 'flex-direction: row-reverse;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: flex-end;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-right:'. $iconSpace . ';}';
}elseif( 'right' == $settings->icon_position ){
$iconCss .= 'flex-direction: row;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: flex-start;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-left:'. $iconSpace . ';}';
}
}elseif( 'center' == $settings->cover_btn_align ){
if( 'top' == $settings->icon_position ){
$iconCss .= 'flex-direction: column-reverse;';
$iconCss .= 'align-items: center;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-bottom:'. $iconSpace . ';}';
}elseif( 'bottom' == $settings->icon_position ){
$iconCss .= 'flex-direction: column;';
$iconCss .= 'align-items: center;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-top:'. $iconSpace . ';}';
}elseif( 'left' == $settings->icon_position ){
$iconCss .= 'flex-direction: row-reverse;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: center;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-right:'. $iconSpace . ';}';
}elseif( 'right' == $settings->icon_position ){
$iconCss .= 'flex-direction: row;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: center;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-left:'. $iconSpace . ';}';
}
}elseif( 'right' == $settings->cover_btn_align ){
if( 'top' == $settings->icon_position ){
$iconCss .= 'flex-direction: column-reverse;';
$iconCss .= 'align-items: flex-end;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-bottom:'. $iconSpace . ';}';
}elseif( 'bottom' == $settings->icon_position ){
$iconCss .= 'flex-direction: column;';
$iconCss .= 'align-items: flex-end;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-top:'. $iconSpace . ';}';
}elseif( 'left' == $settings->icon_position ){
$iconCss .= 'flex-direction: row-reverse;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: flex-start;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-right:'. $iconSpace . ';}';
}elseif( 'right' == $settings->icon_position ){
$iconCss .= 'flex-direction: row;';
$iconCss .= 'align-items: center;';
$iconCss .= 'justify-content: flex-end;';
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-left:'. $iconSpace . ';}';
}
}
?>
.fl-node-<?php echo $id; ?> .pp-album-button-content {
width: <?php echo $settings->btn_max_width;?>px;
margin: 0 auto;
}
.fl-node-<?php echo $id; ?> .pp-album-button-inner {
<?php echo $iconCss;?>;
color: <?php echo pp_get_color_value( $settings->trigger_button_color ); ?> !important;
background-color: <?php echo pp_get_color_value( $settings->trigger_button_bg ); ?>;
transition: all 0.4s ease-in-out;
}
.fl-node-<?php echo $id; ?> .pp-album-button-inner:hover {
color: <?php echo pp_get_color_value( $settings->trigger_button_hover_color ); ?> !important;
background-color: <?php echo pp_get_color_value( $settings->trigger_button_hover_bg ); ?>;
border-color: <?php echo pp_get_color_value( $settings->trigger_button_hover_border ); ?>;
}
.fl-node-<?php echo $id; ?> .pp-album-button-content i {
font-size: <?php echo $settings->trigger_icon_size;?>px;
color: <?php echo pp_get_color_value( $settings->trigger_icon_color ); ?>;
transition: all 0.4s ease-in-out;
}
.fl-node-<?php echo $id; ?> .pp-album-button-inner:hover i {
color: <?php echo pp_get_color_value( $settings->trigger_icon_hover_color ); ?>;
}
<?php
// Trigger Button Padding
FLBuilderCSS::dimension_field_rule( array(
'settings' => $settings,
'setting_name' => 'trigger_button_padding',
'selector' => ".fl-node-$id .pp-album-button-inner",
'unit' => 'px',
'props' => array(
'padding-top' => 'trigger_button_padding_top',
'padding-right' => 'trigger_button_padding_right',
'padding-bottom' => 'trigger_button_padding_bottom',
'padding-left' => 'trigger_button_padding_left',
),
) );
// Trigger Button Border - Settings
FLBuilderCSS::border_field_rule( array(
'settings' => $settings,
'setting_name' => 'trigger_button_border',
'selector' => ".fl-node-$id .pp-album-button-inner",
) );
// Trigger Button Typography
FLBuilderCSS::typography_field_rule( array(
'settings' => $settings,
'setting_name' => 'trigger_button_typo',
'selector' => ".fl-node-$id .pp-album-button-inner",
) );
?>
@media only screen and (max-width: <?php echo $global_settings->medium_breakpoint; ?>px) {
.fl-node-<?php echo $id; ?> .pp-album-container-wrap {
width: <?php echo $settings->cover_width_medium;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-cover-wrap {
height: <?php echo $settings->cover_height_medium;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-icon {
margin-bottom: <?php echo $settings->content_icon_spacing_medium; ?>px;
font-size: <?php echo $settings->content_icon_size_medium; ?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-title {
margin-bottom: <?php echo $settings->content_title_spacing_medium; ?>px;
}
<?php // Trigger Button
$iconSpace_medium = $settings->icon_spacing_medium . 'px';
if( 'top' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-bottom:'. $iconSpace_medium . ';}';
}elseif( 'bottom' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-top:'. $iconSpace_medium . ';}';
}elseif( 'left' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-right:'. $iconSpace_medium . ';}';
}elseif( 'right' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-left:'. $iconSpace_medium . ';}';
}
?>
.fl-node-<?php echo $id; ?> .pp-album-button-content {
max-width: <?php echo $settings->btn_max_width_medium;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-button-content i {
font-size: <?php echo $settings->trigger_icon_size_medium;?>px;
}
}
@media only screen and (max-width: <?php echo $global_settings->responsive_breakpoint; ?>px) {
.fl-node-<?php echo $id; ?> .pp-album-container-wrap {
width: <?php echo $settings->cover_width_responsive;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-cover-wrap {
height: <?php echo $settings->cover_height_responsive;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-icon {
margin-bottom: <?php echo $settings->content_icon_spacing_responsive; ?>px;
font-size: <?php echo $settings->content_icon_size_responsive; ?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-title {
margin-bottom: <?php echo $settings->content_title_spacing_responsive; ?>px;
}
<?php // Trigger Button
$iconSpace_responsive = $settings->icon_spacing_responsive . 'px';
if( 'top' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-bottom:'. $iconSpace_responsive . ';}';
}elseif( 'bottom' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-top:'. $iconSpace_responsive . ';}';
}elseif( 'left' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-right:'. $iconSpace_responsive . ';}';
}elseif( 'right' == $settings->icon_position ){
echo '.fl-node-' . $id . ' .pp-album-button-content i { margin-left:'. $iconSpace_responsive . ';}';
}
?>
.fl-node-<?php echo $id; ?> .pp-album-button-content {
max-width: <?php echo $settings->btn_max_width_responsive;?>px;
}
.fl-node-<?php echo $id; ?> .pp-album-button-content i {
font-size: <?php echo $settings->trigger_icon_size_responsive;?>px;
}
}
.fancybox-is-open.pp-fancybox-<?php echo $id; ?> .fancybox-bg {
background-color: <?php echo pp_get_color_value( $settings->lightbox_bg_color ); ?>;
opacity: <?php echo $settings->lightboxbg_opacity; ?>;
}
.fancybox-is-open.pp-fancybox-<?php echo $id; ?> .fancybox-thumbs {
background-color: <?php echo pp_get_color_value( $settings->thumbs_bg_color ); ?>;
}