| 1 |
<?php |
| 2 |
/** |
| 3 |
* Dynamic CSS |
| 4 |
* |
| 5 |
* @package Smart_Post_Show |
| 6 |
* @subpackage Smart_Post_Show/public |
| 7 |
*/ |
| 8 |
|
| 9 |
if ( ! defined( 'ABSPATH' ) ) { |
| 10 |
exit; // Exit if accessed directly. |
| 11 |
} |
| 12 |
|
| 13 |
$layout_preset = isset( $layout['pcp_layout_preset'] ) ? $layout['pcp_layout_preset'] : ''; |
| 14 |
$section_title = isset( $view_options['section_title'] ) ? $view_options['section_title'] : false; |
| 15 |
|
| 16 |
// Section Title. |
| 17 |
if ( $section_title ) { |
| 18 |
$section_title_margin = isset( $view_options['section_title_margin'] ) && is_array( $view_options['section_title_margin'] ) ? $view_options['section_title_margin'] : array( |
| 19 |
'top' => '0', |
| 20 |
'right' => '0', |
| 21 |
'bottom' => '30', |
| 22 |
'left' => '0', |
| 23 |
); |
| 24 |
$section_title_margin_top = (int) $section_title_margin ['top'] > 0 ? $section_title_margin ['top'] . 'px' : 0; |
| 25 |
$section_title_margin_right = (int) $section_title_margin['right'] > 0 ? $section_title_margin['right'] . 'px' : 0; |
| 26 |
$section_title_margin_bottom = (int) $section_title_margin['bottom'] > -100 ? (int) $section_title_margin['bottom'] . 'px' : 0; |
| 27 |
$section_title_margin_left = (int) $section_title_margin['left'] > 0 ? $section_title_margin['left'] . 'px' : 0; |
| 28 |
$_section_title_color = isset( $view_options['section_title_typography']['color'] ) ? $view_options['section_title_typography']['color'] : '#111'; |
| 29 |
$custom_css .= "#poststuff #sp_pcp_display .sp-pcp-section .pcp-section-title, #pcp_wrapper-{$pcp_id} .pcp-section-title{color: {$_section_title_color };margin: {$section_title_margin_top} {$section_title_margin_right} {$section_title_margin_bottom} {$section_title_margin_left}}"; |
| 30 |
} |
| 31 |
$margin_between_horizontal_post = isset( $view_options['margin_between_post']['left-right'] ) ? (int) $view_options['margin_between_post']['left-right'] : 20; |
| 32 |
$margin_between_vertical_post = isset( $view_options['margin_between_post']['top-bottom'] ) ? (int) $view_options['margin_between_post']['top-bottom'] : 20; |
| 33 |
$margin_between_post_half = $margin_between_horizontal_post / 2; |
| 34 |
$custom_css .= "#pcp_wrapper-{$pcp_id}:not(.sps-glossary-layout) .sp-pcp-row,#pcp_wrapper-{$pcp_id} .sps-glossary-items-group .sps-glossary-items-content {margin-right: -{$margin_between_post_half}px;margin-left: -{$margin_between_post_half}px;}#pcp_wrapper-{$pcp_id} .sp-pcp-row [class*='sp-pcp-col-']{padding-right: {$margin_between_post_half}px;padding-left: {$margin_between_post_half}px; padding-bottom:{$margin_between_vertical_post}px;}"; |
| 35 |
|
| 36 |
/** |
| 37 |
* Style for each slide/post. |
| 38 |
*/ |
| 39 |
$post_sorter = isset( $view_options['post_content_sorter'] ) ? $view_options['post_content_sorter'] : ''; |
| 40 |
|
| 41 |
// Post Title. |
| 42 |
if ( isset( $post_sorter['pcp_post_title']['show_post_title'] ) && $post_sorter['pcp_post_title']['show_post_title'] ) { |
| 43 |
$_post_title_typography = isset( $view_options['post_title_typography'] ) && is_array( $view_options['post_title_typography'] ) ? $view_options['post_title_typography'] : array( |
| 44 |
'color' => '#111', |
| 45 |
'hover_color' => '#e1624b', |
| 46 |
); |
| 47 |
$custom_css .= ".pcp-wrapper-{$pcp_id} .sp-pcp-title a {color: {$_post_title_typography['color']};display: inherit;} .pcp-wrapper-{$pcp_id} .sp-pcp-title a:hover {color: {$_post_title_typography['hover_color']};}"; |
| 48 |
} |
| 49 |
|
| 50 |
// Post Content. |
| 51 |
$pcp_post_content = isset( $post_sorter['pcp_post_content'] ) ? $post_sorter['pcp_post_content'] : ''; |
| 52 |
$show_post_content = isset( $pcp_post_content['show_post_content'] ) ? $pcp_post_content['show_post_content'] : ''; |
| 53 |
if ( $show_post_content ) { |
| 54 |
$_post_content_color = isset( $view_options['post_content_typography']['color'] ) ? $view_options['post_content_typography']['color'] : '#444'; |
| 55 |
$custom_css .= ".pcp-wrapper-{$pcp_id} .sp-pcp-post-content{color: {$_post_content_color}; }"; |
| 56 |
} |
| 57 |
|
| 58 |
if ( 'carousel_layout' === $layout_preset || 'slider_layout' === $layout_preset ) { |
| 59 |
include SP_PC_PATH . '/public/dynamic-css/carousel-css.php'; |
| 60 |
} |
| 61 |
|
| 62 |
// Post inner padding. |
| 63 |
$post_content_orientation = isset( $view_options['post_content_orientation'] ) ? $view_options['post_content_orientation'] : 'default'; |
| 64 |
if ( 'overlay' !== $post_content_orientation ) { |
| 65 |
$_post_inner_padding = SP_PC_Functions::pcp_metabox_value( 'post_inner_padding_property', $view_options ); |
| 66 |
$post_inner_padding_unit = $_post_inner_padding['unit']; |
| 67 |
$post_inner_padding_top = $_post_inner_padding['top'] > 0 ? $_post_inner_padding['top'] . $post_inner_padding_unit : '0'; |
| 68 |
$post_inner_padding_right = $_post_inner_padding['right'] > 0 ? $_post_inner_padding['right'] . $post_inner_padding_unit : '0'; |
| 69 |
$post_inner_padding_bottom = $_post_inner_padding['bottom'] > 0 ? $_post_inner_padding['bottom'] . $post_inner_padding_unit : '0'; |
| 70 |
$post_inner_padding_left = $_post_inner_padding['left'] > 0 ? $_post_inner_padding['left'] . $post_inner_padding_unit : '0'; |
| 71 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .sp-pcp-post {padding: {$post_inner_padding_top} {$post_inner_padding_right} {$post_inner_padding_bottom} {$post_inner_padding_left};}#pcp_wrapper-{$pcp_id}.sp-slider_layout .sp-pcp-post .sp-pcp-post-details {top: {$post_inner_padding_top}; right:{$post_inner_padding_right}; bottom:{$post_inner_padding_bottom}; left:{$post_inner_padding_left};}"; |
| 72 |
} |
| 73 |
|
| 74 |
// Post border. |
| 75 |
$_post_border = $view_options['post_border']; |
| 76 |
$post_border_width = isset( $_post_border['all'] ) ? (int) $_post_border['all'] : '0'; |
| 77 |
$post_border_style = $_post_border['style']; |
| 78 |
$post_border_color = $_post_border['color']; |
| 79 |
$post_border_radius = isset( $_post_border['border_radius'] ) ? $_post_border['border_radius'] . $_post_border['unit'] : 0; |
| 80 |
if ( isset( $post_border_width ) ) { |
| 81 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .sp-pcp-post {border: {$post_border_width}px {$post_border_style} {$post_border_color}; border-radius: {$post_border_radius} }"; |
| 82 |
} |
| 83 |
|
| 84 |
// Post background color. |
| 85 |
$post_background_property = SP_PC_Functions::pcp_metabox_value( 'post_background_property', $view_options ); |
| 86 |
if ( ! in_array( $post_content_orientation, array( 'overlay', 'overlay-box' ), true ) ) { |
| 87 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .sp-pcp-post{background-color: {$post_background_property};}"; |
| 88 |
} |
| 89 |
|
| 90 |
/** |
| 91 |
* Post Thumbnail CSS. |
| 92 |
*/ |
| 93 |
$post_thumb_css = $post_sorter['pcp_post_thumb']; |
| 94 |
|
| 95 |
// Border for Post thumb. |
| 96 |
$post_thumb_border = isset( $post_thumb_css['pcp_thumb_border'] ) ? $post_thumb_css['pcp_thumb_border'] : array( |
| 97 |
'all' => '0', |
| 98 |
'style' => 'solid', |
| 99 |
'color' => '#dddddd', |
| 100 |
'border_radius' => '0', |
| 101 |
'unit' => 'px', |
| 102 |
); |
| 103 |
if ( isset( $post_thumb_border['all'] ) ) { |
| 104 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .pcp-post-thumb-wrapper{border: {$post_thumb_border['all']}px {$post_thumb_border['style']} {$post_thumb_border['color']};border-radius:{$post_thumb_border['border_radius']}{$post_thumb_border['unit']};}"; |
| 105 |
} |
| 106 |
|
| 107 |
// Post Meta. |
| 108 |
$_post_meta_color = isset( $view_options['post_meta_typography']['color'] ) ? $view_options['post_meta_typography']['color'] : '#888'; |
| 109 |
$_post_meta_hover_color = isset( $view_options['post_meta_typography']['hover_color'] ) ? $view_options['post_meta_typography']['hover_color'] : '#e1624b'; |
| 110 |
$custom_css .= ".pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li,.pcp-wrapper-{$pcp_id} .sp-pcp-post-meta ul,.pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a{color: {$_post_meta_color};}"; |
| 111 |
$custom_css .= ".pcp-wrapper-{$pcp_id} .sp-pcp-post-meta li a:hover{color: {$_post_meta_hover_color};}"; |
| 112 |
|
| 113 |
// Post ReadMore Settings. |
| 114 |
$post_content_settings = isset( $post_sorter['pcp_post_content'] ) ? $post_sorter['pcp_post_content'] : ''; |
| 115 |
$show_read_more = isset( $post_content_settings['show_read_more'] ) ? $post_content_settings['show_read_more'] : ''; |
| 116 |
if ( $show_read_more ) { |
| 117 |
$_button_color = $post_content_settings['readmore_color_button']; |
| 118 |
$read_more_btn_border = isset( $post_content_settings['read_more_btn_border'] ) ? $post_content_settings['read_more_btn_border'] : array( |
| 119 |
'all' => '1', |
| 120 |
'style' => 'solid', |
| 121 |
'color' => '#888', |
| 122 |
'hover_color' => '#e1624b', |
| 123 |
'border_radius' => '0', |
| 124 |
'unit' => 'px', |
| 125 |
); |
| 126 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .pcp-readmore-link{ background: {$_button_color['bg']}; color: {$_button_color['standard']}; border: {$read_more_btn_border['all']}px {$read_more_btn_border['style']} {$read_more_btn_border['color']}; border-radius: {$read_more_btn_border['border_radius']}{$read_more_btn_border['unit']}; } #pcp_wrapper-{$pcp_id} .pcp-readmore-link:hover { background-color: {$_button_color['hover_bg']}; color: {$_button_color['hover']}; border-color: {$read_more_btn_border['hover_color']}; }"; |
| 127 |
} |
| 128 |
|
| 129 |
// Pagination CSS and Live filter CSS. |
| 130 |
$show_pagination = isset( $view_options['show_post_pagination'] ) ? $view_options['show_post_pagination'] : ''; |
| 131 |
if ( $show_pagination ) { |
| 132 |
$pagination_btn_color = $view_options['pcp_pagination_btn_color']; |
| 133 |
$pagination_border = isset( $view_options['pcp_pagination_btn_border']['all'] ) ? $view_options['pcp_pagination_btn_border'] : array( |
| 134 |
'all' => '2', |
| 135 |
'style' => 'solid', |
| 136 |
'color' => '#bbbbbb', |
| 137 |
'hover_color' => '#e1624b', |
| 138 |
'border_radius' => '2', |
| 139 |
'unit' => 'px', |
| 140 |
); |
| 141 |
$pagination_alignment = isset( $view_options['pagination_alignment'] ) ? $view_options['pagination_alignment'] : 'left'; |
| 142 |
$custom_css .= "#pcp_wrapper-{$pcp_id} .pcp-post-pagination .page-numbers.current, #pcp_wrapper-{$pcp_id} .pcp-post-pagination a.active , #pcp_wrapper-{$pcp_id} .pcp-post-pagination a:hover{ color: {$pagination_btn_color['text_acolor']}; background: {$pagination_btn_color['active_background']}; border-color: {$pagination_border ['hover_color']}; }#pcp_wrapper-{$pcp_id} .pcp-post-pagination .page-numbers, .pcp-post-pagination a{ background: {$pagination_btn_color['background']}; color:{$pagination_btn_color['text_color']}; border: {$pagination_border['all']}px {$pagination_border['style']} {$pagination_border['color']};border-radius: {$pagination_border['border_radius']}{$pagination_border['unit']}; }#pcp_wrapper-{$pcp_id} .pcp-post-pagination{text-align: {$pagination_alignment};}"; |
| 143 |
} |
| 144 |
|
| 145 |
$custom_css .= '@media (min-width: 1200px) { |
| 146 |
.sp-pcp-row .sp-pcp-col-xl-1 { |
| 147 |
flex: 0 0 100%; |
| 148 |
} |
| 149 |
.sp-pcp-row .sp-pcp-col-xl-2 { |
| 150 |
flex: 1 1 calc( 50% - ' . (int) $margin_between_horizontal_post . 'px); |
| 151 |
} |
| 152 |
.sp-pcp-row .sp-pcp-col-xl-3 { |
| 153 |
flex: 1 1 calc( 33.333% - ' . (int) $margin_between_horizontal_post . 'px); |
| 154 |
} |
| 155 |
.sp-pcp-row .sp-pcp-col-xl-4 { |
| 156 |
flex: 1 1 calc( 25% - ' . (int) $margin_between_horizontal_post . 'px); |
| 157 |
} |
| 158 |
.sp-pcp-row .sp-pcp-col-xl-5 { |
| 159 |
flex: 1 1 calc( 20% - ' . (int) $margin_between_horizontal_post . 'px); |
| 160 |
} |
| 161 |
.sp-pcp-row .sp-pcp-col-xl-6 { |
| 162 |
flex: 1 1 calc( 16.66666666666667% - ' . (int) $margin_between_horizontal_post . 'px); |
| 163 |
} |
| 164 |
.sp-pcp-row .sp-pcp-col-xl-7 { |
| 165 |
flex: 1 1 calc( 14.28571428% - ' . (int) $margin_between_horizontal_post . 'px); |
| 166 |
} |
| 167 |
.sp-pcp-row .sp-pcp-col-xl-8 { |
| 168 |
flex: 1 1 calc( 12.5% - ' . (int) $margin_between_horizontal_post . 'px); |
| 169 |
} |
| 170 |
} |
| 171 |
|
| 172 |
@media (max-width: 1200px) { |
| 173 |
.sp-pcp-row .sp-pcp-col-lg-1 { |
| 174 |
flex: 0 0 100%; |
| 175 |
} |
| 176 |
.sp-pcp-row .sp-pcp-col-lg-2 { |
| 177 |
flex: 1 1 calc( 50% - ' . (int) $margin_between_horizontal_post . 'px); |
| 178 |
} |
| 179 |
.sp-pcp-row .sp-pcp-col-lg-3 { |
| 180 |
flex: 1 1 calc( 33.333% - ' . (int) $margin_between_horizontal_post . 'px); |
| 181 |
} |
| 182 |
.sp-pcp-row .sp-pcp-col-lg-4 { |
| 183 |
flex: 1 1 calc( 25% - ' . (int) $margin_between_horizontal_post . 'px); |
| 184 |
} |
| 185 |
.sp-pcp-row .sp-pcp-col-lg-5 { |
| 186 |
flex: 1 1 calc( 20% - ' . (int) $margin_between_horizontal_post . 'px); |
| 187 |
} |
| 188 |
.sp-pcp-row .sp-pcp-col-lg-6 { |
| 189 |
flex: 1 1 calc( 16.66666666666667% - ' . (int) $margin_between_horizontal_post . 'px); |
| 190 |
} |
| 191 |
.sp-pcp-row .sp-pcp-col-lg-7 { |
| 192 |
flex: 1 1 calc( 14.28571428% - ' . (int) $margin_between_horizontal_post . 'px); |
| 193 |
} |
| 194 |
.sp-pcp-row .sp-pcp-col-lg-8 { |
| 195 |
flex: 1 1 calc( 12.5% - ' . (int) $margin_between_horizontal_post . 'px); |
| 196 |
} |
| 197 |
} |
| 198 |
|
| 199 |
@media (max-width: 992px) { |
| 200 |
.sp-pcp-row .sp-pcp-col-md-1 { |
| 201 |
flex: 0 0 100%; |
| 202 |
} |
| 203 |
.sp-pcp-row .sp-pcp-col-md-2 { |
| 204 |
flex: 1 1 calc( 50% - ' . (int) $margin_between_horizontal_post . 'px); |
| 205 |
} |
| 206 |
.sp-pcp-row .sp-pcp-col-md-2-5 { |
| 207 |
flex: 0 0 75%; |
| 208 |
} |
| 209 |
.sp-pcp-row .sp-pcp-col-md-3 { |
| 210 |
flex: 1 1 calc( 33.333% - ' . (int) $margin_between_horizontal_post . 'px); |
| 211 |
} |
| 212 |
.sp-pcp-row .sp-pcp-col-md-4 { |
| 213 |
flex: 1 1 calc( 25% - ' . (int) $margin_between_horizontal_post . 'px); |
| 214 |
} |
| 215 |
.sp-pcp-row .sp-pcp-col-md-5 { |
| 216 |
flex: 1 1 calc( 20% - ' . (int) $margin_between_horizontal_post . 'px); |
| 217 |
} |
| 218 |
.sp-pcp-row .sp-pcp-col-md-6 { |
| 219 |
flex: 1 1 calc( 16.66666666666667% - ' . (int) $margin_between_horizontal_post . 'px); |
| 220 |
} |
| 221 |
.sp-pcp-row .sp-pcp-col-md-7 { |
| 222 |
flex: 1 1 calc( 14.28571428% - ' . (int) $margin_between_horizontal_post . 'px); |
| 223 |
} |
| 224 |
.sp-pcp-row .sp-pcp-col-md-8 { |
| 225 |
flex: 1 1 calc( 12.5% - ' . (int) $margin_between_horizontal_post . 'px); |
| 226 |
} |
| 227 |
} |
| 228 |
|
| 229 |
@media (max-width: 768px) { |
| 230 |
.sp-pcp-row .sp-pcp-col-sm-1 { |
| 231 |
flex: 0 0 100%; |
| 232 |
} |
| 233 |
.sp-pcp-row .sp-pcp-col-sm-2 { |
| 234 |
flex: 1 1 calc( 50% - ' . (int) $margin_between_horizontal_post . 'px); |
| 235 |
} |
| 236 |
.sp-pcp-row .sp-pcp-col-sm-2-5 { |
| 237 |
flex: 0 0 75%; |
| 238 |
} |
| 239 |
.sp-pcp-row .sp-pcp-col-sm-3 { |
| 240 |
flex: 1 1 calc( 33.333% - ' . (int) $margin_between_horizontal_post . 'px); |
| 241 |
} |
| 242 |
.sp-pcp-row .sp-pcp-col-sm-4 { |
| 243 |
flex: 1 1 calc( 25% - ' . (int) $margin_between_horizontal_post . 'px); |
| 244 |
} |
| 245 |
.sp-pcp-row .sp-pcp-col-sm-5 { |
| 246 |
flex: 1 1 calc( 20% - ' . (int) $margin_between_horizontal_post . 'px); |
| 247 |
} |
| 248 |
.sp-pcp-row .sp-pcp-col-sm-6 { |
| 249 |
flex: 1 1 calc( 16.66666666666667% - ' . (int) $margin_between_horizontal_post . 'px); |
| 250 |
} |
| 251 |
.sp-pcp-row .sp-pcp-col-sm-7 { |
| 252 |
flex: 1 1 calc( 14.28571428% - ' . (int) $margin_between_horizontal_post . 'px); |
| 253 |
} |
| 254 |
.sp-pcp-row .sp-pcp-col-sm-8 { |
| 255 |
flex: 1 1 calc( 12.5% - ' . (int) $margin_between_horizontal_post . 'px); |
| 256 |
} |
| 257 |
} |
| 258 |
|
| 259 |
@media (max-width: 420px) { |
| 260 |
.sp-pcp-row .sp-pcp-col-xs-1 { |
| 261 |
flex: 0 0 100%; |
| 262 |
} |
| 263 |
.sp-pcp-row .sp-pcp-col-xs-2 { |
| 264 |
flex: 1 1 calc( 50% - ' . (int) $margin_between_horizontal_post . 'px); |
| 265 |
} |
| 266 |
.sp-pcp-row .sp-pcp-col-xs-3 { |
| 267 |
flex: 1 1 calc( 33.333% - ' . (int) $margin_between_horizontal_post . 'px); |
| 268 |
} |
| 269 |
.sp-pcp-row .sp-pcp-col-xs-4 { |
| 270 |
flex: 1 1 calc( 25% - ' . (int) $margin_between_horizontal_post . 'px); |
| 271 |
} |
| 272 |
.sp-pcp-row .sp-pcp-col-xs-5 { |
| 273 |
flex: 1 1 calc( 20% - ' . (int) $margin_between_horizontal_post . 'px); |
| 274 |
} |
| 275 |
.sp-pcp-row .sp-pcp-col-xs-6 { |
| 276 |
flex: 1 1 calc( 16.66666666666667% - ' . (int) $margin_between_horizontal_post . 'px); |
| 277 |
} |
| 278 |
.sp-pcp-row .sp-pcp-col-xs-7 { |
| 279 |
flex: 1 1 calc( 14.28571428% - ' . (int) $margin_between_horizontal_post . 'px); |
| 280 |
} |
| 281 |
.sp-pcp-row .sp-pcp-col-xs-8 { |
| 282 |
flex: 1 1 calc( 12.5% - ' . (int) $margin_between_horizontal_post . 'px); |
| 283 |
} |
| 284 |
}'; |
| 285 |
|
