| 1 |
<?php |
| 2 |
/** |
| 3 |
* The dynamic CSS for Carousel layout. |
| 4 |
* |
| 5 |
* @package Smart_Post_Show |
| 6 |
*/ |
| 7 |
|
| 8 |
$carousel_nav_position = SP_PC_Functions::pcp_metabox_value( 'pcp_carousel_nav_position', $view_options ); |
| 9 |
if ( 'vertically_center_outer' === $carousel_nav_position ) { |
| 10 |
$custom_css .= '.pcp-wrapper-{$pcp_id} .swiper-container{ position: static; }'; |
| 11 |
} |
| 12 |
|
| 13 |
// Pagination options. |
| 14 |
$pcp_pagination = isset( $view_options['pcp_pagination'] ) ? $view_options['pcp_pagination'] : ''; |
| 15 |
$_pagination_color_set = $view_options['pcp_pagination_color_set']; |
| 16 |
$_pagination_colors = $_pagination_color_set['pcp_pagination_color']; |
| 17 |
$pagination_color = $_pagination_colors['color']; |
| 18 |
$pagination_color_active = $_pagination_colors['active-color']; |
| 19 |
if ( 'hide_on_mobile' === $pcp_pagination ) { |
| 20 |
$custom_css .= "@media (max-width: 480px) { #pcp_wrapper-{$pcp_id} .pcp-pagination{ display: none; } }"; |
| 21 |
} $custom_css .= "#pcp_wrapper-{$pcp_id} .dots .swiper-pagination-bullet{ background: {$pagination_color}; } #pcp_wrapper-{$pcp_id} .dots .swiper-pagination-bullet-active { background: {$pagination_color_active}; }"; |
| 22 |
|
| 23 |
$carousel_nav_position = SP_PC_Functions::pcp_metabox_value( 'pcp_carousel_nav_position', $view_options ); |
| 24 |
if ( 'vertically_center_outer' === $carousel_nav_position ) { |
| 25 |
$custom_css .= '.pcp-wrapper-{$pcp_id} .swiper-container{ position: static; }'; |
| 26 |
} |
| 27 |
// Navigation options. |
| 28 |
$pcp_navigation = isset( $view_options['pcp_navigation'] ) ? $view_options['pcp_navigation'] : ''; |
| 29 |
$_nav_colors = SP_PC_Functions::pcp_metabox_value( 'pcp_nav_colors', $view_options ); |
| 30 |
$nav_color = SP_PC_Functions::pcp_metabox_value( 'color', $_nav_colors ); |
| 31 |
$nav_color_hover = SP_PC_Functions::pcp_metabox_value( 'hover-color', $_nav_colors ); |
| 32 |
$nav_color_bg = SP_PC_Functions::pcp_metabox_value( 'bg', $_nav_colors ); |
| 33 |
$nav_color_bg_hover = SP_PC_Functions::pcp_metabox_value( 'hover-bg', $_nav_colors ); |
| 34 |
$nav_color_border = SP_PC_Functions::pcp_metabox_value( 'border-color', $_nav_colors ); |
| 35 |
$nav_color_border_hover = SP_PC_Functions::pcp_metabox_value( 'hover-border-color', $_nav_colors ); |
| 36 |
if ( 'hide_on_mobile' === $pcp_navigation ) { |
| 37 |
$custom_css .= "@media (max-width: 480px) { #pcp_wrapper-{$pcp_id} .pcp-button-prev, #pcp_wrapper-{$pcp_id} .pcp-button-next{ display: none; } }"; |
| 38 |
} |
| 39 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .pcp-button-prev, |
| 40 |
#pcp_wrapper-{$pcp_id} .pcp-button-next{ background-image: none; background-size: auto; background-color: {$nav_color_bg}; height: 33px; width: 33px; margin-top: 8px; border: 1px solid {$nav_color_border}; text-align: center; line-height: 30px; -webkit-transition: 0.3s; }"; |
| 41 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .pcp-button-prev:hover, #pcp_wrapper-{$pcp_id} .pcp-button-next:hover{ background-color: {$nav_color_bg_hover}; border-color: {$nav_color_border_hover}; } #pcp_wrapper-{$pcp_id} .pcp-button-prev .fa, #pcp_wrapper-{$pcp_id} .pcp-button-next .fa { color: {$nav_color}; } #pcp_wrapper-{$pcp_id} .pcp-button-prev:hover .fa, #pcp_wrapper-{$pcp_id} .pcp-button-next:hover .fa { color: {$nav_color_hover}; } #pcp_wrapper-{$pcp_id}.pcp-carousel-wrapper .sp-pcp-post{ margin-top: 0; }"; |
| 42 |
|
