PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.5
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.5
6.35 6.34 6.33.1 6.33 6.32.1 6.32 6.31 6.25 6.25.1 6.26 6.26.1 6.27 6.28 6.29 6.3 6.3.1 6.3.2 6.30 6.4 6.4.1 6.4.2 6.5 6.5.1 6.5.2 6.5.3 All 141 releases
← All changes | css/custom_theme.css.php +342 -341 6.265.5 View file →
@@ -7,9 +7,8 @@
7 7 header( 'Content-type: text/css' );
8 8
9 9 if ( ! empty( $css ) ) {
10 10 echo strip_tags( $css, 'all' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
11 - FrmStylesController::maybe_hide_sample_form_error_message();
12 11 die();
13 12 }
14 13 }
15 14
@@ -16,14 +15,12 @@
16 15 if ( ! isset( $frm_style ) ) {
17 16 $frm_style = new FrmStyle();
18 17 }
19 18
20 -$styles = $frm_style->get_all();
21 -$default_style = $frm_style->get_default_style( $styles );
22 -$defaults = FrmStylesHelper::get_settings_for_output( $default_style );
23 -$important = empty( $defaults['important_style'] ) ? '' : ' !important';
24 -$pro_is_installed = FrmAppHelper::pro_is_installed();
25 -$use_chosen_js = FrmStylesHelper::use_chosen_js();
19 +$styles = $frm_style->get_all();
20 +$default_style = $frm_style->get_default_style( $styles );
21 +$defaults = FrmStylesHelper::get_settings_for_output( $default_style );
22 +$important = empty( $defaults['important_style'] ) ? '' : ' !important';
26 23
27 24 ?>
28 25 .with_frm_style{
29 26 <?php FrmStylesHelper::output_vars( $defaults ); ?>
@@ -38,12 +35,12 @@
38 35
39 36 .with_frm_style,
40 37 .with_frm_style form,
41 38 .with_frm_style .frm-show-form div.frm_description p{
42 - text-align: var(--form-align)<?php echo esc_html( $important ); ?>;
39 + text-align:<?php echo esc_html( $defaults['form_align'] . $important ); ?>;
40 + text-align:var(--form-align)<?php echo esc_html( $important ); ?>;
43 41 }
44 42
45 -/* Keep this. This is used for Honeypot */
46 43 input:-webkit-autofill {
47 44 -webkit-box-shadow: 0 0 0 30px white inset;
48 45 }
49 46
@@ -49,24 +46,34 @@
49 46
50 47 /* Form description */
51 48 .with_frm_style .frm-show-form div.frm_description p{
52 49 <?php if ( ! empty( $defaults['form_desc_size'] ) ) { ?>
53 - font-size: var(--form-desc-size)<?php echo esc_html( $important ); ?>;
50 + font-size:<?php echo esc_html( $defaults['form_desc_size'] . $important ); ?>;
51 + font-size:var(--form-desc-size)<?php echo esc_html( $important ); ?>;
54 52 <?php } ?>
55 53 <?php if ( ! empty( $defaults['form_desc_color'] ) ) { ?>
56 - color: var(--form-desc-color)<?php echo esc_html( $important ); ?>;
54 + color:<?php echo esc_html( $defaults['form_desc_color'] . $important ); ?>;
55 + color:var(--form-desc-color)<?php echo esc_html( $important ); ?>;
57 56 <?php } ?>
58 57 <?php if ( ! empty( $defaults['form_desc_margin_top'] ) ) { ?>
59 - margin-top: var(--form-desc-margin-top)<?php echo esc_html( $important ); ?>;
58 + margin-top:<?php echo esc_html( $defaults['form_desc_margin_top'] . $important ); ?>;
59 + margin-top:var(--form-desc-margin-top)<?php echo esc_html( $important ); ?>;
60 60 <?php } ?>
61 61 <?php if ( ! empty( $defaults['form_desc_margin_bottom'] ) ) { ?>
62 - margin-bottom: var(--form-desc-margin-bottom)<?php echo esc_html( $important ); ?>;
62 + margin-bottom:<?php echo esc_html( $defaults['form_desc_margin_bottom'] . $important ); ?>;
63 + margin-bottom:var(--form-desc-margin-bottom)<?php echo esc_html( $important ); ?>;
63 64 <?php } ?>
64 65 <?php if ( isset( $defaults['form_desc_padding'] ) ) { ?>
65 - padding: var(--form-desc-padding)<?php echo esc_html( $important ); ?>;
66 + padding:<?php echo esc_html( $defaults['form_desc_padding'] . $important ); ?>;
67 + padding:var(--form-desc-padding)<?php echo esc_html( $important ); ?>;
66 68 <?php } ?>
67 69 }
68 70
71 +form input.frm_verify{
72 + position:absolute;
73 + left:-3000px;
74 +}
75 +
69 76 .with_frm_style fieldset{
70 77 min-width:0;
71 78 display: block; /* Override 2021 theme */
72 79 }
@@ -78,21 +85,25 @@
78 85 background-color:transparent;
79 86 }
80 87
81 88 .with_frm_style .frm_form_fields > fieldset{
82 -<?php if ( isset( $defaults['fieldset'] ) && ( $defaults['fieldset'] || '0' === $defaults['fieldset'] ) ) { ?>
83 - border-width: var(--fieldset)<?php echo esc_html( $important ); ?>;
89 +<?php if ( ! empty( $defaults['fieldset'] ) ) { ?>
90 + border-width:<?php echo esc_html( $defaults['fieldset'] . $important ); ?>;
91 + border-width:var(--fieldset)<?php echo esc_html( $important ); ?>;
84 92 <?php } ?>
85 93 border-style:solid;
86 94 <?php if ( ! empty( $defaults['fieldset_color'] ) ) { ?>
87 - border-color: var(--fieldset-color)<?php echo esc_html( $important ); ?>;
95 + border-color:<?php echo esc_html( $defaults['fieldset_color'] . $important ); ?>;
96 + border-color:var(--fieldset-color)<?php echo esc_html( $important ); ?>;
88 97 <?php } ?>
89 98 margin:0;
90 99 <?php if ( ! empty( $defaults['fieldset_padding'] ) ) { ?>
91 - padding: var(--fieldset-padding)<?php echo esc_html( $important ); ?>;
100 + padding:<?php echo esc_html( $defaults['fieldset_padding'] . $important ); ?>;
101 + padding:var(--fieldset-padding)<?php echo esc_html( $important ); ?>;
92 102 <?php } ?>
93 103 <?php if ( ! empty( $defaults['fieldset_bg_color'] ) ) { ?>
94 - background-color: var(--fieldset-bg-color)<?php echo esc_html( $important ); ?>;
104 + background-color:<?php echo esc_html( $defaults['fieldset_bg_color'] ); ?>;
105 + background-color:var(--fieldset-bg-color)<?php echo esc_html( $important ); ?>;
95 106 <?php } ?>
96 107 <?php if ( ! empty( $defaults['font'] ) ) { ?>
97 108 font-family:var(--font);
98 109 <?php } ?>
@@ -116,21 +127,26 @@
116 127
117 128 .with_frm_style legend + h3,
118 129 .with_frm_style h3.frm_form_title{
119 130 <?php if ( ! empty( $defaults['title_size'] ) ) { ?>
120 - font-size: var(--title-size)<?php echo esc_html( $important ); ?>;
131 + font-size:<?php echo esc_html( $defaults['title_size'] . $important ); ?>;
132 + font-size:var(--title-size)<?php echo esc_html( $important ); ?>;
121 133 <?php } ?>
122 134 <?php if ( ! empty( $defaults['title_color'] ) ) { ?>
123 - color: var(--title-color)<?php echo esc_html( $important ); ?>;
135 + color:<?php echo esc_html( $defaults['title_color'] . $important ); ?>;
136 + color:var(--title-color)<?php echo esc_html( $important ); ?>;
124 137 <?php } ?>
125 138 <?php if ( ! empty( $defaults['font'] ) ) { ?>
126 - font-family: var(--font);
139 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
140 + font-family:var(--font);
127 141 <?php } ?>
128 142 <?php if ( ! empty( $defaults['title_margin_top'] ) ) { ?>
129 - margin-top: var(--title-margin-top)<?php echo esc_html( $important ); ?>;
143 + margin-top:<?php echo esc_html( $defaults['title_margin_top'] . $important ); ?>;
144 + margin-top:var(--title-margin-top)<?php echo esc_html( $important ); ?>;
130 145 <?php } ?>
131 146 <?php if ( ! empty( $defaults['title_margin_bottom'] ) ) { ?>
132 - margin-bottom: var(--title-margin-bottom)<?php echo esc_html( $important ); ?>;
147 + margin-bottom:<?php echo esc_html( $defaults['title_margin_bottom'] . $important ); ?>;
148 + margin-bottom:var(--title-margin-bottom)<?php echo esc_html( $important ); ?>;
133 149 <?php } ?>
134 150 }
135 151
136 152 .with_frm_style .frm_form_field.frm_html_container,
@@ -135,42 +151,46 @@
135 151
136 152 .with_frm_style .frm_form_field.frm_html_container,
137 153 .with_frm_style .frm_form_field .frm_show_it{
138 154 <?php if ( ! empty( $defaults['font'] ) ) { ?>
139 - font-family: var(--font);
155 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
156 + font-family:var(--font);
140 157 <?php } ?>
141 158 <?php if ( ! empty( $defaults['form_desc_color'] ) ) { ?>
142 - color: var(--form-desc-color)<?php echo esc_html( $important ); ?>;
159 + color:<?php echo esc_html( $defaults['form_desc_color'] . $important ); ?>;
160 + color:var(--form-desc-color)<?php echo esc_html( $important ); ?>;
143 161 <?php } ?>
144 162 }
145 163
146 164 <?php if ( ! empty( $defaults['form_desc_size'] ) ) { ?>
147 165 .with_frm_style .frm_form_field.frm_html_container{
148 - font-size: var(--form-desc-size)<?php echo esc_html( $important ); ?>;
166 + font-size:<?php echo esc_html( $defaults['form_desc_size'] . $important ); ?>;
167 + font-size:var(--form-desc-size)<?php echo esc_html( $important ); ?>;
149 168 }
150 169 <?php } ?>
151 170
152 171 .with_frm_style .frm_form_field .frm_show_it{
153 172 <?php if ( ! empty( $defaults['field_font_size'] ) ) { ?>
154 - font-size: var(--field-font-size)<?php echo esc_html( $important ); ?>;
173 + font-size:<?php echo esc_html( $defaults['field_font_size'] . $important ); ?>;
174 + font-size:var(--field-font-size)<?php echo esc_html( $important ); ?>;
155 175 <?php } ?>
156 176 <?php if ( ! empty( $defaults['field_weight'] ) ) { ?>
157 - font-weight: var(--field-weight)<?php echo esc_html( $important ); ?>;
177 + font-weight:<?php echo esc_html( $defaults['field_weight'] ); ?>;
178 + font-weight:var(--field-weight)<?php echo esc_html( $important ); ?>;
158 179 <?php } ?>
159 180 }
160 181
161 -.with_frm_style .frm_required {
182 +.with_frm_style .frm_required{
162 183 <?php if ( ! empty( $defaults['required_color'] ) ) { ?>
163 - color: var(--required-color)<?php echo esc_html( $important ); ?>;
184 + color:<?php echo esc_html( $defaults['required_color'] . $important ); ?>;
185 + color:var(--required-color)<?php echo esc_html( $important ); ?>;
164 186 <?php } ?>
165 187 <?php if ( ! empty( $defaults['required_weight'] ) ) { ?>
166 - font-weight: var(--required-weight)<?php echo esc_html( $important ); ?>;
188 + font-weight:<?php echo esc_html( $defaults['required_weight'] . $important ); ?>;
189 + font-weight:var(--required-weight)<?php echo esc_html( $important ); ?>;
167 190 <?php } ?>
168 191 }
169 192
170 -<?php if ( $use_chosen_js ) { ?>
171 -.with_frm_style .chosen-container,
172 -<?php } ?>
173 193 .with_frm_style input[type=text],
174 194 .with_frm_style input[type=password],
175 195 .with_frm_style input[type=email],
176 196 .with_frm_style input[type=number],
@@ -178,12 +198,14 @@
178 198 .with_frm_style input[type=tel],
179 199 .with_frm_style input[type=search],
180 200 .with_frm_style select,
181 201 .with_frm_style textarea,
182 -.with_frm_style .frm-card-element.StripeElement {
202 +.with_frm_style .frm-card-element.StripeElement,
203 +.with_frm_style .chosen-container{
183 204 font-family:var(--font)<?php echo esc_html( $important ); ?>;
184 205 <?php if ( ! empty( $defaults['field_font_size'] ) ) { ?>
185 - font-size: var(--field-font-size)<?php echo esc_html( $important ); ?>;
206 + font-size:<?php echo esc_html( $defaults['field_font_size'] ); ?>;
207 + font-size:var(--field-font-size)<?php echo esc_html( $important ); ?>;
186 208 <?php } ?>
187 209 margin-bottom:0<?php echo esc_html( $important ); ?>;
188 210 }
189 211
@@ -206,63 +228,48 @@
206 228 .with_frm_style .frm_scroll_box .frm_opt_container,
207 229 .frm_form_fields_active_style,
208 230 .frm_form_fields_error_style,
209 231 .with_frm_style .frm-card-element.StripeElement,
210 -<?php if ( $use_chosen_js ) { ?>
211 232 .with_frm_style .chosen-container-multi .chosen-choices,
212 -.with_frm_style .chosen-container-single .chosen-single,
233 +.with_frm_style .chosen-container-single .chosen-single{
234 + color:<?php echo esc_html( $defaults['text_color'] ); ?>;
235 + color:var(--text-color)<?php echo esc_html( $important ); ?>;
236 + background-color:<?php echo esc_html( $defaults['bg_color'] . $important ); ?>;
237 + background-color:var(--bg-color)<?php echo esc_html( $important ); ?>;
238 +<?php if ( ! empty( $important ) ) { ?>
239 + background-image:none !important;
213 240 <?php } ?>
214 -.with_frm_style .frm_slimselect.ss-main {
215 - color: var(--text-color)<?php echo esc_html( $important ); ?>;
216 - background-color: var(--bg-color)<?php echo esc_html( $important ); ?>;
217 - border-color: var(--border-color)<?php echo esc_html( $important ); ?>;
218 - border-width: var(--field-border-width)<?php echo esc_html( $important ); ?>;
219 - border-style: var(--field-border-style)<?php echo esc_html( $important ); ?>;
220 - border-radius: var(--border-radius)<?php echo esc_html( $important ); ?>;
221 - width: var(--field-width)<?php echo esc_html( $important ); ?>;
222 - max-width: 100%;
223 - font-size: var(--field-font-size)<?php echo esc_html( $important ); ?>;
224 - padding: var(--field-pad)<?php echo esc_html( $important ); ?>;
225 - box-sizing: border-box;
226 - outline: none<?php echo esc_html( $important ); ?>;
227 - font-weight: var(--field-weight);
241 + border-color:<?php echo esc_html( $defaults['border_color'] ); ?>;
242 + border-color:var(--border-color)<?php echo esc_html( $important ); ?>;
243 + border-width:<?php echo esc_html( $defaults['field_border_width'] ); ?>;
244 + border-width:var(--field-border-width)<?php echo esc_html( $important ); ?>;
245 + border-style:<?php echo esc_html( $defaults['field_border_style'] ); ?>;
246 + border-style:var(--field-border-style)<?php echo esc_html( $important ); ?>;
247 + -moz-border-radius:<?php echo esc_html( $defaults['border_radius'] . $important ); ?>;
248 + -webkit-border-radius:<?php echo esc_html( $defaults['border_radius'] . $important ); ?>;
249 + border-radius:<?php echo esc_html( $defaults['border_radius'] ); ?>;
250 + border-radius:var(--border-radius)<?php echo esc_html( $important ); ?>;
251 + width:<?php echo esc_html( $defaults['field_width'] ); ?>;
252 + width:var(--field-width)<?php echo esc_html( $important ); ?>;
253 + max-width:100%;
254 + font-size:<?php echo esc_html( $defaults['field_font_size'] ); ?>;
255 + font-size:var(--field-font-size)<?php echo esc_html( $important ); ?>;
256 + padding:<?php echo esc_html( $defaults['field_pad'] ); ?>;
257 + padding:var(--field-pad)<?php echo esc_html( $important ); ?>;
258 + -webkit-box-sizing:border-box;
259 + -moz-box-sizing:border-box;
260 + box-sizing:border-box;
261 + outline:none<?php echo esc_html( $important ); ?>;
262 + font-weight:<?php echo esc_html( $defaults['field_weight'] ); ?>;
263 + font-weight:var(--field-weight);
264 + box-shadow:var(--box-shadow)<?php echo esc_html( $important ); ?>;
228 265 }
229 266
230 -<?php if ( ! empty( $important ) ) : ?>
231 - <?php if ( $use_chosen_js ) { ?>
232 - .with_frm_style .chosen-container-multi .chosen-choices,
233 - .with_frm_style .chosen-container-single .chosen-single,
234 - <?php } ?>
235 -.with_frm_style input[type=text],
236 -.with_frm_style input[type=password],
237 -.with_frm_style input[type=email],
238 -.with_frm_style input[type=number],
239 -.with_frm_style input[type=url],
240 -.with_frm_style input[type=tel],
241 -.with_frm_style input[type=phone],
242 -.with_frm_style input[type=search],
243 -.with_frm_style textarea,
244 -.frm_form_fields_style,
245 -.with_frm_style .frm_scroll_box .frm_opt_container,
246 -.frm_form_fields_active_style,
247 -.frm_form_fields_error_style,
248 -.with_frm_style .frm-card-element.StripeElement {
249 - background-image:none !important;
250 -}
251 -<?php endif; ?>
252 -
253 -.with_frm_style select option {
254 - color: var(--text-color)<?php echo esc_html( $important ); ?>;
255 -}
256 -
257 -.with_frm_style select option.frm-select-placeholder {
258 - color: var(--text-color-disabled)<?php echo esc_html( $important ); ?>;
259 -}
260 -
261 267 .with_frm_style input[type=radio],
262 268 .with_frm_style input[type=checkbox]{
263 - border-color: var(--border-color)<?php echo esc_html( $important ); ?>;
264 - box-shadow: var(--box-shadow)<?php echo esc_html( $important ); ?>;
269 + border-color:<?php echo esc_html( $defaults['border_color'] . $important ); ?>;
270 + border-color:var(--border-color)<?php echo esc_html( $important ); ?>;
271 + box-shadow:var(--box-shadow)<?php echo esc_html( $important ); ?>;
265 272 float: none;
266 273 }
267 274
268 275 .with_frm_style input[type=radio]:after,
@@ -269,18 +276,8 @@
269 276 .with_frm_style input[type=checkbox]:after {
270 277 display: none; /* 2021 conflict */
271 278 }
272 279
273 -.with_frm_style input[type=radio]:not(:checked):focus,
274 -.with_frm_style input[type=checkbox]:not(:checked):focus {
275 - border-color: var(--border-color) !important;
276 -}
277 -
278 -.with_frm_style input[type=radio]:focus,
279 -.with_frm_style input[type=checkbox]:focus {
280 - box-shadow:0px 0px 0px 3px rgba(<?php echo esc_html( FrmStylesHelper::hex2rgb( $defaults['border_color_active'] ) ); ?>, 0.4) !important;
281 -}
282 -
283 280 .with_frm_style input[type=text],
284 281 .with_frm_style input[type=password],
285 282 .with_frm_style input[type=email],
286 283 .with_frm_style input[type=number],
@@ -289,9 +286,10 @@
289 286 .with_frm_style input[type=file],
290 287 .with_frm_style input[type=search],
291 288 .with_frm_style select,
292 289 .with_frm_style .frm-card-element.StripeElement{
293 - min-height: var(--field-height)<?php echo esc_html( $important ); ?>;
290 + height:<?php echo esc_html( $defaults['field_height'] ); ?>;
291 + height:var(--field-height)<?php echo esc_html( $important ); ?>;
294 292 line-height:1.3<?php echo esc_html( $important ); ?>;
295 293 }
296 294
297 295 .with_frm_style select[multiple=multiple]{
@@ -306,15 +304,17 @@
306 304 box-shadow:none;
307 305 }
308 306
309 307 .with_frm_style input[type=file]{
310 - color: var(--text-color)<?php echo esc_html( $important ); ?>;
311 - padding: 0px;
308 + color:<?php echo esc_html( $defaults['text_color'] ); ?>;
309 + color:var(--text-color)<?php echo esc_html( $important ); ?>;
310 + padding:0px;
312 311 <?php if ( ! empty( $defaults['font'] ) ) { ?>
313 - font-family: var(--font)<?php echo esc_html( $important ); ?>;
312 + font-family:var(--font)<?php echo esc_html( $important ); ?>;
314 313 <?php } ?>
315 - font-size: var(--field-font-size)<?php echo esc_html( $important ); ?>;
316 - display: initial;
314 + font-size:<?php echo esc_html( $defaults['field_font_size'] ); ?>;
315 + font-size:var(--field-font-size)<?php echo esc_html( $important ); ?>;
316 + display:initial;
317 317 }
318 318
319 319 .with_frm_style input[type=file].frm_transparent{
320 320 color:transparent<?php echo esc_html( $important ); ?>;
@@ -320,25 +320,27 @@
320 320 color:transparent<?php echo esc_html( $important ); ?>;
321 321 }
322 322
323 323 .with_frm_style .wp-editor-wrap{
324 - width: var(--field-width)<?php echo esc_html( $important ); ?>;
324 + width:<?php echo esc_html( $defaults['field_width'] . $important ); ?>;
325 + width:var(--field-width)<?php echo esc_html( $important ); ?>;
325 326 max-width:100%;
326 327 }
327 328
328 329 .with_frm_style .wp-editor-container textarea{
329 330 border:none<?php echo esc_html( $important ); ?>;
330 - box-shadow:none !important;
331 331 }
332 332
333 333 .with_frm_style .mceIframeContainer{
334 - background-color: var(--bg-color)<?php echo esc_html( $important ); ?>;
334 + background-color:<?php echo esc_html( $defaults['bg_color'] . $important ); ?>;
335 + background-color:var(--bg-color)<?php echo esc_html( $important ); ?>;
335 336 }
336 337
337 338 .with_frm_style select{
338 - width: var(--auto-width)<?php echo esc_html( $important ); ?>;
339 + width:<?php echo esc_html( $defaults['auto_width'] ); ?>;
340 + width:var(--auto-width)<?php echo esc_html( $important ); ?>;
339 341 max-width:100%;
340 - background-position-y: calc(50% + 3px);
342 + background-position-y: center;
341 343 }
342 344
343 345 .with_frm_style input[disabled],
344 346 .with_frm_style select[disabled],
@@ -344,12 +346,15 @@
344 346 .with_frm_style select[disabled],
345 347 .with_frm_style textarea[disabled],
346 348 .with_frm_style input[readonly],
347 349 .with_frm_style select[readonly],
348 -.with_frm_style textarea[readonly] {
349 - background-color: var(--bg-color-disabled)<?php echo esc_html( $important ); ?>;
350 - color: var(--text-color-disabled)<?php echo esc_html( $important ); ?>;
351 - border-color: var(--border-color-disabled)<?php echo esc_html( $important ); ?>;
350 +.with_frm_style textarea[readonly]{
351 + background-color:<?php echo esc_html( $defaults['bg_color_disabled'] ); ?>;
352 + background-color:var(--bg-color-disabled)<?php echo esc_html( $important ); ?>;
353 + color:<?php echo esc_html( $defaults['text_color_disabled'] ); ?>;
354 + color:var(--text-color-disabled)<?php echo esc_html( $important ); ?>;
355 + border-color:<?php echo esc_html( $defaults['border_color_disabled'] ); ?>;
356 + border-color:var(--border-color-disabled)<?php echo esc_html( $important ); ?>;
352 357 }
353 358
354 359 .frm_preview_page:before{
355 360 content:normal !important;
@@ -361,24 +366,30 @@
361 366
362 367 .with_frm_style .frm_primary_label{
363 368 max-width:100%;
364 369 <?php if ( ! empty( $defaults['font'] ) ) { ?>
365 - font-family: var(--font);
370 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
371 + font-family:var(--font);
366 372 <?php } ?>
367 373 <?php if ( ! empty( $defaults['font_size'] ) ) { ?>
368 - font-size: var(--font-size)<?php echo esc_html( $important ); ?>;
374 + font-size:<?php echo esc_html( $defaults['font_size'] . $important ); ?>;
375 + font-size:var(--font-size)<?php echo esc_html( $important ); ?>;
369 376 <?php } ?>
370 377 <?php if ( ! empty( $defaults['label_color'] ) ) { ?>
371 - color: var(--label-color)<?php echo esc_html( $important ); ?>;
378 + color:<?php echo esc_html( $defaults['label_color'] . $important ); ?>;
379 + color:var(--label-color)<?php echo esc_html( $important ); ?>;
372 380 <?php } ?>
373 381 <?php if ( ! empty( $defaults['weight'] ) ) { ?>
374 - font-weight: var(--weight)<?php echo esc_html( $important ); ?>;
382 + font-weight:<?php echo esc_html( $defaults['weight'] . $important ); ?>;
383 + font-weight:var(--weight)<?php echo esc_html( $important ); ?>;
375 384 <?php } ?>
376 385 <?php if ( ! empty( $defaults['align'] ) ) { ?>
377 - text-align: var(--align)<?php echo esc_html( $important ); ?>;
386 + text-align:<?php echo esc_html( $defaults['align'] . $important ); ?>;
387 + text-align:var(--align)<?php echo esc_html( $important ); ?>;
378 388 <?php } ?>
379 389 <?php if ( ! empty( $defaults['label_padding'] ) ) { ?>
380 - padding: var(--label-padding)<?php echo esc_html( $important ); ?>;
390 + padding:<?php echo esc_html( $defaults['label_padding'] . $important ); ?>;
391 + padding:var(--label-padding)<?php echo esc_html( $important ); ?>;
381 392 <?php } ?>
382 393 margin:0;
383 394 width:auto;
384 395 display:block;
@@ -431,10 +442,10 @@
431 442
432 443 /* Floating labels */
433 444 .with_frm_style .frm_inside_container {
434 445 position: relative;
435 - padding-top: 18px;
436 - padding-top: calc(0.5 * var(--field-height));
446 + padding-top: 27px;
447 + padding-top: calc(0.85 * var(--field-height));
437 448 }
438 449
439 450 .with_frm_style .frm_inside_container > input,
440 451 .with_frm_style .frm_inside_container > select,
@@ -441,13 +452,21 @@
441 452 .with_frm_style .frm_inside_container > textarea {
442 453 display: block;
443 454 }
444 455
445 -.with_frm_style input::placeholder,
446 -.with_frm_style textarea::placeholder {
447 - font-size: var(--field-font-size)<?php echo esc_html( $important ); ?>;
456 +/* These do not work if they are combined */
457 +.with_frm_style .frm_inside_container > input::-moz-placeholder,
458 +.with_frm_style .frm_inside_container > textarea::-moz-placeholder {
459 + opacity: 0 !important;
460 + transition: opacity 0.3s ease-in;
448 461 }
449 462
463 +.with_frm_style .frm_inside_container > input:-ms-input-placeholder,
464 +.with_frm_style .frm_inside_container > textarea:-ms-input-placeholder {
465 + opacity: 0;
466 + transition: opacity 0.3s ease-in;
467 +}
468 +
450 469 .with_frm_style .frm_inside_container > input::placeholder,
451 470 .with_frm_style .frm_inside_container > textarea::placeholder {
452 471 opacity: 0;
453 472 transition: opacity 0.3s ease-in;
@@ -456,10 +475,10 @@
456 475 .with_frm_style .frm_inside_container > label {
457 476 transition: all 0.3s ease-in;
458 477
459 478 position: absolute;
460 - top: 19px;
461 - top: calc(1px + .5 * var(--field-height));
479 + top: 28px;
480 + top: calc(1px + 0.85 * var(--field-height));
462 481 left: 3px;
463 482 width: 100%;
464 483
465 484 line-height: 1.3;
@@ -466,9 +485,9 @@
466 485 text-overflow: ellipsis;
467 486 overflow: hidden;
468 487 white-space: nowrap;
469 488
470 - padding: 8px 12px;
489 + padding: 6px 10px;
471 490 padding: var(--field-pad);
472 491
473 492 font-size: 14px;
474 493 font-size: var(--field-font-size);
@@ -474,8 +493,9 @@
474 493 font-size: var(--field-font-size);
475 494 font-weight: normal;
476 495 font-weight: var(--field-weight);
477 496
497 + -ms-pointer-events: none;
478 498 pointer-events: none;
479 499 }
480 500
481 501 .with_frm_style.frm_style_lines-no-boxes .frm_inside_container > label {
@@ -484,19 +504,30 @@
484 504
485 505 .with_frm_style .frm_inside_container.frm_label_float_top > label {
486 506 top: 0;
487 507 left: 0;
488 - padding: 0;
489 508 font-size: 12px;
490 509 font-size: calc(0.85 * var(--field-font-size));
491 510 }
492 511
512 +/* These do not work if they are combined */
513 +.with_frm_style .frm_inside_container.frm_label_float_top > input::-moz-placeholder,
514 +.with_frm_style .frm_inside_container.frm_label_float_top > textarea::-moz-placeholder {
515 + opacity: 1 !important;
516 + transition: opacity 0.3s ease-in;
517 +}
518 +
519 +.with_frm_style .frm_inside_container.frm_label_float_top > input:-ms-input-placeholder,
520 +.with_frm_style .frm_inside_container.frm_label_float_top > textarea:-ms-input-placeholder {
521 + opacity: 1;
522 + transition: opacity 0.3s ease-in;
523 +}
524 +
493 525 .with_frm_style .frm_inside_container.frm_label_float_top > input::placeholder,
494 526 .with_frm_style .frm_inside_container.frm_label_float_top > textarea::placeholder {
495 527 opacity: 1;
496 528 transition: opacity 0.3s ease-in;
497 529 }
498 -/* End floating label */
499 530
500 531 .with_frm_style .frm_description,
501 532 .with_frm_style .frm_pro_max_limit_desc{
502 533 clear:both;
@@ -542,43 +573,54 @@
542 573 white-space:nowrap;
543 574 }
544 575
545 576 .with_frm_style .frm_button{
546 - text-decoration:none !important;
577 + text-decoration:none !important;;
547 578 border:1px solid #eee;
548 579 display:inline-block;
549 580 <?php if ( ! empty( $defaults['submit_padding'] ) ) { ?>
550 - padding: var(--submit-padding)<?php echo esc_html( $important ); ?>;
581 + padding:<?php echo esc_html( $defaults['submit_padding'] . $important ); ?>;
582 + padding:var(--submit-padding)<?php echo esc_html( $important ); ?>;
551 583 <?php } else { ?>
552 584 padding:5px;
553 585 <?php } ?>
554 586 <?php if ( ! empty( $defaults['border_radius'] ) ) { ?>
587 + -moz-border-radius:<?php echo esc_html( $defaults['border_radius'] . $important ); ?>;
588 + -webkit-border-radius:<?php echo esc_html( $defaults['border_radius'] . $important ); ?>;
555 589 border-radius:<?php echo esc_html( $defaults['border_radius'] . $important ); ?>;
556 590 border-radius:var(--border-radius)<?php echo esc_html( $important ); ?>;
557 591 <?php } ?>
558 592 <?php if ( ! empty( $defaults['submit_font_size'] ) ) { ?>
559 - font-size: var(--submit-font-size)<?php echo esc_html( $important ); ?>;
593 + font-size:<?php echo esc_html( $defaults['submit_font_size'] . $important ); ?>;
594 + font-size:var(--submit-font-size)<?php echo esc_html( $important ); ?>;
560 595 <?php } ?>
561 596 <?php if ( ! empty( $defaults['font'] ) ) { ?>
562 - font-family: var(--font)<?php echo esc_html( $important ); ?>;
597 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] . $important ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
598 + font-family:var(--font)<?php echo esc_html( $important ); ?>;
563 599 <?php } ?>
564 600 <?php if ( ! empty( $defaults['submit_weight'] ) ) { ?>
565 - font-weight: var(--submit-weight)<?php echo esc_html( $important ); ?>;
601 + font-weight:<?php echo esc_html( $defaults['submit_weight'] . $important ); ?>;
602 + font-weight:var(--submit-weight)<?php echo esc_html( $important ); ?>;
566 603 <?php } ?>
567 604 <?php if ( ! empty( $defaults['submit_text_color'] ) ) { ?>
568 - color: var(--submit-text-color)<?php echo esc_html( $important ); ?>;
605 + color:<?php echo esc_html( $defaults['submit_text_color'] . $important ); ?>;
606 + color:var(--submit-text-color)<?php echo esc_html( $important ); ?>;
569 607 <?php } ?>
570 608 <?php if ( ! empty( $defaults['submit_bg_color'] ) ) { ?>
571 - background: var(--submit-bg-color)<?php echo esc_html( $important ); ?>;
609 + background:<?php echo esc_html( $defaults['submit_bg_color'] . $important ); ?>;
610 + background:var(--submit-bg-color)<?php echo esc_html( $important ); ?>;
572 611 <?php } ?>
573 612 <?php if ( ! empty( $defaults['submit_border_width'] ) ) { ?>
574 - border-width: var(--submit-border-width)<?php echo esc_html( $important ); ?>;
613 + border-width:<?php echo esc_html( $defaults['submit_border_width'] ); ?>;
614 + border-width:var(--submit-border-width)<?php echo esc_html( $important ); ?>;
575 615 <?php } ?>
576 616 <?php if ( ! empty( $defaults['submit_border_color'] ) ) { ?>
577 - border-color: var(--submit-border-color)<?php echo esc_html( $important ); ?>;
617 + border-color:<?php echo esc_html( $defaults['submit_border_color'] . $important ); ?>;
618 + border-color:var(--submit-border-color)<?php echo esc_html( $important ); ?>;
578 619 <?php } ?>
579 620 <?php if ( ! empty( $defaults['submit_height'] ) ) { ?>
580 - height: var(--submit-height)<?php echo esc_html( $important ); ?>;
621 + height:<?php echo esc_html( $defaults['submit_height'] . $important ); ?>;
622 + height:var(--submit-height)<?php echo esc_html( $important ); ?>;
581 623 <?php } ?>
582 624 }
583 625
584 626 <?php if ( ! empty( $defaults['submit_text_color'] ) ) { ?>
@@ -611,12 +653,8 @@
611 653 .with_frm_style.frm_center_submit .frm_submit{
612 654 text-align:center;
613 655 }
614 656
615 -.with_frm_style.frm_center_submit .frm_flex.frm_submit {
616 - justify-content: center;
617 -}
618 -
619 657 .with_frm_style .frm_inline_success .frm_submit{
620 658 display: flex;
621 659 flex-direction: row;
622 660 align-items: center;
@@ -660,8 +698,9 @@
660 698
661 699 .with_frm_style .frm_loading_prev .frm_prev_page,
662 700 .with_frm_style .frm_loading_form .frm_button_submit {
663 701 position: relative;
702 + opacity: .8;
664 703 color: transparent !important;
665 704 text-shadow: none !important;
666 705 }
667 706
@@ -687,9 +726,9 @@
687 726 border-top-color: transparent;
688 727 border-left-color: transparent;
689 728 border-radius: 50%;
690 729 box-sizing: border-box;
691 - <?php $loader_size = 12; ?>
730 + <?php $loader_size = 20; ?>
692 731 top: 50%;
693 732 left: 50%;
694 733 margin-top: -<?php echo absint( $loader_size / 2 ); ?>px;
695 734 margin-left: -<?php echo absint( $loader_size / 2 ); ?>px;
@@ -694,23 +733,17 @@
694 733 margin-top: -<?php echo absint( $loader_size / 2 ); ?>px;
695 734 margin-left: -<?php echo absint( $loader_size / 2 ); ?>px;
696 735 width: <?php echo absint( $loader_size ); ?>px;
697 736 height: <?php echo absint( $loader_size ); ?>px;
698 - animation: spin 2s linear infinite;
737 + -webkit-animation: spin 2s linear infinite;
738 + -moz-animation: spin 2s linear infinite;
739 + -o-animation: spin 2s linear infinite;
740 + animation: spin 2s linear infinite;
699 741 }
700 742
701 -.with_frm_style .frm_submit.frm_flex {
702 - align-items: center;
703 - gap: 2%;
704 -}
705 -
706 -.with_frm_style .frm_submit.frm_flex button.frm_button_submit ~ .frm_prev_page {
707 - order: -1;
708 -}
709 -
710 743 <?php
711 744 foreach ( $styles as $style ) {
712 - include __DIR__ . '/_single_theme.css.php';
745 + include( dirname( __FILE__ ) . '/_single_theme.css.php' );
713 746 unset( $style );
714 747 }
715 748
716 749 // Set it again since it may have been overridden.
@@ -732,12 +765,15 @@
732 765
733 766 .with_frm_style a.frm_save_draft,
734 767 .with_frm_style a.frm_start_over{
735 768 <?php if ( ! empty( $defaults['font'] ) ) { ?>
736 - font-family: var(--font);
769 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
770 + font-family:var(--font);
737 771 <?php } ?>
738 - font-size: var(--submit-font-size);
739 - font-weight: var(--submit-weight);
772 + font-size:<?php echo esc_html( $defaults['submit_font_size'] ); ?>;
773 + font-size:var(--submit-font-size);
774 + font-weight:<?php echo esc_html( $defaults['submit_weight'] ); ?>;
775 + font-weight:var(--submit-weight);
740 776 }
741 777
742 778 .horizontal_radio .frm_radio{
743 779 margin:0 5px 0 0;
@@ -744,9 +780,9 @@
744 780 }
745 781
746 782 .horizontal_radio .frm_checkbox{
747 783 margin:0;
748 - margin-right:12px;
784 + margin-right:5px;
749 785 }
750 786
751 787 .vertical_radio .frm_checkbox,
752 788 .vertical_radio .frm_radio,
@@ -761,13 +797,15 @@
761 797 padding-left: 0;
762 798 }
763 799
764 800 .with_frm_style .frm_radio{
765 - display: var(--radio-align)<?php echo esc_html( $important ); ?>;
801 + display:<?php echo esc_html( $defaults['radio_align'] . $important ); ?>;
802 + display:var(--radio-align)<?php echo esc_html( $important ); ?>;
766 803 }
767 804
768 805 .with_frm_style .frm_checkbox{
769 - display: var(--check-align)<?php echo esc_html( $important ); ?>;
806 + display:<?php echo esc_html( $defaults['check_align'] . $important ); ?>;
807 + display:var(--check-align)<?php echo esc_html( $important ); ?>;
770 808 }
771 809
772 810 .with_frm_style .vertical_radio .frm_checkbox,
773 811 .with_frm_style .vertical_radio .frm_radio,
@@ -772,9 +810,8 @@
772 810 .with_frm_style .vertical_radio .frm_checkbox,
773 811 .with_frm_style .vertical_radio .frm_radio,
774 812 .vertical_radio .frm_catlevel_1{
775 813 display:block<?php echo esc_html( $important ); ?>;
776 - margin-bottom: 10px;
777 814 }
778 815
779 816 .with_frm_style .horizontal_radio .frm_checkbox,
780 817 .with_frm_style .horizontal_radio .frm_radio,
@@ -782,45 +819,40 @@
782 819 display:inline-block<?php echo esc_html( $important ); ?>;
783 820 }
784 821
785 822 .with_frm_style .frm_checkbox label,
786 -.with_frm_style .frm_radio label {
787 - display: inline-block;
788 - vertical-align: middle;
823 +.with_frm_style .frm_radio label{
824 + display: inline;
789 825 white-space:normal;
790 826 }
791 827
792 -.with_frm_style .frm_checkbox label input[type=checkbox],
793 -.with_frm_style .frm_radio label input[type=radio] {
794 - margin-right: 4px;
795 -}
796 -
797 -.with_frm_style .frm_checkbox label:not(.frm-label-disabled),
798 -.with_frm_style .frm_radio label:not(.frm-label-disabled) {
799 - cursor: pointer;
800 -}
801 -
802 828 .with_frm_style .vertical_radio .frm_checkbox label,
803 829 .with_frm_style .vertical_radio .frm_radio label{
804 830 display: block;
805 - width: 100%;
831 + padding-left: 20px;
832 + text-indent: -20px;
806 833 }
807 834
808 835 .with_frm_style .frm_radio label,
809 -.with_frm_style .frm_checkbox label {
836 +.with_frm_style .frm_checkbox label{
810 837 <?php if ( ! empty( $defaults['font'] ) ) { ?>
811 - font-family: var(--font);
838 + font-family:<?php echo FrmAppHelper::kses( $defaults['font'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>;
839 + font-family:var(--font);
812 840 <?php } ?>
813 - font-size: var(--check-font-size)<?php echo esc_html( $important ); ?>;
814 - color: var(--check-label-color)<?php echo esc_html( $important ); ?>;
815 - font-weight: var(--check-weight)<?php echo esc_html( $important ); ?>;
841 + font-size:<?php echo esc_html( $defaults['check_font_size'] . $important ); ?>;
842 + font-size:var(--check-font-size)<?php echo esc_html( $important ); ?>;
843 + color:<?php echo esc_html( $defaults['check_label_color'] . $important ); ?>;
844 + color:var(--check-label-color)<?php echo esc_html( $important ); ?>;
845 + font-weight:<?php echo esc_html( $defaults['check_weight'] . $important ); ?>;
846 + font-weight:var(--check-weight)<?php echo esc_html( $important ); ?>;
816 847 line-height: 1.3;
817 848 }
818 849
819 850 .with_frm_style .frm_radio input[type=radio],
820 851 .with_frm_style .frm_checkbox input[type=checkbox] {
821 - font-size: var(--check-font-size)<?php echo esc_html( $important ); ?>;
822 - position: static<?php echo esc_html( $important ); ?>;
852 + font-size:<?php echo esc_html( $defaults['check_font_size'] . $important ); ?>;
853 + font-size:var(--check-font-size)<?php echo esc_html( $important ); ?>;
854 + position:static<?php echo esc_html( $important ); ?>;
823 855 }
824 856
825 857 .frm_file_container .frm_file_link,
826 858 .with_frm_style .frm_radio label .frm_file_container,
@@ -829,104 +861,60 @@
829 861 margin:5px;
830 862 vertical-align:middle;
831 863 }
832 864
833 -.with_frm_style .frm_radio input[type=radio]
834 -<?php if ( $pro_is_installed ) : ?>
835 -, .with_frm_style .frm_scale input[type=radio]
836 -<?php endif; ?>
837 -{
865 +.with_frm_style .frm_radio input[type=radio]{
838 866 border-radius:50%;
839 867 }
840 868
841 -.with_frm_style .frm_checkbox input[type=checkbox] {
842 - border-radius: calc(var(--border-radius) / 2) !important;
869 +.with_frm_style .frm_checkbox input[type=checkbox]{
870 + border-radius:0;
843 871 }
844 872
845 873 .with_frm_style .frm_radio input[type=radio],
846 -<?php if ( $pro_is_installed ) : ?>
847 -.with_frm_style .frm_scale input[type=radio],
848 -<?php endif; ?>
849 874 .with_frm_style .frm_checkbox input[type=checkbox]{
875 + -webkit-appearance: none;
850 876 appearance: none;
851 877 background-color: var(--bg-color);
852 878 flex: none;
853 879 display:inline-block !important;
854 - width: 16px !important;
855 - min-width: 16px !important;
856 - height: 16px !important;
880 + margin: 0 5px 0 0;
857 881 color: var(--border-color);
882 + width: 18px;
883 + min-width: 18px;
884 + height: 18px;
858 885 border: 1px solid currentColor;
859 886 border-color: var(--border-color);
860 887 vertical-align: middle;
861 888 position: initial; /* override Bootstrap */
862 889 padding: 0;
863 - margin: 0;
864 890 }
865 891
866 -.frm_forms.with_frm_style .frm_fields_container .frm_radio input[type=radio]:not([disabled]):checked,
867 -<?php if ( $pro_is_installed ) : ?>
868 -.frm_forms.with_frm_style .frm_fields_container .frm_scale input[type=radio]:not([disabled]):checked,
869 -<?php endif; ?>
870 -.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked {
871 - border-color: var(--border-color-active) !important;
892 +.with_frm_style .frm_radio input[type=radio]:before,
893 +.with_frm_style .frm_checkbox input[type=checkbox]:before {
894 + content: '';
895 + width: 12px;
896 + height: 12px;
897 + border-radius: 50%;
898 + transform: scale(0);
899 + transition: 120ms transform ease-in-out;
900 + box-shadow: inset 10px 10px var(--text-color);
901 + display: block;
902 + margin: 2px 0 0 2px;
872 903 }
873 904
874 -.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked {
875 - background-color: var(--border-color-active) !important;
905 +.with_frm_style .frm_checkbox input[type=checkbox]:before{
906 + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
907 + border-radius: 0;
876 908 }
877 909
878 -.with_frm_style .frm_radio input[type=radio][disabled]:checked,
879 -<?php if ( $pro_is_installed ) : ?>
880 -.with_frm_style .frm_scale input[type=radio][disabled]:checked,
881 -<?php endif; ?>
882 -.with_frm_style .frm_checkbox input[type=checkbox][disabled]:checked {
883 - border-color: var(--border-color) !important; /* Override Style Preview */
884 -}
885 -
886 -.with_frm_style .frm_checkbox input[type=checkbox][disabled]:checked {
887 - background-color: var(--border-color) !important;
888 -}
889 -
890 910 .with_frm_style .frm_radio input[type=radio]:checked:before,
891 -<?php if ( $pro_is_installed ) { ?>
892 -.with_frm_style .frm_scale input[type=radio]:checked:before,
893 -<?php } ?>
894 911 .with_frm_style .frm_checkbox input[type=checkbox]:checked:before {
895 - position: static !important; /* Override Style Preview */
896 - content: '';
897 - display: block;
912 + transform: scale(1);
898 913 }
899 914
900 -.frm_forms.with_frm_style .frm_checkbox input[type=checkbox]:before {
901 - width: 100% !important;
902 - height: 100% !important;
903 - background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6667 1.5L4.25001 7.91667L1.33334 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
904 - background-size: 9px !important;
905 - background-repeat: no-repeat !important;
906 - background-position: center !important;
907 - margin: 0;
908 -}
909 -
910 -<?php if ( $pro_is_installed ) { ?>
911 -.with_frm_style .frm_scale input[type=radio]:before,
912 -<?php } ?>
913 -.with_frm_style .frm_radio input[type=radio]:before {
914 - width: 8px;
915 - height: 8px;
916 - border-radius: 50%;
917 - background-color: var(--border-color-active);
918 - margin: 3px;
919 -}
920 -
921 -<?php if ( $pro_is_installed ) { ?>
922 -.with_frm_style .frm_scale input[type=radio][disabled]:before,
923 -<?php } ?>
924 -.with_frm_style .frm_radio input[type=radio][disabled]:before {
925 - background-color: var(--border-color);
926 -}
927 -
928 915 .with_frm_style :invalid,
916 +.with_frm_style :-moz-submit-invalid,
929 917 .with_frm_style :-moz-ui-invalid{
930 918 box-shadow:none;
931 919 }
932 920
@@ -942,29 +930,33 @@
942 930
943 931 .with_frm_style .frm_error_style,
944 932 .with_frm_style .frm_message,
945 933 .frm_success_style{
934 + -moz-border-radius:4px;
935 + -webkit-border-radius:4px;
946 936 border-radius:4px;
947 937 padding:15px;
948 938 }
949 939
950 -.with_frm_style .frm_message p {
951 - color: var(--success-text-color)<?php echo esc_html( $important ); ?>;
952 - margin-bottom: 0;
940 +.with_frm_style .frm_message p{
941 + margin-bottom:5px;
942 + color:<?php echo esc_html( $defaults['success_text_color'] ); ?>;
943 + color:var(--success-text-color)<?php echo esc_html( $important ); ?>;
953 944 }
954 945
955 -.with_frm_style .frm_message > p:first-of-type {
956 - margin-top: 0;
957 -}
958 -
959 946 .with_frm_style .frm_message,
960 -.frm_success_style {
961 - margin: 5px 0 15px;
962 - border: 1px solid var(--success-border-color);
963 - background-color: var(--success-bg-color);
964 - color: var(--success-text-color)<?php echo esc_html( $important ); ?>;
965 - border-radius: var(--border-radius);
966 - font-size: var(--success-font-size)<?php echo esc_html( $important ); ?>;
947 +.frm_success_style{
948 + margin:5px 0 15px;
949 + border:1px solid <?php echo esc_html( $defaults['success_border_color'] ); ?>;
950 + border-color:var(--success-border-color);
951 + background-color:<?php echo esc_html( $defaults['success_bg_color'] ); ?>;
952 + background-color:var(--success-bg-color);
953 + color:<?php echo esc_html( $defaults['success_text_color'] ); ?>;
954 + color:var(--success-text-color)<?php echo esc_html( $important ); ?>;
955 + border-radius:<?php echo esc_html( $defaults['border_radius'] ); ?>;
956 + border-radius:var(--border-radius);
957 + font-size:<?php echo esc_html( $defaults['success_font_size'] ); ?>;
958 + font-size:var(--success-font-size)<?php echo esc_html( $important ); ?>;
967 959 }
968 960
969 961 .with_frm_style .frm_plain_success .frm_message {
970 962 background-color: transparent;
@@ -1000,9 +992,10 @@
1000 992 padding:5px;
1001 993 border-width:1px;
1002 994 border-style:solid;
1003 995 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
1004 - border-color: var(--border-color);
996 + border-color:<?php echo esc_html( $defaults['border_color'] ); ?>;
997 + border-color:var(--border-color);
1005 998 <?php } ?>
1006 999 border-top:none;
1007 1000 border-left:none;
1008 1001 border-right:none;
@@ -1017,9 +1010,10 @@
1017 1010 }
1018 1011
1019 1012 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
1020 1013 .with_frm_style .frm-alt-table{
1021 - border-color: var(--border-color);
1014 + border-color:<?php echo esc_html( $defaults['border_color'] ); ?>;
1015 + border-color:var(--border-color);
1022 1016 }
1023 1017 <?php } ?>
1024 1018
1025 1019 .frm-alt-table th {
@@ -1043,11 +1037,11 @@
1043 1037 background-color:<?php echo esc_html( FrmStylesHelper::adjust_brightness( $defaults['border_color'], 45 ) ); ?>;
1044 1038 }
1045 1039
1046 1040 table.form_results.with_frm_style{
1047 - border-style: solid;
1048 - border-width: var(--field-border-width)<?php echo esc_html( $important ); ?>;
1049 - border-color: var(--border-color)<?php echo esc_html( $important ); ?>;
1041 + border:<?php echo esc_html( $defaults['field_border_width'] ); ?> solid <?php echo esc_html( $defaults['border_color'] . $important ); ?>;
1042 + border-width:var(--field-border-width)<?php echo esc_html( $important ); ?>;
1043 + border-color:var(--border-color)<?php echo esc_html( $important ); ?>;
1050 1044 }
1051 1045
1052 1046 table.form_results.with_frm_style tr td{
1053 1047 text-align:left;
@@ -1052,14 +1046,15 @@
1052 1046 table.form_results.with_frm_style tr td{
1053 1047 text-align:left;
1054 1048 padding:7px 9px;
1055 1049 <?php if ( ! empty( $defaults['text_color'] ) ) { ?>
1056 - color: var(--text-color)<?php echo esc_html( $important ); ?>;
1050 + color:<?php echo esc_html( $defaults['text_color'] ); ?>;
1051 + color:var(--text-color)<?php echo esc_html( $important ); ?>;
1057 1052 <?php } ?>
1058 1053 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
1059 - border-top-style: solid;
1060 - border-top-width: var(--field-border-width)<?php echo esc_html( $important ); ?>;
1061 - border-top-color: var(--border-color)<?php echo esc_html( $important ); ?>;
1054 + border-top:1px solid <?php echo esc_html( $defaults['border_color'] ); ?>;
1055 + border-top-width:var(--field-border-width)<?php echo esc_html( $important ); ?>;
1056 + border-top-color:var(--border-color)<?php echo esc_html( $important ); ?>;
1062 1057 <?php } ?>
1063 1058 }
1064 1059
1065 1060 table.form_results.with_frm_style tr.frm_even,
@@ -1069,10 +1064,11 @@
1069 1064 }
1070 1065
1071 1066 <?php if ( ! empty( $defaults['bg_color'] ) ) { ?>
1072 1067 table.form_results.with_frm_style tr.frm_odd,
1073 -.frm-grid .frm_odd {
1074 - background-color: var(--bg-color)<?php echo esc_html( $important ); ?>;
1068 +.frm-grid .frm_odd{
1069 + background-color:<?php echo esc_html( $defaults['bg_color'] ); ?>;
1070 + background-color:var(--bg-color)<?php echo esc_html( $important ); ?>;
1075 1071 }
1076 1072 <?php } ?>
1077 1073
1078 1074 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
@@ -1154,25 +1150,26 @@
1154 1150 animation:2s linear 0s normal none infinite progress-bar-stripes;
1155 1151 }
1156 1152
1157 1153 <?php if ( ! empty( $defaults['bg_color'] ) ) { ?>
1158 -#frm_loading .progress-striped .progress-bar {
1154 +#frm_loading .progress-striped .progress-bar{
1159 1155 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
1160 - background-image: linear-gradient(45deg, var(--border-color) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, var(--border-color) 50%, var(--border-color) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
1156 + background-image:linear-gradient(45deg, <?php echo esc_html( $defaults['border_color'] ); ?> 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, <?php echo esc_html( $defaults['border_color'] ); ?> 50%, <?php echo esc_html( $defaults['border_color'] ); ?> 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
1161 1157 <?php } ?>
1162 1158 background-size:40px 40px;
1163 1159 }
1164 1160 <?php } ?>
1165 1161
1166 -#frm_loading .progress-bar {
1167 - background-color: var(--bg-color);
1168 - box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
1169 - float: left;
1170 - height: 100%;
1171 - line-height: 20px;
1172 - text-align: center;
1173 - transition: width 0.6s ease 0s;
1174 - width: 100%;
1162 +#frm_loading .progress-bar{
1163 + background-color:<?php echo esc_html( $defaults['bg_color'] ); ?>;
1164 + background-color:var(--bg-color);
1165 + box-shadow:0 -1px 0 rgba(0, 0, 0, 0.15) inset;
1166 + float:left;
1167 + height:100%;
1168 + line-height:20px;
1169 + text-align:center;
1170 + transition:width 0.6s ease 0s;
1171 + width:100%;
1175 1172 }
1176 1173
1177 1174 .frm_image_from_url{
1178 1175 height:50px;
@@ -1189,9 +1186,9 @@
1189 1186 background-repeat: no-repeat;
1190 1187 color: transparent !important;
1191 1188 }
1192 1189
1193 -<?php readfile( __DIR__ . '/frm_grids.css' ); ?>
1190 +<?php readfile( dirname( __FILE__ ) . '/frm_grids.css' ); ?>
1194 1191
1195 1192 .frm_conf_field.frm_left_container .frm_primary_label{
1196 1193 display:none;
1197 1194 }
@@ -1198,8 +1195,10 @@
1198 1195
1199 1196 .wp-editor-wrap *,
1200 1197 .wp-editor-wrap *:after,
1201 1198 .wp-editor-wrap *:before{
1199 + -webkit-box-sizing:content-box;
1200 + -moz-box-sizing:content-box;
1202 1201 box-sizing:content-box;
1203 1202 }
1204 1203
1205 1204 .with_frm_style .frm_grid,
@@ -1210,9 +1209,10 @@
1210 1209 padding:5px;
1211 1210 border-width:1px;
1212 1211 border-style:solid;
1213 1212 <?php if ( ! empty( $defaults['border_color'] ) ) { ?>
1214 - border-color: var(--border-color)<?php echo esc_html( $important ); ?>;
1213 + border-color:<?php echo esc_html( $defaults['border_color'] ); ?>;
1214 + border-color:var(--border-color)<?php echo esc_html( $important ); ?>;
1215 1215 <?php } ?>
1216 1216 border-left:none;
1217 1217 border-right:none;
1218 1218 }
@@ -1247,16 +1247,18 @@
1247 1247 }
1248 1248
1249 1249 <?php if ( ! empty( $defaults['bg_color'] ) ) { ?>
1250 1250 .frm_grid_first,
1251 -.frm_grid_odd {
1252 - background-color: var(--bg-color);
1251 +.frm_grid_odd{
1252 + background-color:<?php echo esc_html( $defaults['bg_color'] ); ?>;
1253 + background-color:var(--bg-color);
1253 1254 }
1254 1255 <?php } ?>
1255 1256
1256 1257 <?php if ( ! empty( $defaults['bg_color_active'] ) ) { ?>
1257 -.frm_grid {
1258 - background-color: var(--bg-color-active)<?php echo esc_html( $important ); ?>;
1258 +.frm_grid{
1259 + background-color:<?php echo esc_html( $defaults['bg_color_active'] . $important ); ?>;
1260 + background-color:var(--bg-color-active)<?php echo esc_html( $important ); ?>;
1259 1261 }
1260 1262 <?php } ?>
1261 1263
1262 1264 .with_frm_style .frm_grid.frm_blank_field,
@@ -1261,10 +1263,12 @@
1261 1263
1262 1264 .with_frm_style .frm_grid.frm_blank_field,
1263 1265 .with_frm_style .frm_grid_first.frm_blank_field,
1264 1266 .with_frm_style .frm_grid_odd.frm_blank_field{
1267 + background-color:<?php echo esc_html( $defaults['error_bg'] . $important ); ?>;
1265 1268 background-color:var(--error-bg)<?php echo esc_html( $important ); ?>;
1266 - border-color: var(--error-border);
1269 + border-color:<?php echo esc_html( $defaults['error_border'] ); ?>;
1270 + border-color:var(--error-bg);
1267 1271 }
1268 1272
1269 1273 .frm_grid .frm_primary_label,
1270 1274 .frm_grid_first .frm_primary_label,
@@ -1286,10 +1290,9 @@
1286 1290 .frm_grid_odd .frm_radio label,
1287 1291 .frm_grid_first .frm_checkbox label,
1288 1292 .frm_grid .frm_checkbox label,
1289 1293 .frm_grid_odd .frm_checkbox label{
1290 - color:transparent;
1291 - text-indent: -9999px;
1294 + visibility:hidden;
1292 1295 white-space:nowrap;
1293 1296 text-align:left;
1294 1297 }
1295 1298
@@ -1415,18 +1418,8 @@
1415 1418 .frm_form_field.frm_left_container .frm_opt_container{
1416 1419 padding-top:4px;
1417 1420 }
1418 1421
1419 -.with_frm_style .frm_left_container > select.auto_width,
1420 -.with_frm_style .frm_right_container > select.auto_width {
1421 - width: max-content<?php echo esc_html( $important ); ?>;
1422 -}
1423 -
1424 -.with_frm_style .frm_right_container > .frm_primary_label,
1425 -.with_frm_style .frm_right_container > select.auto_width {
1426 - margin-left: auto<?php echo esc_html( $important ); ?>;
1427 -}
1428 -
1429 1422 .with_frm_style .frm_inline_container.frm_grid_first .frm_primary_label,
1430 1423 .with_frm_style .frm_inline_container.frm_grid .frm_primary_label,
1431 1424 .with_frm_style .frm_inline_container.frm_grid_odd .frm_primary_label,
1432 1425 .with_frm_style .frm_inline_container.frm_grid_first .frm_opt_container,
@@ -1461,9 +1454,11 @@
1461 1454 grid-column-end: span 1;
1462 1455 }
1463 1456
1464 1457 .frm_form_field .frm_checkbox,
1465 -.frm_form_field .frm_radio {
1458 +.frm_form_field .frm_checkbox + .frm_checkbox,
1459 +.frm_form_field .frm_radio,
1460 +.frm_form_field .frm_radio + .frm_radio{
1466 1461 margin-top: 0;
1467 1462 margin-bottom: 0;
1468 1463 }
1469 1464
@@ -1472,24 +1467,36 @@
1472 1467 overflow:auto;
1473 1468 }
1474 1469
1475 1470 .frm_html_container.frm_scroll_box,
1476 -.frm_form_field.frm_html_scroll_box {
1477 - height: 100px;
1478 - overflow: auto;
1479 - background-color: var(--bg-color);
1480 - border-color: var(--border-color);
1481 - border-width: var(--field-border-width);
1482 - border-style: var(--field-border-style);
1483 - border-radius: var(--border-radius);
1484 - width: var(--field-width);
1485 - max-width: 100%;
1486 - font-size: var(--field-font-size);
1487 - padding: var(--field-pad);
1488 - box-sizing: border-box;
1489 - outline: none<?php echo esc_html( $important ); ?>;
1490 - font-weight: normal;
1491 - box-shadow: var(--box-shadow);
1471 +.frm_form_field.frm_html_scroll_box{
1472 + height:100px;
1473 + overflow:auto;
1474 + background-color:<?php echo esc_html( $defaults['bg_color'] ); ?>;
1475 + background-color:var(--bg-color);
1476 + border-color:<?php echo esc_html( $defaults['border_color'] ); ?>;
1477 + border-color:var(--border-color);
1478 + border-width:<?php echo esc_html( $defaults['field_border_width'] ); ?>;
1479 + border-width:var(--field-border-width);
1480 + border-style:<?php echo esc_html( $defaults['field_border_style'] ); ?>;
1481 + border-style:var(--field-border-style);
1482 + -moz-border-radius:<?php echo esc_html( $defaults['border_radius'] ); ?>;
1483 + -webkit-border-radius:<?php echo esc_html( $defaults['border_radius'] ); ?>;
1484 + border-radius:<?php echo esc_html( $defaults['border_radius'] ); ?>;
1485 + border-radius:var(--border-radius);
1486 + width:<?php echo esc_html( $defaults['field_width'] ); ?>;
1487 + width:var(--field-width);
1488 + max-width:100%;
1489 + font-size:<?php echo esc_html( $defaults['field_font_size'] ); ?>;
1490 + font-size:var(--field-font-size);
1491 + padding:<?php echo esc_html( $defaults['field_pad'] ); ?>;
1492 + padding:var(--field-pad);
1493 + -webkit-box-sizing:border-box;
1494 + -moz-box-sizing:border-box;
1495 + box-sizing:border-box;
1496 + outline:none<?php echo esc_html( $important ); ?>;
1497 + font-weight:normal;
1498 + box-shadow:var(--box-shadow);
1492 1499 }
1493 1500
1494 1501 .frm_form_field.frm_total_big input,
1495 1502 .frm_form_field.frm_total_big textarea,
@@ -1498,8 +1505,10 @@
1498 1505 opacity:1;
1499 1506 background-color:transparent !important;
1500 1507 border:none !important;
1501 1508 font-weight:bold;
1509 + -moz-box-shadow:none;
1510 + -webkit-box-shadow:none;
1502 1511 width:auto !important;
1503 1512 height:auto !important;
1504 1513 box-shadow:none !important;
1505 1514 display:inline;
@@ -1519,8 +1528,10 @@
1519 1528 .frm_form_field.frm_total input:focus,
1520 1529 .frm_form_field.frm_total textarea:focus{
1521 1530 background-color:transparent;
1522 1531 border:none;
1532 + -moz-box-shadow:none;
1533 + -webkit-box-shadow:none;
1523 1534 box-shadow:none;
1524 1535 }
1525 1536
1526 1537 .frm_form_field.frm_label_justify .frm_primary_label{
@@ -1545,8 +1556,13 @@
1545 1556 .frm_clearfix{
1546 1557 display:block;
1547 1558 }
1548 1559
1560 +.with_frm_style .frm_repeat_sec .frm_form_field.frm_repeat_buttons .frm_icon_font::before {
1561 + color:<?php echo esc_html( $defaults['repeat_icon_color'] . $important ); ?>;
1562 + color:var(--repeat-icon-color)<?php echo esc_html( $important ); ?>;
1563 +}
1564 +
1549 1565 .with_frm_style .frm_combo_inputs_container > .frm_form_subfield-first,
1550 1566 .with_frm_style .frm_combo_inputs_container > .frm_form_subfield-middle,
1551 1567 .with_frm_style .frm_combo_inputs_container > .frm_form_subfield-last {
1552 1568 margin-bottom: 0 !important;
@@ -1551,21 +1567,12 @@
1551 1567 .with_frm_style .frm_combo_inputs_container > .frm_form_subfield-last {
1552 1568 margin-bottom: 0 !important;
1553 1569 }
1554 1570
1571 +/* Fonts */
1572 +<?php readfile( FrmAppHelper::plugin_path() . '/css/font_icons.css' ); ?>
1573 +<?php do_action( 'frm_include_front_css', compact( 'defaults' ) ); ?>
1555 1574
1556 -<?php
1557 -/**
1558 - * Call action so other plugins can add additional CSS.
1559 - *
1560 - * @param array $args {
1561 - *
1562 - * @type array $defaults
1563 - * }
1564 - */
1565 -do_action( 'frm_include_front_css', compact( 'defaults' ) );
1566 -?>
1567 -
1568 1575 /* Responsive */
1569 1576
1570 1577 @media only screen and (max-width: 900px) {
1571 1578 .frm_form_field .frm_repeat_grid .frm_form_field.frm_sixth .frm_primary_label,
@@ -1609,8 +1616,9 @@
1609 1616 max-width:302px;
1610 1617 border-right:1px solid #d3d3d3;
1611 1618 border-radius:4px;
1612 1619 box-shadow:2px 0px 4px -1px rgba(0,0,0,.08);
1620 + -moz-box-shadow:2px 0px 4px -1px rgba(0,0,0,.08);
1613 1621 }
1614 1622
1615 1623 .with_frm_style .g-recaptcha iframe,
1616 1624 .with_frm_style .frm-g-recaptcha iframe{
@@ -1616,14 +1624,7 @@
1616 1624 .with_frm_style .frm-g-recaptcha iframe{
1617 1625 width:100%;
1618 1626 }
1619 1627 }
1620 -
1621 -.frm-card-element .sq-card-wrapper .sq-card-message {
1622 - margin-bottom: 0;
1623 -}
1624 -.frm-card-errors:empty {
1625 - margin: 0;
1626 -}
1627 1628 <?php
1628 1629
1629 -echo strip_tags( FrmStylesController::get_custom_css() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1630 +echo strip_tags( $defaults['custom_css'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped