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