PluginProbe
Filter Everything — WordPress & WooCommerce Filters / 1.9.7
Filter Everything — WordPress & WooCommerce Filters v1.9.7
1.9.7 1.9.6 1.9.5 1.9.4 1.9.3 1.9.2.2 1.9.2.1 trunk 1.2.1 1.2.3 1.2.4 1.2.5 1.3.0 1.3.1 1.3.2 1.4.1 1.4.4 1.4.5 1.4.8 1.4.9 1.5.0 1.5.1 1.6.0 1.6.1 1.6.2 All 52 releases
filter-everything / src / DynamicCss.php

DynamicCss.php in Filter Everything — WordPress & WooCommerce Filters 1.9.7, at src/DynamicCss.php

646 lines 42.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace FilterEverything\Filter;
4
5 if ( ! defined('ABSPATH') ) {
6 exit;
7 }
8
9 /**
10 * Frontend CSS that depends on plugin settings (colors, container height,
11 * swatch sizes, experimental options, Divi tweaks, custom CSS).
12 *
13 * Extracted from Plugin::inlineFrontCss() / Plugin::dynamicFrontCss() on
14 * 2026-09-14; the CSS output is unchanged. Plugin keeps those two methods as
15 * delegates so existing add_action/remove_action callbacks still work.
16 *
17 * @since 1.9.7
18 */
19 class DynamicCss
20 {
21 /**
22 * Prints the small always-on inline CSS block (wp_head).
23 */
24 public function printInlineCss()
25 {
26 $inline = '<style type="text/css" id="filter-everything-inline-css">.wpc-orderby-select{width:100%}.wpc-filters-open-button-container{display:none}.wpc-debug-message{padding:16px;font-size:14px;border:1px dashed #ccc;margin-bottom:20px}.wpc-debug-title{visibility:hidden}.wpc-button-inner,.wpc-chip-content{display:flex;align-items:center}.wpc-icon-html-wrapper{position:relative;margin-right:10px;top:2px}.wpc-icon-html-wrapper span{display:block;height:1px;width:18px;border-radius:3px;background:#2c2d33;margin-bottom:4px;position:relative}span.wpc-icon-line-1:after,span.wpc-icon-line-2:after,span.wpc-icon-line-3:after{content:"";display:block;width:3px;height:3px;border:1px solid #2c2d33;background-color:#fff;position:absolute;top:-2px;box-sizing:content-box}span.wpc-icon-line-3:after{border-radius:50%;left:2px}span.wpc-icon-line-1:after{border-radius:50%;left:5px}span.wpc-icon-line-2:after{border-radius:50%;left:12px}body .wpc-filters-open-button-container a.wpc-filters-open-widget,body .wpc-filters-open-button-container a.wpc-open-close-filters-button{display:inline-block;text-align:left;border:1px solid #2c2d33;border-radius:2px;line-height:1.5;padding:7px 12px;background-color:transparent;color:#2c2d33;box-sizing:border-box;text-decoration:none!important;font-weight:400;transition:none;position:relative}@media screen and (max-width:768px){.wpc_show_bottom_widget .wpc-filters-open-button-container,.wpc_show_open_close_button .wpc-filters-open-button-container{display:block}.wpc_show_bottom_widget .wpc-filters-open-button-container{margin-top:1em;margin-bottom:1em}}</style>'."\r\n";
27 echo $inline;
28 }
29
30 /**
31 * Builds the settings-dependent CSS, caches it as
32 * uploads/cache/filter-everything/<md5>.css and enqueues it (wp_print_styles).
33 * Does nothing when the page has no related Filter Set.
34 */
35 public function enqueueDynamicCss()
36 {
37 // Do not include plugin CSS if there are no Filter Sets on the page
38 $sets = Container::instance()->getFilterContext()->get( 'wpc_page_related_set_ids', [] );
39 if( empty( $sets ) ) {
40 return false;
41 }
42
43 $maxHeight = flrt_get_option( 'container_height' );
44 $color = flrt_get_option( 'primary_color', flrt_default_theme_color() );
45 $move_to_top = flrt_get_option( 'try_move_to_top_sidebar' );
46 $wpc_mobile_width = flrt_get_mobile_width();
47
48 // Experimental Options
49 $custom_css = flrt_get_experimental_option('custom_css');
50 $use_loader = flrt_get_experimental_option('use_loader');
51 $dark_overlay = flrt_get_experimental_option('dark_overlay');
52 $styled_inputs = flrt_get_experimental_option('styled_inputs');
53 $use_select2 = flrt_get_experimental_option('select2_dropdowns');
54 $rounded_swatch = flrt_get_experimental_option('rounded_swatches');
55 $contrastColor = false;
56
57 $swatches_measurements = [ 'width' => 32, 'height' => 32 ];
58 if( $rounded_swatch ) {
59 $swatches_measurements = [ 'width' => 32, 'height' => 32 ];
60 }
61
62 $swatches = apply_filters( 'wpc_swatches_width_height', $swatches_measurements );
63 $brands = apply_filters( 'wpc_brands_width_height', [ 'width' => 70, 'height' => 40 ] );
64
65 $css = '';
66 $css .= '@media screen and (min-width:'.($wpc_mobile_width+1).'px){.wpc_show_bottom_widget .wpc-filters-widget-content{height:auto!important}body.wpc_show_open_close_button .wpc-filters-widget-content.wpc-closed,body.wpc_show_open_close_button .wpc-filters-widget-content.wpc-opened,body.wpc_show_open_close_button .wpc-filters-widget-content:not(.wpc-opened){display:block!important}}@media screen and (min-width:'.$wpc_mobile_width.'px){.wpc-custom-selected-terms{clear:both;width:100%}.wpc-custom-selected-terms ul.wpc-filter-chips-list{display:flex;overflow-x:auto;overflow-y:clip;padding-left:0}.wpc-filters-main-wrap .wpc-custom-selected-terms ul.wpc-filter-chips-list{display:block;overflow:visible}html.is-active .wpc-filters-overlay{top:0;opacity:.3;background:#fff}.wpc-filters-main-wrap input.wpc-label-input+label:hover{border:1px solid rgba(0,0,0,.25);border-radius:5px}.wpc-filters-main-wrap input.wpc-label-input+label:hover span.wpc-filter-label-wrapper{color:#333;background-color:rgba(0,0,0,.25)}.wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input+label:hover a{color:#333}.theme-storefront #primary .storefront-sorting .wpc-custom-selected-terms{font-size:inherit}.theme-storefront #primary .wpc-custom-selected-terms{font-size:.875em}}@media screen and (max-width:'.$wpc_mobile_width.'px){.wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper:after,.wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper:before{display:none;}.wpc_show_bottom_widget .wpc-filters-widget-top-container,.wpc_show_open_close_button .wpc-filters-widget-top-container{text-align:center}.wpc_show_bottom_widget .wpc-filters-widget-top-container{position:sticky;top:0;z-index:99999;border-bottom:1px solid #f7f7f7}.wpc-custom-selected-terms:not(.wpc-show-on-mobile),.wpc-edit-filter-set,.wpc_show_bottom_widget .widget_wpc_selected_filters_widget,.wpc_show_bottom_widget .wpc-filters-widget-content .wpc-filter-set-widget-title,.wpc_show_bottom_widget .wpc-filters-main-wrap .widget-title,.wpc_show_bottom_widget .wpc-filters-widget-wrapper .wpc-filter-layout-submit-button,.wpc_show_bottom_widget .wpc-posts-found,body.wpc_show_bottom_widget .wpc-open-close-filters-button,body.wpc_show_open_close_button .wpc-filters-widget-content:not(.wpc-opened),.widget_wpc_chips_widget .widget-title:not(.wpc-show-on-mobile-widget-title), .widget_wpc_chips_widget .widgettitle:not(.wpc-show-on-mobile-widget-title) {display:none}.wpc_show_bottom_widget .wpc-filters-widget-top-container:not(.wpc-show-on-desktop),.wpc_show_bottom_widget .wpc-spinner.is-active,.wpc_show_bottom_widget .wpc-widget-close-container,html.is-active body:not(.wpc_show_bottom_widget) .wpc-spinner{display:block}body .wpc-filters-main-wrap li.wpc-term-item{padding:2px 0}.wpc-chip-empty{width:0;display:list-item;visibility:hidden;margin-right:0!important}.wpc-overlay-visible #secondary{z-index:auto}html.is-active:not(.wpc-overlay-visible) .wpc-filters-overlay{top:0;opacity:.2;background:#fff}.wpc-custom-selected-terms.wpc-show-on-mobile ul.wpc-filter-chips-list{display:flex;overflow-x:auto;padding-left:0}html.is-active body:not(.wpc_show_bottom_widget) .wpc-filters-overlay{top:0;opacity:.3;background:#fff}body.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-closed,body.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-opened,body.wpc_show_bottom_widget .wpc-filters-widget-content:not(.wpc-opened){display:block!important}.wpc-open-close-filters-button{display:block;margin-bottom:20px}.wpc-overlay-visible body,html.wpc-overlay-visible{overflow:hidden!important}.wpc_show_bottom_widget .widget_wpc_filters_widget,.wpc_show_bottom_widget .wpc-filters-main-wrap{padding:0!important;margin:0!important}.wpc_show_bottom_widget .wpc-filters-range-column{width:48%;max-width:none}.wpc_show_bottom_widget .wpc-filters-toolbar{display:flex;margin:1em 0}.wpc_show_bottom_widget .wpc-inner-widget-chips-wrapper{display:block;padding-left:20px;padding-right:20px}.wpc_show_bottom_widget .wpc-filters-main-wrap .widget-title.wpc-filter-title{display:flex}.wpc_show_bottom_widget .wpc-inner-widget-chips-wrapper .wpc-filter-chips-list,.wpc_show_open_close_button .wpc-inner-widget-chips-wrapper .wpc-filter-chips-list{display:flex;-webkit-box-pack:start;place-content:center flex-start;overflow-x:auto;padding-top:5px;padding-bottom:5px;margin-left:0;padding-left:0}.wpc-overlay-visible .wpc_show_bottom_widget .wpc-filters-overlay{top:0;opacity:.4}.wpc_show_bottom_widget .wpc-filters-main-wrap .wpc-spinner.is-active+.wpc-filters-widget-content .wpc-filters-scroll-container .wpc-filters-widget-wrapper{opacity:.6;pointer-events:none}.wpc_show_bottom_widget .wpc-filters-open-button-container{margin-top:1em;margin-bottom:1em}.wpc_show_bottom_widget .wpc-filters-widget-content{position:fixed;bottom:0;right:0;left:0;top:5%;z-index:999999;padding:0;background-color:#fff;margin:0;box-sizing:border-box;border-radius:7px 7px 0 0;transition:transform .25s;transform:translate3d(0,120%,0);-webkit-overflow-scrolling:touch;height:auto}.wpc_show_bottom_widget .wpc-filters-widget-containers-wrapper{padding:0;margin:0;overflow-y:scroll;box-sizing:border-box;position:fixed;top:56px;left:0;right:0;bottom:0}.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-filters-widget-opened{transform:translate3d(0,0,0)}.theme-twentyfourteen .wpc_show_bottom_widget .wpc-filters-widget-content,.theme-twentyfourteen.wpc_show_bottom_widget .wpc-filters-scroll-container{background-color:#000}.wpc_show_bottom_widget .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list,.wpc_show_open_close_button .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list{max-height:none}.wpc_show_bottom_widget .wpc-filters-scroll-container{background:#fff;min-height:100%}.wpc_show_bottom_widget .wpc-filters-widget-wrapper{padding:20px 20px 15px}.wpc-filter-everything-dropdown .select2-search--dropdown .select2-search__field,.wpc-sorting-form select,.wpc_show_bottom_widget .wpc-filters-main-wrap input[type=number],.wpc_show_bottom_widget .wpc-filters-main-wrap input[type=text],.wpc_show_bottom_widget .wpc-filters-main-wrap select,.wpc_show_bottom_widget .wpc-filters-main-wrap textarea,.wpc_show_bottom_widget .wpc-search-field,.wpc_show_open_close_button .wpc-search-field,.wpc_show_open_close_button .wpc-filter-search-field{font-size:16px}.wpc-filter-layout-dropdown .select2-container .select2-selection--single,.wpc-sorting-form .select2-container .select2-selection--single{height:auto;padding:6px}.wpc_show_bottom_widget .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list{overflow-y:visible}.theme-twentyeleven #primary,.theme-twentyeleven #secondary{margin-left:0;margin-right:0;clear:both;float:none}#main>.fusion-row{max-width:100%}.wpc_show_bottom_widget .wpc-filters-open-button-container,.wpc_show_bottom_widget .wpc-filters-widget-controls-container,.wpc_show_bottom_widget .wpc-filters-widget-top-container,.wpc_show_open_close_button .wpc-filters-open-button-container{display:block}}'."\r\n";
67 $css .= '.wpc-preload-img{display:none;}';
68 // Number of items visible by default in More/Less filters
69
70 $css .= 'li.wpc-term-item label span.wpc-term-swatch,.wpc-term-swatch-wrapper{width:'.$swatches['width'].'px;min-width:'.$swatches['width'].'px;';
71
72 if ( $rounded_swatch ) {
73 $css .= 'border-radius:'.$swatches['height'].'px;';
74 }
75
76 $css .= 'height:'.$swatches['height'].'px;}'."\r\n";
77 $css .= '.wpc-term-swatch-wrapper:after{width:'.($swatches['width']/2.5).'px;height:'.($swatches['width']/5).'px;left:'.($swatches['width']/3.5).'px;top:'.($swatches['height']/3.5).'px;}';
78 $css .= '.wpc-term-image-wrapper{width:'.$brands['width'].'px;min-width:'.$brands['width'].'px;height:'.$brands['height'].'px;}';
79
80 if( $maxHeight ){
81 $css .= '.wpc-filters-section:not(.wpc-filter-more-less):not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric):not(.wpc-filter-layout-dropdown):not(.wpc-filter-terms-count-0) .wpc-filter-content:not(.wpc-filter-has-hierarchy) ul.wpc-filters-ul-list{
82 max-height: '.$maxHeight.'px;
83 overflow-y: auto;
84 }'."\r\n";
85 }
86
87 if( $color ){
88 $contrastColor = flrt_get_contrast_color($color);
89 $css .= '.wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-range{
90 background-color: '.$color.';
91 }
92 '."\r\n";
93
94 $css .= '.wpc-spinner:after {
95 border-top-color: '.$color.';
96 }'."\r\n";
97
98 $css .= '.theme-Avada .wpc-filter-product_visibility .star-rating:before,
99 .wpc-filter-product_visibility .star-rating span:before{
100 color: '.$color.';
101 }'."\r\n";
102
103 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-wrapper{
104 background-color: '.$color.';
105 }'."\r\n";
106
107 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input:checked+label{
108 border-color: '.$color.';
109 }'."\r\n";
110
111 // Disabled label
112 $css .= 'body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label span.wpc-filter-label-wrapper{
113 background-color: #d8d8d8;
114 }'."\r\n";
115
116 $css .= 'body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label{
117 border-color: #d8d8d8;
118 }'."\r\n";
119
120 $css .= 'body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input+label:hover{
121 border-color: #d8d8d8;
122 }'."\r\n";
123
124 $css .= 'body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label span.wpc-filter-label-wrapper,
125 body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item.wpc-term-disabled input:checked+label a,
126 body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item.wpc-term-disabled input:checked+label span
127 {
128 color: #333333;
129 }'."\r\n";
130 // End of disabled label
131
132 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-wrapper,
133 body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input:checked+label a{
134 color: '.$contrastColor.';
135 }'."\r\n";
136
137 $css .= 'body .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) a,
138 body .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) span[data-wpc-span-link],
139 body .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) span.wpc-apply-button-chip{
140 border-color: '.$color.';
141 }'."\r\n";
142
143 $css .= 'body .wpc-filters-main-wrap .wpc-filters-widget-controls-container a.wpc-filters-apply-button,
144 body .wpc-filters-main-wrap a.wpc-filters-submit-button{
145 border-color: '.$color.';
146 background-color: '.$color.';
147 color: '.$contrastColor.';
148 }'."\r\n";
149
150 $css .= 'body .wpc-filter-chips-list li.wpc-filter-chip a:hover,
151 body .wpc-filter-chips-list li.wpc-filter-chip span[data-wpc-span-link]:hover,
152 body .wpc-filter-chips-list li.wpc-filter-chip span.wpc-apply-button-chip:hover{
153 opacity: 0.9;
154 }'."\r\n";
155
156 $css .= 'body .wpc-filter-chips-list li.wpc-filter-chip a:active,
157 body .wpc-filter-chips-list li.wpc-filter-chip span[data-wpc-span-link]:active,
158 body .wpc-filter-chips-list li.wpc-filter-chip span.wpc-apply-button-chip:active{
159 opacity: 0.75;
160 }'."\r\n";
161
162 $css .= '.star-rating span,
163 .star-rating span:before{
164 color: '.$color.';
165 }'."\r\n";
166
167 $css .= 'body a.wpc-filters-open-widget:active, a.wpc-filters-open-widget:active,
168 .wpc-filters-open-widget:active{
169 border-color: '.$color.';
170 background-color: '.$color.';
171 color: '.$contrastColor.';
172 }'."\r\n";
173
174 $css .= 'a.wpc-filters-open-widget:active span.wpc-icon-line-1:after,
175 a.wpc-filters-open-widget:active span.wpc-icon-line-2:after,
176 a.wpc-filters-open-widget:active span.wpc-icon-line-3:after{
177 background-color: '.$color.';
178 border-color: '.$contrastColor.';
179 }'."\r\n";
180
181 $css .= 'a.wpc-filters-open-widget:active .wpc-icon-html-wrapper span{
182 background-color: '.$contrastColor.';
183 }'."\r\n";
184
185 //$css .= '@media screen and (min-width: '.$wpc_mobile_width.'px) {'."\r\n";
186 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input+label:hover span.wpc-filter-label-wrapper{
187 color: '.$contrastColor.';
188 background-color: '.$color.';
189 }'."\r\n";
190
191 $css .= 'body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input+label:hover a{
192 color: '.$contrastColor.';
193 }'."\r\n";
194 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input+label:hover{
195 border-color: '.$color.';
196 }'."\r\n";
197
198
199 $css .= '#ui-datepicker-div.wpc-filter-datepicker .ui-state-active,
200 #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-active,
201 #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-active{
202 border-color: '.$color.';
203 background: '.$color.';
204 opacity: 0.95;
205 }'."\r\n";
206
207 $css .= '#ui-datepicker-div.wpc-filter-datepicker .ui-state-hover,
208 #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-hover,
209 #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-hover,
210 #ui-datepicker-div.wpc-filter-datepicker .ui-state-focus,
211 #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-focus,
212 #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-focus{
213 border-color: '.$color.';
214 background: '.$color.';
215 opacity: 0.6;
216 }';
217
218 $css .= '#ui-datepicker-div.wpc-filter-datepicker .ui-datepicker-close.ui-state-default{
219 background: '.$color.';
220 color: '.$contrastColor.';
221 }'."\r\n";
222
223 //$css .= '}'."\r\n";
224 $css .= '.flrt-star-label svg{
225 stroke: '.$color.';
226 }'."\r\n";
227
228 $css .= '.flrt-star-label-hover svg, .wpc-chip-stars svg{
229 fill: '.$color.';
230 }'."\r\n";
231
232 $css .= '.wpc-filter-label-stars-wrapper{
233 padding: 4px 5px !important;
234 }'."\r\n";
235
236 $css .= '.wpc-filter-label-stars-wrapper .flrt-star-label svg{
237 height: 17px;
238 width: 17px;
239 }'."\r\n";
240
241 $css .= 'body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-stars-wrapper .flrt-star-label svg,
242 span.wpc-filter-label-stars-wrapper:hover .flrt-star-label svg{
243 fill: ' . flrt_get_contrast_color($color) . ';
244 }'."\r\n";
245 }
246 if( $styled_inputs ){
247 $styled_color = $color ? $color : '#0570e2';
248 $contrastColor = $contrastColor ? $contrastColor : flrt_get_contrast_color($styled_color);
249 $hoverColor = flrt_add_color_opacity($color);
250 $no_hex_color = substr( $color, 1, 6 );
251 $css .= '.wpc-filters-main-wrap input[type=checkbox],
252 .wpc-filters-main-wrap input[type=radio]{
253 -webkit-appearance: none;
254 -moz-appearance: none;
255 position: relative;
256 width: 20px;
257 height: 20px;
258 border: 1px solid #c9d1e0;
259 background: #ffffff;
260 border-radius: 5px;
261 min-width: 20px;
262 }
263 i.wpc-toggle-children-list:after,
264 i.wpc-toggle-children-list:before{
265 background-color: #b8bcc8;
266 }
267 i.wpc-toggle-children-list:hover:after,
268 i.wpc-toggle-children-list:hover:before{
269 background-color: '.$color.';
270 }
271 .wpc-filters-widget-content input[type=email],
272 .wpc-filters-widget-content input[type=number],
273 .wpc-filters-widget-content input[type=password],
274 .wpc-filters-widget-content input[type=search],
275 .wpc-filters-widget-content input[type=tel],
276 .wpc-filters-widget-content input[type=text],
277 .wpc-filters-widget-content input[type=url]{
278 height: 44px;
279 }
280 .wpc-filters-widget-content .wpc-filters-section input[type="number"],
281 .wpc-filters-widget-content .wpc-filters-section input[type="text"]{
282 border: 1px solid #ccd0dc;
283 border-radius: 6px;
284 background: transparent;
285 box-shadow: none;
286 padding: 8px 16px;
287 }
288 .wpc-filters-main-wrap input[type=checkbox]:after {
289 content: "";
290 opacity: 0;
291 display: block;
292 left: 3px;
293 top: 3px;
294 position: absolute;
295 width: 12px;
296 height: 12px;
297 border: navajowhite;
298 box-sizing: content-box;
299 background-color: '.$styled_color.';
300 border-radius: 2px;
301 }
302 .wpc-filters-main-wrap input[type=radio]:after {
303 content: "";
304 opacity: 0;
305 display: block;
306 left: 3px;
307 top: 3px;
308 position: absolute;
309 width: 12px;
310 height: 12px;
311 border-radius: 50%;
312 background: '.$styled_color.';
313 box-sizing: content-box;
314 }
315 .wpc-filters-main-wrap input[type=radio]:checked,
316 .wpc-filters-main-wrap input[type=checkbox]:checked {
317 border-color: '.$styled_color.';
318 }
319 .wpc-filters-main-wrap .wpc-radio-item.wpc-term-disabled input[type=radio],
320 .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox],
321 .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox]:after,
322 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:after,
323 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox],
324 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio],
325 .wpc-term-swatch-no-image{
326 border-color: #d8d8d8;
327 }
328 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:after,
329 .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox]:after {
330 background-color: #d8d8d8;
331 }
332 .wpc-filters-main-wrap .wpc-radio-item.wpc-term-disabled input[type=radio]:after,
333 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio]:after{
334 background-color: #d8d8d8;
335 }
336 .wpc-filters-main-wrap input[type=radio]:checked:after,
337 .wpc-filters-main-wrap input[type=checkbox]:checked:after {
338 opacity: 1;
339 }
340 .wpc-filters-main-wrap input[type=radio] {
341 border-radius: 50%;
342 }
343 .wpc-filters-widget-content .wpc-filters-section .wpc-filter-search-wrapper .wpc-filter-search-field {
344 padding: 8px 16px 8px 48px;
345 }
346 .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]{
347 padding-right: 48px;
348 background-image: url("data:image/svg+xml,%3Csvg width=\'24\' height=\'24\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect x=\'2\' y=\'4\' width=\'12\' height=\'10\' rx=\'1.33333\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\'/%3E%3Cpath d=\'M2.66699 7.3335H13.3337\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M6 10.6667H10\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M5.33301 2L5.33301 4.66667\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M10.667 2L10.667 4.66667\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3C/svg%3E%0A");
349 background-repeat: no-repeat;
350 background-position: right 16px bottom 50%;
351 background-size: 16px;
352 }
353 .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]:focus,
354 .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]:hover{
355 background-image: url("data:image/svg+xml,%3Csvg width=\'24\' height=\'24\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect x=\'2\' y=\'4\' width=\'12\' height=\'10\' rx=\'1.33333\' stroke=\'%23'.$no_hex_color.'\' stroke-width=\'1.33333\'/%3E%3Cpath d=\'M2.66699 7.3335H13.3337\' stroke=\'%23'.$no_hex_color.'\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M6 10.6667H10\' stroke=\'%23b8bcc8\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M5.33301 2L5.33301 4.66667\' stroke=\'%23'.$no_hex_color.'\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3Cpath d=\'M10.667 2L10.667 4.66667\' stroke=\'%23'.$no_hex_color.'\' stroke-width=\'1.33333\' stroke-linecap=\'round\'/%3E%3C/svg%3E%0A");
356 }
357 .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow b,
358 .wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__arrow b{
359 border-left: 1px solid #b8bcc8;
360 border-top: 1px solid #b8bcc8;
361 }
362 .wpc-filter-layout-dropdown .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
363 .wpc-sorting-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
364 border-left: 1px solid #b8bcc8;
365 border-top: 1px solid #b8bcc8;
366 }
367 .wpc-filter-collapsible .wpc-filter-title .wpc-open-icon,
368 .wpc-filter-collapsible-reverse.wpc-filter-collapsible.wpc-closed .wpc-filter-title .wpc-open-icon,
369 .wpc-filter-collapsible.wpc-closed .wpc-filter-title .wpc-open-icon,
370 .wpc-filter-has-selected.wpc-closed .wpc-filter-title .wpc-open-icon{
371 border-left: 1px solid #b8bcc8;
372 border-top: 1px solid #b8bcc8;
373 }
374 .wpc-sorting-form .select2-container--default .select2-selection--single:hover,
375 .wpc-filters-widget-content input[type=email]:hover,
376 .wpc-filters-widget-content input[type=number]:hover,
377 .wpc-filters-widget-content input[type=password]:hover,
378 .wpc-filters-widget-content input[type=search]:hover,
379 .wpc-filters-widget-content input[type=tel]:hover,
380 .wpc-filters-widget-content input[type=text]:hover,
381 .wpc-filters-widget-content input[type=url]:hover{
382 border-color: '. $hoverColor.';
383 }
384 .wpc-filter-layout-dropdown .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
385 .wpc-sorting-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b,
386 .widget_wpc_sorting_widget .select2-container--default .select2-selection--single:hover .select2-selection__arrow b,
387 .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single:hover .select2-selection__arrow b,
388 .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single:hover,
389 .select2-container--default.select2-container--open .wpc-filter-everything-dropdown.select2-dropdown,
390 .wpc-sorting-form .select2-container--open .select2-selection--single:hover,
391 .widget_wpc_sorting_widget .select2-container--open .select2-selection--single,
392 .wpc-filter-layout-dropdown .select2-container--open .select2-selection--single,
393 .wpc-filters-widget-content input[type=email]:focus,
394 .wpc-filters-widget-content input[type=number]:focus,
395 .wpc-filters-widget-content input[type=password]:focus,
396 .wpc-filters-widget-content input[type=search]:focus,
397 .wpc-filters-widget-content input[type=tel]:focus,
398 .wpc-filters-widget-content input[type=text]:focus,
399 .wpc-filters-widget-content input[type=url]:focus,
400 .wpc-filters-widget-content input[type=email]:active,
401 .wpc-filters-widget-content input[type=number]:active,
402 .wpc-filters-widget-content input[type=password]:active,
403 .wpc-filters-widget-content input[type=search]:active,
404 .wpc-filters-widget-content input[type=tel]:active,
405 .wpc-filters-widget-content input[type=text]:active,
406 .wpc-filters-widget-content input[type=url]:active,
407 .wpc-filter-collapsible .wpc-filter-title button:hover .wpc-open-icon,
408 .wpc-filter-collapsible-reverse.wpc-filter-collapsible.wpc-closed .wpc-filter-title button:hover .wpc-open-icon,
409 .wpc-filter-collapsible.wpc-closed .wpc-filter-title button:hover .wpc-open-icon,
410 .wpc-filter-has-selected.wpc-closed .wpc-filter-title button:hover .wpc-open-icon{
411 border-color: '.$color.';
412 }
413
414 .wpc-filters-main-wrap a.wpc-toggle-a:hover {
415 color: '.$color.';
416 }
417 .wpc-sorting-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
418 .wpc-filter-layout-dropdown .select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
419 .wpc-sorting-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
420 .wpc-filter-layout-dropdown .select2-container--default.select2-container--open.select2-container--above .select2-selection--single{
421 border-top: 1px solid transparent;
422 }
423 .wpc-search-field-wrapper .wpc-search-clear-icon-wrapper,
424 .wpc-filter-search-wrapper button.wpc-search-clear{
425 color: #b5bed2;
426 }
427 .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item label {
428 border-color: #ccd0dc;
429 }
430 .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item label span.wpc-filter-label-wrapper{
431 padding: 8px 7px;
432 }
433 .wpc-filters-labels li.wpc-term-has-image label:hover .wpc-term-image-wrapper,
434 .wpc-filters-labels li.wpc-term-has-image input[type=checkbox]:checked + label .wpc-term-image-wrapper{
435 border-color: '.$color.';
436 }
437 @media screen and (min-width: '.$wpc_mobile_width.'px) {
438 .wpc-filters-main-wrap input[type=radio]:hover,
439 .wpc-filters-main-wrap input[type=checkbox]:hover{
440 border-color: '.$styled_color.';
441 }
442 .wpc-filter-label-wrapper .wpc-term-swatch-no-image:hover,
443 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio]:hover,
444 .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:hover{
445 border-color: #c3c3c3;
446 }
447 }';
448 }
449
450 if( $use_select2 ){
451 $styled_color = $color ? $color : '#0570e2';
452 $contrastColor = $contrastColor ? $contrastColor : flrt_get_contrast_color($styled_color);
453
454 $css .= '.wpc-sorting-form select,
455 .wpc-filter-content select{
456 padding: 2px 8px 2px 10px;
457 border-color: #c9d1e0;
458 border-radius: 3px;
459 color: inherit;
460 -webkit-appearance: none;
461 }
462 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted::after,
463 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-selected="true"]::after,
464 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[data-selected="true"]::after {
465 border: 2px solid '.$color.';
466 content: "";
467 position: absolute !important;
468 right: 13px !important;
469 width: 18px;
470 height: 10px;
471 top: 30% !important;
472 font-size: 16px !important;
473 color: #000 !important;
474 transform: rotate(137deg) !important;
475 border-bottom: none;
476 border-left: none;
477 box-sizing: border-box;
478 }
479 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted::after {
480 border-top: 2px solid #C7D1E2;
481 border-right: 2px solid #C7D1E2;
482 }
483 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted[aria-selected],
484 .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted[data-selected]{
485 background-color: rgba(0,0,0,0.05);
486 color: inherit;
487 }
488 ';
489 $css .= '@media screen and (max-width: '.$wpc_mobile_width.'px) {'."\r\n";
490 $css .= '.wpc-sorting-form select,
491 .wpc-filter-content select{
492 padding: 6px 12px 6px 14px;
493 }';
494
495 $css .= '}'."\r\n";
496 }
497
498 if( $move_to_top ){
499 $css .= '@media screen and (max-width: '.$wpc_mobile_width.'px) {'."\r\n";
500
501 $css .= 'body #main,
502 body #content .col-full,
503 .woocommerce-page .content-has-sidebar,
504 .woocommerce-page .has-one-sidebar,
505 .woocommerce-page #main-sidebar-container,
506 .woocommerce-page .theme-page-wrapper,
507 .woocommerce-page #content-area,
508 .theme-jevelin.woocommerce-page .woocomerce-styling,
509 .woocommerce-page .content_wrapper,
510 .woocommerce-page #col-mask,
511 body #main-content .content-area {
512 -js-display: flex;
513 display: -webkit-box;
514 display: -webkit-flex;
515 display: -moz-box;
516 display: -ms-flexbox;
517 display: flex;
518 -webkit-box-orient: vertical;
519 -moz-box-orient: vertical;
520 -webkit-flex-direction: column;
521 -ms-flex-direction: column;
522 flex-direction: column;
523 }
524 body #primary,
525 .woocommerce-page .has-one-sidebar > section,
526 .woocommerce-page .theme-content,
527 .woocommerce-page #left-area,
528 .woocommerce-page #content,
529 .woocommerce-page .sections_group,
530 .woocommerce-page .content-box,
531 body #main-sidebar-container #main {
532 -webkit-box-ordinal-group: 2;
533 -moz-box-ordinal-group: 2;
534 -ms-flex-order: 2;
535 -webkit-order: 2;
536 order: 2;
537 }
538 body #secondary,
539 .woocommerce-page .has-one-sidebar > aside,
540 body aside#mk-sidebar,
541 .woocommerce-page #sidebar,
542 .woocommerce-page .sidebar,
543 body #main-sidebar-container #sidebar {
544 -webkit-box-ordinal-group: 1;
545 -moz-box-ordinal-group: 1;
546 -ms-flex-order: 1;
547 -webkit-order: 1;
548 order: 1;
549 }
550
551 /*second method first method solve issue theme specific*/
552 .woocommerce-page:not(.single,.page) .btWithSidebar.btSidebarLeft .btContentHolder,
553 body .theme-generatepress.woocommerce #content {
554 display: table;
555 }
556 body .btContent,
557 body .theme-generatepress.woocommerce #primary {
558 display: table-footer-group;
559 }
560 body .btSidebar,
561 body .theme-generatepress.woocommerce #left-sidebar {
562 display: table-header-group;
563 }'."\r\n";
564 $css .= '#ui-datepicker-div.wpc-filter-datepicker .ui-datepicker-close.ui-state-default{
565 background: '.$color.';
566 color: '.$contrastColor.';
567 }'."\r\n";
568 $css .= '.wpc-filters-date-range-column{
569 justify-content: left;
570 }'."\r\n";
571 $css .= '}'."\r\n";
572 }
573
574 if( $use_loader ){
575 $css .= '@media screen and (min-width: '.$wpc_mobile_width.'px) {'."\r\n";
576 $css .= 'html.is-active .wpc-spinner{
577 display: block;
578 }';
579 $css .= '}'."\r\n";
580 }
581
582 if( $dark_overlay ){
583 $css .= '@media screen and (min-width: '.$wpc_mobile_width.'px) {'."\r\n";
584 $css .= 'html.is-active .wpc-filters-overlay{
585 opacity: .15;
586 background: #000000;
587 }';
588 $css .= '}'."\r\n";
589 }
590
591 if(flrt_is_divi_theme()){
592 $css .= <<<PHP_CSS
593 .wp-theme-Divi .et_builder_inner_content .widget_wpc_sorting_widget,
594 .wp-theme-Divi .et_builder_inner_content .widget_wpc_filters_widget,
595 .wp-theme-Divi .et_builder_inner_content .widget_wpc_chips_widget
596 {
597 margin: 0 0 3.7em;
598 }
599 .wp-theme-Divi .et_builder_inner_content .widget_wpc_chips_widget ul.wpc-filter-chips-list{
600 padding: 0;
601 }
602 .wpc-divi-filter-wrap .wpc-filters-open-button-container{
603 display: block !important;
604 }
605 @media screen and (max-width: 768px) {
606 .wpc-filters-open-button-container.et_before_main_content{
607 display: block !important;
608 }
609 }
610 PHP_CSS;
611 $css .= "\r\n";
612 }
613
614 if( $custom_css ){
615 $css .= $custom_css."\r\n";
616 }
617
618 $wp_upload_dir = wp_upload_dir();
619 $upload_dir_baseurl = $wp_upload_dir['baseurl'];
620 $upload_dir_basepath = $wp_upload_dir['basedir'];
621
622 $cache_dir = $upload_dir_basepath . '/cache/filter-everything/';
623
624 if ( ! file_exists( $cache_dir ) ) {
625 mkdir($cache_dir, 0777, true);
626 chmod($cache_dir, 0777);
627 }
628
629 $filename = md5( $css ) . '.css';
630
631 $fileurl = $upload_dir_baseurl .'/cache/filter-everything/' . $filename;
632 $filepath = $cache_dir . $filename;
633
634 if ( $css !== '' ) {
635 if ( ! file_exists( $filepath ) ) {
636 file_put_contents( $filepath, $css );
637 }
638
639 if( file_exists( $filepath ) ){
640 wp_enqueue_style('wpc-filter-everything-custom', $fileurl );
641 }
642 }
643
644 }
645 }
646