PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.2.02
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.2.02
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/frm_admin.css +1491 -2194 6.55.2.02 View file →
@@ -1,102 +1,33 @@
1 1 @import url(font_icons.css);
2 2
3 3 :root,
4 -.frm-white-body,
5 4 .frm_wrap {
6 - --grey-900: #101828;
7 - --grey-800: #1D2939;
8 - --grey-700: #344054;
9 - --grey-500: #667085; /* Roughly 65% opacity */
10 - --grey-400: #98A2B3;
11 - --grey-300: #D0D5DD;
12 - --grey-200: #EAECF0;
13 - --grey-100: #F2F4F7;
14 - --grey-50: #F9FAFB;
15 - --grey-25: #FCFCFD;
16 - --darkest-grey: var(--grey-900); /* Deprecated */
17 - --dark-grey: var(--grey-700); /* Deprecated */
5 + --light-blue: rgba(188, 224, 253, .2);
6 + --blue-border: rgb(188, 224, 253);
7 + --darkest-grey: rgb(40, 47, 54);
8 + --dark-grey: rgba(40, 47, 54, .85);
18 9 --medium-grey: rgba(40, 47, 54, .65);
19 - --grey: var(--grey-500); /* Deprecated */
20 - --grey-border: var(--grey-300); /* Deprecated */
10 + --grey: rgba(40, 47, 54, .45);
11 + --grey-border: rgba(40, 47, 54, .2);
21 12 --lightest-grey: rgb(250, 250, 250);
22 - --sidebar-color: var(--grey-50);
23 - --sidebar-hover: var(--grey-200);
24 - --primary-700: #2B66A9;
25 - --primary-500: #4199FD;
26 - --primary-25: #F5FAFF;
27 - --primary-color: var(--primary-500); /* Deprecated */
28 - --primary-hover: var(--primary-700); /* Deprecated */
29 - --light-blue: var(--primary-25); /* Deprecated */
30 - --blue-border: rgb(188, 224, 253);
31 - --error-500: #F04438;
32 - --error-700: #B42318;
13 + --sidebar-color: rgb(246, 247, 251);
14 + --sidebar-hover: rgb(227, 232, 235);
15 + --primary-color: rgb(65, 153, 253);
16 + --primary-hover: rgb(49, 119, 199);
33 17 --green: rgb(63, 172, 37);
34 18 --orange: #F15A24;
35 19 --pink: rgb(226, 42, 110);
36 20 --purple: rgb(141, 53, 245);
37 21 --border-radius: 35px;
38 - --small-radius: 8px;
22 + --small-radius: 6px;
39 23 --small-sidebar: 275px;
40 24 --medium-sidebar: 350px;
41 25 --big-sidebar: 390px;
42 26 --biggest-sidebar: 450px;
43 - --text-xs: 12px;
44 - --text-sm: 14px;
45 - --text-md: 16px;
46 - --text-lg: 18px;
47 - --text-xl: 20px;
48 - --h-xs: 24px;
49 - --h-sm: 30px;
50 - --h-md: 36px;
51 - --leading: 1.5;
52 - --gap-2xs: 4px;
53 - --gap-xs: 8px;
54 - --gap-sm: 16px;
55 - --gap-md: 24px;
56 - --gap-lg: 32px;
57 - --gap-xl: 40px;
58 - --gap-2xl: 48px;
59 - --box-shadow-sm: 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
60 - --box-shadow-md: 0px 1.88298px 3.76596px -0.941489px rgba(16, 24, 40, 0.1), 0px 0.941489px 1.88298px -0.941489px rgba(16, 24, 40, 0.06);
61 - --box-shadow-lg: 0px 6px 8px -2px rgba(16, 24, 40, 0.08), 0px 1.88298px 4px -1px rgba(16, 24, 40, 0.03), 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
62 - --box-shadow-xl: 0px 9.41489px 11.2979px -1.88298px rgba(16, 24, 40, 0.08), 0px 3.76596px 3.76596px -1.88298px rgba(16, 24, 40, 0.03);
63 27 }
64 28
65 -@font-face {
66 - font-family: 'Inter';
67 - src: url('../fonts/Inter-VariableFont_slnt,wght.ttf?v=1') format('truetype');
68 -}
69 -
70 -.with_frm_style,
71 -.frm-white-body .wpbody-content,
72 -.frm_wrap {
73 - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
74 -}
75 -
76 -/* Safari 11+ */
77 -@media not all and (min-resolution:.001dpcm) {
78 - @supports (-webkit-appearance:none) and (stroke-color:transparent) {
79 - .with_frm_style,
80 - .frm-white-body .wpbody-content,
81 - .frm_wrap {
82 - -webkit-font-smoothing: antialiased;
83 - }
84 - }
85 -}
86 -
87 -.frm-white-body,
88 -.frm-white-body p,
89 -.frm_wrap,
90 -.frm_wrap p,
91 -.frm-modal,
92 -.frm-white-body .postbox .inside {
93 - font-size: var(--text-sm);
94 - color: var(--grey-500);
95 - line-height: var(--leading);
96 -}
97 -
98 -body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
29 +body:not(.frm-admin-page-styles) .with_frm_style .frm_form_fields > fieldset {
99 30 --fieldset-padding: 15px 0;
100 31 }
101 32
102 33 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
@@ -103,13 +34,12 @@
103 34 cursor: pointer;
104 35 text-decoration: none;
105 36 }
106 37
107 -.post-type-frm_display .wrap > #posts-filter,
108 38 .wrap.frm-with-margin,
109 39 #frm_top_bar + .wrap,
110 40 .frm_wrap > .wrap {
111 - margin: var(--gap-sm) var(--gap-md) var(--gap-md);
41 + margin: 10px 40px 30px;
112 42 }
113 43
114 44 .frm-full-screen #wpbody-content > .wrap {
115 45 margin: 0;
@@ -118,12 +48,23 @@
118 48 .post-type-frm_display .wrap {
119 49 margin: 0;
120 50 }
121 51
52 +.columns-2 .frm-right-panel + #post-body-content {
53 + padding-bottom: 26px;
54 + border-left: 1px solid var(--sidebar-hover);
55 +}
56 +
122 57 .toplevel_page_formidable #post-body-content {
123 58 overflow-x: visible;
124 59 }
125 60
61 +.formidable_page_formidable-pro-upgrade #wpfooter,
62 +.toplevel_page_formidable #wpfooter {
63 + border-top: 1px solid #ddd;
64 + background: #fff;
65 +}
66 +
126 67 .frm-full-screen {
127 68 height: 100%;
128 69 overflow: hidden;
129 70 }
@@ -133,57 +74,37 @@
133 74 .frm-full-screen.post-type-frm_display {
134 75 overflow: auto;
135 76 }
136 77
137 -.frm-full-screen #wpadminbar,
138 -.frm-full-screen #adminmenumain,
139 78 .frm-full-screen .wp-header-end {
140 79 display: none;
141 80 }
142 81
143 -body.frm-white-body:not(.frm-full-screen) .mce-fullscreen {
144 - top: 32px;
145 - left: 160px;
146 -}
147 -
148 82 .frm-full-screen #wpbody-content,
149 83 .frm-full-screen #wpbody,
150 84 .frm-full-screen #wpcontent {
151 - padding: 0;
85 + padding-bottom: 0;
152 86 overflow: hidden;
153 - margin: 0 !important;
154 87 }
155 88
156 -.frm-white-body #wpbody-content {
157 - position: relative; /* For screen meta links */
158 - padding-bottom: 0;
159 -}
160 -
161 89 .post-new-php.post-type-frm_display #screen-meta-links,
162 -.post-php.post-type-frm_display #screen-meta-links {
90 +.post-php.post-type-frm_display #screen-meta-links,
91 +.frm-full-screen #wpfooter {
163 92 display: none;
164 93 }
165 94
166 -.frm-white-body #screen-meta-links {
167 - position: fixed;
168 - bottom: 0;
169 - right: 20px;
95 +.frm-white-body #screen-meta-links .screen-meta-toggle {
96 + position: absolute;
97 + right: 160px;
98 + box-shadow: none;
99 + border-bottom-left-radius: var(--small-radius);
100 + border-bottom-right-radius: var(--small-radius);
170 101 }
171 102
172 -.frm-full-screen #screen-meta-links .screen-meta-toggle {
173 - right: 55px;
174 -}
175 -
176 103 .frm-white-body #screen-meta-links .show-settings {
177 - border-radius: var(--small-radius) var(--small-radius) 0 0;
178 - border: 1px solid var(--grey-300);
179 - border-bottom: none;
104 + box-shadow: none;
180 105 }
181 106
182 -.frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
183 - right: 125px; /* Don't cover the lite upgrade button */
184 -}
185 -
186 107 .frm-white-body #screen-meta {
187 108 margin: 0;
188 109 }
189 110
@@ -191,9 +112,9 @@
191 112 color: var(--grey);
192 113 }
193 114
194 115 .frm-white-body .columns-2 {
195 - border-bottom: 1px solid var(--grey-300);
116 + border-bottom: 1px solid var(--grey-border);
196 117 }
197 118
198 119 .frm-full-screen .columns-2 {
199 120 border: none;
@@ -223,13 +144,8 @@
223 144 .frm_wrap .tablenav {
224 145 margin-bottom: 10px;
225 146 }
226 147
227 -.frm-white-body .tablenav .actions select,
228 -.wp-admin .frm_wrap .tablenav select {
229 - margin-right: var(--gap-xs);
230 -}
231 -
232 148 .tablenav .actions .button {
233 149 margin-top: 1px;
234 150 }
235 151
@@ -245,17 +161,17 @@
245 161 background: #fff;
246 162 }
247 163
248 164 .frm-white-body table.widefat th {
249 - font-size: var(--text-md);
165 + font-size: 16px;
250 166 }
251 167
252 168 .frm-white-body table.widefat th a {
253 - color: var(--grey-700);
169 + color: var(--dark-grey);
254 170 }
255 171
256 172 .frm-white-body table.widefat strong a {
257 - color: var(--primary-700);
173 + color: var(--primary-hover);
258 174 }
259 175
260 176 .frm-scroll-box {
261 177 clear: both;
@@ -260,9 +176,9 @@
260 176 .frm-scroll-box {
261 177 clear: both;
262 178 overflow: auto;
263 179 max-height: 405px;
264 - border: 1px solid var(--grey-300);
180 + border: 1px solid var(--grey-border);
265 181 border-radius: var(--small-radius);
266 182 }
267 183
268 184 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -267,9 +183,9 @@
267 183
268 184 .frm_form_field.frm_scroll_box .frm_opt_container {
269 185 height: 100px;
270 186 overflow: auto;
271 - border: 1px solid var(--grey-300);
187 + border: 1px solid var(--grey-border);
272 188 }
273 189
274 190 .frm-short-list {
275 191 overflow: auto;
@@ -276,9 +192,9 @@
276 192 max-height: 190px;
277 193 }
278 194
279 195 .frm-white-body table.frm-border td {
280 - font-size: var(--text-sm);
196 + font-size: 14px;
281 197 }
282 198
283 199 .frm-white-body .striped > tbody > :nth-child(odd) {
284 200 background-color: #fff;
@@ -292,149 +208,56 @@
292 208 float: right;
293 209 }
294 210
295 211 #frm_top_bar {
296 - display: flex;
297 - gap: var(--gap-sm);
212 + display: block;
298 213 width: 100%;
299 - height: 72px;
214 + max-height: 100px;
215 + padding: 25px 40px 25px;
300 216 margin: 0;
301 217 box-sizing: border-box;
302 218 text-align: center;
303 - padding: 0 var(--gap-md);
304 219 }
305 220
306 -#frm_top_bar > .frm-full-close:last-child,
307 -#frm_top_bar > #frm-publishing:last-child {
308 - margin-left: auto;
309 -}
310 -
311 -#frm_top_bar {
312 - border-bottom: 1px solid var(--grey-300);
313 - padding: 0 var(--gap-md);
221 +.post-type-frm_display:not(.edit-php) #frm_top_bar,
222 +.frm-full-screen.post-type-frm_display #frm_top_bar,
223 +.frm_page_container #frm_top_bar {
224 + border-bottom: 1px solid var(--grey-border);
225 + padding: 0 20px;
314 226 overflow: visible;
315 227 }
316 228
317 -.frm-white-body h1,
318 -.frm-white-body h2,
319 -.frm-white-body h3,
320 -.frm-white-body h4 {
321 - color: var(--grey-900);
322 - font-weight: 400;
323 - line-height: var(--leading) !important;
229 +.frm-full-screen #frm_top_bar {
230 + padding: 0 15px !important;
324 231 }
325 232
326 -.frm-white-body .wrap h1,
327 -.frm-white-body h1 {
328 - font-size: var(--text-xl);
329 -}
330 -
331 -.frm-white-body .wrap h2,
332 -.frm-white-body h2 {
333 - font-size: var(--text-lg);
334 -}
335 -
336 -.frm-white-body .wrap h3,
337 -.frm-white-body h3 {
338 - font-size: var(--text-md);
339 -}
340 -
341 -.frm-white-body .wrap h4,
342 -.frm-white-body h4 {
343 - font-size: var(--text-sm);
344 - font-weight: 500;
345 -}
346 -
347 -/* Override CSS in Views plugin. */
348 -.frm-views-editor-body .frm_page_container #frm_top_bar h1 {
349 - padding: 0 !important;
350 - color: var(--grey-900);
351 - font-size: var(--text-xl) !important;
352 -}
353 -
354 -.post-type-frm_display .frm_top_left {
355 - padding-bottom: 0 !important;
356 -}
357 -
358 -.frm-new-table-view-option.frm-selected-table-view-option {
359 - border-radius: var(--small-radius);
360 - background: var(--primary-25);
361 -}
362 -
363 -.frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
364 - padding-left: 4px;
365 - padding-right: 4px;
366 -}
367 -
368 -#frm_edit_box_content_modal .frm_modal_footer {
369 - padding-top: var(--gap-sm);
370 - border-top: 1px solid var(--grey-300);
371 -}
372 -
373 -#frm_edit_box_content_modal .frm_modal_footer > div {
374 - display: flex;
375 - justify-content: space-between;
376 -}
377 -
378 -#frm_edit_box_content_modal #frm_modal_box_select_area,
379 -#frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
380 -#frm_edit_box_content_modal .frm_modal_content {
381 - max-height: calc(100vh - 176px) !important;
382 -}
383 -
384 -#frm_edit_box_content_modal #frm_modal_box_select_area {
385 - height: calc(100vh - 176px) !important;
386 -}
387 -
388 -#frm_edit_box_content_modal #wp-content-editor-tools {
389 - padding-top: 0;
390 -}
391 -
392 -#frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
393 - right: var(--gap-md);
394 -}
395 -
396 -.frm_code_list.frm-full-hover .frm-dropdown-view a {
397 - flex-direction: row-reverse; /* Switch in the HTML */
398 -}
399 -
400 -#frm_view_editor_left.frm-right-panel .accordion-section-title:before {
401 - content: '' !important;
402 - margin: 0;
403 -}
404 -/** End Temporary View CSS */
405 -
406 233 .frm-upgrade-bar {
407 - background: rgba(188, 224, 253, 0.23);
234 + text-align: center;
235 + background: var(--sidebar-color);
408 236 border-bottom: 1px solid var(--sidebar-hover);
409 - padding: 3px 0 3px 40px;
237 + padding: 3px 0;
410 238 font-size: 95%;
411 239 }
412 240
413 241 .frm-upgrade-bar span {
414 - opacity: .9;
242 + opacity: .5;
415 243 }
416 244
417 245 a h1 .frmsvg {
418 - color: var(--grey-400);
419 - vertical-align: middle;
420 - min-width: var(--text-sm);
246 + color: var(--medium-grey);
247 + vertical-align: baseline;
421 248 }
422 249
423 -a .frmsvg {
424 - color: currentColor;
425 -}
426 -
427 250 .frm_wrap .view-switch a.current:before,
428 -.frm-white-body a,
429 -.frm_wrap a,
430 -.frm_wrap a i {
251 +a .frmsvg,
252 +.frm_wrap a i,
253 +.frm_wrap a {
431 254 color: var(--primary-color);
432 255 }
433 256
434 257 .frm_wrap a:active,
435 258 .frm_wrap a:hover {
436 - color: var(--primary-700);
259 + color: var(--primary-hover);
437 260 box-shadow: none;
438 261 }
439 262
440 263 .post-type-frm_display a:focus,
@@ -448,30 +271,34 @@
448 271 white-space: nowrap;
449 272 max-width: 250px;
450 273 overflow: hidden;
451 274 text-overflow: ellipsis;
452 - align-self: center;
453 275 }
454 276
455 -.post-type-frm_display .frm_top_left,
456 277 .frm_top_left.frm_top_wide {
457 278 max-width: 100%;
458 279 }
459 280
460 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
461 -.frm_nav_bar .frm-header-logo {
462 - margin: 18px 0 10px;
281 +.frm-header-logo,
282 +.edit-php.post-type-frm_display .frm-header-logo {
283 + float: left;
284 + margin: 0 15px 0 0;
463 285 }
464 286
465 -#frm_top_bar .frm_form_nav {
466 - flex: 1;
287 +.frm-full-screen.post-type-frm_display .frm-header-logo,
288 +.post-type-frm_display .frm-header-logo,
289 +.frm_page_container .frm-header-logo {
290 + margin: 13px 0 0;
467 291 }
468 292
293 +.frm_page_container .frm-header-logo {
294 + margin-bottom: 6px;
295 +}
296 +
469 297 ul.frm_form_nav {
470 298 margin: 0 auto;
471 - padding-top: 18px;
299 + padding-top: 19px;
472 300 display: block;
473 - min-width: 240px;
474 301 }
475 302
476 303 .nav-tab-wrapper.frm_form_nav {
477 304 padding: 0 25px;
@@ -477,12 +304,16 @@
477 304 padding: 0 25px;
478 305 }
479 306
480 307 ul.frm_form_nav > li {
481 - margin: 0 min(3.5%, 32px) 0 0;
308 + margin: 0 3.5% 0 0;
482 309 display: inline-block;
483 310 }
484 311
312 +ul.frm_form_nav > li:last-of-type {
313 + margin-right: 0;
314 +}
315 +
485 316 .post-type-frm_display #advanced-sortables h2.hndle,
486 317 .post-type-frm_display #side-sortables h2.hndle,
487 318 .post-type-frm_display #normal-sortables h2.hndle,
488 319 .post-type-frm_display .frm_form_nav .nav-tab-active,
@@ -489,12 +320,13 @@
489 320 .frm_form_nav > li > a {
490 321 font-size: 1.3em;
491 322 text-decoration: none;
492 323 display: block;
493 - padding: 6px 2px 4px;
324 + padding: 5px 2px 15px;
494 325 font-weight: 500;
495 - color: var(--grey-700);
496 - border-bottom: 2px solid transparent;
326 + color: var(--dark-grey);
327 + border-bottom: 3px solid transparent;
328 + letter-spacing: 1px;
497 329 }
498 330
499 331 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
500 332 margin-top: 10px;
@@ -509,15 +341,15 @@
509 341 box-shadow: none;
510 342 }
511 343
512 344 .frm_form_nav > li > a {
513 - font-size: var(--text-md);
514 - font-weight: 400;
515 - color: var(--grey-500);
345 + font-size: 13px;
346 + text-transform: uppercase;
347 + opacity: .8;
516 348 }
517 349
518 350 .frm_form_nav > li > a:hover {
519 - border-color: var(--primary-700);
351 + border-color: var(--primary-hover);
520 352 }
521 353
522 354 .frm_form_nav .frm-dropdown-menu a:hover {
523 355 background-color: #eaf2fa;
@@ -525,27 +357,25 @@
525 357
526 358 .post-type-frm_display .frm_form_nav .nav-tab-active,
527 359 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
528 360 .frm_form_nav > li a.current_page {
529 - color: var(--primary-500);
530 - border-color: var(--primary-500);
361 + color: var(--primary-color);
362 + border-color: var(--primary-color);
531 363 background: transparent;
532 364 opacity: 1;
533 - font-weight: 600;
534 365 }
535 366
536 367 .frm-full-close {
537 368 display: none;
538 - padding-left: var(--gap-md);
539 - border: 0 solid var(--grey-300);
540 - border-left-width: 1px; /* Make RTL a bit less maintenance */
369 + float: right;
370 + padding: 15px 0 14px 12px;
371 + border-left: 1px solid var(--grey-border);
541 372 height: 100%;
542 373 box-sizing: border-box;
543 374 }
544 375
545 376 .frm-full-screen .frm-full-close {
546 - display: flex;
547 - align-items: center;
377 + display: block;
548 378 }
549 379
550 380 .frm-full-close a {
551 381 display: block;
@@ -554,49 +384,57 @@
554 384 .frm-full-close .frmsvg {
555 385 font-size: 20px;
556 386 width: 20px;
557 387 height: 20px;
558 - color: var(--grey-500);
388 + padding: 5px;
389 + color: var(--grey);
559 390 }
560 391
561 -#frm_top_bar h1 {
392 +.edit-php.post-type-frm_display #frm_top_bar h1,
393 +.frm_wrap #frm_top_bar h1 {
394 + font-size: 22px;
562 395 font-weight: 400;
563 396 padding: 0;
564 397 margin: 0;
565 - color: var(--grey-900);
566 - display: inline-flex;
567 - gap: var(--gap-sm);
568 - align-items: center;
398 + color: var(--medium-grey);
399 + display: inline-block;
400 + line-height: 1.4;
401 +}
402 +
403 +.frm-full-screen.post-type-frm_display #frm_top_bar h1,
404 +.post-type-frm_display #frm_top_bar h1,
405 +.frm_page_container #frm_top_bar h1 {
406 + margin: 0 15px;
407 + padding: 20px 0 0;
569 408 text-align: left;
570 409 width: 200px;
410 + line-height: 1.16;
571 411 }
572 412
573 -#frm_top_bar h1 span {
413 +.frm-full-screen.post-type-frm_display #frm_top_bar h1 span,
414 +.post-type-frm_display #frm_top_bar h1 span,
415 +.frm_page_container #frm_top_bar h1 span {
416 + font-size: 19px;
574 417 max-width: 175px;
575 418 text-overflow: ellipsis;
576 419 overflow: hidden;
577 420 white-space: nowrap;
578 421 display: inline-block;
579 - vertical-align: bottom;
580 422 }
581 423
582 -#frm_top_bar ul.frm_form_nav,
583 -#frm_top_bar .frm-header-logo,
584 -#frm_top_bar #frm_bs_dropdown {
585 - align-self: center;
586 - margin-top: 0;
587 - margin-bottom: 0;
588 - padding-top: 0;
424 +#frm_top_bar h1,
425 +#frm_top_bar h2 {
426 + color: var(--medium-grey);
589 427 }
590 428
591 -#frm_top_bar .frm-header-logo {
592 - display: flex; /* Get rid of extra padding below logo */
429 +#frm_top_bar #frm_bs_dropdown {
430 + float: left;
593 431 }
594 432
595 433 #frm_top_bar h2 {
596 434 float: left;
597 - margin: 0 0 0 var(--gap-sm);
598 - padding: 2px 0 2px var(--gap-sm);
435 + margin: 0 0 0 15px;
436 + padding: 2px 0 2px 15px;
599 437 font-weight: normal;
600 438 border-left: 2px solid var(--grey);
601 439 }
602 440
@@ -604,19 +442,28 @@
604 442 margin-top: 0;
605 443 }
606 444
607 445 #frm-publishing {
446 + float: right;
447 + margin-top: 15px;
608 448 min-width: 225px;
609 - align-self: center;
610 - align-items: center;
611 - display: flex;
612 - flex-direction: row-reverse;
613 - gap: 0 var(--gap-sm);
614 - flex-wrap: wrap;
449 + max-width: 325px;
450 + min-height: 10px;
615 451 }
616 452
453 +#frm-publishing #publishing-action,
454 +#frm-publishing #preview-action,
455 +#frm-preview-action,
456 +#frm-publishing > input[type=submit],
457 +#frm-publishing > .button,
458 +#frm-publishing > button,
459 +#frm-embed-action {
460 + float: right;
461 + margin: 0 10px 0 0;
462 +}
463 +
617 464 .frm_wrap .postbox {
618 - border-color: var(--grey-300);
465 + border-color: var(--grey-border);
619 466 border-radius: 6px;
620 467 box-shadow: none;
621 468 }
622 469
@@ -624,9 +471,9 @@
624 471 cursor: default;
625 472 padding: 10px 20px;
626 473 margin: 0;
627 474 line-height: 1.4em;
628 - border-color: var(--grey-300);
475 + border-color: var(--grey-border);
629 476 }
630 477
631 478 .frm-pre-hndle {
632 479 font-size: 15px;
@@ -637,12 +484,8 @@
637 484 .frm-empty-row {
638 485 display: none;
639 486 }
640 487
641 -.frm-child-row {
642 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
643 -}
644 -
645 488 .frm_animate_bg {
646 489 transition: background 200ms linear, color 200ms linear;
647 490 }
648 491
@@ -650,48 +493,16 @@
650 493 clear: both;
651 494 margin: 0;
652 495 }
653 496
654 -.frm_wrap .subsubsub a {
655 - line-height: var(--leading);
656 - font-size: var(--text-sm);
657 -}
658 -
659 -.frm-admin-page-styles .frm_page_container,
660 -.frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
497 +.frm_wrap .frm_page_container {
661 498 height: calc( 100vh - 32px );
662 499 display: flex;
663 500 flex-direction: column;
664 501 overflow: hidden;
665 502 padding-top: 0;
666 - position: fixed;
667 - top: 32px;
668 - bottom: 0;
669 - left: 0;
670 - right: 0;
671 503 }
672 504
673 -.frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
674 - position: static;
675 -}
676 -
677 -.auto-fold.frm-admin-page-styles .frm_page_container,
678 -.auto-fold .frm_wrap .frm_page_container {
679 - left: 160px;
680 -}
681 -
682 -.folded.frm-admin-page-styles .frm_page_container,
683 -.folded .frm_wrap .frm_page_container {
684 - left: 38px;
685 -}
686 -
687 -.frm-full-screen.frm-admin-page-styles .frm_page_container,
688 -.frm-full-screen .frm_wrap .frm_page_container {
689 - height: 100vh;
690 - top: 0;
691 - left: 0;
692 -}
693 -
694 505 .frm-full-screen.frm-admin-page-entries .frm_page_container,
695 506 .frm-new-entry .frm_page_container,
696 507 .frm-admin-page-reports .frm_page_container,
697 508 .frm_list_entry_page .frm_page_container {
@@ -702,22 +513,16 @@
702 513 .frm-new-entry .columns-2 {
703 514 border: none;
704 515 }
705 516
706 -.frm-white-body #frm_top_bar,
707 -.frm-white-body .columns-2 {
517 +.frm_wrap #frm_top_bar,
518 +.frm_wrap .columns-2 {
708 519 flex: 0 0 auto;
709 520 }
710 521
711 -.columns-2 .frm-right-panel + div {
712 - padding-bottom: var(--gap-md);
713 - border-left: 1px solid var(--sidebar-hover);
714 -}
715 -
716 -.columns-2 .frm-right-panel + div,
717 522 .frm_wrap #post-body-content {
718 523 padding-bottom: 0;
719 - padding-top: var(--gap-sm);
524 + padding-top: 20px;
720 525 margin-bottom: 0;
721 526 background: #fff;
722 527 width: auto;
723 528 float: none;
@@ -723,17 +528,16 @@
723 528 float: none;
724 529 flex: 2;
725 530 }
726 531
727 -.frm-white-body .columns-2 {
532 +.frm_wrap .columns-2 {
728 533 flex: 1;
729 534 display: flex;
730 535 overflow: hidden;
731 536 }
732 537
733 -.frm-white-body .columns-2 > div {
538 +.frm_wrap .columns-2 > div {
734 539 overflow-y: auto;
735 - box-sizing: border-box;
736 540 }
737 541
738 542 .frm_wrap .columns-2 .frm-right-panel,
739 543 .frm-right-panel {
@@ -780,9 +584,9 @@
780 584
781 585 .frm-default-switcher a.current,
782 586 .frm-default-switcher a.current .frmsvg,
783 587 .frm-default-switcher a.current i {
784 - color: var( --primary-500);
588 + color: var( --primary-color);
785 589 }
786 590
787 591 #new_fields,
788 592 .frm-has-modal,
@@ -790,15 +594,41 @@
790 594 position: relative;
791 595 }
792 596
793 597 .frm-inline-modal.postbox {
598 + border-color: var(--blue-border);
794 599 background: #fff;
795 600 }
796 601
602 +#frm_upgrade_modal .dismiss .frmsvg,
603 +.frm-inline-modal .frmsvg,
604 +#frm-bulk-modal .frmsvg,
605 +.frm_has_shortcodes > .frmsvg,
606 +#frm_upgrade_modal .dismiss i,
607 +.frm-inline-modal i,
608 +#frm-bulk-modal i,
609 +.frm_has_shortcodes > i {
610 + top: 37px;
611 + right: 5px;
612 + margin-top: -9px;
613 + padding: 5px;
614 + font-size: 10px;
615 + height: 10px;
616 + width: 10px;
617 + line-height: 9px;
618 + font-weight: bold;
619 +}
620 +
621 +#frm_upgrade_modal .dismiss .frmsvg,
622 +.frm-inline-modal .frmsvg,
623 +#frm-bulk-modal .frmsvg,
797 624 .frm_has_shortcodes .frmsvg,
798 -.frm_has_shortcodes i:not([class*=mce-]) {
625 +#frm_upgrade_modal .dismiss i,
626 +.frm-inline-modal i,
627 +#frm-bulk-modal i,
628 +.frm_has_shortcodes i {
799 629 position: absolute;
800 - color: var(--primary-500);
630 + color: var(--primary-color);
801 631 border-radius: 50%;
802 632 border: 1px solid transparent;
803 633 z-index: 100;
804 634 text-align: center;
@@ -803,8 +633,51 @@
803 633 z-index: 100;
804 634 text-align: center;
805 635 }
806 636
637 +#frm_info_modal .dismiss .frmsvg,
638 +#frm_confirm_modal .dismiss .frmsvg,
639 +#frm_upgrade_modal .dismiss .frmsvg,
640 +#frm_info_modal .dismiss i,
641 +#frm_confirm_modal .dismiss i,
642 +#frm_upgrade_modal .dismiss i {
643 + top: 7px;
644 + right: 7px;
645 +}
646 +
647 +#frm-bulk-modal .frmsvg,
648 +#frm-bulk-modal i {
649 + top: 15px;
650 + right: 7px;
651 +}
652 +
653 +.frm-inline-modal .frmsvg,
654 +.frm-inline-modal i {
655 + top: 18px;
656 + right: 7px;
657 + font-size: 11px;
658 + height: 11px;
659 + width: 11px;
660 +}
661 +
662 +#frm_upgrade_modal .dismiss:hover .frmsvg,
663 +.frm-inline-modal .dismiss:hover .frmsvg,
664 +#frm-bulk-modal .dismiss:hover .frmsvg,
665 +#frm_upgrade_modal .dismiss i:hover,
666 +.frm-inline-modal i:hover,
667 +#frm-bulk-modal i:hover {
668 + background: var(--sidebar-color);
669 +}
670 +
671 +#frm_upgrade_modal .dismiss .frmsvg,
672 +.frm-inline-modal .dismiss .frmsvg,
673 +#frm-bulk-modal .dismiss .frmsvg,
674 +#frm_upgrade_modal .dismiss .frm_close_icon,
675 +.frm-inline-modal .frm_close_icon,
676 +#frm-bulk-modal .frm_close_icon {
677 + border-color: var(--primary-color);
678 +}
679 +
807 680 .frm_has_shortcodes input,
808 681 .frm_has_shortcodes textarea {
809 682 padding-left: 18px;
810 683 box-sizing: border-box;
@@ -811,11 +684,13 @@
811 684 }
812 685
813 686 #form_settings_page #frm_adv_info {
814 687 display: none;
688 + position: absolute;
815 689 top: 0;
816 - width: 310px;
817 - max-height: 315px;
690 + left: 0;
691 + width: 300px;
692 + max-height: 350px;
818 693 min-height: 200px;
819 694 overflow-y: scroll;
820 695 z-index: 100;
821 696 }
@@ -826,14 +701,10 @@
826 701 width: var(--small-sidebar);
827 702 min-width: var(--small-sidebar);
828 703 }
829 704
830 -#form_global_settings .frm_grid_container {
831 - gap: 0 var(--gap-md);
832 -}
833 -
834 705 .frm-inner-content {
835 - padding: var(--gap-md);
706 + padding: 10px 25px;
836 707 }
837 708
838 709 .post-type-frm_display #poststuff {
839 710 padding: 0 0 10px 40px;
@@ -899,17 +770,18 @@
899 770 }
900 771
901 772 .frm-right-panel .frm_field_list #frm-insert-fields {
902 773 max-height: none;
903 - font-size: var(--text-sm);
774 + font-size: 14px;
904 775 padding: 0;
905 776 }
906 777
907 -.frm-nav-tabs {
778 +.frm-nav-tabs,
779 +#frm-bulk-modal h2 {
908 780 margin: 10px 0 20px;
909 - padding: 0 var(--gap-sm);
781 + padding: 0 15px;
910 782 display: block;
911 - border-bottom: 1px solid var(--grey-300);
783 + border-bottom: 2px solid var(--sidebar-hover);
912 784 }
913 785
914 786 #frm-nav-tabs {
915 787 position: -webkit-sticky;
@@ -920,20 +792,11 @@
920 792 margin-top: 0;
921 793 padding-top: 5px;
922 794 }
923 795
924 -.frm_form_settings #frm_adv_info #frm-nav-tabs {
925 - background-color: #fff;
926 - margin: 0 -4px;
927 -}
928 -
929 -.frm_form_settings span.frm-with-right-icon {
930 - display: block;
931 -}
932 -
933 796 .frm-inline-modal .frm-nav-tabs,
934 797 #frm_adv_info .frm-nav-tabs {
935 - margin: 5px 0 0;
798 + margin: 5px 0 10px;
936 799 }
937 800
938 801 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
939 802 padding-right: 0;
@@ -939,25 +802,23 @@
939 802 padding-right: 0;
940 803 padding-left: 20px;
941 804 }
942 805
806 +#frm-bulk-modal h2,
943 807 .frm-nav-tabs li {
944 808 display: inline-block;
809 + font-size: 15px;
945 810 margin: 0;
946 811 }
947 812
813 +#frm-bulk-modal h2,
948 814 .frm-nav-tabs a {
949 - color: var(--grey-700);
815 + color: var(--dark-grey);
950 816 padding: 10px 1px;
951 817 margin: 0 9px;
952 818 border-bottom: 2px solid transparent;
953 819 }
954 820
955 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
956 - padding: 5px 1px;
957 - color: var(--grey-500);
958 -}
959 -
960 821 .frm-nav-tabs.frm-compact-nav a {
961 822 margin: 0 5px;
962 823 }
963 824
@@ -966,37 +827,33 @@
966 827 opacity: .9;
967 828 }
968 829
969 830 #frm_adv_info .frm-nav-tabs a {
970 - color: var(--grey-700);
831 + color: var(--dark-grey);
971 832 }
972 833
834 +#frm-bulk-modal h2,
973 835 .frm-nav-tabs a:hover,
974 836 .frm-nav-tabs .frm-tabs a {
975 - color: var(--primary-500) !important;
976 - border-color: var(--primary-500);
837 + color: var(--primary-color) !important;
838 + border-color: var(--primary-color);
977 839 }
978 840
979 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
980 - font-weight: 500;
841 +#frm-bulk-modal h3,
842 +#frm-bulk-modal h2 {
843 + font-size: 16px;
844 + margin-left: 20px;
845 + font-weight: 400;
981 846 }
982 847
983 -#frm-bulk-modal .howto,
984 848 #frm-bulk-modal h3 {
985 - font-size: var(--text-sm);
986 - font-weight: 400;
987 - margin: 5px 0 10px;
849 + margin: 5px 20px 10px;
988 850 color: var(--grey);
989 851 }
990 852
991 -#frm-bulk-modal h3 {
992 - margin-left: 20px;
993 -}
994 -
995 -.frm-right-panel a.frm_add_logic_link,
996 853 .frm-right-panel h3 {
997 - color: var(--grey-700);
998 - font-size: var(--text-lg);
854 + color: var(--dark-grey);
855 + font-size: 20px;
999 856 font-weight: 400;
1000 857 border-top: 2px solid var(--sidebar-hover);
1001 858 margin: 0;
1002 859 }
@@ -1006,17 +863,10 @@
1006 863 border-top: none;
1007 864 padding-top: 0 !important;
1008 865 }
1009 866
1010 -.frm-flex-justify,
1011 -.frm-right-panel .frm-single-settings h3 {
1012 - display: flex;
1013 - justify-content: space-between;
1014 - align-items: center;
1015 -}
1016 -
1017 867 .frm-right-panel h3 i {
1018 - color: var(--grey-700);
868 + color: var(--dark-grey);
1019 869 float: right;
1020 870 width: 16px;
1021 871 cursor: pointer;
1022 872 }
@@ -1078,12 +928,8 @@
1078 928 .frm_wrap #frm-categorydiv {
1079 929 border-right: none;
1080 930 }
1081 931
1082 -#frm_adv_info #frm-conditionals {
1083 - padding-top: var(--gap-sm);
1084 -}
1085 -
1086 932 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1087 933 display: none;
1088 934 max-height: none;
1089 935 }
@@ -1091,49 +937,12 @@
1091 937 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1092 938 position: relative;
1093 939 }
1094 940
1095 -/* Admin footer */
1096 -.frm-white-body #footer-upgrade {
941 +.toplevel_page_formidable #footer-upgrade {
1097 942 display: none;
1098 943 }
1099 944
1100 -.frm-admin-footer-links,
1101 -.frm-admin-footer-links-nav,
1102 -.frm-admin-footer-links-socials {
1103 - display: flex;
1104 - justify-content: center;
1105 -}
1106 -
1107 -.frm-admin-footer-links {
1108 - gap: var(--gap-2xs);
1109 - flex-direction: column;
1110 - text-align: center;
1111 - padding: var(--gap-xl) 0 var(--gap-lg) 160px;
1112 - font-size: var(--text-xs);
1113 - color: var(--grey-400);
1114 -}
1115 -
1116 -body.rtl .frm-admin-footer-links {
1117 - padding-left: unset;
1118 - padding-right: 160px;
1119 -}
1120 -
1121 -
1122 -.frm-admin-footer-links-nav {
1123 - gap: var(--gap-2xs);
1124 - margin-bottom: var(--gap-xs);
1125 -}
1126 -
1127 -.frm-admin-footer-links-socials {
1128 - gap: var(--gap-xs);
1129 -}
1130 -
1131 -.frm-admin-footer-links-socials a {
1132 - color: var(--grey-400);
1133 -}
1134 -/* End Admin footer */
1135 -
1136 945 .frm_list_entry_page h2 {
1137 946 float: left;
1138 947 }
1139 948
@@ -1140,8 +949,13 @@
1140 949 .frm_list_entry_page h2 + .error {
1141 950 clear: both;
1142 951 }
1143 952
953 +#titlediv #title {
954 + line-height: 1.5;
955 + height: auto;
956 +}
957 +
1144 958 .frm_sidebar select {
1145 959 width: 100%;
1146 960 margin-left: 0;
1147 961 margin-right: 0;
@@ -1178,12 +992,14 @@
1178 992
1179 993 /* Buttons */
1180 994
1181 995 .frm_orange_button,
1182 -.frm_reverse_button {
996 +.frm_reverse_button,
997 +.post-type-frm_display .wrap .add-new-h2 {
1183 998 font-size: 12px;
1184 999 border: 1px solid var(--orange);
1185 1000 color: var(--orange);
1001 + line-height: 1.4;
1186 1002 font-weight: 600;
1187 1003 padding: 1px 4px;
1188 1004 border-radius: 4px;
1189 1005 background: transparent;
@@ -1188,11 +1004,33 @@
1188 1004 border-radius: 4px;
1189 1005 background: transparent;
1190 1006 }
1191 1007
1008 +.post-type-frm_display .wrap .add-new-h2 {
1009 + margin: 1px 0 0 10px;
1010 + text-transform: lowercase;
1011 + position: initial;
1012 + vertical-align: middle;
1013 +}
1014 +
1015 +h1 .frm-button-secondary,
1016 +h1 .frm-button-primary,
1017 +h2 .frm-button-secondary,
1018 +h2 .frm-button-primary {
1019 + font-size: 14px !important;
1020 + font-weight: normal;
1021 + margin: 0 5px !important;
1022 + line-height: 23px !important;
1023 + vertical-align: text-bottom !important;
1024 + height: auto !important;
1025 +}
1026 +
1192 1027 .frm_reverse_button:hover,
1193 1028 .frm_reverse_button:active,
1194 -.frm_reverse_button:focus {
1029 +.frm_reverse_button:focus,
1030 +.post-type-frm_display .wrap .add-new-h2:hover,
1031 +.post-type-frm_display .wrap .add-new-h2:active,
1032 +.post-type-frm_display .wrap .add-new-h2:focus {
1195 1033 color: #fff;
1196 1034 background: var(--orange);
1197 1035 border: 1px solid var(--orange);
1198 1036 }
@@ -1203,108 +1041,42 @@
1203 1041 }
1204 1042
1205 1043 .frm-button-primary,
1206 1044 .wp-core-ui .button-primary.frm-button-primary,
1207 -.wp-core-ui .button.frm-button-primary,
1208 1045 .frm-button-secondary,
1209 1046 .wp-core-ui .button-secondary.frm-button-secondary,
1210 1047 .wp-core-ui .button.frm-button-secondary,
1211 -.frm-white-body .frm-search .button,
1212 -.frm-white-body .search-box .button, /* Views */
1213 -.frm-white-body .tablenav .button,
1214 1048 .frm_orange_button,
1215 1049 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1050 +#form_global_settings .button-secondary,
1216 1051 .wp-core-ui.frm-white-body .button-primary,
1217 1052 .wp-core-ui.frm-white-body .button-secondary,
1218 1053 .frm-white-body .button-primary,
1219 1054 .frm-white-body .button-secondary,
1220 -#frm-form-button button,
1221 -.frm-preview-buttons button,
1222 -.frm-button-red,
1223 -.frm-button-tertiary {
1055 +.wp-core-ui.frm-white-body .button:not(.button-small),
1056 +.frm-white-body button:not(.wp-switch-editor):not(.dropdown-toggle):not(.media-menu-item):not(.media-modal-close):not(.frm_no_style_button){
1224 1057 text-shadow: none;
1225 1058 box-shadow: none;
1226 1059 border-radius: 30px;
1227 - border: 1px solid var(--primary-500);
1228 - font-size: var(--text-sm);
1060 + border-color: var(--primary-color);
1061 + font-size: 1em;
1229 1062 transition: all .2s ease;
1230 - padding: 7px 16px;
1231 - height: auto;
1063 + padding: 0 15px;
1064 + height: 28px;
1232 1065 min-height: 28px;
1233 1066 outline: none;
1234 - line-height: var(--leading);
1235 - box-sizing: border-box;
1236 - font-weight: 500;
1237 - margin-bottom: 0;
1238 - display: inline-block;
1067 + line-height: 26px;
1239 1068 }
1240 1069
1241 -.frm-button-tertiary {
1242 - border-color: transparent;
1243 - color: var(--primary-500);
1244 -}
1245 -
1246 -.frm-button-red,
1247 -.frm-button-red:focus {
1248 - color: #fff !important;
1249 - --primary-500: var(--error-500);
1250 - --primary-700: var(--error-700);
1251 -}
1252 -
1253 -.frm-white-body h2 .button,
1254 -.post-type-frm_display h2 .frm-button-primary,
1255 -.frm-white-body .tablenav .button,
1256 -.frm-button-primary.frm-button-sm,
1257 -.frm-button-secondary.frm-button-sm,
1258 -.frm-button-tertiary.frm-button-sm,
1259 -.frm-button-red.frm-button-sm {
1260 - padding: 4px 12px !important;
1261 - font-size: var(--text-xs) !important;
1262 -}
1263 -
1264 -.frm_no_style_button {
1265 - background: transparent;
1266 -}
1267 -
1268 -.frm-with-icon {
1269 - display: flex;
1270 - gap: var(--gap-xs);
1271 - align-items: center;
1272 -}
1273 -
1274 -.frm-with-icon svg {
1275 - opacity: .65; /* Get close to grey-500 without overriding hover colors */
1276 -}
1277 -
1278 -.frm-with-icon.button svg {
1279 - height: var(--text-sm);
1280 - width: var(--text-sm);
1281 -}
1282 -
1283 -.frm-with-icon.frm-button-sm svg {
1284 - height: var(--text-xs);
1285 - width: var(--text-xs);
1286 -}
1287 -
1288 -.frm-white-body .button.add_media {
1289 - /* Media buttons above RTE */
1290 - padding-left: 12px !important;
1291 - padding-right: 12px !important;
1292 - font-size: var(--text-xs);
1293 - border-radius: var(--border-radius);
1294 -}
1295 -
1296 1070 .wp-core-ui.frm-white-body #post-query-submit.button,
1297 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1298 1071 .wp-core-ui.frm-white-body .button.first-page,
1299 1072 .wp-core-ui.frm-white-body .button.prev-page,
1300 1073 .wp-core-ui.frm-white-body .button.next-page,
1301 1074 .wp-core-ui.frm-white-body .button.last-page,
1302 1075 .wp-core-ui.frm-white-body .button.action {
1303 - background-color: transparent;
1304 - border-color: var(--grey-300);
1305 - color: var(--grey-700);
1306 - border-radius: var(--border-radius);
1076 + background-color: var(--lightest-grey);
1077 + border-color: var(--grey-border);
1078 + color: var(--dark-grey);
1307 1079 }
1308 1080
1309 1081 .post-type-frm_display.wp-core-ui .button-primary,
1310 1082 .frm-button-primary,
@@ -1309,16 +1081,16 @@
1309 1081 .post-type-frm_display.wp-core-ui .button-primary,
1310 1082 .frm-button-primary,
1311 1083 .wp-core-ui .button-primary.frm-button-primary,
1312 1084 .frm_single_entry_page .button-primary {
1313 - background-color: var(--primary-500) !important;
1085 + background-color: var(--primary-color) !important;
1314 1086 color: #fff !important;
1315 1087 }
1316 1088
1317 1089 .frm-button-primary.frm_large{
1318 - font-size: var(--text-md) !important;
1090 + font-size: 22px !important;
1319 1091 height: auto !important;
1320 - padding: 9px 18px !important;
1092 + padding: 16px 32px !important;
1321 1093 }
1322 1094
1323 1095 .frm-button-primary i:before {
1324 1096 color: #fff;
@@ -1325,10 +1097,10 @@
1325 1097 }
1326 1098
1327 1099 .wp-core-ui .button-primary.frm-button-primary:hover,
1328 1100 .frm-button-primary:hover {
1329 - background: var(--primary-700) !important;
1330 - border-color: var(--primary-700) !important;
1101 + background: var(--primary-hover) !important;
1102 + border-color: var(--primary-hover) !important;
1331 1103 }
1332 1104
1333 1105 .wp-core-ui .button-primary.frm-button-primary:active {
1334 1106 vertical-align: inherit;
@@ -1333,25 +1105,20 @@
1333 1105 .wp-core-ui .button-primary.frm-button-primary:active {
1334 1106 vertical-align: inherit;
1335 1107 }
1336 1108
1337 -.frm-white-body #search-submit,
1338 1109 #frm-form-button .frm_button_submit,
1339 -.frm-white-body .frm-preview-buttons button,
1340 -.frm-white-body .button:not(.frm-button-primary),
1341 1110 .wp-core-ui.frm-white-body .button-secondary,
1342 1111 .wp-core-ui .button-secondary.frm-button-secondary,
1343 1112 .wp-core-ui .button.frm-button-secondary,
1344 -.frm-white-body .frm-button-secondary,
1345 1113 .frm-button-secondary {
1346 - color: var(--grey-800);
1347 - border-color: var(--grey-300);
1348 - background-color: #fff;
1114 + color: var(--primary-color);
1115 + background-color: transparent;
1349 1116 }
1350 1117
1351 1118 #wp-content-media-buttons button,
1352 1119 #wp-content-media-buttons a.button {
1353 - border-color: var(--grey-300);
1120 + border-color: var(--grey-border);
1354 1121 }
1355 1122
1356 1123 .frm_orange_button {
1357 1124 border-color: #da791d !important;
@@ -1358,23 +1125,26 @@
1358 1125 background: var(--orange);
1359 1126 color: #fff;
1360 1127 }
1361 1128
1362 -.frm-white-body .button:not(.frm-button-primary):focus,
1363 -.frm-white-body .button:not(.frm-button-primary):active,
1364 -.frm-white-body .frm-button-secondary:hover,
1365 1129 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1366 1130 .wp-core-ui.frm-white-body .button-secondary:hover,
1367 1131 .wp-core-ui.frm-white-body .button-secondary:focus,
1368 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1369 1132 .frm_wrap .preview > .button:hover {
1370 - border-color: var(--grey-300) !important;
1371 - color: var(--grey-800);
1372 - background: var(--grey-50) !important;
1373 - box-shadow: none !important;
1374 - outline: none !important;
1133 + border-color: var(--primary-hover) !important;
1134 + background: var(--primary-hover) !important;
1135 + color: #fff;
1136 + box-shadow: none;
1375 1137 }
1376 1138
1139 +.frm-with-plus {
1140 + padding-left: 10px !important;
1141 +}
1142 +
1143 +.frm-with-plus .frmsvg {
1144 + margin-right: 5px;
1145 +}
1146 +
1377 1147 .frm-button-primary .frmsvg {
1378 1148 color: #fff;
1379 1149 }
1380 1150
@@ -1381,20 +1151,23 @@
1381 1151 .frm_wrap .preview i {
1382 1152 font-size: inherit;
1383 1153 }
1384 1154
1385 -.frm-white-body .frm-button-primary:focus,
1386 -.frm-white-body .frm-button-primary:active,
1155 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1156 +.frm_wrap .preview > .button:hover .frmsvg,
1157 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1158 +.frm_wrap .preview > .button:hover i {
1159 + color: #fff;
1160 +}
1161 +
1387 1162 #frm-addons-page .button-primary:focus,
1388 1163 #form_global_settings .button-primary:focus,
1389 -#frm_upgrade_modal .button:focus {
1390 - border-color: var(--primary-700) !important;
1391 - background-color: var(--primary-700) !important;
1392 - box-shadow: none !important;
1393 - outline: none !important;
1164 +#frm_upgrade_modal .button:focus,
1165 +.frm_wrap .preview > .button:focus {
1166 + border-color: var(--primary-hover) !important;
1167 + outline: none;
1394 1168 }
1395 1169
1396 -.frm_wrap .preview > .button:focus,
1397 1170 .frm_orange_button:hover,
1398 1171 .frm_orange_button:focus,
1399 1172 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1400 1173 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1442,9 +1215,9 @@
1442 1215 }
1443 1216
1444 1217 .frm-review-notice.notice form,
1445 1218 .frm-review-notice.notice p {
1446 - font-size: var(--text-sm);
1219 + font-size: 14px;
1447 1220 max-width: 600px;
1448 1221 margin-left: auto;
1449 1222 margin-right: auto;
1450 1223 }
@@ -1449,14 +1222,17 @@
1449 1222 margin-right: auto;
1450 1223 }
1451 1224
1452 1225 .frm-review-notice a {
1453 - margin: 0 var(--gap-xs) !important;
1226 + margin: 5px;
1454 1227 }
1455 1228
1456 1229 .frm-review-notice .frm-button-primary,
1457 1230 .frm-review-notice .frm-button-secondary {
1458 1231 min-width: 100px;
1232 + display: inline-block;
1233 + text-align: center;
1234 + padding: 2px 10px;
1459 1235 }
1460 1236
1461 1237 .frm-review-notice p > span {
1462 1238 font-size: 13px;
@@ -1463,9 +1239,9 @@
1463 1239 opacity: 0.75;
1464 1240 }
1465 1241
1466 1242 #frmapi-feedback {
1467 - margin-top: var(--gap-lg);
1243 + margin-top: 30px;
1468 1244 }
1469 1245
1470 1246 .frm-review-notice .frm_error,
1471 1247 .frm-review-notice label {
@@ -1473,112 +1249,12 @@
1473 1249 text-align: left;
1474 1250 }
1475 1251
1476 1252 .frm-review-notice label {
1477 - font-size: var(--text-sm);
1253 + font-size: 14px;
1478 1254 }
1479 1255
1480 -.frm-floating-success-message {
1481 - border-radius: 4px;
1482 - right: 10px !important;
1483 - bottom: 10px !important;
1484 -}
1485 -
1486 1256 /* Generic Classes */
1487 -.frm_no_margin, /* deprecated */
1488 -.frm-m-0 {
1489 - margin: 0 !important;
1490 -}
1491 -
1492 -.frm-m-12 {
1493 - margin: var(--gap-2xl);
1494 -
1495 -}
1496 -
1497 -.frm_no_top_margin, /* deprecated */
1498 -.frm-mt-0 {
1499 - margin-top: 0 !important;
1500 -}
1501 -
1502 -.frm_no_bottom_margin, /* deprecated */
1503 -.frm-mb-0 {
1504 - margin-bottom: 0 !important;
1505 -}
1506 -
1507 -.frm-mb-sm {
1508 - margin-bottom: var(--gap-sm) !important;
1509 -}
1510 -
1511 -.frm-mb-md {
1512 - margin-bottom: var(--gap-md) !important;
1513 -}
1514 -
1515 -.frm-mb-lg {
1516 - margin-bottom: var(--gap-lg) !important;
1517 -}
1518 -
1519 -.frm-mx-sm {
1520 - margin-left: var(--gap-sm) !important;
1521 - margin-right: var(--gap-sm) !important;
1522 -}
1523 -
1524 -.frm-p-1 {
1525 - padding: 4px;
1526 -}
1527 -
1528 -.frm-p-4 {
1529 - padding: var(--gap-sm);
1530 -}
1531 -
1532 -.frm-p-6 {
1533 - padding: var(--gap-md);
1534 -}
1535 -
1536 -.frm-text-md {
1537 - font-size: var(--text-md);
1538 -}
1539 -
1540 -.frm-text-lg {
1541 - font-size: var(--text-lg);
1542 -}
1543 -
1544 -.frm-text-xl {
1545 - font-size: var(--text-xl);
1546 -}
1547 -
1548 -.frm-w-auto {
1549 - width: auto !important;
1550 -}
1551 -
1552 -.frm-w-full {
1553 - width: 100% !important;
1554 -}
1555 -
1556 -.frm-flex-box {
1557 - display: flex;
1558 - gap: var(--gap-sm);
1559 -}
1560 -
1561 -.frm-gap-xs {
1562 - gap: var(--gap-xs);
1563 -}
1564 -
1565 -.frm-gap-sm {
1566 - gap: var(--gap-sm);
1567 -}
1568 -
1569 -.frm-gap-md {
1570 - gap: var(--gap-md);
1571 -}
1572 -
1573 -.frm-justify-between {
1574 - justify-content: space-between;
1575 -}
1576 -
1577 -.frm-transition-ease {
1578 - transition: all .2s ease;
1579 -}
1580 -
1581 1257 .frm_invisible {
1582 1258 visibility: hidden;
1583 1259 transition: all .2s ease;
1584 1260 }
@@ -1586,10 +1262,10 @@
1586 1262 .frm_no_float {
1587 1263 float: none;
1588 1264 }
1589 1265
1590 -.frm_block, /* deprecated */
1591 -.frm-block {
1266 +.frm_block,
1267 +.frm_no_section_fields.frm_block {
1592 1268 display: block;
1593 1269 }
1594 1270
1595 1271 .frm_inline {
@@ -1599,81 +1275,81 @@
1599 1275 .frm_inline_block {
1600 1276 display: inline-block !important;
1601 1277 }
1602 1278
1279 +.frm-lookup-modal .dismiss,
1280 +.frm-right-panel .inside a.frm_hidden,
1281 +ul.frm_form_nav > li.frm_hidden,
1282 +a.frm_hidden,
1283 +.button.frm_hidden,
1284 +.wp-core-ui .button.frm_hidden,
1603 1285 .frm_hidden {
1604 1286 display: none;
1605 1287 }
1606 1288
1607 -.frm-text-right {
1608 - text-align: right;
1289 +.frm_no_margin {
1290 + margin: 0;
1609 1291 }
1610 1292
1611 -.frm-border-b {
1612 - border-bottom: 1px solid var(--grey-300);
1293 +.frm_no_top_margin {
1294 + margin-top: 0 !important;
1613 1295 }
1614 1296
1615 -.frm-no-border {
1616 - border: none !important;
1297 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1298 +.frm_no_bottom_margin {
1299 + margin-bottom: 0 !important;
1617 1300 }
1618 1301
1619 -.frm-opacity-100 {
1620 - opacity: 1;
1302 +.frm_tiny_top_margin {
1303 + margin-top: 1px;
1621 1304 }
1622 1305
1623 -.frm-on-bottom {
1624 - z-index: -1;
1306 +.frm_small_top_margin {
1307 + margin-top: 5px;
1625 1308 }
1626 -/* End Generic Classes, Start Forced Generic Classes */
1627 1309
1628 -.frm-fields p > label.frm_hidden,
1629 -.frm-lookup-modal .dismiss,
1630 -.frm-right-panel .inside a.frm_hidden,
1631 -#form_global_settings .frm_hidden,
1632 -ul.frm_form_nav > li.frm_hidden,
1633 -a.frm_hidden,
1634 -.button.frm_hidden,
1635 -.wp-core-ui .button.frm_hidden {
1636 - display: none;
1310 +.frm_cursor_pointer {
1311 + cursor: pointer;
1637 1312 }
1638 1313
1639 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1640 - margin-bottom: 0 !important;
1314 +.frm_right_text {
1315 + text-align: right;
1641 1316 }
1642 1317
1643 -.frm_no_section_fields.frm_block {
1644 - display: block;
1318 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1319 + opacity: 1;
1645 1320 }
1646 1321
1322 +.frm_med_padding {
1323 + padding: 10px;
1324 +}
1325 +
1647 1326 .actions.frm_visible_overflow {
1648 1327 overflow: visible !important;
1649 1328 }
1650 1329
1651 -.frm_full_opacity, /* deprecated */
1652 -.frm_submit .frm_full_opacity,
1653 -.frm_submit .frm-opacity-100 {
1654 - opacity: 1;
1655 -}
1656 -
1657 1330 .frm-dropdown-menu.frm-on-top {
1658 1331 z-index: 99999;
1659 1332 }
1660 1333
1661 -/* End Forced Generic Classes */
1334 +.frm-on-bottom {
1335 + z-index: -1;
1336 +}
1662 1337
1663 1338 .frm_forms.with_frm_style {
1664 1339 max-width: 100%;
1665 1340 }
1666 1341
1342 +.post-type-frm_display .wrap > #posts-filter,
1667 1343 .post-type-frm_display .wrap > .subsubsub,
1668 1344 .post-type-frm_display .wrap > .icl_subsubsub,
1669 1345 .frm_form_settings > p {
1670 - margin: 6px var(--gap-md);
1346 + margin: 6px 40px;
1671 1347 padding: 0;
1672 1348 }
1673 1349
1674 1350 .frm-entry-container {
1675 - margin: 0 40px 40px;
1351 + margin: 20px 40px 40px;
1676 1352 padding: 0;
1677 1353 }
1678 1354
1679 1355 #form_reports_page .frm-inner-content {
@@ -1687,24 +1363,24 @@
1687 1363 clear: both;
1688 1364 }
1689 1365
1690 1366 .post-type-frm_display h2,
1691 -.frm_wrap h2 {
1692 - margin-top: 0 !important;
1693 - font-size: var(--text-lg);
1694 - line-height: var(--leading);
1367 +.frm_page_container h2 {
1368 + margin: 10px 0 !important;
1369 + color: var(--medium-grey);
1370 + font-weight: 500;
1371 + font-size: 19px;
1695 1372 }
1696 1373
1697 1374 .post-type-frm_display .wrap > h2:first-child,
1698 -.frm_wrap .wrap > h2:first-child {
1699 - padding-top: 0;
1375 +.frm_page_container .wrap > h2:first-child {
1700 1376 margin-top: 0 !important;
1701 - font-size: var(--text-lg);
1377 + font-size: 22px;
1702 1378 }
1703 1379
1704 1380 #frm_form_editor_container {
1705 1381 position: relative;
1706 - margin-top: 28px;
1382 + margin: 25px 50px 50px;
1707 1383 }
1708 1384
1709 1385 .form-field p {
1710 1386 /* for conflicts */
@@ -1717,30 +1393,21 @@
1717 1393 float: none;
1718 1394 width: auto;
1719 1395 }
1720 1396
1721 -#frm_view_editor_left label, /* Views */
1722 -#frm_view_editor_left .frm_primary_label, /* Views */
1723 -.frm-dialog .frm-sub-label,
1724 -.frm-dialog label,
1725 -.dropdown .frm_primary_label,
1726 1397 .accordion-container label,
1727 1398 .frm-fields td > label,
1728 1399 .frm-fields td > div > label,
1729 -.frm_form_field > label:first-child,
1730 1400 .frm-fields p > label,
1731 -.frm_on_submit_type > label,
1732 1401 .post-type-frm_display .frm_form_field > label,
1733 1402 #new_fields .frm_primary_label,
1734 -#form_global_settings .frm_primary_label,
1735 1403 #frm_form_editor_container .frm_primary_label {
1736 - color: var(--grey-700);
1404 + color: var(--dark-grey);
1737 1405 margin: 0 0 3px;
1738 1406 padding: 0;
1739 1407 width: auto;
1740 - font-size: var(--text-sm);
1408 + font-size: 14px;
1741 1409 display: block;
1742 - line-height: var(--leading);
1743 1410 }
1744 1411
1745 1412 .frm-fields td input + label {
1746 1413 display: inline;
@@ -1758,9 +1425,9 @@
1758 1425 .with_frm_style form .form-field {
1759 1426 margin-bottom: 20px;
1760 1427 }
1761 1428
1762 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1429 +.with_frm_style form .frm_combo_inputs_container > .form-field {
1763 1430 margin-bottom: 0;
1764 1431 }
1765 1432
1766 1433 .frm_description,
@@ -1775,18 +1442,11 @@
1775 1442 color: inherit;
1776 1443 }
1777 1444
1778 1445 #frm_form_editor_container .divider_section_only .frm_primary_label {
1779 - display: flex;
1780 - align-items: center;
1781 - gap: var(--gap-xs);
1782 1446 font-size: 20px;
1783 1447 }
1784 1448
1785 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1786 - padding: 0;
1787 -}
1788 -
1789 1449 form .form-field.frm_field_loading {
1790 1450 margin-bottom: 0;
1791 1451 min-height: 0;
1792 1452 padding: 0;
@@ -1874,8 +1534,14 @@
1874 1534 max-width: 700px;
1875 1535 margin: 20px auto !important;
1876 1536 }
1877 1537
1538 +.upgrade_to_pro h1,
1539 +.upgrade_to_pro h3,
1540 +.upgrade_to_pro {
1541 + color: #444;
1542 +}
1543 +
1878 1544 .upgrade_to_pro .error {
1879 1545 display: none;
1880 1546 }
1881 1547
@@ -1885,19 +1551,19 @@
1885 1551 }
1886 1552
1887 1553 .frm_error_style,
1888 1554 .frm_warning_style,
1889 -.frm_note_style,
1890 1555 .frm_message,
1891 1556 #post-body-content .frm_updated_message,
1892 1557 div.frm_updated_message {
1893 - border-radius: var(--small-radius);
1894 - background-color: #D5F2DC;
1895 - color: #1E561F;
1896 - padding: var(--gap-sm) var(--gap-md);
1897 - font-size: var(--text-sm);
1898 - margin: var(--gap-sm) 0;
1899 - text-align: left;
1558 + border-radius: var(--border-radius);
1559 + border: 1px solid #D6E9C6;
1560 + background-color: #DFF0D8;
1561 + color: #468847;
1562 + padding: 5px 25px;
1563 + font-size: 14px;
1564 + margin: 5px 0 15px;
1565 + text-align: center;
1900 1566 }
1901 1567
1902 1568 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1903 1569 display: inline-block;
@@ -1908,20 +1574,21 @@
1908 1574 #post-body-content > .frm_updated_message {
1909 1575 margin: 5px 65px;
1910 1576 }
1911 1577
1912 -#form_global_settings #post-body-content > .frm_updated_message,
1913 -#form_global_settings #post-body-content > .frm_warning_style {
1578 +#form_global_settings .frm_updated_message {
1914 1579 margin: 5px 25px;
1915 1580 }
1916 1581
1917 1582 .frm_error_style {
1918 1583 color: #973937;
1919 - background-color: #EBCCCC;
1584 + border-color: #F2DEDE;
1585 + background-color: #F2DEDE;
1920 1586 clear: both;
1921 1587 }
1922 1588
1923 1589 .frm_error_style a {
1590 + color: #973937;
1924 1591 text-decoration: underline;
1925 1592 font-weight: 600;
1926 1593 }
1927 1594
@@ -1929,10 +1596,14 @@
1929 1596 opacity: .7;
1930 1597 }
1931 1598
1932 1599 .frm_warning_style {
1933 - color: #7A4D05;
1934 - background-color: #FFF2D2;
1600 + color: #8B6E3C;
1601 + border-color: #FBECCD;
1602 + background-color: #FDF9E3;
1603 + border-radius: 10px;
1604 + text-align: left;
1605 + padding-top: 5px;
1935 1606 }
1936 1607
1937 1608 .frm_warning_heading{
1938 1609 font-weight: bold;
@@ -1938,61 +1609,8 @@
1938 1609 font-weight: bold;
1939 1610 margin-bottom:4px;
1940 1611 }
1941 1612
1942 -/* Warning message dismiss */
1943 -.frm_warning_style {
1944 - position: relative;
1945 - padding-right: calc(var(--gap-md) + 15px);
1946 -}
1947 -
1948 -body.rtl .frm_warning_style {
1949 - padding-right: var(--gap-md);
1950 - padding-left: calc(var(--gap-md) + 15px);
1951 -}
1952 -
1953 -.frm-warning-dismiss {
1954 - position: absolute;
1955 - top: 10px;
1956 - right: 10px;
1957 - display: flex;
1958 - cursor: pointer;
1959 - transition: opacity 0.2s ease-out;
1960 -}
1961 -
1962 -body.rtl .frm-warning-dismiss {
1963 - left: 10px;
1964 - right: auto;
1965 -}
1966 -
1967 -.frm-warning-dismiss:hover {
1968 - opacity: 0.8;
1969 -}
1970 -
1971 -.frm-warning-dismiss.frmsvg,
1972 -.frm-warning-dismiss.frmsvg svg {
1973 - width: 15px;
1974 - height: 15px;
1975 -}
1976 -
1977 -.frm_note_style {
1978 - background: rgba(188, 224, 253, 0.23);
1979 - color: var(--grey-700);
1980 -}
1981 -
1982 -.frm-banner-alert {
1983 - text-align: left;
1984 - margin: 0;
1985 - border-radius: 0;
1986 - padding: 10px 0 10px 40px;
1987 -}
1988 -
1989 -.frm-banner-alert a {
1990 - color: var(--primary-500);
1991 - font-weight: 400;
1992 - text-decoration: none;
1993 -}
1994 -
1995 1613 .frm_updated_message ul,
1996 1614 .frm_updated_message li,
1997 1615 .frm_warning_style ul,
1998 1616 .frm_warning_style li,
@@ -2001,24 +1619,57 @@
2001 1619 margin: 0;
2002 1620 }
2003 1621
2004 1622 .frm-inline-message {
2005 - border: 1px solid var(--primary-700);
1623 + border: 1px solid var(--primary-hover);
2006 1624 border-radius: var(--small-radius);
2007 - color: var(--primary-700);
1625 + color: var(--primary-hover);
2008 1626 background: #fff;
2009 1627 text-align: center;
2010 1628 padding: 20px;
2011 - font-size: var(--text-sm);
2012 - line-height: var(--leading);
1629 + font-size: 14px;
1630 + line-height: 1.4em;
2013 1631 }
2014 1632
2015 1633 .frm-inline-message a {
2016 - text-decoration: underline;
2017 1634 font-weight: 600;
2018 - color: var(--primary-700);
1635 + color: var(--primary-hover);
2019 1636 }
2020 1637
1638 +.frm_ribbon {
1639 + -webkit-transform: rotate(45deg);
1640 + -moz-transform: rotate(45deg);
1641 + -ms-transform: rotate(45deg);
1642 + -o-transform: rotate(45deg);
1643 + transform: rotate(45deg);
1644 + border: 25px solid transparent;
1645 + border-bottom: 25px solid var(--orange);
1646 + position: absolute;
1647 + top: -31px;
1648 + right: -74px;
1649 + padding: 0px 10px;
1650 + width: 30px;
1651 + color: white;
1652 + font-family: sans-serif;
1653 + size: 11px;
1654 +}
1655 +
1656 +.plugin-card-top .frm_ribbon {
1657 + right: -33px;
1658 + top: -28px;
1659 +}
1660 +
1661 +.frm_ribbon span {
1662 + position: absolute;
1663 + left: 25px;
1664 + font-size: 15px;
1665 + top: 4px;
1666 +}
1667 +
1668 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1669 + display: none;
1670 +}
1671 +
2021 1672 .frm_pro_heading span {
2022 1673 margin-top: 10px;
2023 1674 }
2024 1675
@@ -2027,14 +1678,15 @@
2027 1678 }
2028 1679
2029 1680 .frm-yes {
2030 1681 color: var(--green);
2031 - font-size: var(--text-xl);
1682 + font-size: 21px;
1683 + font-weight: 500;
2032 1684 }
2033 1685
2034 1686 .frm-nope {
2035 - color: var(--grey-400);
2036 - font-size: var(--text-xl);
1687 + color: #d2e0f2;
1688 + font-size: 21px;
2037 1689 }
2038 1690
2039 1691 .upgrade_to_pro a {
2040 1692 color: var(--orange);
@@ -2040,10 +1692,10 @@
2040 1692 color: var(--orange);
2041 1693 }
2042 1694
2043 1695 .upgrade_to_pro table .frmsvg {
2044 - height: var(--text-xl);
2045 - width: var(--text-xl);
1696 + height: 20px;
1697 + width: 20px;
2046 1698 }
2047 1699
2048 1700 .upgrade_to_pro table.widefat {
2049 1701 background-color: #fff;
@@ -2049,14 +1701,12 @@
2049 1701 background-color: #fff;
2050 1702 border-collapse: collapse;
2051 1703 }
2052 1704
2053 -.frm-white-body .upgrade_to_pro table th,
1705 +.upgrade_to_pro table th,
2054 1706 .upgrade_to_pro table td {
2055 1707 padding: 10px 15px;
2056 - border: 1px solid var(--grey-300);
2057 - line-height: var(--leading);
2058 - font-size: var(--text-sm);
1708 + border: 1px solid #d2e0f2;
2059 1709 }
2060 1710
2061 1711 .upgrade_to_pro table th.frmcenter {
2062 1712 text-align: center;
@@ -2062,9 +1712,9 @@
2062 1712 text-align: center;
2063 1713 }
2064 1714
2065 1715 .widefat th.frm_table_break {
2066 - background-color: var(--sidebar-color);
1716 + background-color: #f6f7fb;
2067 1717 }
2068 1718
2069 1719 h2.frm-h2 + .howto {
2070 1720 color: var(--medium-grey);
@@ -2080,18 +1730,18 @@
2080 1730 margin-top: 0;
2081 1731 }
2082 1732
2083 1733 .frm-addons {
2084 - margin-top: var(--gap-lg);
1734 + margin-top: 30px;
2085 1735 display: grid;
2086 1736 grid-template-columns: 1fr 1fr 1fr;
2087 - grid-gap: var(--gap-md);
1737 + grid-gap: 30px 2%;
2088 1738 }
2089 1739
2090 1740 .frm-addons,
2091 1741 .frm-addons h2,
2092 1742 .frm-addons h3 {
2093 - color: var(--grey-700);
1743 + color: var(--dark-grey);
2094 1744 }
2095 1745
2096 1746 .frm-addons h2 {
2097 1747 font-size: 17px;
@@ -2103,9 +1753,9 @@
2103 1753
2104 1754 .frm-card {
2105 1755 width: 100%;
2106 1756 border-radius: 10px;
2107 - border: 1px solid var(--grey-300);
1757 + border: 1px solid var(--grey-border);
2108 1758 opacity: 1;
2109 1759 transition: opacity 1s;
2110 1760 }
2111 1761
@@ -2119,10 +1769,10 @@
2119 1769 position: relative;
2120 1770 }
2121 1771
2122 1772 .frm-addons .plugin-card-top {
2123 - min-height: 155px;
2124 - padding-top: var(--gap-lg);
1773 + height: 140px;
1774 + padding-top: 30px;
2125 1775 overflow: hidden;
2126 1776 }
2127 1777
2128 1778 .frm-addons .plugin-card-top h2 {
@@ -2159,16 +1809,15 @@
2159 1809 .frm-addon-active .button {
2160 1810 visibility: hidden;
2161 1811 }
2162 1812
2163 -.frm-save-and-reload-options {
1813 +#frm_save_and_reload_options {
2164 1814 margin-top: 10px;
2165 1815 font-size: 13px;
2166 1816 }
2167 1817
2168 -.frm-save-and-reload,
2169 -.frm-save-and-reload + .frm-button-secondary {
2170 - visibility: visible !important;
1818 +#frm_save_and_reload_settings, #frm_save_and_reload_settings + .frm-button-secondary {
1819 + visibility: visible;
2171 1820 }
2172 1821
2173 1822 .addon-status-label {
2174 1823 opacity: .7;
@@ -2197,13 +1846,9 @@
2197 1846 .frm-new-template.plugin-card-bottom {
2198 1847 overflow: visible;
2199 1848 }
2200 1849
2201 -#frm-new-template p:first-child {
2202 - margin-top: 0;
2203 -}
2204 -
2205 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1850 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2206 1851 #wpbody-content > .updated,
2207 1852 #wpbody-content > #update-nag,
2208 1853 #wpbody-content > .update-nag,
2209 1854 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2225,86 +1870,35 @@
2225 1870 margin: 0;
2226 1871 padding: 10px 20px;
2227 1872 }
2228 1873
2229 -.frm-modal .postbox,
2230 1874 #frm_new_form_modal .postbox {
2231 1875 max-height: 600px;
2232 1876 overflow: hidden;
2233 - margin-bottom: 0;
2234 1877 }
2235 1878
2236 -.frm-modal .postbox .frm_modal_top,
2237 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2238 - padding: var(--gap-md) var(--gap-md) 0;
1879 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child {
1880 + padding: 30px 20px;
2239 1881 position: relative;
1882 + border-bottom: 1px solid var(--grey-border);
2240 1883 }
2241 1884
2242 -.frm-modal .postbox .frm-modal-title,
2243 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
1885 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
2244 1886 display: inline-block;
2245 - font-size: var(--text-xl);
2246 - color: var(--grey-900);
1887 + font-size: 24px;
1888 + color: #282F36;
2247 1889 }
2248 1890
2249 -.frm-inline-modal > a.dismiss,
2250 -.frm-modal .postbox > a.dismiss,
2251 -.frm-modal .postbox .frm-modal-title + div:last-child,
2252 -.frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
1891 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2253 1892 position: absolute;
2254 - right: 30px;
2255 - top: 25px;
2256 - z-index: 2;
1893 + right: 20px;
1894 + top: 37px;
2257 1895 }
2258 1896
2259 -body.rtl .frm-inline-modal > a.dismiss,
2260 -body.rtl .frm-modal .postbox > a.dismiss,
2261 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2262 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2263 - right: unset;
2264 - left: 30px;
1897 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child a {
1898 + color: var(--grey);
2265 1899 }
2266 1900
2267 -.frm-info-modal .postbox > a.dismiss,
2268 -.frm-inline-modal > a.dismiss {
2269 - right: 13px;
2270 - top: 13px;
2271 -}
2272 -
2273 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2274 -.frm-modal a.dismiss .frmsvg,
2275 -.frm_common_modal .frm_modal_top a .frmsvg {
2276 - color: var(--grey-900);
2277 -}
2278 -
2279 -.frm-modal .frm_modal_content > div.inside,
2280 -.frm_common_modal .frm_modal_content > div.inside {
2281 - padding: var(--gap-md);
2282 - margin: 0;
2283 - font-size: var(--text-sm);
2284 - color: var(--grey-700);
2285 -}
2286 -
2287 -.frm_common_modal .postbox {
2288 - display: flex;
2289 - flex-direction: column;
2290 -}
2291 -
2292 -.frm-modal .postbox > div.inside .cta-inside {
2293 - overflow-y: auto;
2294 - height: auto;
2295 - padding: 0 var(--gap-sm);
2296 -}
2297 -
2298 -.frm_modal_footer {
2299 - padding: 0 var(--gap-md) var(--gap-sm);
2300 - text-align: right;
2301 -}
2302 -
2303 -body.frm-body-with-open-modal {
2304 - overflow-y: hidden;
2305 -}
2306 -
2307 1901 #frm_new_form_modal .postbox > div.inside {
2308 1902 max-height: 490px;
2309 1903 overflow-y: auto;
2310 1904 overflow-x: hidden;
@@ -2314,9 +1908,9 @@
2314 1908
2315 1909 #frm_new_form_modal .postbox > div.inside .cta-inside {
2316 1910 overflow-y: auto;
2317 1911 height: auto;
2318 - padding: 0 var(--gap-md);
1912 + padding: 0 15px;
2319 1913 }
2320 1914
2321 1915 #frm_new_form_modal .accordion-container {
2322 1916 width: 100%;
@@ -2322,16 +1916,13 @@
2322 1916 width: 100%;
2323 1917 }
2324 1918
2325 1919 .frm-templates-list {
2326 - margin-top: 0;
1920 + margin-top: 0px;
2327 1921 }
2328 1922
2329 -.frm-templates-list.frm_grid_container li {
2330 - margin-bottom: 0;
2331 -}
2332 -
2333 1923 .frm-templates-list li {
1924 + width: 50%;
2334 1925 vertical-align: top;
2335 1926 position: relative;
2336 1927 box-sizing: border-box;
2337 1928 border-radius: 6px;
@@ -2360,17 +1951,14 @@
2360 1951 .frm-templates-list li.frm-selectable:hover p {
2361 1952 max-width: calc( 100% - 65px );
2362 1953 }
2363 1954
2364 -.frm-templates-list .frm-featured-form {
2365 - display: flex;
1955 +.frm-templates-list li > div:not(.frm-hover-icons) {
1956 + display: inline-block;
2366 1957 width: 100%;
1958 + padding: 5px;
2367 1959 }
2368 1960
2369 -.frm-templates-list li .frm-featured-form {
2370 - padding: 7px 5px;
2371 -}
2372 -
2373 1961 .frm-templates-list li li > div {
2374 1962 padding-left: 0;
2375 1963 }
2376 1964
@@ -2377,38 +1965,23 @@
2377 1965 .frm-templates-list li > div > div {
2378 1966 vertical-align: middle;
2379 1967 }
2380 1968
2381 -.frm-templates-list .frm-inner-circle,
2382 -.frm-category-icon, /* Deprecated */
2383 -.frm-icon-wrapper {
2384 - background: var(--primary-500);
2385 - border-radius: var(--small-radius);
2386 - color: #fff;
1969 +.frm-templates-list li .frm-category-icon {
2387 1970 width: 40px;
2388 1971 height: 40px;
2389 - font-size: 18px;
2390 - box-sizing: border-box;
2391 - align-self: center;
2392 - justify-content: center;
2393 - align-items: center;
2394 - display: inline-flex;
2395 -}
2396 -
2397 -.frm-templates-list .frm-inner-circle .frmsvg {
1972 + overflow: hidden;
1973 + display: inline-block;
1974 + border-radius: 4px;
1975 + text-align: center;
2398 1976 vertical-align: top;
2399 1977 }
2400 1978
2401 -.frm-templates-list li .frm-category-icon {
2402 - overflow: hidden;
2403 - align-self: flex-start;
2404 -}
2405 -
2406 -.frm-templates-list .frm-template-details {
1979 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2407 1980 /* the content container to the right of the icon in Create new form modal */
2408 1981 display: inline-block;
2409 1982 width: calc( 100% - 40px );
2410 - padding-left: var(--gap-sm);
1983 + padding-left: 13px;
2411 1984 box-sizing: border-box;
2412 1985 transform: translateY(-2px);
2413 1986 }
2414 1987
@@ -2422,18 +1995,54 @@
2422 1995 }
2423 1996
2424 1997 .frm-templates-list li h3,
2425 1998 .frm-templates-list .frm-install-template h3 {
2426 - font-size: var(--text-sm) !important;
1999 + font-size: 14px !important;
2000 + line-height: 24px;
2001 + height: 24px;
2427 2002 }
2428 2003
2004 +.frm-templates-list li p {
2005 + font-size: 13px;
2006 + color: rgba(40, 47, 54, 0.6);
2007 +}
2008 +
2429 2009 .frm-templates-list .frm-install-template div {
2430 2010 text-align: left;
2431 2011 }
2432 2012
2013 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
2014 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
2015 + color: #fff;
2016 + transform: translateY(10px);
2017 +}
2018 +
2019 +.frm-templates-list .frm-inner-circle {
2020 + border-radius: 4px;
2021 + width: 40px;
2022 + height: 40px;
2023 + padding: 0;
2024 + box-sizing: border-box;
2025 + display: flex;
2026 + flex-direction: row;
2027 + align-items: center;
2028 + justify-content: center;
2029 + position: relative;
2030 +}
2031 +
2032 +.frm-templates-list .frm-inner-circle .frmsvg {
2033 + position: absolute;
2034 + top: 0;
2035 + left: 0;
2036 + width: 100%;
2037 + height: 100%;
2038 + box-sizing: border-box;
2039 + padding: 10px;
2040 +}
2041 +
2433 2042 #frm_new_form_modal .frm-search {
2434 - width: 100%;
2435 - margin: var(--gap-sm) 0 var(--gap-md);
2043 + width: calc( 100% - 20px );
2044 + margin: 15px 10px 30px;
2436 2045 }
2437 2046
2438 2047 #frm_leave_email,
2439 2048 #frm_code_from_email
@@ -2440,10 +2049,14 @@
2440 2049 {
2441 2050 width: 480px;
2442 2051 }
2443 2052
2444 -#frm_new_form_modal #template-search-input {
2445 - width: 100%;
2053 +#frm_new_form_modal #template-search-input,
2054 +#frm_new_form_modal #frm_leave_email,
2055 +#frm_new_form_modal #frm_code_from_email
2056 +{
2057 + border: 2px solid var(--grey-border);
2058 + border-radius: 4px !important;
2446 2059 }
2447 2060
2448 2061 #frm-email-block .frm-with-left-icon .frmsvg {
2449 2062 padding: 0;
@@ -2453,12 +2066,12 @@
2453 2066
2454 2067 #frm_new_form_modal .accordion-container {
2455 2068 display: inline-block;
2456 2069 padding: 0;
2457 - border-top: 1px solid var(--grey-300);
2070 + border-top: 1px solid var(--grey-border);
2458 2071 box-sizing: border-box;
2459 - margin: 0 5px;
2460 - width: calc( 100% - 10px );
2072 + margin: 0 10px;
2073 + width: calc( 100% - 20px );
2461 2074 }
2462 2075
2463 2076 #frm_new_form_modal .accordion-section-title {
2464 2077 padding: 0;
@@ -2468,13 +2081,13 @@
2468 2081 .control-section:hover .accordion-section-title,
2469 2082 #frm_new_form_modal .accordion-section.open .accordion-section-title
2470 2083 {
2471 2084 background: #fff !important;
2472 - border-bottom-color: transparent;
2085 + border-bottom: none;
2473 2086 }
2474 2087
2475 2088 #frm_new_form_modal .accordion-section.open:hover {
2476 - border-bottom-color: transparent;
2089 + border-bottom: none;
2477 2090 }
2478 2091
2479 2092 #frm_new_form_modal .accordion-section {
2480 2093 padding: 8px 0 4px;
@@ -2480,9 +2093,9 @@
2480 2093 padding: 8px 0 4px;
2481 2094 }
2482 2095
2483 2096 #frm_new_form_modal .accordion-section + .accordion-section {
2484 - border-top: 1px solid var(--grey-300);
2097 + border-top: 1px solid var(--grey-border);
2485 2098 border-radius: 0;
2486 2099 }
2487 2100
2488 2101 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2491,9 +2104,9 @@
2491 2104 padding-left: 0;
2492 2105 }
2493 2106
2494 2107 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2495 - padding-left: var(--gap-sm);
2108 + padding-left: 10px;
2496 2109 }
2497 2110
2498 2111 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2499 2112 padding: 0 10px;
@@ -2500,127 +2113,131 @@
2500 2113 overflow: hidden;
2501 2114 }
2502 2115
2503 2116 #frm_new_form_modal .accordion-section-content {
2504 - padding: var(--gap-sm);
2117 + padding: 10px 0;
2505 2118 }
2506 2119
2507 2120 .frm-hover-icons {
2508 2121 position: absolute;
2509 2122 right: 0;
2510 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2511 - max-width: 91px;
2123 + top: 0;
2124 + height: 20px;
2125 + width: 65px;
2512 2126 height: 100%;
2513 2127 box-sizing: border-box;
2514 - padding: 0 10px 0 5px !important;
2515 - border-radius: var(--small-radius);
2128 + padding: 14px 10px 0 5px !important;
2129 + border-radius: 6px;
2516 2130 text-align: right;
2517 - display: flex;
2518 - gap: 5px;
2519 2131 }
2520 2132
2521 -.frm-ready-made-solution .frm-hover-icons {
2522 - visibility: hidden;
2133 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2134 + width: 91px;
2523 2135 }
2524 2136
2525 -.frm-ready-made-solution:hover .frm-hover-icons {
2526 - visibility: visible;
2527 -}
2528 -
2529 2137 .frm-hover-icons a {
2530 2138 width: 22px;
2531 2139 height: 22px;
2532 - font-size: var(--text-md);
2533 - display: inline-flex;
2534 - align-items: center;
2535 - justify-content: center;
2140 + display: inline-block;
2536 2141 border-radius: 50%;
2537 2142 box-sizing: border-box;
2538 - line-height: var(--leading);
2143 + line-height: 20px;
2539 2144 text-align: center;
2540 2145 }
2541 2146
2542 2147 .frm-hover-icons > .frm-preview-form,
2543 2148 .frm-hover-icons > .frm-delete-form {
2544 - border: 1px solid var(--primary-500);
2149 + border: 1px solid var(--primary-color);
2150 + margin-right: 5px;
2545 2151 }
2546 2152
2547 -.frm-hover-icons > .frm-create-form,
2548 -.frm-ready-made-solution .frm-hover-icons a {
2549 - background-color: var(--primary-500);
2153 +.frm-hover-icons > .frm-create-form {
2154 + background-color: var(--primary-color);
2550 2155 }
2551 2156
2552 -.frm-hover-icons > a .frmsvg {
2553 - width: 14px;
2554 - height: 14px;
2555 - vertical-align: baseline;
2157 +.frm-hover-icons > .frm-preview-form .frmsvg {
2158 + width: 16px;
2159 + height: 16px;
2160 + color: var(--primary-color);
2556 2161 }
2557 2162
2558 -.frm-hover-icons > .frm-preview-form .frmsvg,
2559 2163 .frm-hover-icons > .frm-delete-form .frmsvg {
2560 - color: var(--primary-500);
2164 + width: 14px;
2165 + height: 14px;
2166 + color: var(--primary-color);
2167 + transform: translateY(-1px);
2561 2168 }
2562 2169
2563 2170 .frm-hover-icons > .frm-unlock-form {
2564 - background-color: var(--primary-500);
2171 + background-color: var(--primary-color);
2565 2172 }
2566 2173
2567 2174 .frm-hover-icons > .frm-unlock-form .frmsvg {
2568 - background-color: var(--primary-500);
2175 + width: 12px;
2176 + height: 12px;
2177 + background-color: var(--primary-color);
2178 + transform: translateY(-2px);
2569 2179 }
2570 2180
2571 -.frm-ready-made-solution .frmsvg {
2181 +.frm-hover-icons > .frm-create-form .frmsvg {
2572 2182 width: 14px;
2573 2183 height: 14px;
2574 2184 }
2575 2185
2576 -.frm-hover-icons .frm-create-form svg,
2577 -.frm-ready-made-solution .frm-hover-icons svg {
2186 +.frm-hover-icons .frm-create-form svg {
2578 2187 color: #fff;
2579 2188 }
2580 2189
2581 2190 .frm-hover-icons .frm-create-form:hover,
2582 -.frm-ready-made-solution .frm-hover-icons a:hover,
2583 2191 .frm-hover-icons > .frm-unlock-form:hover,
2584 2192 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2585 2193 {
2586 - background-color: var(--primary-700) !important;
2194 + background-color: var(--primary-hover) !important;
2587 2195 }
2588 2196
2589 2197 .frm-hover-icons .frm-preview-form:hover,
2590 2198 .frm-hover-icons .frm-delete-form:hover
2591 2199 {
2592 - border: 1px solid var(--primary-700) !important;
2200 + border: 1px solid var(--primary-hover) !important;
2593 2201 }
2594 2202
2595 2203 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2596 2204 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2597 - color: var(--primary-700) !important;
2205 + color: var(--primary-hover) !important;
2598 2206 }
2599 2207
2600 -.frm-application-card h4 .frmsvg,
2601 2208 .frm-locked-template h3 .frmsvg {
2602 - height: var(--text-sm);
2603 - width: var(--text-sm);
2604 - vertical-align: text-top;
2605 - color: var(--grey-500);
2209 + height: 12px;
2210 + width: 14px;
2211 + vertical-align: top;
2212 + padding-top: 6px;
2606 2213 }
2607 2214
2215 +.frm_modal_footer {
2216 + background-color: #fff;
2217 + padding: 30px 20px 15px;
2218 + text-align: right;
2219 + border-top: 1px solid var(--grey-border);
2220 +}
2221 +
2608 2222 #frm_new_form_modal .frm-use-this-template {
2609 2223 margin-left: 10px;
2610 2224 }
2611 2225
2612 2226 #frm_new_form_modal #frm-preview-block {
2613 - padding: var(--gap-md) var(--gap-lg);
2227 + padding: 20px 40px;
2614 2228 overflow-x: hidden;
2615 2229 }
2616 2230
2617 2231 #frm_new_form_modal #frm-details-block {
2618 - padding: var(--gap-md) var(--gap-lg);
2232 + padding: 20px 40px;
2619 2233 }
2620 2234
2621 2235 .frm-modal-back {
2622 2236 cursor: pointer;
2237 + font-size: 17px;
2238 + vertical-align: top;
2239 + margin-top: 4px;
2623 2240 margin-right: 4px;
2624 2241 }
2625 2242
2626 2243 .frm-modal-cancel {
@@ -2627,28 +2244,19 @@
2627 2244 float: left;
2628 2245 }
2629 2246
2630 2247 .frm-plan-required-tag {
2631 - margin-left: 5px;
2632 - transform: translateY(-1px);
2633 2248 background: #FDE6DE;
2634 2249 color: #F15A24;
2635 -}
2636 -
2637 -.frm-ready-made-solution .frm-meta-tag {
2638 - width: fit-content;
2639 - background: #FDE6DE;
2640 - color: #F15A24;
2641 -}
2642 -
2643 -.frm-meta-tag {
2644 2250 font-size: 10px;
2645 - padding: 4px 6px;
2251 + padding: 4px 8px;
2646 2252 border-radius: 4px;
2647 2253 text-transform: uppercase;
2648 2254 font-weight: normal;
2649 2255 display: inline-block;
2650 2256 line-height: 12px;
2257 + transform: translateY(-1px);
2258 + margin-left: 5px;
2651 2259 }
2652 2260
2653 2261 #frm_new_form_modal.frm-expired #frm-create-block,
2654 2262 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2658,14 +2266,18 @@
2658 2266 #frm-create-footer {
2659 2267 padding: 15px 20px;
2660 2268 }
2661 2269
2270 +#frm-create-footer .frm_error_style {
2271 + border-radius: 6px;
2272 +}
2273 +
2662 2274 #frm_code_from_email_options {
2663 2275 margin-top: 20px;
2664 2276 }
2665 2277
2666 2278 #frm_code_from_email_options * {
2667 - color: var(--primary-500);
2279 + color: var(--primary-color);
2668 2280 }
2669 2281
2670 2282 #frm-email-block p,
2671 2283 #frm-code-block p,
@@ -2701,23 +2313,20 @@
2701 2313 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2702 2314 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2703 2315 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2704 2316 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2317 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2318 +li[data-preview] .frm-hover-icons .frm-preview-form,
2705 2319 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2706 2320 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2707 2321 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2708 2322 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2709 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2323 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2324 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2710 2325 {
2711 2326 display: inline-block;
2712 2327 }
2713 2328
2714 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2715 -li[data-preview] .frm-hover-icons .frm-preview-form,
2716 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2717 - display: inline-flex;
2718 -}
2719 -
2720 2329 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2721 2330 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2722 2331 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2723 2332 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2752,9 +2361,9 @@
2752 2361 }
2753 2362
2754 2363 #frm-upgrade-body-list-wrapper ul li:before {
2755 2364 content: "\2022";
2756 - color: var(--primary-500);
2365 + color: var(--primary-color);
2757 2366 display: inline-block;
2758 2367 width: 1em;
2759 2368 margin-left: -1em;
2760 2369 }
@@ -2760,112 +2369,126 @@
2760 2369 }
2761 2370
2762 2371 /* Embed Form Modal */
2763 2372
2764 -.frm-embed-modal-content {
2765 - padding: var(--gap-md);
2373 +#frm_form_embed_modal label {
2374 + font-size: 14px;
2375 + line-height: 25px;
2376 + color: rgba(40, 47, 54, 0.8);
2377 + font-weight: 600;
2766 2378 }
2767 2379
2768 -.frm-embed-modal-content.frm-loading-page-options {
2380 +.frm_embed_form_content {
2381 + padding: 20px;
2382 +}
2383 +
2384 +.frm_embed_form_content.frm-loading-page-options {
2769 2385 display: flex;
2770 2386 justify-content: center;
2771 2387 }
2772 2388
2773 -#frm_embed_modal .frm_embed_example {
2774 - background: var(--sidebar-color);
2775 - border: 1px solid var(--sidebar-hover);
2776 - border-radius: var(--small-radius);
2777 - color: var(--grey-900);
2778 - font-size: var(--text-sm);
2779 - padding-right: var(--gap-lg);
2389 +#frm_form_embed_modal .frm_embed_example {
2390 + background: #F6F7FB;
2391 + border: 1px solid #E3E8EB;
2392 + border-radius: 6px;
2393 + color: rgba(40, 47, 54, 0.85);
2394 + font-size: 14px;
2395 + padding: 10px 30px 10px 10px;
2780 2396 width: 100%;
2397 + margin-bottom: 15px;
2781 2398 height: auto !important;
2782 2399 resize: none;
2783 2400 }
2784 2401
2785 -#frm_embed_modal textarea.frm_embed_example {
2402 +#frm_form_embed_modal textarea.frm_embed_example {
2786 2403 padding-bottom: 0;
2787 2404 }
2788 2405
2789 -.frm-embed-modal-content > div a {
2406 +.frm_embed_form_content > div a {
2790 2407 position: absolute;
2791 2408 right: 0;
2792 - top: 0;
2409 + top: 8px;
2793 2410 }
2794 2411
2795 -.frm-embed-modal-content > div {
2412 +.frm_embed_form_content > div {
2796 2413 position: relative;
2797 - margin-bottom: var(--gap-sm);
2798 2414 }
2799 2415
2800 -.frm-embed-modal-content > div:last-child {
2801 - margin-bottom: 0;
2802 -}
2803 -
2804 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2416 +.frm_embed_form_content svg[id^="frm_copy_embed_"] {
2805 2417 position: absolute;
2806 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2418 + top: 35px;
2807 2419 right: 10px;
2808 2420 cursor: pointer;
2809 2421 opacity: 0.5;
2810 2422 }
2811 2423
2812 -.frm-border-info-box,
2813 2424 .frm-embed-modal-option {
2814 - border-radius: var(--small-radius);
2815 - border: 1px solid var(--grey-300);
2816 - padding: var(--gap-sm);
2425 + border-radius: 6px;
2426 + border: 1px solid #E3E8EB;
2427 + padding: 20px;
2817 2428 cursor: pointer;
2818 - display: flex;
2819 - gap: var(--gap-sm);
2820 - font-size: var(--text-sm);
2821 2429 }
2822 2430
2823 2431 .frm-embed-modal-option + .frm-embed-modal-option {
2824 - margin-top: var(--gap-sm);
2432 + margin-top: 10px;
2825 2433 }
2826 2434
2827 -.frm-collapsed .frmsvg,
2828 -.caret.rotate-270,
2829 -.frm-embed-modal-option .caret {
2830 - align-self: center;
2831 - margin-left: auto;
2832 - transform: rotate(-90deg);
2435 +#frm_form_embed_modal .frm-modal-cancel {
2436 + display: none;
2833 2437 }
2834 2438
2835 -#frm_embed_modal .frm_modal_footer {
2836 - display: none;
2439 +#frm_form_embed_modal.frm-on-page-2 .frm-modal-cancel {
2440 + display: inline;
2837 2441 }
2838 2442
2839 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2840 - display: block;
2443 +.frm-embed-form-icon-wrapper {
2444 + background: var(--primary-color);
2445 + border-radius: 4px;
2446 + padding: 10px;
2447 + color: #fff;
2448 + display: inline-block;
2449 + vertical-align: top;
2841 2450 }
2842 2451
2843 -.frm-embed-modal-content ul {
2452 +.frm-embed-form-icon-wrapper + div {
2453 + display: inline-block;
2454 + padding-left: 13px;
2455 + transform: translateY(-4px);
2456 +}
2457 +
2458 +.frm-embed-modal-option:after {
2459 + content: "\e913" !important;
2460 + font-family: "s11-fp" !important;
2461 + font-size: 18px;
2462 + position: absolute;
2463 + right: 10px;
2464 + top: 50%;
2465 + transform: translateY(-50%);
2466 +}
2467 +
2468 +.frm_embed_form_content ul {
2844 2469 max-height: 300px;
2845 2470 overflow-y: scroll;
2846 2471 }
2847 2472
2848 -.frm-embed-modal-wrapper.frm-dialog {
2473 +.frm-embed-form-modal-wrapper.frm-dialog {
2849 2474 overflow: visible;
2850 2475 }
2851 2476
2852 2477 /* Bulk Options */
2853 2478 #frm-bulk-modal .frm_grid_container {
2479 + border-top: 1px solid var(--grey-border);
2854 2480 grid-template-columns: repeat(12, 8.33%);
2855 2481 grid-gap: 0;
2856 2482 }
2857 2483
2858 2484 #frm-bulk-modal .frm8 {
2859 - border-right: 1px solid var(--grey-300);
2860 - padding: 10px 20px 10px var(--gap-lg);
2485 + border-right: 1px solid var(--grey-border);
2486 + padding: 0 20px 20px;
2861 2487 }
2862 2488
2863 -#frm-bulk-modal .frm4 {
2864 - padding: 10px 0;
2865 -}
2866 -
2867 -.frm-inline-modal .howto {
2489 +.frm-inline-modal .howto,
2490 +#frm-bulk-modal .howto {
2868 2491 margin: 5px 0 10px;
2869 2492 color: var(--grey);
2870 2493 }
2871 2494
@@ -2882,18 +2505,18 @@
2882 2505 }
2883 2506
2884 2507 .frm-bulk-edit-link {
2885 2508 text-align: right;
2886 - font-size: var(--text-sm);
2509 + font-size: 14px;
2887 2510 padding: 0 5px 10px;
2888 2511 }
2889 2512
2890 2513 .frm-small-add {
2891 - font-size: var(--text-sm) !important;
2514 + font-size: 14px !important;
2892 2515 }
2893 2516
2894 2517 .frm-small-add span {
2895 - color: var(--primary-500);
2518 + color: var(--primary-color);
2896 2519 font-size: 12px;
2897 2520 height: 12px;
2898 2521 width: 12px;
2899 2522 }
@@ -2908,33 +2531,34 @@
2908 2531 }
2909 2532
2910 2533 .frm-right-panel .inside a.frm_pro_tip,
2911 2534 a.frm_pro_tip {
2912 - font-size: var(--text-sm);
2535 + font-size: 14px;
2536 + border: 1px solid var(--orange);
2913 2537 display: inline-block;
2914 - color: var(--grey-700);
2915 - background: #FFE7DE;
2916 - border-radius: var(--small-radius);
2538 + color: var(--dark-grey);
2539 + background: var(--light-blue);
2540 + border-radius: var(--border-radius);
2541 + text-align: center;
2917 2542 padding: 5px 15px;
2918 2543 margin: 0 auto;
2919 - display: flex;
2920 - align-items: center;
2544 + line-height: 1.4;
2921 2545 }
2922 2546
2923 2547 a.frm_pro_tip:hover {
2924 - color: var(--grey-700);
2925 - border-color: var(--primary-500);
2548 + color: var(--dark-grey);
2549 + border-color: var(--primary-color);
2926 2550 }
2927 2551
2928 2552 a.frm_pro_tip:hover .frmsvg {
2929 - fill: var(--primary-500);
2553 + fill: var(--primary-color);
2930 2554 }
2931 2555
2932 2556 .frm_field_list .frm_pro_tip {
2933 2557 margin: 10px 15px;
2558 + padding-left: 40px;
2934 2559 position: relative;
2935 - width: calc(100% - 30px);
2936 - box-sizing: border-box;
2560 + background: #fff;
2937 2561 }
2938 2562
2939 2563 a.frm_pro_tip .frmsvg,
2940 2564 a.frm_pro_tip i {
@@ -2941,27 +2565,19 @@
2941 2565 color: var(--orange);
2942 2566 margin-right: 5px;
2943 2567 }
2944 2568
2945 -a.frm_pro_tip .frmsvg {
2946 - margin-right: 10px;
2569 +.frm_field_list a.frm_pro_tip .frmsvg {
2570 + position: absolute;
2571 + left: 15px;
2572 + top: calc(50% - 11px);
2947 2573 }
2948 2574
2949 -.frm-light-tip a.frm_pro_tip {
2950 - background: rgba(188, 224, 253, 0.23);
2575 +.pro-tip {
2576 + font-weight: 500;
2577 + color: var(--darkest-grey);
2951 2578 }
2952 2579
2953 -.frm-light-tip a.frm_pro_tip .frmsvg,
2954 -.frm-light-tip a.frm_pro_tip i,
2955 -.frm-light-tip .frm-tip-cta {
2956 - color: var(--primary-500);
2957 -}
2958 -
2959 -.frm-tip-info {
2960 - flex: 1;
2961 - text-align: left;
2962 -}
2963 -
2964 2580 .frm-tip-cta {
2965 2581 color: var(--orange);
2966 2582 }
2967 2583
@@ -2969,9 +2585,9 @@
2969 2585 float: right;
2970 2586 }
2971 2587
2972 2588 .frm_pro_tip:hover .frm-tip-cta {
2973 - color: var(--primary-500);
2589 + color: var(--primary-color);
2974 2590 }
2975 2591
2976 2592 /*Switch form dropdown*/
2977 2593 h1 .fa-caret-down {
@@ -2986,23 +2602,16 @@
2986 2602 vertical-align: middle;
2987 2603 }
2988 2604
2989 2605 .caret,
2990 -.wp-admin .frm_wrap select,
2991 -.frm_wrap .frm_form_builder select,
2992 2606 .frm_wrap .ui-autocomplete-input {
2993 - background: transparent url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23667085%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2994 - background-size: var(--text-md) var(--text-md);
2995 - padding-right: var(--gap-lg) !important;
2607 + background:#fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2608 + background-size: 16px 16px;
2996 2609 }
2997 2610
2998 -.caret {
2999 - padding-right: var(--gap-xs) !important;
3000 -}
3001 -
3002 2611 .frm-btn-group .caret {
3003 2612 float: right;
3004 - margin-top: calc( var(--text-md) / 2 );
2613 + margin-top: 6px;
3005 2614 }
3006 2615
3007 2616 .dropdown {
3008 2617 position: relative;
@@ -3011,10 +2620,8 @@
3011 2620 .dropdown-toggle:focus {
3012 2621 outline: 0;
3013 2622 }
3014 2623
3015 -.frm_wrap .ui-autocomplete,
3016 -#frm_adv_info.frm-dropdown-menu,
3017 2624 .frm-dropdown-menu {
3018 2625 /* Copied from .dropdown-menu rules from Bootstrap */
3019 2626 position: absolute;
3020 2627 top: 100%;
@@ -3021,25 +2628,22 @@
3021 2628 left: 0;
3022 2629 z-index: 1000;
3023 2630 display: none;
3024 2631 float: left;
3025 - padding-left: 4px;
3026 - padding-right: 4px;
3027 - margin: var(--gap-xs) 0 0;
2632 + padding: 0.5rem 0;
2633 + margin: 0;
3028 2634 text-align: left;
3029 2635 list-style: none;
3030 - background: none;
3031 2636 background-color: #fff;
3032 2637 background-clip: padding-box;
3033 - border: 1px solid var(--grey-100);
2638 + border: 1px solid rgba(0, 0, 0, 0.15);
3034 2639 border-radius: 0.25rem;
3035 - box-shadow: var(--box-shadow-lg);
3036 2640
3037 2641 /* Custom rules */
3038 2642 max-height: 200px;
3039 2643 overflow-y: auto;
3040 2644 overflow-x: hidden;
3041 - font-size: var(--text-md);
2645 + font-size: 0.9rem;
3042 2646 width: auto;
3043 2647 min-width: 160px;
3044 2648 }
3045 2649
@@ -3047,8 +2651,12 @@
3047 2651 min-width: 100px;
3048 2652 max-width: 99%;
3049 2653 }
3050 2654
2655 +#frm_bs_dropdown > a {
2656 + font-size: 1em;
2657 +}
2658 +
3051 2659 #frm_bs_dropdown .frm-dropdown-menu {
3052 2660 max-width: 400px;
3053 2661 }
3054 2662
@@ -3057,15 +2665,11 @@
3057 2665 }
3058 2666
3059 2667 #frm_field_group_controls .frm-dropdown-menu,
3060 2668 .frm-field-action-icons .frm-dropdown-menu {
3061 - min-width: 180px !important;
2669 + min-width: 160px !important;
3062 2670 }
3063 2671
3064 -.frm-field-action-icons .frm-dropdown-toggle svg {
3065 - color: #9EA9B8;
3066 -}
3067 -
3068 2672 .multiselect-container.frm-dropdown-menu,
3069 2673 #search-submit .frm-dropdown-menu {
3070 2674 min-width: 200px !important;
3071 2675 }
@@ -3073,9 +2677,9 @@
3073 2677 .preview .frm-dropdown-menu {
3074 2678 min-width: 230px !important;
3075 2679 }
3076 2680
3077 -.frm-dropdown-menu.dropdown-menu-right {
2681 +.frm-dropdown-menu.pull-right {
3078 2682 right: 0;
3079 2683 left: auto;
3080 2684 }
3081 2685
@@ -3089,11 +2693,8 @@
3089 2693 .frm-dropdown-menu > .dropdown-item {
3090 2694 margin: 0;
3091 2695 }
3092 2696
3093 -.frm-select-list-item,
3094 -.frm_wrap .ui-autocomplete li > div,
3095 -.multiselect-container button.multiselect-option,
3096 2697 .frm-dropdown-menu > .dropdown-item > a,
3097 2698 .frm-dropdown-menu .frm_dropdown_li {
3098 2699 clear: both;
3099 2700 font-weight: normal;
@@ -3098,24 +2699,19 @@
3098 2699 clear: both;
3099 2700 font-weight: normal;
3100 2701 white-space: nowrap;
3101 2702 text-decoration: none;
3102 - border-radius: var(--small-radius);
3103 2703 }
3104 2704
3105 -.frm-dropdown-menu > .active > a,
3106 -.frm-dropdown-menu > .active > a:hover,
3107 -.frm-dropdown-menu > .active > a:focus {
2705 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3108 2706 text-decoration: none;
3109 2707 outline: 0;
3110 2708 }
3111 2709
3112 -.frm-select-list-item.disabled,
3113 2710 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3114 2711 color: #999999;
3115 2712 }
3116 2713
3117 -.frm-select-list-item.disabled:hover,
3118 2714 .frm-dropdown-menu > .disabled > a:hover,
3119 2715 .frm-dropdown-menu > .disabled > a:focus {
3120 2716 text-decoration: none;
3121 2717 background-color: transparent;
@@ -3132,11 +2728,12 @@
3132 2728 }
3133 2729
3134 2730 .dropdown-header {
3135 2731 display: block;
3136 - padding: 3px 10px;
3137 - font-size: var(--text-xs);
3138 - color: var(--grey-400);
2732 + padding: 3px 20px;
2733 + font-size: 12px;
2734 + line-height: 1.428571429;
2735 + color: #999999;
3139 2736 }
3140 2737
3141 2738 .dropdown-backdrop {
3142 2739 position: fixed;
@@ -3146,9 +2743,8 @@
3146 2743 top: 0;
3147 2744 z-index: 990;
3148 2745 }
3149 2746
3150 -.dropdown-menu-right > .frm-dropdown-menu,
3151 2747 .pull-right > .frm-dropdown-menu {
3152 2748 right: 0;
3153 2749 left: auto;
3154 2750 }
@@ -3168,13 +2764,13 @@
3168 2764 .btn {
3169 2765 border: 1px solid #ddd;
3170 2766 background: #fff;
3171 2767 height: 28px;
3172 - line-height: var(--leading);
2768 + line-height: 1.5;
3173 2769 }
3174 2770
3175 2771 a.frm_option_icon:before {
3176 - color: var(--primary-500);
2772 + color: var(--primary-color);
3177 2773 font-size: 22px;
3178 2774 width: 22px;
3179 2775 height: 22px;
3180 2776 }
@@ -3180,9 +2776,9 @@
3180 2776 }
3181 2777
3182 2778 a.frm_option_icon:focus::before,
3183 2779 a.frm_option_icon:hover::before {
3184 - color: var(--primary-700);
2780 + color: var(--primary-hover);
3185 2781 }
3186 2782
3187 2783 .frm_top_left .frm-dropdown-toggle {
3188 2784 color: #999;
@@ -3196,17 +2792,17 @@
3196 2792 text-decoration: none;
3197 2793 }
3198 2794
3199 2795 .frm-card .frm-dropdown-toggle {
3200 - border: 1px solid var(--grey-300);
2796 + border: 1px solid var(--grey-border);
3201 2797 border-radius: var(--small-radius);
3202 2798 font-size: 13px;
3203 - color: var(--grey-700);
2799 + color: var(--dark-grey);
3204 2800 padding: 7px 20px;
3205 2801 }
3206 2802
3207 2803 .frm_actions_dropdown .frm-dropdown-menu {
3208 - font-size: var(--text-sm);
2804 + font-size: 14px;
3209 2805 color: #5F6C72;
3210 2806 }
3211 2807
3212 2808 .frm-dropdown-menu .frm_icon_font {
@@ -3218,21 +2814,20 @@
3218 2814 /* BS Multiselect */
3219 2815 .multiselect-container.frm-dropdown-menu {
3220 2816 top: auto;
3221 2817 left: auto;
3222 - font-size: var(--text-sm);
3223 - padding: 4px;
2818 + font-size: 14px;
2819 + padding-top: 3px;
3224 2820 margin-bottom: 3px;
3225 2821 }
3226 2822
3227 2823 .frm-right-panel .accordion-section-content {
3228 2824 background: transparent;
3229 - padding: 0;
3230 - overflow: initial;
2825 + padding-top: 0
3231 2826 }
3232 2827
3233 -.frm-right-panel .accordion-section-content > .inside {
3234 - padding: 0 0 var(--gap-xs);
2828 +.frm-right-panel .accordion-section-content > .inside {
2829 + padding: 0;
3235 2830 }
3236 2831
3237 2832 .frm-right-panel .accordion-section-content .inside a {
3238 2833 font-size: inherit;
@@ -3239,10 +2834,10 @@
3239 2834 }
3240 2835
3241 2836 #post-body-content + .frm-right-panel h3.accordion-section-title {
3242 2837 padding: 7px 10px 8px 14px;
3243 - font-size: var(--text-md);
3244 - color: var(--grey-700);
2838 + font-size: 16px;
2839 + color: var(--dark-grey);
3245 2840 }
3246 2841
3247 2842 .frm-right-panel .control-section.open h3 {
3248 2843 border-bottom: none;
@@ -3251,22 +2846,22 @@
3251 2846 .js .frm-right-panel .control-section.open .accordion-section-title,
3252 2847 .js .frm-right-panel .control-section .accordion-section-title:focus,
3253 2848 .js .frm-right-panel .control-section .accordion-section-title:hover {
3254 2849 background: transparent;
3255 - color: var(--grey-900);
2850 + color: var(--dark-grey);
3256 2851 }
3257 2852
3258 2853 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3259 - color: var(--grey-700);
2854 + color: var(--dark-grey);
3260 2855 }
3261 2856
3262 2857 .frm-with-line,
3263 2858 .accordion-section-content h4 {
3264 - font-size: var(--text-md);
2859 + font-size: 16px;
3265 2860 font-weight: 400;
3266 2861 margin: 20px -20px 10px;
3267 2862 padding: 0 20px;
3268 - color: var(--grey-700);
2863 + color: var(--dark-grey);
3269 2864 position: relative;
3270 2865 border: none !important;
3271 2866 }
3272 2867
@@ -3296,9 +2891,9 @@
3296 2891 .accordion-section-content h4:before {
3297 2892 content: '';
3298 2893 display: block;
3299 2894 position: absolute;
3300 - border-bottom: 1px solid var(--grey-300);
2895 + border-bottom: 1px solid var(--grey-border);
3301 2896 left: 0;
3302 2897 width: 100%;
3303 2898 top: 50%;
3304 2899 }
@@ -3316,9 +2911,8 @@
3316 2911 font-family: "s11-fp" !important;
3317 2912 font-size: 18px;
3318 2913 font-variant: normal;
3319 2914 text-rendering: auto;
3320 - vertical-align: text-top;
3321 2915 }
3322 2916
3323 2917 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3324 2918 transform: rotate(90deg);
@@ -3324,9 +2918,9 @@
3324 2918 transform: rotate(90deg);
3325 2919 }
3326 2920
3327 2921 .frm-right-panel .accordion-section-title:after {
3328 - top: calc(50% - 10px) !important;
2922 + right: 20px;
3329 2923 }
3330 2924
3331 2925 .frm-right-panel .open .accordion-section-title:after {
3332 2926 content: "\e62a" !important;
@@ -3335,9 +2929,9 @@
3335 2929 .frm-right-panel .accordion-section-title:before {
3336 2930 content: "\f1de" !important;
3337 2931 color: var(--grey);
3338 2932 font-size: 17px !important;
3339 - margin: 0 10px 0 0;
2933 + margin: 0 10px;
3340 2934 }
3341 2935
3342 2936 .form-title-style .accordion-section-title:before,
3343 2937 .section-fields-style .accordion-section-title:before {
@@ -3395,21 +2989,16 @@
3395 2989 .progress-bars-style .accordion-section-title:before{
3396 2990 content: "\e939" !important;
3397 2991 }
3398 2992
3399 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3400 2993 .frm-right-panel h3.accordion-section-title {
3401 2994 padding: 15px 20px;
3402 2995 background: var(--sidebar-color);
3403 - line-height: var(--leading);
3404 - color: var(--grey-700);
3405 - font-size: var(--text-lg);
3406 - font-weight: 400;
2996 + line-height: 1;
3407 2997 }
3408 2998
3409 -.control-section .accordion-section-title:after, /** Form template list */
3410 -.customize-pane-child .accordion-section-title:after {
3411 - top: 15px;
2999 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
3000 + top: 19px;
3412 3001 }
3413 3002
3414 3003 .accordion-container .frm-dropdown-menu {
3415 3004 min-width: 40px;
@@ -3414,13 +3003,8 @@
3414 3003 .accordion-container .frm-dropdown-menu {
3415 3004 min-width: 40px;
3416 3005 }
3417 3006
3418 -.frm-btn-group .multiselect.dropdown-toggle {
3419 - box-sizing: border-box;
3420 - min-height: unset;
3421 -}
3422 -
3423 3007 .accordion-container .frm-dropdown-menu:before,
3424 3008 .accordion-container .multiselect.dropdown-toggle:before {
3425 3009 font-family: "s11-fp" !important;
3426 3010 }
@@ -3434,12 +3018,14 @@
3434 3018 max-width: 250px;
3435 3019 }
3436 3020
3437 3021 .multiselect-container button.multiselect-option {
3022 + display: block;
3438 3023 width: 100%;
3439 3024 text-align: left;
3025 + background: none;
3440 3026 border: none;
3441 - margin-bottom: 4px;
3027 + padding: 5px 0 5px 15px;
3442 3028 }
3443 3029
3444 3030 .multiselect-container button.multiselect-option label {
3445 3031 margin-left: 5px;
@@ -3455,17 +3041,11 @@
3455 3041 }
3456 3042
3457 3043 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3458 3044 display: block;
3045 + vertical-align: middle;
3459 3046 }
3460 3047
3461 -.multiselect-option label {
3462 - max-width: calc(100% - 22px);
3463 - text-overflow: ellipsis;
3464 - overflow: hidden;
3465 - white-space: nowrap;
3466 -}
3467 -
3468 3048 .frm_scale {
3469 3049 text-align: center;
3470 3050 float: left;
3471 3051 margin-right: 10px;
@@ -3487,13 +3067,8 @@
3487 3067 width: 100%;
3488 3068 height: auto;
3489 3069 }
3490 3070
3491 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3492 - vertical-align: sub;
3493 - vertical-align: -webkit-baseline-middle;
3494 -}
3495 -
3496 3071 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3497 3072 background-color: var(--blue-border);
3498 3073 }
3499 3074
@@ -3520,9 +3095,9 @@
3520 3095 .frm-fake-field {
3521 3096 display: block;
3522 3097 height: 25px;
3523 3098 background-color: var(--light-blue);
3524 - border: 1px solid var(--grey-300);
3099 + border: 1px solid var(--grey-border);
3525 3100 margin: 10px 0;
3526 3101 border-radius: var(--small-radius);
3527 3102 }
3528 3103
@@ -3528,15 +3103,15 @@
3528 3103
3529 3104 .frm-embed-message {
3530 3105 position: absolute;
3531 3106 background: #fff;
3532 - border: 1px solid var(--grey-300);
3533 - color: var(--grey-700);
3534 - padding: var(--gap-md);
3535 - font-size: var(--text-lg);
3107 + border: 1px solid var(--grey-border);
3108 + color: var(--dark-grey);
3109 + padding: 37px 0;
3110 + font-size: 18px;
3536 3111 max-width: 200px;
3537 3112 min-width: 50%;
3538 - margin: 0 var(--gap-md);
3113 + margin: 0 25px;
3539 3114 overflow: hidden;
3540 3115 text-overflow: ellipsis;
3541 3116 }
3542 3117
@@ -3543,9 +3118,9 @@
3543 3118 .frm-summary-message {
3544 3119 top: 50%;
3545 3120 left: 50%;
3546 3121 padding: 15px 0;
3547 - font-size: var(--text-md);
3122 + font-size: 16px;
3548 3123 transform: translate(-50%, -50%);
3549 3124 }
3550 3125
3551 3126 .frm-summary-learn-more {
@@ -3554,9 +3129,8 @@
3554 3129
3555 3130 .frm-single-settings .frm-embed-message {
3556 3131 width: 100%;
3557 3132 position: static;
3558 - border-radius: var(--small-radius);
3559 3133 }
3560 3134
3561 3135 #new_fields input[type=text],
3562 3136 #new_fields input[type=number],
@@ -3593,8 +3167,19 @@
3593 3167 width: 16px;
3594 3168 padding: 0;
3595 3169 }
3596 3170
3171 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3172 +.frm-star-group input + label:hover:before,
3173 +.frm-star-group:hover input + label:hover:before,
3174 +.frm-star-group .star-rating-on:before,
3175 +.frm-star-group .star-rating-hover:before,
3176 +.frm-star-group input[type=radio]:checked + label:before,
3177 +.frm-star-group input + label:before,
3178 +.frm-star-group .star-rating:before {
3179 + color: var( --blue-border);
3180 +}
3181 +
3597 3182 .frm_wrap .frm-number-range + .frm_last input,
3598 3183 .frm_wrap .frm-number-range input {
3599 3184 text-align: center;
3600 3185 font-weight: 600;
@@ -3601,9 +3186,9 @@
3601 3186 }
3602 3187
3603 3188 .frm_wrap .frm-number-range input[type=number],
3604 3189 .frm_wrap .frm-number-range input[type=text] {
3605 - color: var(--primary-700);
3190 + color: var(--primary-hover);
3606 3191 }
3607 3192
3608 3193 .frm-range-min {
3609 3194 position: relative;
@@ -3613,25 +3198,24 @@
3613 3198 content: '';
3614 3199 height: 3px;
3615 3200 width: 10px;
3616 3201 border-radius: 30%;
3617 - background: var(--primary-700);
3202 + background: var(--primary-hover);
3618 3203 position: absolute;
3619 3204 top: 17px;
3620 3205 right: -28%;
3621 3206 }
3622 3207
3623 -.frm_grid_container > p,
3624 3208 .frm_grid_container > p.frm_form_field,
3625 3209 .frm_grid_container > div.frm_form_field,
3626 3210 #new_fields .frm_grid_container > p {
3627 - margin-top: 8px;
3628 - margin-bottom: 8px;
3211 + margin-top: 7px;
3212 + margin-bottom: 7px;
3629 3213 margin-right: 0;
3630 3214 }
3631 3215
3632 3216 #new_fields div.frm_grid_container > .frm_primary_label {
3633 - margin-top: 8px;
3217 + margin-top: 7px;
3634 3218 }
3635 3219
3636 3220 #new_fields .frm_primary_label + p,
3637 3221 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3665,9 +3249,9 @@
3665 3249 }
3666 3250
3667 3251 .frm_form_builder .frm_radio label,
3668 3252 .frm_form_builder .frm_checkbox label {
3669 - font-size: var(--text-sm);
3253 + font-size: 14px;
3670 3254 }
3671 3255
3672 3256 /* Start copied front-end CSS */
3673 3257 .horizontal_radio .frm_radio,
@@ -3705,64 +3289,22 @@
3705 3289
3706 3290 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3707 3291 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3708 3292 .frm_wrap input[type=checkbox],
3709 -.frm-white-body input[type=checkbox],
3710 3293 .field-group input[type=checkbox],
3711 3294 .frm_scale input[type=radio],
3712 3295 .frm_radio input[type=radio],
3713 3296 .frm_checkbox input[type=checkbox] {
3714 - border: 1px solid var(--grey-300);
3297 + border: 1px solid var(--grey-border);
3715 3298 box-shadow: none;
3716 3299 -webkit-appearance: none;
3717 3300 }
3718 3301
3719 -
3720 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3721 -.frm_wrap input[type=checkbox],
3722 -.frm-white-body input[type=checkbox],
3723 -.field-group input[type=checkbox],
3724 -.frm_checkbox input[type=checkbox] {
3725 - border-radius: 4px;
3726 -}
3727 -
3728 -.frm-white-body input[type="checkbox"]:checked,
3729 -.frm_wrap input[type="checkbox"]:checked {
3730 - background-color: var(--primary-500);
3731 - border-color: var(--primary-500) !important;
3732 -}
3733 -
3734 -.frm-white-body input[type="checkbox"]:checked:focus,
3735 -.frm_wrap input[type="checkbox"]:checked:focus {
3736 - border-color: var(--primary-500);
3737 -}
3738 -
3739 -.frm-white-body input[type="checkbox"]:checked::before,
3740 -.frm_wrap input[type="checkbox"]:checked::before {
3741 - content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3742 - height: 12px;
3743 - width: 12px;
3744 - margin: 1px;
3745 -}
3746 -
3747 3302 .frm_radio input[type="radio"],
3748 3303 .frm_checkbox input[type="checkbox"] {
3749 3304 margin-right: 5px;
3750 3305 }
3751 3306
3752 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3753 - margin: 5px 0;
3754 - width: 18px;
3755 - position: relative; /* override Bootstrap */
3756 -}
3757 -
3758 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3759 - position: relative !important;
3760 - left: calc(50% - 6px);
3761 - top: calc(50% - 6px);
3762 - margin: 0 !important;
3763 -}
3764 -
3765 3307 .frm_inner_field_container {
3766 3308 margin-bottom: 10px;
3767 3309 }
3768 3310
@@ -3788,22 +3330,8 @@
3788 3330 li.ui-state-default.selected > .frm_inner_field_container > label {
3789 3331 max-width: calc(100% - 100px);
3790 3332 }
3791 3333
3792 -.frm-drag-fade {
3793 - background-color: var(--lightest-grey) !important;
3794 - border-radius: 4px;
3795 -}
3796 -
3797 -.frm-drag-fade * {
3798 - opacity: 0;
3799 -}
3800 -
3801 -.frm-dragging .divider_section_only,
3802 -.frm-dragging .frm_field_box {
3803 - pointer-events: none;
3804 -}
3805 -
3806 3334 .frm_form_settings #op-popup, /* 1Password */
3807 3335 .frm_form_settings com-1password-op-button,
3808 3336 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3809 3337 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3938,15 +3466,15 @@
3938 3466 animation: spin 2s linear infinite;
3939 3467 }
3940 3468
3941 3469 .frm-wait:before {
3942 - border-bottom-color: var(--primary-700);
3943 - border-right-color: var(--primary-700);
3470 + border-bottom-color: var(--primary-hover);
3471 + border-right-color: var(--primary-hover);
3944 3472 }
3945 3473
3946 3474 .frm_loading_button.frm-button-secondary:before {
3947 - border-bottom-color: var(--primary-500);
3948 - border-right-color: var(--primary-500);
3475 + border-bottom-color: var(--primary-color);
3476 + border-right-color: var(--primary-color);
3949 3477 }
3950 3478
3951 3479 input[type=submit]:focus {
3952 3480 outline: none !important;
@@ -3970,9 +3498,9 @@
3970 3498 #editorcontainer #dyncontent {
3971 3499 margin: 0;
3972 3500 width: 100%;
3973 3501 padding: 6px;
3974 - line-height: var(--leading);
3502 + line-height: 1.5;
3975 3503 border: 0 none;
3976 3504 outline: none;
3977 3505 -moz-box-sizing: border-box;
3978 3506 -webkit-box-sizing: border-box;
@@ -4018,9 +3546,9 @@
4018 3546 font-size: 12px;
4019 3547 }
4020 3548
4021 3549 .frm_border_bottom {
4022 - border-bottom: 1px solid var(--grey-300);
3550 + border-bottom: 1px solid var(--grey-border);
4023 3551 margin-bottom: 10px;
4024 3552 padding-bottom: 10px;
4025 3553 }
4026 3554
@@ -4031,8 +3559,9 @@
4031 3559 .frm_posttax_opt_list .frm_border_bottom input {
4032 3560 margin-right: 1px;
4033 3561 }
4034 3562
3563 +.frm_logic_row,
4035 3564 .frm_add_remove div.frm_form_field {
4036 3565 padding-bottom: 5px;
4037 3566 }
4038 3567
@@ -4089,47 +3618,18 @@
4089 3618 max-width: 100%;
4090 3619 font-size: inherit;
4091 3620 }
4092 3621
4093 -/* Start entry statuses */
4094 -.frm-entry-status {
4095 - padding: var(--gap-2xs) var(--gap-xs);
4096 - align-items: center;
4097 - border-radius: var(--small-radius);
4098 - text-transform: uppercase;
4099 -}
4100 -
4101 -.frm-entry-status-0 {
4102 - color: #1E561F;
4103 - background: #D5F2DC;
4104 -}
4105 -
4106 -.frm-entry-status-1 {
4107 - color: #7A4D05;
4108 - background: #FFF2D2;
4109 -}
4110 -/* End entry statuses */
4111 -
4112 3622 #frm-options-panel {
4113 - padding: 0 var(--gap-sm);
4114 - color: var(--grey-900);
3623 + padding: 0 15px;
3624 + color: var(--darkest-grey);
4115 3625 }
4116 3626
4117 -.frm-right-panel a.frm_add_logic_link,
4118 3627 #frm-options-panel h3 {
4119 3628 padding: 15px 0;
4120 3629 margin-top: -2px;
4121 3630 }
4122 3631
4123 -.frm-right-panel a.frm_add_logic_link:focus {
4124 - outline: auto;
4125 -}
4126 -
4127 -#frm_style_sidebar h3,
4128 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4129 - padding: 15px 0;
4130 -}
4131 -
4132 3632 .frm_field_key {
4133 3633 background-color: #F7F7F7;
4134 3634 }
4135 3635
@@ -4163,12 +3663,8 @@
4163 3663 .frm-alt-table tr:nth-child(even) {
4164 3664 background-color: var(--sidebar-color);
4165 3665 }
4166 3666
4167 -.frm-alt-table h3 {
4168 - margin-bottom: 0;
4169 -}
4170 -
4171 3667 .form-field .frm_cb_button {
4172 3668 height: 22px;
4173 3669 line-height: 20px;
4174 3670 margin-bottom: 10px;
@@ -4273,9 +3769,9 @@
4273 3769 li.sortable-placeholder {
4274 3770 border: none;
4275 3771 margin: 0;
4276 3772 visibility: visible !important;
4277 - box-shadow: 2px -10px 0 2px var(--primary-500);
3773 + box-shadow: 2px -10px 0 1px var(--primary-color);
4278 3774 }
4279 3775
4280 3776 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4281 3777 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4286,8 +3782,9 @@
4286 3782 #frm_form_editor_container > ul > li > ul {
4287 3783 position: relative;
4288 3784 }
4289 3785
3786 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4290 3787 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4291 3788 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4292 3789 position: absolute;
4293 3790 top: 20px;
@@ -4294,29 +3791,38 @@
4294 3791 bottom: 0;
4295 3792 }
4296 3793
4297 3794 .edit_field_type_divider + li.sortable-placeholder {
4298 - box-shadow: 2px 5px 0 2px var(--primary-500);
3795 + box-shadow: 2px 5px 0 1px var(--primary-color);
4299 3796 }
4300 3797
4301 3798 .start_divider li.sortable-placeholder {
4302 - box-shadow: 2px -5px 0 2px var(--primary-500);
3799 + box-shadow: 2px -5px 0 1px var(--primary-color);
4303 3800 }
4304 3801
4305 -.frm-is-collapsed + .sortable-placeholder {
4306 - box-shadow: 2px 15px 0 2px var(--primary-500);
3802 +.frm_single_option.ui-sortable-placeholder {
3803 + box-shadow: 0 0 1px 1px var(--primary-color);
4307 3804 }
4308 3805
4309 -.frm_single_option.ui-sortable-placeholder {
4310 - box-shadow: 0 0 1px 1px var(--primary-500);
3806 +.frm-is-collapsed + .sortable-placeholder {
3807 + box-shadow: 2px 15px 0 1px var(--primary-color);
4311 3808 }
4312 3809
4313 3810 .frm_sorting > li.edit_field_type_end_divider:first-child,
3811 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3812 +.no-drop-placeholder,
4314 3813 .frm-show-click,
4315 3814 li.ui-state-default.edit_field_type_divider .frm-show-click {
4316 3815 display: none;
4317 3816 }
4318 3817
3818 +.frm_form_field.ui-sortable-helper {
3819 + height: 30px !important;
3820 + background-color: #fff !important;
3821 + overflow: hidden !important;
3822 + box-sizing: border-box;
3823 +}
3824 +
4319 3825 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4320 3826 .frm_form_field.ui-sortable-helper .frm_form_fields,
4321 3827 .frm_form_field.ui-sortable-helper .frm_description,
4322 3828 .frm_form_field.ui-sortable-helper .description {
@@ -4359,8 +3865,16 @@
4359 3865 #new_fields .frm_single_option input[type=text] {
4360 3866 width: calc(100% - 73px);
4361 3867 }
4362 3868
3869 +.frm-right-panel.styling_settings .frm_image_preview_wrapper {
3870 + width: 100%;
3871 +}
3872 +
3873 +.frm-right-panel.styling_settings .frm_image_preview_wrapper .frm_choose_image_box {
3874 + margin-left: 0;
3875 +}
3876 +
4363 3877 .frm-right-panel .frm_single_option a.frm_remove_tag,
4364 3878 .frm_single_option a {
4365 3879 padding-left: 7px;
4366 3880 }
@@ -4418,10 +3932,10 @@
4418 3932 /* Image options for Radio and Checkbox */
4419 3933
4420 3934 .frm_image_options .frm_image_option_container {
4421 3935 --field-border-width: 1px;
4422 - --border-color: var(--grey-300);
4423 - --border-color-active: var(--primary-500);
3936 + --border-color: var(--grey-border);
3937 + --border-color-active: var(--primary-color);
4424 3938 --border-radius: var(--small-radius);
4425 3939 }
4426 3940
4427 3941 .frm_image_option_container svg {
@@ -4475,10 +3989,10 @@
4475 3989 height: 75px;
4476 3990 object-fit: cover;
4477 3991 }
4478 3992
4479 -.frm_list_entry_page img {
4480 - max-width: 100%;
3993 +.frm_list_entry_page .frm_file_link img {
3994 + max-width: 75px;
4481 3995 height: auto;
4482 3996 }
4483 3997
4484 3998 .frm_image_option_container .frm_empty_url {
@@ -4522,13 +4036,13 @@
4522 4036 margin-top: 17px;
4523 4037 }
4524 4038
4525 4039 .frm_image_data {
4526 - margin-left: var(--gap-xs);
4040 + margin-left: 10px;
4527 4041 display: flex;
4528 4042 flex-direction: column;
4529 - font-size: var(--text-sm);
4530 - justify-content: space-around;
4043 + font-size: 14px;
4044 + line-height: 17px;
4531 4045 }
4532 4046
4533 4047 .frm_image_styling_frame {
4534 4048 display: flex;
@@ -4552,9 +4066,10 @@
4552 4066 max-width: 54px;
4553 4067 }
4554 4068
4555 4069 .frm_image_preview_title{
4556 - color: var(--grey-500);
4070 + margin-top: 6px;
4071 + color: rgba(40, 47, 54, 0.65);
4557 4072 overflow: hidden;
4558 4073 white-space: nowrap;
4559 4074 text-overflow: ellipsis;
4560 4075 }
@@ -4560,9 +4075,9 @@
4560 4075 }
4561 4076
4562 4077 .frm_wrap .frm_choose_image_box {
4563 4078 cursor: pointer;
4564 - color: var(--grey-700);
4079 + color: var(--dark-grey);
4565 4080 background-color: #F2F2F2;
4566 4081 margin-left: 24px;
4567 4082 text-align: center;
4568 4083 width: 100%;
@@ -4571,11 +4086,13 @@
4571 4086 .frm_wrap .frm_choose_image_box:hover {
4572 4087 background: #fff;
4573 4088 }
4574 4089
4090 +a.frm_remove_image_option .frmsvg,
4575 4091 a.frm_remove_image_option,
4576 4092 .frm_remove_image_option {
4577 - color: var(--grey-400);
4093 + margin-top: 9px;
4094 + color: rgba(40, 47, 54, 0.4);
4578 4095 cursor: pointer;
4579 4096 }
4580 4097
4581 4098 a.frm_remove_image_option:hover .frmsvg,
@@ -4585,10 +4102,17 @@
4585 4102 }
4586 4103
4587 4104 /* Form settings */
4588 4105
4106 +#form_settings_page label,
4107 +.frm_form_builder label {
4108 + font-weight: normal;
4109 + font-size: 15px;
4110 + color: var(--dark-grey);
4111 +}
4112 +
4589 4113 .frm-form-setting-tabs {
4590 - margin-top: var(--gap-sm) !important;
4114 + margin-top: 20px !important;
4591 4115 }
4592 4116
4593 4117 .frm-right-panel > .postbox {
4594 4118 background-color: transparent;
@@ -4599,44 +4123,40 @@
4599 4123
4600 4124 .frm-right-panel .postbox.frm_with_icons .inside,
4601 4125 .frm-right-panel .postbox .inside,
4602 4126 .frm-right-panel .inside {
4603 - font-size: var(--text-md);
4127 + font-size: 16px;
4604 4128 padding: 15px 20px 20px;
4605 - color: var(--grey-700);
4129 + color: var(--dark-grey);
4606 4130 }
4607 4131
4608 4132 .frm-right-panel .misc-pub-section {
4609 - padding: var(--gap-xs) 0;
4133 + padding: 10px 0;
4134 + line-height: 1.4em;
4610 4135 position: relative;
4611 4136 }
4612 4137
4613 4138 .frm-right-panel .inside a,
4614 4139 .frm-form-setting-tabs a {
4615 - font-size: var(--text-md);
4616 - color: var(--grey-700);
4617 - padding: var(--gap-sm);
4140 + font-size: 16px;
4141 + color: var(--dark-grey);
4142 + padding: 15px 15px 15px 20px;
4618 4143 display: block;
4619 4144 }
4620 4145
4621 -.frm-form-setting-tabs a {
4622 - color: var(--grey-900);
4623 - padding: var(--gap-sm) var(--gap-md);
4624 -}
4625 -
4626 4146 .frm-right-panel .inside a {
4627 4147 padding: 0;
4628 - color: var(--primary-500);
4148 + color: var(--primary-color);
4629 4149 display: inline-block;
4630 4150 }
4631 4151
4632 4152 .frm-right-panel .inside a:hover {
4633 - color: var(--primary-700);
4153 + color: var(--primary-hover);
4634 4154 }
4635 4155
4636 4156 .frm-form-setting-tabs a:hover {
4637 4157 background: var(--sidebar-hover);
4638 - color: var(--grey-900);
4158 + color: var(--dark-grey);
4639 4159 }
4640 4160
4641 4161 .frm-right-panel .inside i,
4642 4162 .frm-right-panel .inside .frmsvg,
@@ -4645,20 +4165,16 @@
4645 4165 margin: 0 5px;
4646 4166 display: inline-block;
4647 4167 width: 20px;
4648 4168 height: 20px;
4649 - color: var(--grey-500);
4169 + color: var(--grey);
4650 4170 }
4651 4171
4652 -.frm-form-setting-tabs a .frmsvg {
4653 - margin: 0;
4654 -}
4655 -
4656 4172 .frm-right-panel .inside a:hover i,
4657 4173 .frm-right-panel .inside a:hover .frmsvg,
4658 4174 .frm-form-setting-tabs a:hover .frmsvg,
4659 4175 .frm-form-setting-tabs a:hover span {
4660 - color: var(--grey-700);
4176 + color: var(--dark-grey);
4661 4177 }
4662 4178
4663 4179 .frm_settings_form .tabs-panel {
4664 4180 padding: 0 25px;
@@ -4672,9 +4188,9 @@
4672 4188
4673 4189 #frm_adv_info .tabs-panel {
4674 4190 min-height: 0 !important;
4675 4191 overflow-x: hidden;
4676 - padding: 0;
4192 + padding: 0 20px;
4677 4193 border: none;
4678 4194 background: transparent;
4679 4195 }
4680 4196
@@ -4683,130 +4199,48 @@
4683 4199 }
4684 4200
4685 4201 .frm_posttax_opt_list,
4686 4202 .frm_submit_logic_rows {
4687 - border: 1px solid var(--grey-300);
4688 - padding: var(--gap-md);
4203 + border: 1px solid var(--grey-border);
4204 + padding: 25px;
4689 4205 border-radius: var(--small-radius);
4690 - margin: 5px 0 5px var(--gap-md);
4206 + margin: 5px 0 5px 25px;
4691 4207 }
4692 4208
4693 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4694 - margin: 0;
4695 -}
4696 -
4697 -/* Color picker CSS */
4698 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4209 +/* Admin toggle */
4210 +.frm_toggle_off,
4211 +.frm_toggle_on {
4212 + display: none;
4213 + color: #fff;
4214 + z-index: 999;
4699 4215 position: absolute;
4700 - margin-left: calc( ( 100% - 35px ) * -1 );
4701 - margin-top: 1px;
4702 - width: calc( 100% - 36px );
4216 + font-size: 10px;
4217 + line-height: 20px;
4218 + left: 6px;
4703 4219 }
4704 4220
4705 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4706 - border: none;
4707 - padding: 5px 8px;
4708 - font-family: inherit;
4709 - color: var(--grey-700);
4710 - font-size: var(--text-md);
4711 - width: 100%;
4712 - line-height: var(--leading);
4713 -}
4714 -
4715 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4716 - display: none !important;
4717 -}
4718 -
4719 -.frm-right-panel .wp-picker-holder {
4720 - position: absolute;
4721 - z-index: 999;
4722 -}
4723 -
4724 -.frm-right-panel .wp-picker-input-wrap label {
4725 - margin-bottom: 0;
4726 -}
4727 -
4728 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4729 - width: 100%;
4730 - overflow: hidden;
4731 - margin: 0 !important;
4732 - height: var(--h-md) !important;
4733 - padding: 0 0 0 var(--gap-lg) !important;
4734 - border-radius: var(--small-radius);
4735 - border-color: var(--grey-300);
4736 -}
4737 -
4738 -.frm-right-panel .wp-color-result-text {
4739 - line-height: var(--leading) !important;
4740 - font-size: var(--text-md);
4741 - background: #fff !important;
4742 - color: var(--grey-900);
4743 - padding: 5px 8px;
4744 - border-color: var(--grey-300);
4745 - text-align: left;
4746 -}
4747 -
4748 -.frm-right-panel .color-alpha {
4749 - width: var(--gap-lg) !important;
4750 -}
4751 -
4752 -.frm_grid_container .wp-picker-container {
4753 - width: 100%;
4754 - position: relative;
4755 -}
4756 -
4757 -.wp-picker-container button.wp-color-result {
4758 - border: 1px solid var(--grey-300) !important;
4759 -}
4760 -
4761 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4762 - max-width: 100%;
4763 - position: relative;
4764 -}
4765 -
4766 -.frm_end .wp-picker-holder {
4767 - margin-left: -145px;
4768 -}
4769 -
4770 -.frm_end.frm6 .wp-picker-holder {
4771 - margin-left: -86px;
4772 -}
4773 -/* End of color picker CSS */
4774 -
4775 -/*
4776 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4777 -To use this element, you can call the FrmHtmlHelper::toggle function.
4778 -*/
4779 -.frm_toggle_opt {
4780 - padding: 0;
4781 - white-space: normal;
4221 +.frm_toggle_off {
4782 4222 display: inline;
4783 - vertical-align: middle;
4784 - font-weight: normal;
4223 + left: auto;
4224 + right: 5px;
4225 + color: var(--dark-grey);
4785 4226 }
4786 4227
4787 -.frm_on_label,
4788 -.frm_off_label {
4789 - color: #444444;
4790 -}
4791 -
4792 4228 .frm_toggle {
4793 4229 position: relative;
4794 4230 display: inline-block;
4795 - width: 40px;
4796 - height: var(--h-xs);
4231 + width: 45px;
4232 + height: 20px;
4797 4233 vertical-align: middle;
4234 + margin: 2px;
4798 4235 }
4799 4236
4800 -.frm_toggle_block {
4801 - display: inline-flex;
4802 - gap: var(--gap-sm);
4803 - align-items: center;
4237 +label > span.frm_toggle {
4238 + margin-right: 15px;
4804 4239 }
4805 4240
4806 -.frm_toggle input, /* Reverse compatibility */
4807 -.frm_toggle_block input {
4808 - display:none !important;
4241 +.frm_toggle input {
4242 + display: none !important;
4809 4243 }
4810 4244
4811 4245 .frm_toggle_slider {
4812 4246 position: absolute;
@@ -4814,44 +4248,26 @@
4814 4248 top: 0;
4815 4249 left: 0;
4816 4250 right: 0;
4817 4251 bottom: 0;
4818 - background-color: var(--grey-border);
4819 4252 transition: .4s;
4820 4253 border-radius: 30px;
4254 + background-color: #fff;
4255 + box-shadow: 0 0 0 2px var(--grey);
4821 4256 }
4822 4257
4823 4258 .frm_toggle_slider:before {
4824 4259 border-radius: 50%;
4825 4260 position: absolute;
4826 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 20 20%27><path d=%27M16.8 4.5l-1.3-1.3L10 8.6 4.5 3.2 3.2 4.5 8.6 10l-5.4 5.5 1.3 1.3 5.5-5.4 5.5 5.4 1.3-1.3-5.4-5.5 5.4-5.5z%27 fill=%27%2398A2B3%27/%3E</svg>");
4827 - height: 22px;
4828 - width: 22px;
4829 - padding: 0 5.5px;
4830 - left: 1px;
4831 - bottom: 1px;
4832 - background-color: white;
4833 - transition: .4s;
4834 - box-sizing: border-box;
4835 - box-shadow: var(--box-shadow-md);
4836 - font-size: 21px;
4837 - line-height: 18px;
4261 + content: "";
4262 + height: 16px;
4263 + width: 16px;
4264 + left: 2px;
4265 + top: 2px;
4266 + transition: .3s;
4267 + background-color: var(--grey);
4838 4268 }
4839 4269
4840 -input:checked + .frm_toggle .frm_toggle_slider {
4841 - background-color: var(--primary-500);
4842 -}
4843 -
4844 -input:focus + .frm_toggle .frm_toggle_slider {
4845 - box-shadow: var(--box-shadow-md);
4846 -}
4847 -
4848 -input:checked + .frm_toggle .frm_toggle_slider:before {
4849 - padding: 0 6px;
4850 - transform: translateX(16px);
4851 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 10 10%27><path d=%27M9.2 2c.2.3.2.7 0 1l-5 5c-.3.2-.6.2-.9 0L.8 5.3a.6.6 0 0 1 .9-.8l2 2 4.6-4.5c.3-.3.6-.3.9 0Z%27 fill=%27%234199FD%27/%3E</svg>");
4852 -}
4853 -
4854 4270 input[disabled] + .frm_toggle_slider {
4855 4271 pointer-events: none;
4856 4272 cursor: text;
4857 4273 opacity: .5;
@@ -4856,53 +4272,16 @@
4856 4272 cursor: text;
4857 4273 opacity: .5;
4858 4274 }
4859 4275
4860 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4861 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4862 -}
4863 -
4864 -.rtl .frm_toggle_opt {
4865 - padding: 0 8px;
4866 -}
4867 -
4868 -.rtl .frm_toggle_slider:before {
4869 - left: 17px;
4870 -}
4871 -
4872 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4873 - transform: none!important;
4874 - left: 1px;
4875 -}
4876 -
4877 -/* Deprecated admin toggle */
4878 -.frm_toggle_off,
4879 -.frm_toggle_on {
4880 - display: none;
4881 - color: #fff;
4882 - z-index: 999;
4883 - position: absolute;
4884 - font-size: 10px;
4885 - line-height: 20px;
4886 - left: 6px;
4887 -}
4888 -
4889 -.frm_toggle_off {
4890 - display: inline;
4891 - left: auto;
4892 - right: 5px;
4893 - color: var(--dark-grey);
4894 -}
4895 -
4896 4276 .frm_toggle_long {
4897 - width: 80% !important;
4277 + width: 80%;
4898 4278 height: 28px;
4899 - display: inline-block !important;
4900 4279 }
4901 4280
4902 4281 .frm_toggle_long .frm_toggle_slider {
4903 - background: var(--primary-700);
4904 - box-shadow: 0 0 0 2px var(--primary-700);
4282 + background: var(--primary-hover);
4283 + box-shadow: 0 0 0 2px var(--primary-hover);
4905 4284 }
4906 4285
4907 4286 .frm_toggle_long .frm_toggle_off,
4908 4287 .frm_toggle_long .frm_toggle_on {
@@ -4927,11 +4306,20 @@
4927 4306 border-radius: var(--border-radius) 0 0 var(--border-radius);
4928 4307 height: 100%;
4929 4308 background-color: #fff;
4930 4309 color: var(--primary-color);
4931 - content: '' !important;
4932 4310 }
4933 4311
4312 +input:checked + .frm_toggle_slider {
4313 + background-color: var(--primary-hover);
4314 + box-shadow: 0 0 0 2px var(--primary-hover);
4315 +}
4316 +
4317 +input:checked + .frm_toggle_slider:before {
4318 + transform: translateX(25px);
4319 + background-color: #fff;
4320 +}
4321 +
4934 4322 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4935 4323 transform: translateX(101%);
4936 4324 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4937 4325 }
@@ -4946,9 +4334,9 @@
4946 4334
4947 4335 .frm_toggle_long .frm_toggle_on,
4948 4336 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4949 4337 display: inline;
4950 - color: var(--primary-500);
4338 + color: var(--primary-color);
4951 4339 font-weight: normal;
4952 4340 }
4953 4341
4954 4342 .frm_toggle_long .frm_toggle_off,
@@ -4956,9 +4344,11 @@
4956 4344 color: #fff;
4957 4345 font-weight: bold;
4958 4346 }
4959 4347
4960 -/* End toggle styling */
4348 +input:focus + .frm_toggle_slider {
4349 + box-shadow: 0 0 1px #008ec2;
4350 +}
4961 4351
4962 4352 /* Global Settings */
4963 4353
4964 4354 .tabs-panel {
@@ -4976,59 +4366,21 @@
4976 4366 margin-right: 20px !important;
4977 4367 display: inline-block !important;
4978 4368 }
4979 4369
4980 -#frm_stripe_icon {
4981 - border-radius: 5px;
4982 -}
4983 -
4984 -#captcha_settings .frm_primary_label {
4985 - margin-top: var(--gap-sm);
4986 -}
4987 -
4988 -.frm-long-icon-buttons {
4989 - display: flex;
4990 - gap: var(--gap-md);
4991 -}
4992 -
4993 -.frm-long-icon-buttons > label {
4994 - border: 1px solid var(--grey-300);
4995 - color: var(--grey-700);
4996 - border-radius: var(--small-radius);
4997 - display: flex;
4998 - padding: var(--gap-sm);
4999 - gap: var(--gap-sm);
5000 - justify-content: center;
5001 - align-items: center;
5002 - width: calc( 33% - var(--gap-sm) );
5003 - box-sizing: border-box;
5004 -}
5005 -
5006 -.frm-long-icon-buttons > label:hover {
5007 - color: var(--primary-500);
5008 -}
5009 -
5010 -.frm-long-icon-buttons input[type=radio] {
5011 - display: none;
5012 -}
5013 -
5014 -.frm-long-icon-buttons input[type=radio]:checked + label {
5015 - border-color: var(--primary-500);
5016 - box-shadow: 0 0 0 1px var(--primary-color);
5017 -}
5018 -
5019 -.frm-long-icon-buttons label > svg {
5020 - height: 21px;
5021 -}
5022 -
5023 4370 .frm-example-icon .frmsvg,
5024 4371 .frm-example-icon i {
5025 4372 height: 20px;
5026 4373 width: 20px;
5027 4374 font-size: 20px;
5028 - color: var(--grey-700);
4375 + color: var(--dark-grey);
5029 4376 }
5030 4377
4378 +.edd_frm_license_row {
4379 + clear: both;
4380 + line-height: 2em;
4381 +}
4382 +
5031 4383 .frm_license_msg {
5032 4384 margin-top: 0;
5033 4385 }
5034 4386
@@ -5055,14 +4407,23 @@
5055 4407
5056 4408 .frm_no_items {
5057 4409 margin: 0 auto 50px;
5058 4410 text-align: center;
5059 - color: var(--grey-700);
4411 + color: var(--dark-grey);
5060 4412 max-width: 500px;
5061 4413 }
5062 4414
4415 +.frm_no_items h2 {
4416 + font-size: 25px;
4417 + margin-bottom: 30px !important;
4418 +}
4419 +
4420 +.frm_no_items p {
4421 + font-size: 14px;
4422 +}
4423 +
5063 4424 .frm-subscribe {
5064 - margin: var(--gap-lg) 0;
4425 + margin: 30px 0;
5065 4426 }
5066 4427
5067 4428 /* Inbox */
5068 4429
@@ -5072,16 +4433,16 @@
5072 4433
5073 4434 .frm_inbox_card {
5074 4435 display: grid;
5075 4436 grid-template-columns: 72px 1fr;
5076 - grid-gap: var(--gap-xs);
5077 - border-bottom: 1px solid var(--grey-300);
5078 - padding: var(--gap-md);
4437 + grid-gap: 15px;
4438 + border-bottom: 1px solid var(--grey-border);
4439 + padding: 25px;
5079 4440 }
5080 4441
5081 4442 .frm_inbox_card_icon {
5082 4443 grid-row: span 3 / span 3;
5083 - padding-top: var(--gap-xs);
4444 + padding-top: 20px;
5084 4445 text-align: center
5085 4446 }
5086 4447
5087 4448 .frm_inbox_card_icon svg {
@@ -5100,8 +4461,11 @@
5100 4461 border: none;
5101 4462 text-transform: none;
5102 4463 margin: 0;
5103 4464 padding: 0;
4465 + font-weight: 600;
4466 + color: var(--medium-grey);
4467 + font-size: 16px;
5104 4468 }
5105 4469
5106 4470 .frm_inbox_date {
5107 4471 text-align: right;
@@ -5129,8 +4493,37 @@
5129 4493 margin-left: 2px;
5130 4494 vertical-align: text-bottom;
5131 4495 }
5132 4496
4497 +/* Styles tabs */
4498 +
4499 +#frm_styling_form #frm_delete_style {
4500 + padding-right: 10px;
4501 +}
4502 +
4503 +#frm_styling_form #frm_delete_style .frmsvg {
4504 + vertical-align: -webkit-baseline-middle;
4505 +}
4506 +
4507 +.frm_pro_form .frm_form_field.frm_lite_style,
4508 +.frm_pro_form .frm_lite_style {
4509 + display: none !important;
4510 +}
4511 +
4512 +label.default-style-box input[type="checkbox"] {
4513 + vertical-align: middle;
4514 +}
4515 +
4516 +#frm_styling_form .frm_form_field input[type="checkbox"],
4517 +#frm_styling_form .frm_form_field input[type="radio"] {
4518 + vertical-align: bottom;
4519 +}
4520 +
4521 +#frm_styling_form .howto span {
4522 + float: none;
4523 + margin-top: 0;
4524 +}
4525 +
5133 4526 /* Import/Export */
5134 4527 .csv_opts #frm_csv_col_sep {
5135 4528 width: 45px;
5136 4529 }
@@ -5181,9 +4574,9 @@
5181 4574 padding: 0;
5182 4575 }
5183 4576
5184 4577 .frm-feature-banner {
5185 - background: var(--grey-700);
4578 + background: var(--dark-grey);
5186 4579 color: #fff;
5187 4580 border-radius: var(--small-radius);
5188 4581 padding: 20px;
5189 4582 margin: 10px 0;
@@ -5189,9 +4582,9 @@
5189 4582 margin: 10px 0;
5190 4583 }
5191 4584
5192 4585 .frm-feature-banner p {
5193 - font-size: var(--text-sm);
4586 + font-size: 14px;
5194 4587 }
5195 4588
5196 4589 .frm-feature-banner .dismiss {
5197 4590 margin-top: -10px;
@@ -5226,31 +4619,29 @@
5226 4619 /*Form Settings Tab*/
5227 4620
5228 4621 h2.frm-h2,
5229 4622 .frm_form_settings h2 {
5230 - border-bottom: 1px solid var(--grey-300);
5231 - color: var(--grey-900);
5232 - font-weight: 400 !important;
4623 + border-bottom: 1px solid var(--grey-border);
4624 + color: var(--dark-grey);
4625 + font-size: 20px !important;
4626 + font-weight: 500 !important;
5233 4627 padding: 9px 0 5px;
5234 4628 margin: 0;
5235 4629 }
5236 4630
5237 4631 .frm_settings_form h3,
5238 -.frm_form_settings h3,
5239 -.frm_form_settings span.frm_add_logic_link {
5240 - font-size: var(--text-md);
5241 - border-top: 1px solid var(--grey-300);
5242 - padding-top: var(--gap-sm);
5243 - margin: var(--gap-sm) 0;
4632 +.frm_form_settings h3 {
4633 + font-size: 16px;
4634 + border-top: 1px solid var(--grey-border);
4635 + padding-top: 10px;
5244 4636 font-weight: normal;
5245 4637 text-transform: uppercase;
5246 4638 color: var(--medium-grey);
5247 - display: block;
5248 4639 }
5249 4640
5250 4641 .frm_form_settings .howto {
5251 - color: var(--grey-500);
5252 - font-size: var(--text-sm);
4642 + color: var(--medium-grey);
4643 + font-size: 15px;
5253 4644 margin-top: 8px;
5254 4645 }
5255 4646
5256 4647 .frm_form_settings .advanced_settings .form-table {
@@ -5265,10 +4656,18 @@
5265 4656 width: 95%;
5266 4657 }
5267 4658
5268 4659 .frm_wrap .ui-autocomplete {
4660 + box-shadow: none;
4661 + border: 1px solid var(--grey-border);
4662 + border-radius: var(--small-radius);
4663 + background: var(--lightest-grey);
4664 + position: absolute;
5269 4665 padding: 3px 0;
4666 + font-size: 15px;
5270 4667 max-height: 310px;
4668 + overflow-y: auto;
4669 + overflow-x: hidden;
5271 4670 }
5272 4671
5273 4672 .frm_wrap .ui-widget {
5274 4673 font-family: inherit;
@@ -5274,15 +4673,26 @@
5274 4673 font-family: inherit;
5275 4674 }
5276 4675
5277 4676 .frm_wrap .ui-autocomplete li {
5278 - padding: 2px 4px;
4677 + padding: 2px 10px;
5279 4678 background: none;
5280 - color: var(--grey-700);
4679 + color: var(--dark-grey);
5281 4680 border: none;
5282 4681 font-weight: normal;
5283 4682 }
5284 4683
4684 +.frm_wrap .ui-autocomplete li div.ui-state-active,
4685 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4686 + background: rgb(65, 153, 253);
4687 + color: #fff;
4688 +}
4689 +
4690 +.frm_wrap .ui-autocomplete .ui-menu-item-wrapper {
4691 + padding: 2px 10px;
4692 + border-radius: var(--small-radius);
4693 +}
4694 +
5285 4695 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5286 4696 border: none;
5287 4697 font-weight: inherit;
5288 4698 }
@@ -5321,9 +4731,9 @@
5321 4731 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5322 4732 height: 10px;
5323 4733 }
5324 4734
5325 -#frm_adv_info .frm_noallow {
4735 +.frm_page_container #frm_adv_info .frm_noallow {
5326 4736 display: none;
5327 4737 }
5328 4738
5329 4739 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5358,9 +4768,9 @@
5358 4768 #frm_notification_settings .widget-top .widget-action,
5359 4769 #frm_form_editor_container .widget-top .widget-action {
5360 4770 border: 0;
5361 4771 margin: 0;
5362 - padding: 8px;
4772 + padding: 10px;
5363 4773 background: 0 0;
5364 4774 cursor: pointer;
5365 4775 outline: 0;
5366 4776 }
@@ -5365,12 +4775,12 @@
5365 4775 outline: 0;
5366 4776 }
5367 4777
5368 4778 #frm_email_addon_menu {
5369 - border: 1px solid var(--grey-300);
5370 - padding: var(--gap-sm);
4779 + border: 1px solid var(--grey-border);
4780 + padding: 15px;
5371 4781 border-radius: 4px;
5372 - margin: var(--gap-md) 0 var(--gap-sm);
4782 + margin: 25px 0 15px;
5373 4783 }
5374 4784
5375 4785 #frm_email_addon_menu .frm-search {
5376 4786 float: right;
@@ -5381,12 +4791,8 @@
5381 4791 clear: none;
5382 4792 padding-top: 7px;
5383 4793 }
5384 4794
5385 -.frm_email_settings .widget .widget-top {
5386 - background-color: var(--sidebar-color);
5387 -}
5388 -
5389 4795 .frm_email_settings .widget .widget-top,
5390 4796 .frm_email_settings .widget .widget-top h3 {
5391 4797 cursor: pointer !important;
5392 4798 }
@@ -5391,17 +4797,23 @@
5391 4797 cursor: pointer !important;
5392 4798 }
5393 4799
5394 4800 .frm_email_settings .widget {
5395 - margin-bottom: var(--gap-sm);
4801 + margin-bottom: 15px;
4802 + line-height: 1.4em;
4803 + padding: 0;
5396 4804 }
5397 4805
4806 +.frm_email_settings .widget:last-of-type {
4807 + margin-bottom: 20px;
4808 +}
4809 +
5398 4810 .frm_form_action_settings .widget-top {
5399 4811 box-shadow: none;
5400 - border-color: var(--grey-300);
5401 - border-radius: var(--small-radius);
4812 + border-color: var(--grey-border);
4813 + border-radius: 4px;
5402 4814 background: var(--lightest-grey);
5403 - color: var(--grey-700);
4815 + color: var(--dark-grey);
5404 4816 }
5405 4817
5406 4818 .frm_form_action_settings:hover .widget-top {
5407 4819 border-color: var(--grey);
@@ -5413,9 +4825,9 @@
5413 4825 border-bottom: none;
5414 4826 }
5415 4827
5416 4828 .frm_form_action_settings.open:hover .widget-top {
5417 - border-color: var(--grey-300);
4829 + border-color: var(--grey-border);
5418 4830 }
5419 4831
5420 4832 .frm_form_action_settings > .widget-inside {
5421 4833 display: none;
@@ -5427,9 +4839,9 @@
5427 4839
5428 4840 .frm_form_action_settings .widget-inside {
5429 4841 min-height: 25px;
5430 4842 padding: 15px;
5431 - border-color: var(--grey-300);
4843 + border-color: var(--grey-border);
5432 4844 border-bottom-left-radius: 4px;
5433 4845 border-bottom-right-radius: 4px;
5434 4846 }
5435 4847
@@ -5437,14 +4849,14 @@
5437 4849 .frm_form_action_settings .widget-title h3 {
5438 4850 display: inline-block;
5439 4851 border-bottom: none;
5440 4852 padding: 10px 10px 5px;
5441 - font-size: var(--text-md);
4853 + font-size: 16px;
5442 4854 font-weight: 500;
5443 4855 }
5444 4856
5445 4857 #frm_email_addon_menu h3 {
5446 - margin: 0 0 var(--gap-sm);
4858 + margin: 0 0 15px;
5447 4859 clear: both;
5448 4860 }
5449 4861
5450 4862 .frm_single_api_settings p > label {
@@ -5480,9 +4892,9 @@
5480 4892 }
5481 4893
5482 4894 #frm-hide-groups,
5483 4895 #frm-show-groups {
5484 - font-size: var(--text-md);
4896 + font-size: 16px;
5485 4897 float: right;
5486 4898 }
5487 4899
5488 4900 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5489,16 +4901,16 @@
5489 4901 outline: none;
5490 4902 }
5491 4903
5492 4904 .frm_actions_list a {
5493 - font-size: var(--text-sm);
5494 - color: var(--grey-700);
4905 + font-size: 14px;
4906 + color: var(--dark-grey);
5495 4907 word-break: break-word;
5496 4908 }
5497 4909
5498 4910 .frm_actions_list span.frm-outer-circle {
5499 4911 /* 50px total with 30px content */
5500 - background-color: var(--grey-100);
4912 + background-color: var(--sidebar-color);
5501 4913 padding: 10px;
5502 4914 text-align: center;
5503 4915 border-radius: 50%;
5504 4916 display: block;
@@ -5504,13 +4916,12 @@
5504 4916 display: block;
5505 4917 width: 30px;
5506 4918 height: 30px;
5507 4919 margin: 0 auto 15px;
5508 - line-height: 1;
5509 4920 }
5510 4921
5511 4922 .frm_email_settings .widget-title h4 {
5512 - color: var(--grey-700);
4923 + color: var(--dark-grey);
5513 4924 }
5514 4925
5515 4926 .frm_disabled_action .widget-title h4 {
5516 4927 color: var(--grey);
@@ -5526,17 +4937,16 @@
5526 4937 }
5527 4938
5528 4939 span.frm-inner-circle,
5529 4940 .frm_email_settings .widget-title .frm_form_action_icon {
5530 - background-color: var(--grey-400);
4941 + background-color: var(--grey-border);
5531 4942 border-radius: 50%;
5532 4943 display: inline-block;
5533 4944 text-align: center;
5534 - line-height: 1;
5535 4945 }
5536 4946
5537 4947 span.frm-inner-circle {
5538 - background-color: var(--primary-700);
4948 + background-color: var(--primary-hover);
5539 4949 height: 22px;
5540 4950 width: 22px;
5541 4951 padding: 4px;
5542 4952 color: #fff;
@@ -5549,9 +4959,9 @@
5549 4959 .frm_email_settings .widget-title .frm_form_action_icon {
5550 4960 height: 15px;
5551 4961 width: 15px;
5552 4962 padding: 5px;
5553 - color: #fff;
4963 + color: var(--lightest-grey);
5554 4964 vertical-align: middle;
5555 4965 }
5556 4966
5557 4967 .frm_actions_list .frmsvg,
@@ -5572,9 +4982,9 @@
5572 4982 }
5573 4983
5574 4984 span.frm-inner-circle.frm-inverse {
5575 4985 background-color: transparent;
5576 - color: var(--primary-700);
4986 + color: var(--primary-hover);
5577 4987 padding: 0;
5578 4988 height: 30px;
5579 4989 width: 100%;
5580 4990 }
@@ -5580,9 +4990,9 @@
5580 4990 }
5581 4991
5582 4992 .frm_actions_list span.frm-inverse i,
5583 4993 .frm_actions_list span.frm-inverse .frmsvg {
5584 - color: var(--primary-700);
4994 + color: var(--primary-hover);
5585 4995 height: 30px;
5586 4996 width: 30px;
5587 4997 font-size: 30px;
5588 4998 padding: 0;
@@ -5594,9 +5004,9 @@
5594 5004 font-size: 30px;
5595 5005 }
5596 5006
5597 5007 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5598 - background: #fff;
5008 + background: transparent;
5599 5009 padding: 0;
5600 5010 height: 24px;
5601 5011 width: 24px;
5602 5012 }
@@ -5602,17 +5012,18 @@
5602 5012 }
5603 5013
5604 5014 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5605 5015 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5606 - color: var(--grey-400);
5016 + color: var(--grey-border);
5607 5017 height: 24px;
5608 5018 width: 24px;
5609 5019 font-size: 24px;
5020 + line-height: 1em;
5610 5021 }
5611 5022
5612 5023 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5613 5024 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5614 - color: var(--grey-500);
5025 + color: var(--grey);
5615 5026 }
5616 5027
5617 5028 .frm_email_icons {
5618 5029 padding: 10px 0 5px 6px;
@@ -5623,8 +5034,9 @@
5623 5034 margin-left: 8px;
5624 5035 color: var(--grey);
5625 5036 opacity: 0;
5626 5037 transition: all .2s ease;
5038 + vertical-align: middle;
5627 5039 }
5628 5040
5629 5041 .frm_email_icons a .frmsvg {
5630 5042 color: var(--grey);
@@ -5643,8 +5055,16 @@
5643 5055 .frm_actions_list .frm_inactive_action i {
5644 5056 opacity: .4;
5645 5057 }
5646 5058
5059 +.frm-no-margin {
5060 + margin: 0;
5061 +}
5062 +
5063 +.frm-no-border {
5064 + border: none !important;
5065 +}
5066 +
5647 5067 table td, .form-table tr td {
5648 5068 vertical-align: top;
5649 5069 }
5650 5070
@@ -5671,12 +5091,8 @@
5671 5091 #frm_notification_settings .frm_form_action_settings td p {
5672 5092 padding: 7px 0;
5673 5093 }
5674 5094
5675 -#permissions_settings_settings .frm_grid_container {
5676 - align-items: center;
5677 -}
5678 -
5679 5095 #frm_notification_settings .form-table > tbody > tr > th {
5680 5096 width: 150px;
5681 5097 font-weight: normal;
5682 5098 padding-right: 10px;
@@ -5698,8 +5114,9 @@
5698 5114 #frm_notification_settings .frm_left_label {
5699 5115 /* For add-ons that haven't been updated for 4.0 */
5700 5116 float: none;
5701 5117 width: auto !important;
5118 + line-height: 1;
5702 5119 }
5703 5120
5704 5121 .frm-fields .frm_autoresponder_rows select {
5705 5122 width: auto;
@@ -5712,17 +5129,16 @@
5712 5129 width: 100%;
5713 5130 }
5714 5131
5715 5132 #frm_notification_settings .frm_email_buttons {
5716 - padding: var(--gap-2xs);
5133 + padding: 7px;
5717 5134 background: var(--light-blue);
5718 - color: var(--primary-700);
5719 - border-radius: var(--small-radius);
5135 + color: var(--primary-hover);
5136 + border-radius: 4px;
5720 5137 border-color: var(--blue-border);
5721 - line-height: 1;
5138 + line-height: 1em;
5722 5139 height: auto;
5723 - min-height: 12px;
5724 - font-size: var(--text-xs);
5140 + font-size: 12px;
5725 5141 box-shadow: none;
5726 5142 }
5727 5143
5728 5144 .frm_reply_to_container,
@@ -5727,31 +5143,34 @@
5727 5143
5728 5144 .frm_reply_to_container,
5729 5145 .frm_bcc_cc_container {
5730 5146 float: right;
5731 - margin: -4px 0 0;
5147 + margin: -8px 0 0;
5732 5148 z-index: 1;
5733 5149 position: relative;
5734 5150 }
5735 5151
5736 5152 .frm_email_row .frm_cancel1_icon:before {
5153 + line-height: 1;
5737 5154 vertical-align: bottom;
5738 5155 }
5739 5156
5157 +.frm_action_id {
5158 + padding-top: 10px;
5159 +}
5160 +
5740 5161 .frm_logic_field_opts {
5741 5162 max-width: 35%;
5742 5163 }
5743 5164
5744 5165 .frm-inline-select,
5745 -p.frm-inline-select,
5746 5166 #frm_submit_logic_row,
5747 5167 .frm_logic_rows .frm-collapse-me {
5748 - line-height: var(--h-md) !important;
5168 + line-height: 30px;
5749 5169 }
5750 5170
5751 -.frm_logic_row {
5752 - padding: var(--gap-xs) 0 0;
5753 - align-items: center;
5171 +.frm_logic_row:first-of-type {
5172 + padding-top: 8px;
5754 5173 }
5755 5174
5756 5175 .frm-single-settings .frm_logic_row > select {
5757 5176 max-width: 32.5% !important;
@@ -5788,8 +5207,13 @@
5788 5207 margin-bottom: 0;
5789 5208 padding: 0;
5790 5209 }
5791 5210
5211 +.frm_form_settings input[type="text"] {
5212 + line-height: normal;
5213 + height: auto;
5214 +}
5215 +
5792 5216 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5793 5217 padding-bottom: 0;
5794 5218 }
5795 5219
@@ -5798,9 +5222,9 @@
5798 5222 padding-right: 15px;
5799 5223 }
5800 5224
5801 5225 #form_global_settings h3 {
5802 - font-size: var(--text-sm);
5226 + font-size: 14px;
5803 5227 margin-top: 25px;
5804 5228 }
5805 5229
5806 5230 #form_global_settings .tabs-panel + h3 {
@@ -5815,9 +5239,9 @@
5815 5239 border-top: 1px solid #eee;
5816 5240 border-bottom: none;
5817 5241 margin: 15px -15px 0;
5818 5242 padding: 8px 15px;
5819 - font-size: var(--text-sm);
5243 + font-size: 14px;
5820 5244 }
5821 5245
5822 5246 #poststuff .frm_form_settings h3.frm_first_h3,
5823 5247 #poststuff h3.frm_first_h3 {
@@ -5828,8 +5252,20 @@
5828 5252 h3.frm_add_logic_link {
5829 5253 margin-bottom: 0 !important;
5830 5254 }
5831 5255
5256 +a.frm_add_logic_link {
5257 + display: block;
5258 + text-align: center;
5259 + margin: 10px auto;
5260 + padding: 10px;
5261 + width: 80%;
5262 + max-width: 290px;
5263 + font-size: 19px;
5264 + border: 1px solid var(--primary-color);
5265 + border-radius: var(--border-radius);
5266 +}
5267 +
5832 5268 a.frm_add_logic_link.frm_hidden {
5833 5269 display: none;
5834 5270 }
5835 5271
@@ -5849,9 +5285,9 @@
5849 5285 bottom: 0;
5850 5286 }
5851 5287
5852 5288 .frm_right_addon input {
5853 - padding-right: var(--gap-lg);
5289 + padding-right: 30px;
5854 5290 }
5855 5291
5856 5292 .frm_icon_font {
5857 5293 color: #A0A0A0;
@@ -5857,12 +5293,8 @@
5857 5293 color: #A0A0A0;
5858 5294 color: var(--grey);
5859 5295 }
5860 5296
5861 -.frm-fields label .frm_icon_font {
5862 - font-size: inherit;
5863 -}
5864 -
5865 5297 .misc-pub-revisions.frm_icon_font,
5866 5298 .misc-pub-revisions.frm_icon_font:hover {
5867 5299 color: inherit;
5868 5300 }
@@ -5949,10 +5381,10 @@
5949 5381 position: relative;
5950 5382 top: 2px;
5951 5383 }
5952 5384
5953 -.frm-field-action-icons > a {
5954 - font-size: var(--text-md);
5385 +.frm-field-action-icons a {
5386 + font-size: 16px;
5955 5387 width: 17px;
5956 5388 }
5957 5389
5958 5390 .frm-field-action-icons a:hover {
@@ -5962,26 +5394,21 @@
5962 5394 .frm-field-action-icons .dropdown {
5963 5395 display: inline-block;
5964 5396 }
5965 5397
5966 -.frm-field-action-icons > a .frmsvg {
5967 - color: var(--grey-500) !important;
5398 +.frm-field-action-icons a .frmsvg {
5399 + color: #9EA9B8 !important;
5968 5400 font-size: 17px;
5969 5401 width: 17px;
5970 5402 height: 17px;
5971 5403 }
5972 5404
5973 -.frm-field-action-icons > a .frmsvg,
5974 -.frm-field-action-icons > div > a .frmsvg {
5975 - vertical-align: baseline;
5976 -}
5977 -
5978 5405 .edit_field_type_end_divider .frm-field-action-icons {
5979 5406 display: none !important;
5980 5407 }
5981 5408
5982 5409 .frm-move {
5983 - cursor: grab;
5410 + cursor: move;
5984 5411 }
5985 5412
5986 5413 span.howto {
5987 5414 display: inline;
@@ -6027,9 +5454,9 @@
6027 5454 margin-bottom: 10px;
6028 5455 }
6029 5456
6030 5457 .frm_no_entries_form .frm_no_entries_text {
6031 - line-height: var(--leading);
5458 + line-height: 200%;
6032 5459 }
6033 5460
6034 5461 #form_entries_page #the-list .no-items {
6035 5462 height: 240px; /* Equals to the max height of search dropdown */
@@ -6058,10 +5485,9 @@
6058 5485 }
6059 5486
6060 5487 .frm_wrap .google-visualization-table-tr-head,
6061 5488 .frm_wrap .google-visualization-table-tr-head th {
6062 - white-space: pre-wrap;
6063 - font-size: var(--text-md);
5489 + font-size: 16px;
6064 5490 font-weight: 400 !important;
6065 5491 text-align: left;
6066 5492 }
6067 5493
@@ -6077,8 +5503,12 @@
6077 5503 width: 20%;
6078 5504 min-width: 175px;
6079 5505 }
6080 5506
5507 +#form_reports_page h2 {
5508 + margin-top: 2em !important;
5509 +}
5510 +
6081 5511 /* Views Page */
6082 5512 #form_views_page img.frm_no_views {
6083 5513 max-width: 100%;
6084 5514 }
@@ -6188,9 +5618,9 @@
6188 5618 }
6189 5619
6190 5620 #frm-show-fields {
6191 5621 min-height: 350px;
6192 - padding: 0 0 35px;
5622 + padding: 10px 0 35px;
6193 5623 margin: 0;
6194 5624 position: relative;
6195 5625 }
6196 5626
@@ -6197,27 +5627,8 @@
6197 5627 .frm-has-fields #frm-show-fields {
6198 5628 min-height: 50px;
6199 5629 }
6200 5630
6201 -#frm_builder_page li[data-ftype="gateway"] {
6202 - /* Gateway fields are included for add-on compatibility but we do not want it to be visible. */
6203 - display: none;
6204 -}
6205 -
6206 -#frm_builder_page .frm-lite-credit-card-element,
6207 -body.frm-admin-page-styles .frm-lite-credit-card-element {
6208 - position: relative;
6209 -}
6210 -
6211 -#frm_builder_page .frm-lite-credit-card-element > div,
6212 -body.frm-admin-page-styles .frm-lite-credit-card-element > div {
6213 - position: absolute;
6214 - top: calc( 50% - 1px);
6215 - transform: translateY(-50%);
6216 - right: 10px;
6217 - color: #d0d4dd;
6218 -}
6219 -
6220 5631 #frm_builder_page #frm_field_group_controls {
6221 5632 position: absolute;
6222 5633 padding: 5px;
6223 5634 border-radius: 4px 4px 0 0;
@@ -6255,10 +5666,11 @@
6255 5666 .frm-field-group-hover-target #frm_field_group_controls {
6256 5667 visibility: visible;
6257 5668 }
6258 5669
6259 -#frm_field_group_controls .dropdown-item a span {
6260 - color: var(--grey-700);
5670 +#frm_field_group_controls .dropdown-item a span,
5671 +.frm-field-action-icons .dropdown-item a span {
5672 + color: var(--dark-grey);
6261 5673 }
6262 5674
6263 5675 #frm_field_group_controls .dropdown-item a:hover {
6264 5676 text-decoration: none;
@@ -6374,16 +5786,15 @@
6374 5786 }
6375 5787
6376 5788 .frm-page-collapsed .frm_clone_icon,
6377 5789 .frm-page-collapsed .frm_delete_field,
6378 -.frm-page-collapsed .frm_clone_field,
6379 -.frm-section-collapsed .frm_clone_icon {
5790 +.frm-section-collapsed .frm_clone_icon,
5791 +.frm-section-collapsed .frm_delete_field {
6380 5792 opacity: .5;
6381 5793 cursor: not-allowed;
6382 5794 }
6383 5795
6384 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6385 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5796 +.edit_field_type_summary .frm_clone_field {
6386 5797 display: none !important;
6387 5798 }
6388 5799
6389 5800 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6415,9 +5826,9 @@
6415 5826 content: '';
6416 5827 display: block;
6417 5828 padding: 2px 0;
6418 5829 line-height: 1px;
6419 - border-top: 2px solid var(--grey-300);
5830 + border-top: 2px solid var(--grey-border);
6420 5831 top: -2px;
6421 5832 position: absolute;
6422 5833 width: 100%;
6423 5834 transition: .5s border-color ease-in-out;
@@ -6429,9 +5840,8 @@
6429 5840 }
6430 5841
6431 5842 .frm-section-collapsed .divider_section_only:hover:after,
6432 5843 li.selected.frm-section-collapsed .divider_section_only:before,
6433 -li.selected.frm-section-collapsed .divider_section_only:after,
6434 5844 .divider_section_only:hover:before,
6435 5845 li.selected .divider_section_only:before {
6436 5846 border-color: transparent;
6437 5847 }
@@ -6439,10 +5849,10 @@
6439 5849 .frm_sorting li.ui-state-default.edit_field_type_divider {
6440 5850 overflow: visible;
6441 5851 position: relative;
6442 5852 padding: 0 0 0 20px;
6443 - margin: 25px 0 0 -5px;
6444 - border-left: 1px solid var(--primary-700);
5853 + margin: 25px 0 0 -20px;
5854 + border-left: 1px solid var(--primary-hover);
6445 5855 transition: border 0.7s ease-out;
6446 5856 }
6447 5857
6448 5858 .frm-section-collapsed {
@@ -6450,9 +5860,9 @@
6450 5860 }
6451 5861
6452 5862 .frm_sorting li.edit_field_type_end_divider,
6453 5863 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6454 - margin: 0 0 var(--gap-sm);
5864 + margin: 0 0 15px;
6455 5865 }
6456 5866
6457 5867 .frm-first-page .frm_prev_page {
6458 5868 display: none;
@@ -6457,19 +5867,22 @@
6457 5867 .frm-first-page .frm_prev_page {
6458 5868 display: none;
6459 5869 }
6460 5870
6461 -#frm_builder_page .frm_remove_form_row.frm_button,
6462 -#frm_builder_page .frm_add_form_row.frm_button {
5871 +#frm-form-button button,
5872 +.frm_remove_form_row.frm_button,
5873 +.frm_add_form_row.frm_button,
5874 +.frm-white-body .frm-preview-buttons button {
6463 5875 border-radius: var(--small-radius);
6464 5876 border: 1px solid var(--blue-border);
5877 + color: var(--primary-color);
6465 5878 }
6466 5879
6467 -#frm_builder_page .frm_remove_form_row .frmsvg,
6468 -#frm_builder_page .frm_remove_form_row i:before,
6469 -#frm_builder_page .frm_add_form_row .frmsvg,
6470 -#frm_builder_page .frm_add_form_row i:before {
6471 - color: var(--primary-700);
5880 +.frm_wrap .frm_remove_form_row .frmsvg,
5881 +.frm_remove_form_row i:before,
5882 +.frm_wrap .frm_add_form_row .frmsvg,
5883 +.frm_add_form_row i:before {
5884 + color: var(--primary-hover);
6472 5885 }
6473 5886
6474 5887 .frm-preview-buttons .frm_button_submit {
6475 5888 margin: 0 5px;
@@ -6475,10 +5888,10 @@
6475 5888 margin: 0 5px;
6476 5889 }
6477 5890
6478 5891 .frm-page-break {
6479 - border-top: 1px dashed var(--primary-700);
6480 - margin-top: var(--gap-lg);
5892 + border-top: 1px dashed var(--primary-hover);
5893 + margin-top: 30px;
6481 5894 position: relative;
6482 5895 }
6483 5896
6484 5897 .edit_field_type_divider:before,
@@ -6491,9 +5904,9 @@
6491 5904 width: 4px;
6492 5905 height: 4px;
6493 5906 background-color: #fff;
6494 5907 border-radius: 50%;
6495 - border: 1px solid var(--primary-700);
5908 + border: 1px solid var(--primary-hover);
6496 5909 text-rendering: auto;
6497 5910 -webkit-font-smoothing: antialiased;
6498 5911 }
6499 5912
@@ -6515,12 +5928,13 @@
6515 5928 width: 20px;
6516 5929 height: 20px;
6517 5930 left: -11px;
6518 5931 top: 0;
6519 - background: var(--primary-700);
5932 + background: var(--primary-hover);
6520 5933 text-align: center;
6521 5934 color: #fff;
6522 5935 font-size: 13px;
5936 + line-height: 22px;
6523 5937 }
6524 5938
6525 5939 .edit_field_type_divider:before{
6526 5940 font-family: 's11-fp';
@@ -6541,20 +5955,20 @@
6541 5955
6542 5956
6543 5957 .frm_sorting li.edit_field_type_divider:hover,
6544 5958 .frm_sorting li.edit_field_type_divider.selected {
6545 - border-left-color: var(--primary-500);
5959 + border-left-color: var(--primary-color);
6546 5960 }
6547 5961
6548 5962 .edit_field_type_divider.selected:before,
6549 5963 .edit_field_type_divider:hover:before {
6550 - border-color: var(--primary-500);
6551 - background: var(--primary-500);
5964 + border-color: var(--primary-color);
5965 + background: var(--primary-color);
6552 5966 }
6553 5967
6554 5968 .edit_field_type_divider.selected:after,
6555 5969 .edit_field_type_divider:hover:after {
6556 - border-color: var(--primary-500);
5970 + border-color: var(--primary-color);
6557 5971 }
6558 5972
6559 5973 .frm-section-collapsed:after {
6560 5974 border-color: transparent !important;
@@ -6562,11 +5976,19 @@
6562 5976 }
6563 5977
6564 5978 .frm-page-break .frm-collapse-page.button {
6565 5979 margin-left: 46%;
6566 - margin-top: calc( -28px / 2 );
5980 + margin-top: -15px;
5981 + background-color: #fff;
5982 + border-color: var(--primary-hover) !important;
5983 + color: var(--primary-hover);
6567 5984 }
6568 5985
5986 +#frm-fake-page .frm-collapse-page.button {
5987 + border-color: var(--grey) !important;
5988 + color: var(--grey);
5989 +}
5990 +
6569 5991 #frm-fake-page.frm-page-collapsed {
6570 5992 margin-bottom: 0;
6571 5993 }
6572 5994
@@ -6572,15 +5994,15 @@
6572 5994
6573 5995 .frm-page-collapsed {
6574 5996 position: relative;
6575 5997 overflow: visible !important;
6576 - margin-bottom: var(--gap-lg);
5998 + margin-bottom: 30px;
6577 5999 }
6578 6000
6579 6001 .frm-page-collapsed:after {
6580 6002 content: '';
6581 6003 display: block;
6582 - border: 1px dashed var(--grey-300);
6004 + border: 1px dashed var(--grey-border);
6583 6005 border-left: none;
6584 6006 border-right: none;
6585 6007 height: 6px;
6586 6008 position: absolute;
@@ -6587,40 +6009,31 @@
6587 6009 width: calc( 100% - 10px );
6588 6010 bottom: -15px;
6589 6011 }
6590 6012
6591 -.frm-collapse-page .frmsvg,
6592 6013 .frm-collapse-page .frm_arrowdown6_icon {
6593 - width: var(--text-sm);
6594 - height: var(--text-sm);
6595 - font-size: var(--text-sm);
6014 + width: 16px;
6596 6015 text-align: center;
6597 6016 margin-left: 2px;
6598 - color: currentColor;
6017 + color: var(--primary-hover);
6599 6018 }
6600 6019
6601 6020 #frm-fake-page .frm_arrowdown6_icon {
6602 - color: currentColor;
6021 + color: var(--grey);
6603 6022 }
6604 6023
6024 +#frm-fake-page .frm-collapse-page:hover,
6025 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
6026 +.frm-collapse-page:hover .frm_arrowdown6_icon {
6027 + color: #fff;
6028 +}
6029 +
6605 6030 .frm-collapsed i:before,
6031 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6606 6032 .frm-page-collapsed .frm_arrowdown6_icon:before {
6607 6033 content: '\e913';
6608 6034 }
6609 6035
6610 -.frm-collapse-section svg {
6611 - fill: var(--primary-color);
6612 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6613 -}
6614 -
6615 -.frm-collapse-section:hover svg {
6616 - fill: var(--primary-700);
6617 -}
6618 -
6619 -.frm-section-collapsed .frm-collapse-section svg {
6620 - transform: rotate(-90deg);
6621 -}
6622 -
6623 6036 .open .widget-top .frm_arrow_right_icon:before {
6624 6037 content: '\e62a';
6625 6038 }
6626 6039
@@ -6662,14 +6075,14 @@
6662 6075 .frm_no_section_fields {
6663 6076 text-align: center;
6664 6077 position: absolute;
6665 6078 color: var(--medium-grey);
6666 - font-size: var(--text-md);
6079 + font-size: 16px;
6667 6080 box-sizing: border-box;
6668 - border: 1px dashed var(--grey-300);
6081 + border: 2px dashed var(--primary-color);
6669 6082 }
6670 6083
6671 -.ui-droppable-active ~ .frm_no_fields {
6084 +.drop-me + .frm_no_fields {
6672 6085 border-style: solid;
6673 6086 }
6674 6087
6675 6088 .frm_no_section_fields {
@@ -6701,9 +6114,9 @@
6701 6114 display: block;
6702 6115 }
6703 6116
6704 6117 .frm-large-plus.frmsvg {
6705 - color: var(--primary-700);
6118 + color: var(--primary-hover);
6706 6119 height: 45px;
6707 6120 width: 45px;
6708 6121 }
6709 6122
@@ -6823,12 +6236,10 @@
6823 6236
6824 6237 .frm-category-tabs > li a,
6825 6238 .frm-category-tabs > li a:active {
6826 6239 outline: none;
6240 + -webkit-box-shadow: none;
6827 6241 box-shadow: none;
6828 - display: flex;
6829 - gap: var(--gap-xs);
6830 - align-items: center;
6831 6242 }
6832 6243
6833 6244 .frm-category-tabs > li.active .frmsvg,
6834 6245 .frm-category-tabs > li.active i,
@@ -6833,15 +6244,15 @@
6833 6244 .frm-category-tabs > li.active .frmsvg,
6834 6245 .frm-category-tabs > li.active i,
6835 6246 .frm-category-tabs > li.active span,
6836 6247 .frm-category-tabs > li.active a {
6837 - color: var(--primary-500);
6248 + color: var(--primary-color);
6838 6249 }
6839 6250
6840 6251 .frm_wrap .manage-menus {
6841 6252 margin-top: 0;
6842 6253 border: none;
6843 - border-bottom: 1px solid var(--grey-300);
6254 + border-bottom: 1px solid var(--grey-border);
6844 6255 background: var(--lightest-grey);
6845 6256 }
6846 6257
6847 6258 .general_settings .postbox .manage-menus {
@@ -6877,9 +6288,9 @@
6877 6288 padding-top: 10px;
6878 6289 }
6879 6290
6880 6291 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6881 - color: var(--grey-900);
6292 + color: var(--darkest-grey);
6882 6293 }
6883 6294
6884 6295 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6885 6296 box-shadow: none;
@@ -6895,14 +6306,14 @@
6895 6306 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6896 6307 .frm_update_msg,
6897 6308 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6898 6309 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6899 - border-color: var(--primary-500);
6310 + border-color: var(--primary-color);
6900 6311 transition: .5s border-color ease-in-out;
6901 6312 }
6902 6313
6903 6314 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6904 - box-shadow: 0 0 1px 0 var(--primary-500);
6315 + box-shadow: 0 0 1px 0 var(--primary-color);
6905 6316 }
6906 6317
6907 6318 .frm_sorting li.ui-state-default {
6908 6319 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6925,9 +6336,9 @@
6925 6336 font-weight: bold;
6926 6337 border: 1px solid #DFDFDF;
6927 6338 background-color: #EEEEEE;
6928 6339 padding: 3px 5px 2px;
6929 - font-size: var(--text-md);
6340 + font-size: 16px;
6930 6341 line-height: 20px;
6931 6342 }
6932 6343
6933 6344 .frm_update_msg {
@@ -6965,13 +6376,8 @@
6965 6376 .widefat .column-shortcode {
6966 6377 width: 9em;
6967 6378 }
6968 6379
6969 -.toplevel_page_formidable .column-shortcode div {
6970 - display: flex;
6971 - gap: var(--gap-xs);
6972 -}
6973 -
6974 6380 .widefat .column-entries, .widefat .column-link {
6975 6381 width: 10%;
6976 6382 text-align: center;
6977 6383 }
@@ -6979,22 +6385,23 @@
6979 6385 .widefat .column-form_key, .widefat .column-created_at {
6980 6386 width: 10%;
6981 6387 }
6982 6388
6983 -.frm-white-body .search-box,
6389 +.post-type-frm_display .search-box,
6984 6390 .frm_wrap .frm-search {
6985 6391 float: right;
6986 - margin: 0;
6392 + margin-bottom: 15px;
6987 6393 clear: right;
6988 6394 }
6989 6395
6990 -.frm-white-body .search-box,
6396 +#form_entries_page form .frm-search {
6397 + margin-top: 15px;
6398 +}
6399 +
6991 6400 .frm-search {
6992 - min-width: 32%;
6401 + width: 32%;
6402 + float: right;
6993 6403 position: relative;
6994 - display: flex;
6995 - gap: var(--gap-sm);
6996 - align-items: center;
6997 6404 }
6998 6405
6999 6406 .frm-inline-modal .frm-search,
7000 6407 #frm_adv_info .frm-search {
@@ -7000,9 +6407,9 @@
7000 6407 #frm_adv_info .frm-search {
7001 6408 float: none;
7002 6409 width: 100%;
7003 6410 clear: both;
7004 - margin: var(--gap-xs) 0;
6411 + margin: 5px 0 10px;
7005 6412 }
7006 6413
7007 6414 .frm-button-group a {
7008 6415 margin: 0 7px !important;
@@ -7019,9 +6426,9 @@
7019 6426
7020 6427 i.frm-show-box,
7021 6428 i.frm-show-inline-modal,
7022 6429 .frm-with-left-icon i,
7023 -.frm-with-right-icon i:not([class*=mce-]),
6430 +.frm-with-right-icon i,
7024 6431 .frmsvg.frm-show-box,
7025 6432 .frmsvg.frm-show-inline-modal,
7026 6433 .frm-with-left-icon .frmsvg,
7027 6434 .frm-with-right-icon .frmsvg,
@@ -7027,17 +6434,18 @@
7027 6434 .frm-with-right-icon .frmsvg,
7028 6435 .frm-search > .frmsvg,
7029 6436 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
7030 6437 position: absolute;
7031 - padding: 0 14px;
6438 + padding: 7px 10px;
7032 6439 pointer-events: none;
7033 6440 left: 0;
7034 - color: var(--grey-400);
7035 - font-size: var(--text-xs);
6441 + color: var(--grey);
6442 + opacity: .5;
6443 + font-size: 18px;
7036 6444 }
7037 6445
7038 6446 .frm-with-right-icon .frmsvg,
7039 -.frm-with-right-icon i:not([class*=mce-]) {
6447 +.frm-with-right-icon i {
7040 6448 right: 0;
7041 6449 top: -3px;
7042 6450 left: auto;
7043 6451 padding: 0 10px 0 5px;
@@ -7042,35 +6450,20 @@
7042 6450 left: auto;
7043 6451 padding: 0 10px 0 5px;
7044 6452 }
7045 6453
7046 -.frm_form_settings .frm-with-right-icon .frmsvg {
7047 - top: 0;
7048 -}
7049 -
7050 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
7051 - top: auto;
7052 - bottom: 0;
7053 -}
7054 -
7055 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
7056 - top: auto;
7057 - bottom: 6px;
7058 -}
7059 -
7060 6454 .frmsvg.frm-show-box,
7061 6455 .frmsvg.frm-show-inline-modal,
7062 6456 i.frm-show-box,
7063 6457 i.frm-show-inline-modal {
7064 - color: var(--primary-500);
6458 + color: var(--primary-color);
7065 6459 pointer-events: initial;
7066 6460 cursor: pointer;
7067 6461 z-index: 1;
7068 6462 opacity: 1;
6463 + right: 2px;
7069 6464 top: auto;
7070 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
7071 - margin-bottom: 0;
7072 - padding: 0;
6465 + padding: 7px 10px;
7073 6466 }
7074 6467
7075 6468 .frm-open .frmsvg.frm-show-inline-modal,
7076 6469 .frm-open i.frm-show-inline-modal {
@@ -7093,9 +6486,9 @@
7093 6486
7094 6487 .frm_wrap .frm-with-right-icon textarea,
7095 6488 .frm_wrap .frm-with-right-icon input,
7096 6489 .frm_wrap .frm-with-right-icon input[type=text] {
7097 - padding-right: var(--gap-md);
6490 + padding-right: 35px;
7098 6491 }
7099 6492
7100 6493 #frm-show-fields .frm-with-left-icon .frmsvg,
7101 6494 #frm-show-fields .frm-with-left-icon i {
@@ -7101,29 +6494,43 @@
7101 6494 #frm-show-fields .frm-with-left-icon i {
7102 6495 padding-top: 10px;
7103 6496 }
7104 6497
6498 +.frm-search input.frm-search-input,
7105 6499 .frm-search input[name="s"],
6500 +.frm-search #search-submit {
6501 + border-color: var(--grey-border);
6502 + box-shadow: none;
6503 + margin: 0;
6504 + padding: 7px;
6505 + height: auto;
6506 + font-size: 13px;
6507 + line-height: normal;
6508 +}
6509 +
7106 6510 .frm-search .dropdown-toggle,
7107 6511 .frm-search input.frm-search-input {
7108 - border-radius: var(--small-radius);
6512 + border-radius: var(--border-radius);
7109 6513 padding-left: 33px !important;
7110 - border-color: var(--grey-300);
7111 6514 }
7112 6515
7113 -.frm_wrap .frm-search .frm-search-input,
7114 -.frm-modal .frm-search .frm-search-input,
7115 -.frm-white-body .search-box input[name="s"], /* Views search */
7116 -.frm_wrap .frm-search input[name="s"] {
7117 - padding-top: 3px;
7118 - padding-bottom: 3px;
7119 - flex: 1;
7120 - font-size: var(--text-sm);
6516 +.frm-search input[name="s"] {
6517 + width: 70%;
6518 + float: left;
6519 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6520 + border-right-width: 0;
6521 + padding-left: 33px;
7121 6522 }
7122 6523
7123 -.frm-search .dropdown-toggle {
6524 +.frm-search .dropdown-toggle,
6525 +.frm-search input.frm-auto-search {
7124 6526 width: 100%;
6527 + border-right-width: 1px;
6528 + border-radius: var(--border-radius) !important;
7125 6529 float: none;
6530 +}
6531 +
6532 +.frm-search .dropdown-toggle {
7126 6533 max-width: 200px;
7127 6534 background: transparent;
7128 6535 padding: 7px;
7129 6536 min-height: 32px;
@@ -7131,18 +6538,22 @@
7131 6538 overflow: hidden;
7132 6539 text-overflow: ellipsis;
7133 6540 }
7134 6541
7135 -span.multiselect-selected-text {
6542 +.frm-search span.multiselect-selected-text {
7136 6543 white-space: nowrap;
7137 - display: inline-block;
7138 - max-width: 90%;
7139 - text-overflow: ellipsis;
7140 - overflow: hidden;
6544 + display: inline-block;
7141 6545 }
7142 6546
6547 +.frm-search #search-submit {
6548 + width: 30%;
6549 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6550 + text-align: center;
6551 + background-color: var(--lightest-grey);
6552 +}
6553 +
7143 6554 .frm-search #search-submit a {
7144 - color: var(--grey-800);
6555 + color: var(--primary-color);
7145 6556 }
7146 6557
7147 6558 .frm-search #search-submit .caret {
7148 6559 opacity:.7;
@@ -7148,15 +6559,15 @@
7148 6559 opacity:.7;
7149 6560 }
7150 6561
7151 6562 .frm-not-set input {
7152 - color: var(--primary-500) !important;
6563 + color: var(--primary-color) !important;
7153 6564 font-size: 13px;
7154 6565 }
7155 6566
7156 6567 .frm-not-set .frmsvg,
7157 6568 .frm-not-set i {
7158 - color: var(--primary-700);
6569 + color: var(--primary-hover);
7159 6570 opacity: 1;
7160 6571 }
7161 6572
7162 6573 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7224,9 +6635,9 @@
7224 6635
7225 6636 .post-type-frm_display #advanced-sortables h2.hndle,
7226 6637 .post-type-frm_display #side-sortables h2.hndle,
7227 6638 .post-type-frm_display #normal-sortables h2.hndle {
7228 - border-bottom: 1px solid var(--grey-300);
6639 + border-bottom: 1px solid var(--grey-border);
7229 6640 margin: 10px 0 0 !important;
7230 6641 padding: 0 25px 8px;
7231 6642 }
7232 6643
@@ -7235,9 +6646,9 @@
7235 6646 padding-top: 10px;
7236 6647 }
7237 6648
7238 6649 .post-type-frm_display #post-body-content {
7239 - margin-top: var(--gap-lg);
6650 + margin-top: 30px;
7240 6651 }
7241 6652
7242 6653 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7243 6654 margin: 0;
@@ -7244,15 +6655,15 @@
7244 6655 }
7245 6656
7246 6657 .post-type-frm_display .postbox .hndle,
7247 6658 .post-type-frm_display .postbox {
7248 - border-color: var(--grey-300);
6659 + border-color: var(--grey-border);
7249 6660 }
7250 6661
7251 6662 .post-type-frm_display #postbox-container-1 .postbox,
7252 6663 .post-type-frm_display #postbox-container-2 .postbox {
7253 6664 border-radius: var(--small-radius);
7254 - border-color: var(--grey-300);
6665 + border-color: var(--grey-border);
7255 6666 box-shadow: none;
7256 6667 }
7257 6668
7258 6669 .post-type-frm_display #side-sortables .postbox {
@@ -7331,9 +6742,9 @@
7331 6742 background-color: transparent;
7332 6743 }
7333 6744
7334 6745 .post-type-frm_display #major-publishing-actions {
7335 - border-color: var(--grey-300);
6746 + border-color: var(--grey-border);
7336 6747 background: var(--sidebar-color);
7337 6748 }
7338 6749
7339 6750 .post-type-frm_display #frm_adv_info {
@@ -7387,9 +6798,9 @@
7387 6798 .settings-lite-cta ul,
7388 6799 .settings-lite-cta p,
7389 6800 .settings-lite-cta {
7390 6801 color: #666;
7391 - font-size: var(--text-md);
6802 + font-size: 16px;
7392 6803 box-shadow: none !important;
7393 6804 }
7394 6805
7395 6806 .frm-info-modal h3,
@@ -7403,9 +6814,8 @@
7403 6814
7404 6815 .frm-info-modal .postbox .inside,
7405 6816 .settings-lite-cta .postbox .inside {
7406 6817 padding: 20px 40px;
7407 - margin: 0;
7408 6818 }
7409 6819
7410 6820 .cta-inside a {
7411 6821 color: var(--orange)
@@ -7411,15 +6821,21 @@
7411 6821 color: var(--orange)
7412 6822 }
7413 6823
7414 6824 .info-modal-inside a.frm-standard-link {
7415 - color: var(--primary-500);
6825 + color: var(--primary-color);
7416 6826 }
7417 6827
7418 6828 .info-modal-inside a.frm-standard-link:hover {
7419 - color: var(--primary-700);
6829 + color: var(--primary-hover);
7420 6830 }
7421 6831
6832 +.frm-caution {
6833 + text-transform: uppercase;
6834 + font-weight: bold;
6835 + color: var(--dark-grey);
6836 +}
6837 +
7422 6838 .frm_no_p_margin > p {
7423 6839 margin: 0;
7424 6840 }
7425 6841
@@ -7429,12 +6845,14 @@
7429 6845 font-size: 11px;
7430 6846 overflow: hidden;
7431 6847 }
7432 6848
6849 +.frm_code_list.frm-full-hover {
6850 + margin: 0 -20px;
6851 +}
6852 +
7433 6853 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7434 - margin: var(--gap-xs) 0 0;
7435 - min-width: 300px;
7436 - max-height: calc( ( 40px * 5 ) + 56px );
6854 + margin: 4px 0 0;
7437 6855 }
7438 6856
7439 6857 .frm_code_list.frm-full-hover li {
7440 6858 margin: 0;
@@ -7439,28 +6857,55 @@
7439 6857 .frm_code_list.frm-full-hover li {
7440 6858 margin: 0;
7441 6859 }
7442 6860
7443 -.frm-select-list-item,
7444 -.frm_wrap .ui-autocomplete li > div,
7445 -.multiselect-container button.multiselect-option,
7446 6861 .frm-dropdown-menu > .dropdown-item > a,
7447 -.frm-dropdown-menu > .dropdown-item > a:visited,
7448 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7449 6862 .frm-dropdown-menu .frm_dropdown_li,
7450 6863 .frm_code_list.frm-full-hover a {
7451 - display: flex;
7452 - color: var(--grey-700);
7453 - padding: 5px 10px;
7454 - font-size: var(--text-md);
7455 - gap: var(--gap-xs);
7456 - align-items: center;
6864 + display: block;
6865 + color: var(--dark-grey);
6866 + padding: 3px 25px;
6867 + font-size: 15px;
7457 6868 }
7458 6869
6870 +#frm_field_group_controls .frm-dropdown-menu,
6871 +.frm-field-action-icons .frm-dropdown-menu {
6872 + padding: 0;
6873 + margin: 0;
6874 +}
6875 +
6876 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li {
6877 + padding: 0;
6878 + color: rgba(40, 47, 54, 0.85);
6879 + cursor: pointer;
6880 + position: relative;
6881 + height: 32px;
6882 +}
6883 +
6884 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li .frmsvg {
6885 + color: rgba(40, 47, 54, 0.85) !important;
6886 +}
6887 +
6888 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li a {
6889 + padding: 6px 10px;
6890 + position: absolute;
6891 + top: 0;
6892 + left: 0;
6893 + bottom: 0;
6894 + width: 100%;
6895 + box-sizing: border-box;
6896 +}
6897 +
6898 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li:hover {
6899 + background: #F6F7FB;
6900 +}
6901 +
7459 6902 .frm_code_list.frm-full-hover a span {
6903 + color: var(--grey);
6904 + float: right;
6905 + font-size: 14px;
7460 6906 max-width: 83px;
7461 6907 text-align: right;
7462 - margin-left: auto;
7463 6908 }
7464 6909
7465 6910 .frm_code_list.frm-full-hover a,
7466 6911 .frm_code_list.frm-full-hover a span {
@@ -7468,54 +6913,24 @@
7468 6913 overflow: hidden;
7469 6914 text-overflow: ellipsis;
7470 6915 }
7471 6916
7472 -.frm_code_list.frm-full-hover.frmcenter a {
7473 - display: block;
7474 -}
7475 -
7476 -#frm-layout-classes frm-full-hover a span {
7477 - max-width: 45%;
7478 -}
7479 -
7480 -.frm-select-list-item.active,
7481 -.frm-select-list-item:hover,
7482 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7483 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7484 -.multiselect-container button.multiselect-option.active,
7485 -.multiselect-container button.multiselect-option:hover,
7486 6917 .frm-dropdown-menu > .dropdown-item > a:hover,
7487 6918 .frm_code_list.frm-full-hover a:hover span,
7488 6919 .frm_code_list.frm-full-hover a:hover {
7489 - background: var(--primary-25);
7490 - color: var(--primary-500);
7491 - border-radius: var(--small-radius);
6920 + background: var(--sidebar-color);
6921 + color: var(--primary-color);
7492 6922 }
7493 6923
7494 -.frm-select-list-item .frmsvg,
7495 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7496 - opacity: .8;
7497 -}
7498 -
7499 -.frm-select-list-item:hover .frmsvg,
7500 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7501 - opacity: 1;
7502 -}
7503 -
7504 6924 .frm-dropdown-menu.frm_code_list > li > a {
7505 6925 padding: 3px 15px;
7506 6926 width: 300px;
7507 6927 }
7508 6928
7509 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7510 -.frm-dropdown-menu .frm-with-search {
7511 - padding: var(--gap-xs) 10px 0;
6929 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6930 + padding: 3px 10px;
7512 6931 }
7513 6932
7514 -.frm-dropdown-menu .subsubsub {
7515 - padding: 0 10px;
7516 -}
7517 -
7518 6933 .frm_grid_container {
7519 6934 overflow: visible;
7520 6935 }
7521 6936
@@ -7531,16 +6946,16 @@
7531 6946 .frm_code_list.frm_grid_container a {
7532 6947 padding: 5px 0;
7533 6948 text-align: center;
7534 6949 background-color: var(--light-blue);
7535 - border: 1px solid var(--primary-500);
7536 - color: var(--primary-500);
6950 + border: 1px solid var(--primary-color);
6951 + color: var(--primary-color);
7537 6952 display: block;
7538 6953 border-radius: var(--small-radius);
7539 6954 }
7540 6955
7541 6956 .frm_code_list.frm_grid_container a:hover {
7542 - background-color: var(--primary-700);
6957 + background-color: var(--primary-hover);
7543 6958 color: #fff;
7544 6959 }
7545 6960
7546 6961 .frm_field_list #frm-insert-fields .button a {
@@ -7548,15 +6963,10 @@
7548 6963 max-width: 95%;
7549 6964 overflow: hidden;
7550 6965 }
7551 6966
7552 -.field_type_list.frm_grid_container {
7553 - gap: var(--gap-xs) var(--gap-sm);
7554 - margin: var(--gap-xs);
7555 -}
7556 -
7557 6967 .field_type_list li {
7558 - margin: 0;
6968 + margin: 0 0 10px;
7559 6969 padding: 0;
7560 6970 }
7561 6971
7562 6972 #frm-insert-fields .frm-search {
@@ -7568,13 +6978,22 @@
7568 6978 #frm-insert-fields li,
7569 6979 #frm-insert-fields li a {
7570 6980 text-decoration: none;
7571 6981 font-weight: normal;
7572 - font-size: var(--text-md) !important;
7573 - color: var(--grey-900);
6982 + font-size: 15px !important;
6983 + color: var(--dark-grey);
7574 6984 }
7575 6985
6986 +#frm-insert-fields li a {
6987 + padding: 5px 20px;
6988 + display: block;
6989 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6990 +}
6991 +
7576 6992 #frm-insert-fields li.frm_show_upgrade {
6993 + margin: 0 0 10px;
6994 + padding: 5px 20px;
6995 + box-sizing: border-box;
7577 6996 cursor: pointer;
7578 6997 opacity: .5;
7579 6998 }
7580 6999
@@ -7581,11 +7000,14 @@
7581 7000 #frm-insert-fields li a span {
7582 7001 vertical-align: middle;
7583 7002 }
7584 7003
7585 -.frmbutton.ui-draggable-dragging a,
7004 +#frm-insert-fields li:nth-child(2n) a {
7005 + border-radius: var(--border-radius) 0 0 var(--border-radius);
7006 +}
7007 +
7586 7008 #frm-insert-fields li a:not(.disabled):hover {
7587 - background: var(--grey-100);
7009 + background: var(--sidebar-hover);
7588 7010 }
7589 7011
7590 7012 #frm-insert-fields li a.disabled:hover {
7591 7013 cursor: not-allowed;
@@ -7607,9 +7029,9 @@
7607 7029 .frmsvg {
7608 7030 fill: currentColor;
7609 7031 width: 18px;
7610 7032 height: 18px;
7611 - vertical-align: middle;
7033 + vertical-align: text-bottom;
7612 7034 }
7613 7035
7614 7036 input[disabled],
7615 7037 .frmsvg svg {
@@ -7635,27 +7057,40 @@
7635 7057 width: 13px;
7636 7058 height: 13px;
7637 7059 }
7638 7060
7061 +.frm_code_list a .frmsvg,
7639 7062 .frmbutton.ui-sortable-helper .frmsvg,
7640 7063 .field_type_list li.frmbutton .frmsvg,
7064 +.frm_code_list a i,
7641 7065 .frmbutton.ui-sortable-helper i,
7642 -.field_type_list li.frmbutton i,
7643 -.frm_code_list a .frmsvg,
7644 -.frm_code_list a i {
7645 - color: var(--grey-500);
7066 +.field_type_list li.frmbutton i {
7067 + margin: .15em .2em;
7068 + color: var(--grey);
7646 7069 display: inline-block;
7647 7070 vertical-align: middle;
7648 - width: var(--text-md);
7649 - font-size: var(--text-md);
7071 + width: 20px;
7072 + height: 20px;
7073 + padding-right: 15px;
7074 + text-align: left;
7075 + font-size: 18px;
7650 7076 }
7651 7077
7652 -/* Standardize icon size for field buttons in the builder */
7653 -.field_type_list li.frmbutton .frmsvg {
7654 - width: var(--text-xl);
7655 - font-size: var(--text-xl);
7078 +/* Icon for Name field is larger */
7079 +.field_type_list li.frm_tname.frmbutton .frmsvg {
7080 + width: 24px;
7081 + height: 24px;
7082 + padding-right: 11px;
7656 7083 }
7657 7084
7085 +.frm_code_list a .frmsvg,
7086 +.frm_code_list a i {
7087 + margin: 0 5px 0 0;
7088 + padding: 0;
7089 + width: 15px;
7090 + font-size: 15px;
7091 +}
7092 +
7658 7093 .frm_code_list i:before {
7659 7094 font-size: inherit;
7660 7095 }
7661 7096
@@ -7660,58 +7095,62 @@
7660 7095 }
7661 7096
7662 7097 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7663 7098 #frm-insert-fields li a:not(.disabled):hover i {
7664 - color: var(--grey-600);
7099 + color: var(--dark-grey);
7665 7100 }
7666 7101
7667 -/* Icon while dragging */
7668 7102 .frmbutton.ui-draggable-dragging {
7669 - pointer-events: none;
7103 + width: auto !important;
7670 7104 }
7671 7105
7672 -#frm-insert-fields li.frm_show_upgrade,
7673 -#frm-insert-fields li a,
7106 +/* Icon while dragging */
7107 +.frmbutton.ui-draggable-dragging,
7674 7108 .frmbutton.ui-draggable-dragging a {
7675 - text-decoration: none;
7676 - display: inline-flex !important;
7677 - gap: var(--gap-xs);
7678 - align-items: center;
7679 - border-radius: var(--border-radius) !important;
7680 - padding: var(--gap-xs) var(--gap-sm) !important;
7681 - color: var(--grey-900) !important;
7109 + cursor: move;
7682 7110 }
7683 7111
7684 -/* Adjust field button size to full width in builder */
7685 -#frm-insert-fields li a {
7686 - display: flex !important;
7112 +.frmbutton.ui-sortable-helper a,
7113 +.frmbutton.ui-draggable-dragging a:hover,
7114 +.frmbutton.ui-draggable-dragging a {
7115 + text-decoration: none;
7116 + height: 25px !important;
7117 + width: 180px;
7118 + text-align: center;
7119 + display: block !important;
7120 + background-color: var(--primary-hover) !important;
7121 + border-radius: 35px !important;
7122 + padding: 5px 20px !important;
7123 + color: #fff !important;
7687 7124 }
7688 7125
7689 -/* Prevents advanced fields from always appearing in search results */
7690 -#frm-insert-fields li.frm_show_upgrade.frm_hidden {
7691 - display: none !important;
7126 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
7127 + /* When the new field is held outside of a dropzone */
7128 + cursor: not-allowed;
7129 + background: var(--sidebar-color) !important;
7130 + color: var(--dark-grey) !important;
7692 7131 }
7693 7132
7694 -.frmbutton.ui-draggable-dragging a {
7695 - border: 1px solid var(--grey-300);
7696 - box-shadow: var(--box-shadow-md);
7697 -}
7698 -
7699 7133 .frmbutton.ui-draggable-dragging span {
7700 7134 font-size: 15px;
7701 7135 }
7702 7136
7703 7137 #frm-show-fields .frmbutton.ui-sortable-helper i,
7138 +.frmbutton.ui-sortable-helper span,
7704 7139 .frmbutton.ui-draggable-dragging i,
7705 7140 .frmbutton.ui-draggable-dragging .frmsvg {
7706 7141 color: #fff !important;
7707 7142 }
7708 7143
7709 -.frmbutton.ui-draggable-dragging i,
7710 -.frmbutton.ui-draggable-dragging .frmsvg {
7711 - color: var(--grey-700) !important;
7144 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i,
7145 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) .frmsvg {
7146 + color: var(--dark-grey) !important;
7712 7147 }
7713 7148
7149 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7150 + display: none;
7151 +}
7152 +
7714 7153 .frm_sorting li.ui-state-default.ui-sortable-helper,
7715 7154 .frmbutton.ui-sortable-helper {
7716 7155 transition: opacity .2s;
7717 7156 opacity: 1;
@@ -7716,13 +7155,10 @@
7716 7155 transition: opacity .2s;
7717 7156 opacity: 1;
7718 7157 }
7719 7158
7720 -.frm-field-group-count {
7721 - background-color: var(--sidebar-hover);
7722 - padding: 5px;
7723 - color: #fff !important;
7724 - border-radius: 10px;
7159 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7160 + opacity: 0;
7725 7161 }
7726 7162
7727 7163 /* End dragging */
7728 7164
@@ -7748,64 +7184,13 @@
7748 7184 .frm_noallow a {
7749 7185 color: inherit;
7750 7186 }
7751 7187
7752 -#frm_upgrade_modal_image {
7753 - max-width: 200px;
7754 -}
7755 -
7756 -.frm-tab-message {
7757 - max-width: 600px;
7758 - margin: 20px auto;
7759 - color: rgba(63, 75, 91, 0.8);
7760 -}
7761 -
7762 -.frm-settings-screenshot-toolbar {
7763 - min-height: 39px;
7764 - display: flex;
7765 -}
7766 -
7767 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7768 - height: 8px;
7769 - width: 8px;
7770 - border-radius: 50%;
7771 - align-self: center;
7772 - margin-left: 10px;
7773 -}
7774 -
7775 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7776 - margin-left: 20px;
7777 -}
7778 -
7779 -.frm-settings-screenshot-toolbar img {
7780 - object-fit: contain;
7781 - align-self: flex-end;
7782 - margin-left: 25px;
7783 -}
7784 -
7785 -.frm-settings-screenshot-toolbar + div {
7786 - background: #fff;
7787 - padding-top: 25px;
7788 - border-radius: 0 0 16px 16px;
7789 -}
7790 -
7791 -.frm-settings-screenshot-toolbar + div img {
7792 - max-width: calc( 100% - 40px );
7793 -}
7794 -
7795 -.frm-settings-screenshot-wrapper {
7796 - max-width: 700px;
7797 - margin: 50px auto 0;
7798 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7799 - border-radius: 16px;
7800 - background: #EBECF1;
7801 -}
7802 -
7803 7188 .frm-dialog {
7804 7189 z-index: 100;
7805 7190 padding: 0 !important;
7806 - border-radius: 16px;
7807 - border: none;
7191 + border-radius: 10px;
7192 + border: 1px solid var(--grey);
7808 7193 background-color: #fff;
7809 7194 max-width: 100% !important;
7810 7195 }
7811 7196
@@ -7812,14 +7197,20 @@
7812 7197 .frm-dialog .postbox {
7813 7198 background: transparent;
7814 7199 box-shadow: none;
7815 7200 border: none;
7816 - line-height: var(--leading);
7817 7201 }
7818 7202
7203 +.frm-dialog .frm-sub-label,
7204 +.frm-dialog label {
7205 + color: var(--dark-grey);
7206 + font-size: 17px;
7207 + font-weight: 300;
7208 +}
7209 +
7819 7210 .frm-dialog input[type=text],
7820 7211 .frm-dialog textarea {
7821 - font-size: var(--text-md);
7212 + font-size: 16px;
7822 7213 }
7823 7214
7824 7215 .frm-dialog textarea {
7825 7216 height: 75px;
@@ -7832,19 +7223,16 @@
7832 7223 .frm-dialog .frm-sub-label,
7833 7224 .frm-sub-label {
7834 7225 color: var(--grey);
7835 7226 text-transform: none;
7836 - padding-left: 8px;
7837 7227 }
7838 7228
7839 7229 h2 .frm-sub-label {
7840 - font-size: var(--text-md);
7230 + font-size: 16px;
7841 7231 }
7842 7232
7843 -.frm-views-editor-body .ui-widget-overlay,
7844 7233 .frm-white-body .ui-widget-overlay,
7845 -.toplevel_page_formidable .ui-widget-overlay,
7846 -body[class*=formidable-payments] .ui-widget-overlay {
7234 +.toplevel_page_formidable .ui-widget-overlay {
7847 7235 position: fixed;
7848 7236 width: 100%;
7849 7237 height: 100%;
7850 7238 top: 0;
@@ -7850,10 +7238,9 @@
7850 7238 top: 0;
7851 7239 left: 0;
7852 7240 right: 0;
7853 7241 bottom: 0;
7854 - background: var(--grey-500);
7855 - opacity: .5;
7242 + background: var(--grey-border);
7856 7243 z-index: 2;
7857 7244 }
7858 7245
7859 7246 #frm_upgrade_modal {
@@ -7868,15 +7255,15 @@
7868 7255 color: #c4c4c4;
7869 7256 padding-bottom: 20px;
7870 7257 }
7871 7258
7872 -.frm-upgrade-message img {
7259 +#frm-upgrade-message img {
7873 7260 max-width: 100%;
7874 7261 }
7875 7262
7876 7263 a.frm-link-secondary {
7877 7264 color: #c4c4c4;
7878 - font-size: var(--text-sm);
7265 + font-size: 14px;
7879 7266 text-decoration: underline;
7880 7267 }
7881 7268
7882 7269 .field_type_list li.button.frm_noallow,
@@ -7919,9 +7306,8 @@
7919 7306 opacity: 0;
7920 7307
7921 7308 /* Custom rules */
7922 7309 z-index: 9999999;
7923 - pointer-events: none;
7924 7310 }
7925 7311
7926 7312 .tooltip.show {
7927 7313 opacity: 0.9;
@@ -8081,25 +7467,93 @@
8081 7467 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
8082 7468 padding: 10px 40px;
8083 7469 border-top-color: #ccc;
8084 7470 background: var(--sidebar-color);
8085 - color: var(--grey-700);
7471 + color: var(--dark-grey);
8086 7472 border-radius: 0;
8087 7473 opacity: 1;
8088 - font-size: var(--text-sm);
7474 + font-size: 14px;
8089 7475 }
8090 7476
7477 +#frm_styling_form #post-body {
7478 + padding: 20px;
7479 +}
7480 +
7481 +.ui-datepicker-inline.ui-datepicker {
7482 + max-width: 19em;
7483 +}
7484 +
7485 +.default-style-box.howto {
7486 + margin-left: 20px;
7487 + font-style: normal;
7488 +}
7489 +
8091 7490 #frm_custom_css_box {
8092 7491 width: 100%;
8093 7492 }
8094 7493
7494 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7495 + width: 100%;
7496 + overflow: hidden;
7497 + margin: 0 !important;
7498 + height: 32px !important;
7499 + padding: 0 0 0 30px !important;
7500 + border-radius: var(--small-radius);
7501 + border-color: var(--grey-border);
7502 +}
7503 +
7504 +#frm_styling_form .wp-color-result-text {
7505 + line-height: 30px !important;
7506 + font-size: 15px;
7507 + background: #fff !important;
7508 +}
7509 +
7510 +.wp-picker-open + .wp-picker-input-wrap {
7511 + position: absolute;
7512 + margin-left: -87px;
7513 + margin-top: 1px;
7514 + width: 86px;
7515 +}
7516 +
7517 +.wp-picker-container input[type="text"].wp-color-picker {
7518 + border: none;
7519 + padding: 3px;
7520 + font-family: inherit;
7521 + color: var(--dark-grey);
7522 + font-size: 15px;
7523 + width: 100%;
7524 + line-height: 1;
7525 + text-align: center;
7526 +}
7527 +
7528 +.wp-picker-input-wrap .wp-picker-clear {
7529 + display: none !important;
7530 +}
7531 +
7532 +.wp-picker-holder {
7533 + position: absolute;
7534 + z-index: 999;
7535 +}
7536 +
7537 +.frm_end .wp-picker-holder {
7538 + margin-left: -145px;
7539 +}
7540 +
7541 +.frm_end.frm6 .wp-picker-holder {
7542 + margin-left: -86px;
7543 +}
7544 +
7545 +#frm_styling_form div.tabs-panel {
7546 + padding-left: 5px;
7547 + padding-right: 5px;
7548 +}
7549 +
8095 7550 /*form inputs/selects */
8096 7551 .frm_form_field.frm_scroll_box .frm_opt_container,
8097 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
8098 -.frm-white-body .wrap input[type="search"],
8099 -.frm-white-body .wrap input[type="number"],
8100 -.frm-white-body .wrap select,
8101 -.frm-white-body .wrap textarea,
7552 +#postbox-container-2 input[type="text"],
7553 +#postbox-container-2 input[type="number"],
7554 +#postbox-container-2 select,
7555 +#postbox-container-2 textarea,
8102 7556 button.frm_choose_image_box,
8103 7557 #titlediv input[type="text"],
8104 7558 .frm-fields button.btn,
8105 7559 .frm_wrap textarea,
@@ -8104,11 +7558,9 @@
8104 7558 .frm-fields button.btn,
8105 7559 .frm_wrap textarea,
8106 7560 .frm_wrap input[type="tel"],
8107 7561 .frm_wrap input[type="text"],
8108 -.frm_wrap input[type=search],
8109 7562 .frm_wrap input[type="number"],
8110 -.frm_wrap input[type="date"],
8111 7563 .frm_wrap select,
8112 7564 .wp-admin .frm_wrap select,
8113 7565 .field-group textarea,
8114 7566 .field-group input[type="text"],
@@ -8115,33 +7567,17 @@
8115 7567 .field-group select {
8116 7568 outline: 0;
8117 7569 box-shadow: none;
8118 7570 border-radius: var(--small-radius);
8119 - padding: 5px 14px;
8120 - border-color: var(--grey-300);
8121 - color: var(--grey-800);
8122 - font-size: var(--text-md);
7571 + padding: 6px 9px;
7572 + border-color: var(--grey-border);
7573 + color: var(--dark-grey);
7574 + font-size: 15px;
8123 7575 margin: 0;
8124 7576 background-color: #fff;
8125 - line-height: var(--leading);
7577 + line-height: 1;
8126 7578 }
8127 7579
8128 -.frm_wrap ::-webkit-datetime-edit {
8129 - line-height: var(--leading);
8130 -}
8131 -
8132 -.frm-white-body textarea:focus,
8133 -.frm-white-body input:focus,
8134 -.frm-white-body select:focus,
8135 -.frm_wrap input:focus,
8136 -.frm_wrap select:focus,
8137 -.wp-core-ui .frm_wrap select:focus,
8138 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8139 -.frm_wrap textarea:focus {
8140 - border-color: var(--primary-500) !important;
8141 - box-shadow: none !important;
8142 -}
8143 -
8144 7580 #postbox-container-2 textarea,
8145 7581 .frm_wrap textarea,
8146 7582 .field-group textarea {
8147 7583 line-height: 2;
@@ -8158,12 +7594,19 @@
8158 7594 .wp-admin .frm_wrap select {
8159 7595 max-width: 100%;
8160 7596 }
8161 7597
8162 -.frm_form_field.frm_scroll_box .frm_opt_container {
7598 +.frm_form_field.frm_scroll_box .frm_opt_container,
7599 +.frm_wrap .frm_form_builder textarea,
7600 +.frm_wrap .frm_form_builder input[type="tel"],
7601 +.frm_wrap .frm_form_builder input[type="text"] {
8163 7602 padding: 10px 12px;
8164 7603 }
8165 7604
7605 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7606 + padding: 6px 9px;
7607 +}
7608 +
8166 7609 .frm_wrap input[disabled],
8167 7610 .frm_wrap select[disabled],
8168 7611 .frm_wrap textarea[disabled],
8169 7612 .frm_wrap input[readonly],
@@ -8169,23 +7612,37 @@
8169 7612 .frm_wrap input[readonly],
8170 7613 .frm_wrap select[readonly],
8171 7614 .frm_wrap textarea[readonly],
8172 7615 .frm_wrap input::placeholder {
8173 - color: var(--grey-500);
7616 + color: var(--grey);
8174 7617 }
8175 7618
7619 +#postcustomstuff table input {
7620 + width: 100% !important;
7621 + margin: 0 !important;
7622 +}
7623 +
7624 +#postcustomstuff table td {
7625 + padding: 7px 0 7px 7px !important;
7626 + line-height: 30px;
7627 +}
7628 +
8176 7629 #postcustomstuff table td > div {
8177 7630 /* To override some inline css in add-on */
8178 7631 padding-top: 0 !important;
8179 7632 }
8180 7633
8181 -.wp-admin .frm_wrap .form-table select {
7634 +.wp-admin .frm_wrap .form-table select,
7635 +#postbox-container-2 select,
7636 +.wp-admin .frm_wrap select {
7637 + line-height: 32px;
7638 + height: 32px;
8182 7639 vertical-align: top;
8183 7640 }
8184 7641
8185 7642 .frm_wrap .frm_form_builder select {
8186 - line-height: var(--leading);
8187 - height: var(--text-md);
7643 + line-height: 40px;
7644 + height: 40px;
8188 7645 width: 100%;
8189 7646 }
8190 7647
8191 7648 #postbox-container-2 select,
@@ -8191,25 +7648,11 @@
8191 7648 #postbox-container-2 select,
8192 7649 .wp-admin .frm_wrap select,
8193 7650 .frm_wrap .frm_form_builder select {
8194 7651 height: auto;
8195 - background-position: right 11px top 55%;
7652 + padding: 0 24px 0 12px;
8196 7653 }
8197 7654
8198 -.frm-white-body .tablenav select,
8199 -.frm-white-body .tablenav input[type="text"],
8200 -.wp-admin .frm_wrap .tablenav select,
8201 -.frm_wrap .tablenav input[type="date"],
8202 -.frm_wrap .tablenav input[type="text"] {
8203 - padding-top: 0;
8204 - padding-bottom: 0;
8205 - line-height: 1;
8206 -}
8207 -
8208 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8209 - line-height: 1;
8210 -}
8211 -
8212 7655 .frm-fields button.btn,
8213 7656 .frm-fields textarea,
8214 7657 .frm-fields input[type="text"],
8215 7658 .frm-fields select,
@@ -8221,9 +7664,10 @@
8221 7664 outline: 0;
8222 7665 }
8223 7666
8224 7667 .frm-fields button.btn {
8225 - height: var(--h-md);
7668 + line-height: normal;
7669 + height: auto;
8226 7670 text-align: inherit;
8227 7671 }
8228 7672
8229 7673 .global-font .field-group input[type="text"] {
@@ -8264,9 +7708,9 @@
8264 7708 }
8265 7709
8266 7710 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8267 7711 background: #fff !important;
8268 - border-color: var(--primary-500);
7712 + border-color: var(--primary-color);
8269 7713 }
8270 7714
8271 7715 .frm_images_dropdown .frm_text_label_for_image {
8272 7716 padding: 0;
@@ -8294,9 +7738,9 @@
8294 7738 }
8295 7739
8296 7740 .windows::-webkit-scrollbar-thumb,
8297 7741 .windows ::-webkit-scrollbar-thumb {
8298 - background: var(--grey-300);
7742 + background: var(--grey-border);
8299 7743 -webkit-border-radius: var(--border-radius);
8300 7744 -webkit-box-shadow: none;
8301 7745 }
8302 7746
@@ -8318,9 +7762,8 @@
8318 7762 .rtl #frm_top_bar #frm_bs_dropdown {
8319 7763 padding-left: 15px;
8320 7764 }
8321 7765
8322 -.rtl .frm-full-close,
8323 7766 .rtl .frm_wrap .columns-2 .frm-right-panel,
8324 7767 .rtl .frm-right-panel {
8325 7768 border-right-width: 1px;
8326 7769 border-left-width: 0;
@@ -8325,14 +7768,9 @@
8325 7768 border-right-width: 1px;
8326 7769 border-left-width: 0;
8327 7770 }
8328 7771
8329 -.rtl .frm-full-close {
8330 - padding-left: 0;
8331 - padding-right: var(--gap-md);
8332 -}
8333 -
8334 -.rtl .frm-text-right {
7772 +.rtl .frm_right_text {
8335 7773 text-align: left;
8336 7774 }
8337 7775
8338 7776 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8377,39 +7815,22 @@
8377 7815 right: unset;
8378 7816 left: 2px;
8379 7817 }
8380 7818
7819 +.rtl #frm_upgrade_modal .dismiss i,
7820 +.rtl .frm-inline-modal i,
7821 +.rtl #frm-bulk-modal i,
8381 7822 .rtl .frm_has_shortcodes > i {
8382 7823 right: auto;
8383 7824 left: 5px;
8384 7825 }
8385 7826
7827 +.rtl .frm_code_list.frm-full-hover a span,
8386 7828 .rtl .frm_reply_to_container,
8387 7829 .rtl .frm_bcc_cc_container {
8388 7830 float: left;
8389 7831 }
8390 7832
8391 -.rtl .frm-default-switcher {
8392 - float: left;
8393 - position: relative;
8394 -}
8395 -
8396 -.rtl .frm-with-right-icon .frmsvg {
8397 - right: auto;
8398 - left: 0;
8399 -}
8400 -
8401 -.rtl .frm-inline-modal > a.dismiss {
8402 - left: 13px;
8403 - right: auto;
8404 -}
8405 -
8406 -.rtl.wp-admin .frm_wrap select {
8407 - padding-left: var(--gap-lg) !important;
8408 - padding-right: 5px !important;
8409 - background-position: left 11px top 55%;
8410 -}
8411 -
8412 7833 /* ---------------------------------------------------------------
8413 7834 Clearfix
8414 7835 --------------------------------------------------------------- */
8415 7836 span.clear {
@@ -8451,12 +7872,15 @@
8451 7872 @media only screen and (max-width: 1200px) {
8452 7873 .frm-addons {
8453 7874 grid-template-columns: 1fr 1fr;
8454 7875 }
7876 +
7877 + ul.frm_form_nav > li {
7878 + margin-right: 2.5%;
7879 + }
8455 7880 }
8456 7881
8457 7882 @media only screen and (max-width: 1050px) {
8458 - .frm-white-body,
8459 7883 .frm_wrap {
8460 7884 --biggest-sidebar: 390px;
8461 7885 }
8462 7886
@@ -8466,18 +7890,15 @@
8466 7890
8467 7891 .frm_actions_list {
8468 7892 margin-left: 0;
8469 7893 }
7894 +
7895 + ul.frm_form_nav > li {
7896 + margin-right: 1.5%;
7897 + }
8470 7898 }
8471 7899
8472 7900 @media only screen and (max-width: 960px) {
8473 - .frm-white-body,
8474 - .frm_wrap {
8475 - --gap-sm: 8px;
8476 - --gap-md: 16px;
8477 - --gap-2xl: 24px;
8478 - }
8479 -
8480 7901 .auto-fold #adminmenuwrap {
8481 7902 width: 36px;
8482 7903 }
8483 7904
@@ -8488,40 +7909,36 @@
8488 7909 p.howto {
8489 7910 display: inline-block;
8490 7911 }
8491 7912
8492 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8493 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8494 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8495 - left: 36px;
7913 + ul.frm_form_nav {
7914 + clear: left;
7915 + padding-top: 0;
8496 7916 }
8497 7917
8498 - .frm-admin-footer-links {
8499 - padding-left: 36px;
7918 + ul.frm_form_nav > li {
7919 + margin-right: 3.5%;
8500 7920 }
8501 7921
8502 - body.rtl .frm-admin-footer-links {
8503 - padding-right: 36px;
7922 + .frm-full-screen #frm_top_bar {
7923 + padding: 0 10px !important;
8504 7924 }
7925 +
7926 + .frm-full-close {
7927 + padding: 15px 0 10px 10px;
7928 + }
7929 +
7930 + .frm-full-close .frmsvg {
7931 + padding: 0;
7932 + }
8505 7933 }
8506 7934
8507 7935 @media only screen and (max-width: 850px) {
8508 - #frm_bs_dropdown {
8509 - /* There isn't enough room for the title on a screen this size so just hide it. */
8510 - display: none;
8511 - }
8512 -
8513 - .frm-white-body,
8514 7936 .frm_wrap {
8515 7937 --biggest-sidebar: 350px;
8516 7938 --big-sidebar: 350px;
8517 7939 }
8518 7940
8519 - #frm_bs_dropdown .frm_bstooltip {
8520 - /* There isn't enough room for the title on a screen this size so just hide it. */
8521 - display: none !important;
8522 - }
8523 -
8524 7941 .frm_col_one {
8525 7942 clear: none;
8526 7943 }
8527 7944
@@ -8530,9 +7947,10 @@
8530 7947 display: block;
8531 7948 margin: 5px 0;
8532 7949 }
8533 7950
8534 - #frm_top_bar h1 {
7951 + .post-type-frm_display #frm_top_bar h1,
7952 + .frm_page_container #frm_top_bar h1 {
8535 7953 width: auto;
8536 7954 max-width: 200px;
8537 7955 }
8538 7956
@@ -8602,9 +8020,8 @@
8602 8020 }
8603 8021 }
8604 8022
8605 8023 @media only screen and (max-width: 782px) {
8606 - .frm-white-body,
8607 8024 .frm_wrap {
8608 8025 --small-sidebar: 20%;
8609 8026 --medium-sidebar: 35%
8610 8027 }
@@ -8618,9 +8035,9 @@
8618 8035 .frm_wrap #publishing-action {
8619 8036 line-height: normal;
8620 8037 }
8621 8038
8622 - .frm-white-body #screen-meta-links {
8039 + .frm-full-screen #screen-meta-links {
8623 8040 display: none;
8624 8041 }
8625 8042
8626 8043 .frm_wrap .misc-pub-section {
@@ -8679,13 +8096,8 @@
8679 8096 .with_frm_style .frm_checkbox input[type=checkbox] {
8680 8097 width: 25px !important;
8681 8098 }
8682 8099
8683 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8684 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8685 - width: 18px !important;
8686 - }
8687 -
8688 8100 .wp-list-table.toplevel_page_formidable .column-entries,
8689 8101 .wp-list-table.toplevel_page_formidable .column-form_key,
8690 8102 .wp-list-table.toplevel_page_formidable .column-shortcode,
8691 8103 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8699,13 +8111,27 @@
8699 8111 padding: 3px 8px 3px 35%;
8700 8112 text-align: left;
8701 8113 }
8702 8114
8115 + .wp-list-table.toplevel_page_formidable td.column-title:before,
8116 + .wp-list-table.toplevel_page_formidable td.column-id:before {
8117 + display: none !important;
8118 + }
8119 +
8120 + .wp-list-table.toplevel_page_formidable td.column-title,
8121 + .wp-list-table.toplevel_page_formidable td.column-id {
8122 + display: table-cell !important;
8123 + }
8124 +
8703 8125 #form_entries_page .wp-list-table th.frm_hidden,
8704 8126 #form_entries_page .wp-list-table td.frm_hidden {
8705 8127 display: none !important;
8706 8128 }
8707 8129
8130 + ul.frm_form_nav > li {
8131 + margin-right: 15px;
8132 + }
8133 +
8708 8134 .frm-white-body.auto-fold #wpcontent {
8709 8135 padding-left: 0;
8710 8136 }
8711 8137
@@ -8716,13 +8142,11 @@
8716 8142 .frm-addons {
8717 8143 grid-template-columns: 1fr;
8718 8144 }
8719 8145
8720 - .frm-admin-page-styles .frm_page_container,
8721 - .frm_wrap .frm_page_container {
8722 - left: 0 !important;
8723 - top: 46px !important;
8724 - height: calc( 100vh - 46px ) !important;
8146 + .frm_single_entry_page.frm_wrap .frm_page_container {
8147 + height: auto;
8148 + display: block;
8725 8149 }
8726 8150
8727 8151 .frm_single_entry_page.frm_wrap .columns-2 {
8728 8152 display: block;
@@ -8740,22 +8164,13 @@
8740 8164 border-radius: 6px;
8741 8165 }
8742 8166
8743 8167 #wp-content-media-buttons a.frm_insert_form {
8744 - padding: 0 var(--gap-sm);
8168 + padding: 0 15px;
8745 8169 }
8746 -
8747 - .frm-admin-footer-links {
8748 - padding-left: 0;
8749 - }
8750 -
8751 - body.rtl .frm-admin-footer-links {
8752 - padding-right: 0;
8753 - }
8754 8170 }
8755 8171
8756 8172 @media only screen and (max-width: 700px) {
8757 - .frm-white-body,
8758 8173 .frm_wrap {
8759 8174 --biggest-sidebar: 50%;
8760 8175 --big-sidebar: 50%;
8761 8176 }
@@ -8761,9 +8176,8 @@
8761 8176 }
8762 8177 }
8763 8178
8764 8179 @media only screen and (max-width: 600px) {
8765 - .frm-white-body,
8766 8180 .frm_wrap {
8767 8181 --small-sidebar: 45px;
8768 8182 }
8769 8183
@@ -8769,9 +8183,9 @@
8769 8183
8770 8184 .frm-form-setting-tabs a {
8771 8185 visibility: collapse;
8772 8186 font-size: 0;
8773 - padding: 0 var(--gap-sm);
8187 + padding: 0 15px;
8774 8188 }
8775 8189
8776 8190 .frm-form-setting-tabs a .frmsvg,
8777 8191 .frm-form-setting-tabs a i {
@@ -8843,12 +8257,8 @@
8843 8257 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8844 8258 right: auto;
8845 8259 left: 0;
8846 8260 }
8847 -
8848 - .frm_on_submit_type svg {
8849 - display: none;
8850 - }
8851 8261 }
8852 8262
8853 8263 @media only screen and (max-width: 475px) {
8854 8264 #frm_bs_dropdown {
@@ -8864,18 +8274,8 @@
8864 8274 margin-right: 0;
8865 8275 }
8866 8276 }
8867 8277
8868 -/* Firefox */
8869 -@-moz-document url-prefix() {
8870 - .frm-white-body .tablenav select,
8871 - .frm-white-body .tablenav input[type="text"],
8872 - .wp-admin .frm_wrap .tablenav select,
8873 - .frm_wrap .tablenav input[type="text"] {
8874 - padding-top: 5px;
8875 - }
8876 -}
8877 -
8878 8278 /* PRINT */
8879 8279 @media print {
8880 8280 a, .misc-pub-section a {
8881 8281 color: #000 !important;
@@ -8926,9 +8326,9 @@
8926 8326 display: block;
8927 8327 padding: 20px;
8928 8328 }
8929 8329
8930 - .frm_wrap .columns-2,
8330 + .frm_page_container .columns-2,
8931 8331 .frm_wrap .frm_page_container {
8932 8332 height: auto;
8933 8333 display: block;
8934 8334 }
@@ -8965,10 +8365,9 @@
8965 8365 width: 100%;
8966 8366 }
8967 8367 }
8968 8368
8969 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8970 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8369 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8971 8370 display: inline-block;
8972 8371 }
8973 8372
8974 8373 /* Change the order of subfields of the Name field in the backend */
@@ -8975,12 +8374,16 @@
8975 8374 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8976 8375 order: 2;
8977 8376 }
8978 8377
8378 +.frm-video-wrapper {
8379 + padding: 0 20px;
8380 +}
8381 +
8979 8382 .frm-video-wrapper iframe {
8980 8383 width: 100%;
8981 8384 max-width: 843px;
8982 - border-radius: var(--border-radius);
8385 + border-radius: 10px;
8983 8386 }
8984 8387
8985 8388 #frm_field_group_popup {
8986 8389 position: absolute;
@@ -8986,9 +8389,9 @@
8986 8389 position: absolute;
8987 8390 top: 0;
8988 8391 right: 0;
8989 8392 width: 366px;
8990 - max-height: 231px;
8393 + height: 231px;
8991 8394 border-radius: 8px;
8992 8395 background: #fff;
8993 8396 box-shadow: 0px 20px 48px rgba(40, 47, 54, 0.15);
8994 8397 z-index: 3;
@@ -9006,23 +8409,8 @@
9006 8409 bottom: 50px;
9007 8410 height: 196px;
9008 8411 }
9009 8412
9010 -#frm_field_group_popup > hr {
9011 - margin: 12px 0;
9012 -}
9013 -
9014 -#frm_field_group_popup .frm-cancel-custom-field-group-layout,
9015 -#frm_field_group_popup .frm-save-custom-field-group-layout {
9016 - padding: 4px 18px;
9017 -}
9018 -
9019 -#frm_field_group_popup .frm-cancel-custom-field-group-layout:hover {
9020 - border-color: var(--primary-500) !important;
9021 - color: var(--primary-500);
9022 - background-color: transparent !important;
9023 -}
9024 -
9025 8413 .frm-merge-fields-into-row #frm_field_group_popup .frm-break-field-group {
9026 8414 display: none;
9027 8415 }
9028 8416
@@ -9037,9 +8425,9 @@
9037 8425 font-size: 11px;
9038 8426 line-height: 15px;
9039 8427 text-transform: uppercase;
9040 8428 color: rgba(40, 47, 54, 0.45);
9041 - margin-bottom: 27px;
8429 + margin-bottom: 40px;
9042 8430 }
9043 8431
9044 8432 .frm-row-layout-option {
9045 8433 background: #F6F7FB;
@@ -9044,9 +8432,9 @@
9044 8432 .frm-row-layout-option {
9045 8433 background: #F6F7FB;
9046 8434 box-sizing: border-box;
9047 8435 border-radius: 2px;
9048 - padding: 15px 10px;
8436 + padding: 18px 11px;
9049 8437 }
9050 8438
9051 8439 #frm_field_group_popup .frm-row-layout-option .frm_grid_container {
9052 8440 grid-gap: 0 5%;
@@ -9054,23 +8442,22 @@
9054 8442 }
9055 8443
9056 8444 #frm_field_group_popup .frm-row-layout-option {
9057 8445 cursor: pointer;
9058 - border: 2px solid transparent;
9059 8446 }
9060 8447
9061 8448 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
9062 8449 #frm_field_group_popup .frm-row-layout-option:hover {
9063 - border-color: var(--primary-500);
8450 + outline: 1px solid var(--primary-color);
9064 8451 }
9065 8452
9066 8453 .frm-custom-field-group-layout,
9067 8454 .frm-break-field-group {
9068 - padding: 4px 24px;
8455 + padding: 5px 15px;
9069 8456 cursor: pointer;
9070 - font-size: var(--text-sm);
8457 + font-size: 14px;
9071 8458 line-height: 19px;
9072 - color: rgba(72, 78, 84, 1);
8459 + color: rgba(40, 47, 54, 0.85);
9073 8460 }
9074 8461
9075 8462 .frm-custom-field-group-layout:hover,
9076 8463 .frm-break-field-group:hover {
@@ -9115,13 +8502,12 @@
9115 8502 }
9116 8503
9117 8504 .frm-builder-popup-heading {
9118 8505 font-weight: 600;
9119 - font-size: 11px;
8506 + font-size: 12px;
9120 8507 line-height: 15px;
9121 8508 text-transform: uppercase;
9122 8509 color: rgba(40, 47, 54, 0.45);
9123 - margin-bottom: 7px;
9124 8510 }
9125 8511
9126 8512 .frm-builder-popup-subheading {
9127 8513 font-size: 12px;
@@ -9128,17 +8514,8 @@
9128 8514 line-height: 16px;
9129 8515 color: rgba(40, 47, 54, 0.45);
9130 8516 }
9131 8517
9132 -#frm_field_group_popup input[type="text"] {
9133 - height: 30px;
9134 - border-radius: 3px;
9135 - font-size: 14px;
9136 - padding: 8px;
9137 - color: rgba(84, 95, 110, 1);
9138 - border-color: rgba(40, 47, 54, 0.2);
9139 -}
9140 -
9141 8518 .frm-multiselect-popup-separator {
9142 8519 height: 36px;
9143 8520 width: 1px;
9144 8521 position: relative;
@@ -9150,17 +8527,22 @@
9150 8527 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9151 8528 pointer-events: none;
9152 8529 }
9153 8530
9154 -.frm-sortable-helper {
9155 - /* Make sure the item being dragged appears above other form builder fields */
9156 - z-index: 99;
8531 +.frm-new-pill {
8532 + background: #F47449;
8533 + border-radius: 13px;
8534 + padding: 2px 6px;
8535 + color: #fff;
8536 + margin-left: 5px;
8537 + font-size: 9px;
8538 + vertical-align: middle;
9157 8539 }
9158 8540
9159 8541 #frm_banner {
9160 8542 width: 100%;
9161 8543 color: #fff;
9162 - background: var(--primary-500);
8544 + background: var(--primary-color);
9163 8545 height: 40px;
9164 8546 line-height: 40px;
9165 8547 text-align: center;
9166 8548 position: relative;
@@ -9190,89 +8572,4 @@
9190 8572
9191 8573 .frm-banner-dismiss .frmsvg {
9192 8574 vertical-align: top;
9193 8575 }
9194 -
9195 -.frm-ready-made-solution:not(.frm-search-result) {
9196 - display: none !important;
9197 -}
9198 -
9199 -#frm_new_form_modal .frm-ready-made-solution {
9200 - padding: var(--gap-xs) !important;
9201 - margin: var(--gap-xs) 0 var(--gap-sm);
9202 - display: flex;
9203 - gap: var(--gap-sm);
9204 - position: relative;
9205 - overflow: visible !important;
9206 -}
9207 -
9208 -#frm_new_form_modal .frm-ready-made-solution:after {
9209 - width: 100%;
9210 - height: 1px;
9211 - background: var(--grey-300);
9212 - content: '';
9213 - position: absolute;
9214 - bottom: -10px;
9215 - left: 0;
9216 -}
9217 -
9218 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9219 - content: none;
9220 -}
9221 -
9222 -#frm_new_form_modal .frm-solution-details {
9223 - flex: 1;
9224 - display: flex;
9225 - gap: var(--gap-2xs);
9226 - flex-direction: column;
9227 -}
9228 -
9229 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9230 - width: 30%;
9231 - text-align: center;
9232 -}
9233 -
9234 -.frm-ready-made-solution h3 ~ a {
9235 - color: var(--primary-500);
9236 -}
9237 -
9238 -.frm-ready-made-solution img {
9239 - max-width: 100%;
9240 - display: block;
9241 - box-shadow: var(--box-shadow-lg);
9242 -}
9243 -
9244 -/* On Submit action */
9245 -.frm_single_on_submit_settings .frm_form_field {
9246 - margin: 8px 0;
9247 -}
9248 -
9249 -.frm_on_submit_type_setting {
9250 - padding: 8px 0;
9251 -}
9252 -
9253 -.frm_on_submit_type label {
9254 - display: flex;
9255 - border: 1px solid var(--grey-border);
9256 - border-radius: var(--small-radius);
9257 - gap: 16px;
9258 - padding: 16px;
9259 - align-items: center;
9260 - justify-content: center;
9261 -}
9262 -
9263 -.frm_on_submit_type input {
9264 - opacity: 0 !important;
9265 - position: absolute;
9266 - z-index: -1;
9267 -}
9268 -
9269 -.frm_on_submit_type input[type="radio"]:checked + label {
9270 - border-color: var(--primary-color);
9271 - box-shadow: 0 0 0 1px var(--primary-color);
9272 -}
9273 -
9274 -#form_settings_page .frm_on_submit_type label:hover,
9275 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9276 - color: var(--primary-color);
9277 -}
9278 -/* End On Submit action */