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 +1487 -2009 6.35.2.06 View file →
@@ -1,102 +1,33 @@
1 1 @import url(font_icons.css);
2 2
3 3 :root,
4 -.frm-white-body,
5 4 .frm_wrap {
6 - --grey-900: #101828;
7 - --grey-800: #1D2939;
8 - --grey-700: #344054;
9 - --grey-500: #667085; /* Roughly 65% opacity */
10 - --grey-400: #98A2B3;
11 - --grey-300: #D0D5DD;
12 - --grey-200: #EAECF0;
13 - --grey-100: #F2F4F7;
14 - --grey-50: #F9FAFB;
15 - --grey-25: #FCFCFD;
16 - --darkest-grey: var(--grey-900); /* Deprecated */
17 - --dark-grey: var(--grey-700); /* Deprecated */
5 + --light-blue: rgba(188, 224, 253, .2);
6 + --blue-border: rgb(188, 224, 253);
7 + --darkest-grey: rgb(40, 47, 54);
8 + --dark-grey: rgba(40, 47, 54, .85);
18 9 --medium-grey: rgba(40, 47, 54, .65);
19 - --grey: var(--grey-500); /* Deprecated */
20 - --grey-border: var(--grey-300); /* Deprecated */
10 + --grey: rgba(40, 47, 54, .45);
11 + --grey-border: rgba(40, 47, 54, .2);
21 12 --lightest-grey: rgb(250, 250, 250);
22 - --sidebar-color: var(--grey-50);
23 - --sidebar-hover: var(--grey-200);
24 - --primary-700: #2B66A9;
25 - --primary-500: #4199FD;
26 - --primary-25: #F5FAFF;
27 - --primary-color: var(--primary-500); /* Deprecated */
28 - --primary-hover: var(--primary-700); /* Deprecated */
29 - --light-blue: var(--primary-25); /* Deprecated */
30 - --blue-border: rgb(188, 224, 253);
31 - --error-500: #F04438;
32 - --error-700: #B42318;
13 + --sidebar-color: rgb(246, 247, 251);
14 + --sidebar-hover: rgb(227, 232, 235);
15 + --primary-color: rgb(65, 153, 253);
16 + --primary-hover: rgb(49, 119, 199);
33 17 --green: rgb(63, 172, 37);
34 18 --orange: #F15A24;
35 19 --pink: rgb(226, 42, 110);
36 20 --purple: rgb(141, 53, 245);
37 21 --border-radius: 35px;
38 - --small-radius: 8px;
22 + --small-radius: 6px;
39 23 --small-sidebar: 275px;
40 24 --medium-sidebar: 350px;
41 25 --big-sidebar: 390px;
42 26 --biggest-sidebar: 450px;
43 - --text-xs: 12px;
44 - --text-sm: 14px;
45 - --text-md: 16px;
46 - --text-lg: 18px;
47 - --text-xl: 20px;
48 - --h-xs: 24px;
49 - --h-sm: 30px;
50 - --h-md: 36px;
51 - --leading: 1.5;
52 - --gap-2xs: 4px;
53 - --gap-xs: 8px;
54 - --gap-sm: 16px;
55 - --gap-md: 24px;
56 - --gap-lg: 32px;
57 - --gap-xl: 40px;
58 - --gap-2xl: 48px;
59 - --box-shadow-sm: 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
60 - --box-shadow-md: 0px 1.88298px 3.76596px -0.941489px rgba(16, 24, 40, 0.1), 0px 0.941489px 1.88298px -0.941489px rgba(16, 24, 40, 0.06);
61 - --box-shadow-lg: 0px 6px 8px -2px rgba(16, 24, 40, 0.08), 0px 1.88298px 4px -1px rgba(16, 24, 40, 0.03), 0px 0.470745px 1.41223px rgba(16, 24, 40, 0.1), 0px 0.470745px 0.941489px rgba(16, 24, 40, 0.06);
62 - --box-shadow-xl: 0px 9.41489px 11.2979px -1.88298px rgba(16, 24, 40, 0.08), 0px 3.76596px 3.76596px -1.88298px rgba(16, 24, 40, 0.03);
63 27 }
64 28
65 -@font-face {
66 - font-family: 'Inter';
67 - src: url('../fonts/Inter-VariableFont_slnt,wght.ttf?v=1') format('truetype');
68 -}
69 -
70 -.with_frm_style,
71 -.frm-white-body .wpbody-content,
72 -.frm_wrap {
73 - font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
74 -}
75 -
76 -/* Safari 11+ */
77 -@media not all and (min-resolution:.001dpcm) {
78 - @supports (-webkit-appearance:none) and (stroke-color:transparent) {
79 - .with_frm_style,
80 - .frm-white-body .wpbody-content,
81 - .frm_wrap {
82 - -webkit-font-smoothing: antialiased;
83 - }
84 - }
85 -}
86 -
87 -.frm-white-body,
88 -.frm-white-body p,
89 -.frm_wrap,
90 -.frm_wrap p,
91 -.frm-modal,
92 -.frm-white-body .postbox .inside {
93 - font-size: var(--text-sm);
94 - color: var(--grey-500);
95 - line-height: var(--leading);
96 -}
97 -
98 -body:not(.frm-admin-page-styles):not(.frm-admin-page-style) .with_frm_style .frm_form_fields > fieldset {
29 +body:not(.frm-admin-page-styles) .with_frm_style .frm_form_fields > fieldset {
99 30 --fieldset-padding: 15px 0;
100 31 }
101 32
102 33 a, .widget .widget-top, .stuffbox h3, .frm-collapsed {
@@ -103,13 +34,12 @@
103 34 cursor: pointer;
104 35 text-decoration: none;
105 36 }
106 37
107 -.post-type-frm_display .wrap > #posts-filter,
108 38 .wrap.frm-with-margin,
109 39 #frm_top_bar + .wrap,
110 40 .frm_wrap > .wrap {
111 - margin: var(--gap-sm) var(--gap-md) var(--gap-md);
41 + margin: 10px 40px 30px;
112 42 }
113 43
114 44 .frm-full-screen #wpbody-content > .wrap {
115 45 margin: 0;
@@ -118,12 +48,23 @@
118 48 .post-type-frm_display .wrap {
119 49 margin: 0;
120 50 }
121 51
52 +.columns-2 .frm-right-panel + #post-body-content {
53 + padding-bottom: 26px;
54 + border-left: 1px solid var(--sidebar-hover);
55 +}
56 +
122 57 .toplevel_page_formidable #post-body-content {
123 58 overflow-x: visible;
124 59 }
125 60
61 +.formidable_page_formidable-pro-upgrade #wpfooter,
62 +.toplevel_page_formidable #wpfooter {
63 + border-top: 1px solid #ddd;
64 + background: #fff;
65 +}
66 +
126 67 .frm-full-screen {
127 68 height: 100%;
128 69 overflow: hidden;
129 70 }
@@ -133,10 +74,8 @@
133 74 .frm-full-screen.post-type-frm_display {
134 75 overflow: auto;
135 76 }
136 77
137 -.frm-full-screen #wpadminbar,
138 -.frm-full-screen #adminmenumain,
139 78 .frm-full-screen .wp-header-end {
140 79 display: none;
141 80 }
142 81
@@ -142,44 +81,30 @@
142 81
143 82 .frm-full-screen #wpbody-content,
144 83 .frm-full-screen #wpbody,
145 84 .frm-full-screen #wpcontent {
146 - padding: 0;
85 + padding-bottom: 0;
147 86 overflow: hidden;
148 - margin: 0 !important;
149 87 }
150 88
151 -.frm-white-body #wpbody-content {
152 - position: relative; /* For screen meta links */
153 - padding-bottom: 0;
154 -}
155 -
156 89 .post-new-php.post-type-frm_display #screen-meta-links,
157 90 .post-php.post-type-frm_display #screen-meta-links,
158 -.frm-white-body #wpfooter {
91 +.frm-full-screen #wpfooter {
159 92 display: none;
160 93 }
161 94
162 -.frm-white-body #screen-meta-links {
163 - position: fixed;
164 - bottom: 0;
165 - 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);
166 101 }
167 102
168 -.frm-full-screen #screen-meta-links .screen-meta-toggle {
169 - right: 55px;
170 -}
171 -
172 103 .frm-white-body #screen-meta-links .show-settings {
173 - border-radius: var(--small-radius) var(--small-radius) 0 0;
174 - border: 1px solid var(--grey-300);
175 - border-bottom: none;
104 + box-shadow: none;
176 105 }
177 106
178 -.frm-white-body.frm-lite #screen-meta-links .screen-meta-toggle {
179 - right: 125px; /* Don't cover the lite upgrade button */
180 -}
181 -
182 107 .frm-white-body #screen-meta {
183 108 margin: 0;
184 109 }
185 110
@@ -187,9 +112,9 @@
187 112 color: var(--grey);
188 113 }
189 114
190 115 .frm-white-body .columns-2 {
191 - border-bottom: 1px solid var(--grey-300);
116 + border-bottom: 1px solid var(--grey-border);
192 117 }
193 118
194 119 .frm-full-screen .columns-2 {
195 120 border: none;
@@ -219,13 +144,8 @@
219 144 .frm_wrap .tablenav {
220 145 margin-bottom: 10px;
221 146 }
222 147
223 -.frm-white-body .tablenav .actions select,
224 -.wp-admin .frm_wrap .tablenav select {
225 - margin-right: var(--gap-xs);
226 -}
227 -
228 148 .tablenav .actions .button {
229 149 margin-top: 1px;
230 150 }
231 151
@@ -241,17 +161,17 @@
241 161 background: #fff;
242 162 }
243 163
244 164 .frm-white-body table.widefat th {
245 - font-size: var(--text-md);
165 + font-size: 16px;
246 166 }
247 167
248 168 .frm-white-body table.widefat th a {
249 - color: var(--grey-700);
169 + color: var(--dark-grey);
250 170 }
251 171
252 172 .frm-white-body table.widefat strong a {
253 - color: var(--primary-700);
173 + color: var(--primary-hover);
254 174 }
255 175
256 176 .frm-scroll-box {
257 177 clear: both;
@@ -256,9 +176,9 @@
256 176 .frm-scroll-box {
257 177 clear: both;
258 178 overflow: auto;
259 179 max-height: 405px;
260 - border: 1px solid var(--grey-300);
180 + border: 1px solid var(--grey-border);
261 181 border-radius: var(--small-radius);
262 182 }
263 183
264 184 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -263,9 +183,9 @@
263 183
264 184 .frm_form_field.frm_scroll_box .frm_opt_container {
265 185 height: 100px;
266 186 overflow: auto;
267 - border: 1px solid var(--grey-300);
187 + border: 1px solid var(--grey-border);
268 188 }
269 189
270 190 .frm-short-list {
271 191 overflow: auto;
@@ -272,9 +192,9 @@
272 192 max-height: 190px;
273 193 }
274 194
275 195 .frm-white-body table.frm-border td {
276 - font-size: var(--text-sm);
196 + font-size: 14px;
277 197 }
278 198
279 199 .frm-white-body .striped > tbody > :nth-child(odd) {
280 200 background-color: #fff;
@@ -288,149 +208,56 @@
288 208 float: right;
289 209 }
290 210
291 211 #frm_top_bar {
292 - display: flex;
293 - gap: var(--gap-sm);
212 + display: block;
294 213 width: 100%;
295 - height: 72px;
214 + max-height: 100px;
215 + padding: 25px 40px 25px;
296 216 margin: 0;
297 217 box-sizing: border-box;
298 218 text-align: center;
299 - padding: 0 var(--gap-md);
300 219 }
301 220
302 -#frm_top_bar > .frm-full-close:last-child,
303 -#frm_top_bar > #frm-publishing:last-child {
304 - margin-left: auto;
305 -}
306 -
307 -#frm_top_bar {
308 - border-bottom: 1px solid var(--grey-300);
309 - 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;
310 226 overflow: visible;
311 227 }
312 228
313 -.frm-white-body h1,
314 -.frm-white-body h2,
315 -.frm-white-body h3,
316 -.frm-white-body h4 {
317 - color: var(--grey-900);
318 - font-weight: 400;
319 - line-height: var(--leading) !important;
229 +.frm-full-screen #frm_top_bar {
230 + padding: 0 15px !important;
320 231 }
321 232
322 -.frm-white-body .wrap h1,
323 -.frm-white-body h1 {
324 - font-size: var(--text-xl);
325 -}
326 -
327 -.frm-white-body .wrap h2,
328 -.frm-white-body h2 {
329 - font-size: var(--text-lg);
330 -}
331 -
332 -.frm-white-body .wrap h3,
333 -.frm-white-body h3 {
334 - font-size: var(--text-md);
335 -}
336 -
337 -.frm-white-body .wrap h4,
338 -.frm-white-body h4 {
339 - font-size: var(--text-sm);
340 - font-weight: 500;
341 -}
342 -
343 -/* Override CSS in Views plugin. */
344 -.frm-views-editor-body .frm_page_container #frm_top_bar h1 {
345 - padding: 0 !important;
346 - color: var(--grey-900);
347 - font-size: var(--text-xl) !important;
348 -}
349 -
350 -.post-type-frm_display .frm_top_left {
351 - padding-bottom: 0 !important;
352 -}
353 -
354 -.frm-new-table-view-option.frm-selected-table-view-option {
355 - border-radius: var(--small-radius);
356 - background: var(--primary-25);
357 -}
358 -
359 -.frm-views-editor-body #frm_adv_info .tabs-panel { /* Views sidebar */
360 - padding-left: 4px;
361 - padding-right: 4px;
362 -}
363 -
364 -#frm_edit_box_content_modal .frm_modal_footer {
365 - padding-top: var(--gap-sm);
366 - border-top: 1px solid var(--grey-300);
367 -}
368 -
369 -#frm_edit_box_content_modal .frm_modal_footer > div {
370 - display: flex;
371 - justify-content: space-between;
372 -}
373 -
374 -#frm_edit_box_content_modal #frm_modal_box_select_area,
375 -#frm_edit_box_content_modal #frm_box_content_wysiwyg_wrapper,
376 -#frm_edit_box_content_modal .frm_modal_content {
377 - max-height: calc(100vh - 176px) !important;
378 -}
379 -
380 -#frm_edit_box_content_modal #frm_modal_box_select_area {
381 - height: calc(100vh - 176px) !important;
382 -}
383 -
384 -#frm_edit_box_content_modal #wp-content-editor-tools {
385 - padding-top: 0;
386 -}
387 -
388 -#frm_edit_box_content_modal.frm-modal .postbox .frm-modal-title + div:last-child {
389 - right: var(--gap-md);
390 -}
391 -
392 -.frm_code_list.frm-full-hover .frm-dropdown-view a {
393 - flex-direction: row-reverse; /* Switch in the HTML */
394 -}
395 -
396 -#frm_view_editor_left.frm-right-panel .accordion-section-title:before {
397 - content: '' !important;
398 - margin: 0;
399 -}
400 -/** End Temporary View CSS */
401 -
402 233 .frm-upgrade-bar {
403 - background: rgba(188, 224, 253, 0.23);
234 + text-align: center;
235 + background: var(--sidebar-color);
404 236 border-bottom: 1px solid var(--sidebar-hover);
405 - padding: 3px 0 3px 40px;
237 + padding: 3px 0;
406 238 font-size: 95%;
407 239 }
408 240
409 241 .frm-upgrade-bar span {
410 - opacity: .9;
242 + opacity: .5;
411 243 }
412 244
413 245 a h1 .frmsvg {
414 - color: var(--grey-400);
415 - vertical-align: middle;
416 - min-width: var(--text-sm);
246 + color: var(--medium-grey);
247 + vertical-align: baseline;
417 248 }
418 249
419 -a .frmsvg {
420 - color: currentColor;
421 -}
422 -
423 250 .frm_wrap .view-switch a.current:before,
424 -.frm-white-body a,
425 -.frm_wrap a,
426 -.frm_wrap a i {
251 +a .frmsvg,
252 +.frm_wrap a i,
253 +.frm_wrap a {
427 254 color: var(--primary-color);
428 255 }
429 256
430 257 .frm_wrap a:active,
431 258 .frm_wrap a:hover {
432 - color: var(--primary-700);
259 + color: var(--primary-hover);
433 260 box-shadow: none;
434 261 }
435 262
436 263 .post-type-frm_display a:focus,
@@ -444,30 +271,34 @@
444 271 white-space: nowrap;
445 272 max-width: 250px;
446 273 overflow: hidden;
447 274 text-overflow: ellipsis;
448 - align-self: center;
449 275 }
450 276
451 -.post-type-frm_display .frm_top_left,
452 277 .frm_top_left.frm_top_wide {
453 278 max-width: 100%;
454 279 }
455 280
456 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
457 -.frm_nav_bar .frm-header-logo {
458 - 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;
459 285 }
460 286
461 -#frm_top_bar .frm_form_nav {
462 - 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;
463 291 }
464 292
293 +.frm_page_container .frm-header-logo {
294 + margin-bottom: 6px;
295 +}
296 +
465 297 ul.frm_form_nav {
466 298 margin: 0 auto;
467 - padding-top: 18px;
299 + padding-top: 19px;
468 300 display: block;
469 - min-width: 240px;
470 301 }
471 302
472 303 .nav-tab-wrapper.frm_form_nav {
473 304 padding: 0 25px;
@@ -473,12 +304,16 @@
473 304 padding: 0 25px;
474 305 }
475 306
476 307 ul.frm_form_nav > li {
477 - margin: 0 min(3.5%, 32px) 0 0;
308 + margin: 0 3.5% 0 0;
478 309 display: inline-block;
479 310 }
480 311
312 +ul.frm_form_nav > li:last-of-type {
313 + margin-right: 0;
314 +}
315 +
481 316 .post-type-frm_display #advanced-sortables h2.hndle,
482 317 .post-type-frm_display #side-sortables h2.hndle,
483 318 .post-type-frm_display #normal-sortables h2.hndle,
484 319 .post-type-frm_display .frm_form_nav .nav-tab-active,
@@ -485,12 +320,13 @@
485 320 .frm_form_nav > li > a {
486 321 font-size: 1.3em;
487 322 text-decoration: none;
488 323 display: block;
489 - padding: 6px 2px 4px;
324 + padding: 5px 2px 15px;
490 325 font-weight: 500;
491 - color: var(--grey-700);
492 - border-bottom: 2px solid transparent;
326 + color: var(--dark-grey);
327 + border-bottom: 3px solid transparent;
328 + letter-spacing: 1px;
493 329 }
494 330
495 331 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
496 332 margin-top: 10px;
@@ -505,15 +341,15 @@
505 341 box-shadow: none;
506 342 }
507 343
508 344 .frm_form_nav > li > a {
509 - font-size: var(--text-md);
510 - font-weight: 400;
511 - color: var(--grey-500);
345 + font-size: 13px;
346 + text-transform: uppercase;
347 + opacity: .8;
512 348 }
513 349
514 350 .frm_form_nav > li > a:hover {
515 - border-color: var(--primary-700);
351 + border-color: var(--primary-hover);
516 352 }
517 353
518 354 .frm_form_nav .frm-dropdown-menu a:hover {
519 355 background-color: #eaf2fa;
@@ -521,27 +357,25 @@
521 357
522 358 .post-type-frm_display .frm_form_nav .nav-tab-active,
523 359 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
524 360 .frm_form_nav > li a.current_page {
525 - color: var(--primary-500);
526 - border-color: var(--primary-500);
361 + color: var(--primary-color);
362 + border-color: var(--primary-color);
527 363 background: transparent;
528 364 opacity: 1;
529 - font-weight: 600;
530 365 }
531 366
532 367 .frm-full-close {
533 368 display: none;
534 - padding-left: var(--gap-md);
535 - border: 0 solid var(--grey-300);
536 - 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);
537 372 height: 100%;
538 373 box-sizing: border-box;
539 374 }
540 375
541 376 .frm-full-screen .frm-full-close {
542 - display: flex;
543 - align-items: center;
377 + display: block;
544 378 }
545 379
546 380 .frm-full-close a {
547 381 display: block;
@@ -550,49 +384,57 @@
550 384 .frm-full-close .frmsvg {
551 385 font-size: 20px;
552 386 width: 20px;
553 387 height: 20px;
554 - color: var(--grey-500);
388 + padding: 5px;
389 + color: var(--grey);
555 390 }
556 391
557 -#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;
558 395 font-weight: 400;
559 396 padding: 0;
560 397 margin: 0;
561 - color: var(--grey-900);
562 - display: inline-flex;
563 - gap: var(--gap-sm);
564 - 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;
565 408 text-align: left;
566 409 width: 200px;
410 + line-height: 1.16;
567 411 }
568 412
569 -#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;
570 417 max-width: 175px;
571 418 text-overflow: ellipsis;
572 419 overflow: hidden;
573 420 white-space: nowrap;
574 421 display: inline-block;
575 - vertical-align: bottom;
576 422 }
577 423
578 -#frm_top_bar ul.frm_form_nav,
579 -#frm_top_bar .frm-header-logo,
580 -#frm_top_bar #frm_bs_dropdown {
581 - align-self: center;
582 - margin-top: 0;
583 - margin-bottom: 0;
584 - padding-top: 0;
424 +#frm_top_bar h1,
425 +#frm_top_bar h2 {
426 + color: var(--medium-grey);
585 427 }
586 428
587 -#frm_top_bar .frm-header-logo {
588 - display: flex; /* Get rid of extra padding below logo */
429 +#frm_top_bar #frm_bs_dropdown {
430 + float: left;
589 431 }
590 432
591 433 #frm_top_bar h2 {
592 434 float: left;
593 - margin: 0 0 0 var(--gap-sm);
594 - padding: 2px 0 2px var(--gap-sm);
435 + margin: 0 0 0 15px;
436 + padding: 2px 0 2px 15px;
595 437 font-weight: normal;
596 438 border-left: 2px solid var(--grey);
597 439 }
598 440
@@ -600,19 +442,28 @@
600 442 margin-top: 0;
601 443 }
602 444
603 445 #frm-publishing {
446 + float: right;
447 + margin-top: 15px;
604 448 min-width: 225px;
605 - align-self: center;
606 - align-items: center;
607 - display: flex;
608 - flex-direction: row-reverse;
609 - gap: 0 var(--gap-sm);
610 - flex-wrap: wrap;
449 + max-width: 325px;
450 + min-height: 10px;
611 451 }
612 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 +
613 464 .frm_wrap .postbox {
614 - border-color: var(--grey-300);
465 + border-color: var(--grey-border);
615 466 border-radius: 6px;
616 467 box-shadow: none;
617 468 }
618 469
@@ -620,9 +471,9 @@
620 471 cursor: default;
621 472 padding: 10px 20px;
622 473 margin: 0;
623 474 line-height: 1.4em;
624 - border-color: var(--grey-300);
475 + border-color: var(--grey-border);
625 476 }
626 477
627 478 .frm-pre-hndle {
628 479 font-size: 15px;
@@ -633,12 +484,8 @@
633 484 .frm-empty-row {
634 485 display: none;
635 486 }
636 487
637 -.frm-child-row {
638 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
639 -}
640 -
641 488 .frm_animate_bg {
642 489 transition: background 200ms linear, color 200ms linear;
643 490 }
644 491
@@ -646,48 +493,16 @@
646 493 clear: both;
647 494 margin: 0;
648 495 }
649 496
650 -.frm_wrap .subsubsub a {
651 - line-height: var(--leading);
652 - font-size: var(--text-sm);
653 -}
654 -
655 -.frm-admin-page-styles .frm_page_container,
656 -.frm_wrap .frm_page_container { /* Use .frm_wrap to avoid messing up Views editor layout */
497 +.frm_wrap .frm_page_container {
657 498 height: calc( 100vh - 32px );
658 499 display: flex;
659 500 flex-direction: column;
660 501 overflow: hidden;
661 502 padding-top: 0;
662 - position: fixed;
663 - top: 32px;
664 - bottom: 0;
665 - left: 0;
666 - right: 0;
667 503 }
668 504
669 -.frm-admin-page-translate .frm_wrap .frm_page_container, .frm-admin-page-update_translations .frm_wrap .frm_page_container {
670 - position: static;
671 -}
672 -
673 -.auto-fold.frm-admin-page-styles .frm_page_container,
674 -.auto-fold .frm_wrap .frm_page_container {
675 - left: 160px;
676 -}
677 -
678 -.folded.frm-admin-page-styles .frm_page_container,
679 -.folded .frm_wrap .frm_page_container {
680 - left: 38px;
681 -}
682 -
683 -.frm-full-screen.frm-admin-page-styles .frm_page_container,
684 -.frm-full-screen .frm_wrap .frm_page_container {
685 - height: 100vh;
686 - top: 0;
687 - left: 0;
688 -}
689 -
690 505 .frm-full-screen.frm-admin-page-entries .frm_page_container,
691 506 .frm-new-entry .frm_page_container,
692 507 .frm-admin-page-reports .frm_page_container,
693 508 .frm_list_entry_page .frm_page_container {
@@ -698,22 +513,16 @@
698 513 .frm-new-entry .columns-2 {
699 514 border: none;
700 515 }
701 516
702 -.frm-white-body #frm_top_bar,
703 -.frm-white-body .columns-2 {
517 +.frm_wrap #frm_top_bar,
518 +.frm_wrap .columns-2 {
704 519 flex: 0 0 auto;
705 520 }
706 521
707 -.columns-2 .frm-right-panel + div {
708 - padding-bottom: var(--gap-md);
709 - border-left: 1px solid var(--sidebar-hover);
710 -}
711 -
712 -.columns-2 .frm-right-panel + div,
713 522 .frm_wrap #post-body-content {
714 523 padding-bottom: 0;
715 - padding-top: var(--gap-sm);
524 + padding-top: 20px;
716 525 margin-bottom: 0;
717 526 background: #fff;
718 527 width: auto;
719 528 float: none;
@@ -719,17 +528,16 @@
719 528 float: none;
720 529 flex: 2;
721 530 }
722 531
723 -.frm-white-body .columns-2 {
532 +.frm_wrap .columns-2 {
724 533 flex: 1;
725 534 display: flex;
726 535 overflow: hidden;
727 536 }
728 537
729 -.frm-white-body .columns-2 > div {
538 +.frm_wrap .columns-2 > div {
730 539 overflow-y: auto;
731 - box-sizing: border-box;
732 540 }
733 541
734 542 .frm_wrap .columns-2 .frm-right-panel,
735 543 .frm-right-panel {
@@ -776,9 +584,9 @@
776 584
777 585 .frm-default-switcher a.current,
778 586 .frm-default-switcher a.current .frmsvg,
779 587 .frm-default-switcher a.current i {
780 - color: var( --primary-500);
588 + color: var( --primary-color);
781 589 }
782 590
783 591 #new_fields,
784 592 .frm-has-modal,
@@ -786,15 +594,41 @@
786 594 position: relative;
787 595 }
788 596
789 597 .frm-inline-modal.postbox {
598 + border-color: var(--blue-border);
790 599 background: #fff;
791 600 }
792 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,
793 624 .frm_has_shortcodes .frmsvg,
794 -.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 {
795 629 position: absolute;
796 - color: var(--primary-500);
630 + color: var(--primary-color);
797 631 border-radius: 50%;
798 632 border: 1px solid transparent;
799 633 z-index: 100;
800 634 text-align: center;
@@ -799,8 +633,51 @@
799 633 z-index: 100;
800 634 text-align: center;
801 635 }
802 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 +
803 680 .frm_has_shortcodes input,
804 681 .frm_has_shortcodes textarea {
805 682 padding-left: 18px;
806 683 box-sizing: border-box;
@@ -807,11 +684,13 @@
807 684 }
808 685
809 686 #form_settings_page #frm_adv_info {
810 687 display: none;
688 + position: absolute;
811 689 top: 0;
812 - width: 310px;
813 - max-height: 315px;
690 + left: 0;
691 + width: 300px;
692 + max-height: 350px;
814 693 min-height: 200px;
815 694 overflow-y: scroll;
816 695 z-index: 100;
817 696 }
@@ -822,14 +701,10 @@
822 701 width: var(--small-sidebar);
823 702 min-width: var(--small-sidebar);
824 703 }
825 704
826 -#form_global_settings .frm_grid_container {
827 - gap: 0 var(--gap-md);
828 -}
829 -
830 705 .frm-inner-content {
831 - padding: var(--gap-md);
706 + padding: 10px 25px;
832 707 }
833 708
834 709 .post-type-frm_display #poststuff {
835 710 padding: 0 0 10px 40px;
@@ -895,17 +770,18 @@
895 770 }
896 771
897 772 .frm-right-panel .frm_field_list #frm-insert-fields {
898 773 max-height: none;
899 - font-size: var(--text-sm);
774 + font-size: 14px;
900 775 padding: 0;
901 776 }
902 777
903 -.frm-nav-tabs {
778 +.frm-nav-tabs,
779 +#frm-bulk-modal h2 {
904 780 margin: 10px 0 20px;
905 - padding: 0 var(--gap-sm);
781 + padding: 0 15px;
906 782 display: block;
907 - border-bottom: 1px solid var(--grey-300);
783 + border-bottom: 2px solid var(--sidebar-hover);
908 784 }
909 785
910 786 #frm-nav-tabs {
911 787 position: -webkit-sticky;
@@ -916,20 +792,11 @@
916 792 margin-top: 0;
917 793 padding-top: 5px;
918 794 }
919 795
920 -.frm_form_settings #frm_adv_info #frm-nav-tabs {
921 - background-color: #fff;
922 - margin: 0 -4px;
923 -}
924 -
925 -.frm_form_settings span.frm-with-right-icon {
926 - display: block;
927 -}
928 -
929 796 .frm-inline-modal .frm-nav-tabs,
930 797 #frm_adv_info .frm-nav-tabs {
931 - margin: 5px 0 0;
798 + margin: 5px 0 10px;
932 799 }
933 800
934 801 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
935 802 padding-right: 0;
@@ -935,25 +802,23 @@
935 802 padding-right: 0;
936 803 padding-left: 20px;
937 804 }
938 805
806 +#frm-bulk-modal h2,
939 807 .frm-nav-tabs li {
940 808 display: inline-block;
809 + font-size: 15px;
941 810 margin: 0;
942 811 }
943 812
813 +#frm-bulk-modal h2,
944 814 .frm-nav-tabs a {
945 - color: var(--grey-700);
815 + color: var(--dark-grey);
946 816 padding: 10px 1px;
947 817 margin: 0 9px;
948 818 border-bottom: 2px solid transparent;
949 819 }
950 820
951 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
952 - padding: 5px 1px;
953 - color: var(--grey-500);
954 -}
955 -
956 821 .frm-nav-tabs.frm-compact-nav a {
957 822 margin: 0 5px;
958 823 }
959 824
@@ -962,37 +827,33 @@
962 827 opacity: .9;
963 828 }
964 829
965 830 #frm_adv_info .frm-nav-tabs a {
966 - color: var(--grey-700);
831 + color: var(--dark-grey);
967 832 }
968 833
834 +#frm-bulk-modal h2,
969 835 .frm-nav-tabs a:hover,
970 836 .frm-nav-tabs .frm-tabs a {
971 - color: var(--primary-500) !important;
972 - border-color: var(--primary-500);
837 + color: var(--primary-color) !important;
838 + border-color: var(--primary-color);
973 839 }
974 840
975 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
976 - 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;
977 846 }
978 847
979 -#frm-bulk-modal .howto,
980 848 #frm-bulk-modal h3 {
981 - font-size: var(--text-sm);
982 - font-weight: 400;
983 - margin: 5px 0 10px;
849 + margin: 5px 20px 10px;
984 850 color: var(--grey);
985 851 }
986 852
987 -#frm-bulk-modal h3 {
988 - margin-left: 20px;
989 -}
990 -
991 -.frm-right-panel a.frm_add_logic_link,
992 853 .frm-right-panel h3 {
993 - color: var(--grey-700);
994 - font-size: var(--text-lg);
854 + color: var(--dark-grey);
855 + font-size: 20px;
995 856 font-weight: 400;
996 857 border-top: 2px solid var(--sidebar-hover);
997 858 margin: 0;
998 859 }
@@ -1002,17 +863,10 @@
1002 863 border-top: none;
1003 864 padding-top: 0 !important;
1004 865 }
1005 866
1006 -.frm-flex-justify,
1007 -.frm-right-panel .frm-single-settings h3 {
1008 - display: flex;
1009 - justify-content: space-between;
1010 - align-items: center;
1011 -}
1012 -
1013 867 .frm-right-panel h3 i {
1014 - color: var(--grey-700);
868 + color: var(--dark-grey);
1015 869 float: right;
1016 870 width: 16px;
1017 871 cursor: pointer;
1018 872 }
@@ -1074,12 +928,8 @@
1074 928 .frm_wrap #frm-categorydiv {
1075 929 border-right: none;
1076 930 }
1077 931
1078 -#frm_adv_info #frm-conditionals {
1079 - padding-top: var(--gap-sm);
1080 -}
1081 -
1082 932 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1083 933 display: none;
1084 934 max-height: none;
1085 935 }
@@ -1087,9 +937,9 @@
1087 937 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1088 938 position: relative;
1089 939 }
1090 940
1091 -.frm-white-body #footer-upgrade {
941 +.toplevel_page_formidable #footer-upgrade {
1092 942 display: none;
1093 943 }
1094 944
1095 945 .frm_list_entry_page h2 {
@@ -1099,8 +949,13 @@
1099 949 .frm_list_entry_page h2 + .error {
1100 950 clear: both;
1101 951 }
1102 952
953 +#titlediv #title {
954 + line-height: 1.5;
955 + height: auto;
956 +}
957 +
1103 958 .frm_sidebar select {
1104 959 width: 100%;
1105 960 margin-left: 0;
1106 961 margin-right: 0;
@@ -1137,12 +992,14 @@
1137 992
1138 993 /* Buttons */
1139 994
1140 995 .frm_orange_button,
1141 -.frm_reverse_button {
996 +.frm_reverse_button,
997 +.post-type-frm_display .wrap .add-new-h2 {
1142 998 font-size: 12px;
1143 999 border: 1px solid var(--orange);
1144 1000 color: var(--orange);
1001 + line-height: 1.4;
1145 1002 font-weight: 600;
1146 1003 padding: 1px 4px;
1147 1004 border-radius: 4px;
1148 1005 background: transparent;
@@ -1147,11 +1004,33 @@
1147 1004 border-radius: 4px;
1148 1005 background: transparent;
1149 1006 }
1150 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 +
1151 1027 .frm_reverse_button:hover,
1152 1028 .frm_reverse_button:active,
1153 -.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 {
1154 1033 color: #fff;
1155 1034 background: var(--orange);
1156 1035 border: 1px solid var(--orange);
1157 1036 }
@@ -1162,108 +1041,42 @@
1162 1041 }
1163 1042
1164 1043 .frm-button-primary,
1165 1044 .wp-core-ui .button-primary.frm-button-primary,
1166 -.wp-core-ui .button.frm-button-primary,
1167 1045 .frm-button-secondary,
1168 1046 .wp-core-ui .button-secondary.frm-button-secondary,
1169 1047 .wp-core-ui .button.frm-button-secondary,
1170 -.frm-white-body .frm-search .button,
1171 -.frm-white-body .search-box .button, /* Views */
1172 -.frm-white-body .tablenav .button,
1173 1048 .frm_orange_button,
1174 1049 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1050 +#form_global_settings .button-secondary,
1175 1051 .wp-core-ui.frm-white-body .button-primary,
1176 1052 .wp-core-ui.frm-white-body .button-secondary,
1177 1053 .frm-white-body .button-primary,
1178 1054 .frm-white-body .button-secondary,
1179 -#frm-form-button button,
1180 -.frm-preview-buttons button,
1181 -.frm-button-red,
1182 -.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){
1183 1057 text-shadow: none;
1184 1058 box-shadow: none;
1185 1059 border-radius: 30px;
1186 - border: 1px solid var(--primary-500);
1187 - font-size: var(--text-sm);
1060 + border-color: var(--primary-color);
1061 + font-size: 1em;
1188 1062 transition: all .2s ease;
1189 - padding: 7px 16px;
1190 - height: auto;
1063 + padding: 0 15px;
1064 + height: 28px;
1191 1065 min-height: 28px;
1192 1066 outline: none;
1193 - line-height: var(--leading);
1194 - box-sizing: border-box;
1195 - font-weight: 500;
1196 - margin-bottom: 0;
1197 - display: inline-block;
1067 + line-height: 26px;
1198 1068 }
1199 1069
1200 -.frm-button-tertiary {
1201 - border-color: transparent;
1202 - color: var(--primary-500);
1203 -}
1204 -
1205 -.frm-button-red,
1206 -.frm-button-red:focus {
1207 - color: #fff !important;
1208 - --primary-500: var(--error-500);
1209 - --primary-700: var(--error-700);
1210 -}
1211 -
1212 -.frm-white-body h2 .button,
1213 -.post-type-frm_display h2 .frm-button-primary,
1214 -.frm-white-body .tablenav .button,
1215 -.frm-button-primary.frm-button-sm,
1216 -.frm-button-secondary.frm-button-sm,
1217 -.frm-button-tertiary.frm-button-sm,
1218 -.frm-button-red.frm-button-sm {
1219 - padding: 4px 12px !important;
1220 - font-size: var(--text-xs) !important;
1221 -}
1222 -
1223 -.frm_no_style_button {
1224 - background: transparent;
1225 -}
1226 -
1227 -.frm-with-icon {
1228 - display: flex;
1229 - gap: var(--gap-xs);
1230 - align-items: center;
1231 -}
1232 -
1233 -.frm-with-icon svg {
1234 - opacity: .65; /* Get close to grey-500 without overriding hover colors */
1235 -}
1236 -
1237 -.frm-with-icon.button svg {
1238 - height: var(--text-sm);
1239 - width: var(--text-sm);
1240 -}
1241 -
1242 -.frm-with-icon.frm-button-sm svg {
1243 - height: var(--text-xs);
1244 - width: var(--text-xs);
1245 -}
1246 -
1247 -.frm-white-body .button.add_media {
1248 - /* Media buttons above RTE */
1249 - padding-left: 12px !important;
1250 - padding-right: 12px !important;
1251 - font-size: var(--text-xs);
1252 - border-radius: var(--border-radius);
1253 -}
1254 -
1255 1070 .wp-core-ui.frm-white-body #post-query-submit.button,
1256 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1257 1071 .wp-core-ui.frm-white-body .button.first-page,
1258 1072 .wp-core-ui.frm-white-body .button.prev-page,
1259 1073 .wp-core-ui.frm-white-body .button.next-page,
1260 1074 .wp-core-ui.frm-white-body .button.last-page,
1261 1075 .wp-core-ui.frm-white-body .button.action {
1262 - background-color: transparent;
1263 - border-color: var(--grey-300);
1264 - color: var(--grey-700);
1265 - border-radius: var(--border-radius);
1076 + background-color: var(--lightest-grey);
1077 + border-color: var(--grey-border);
1078 + color: var(--dark-grey);
1266 1079 }
1267 1080
1268 1081 .post-type-frm_display.wp-core-ui .button-primary,
1269 1082 .frm-button-primary,
@@ -1268,16 +1081,16 @@
1268 1081 .post-type-frm_display.wp-core-ui .button-primary,
1269 1082 .frm-button-primary,
1270 1083 .wp-core-ui .button-primary.frm-button-primary,
1271 1084 .frm_single_entry_page .button-primary {
1272 - background-color: var(--primary-500) !important;
1085 + background-color: var(--primary-color) !important;
1273 1086 color: #fff !important;
1274 1087 }
1275 1088
1276 1089 .frm-button-primary.frm_large{
1277 - font-size: var(--text-md) !important;
1090 + font-size: 22px !important;
1278 1091 height: auto !important;
1279 - padding: 9px 18px !important;
1092 + padding: 16px 32px !important;
1280 1093 }
1281 1094
1282 1095 .frm-button-primary i:before {
1283 1096 color: #fff;
@@ -1284,10 +1097,10 @@
1284 1097 }
1285 1098
1286 1099 .wp-core-ui .button-primary.frm-button-primary:hover,
1287 1100 .frm-button-primary:hover {
1288 - background: var(--primary-700) !important;
1289 - border-color: var(--primary-700) !important;
1101 + background: var(--primary-hover) !important;
1102 + border-color: var(--primary-hover) !important;
1290 1103 }
1291 1104
1292 1105 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1106 vertical-align: inherit;
@@ -1292,25 +1105,20 @@
1292 1105 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1106 vertical-align: inherit;
1294 1107 }
1295 1108
1296 -.frm-white-body #search-submit,
1297 1109 #frm-form-button .frm_button_submit,
1298 -.frm-white-body .frm-preview-buttons button,
1299 -.frm-white-body .button:not(.frm-button-primary),
1300 1110 .wp-core-ui.frm-white-body .button-secondary,
1301 1111 .wp-core-ui .button-secondary.frm-button-secondary,
1302 1112 .wp-core-ui .button.frm-button-secondary,
1303 -.frm-white-body .frm-button-secondary,
1304 1113 .frm-button-secondary {
1305 - color: var(--grey-800);
1306 - border-color: var(--grey-300);
1307 - background-color: #fff;
1114 + color: var(--primary-color);
1115 + background-color: transparent;
1308 1116 }
1309 1117
1310 1118 #wp-content-media-buttons button,
1311 1119 #wp-content-media-buttons a.button {
1312 - border-color: var(--grey-300);
1120 + border-color: var(--grey-border);
1313 1121 }
1314 1122
1315 1123 .frm_orange_button {
1316 1124 border-color: #da791d !important;
@@ -1317,23 +1125,26 @@
1317 1125 background: var(--orange);
1318 1126 color: #fff;
1319 1127 }
1320 1128
1321 -.frm-white-body .button:not(.frm-button-primary):focus,
1322 -.frm-white-body .button:not(.frm-button-primary):active,
1323 -.frm-white-body .frm-button-secondary:hover,
1324 1129 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1325 1130 .wp-core-ui.frm-white-body .button-secondary:hover,
1326 1131 .wp-core-ui.frm-white-body .button-secondary:focus,
1327 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1328 1132 .frm_wrap .preview > .button:hover {
1329 - border-color: var(--grey-300) !important;
1330 - color: var(--grey-800);
1331 - background: var(--grey-50) !important;
1332 - box-shadow: none !important;
1333 - outline: none !important;
1133 + border-color: var(--primary-hover) !important;
1134 + background: var(--primary-hover) !important;
1135 + color: #fff;
1136 + box-shadow: none;
1334 1137 }
1335 1138
1139 +.frm-with-plus {
1140 + padding-left: 10px !important;
1141 +}
1142 +
1143 +.frm-with-plus .frmsvg {
1144 + margin-right: 5px;
1145 +}
1146 +
1336 1147 .frm-button-primary .frmsvg {
1337 1148 color: #fff;
1338 1149 }
1339 1150
@@ -1340,20 +1151,23 @@
1340 1151 .frm_wrap .preview i {
1341 1152 font-size: inherit;
1342 1153 }
1343 1154
1344 -.frm-white-body .frm-button-primary:focus,
1345 -.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 +
1346 1162 #frm-addons-page .button-primary:focus,
1347 1163 #form_global_settings .button-primary:focus,
1348 -#frm_upgrade_modal .button:focus {
1349 - border-color: var(--primary-700) !important;
1350 - background-color: var(--primary-700) !important;
1351 - box-shadow: none !important;
1352 - 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;
1353 1168 }
1354 1169
1355 -.frm_wrap .preview > .button:focus,
1356 1170 .frm_orange_button:hover,
1357 1171 .frm_orange_button:focus,
1358 1172 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1359 1173 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1401,9 +1215,9 @@
1401 1215 }
1402 1216
1403 1217 .frm-review-notice.notice form,
1404 1218 .frm-review-notice.notice p {
1405 - font-size: var(--text-sm);
1219 + font-size: 14px;
1406 1220 max-width: 600px;
1407 1221 margin-left: auto;
1408 1222 margin-right: auto;
1409 1223 }
@@ -1408,14 +1222,17 @@
1408 1222 margin-right: auto;
1409 1223 }
1410 1224
1411 1225 .frm-review-notice a {
1412 - margin: 0 var(--gap-xs) !important;
1226 + margin: 5px;
1413 1227 }
1414 1228
1415 1229 .frm-review-notice .frm-button-primary,
1416 1230 .frm-review-notice .frm-button-secondary {
1417 1231 min-width: 100px;
1232 + display: inline-block;
1233 + text-align: center;
1234 + padding: 2px 10px;
1418 1235 }
1419 1236
1420 1237 .frm-review-notice p > span {
1421 1238 font-size: 13px;
@@ -1422,9 +1239,9 @@
1422 1239 opacity: 0.75;
1423 1240 }
1424 1241
1425 1242 #frmapi-feedback {
1426 - margin-top: var(--gap-lg);
1243 + margin-top: 30px;
1427 1244 }
1428 1245
1429 1246 .frm-review-notice .frm_error,
1430 1247 .frm-review-notice label {
@@ -1432,112 +1249,12 @@
1432 1249 text-align: left;
1433 1250 }
1434 1251
1435 1252 .frm-review-notice label {
1436 - font-size: var(--text-sm);
1253 + font-size: 14px;
1437 1254 }
1438 1255
1439 -.frm-floating-success-message {
1440 - border-radius: 4px;
1441 - right: 10px !important;
1442 - bottom: 10px !important;
1443 -}
1444 -
1445 1256 /* Generic Classes */
1446 -.frm_no_margin, /* deprecated */
1447 -.frm-m-0 {
1448 - margin: 0 !important;
1449 -}
1450 -
1451 -.frm-m-12 {
1452 - margin: var(--gap-2xl);
1453 -
1454 -}
1455 -
1456 -.frm_no_top_margin, /* deprecated */
1457 -.frm-mt-0 {
1458 - margin-top: 0 !important;
1459 -}
1460 -
1461 -.frm_no_bottom_margin, /* deprecated */
1462 -.frm-mb-0 {
1463 - margin-bottom: 0 !important;
1464 -}
1465 -
1466 -.frm-mb-sm {
1467 - margin-bottom: var(--gap-sm) !important;
1468 -}
1469 -
1470 -.frm-mb-md {
1471 - margin-bottom: var(--gap-md) !important;
1472 -}
1473 -
1474 -.frm-mb-lg {
1475 - margin-bottom: var(--gap-lg) !important;
1476 -}
1477 -
1478 -.frm-mx-sm {
1479 - margin-left: var(--gap-sm) !important;
1480 - margin-right: var(--gap-sm) !important;
1481 -}
1482 -
1483 -.frm-p-1 {
1484 - padding: 4px;
1485 -}
1486 -
1487 -.frm-p-4 {
1488 - padding: var(--gap-sm);
1489 -}
1490 -
1491 -.frm-p-6 {
1492 - padding: var(--gap-md);
1493 -}
1494 -
1495 -.frm-text-md {
1496 - font-size: var(--text-md);
1497 -}
1498 -
1499 -.frm-text-lg {
1500 - font-size: var(--text-lg);
1501 -}
1502 -
1503 -.frm-text-xl {
1504 - font-size: var(--text-xl);
1505 -}
1506 -
1507 -.frm-w-auto {
1508 - width: auto !important;
1509 -}
1510 -
1511 -.frm-w-full {
1512 - width: 100% !important;
1513 -}
1514 -
1515 -.frm-flex-box {
1516 - display: flex;
1517 - gap: var(--gap-sm);
1518 -}
1519 -
1520 -.frm-gap-xs {
1521 - gap: var(--gap-xs);
1522 -}
1523 -
1524 -.frm-gap-sm {
1525 - gap: var(--gap-sm);
1526 -}
1527 -
1528 -.frm-gap-md {
1529 - gap: var(--gap-md);
1530 -}
1531 -
1532 -.frm-justify-between {
1533 - justify-content: space-between;
1534 -}
1535 -
1536 -.frm-transition-ease {
1537 - transition: all .2s ease;
1538 -}
1539 -
1540 1257 .frm_invisible {
1541 1258 visibility: hidden;
1542 1259 transition: all .2s ease;
1543 1260 }
@@ -1545,10 +1262,10 @@
1545 1262 .frm_no_float {
1546 1263 float: none;
1547 1264 }
1548 1265
1549 -.frm_block, /* deprecated */
1550 -.frm-block {
1266 +.frm_block,
1267 +.frm_no_section_fields.frm_block {
1551 1268 display: block;
1552 1269 }
1553 1270
1554 1271 .frm_inline {
@@ -1558,81 +1275,81 @@
1558 1275 .frm_inline_block {
1559 1276 display: inline-block !important;
1560 1277 }
1561 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,
1562 1285 .frm_hidden {
1563 1286 display: none;
1564 1287 }
1565 1288
1566 -.frm-text-right {
1567 - text-align: right;
1289 +.frm_no_margin {
1290 + margin: 0;
1568 1291 }
1569 1292
1570 -.frm-border-b {
1571 - border-bottom: 1px solid var(--grey-300);
1293 +.frm_no_top_margin {
1294 + margin-top: 0 !important;
1572 1295 }
1573 1296
1574 -.frm-no-border {
1575 - border: none !important;
1297 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1298 +.frm_no_bottom_margin {
1299 + margin-bottom: 0 !important;
1576 1300 }
1577 1301
1578 -.frm-opacity-100 {
1579 - opacity: 1;
1302 +.frm_tiny_top_margin {
1303 + margin-top: 1px;
1580 1304 }
1581 1305
1582 -.frm-on-bottom {
1583 - z-index: -1;
1306 +.frm_small_top_margin {
1307 + margin-top: 5px;
1584 1308 }
1585 -/* End Generic Classes, Start Forced Generic Classes */
1586 1309
1587 -.frm-fields p > label.frm_hidden,
1588 -.frm-lookup-modal .dismiss,
1589 -.frm-right-panel .inside a.frm_hidden,
1590 -#form_global_settings .frm_hidden,
1591 -ul.frm_form_nav > li.frm_hidden,
1592 -a.frm_hidden,
1593 -.button.frm_hidden,
1594 -.wp-core-ui .button.frm_hidden {
1595 - display: none;
1310 +.frm_cursor_pointer {
1311 + cursor: pointer;
1596 1312 }
1597 1313
1598 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1599 - margin-bottom: 0 !important;
1314 +.frm_right_text {
1315 + text-align: right;
1600 1316 }
1601 1317
1602 -.frm_no_section_fields.frm_block {
1603 - display: block;
1318 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1319 + opacity: 1;
1604 1320 }
1605 1321
1322 +.frm_med_padding {
1323 + padding: 10px;
1324 +}
1325 +
1606 1326 .actions.frm_visible_overflow {
1607 1327 overflow: visible !important;
1608 1328 }
1609 1329
1610 -.frm_full_opacity, /* deprecated */
1611 -.frm_submit .frm_full_opacity,
1612 -.frm_submit .frm-opacity-100 {
1613 - opacity: 1;
1614 -}
1615 -
1616 1330 .frm-dropdown-menu.frm-on-top {
1617 1331 z-index: 99999;
1618 1332 }
1619 1333
1620 -/* End Forced Generic Classes */
1334 +.frm-on-bottom {
1335 + z-index: -1;
1336 +}
1621 1337
1622 1338 .frm_forms.with_frm_style {
1623 1339 max-width: 100%;
1624 1340 }
1625 1341
1342 +.post-type-frm_display .wrap > #posts-filter,
1626 1343 .post-type-frm_display .wrap > .subsubsub,
1627 1344 .post-type-frm_display .wrap > .icl_subsubsub,
1628 1345 .frm_form_settings > p {
1629 - margin: 6px var(--gap-md);
1346 + margin: 6px 40px;
1630 1347 padding: 0;
1631 1348 }
1632 1349
1633 1350 .frm-entry-container {
1634 - margin: 0 40px 40px;
1351 + margin: 20px 40px 40px;
1635 1352 padding: 0;
1636 1353 }
1637 1354
1638 1355 #form_reports_page .frm-inner-content {
@@ -1646,24 +1363,24 @@
1646 1363 clear: both;
1647 1364 }
1648 1365
1649 1366 .post-type-frm_display h2,
1650 -.frm_wrap h2 {
1651 - margin-top: 0 !important;
1652 - font-size: var(--text-lg);
1653 - 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;
1654 1372 }
1655 1373
1656 1374 .post-type-frm_display .wrap > h2:first-child,
1657 -.frm_wrap .wrap > h2:first-child {
1658 - padding-top: 0;
1375 +.frm_page_container .wrap > h2:first-child {
1659 1376 margin-top: 0 !important;
1660 - font-size: var(--text-lg);
1377 + font-size: 22px;
1661 1378 }
1662 1379
1663 1380 #frm_form_editor_container {
1664 1381 position: relative;
1665 - margin-top: 28px;
1382 + margin: 25px 50px 50px;
1666 1383 }
1667 1384
1668 1385 .form-field p {
1669 1386 /* for conflicts */
@@ -1676,30 +1393,21 @@
1676 1393 float: none;
1677 1394 width: auto;
1678 1395 }
1679 1396
1680 -#frm_view_editor_left label, /* Views */
1681 -#frm_view_editor_left .frm_primary_label, /* Views */
1682 -.frm-dialog .frm-sub-label,
1683 -.frm-dialog label,
1684 -.dropdown .frm_primary_label,
1685 1397 .accordion-container label,
1686 1398 .frm-fields td > label,
1687 1399 .frm-fields td > div > label,
1688 -.frm_form_field > label:first-child,
1689 1400 .frm-fields p > label,
1690 -.frm_on_submit_type > label,
1691 1401 .post-type-frm_display .frm_form_field > label,
1692 1402 #new_fields .frm_primary_label,
1693 -#form_global_settings .frm_primary_label,
1694 1403 #frm_form_editor_container .frm_primary_label {
1695 - color: var(--grey-700);
1404 + color: var(--dark-grey);
1696 1405 margin: 0 0 3px;
1697 1406 padding: 0;
1698 1407 width: auto;
1699 - font-size: var(--text-sm);
1408 + font-size: 14px;
1700 1409 display: block;
1701 - line-height: var(--leading);
1702 1410 }
1703 1411
1704 1412 .frm-fields td input + label {
1705 1413 display: inline;
@@ -1717,9 +1425,9 @@
1717 1425 .with_frm_style form .form-field {
1718 1426 margin-bottom: 20px;
1719 1427 }
1720 1428
1721 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1429 +.with_frm_style form .frm_combo_inputs_container > .form-field {
1722 1430 margin-bottom: 0;
1723 1431 }
1724 1432
1725 1433 .frm_description,
@@ -1826,8 +1534,14 @@
1826 1534 max-width: 700px;
1827 1535 margin: 20px auto !important;
1828 1536 }
1829 1537
1538 +.upgrade_to_pro h1,
1539 +.upgrade_to_pro h3,
1540 +.upgrade_to_pro {
1541 + color: #444;
1542 +}
1543 +
1830 1544 .upgrade_to_pro .error {
1831 1545 display: none;
1832 1546 }
1833 1547
@@ -1837,19 +1551,19 @@
1837 1551 }
1838 1552
1839 1553 .frm_error_style,
1840 1554 .frm_warning_style,
1841 -.frm_note_style,
1842 1555 .frm_message,
1843 1556 #post-body-content .frm_updated_message,
1844 1557 div.frm_updated_message {
1845 - border-radius: var(--small-radius);
1846 - background-color: #D5F2DC;
1847 - color: #1E561F;
1848 - padding: var(--gap-sm) var(--gap-md);
1849 - font-size: var(--text-sm);
1850 - margin: var(--gap-sm) 0;
1851 - 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;
1852 1566 }
1853 1567
1854 1568 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1855 1569 display: inline-block;
@@ -1860,20 +1574,21 @@
1860 1574 #post-body-content > .frm_updated_message {
1861 1575 margin: 5px 65px;
1862 1576 }
1863 1577
1864 -#form_global_settings #post-body-content > .frm_updated_message,
1865 -#form_global_settings #post-body-content > .frm_warning_style {
1578 +#form_global_settings .frm_updated_message {
1866 1579 margin: 5px 25px;
1867 1580 }
1868 1581
1869 1582 .frm_error_style {
1870 1583 color: #973937;
1871 - background-color: #EBCCCC;
1584 + border-color: #F2DEDE;
1585 + background-color: #F2DEDE;
1872 1586 clear: both;
1873 1587 }
1874 1588
1875 1589 .frm_error_style a {
1590 + color: #973937;
1876 1591 text-decoration: underline;
1877 1592 font-weight: 600;
1878 1593 }
1879 1594
@@ -1881,10 +1596,14 @@
1881 1596 opacity: .7;
1882 1597 }
1883 1598
1884 1599 .frm_warning_style {
1885 - color: #7A4D05;
1886 - 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;
1887 1606 }
1888 1607
1889 1608 .frm_warning_heading{
1890 1609 font-weight: bold;
@@ -1890,61 +1609,8 @@
1890 1609 font-weight: bold;
1891 1610 margin-bottom:4px;
1892 1611 }
1893 1612
1894 -/* Warning message dismiss */
1895 -.frm_warning_style {
1896 - position: relative;
1897 - padding-right: calc(var(--gap-md) + 15px);
1898 -}
1899 -
1900 -body.rtl .frm_warning_style {
1901 - padding-right: var(--gap-md);
1902 - padding-left: calc(var(--gap-md) + 15px);
1903 -}
1904 -
1905 -.frm-warning-dismiss {
1906 - position: absolute;
1907 - top: 10px;
1908 - right: 10px;
1909 - display: flex;
1910 - cursor: pointer;
1911 - transition: opacity 0.2s ease-out;
1912 -}
1913 -
1914 -body.rtl .frm-warning-dismiss {
1915 - left: 10px;
1916 - right: auto;
1917 -}
1918 -
1919 -.frm-warning-dismiss:hover {
1920 - opacity: 0.8;
1921 -}
1922 -
1923 -.frm-warning-dismiss.frmsvg,
1924 -.frm-warning-dismiss.frmsvg svg {
1925 - width: 15px;
1926 - height: 15px;
1927 -}
1928 -
1929 -.frm_note_style {
1930 - background: rgba(188, 224, 253, 0.23);
1931 - color: var(--grey-700);
1932 -}
1933 -
1934 -.frm-banner-alert {
1935 - text-align: left;
1936 - margin: 0;
1937 - border-radius: 0;
1938 - padding: 10px 0 10px 40px;
1939 -}
1940 -
1941 -.frm-banner-alert a {
1942 - color: var(--primary-500);
1943 - font-weight: 400;
1944 - text-decoration: none;
1945 -}
1946 -
1947 1613 .frm_updated_message ul,
1948 1614 .frm_updated_message li,
1949 1615 .frm_warning_style ul,
1950 1616 .frm_warning_style li,
@@ -1953,24 +1619,57 @@
1953 1619 margin: 0;
1954 1620 }
1955 1621
1956 1622 .frm-inline-message {
1957 - border: 1px solid var(--primary-700);
1623 + border: 1px solid var(--primary-hover);
1958 1624 border-radius: var(--small-radius);
1959 - color: var(--primary-700);
1625 + color: var(--primary-hover);
1960 1626 background: #fff;
1961 1627 text-align: center;
1962 1628 padding: 20px;
1963 - font-size: var(--text-sm);
1964 - line-height: var(--leading);
1629 + font-size: 14px;
1630 + line-height: 1.4em;
1965 1631 }
1966 1632
1967 1633 .frm-inline-message a {
1968 - text-decoration: underline;
1969 1634 font-weight: 600;
1970 - color: var(--primary-700);
1635 + color: var(--primary-hover);
1971 1636 }
1972 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 +
1973 1672 .frm_pro_heading span {
1974 1673 margin-top: 10px;
1975 1674 }
1976 1675
@@ -1979,14 +1678,15 @@
1979 1678 }
1980 1679
1981 1680 .frm-yes {
1982 1681 color: var(--green);
1983 - font-size: var(--text-xl);
1682 + font-size: 21px;
1683 + font-weight: 500;
1984 1684 }
1985 1685
1986 1686 .frm-nope {
1987 - color: var(--grey-400);
1988 - font-size: var(--text-xl);
1687 + color: #d2e0f2;
1688 + font-size: 21px;
1989 1689 }
1990 1690
1991 1691 .upgrade_to_pro a {
1992 1692 color: var(--orange);
@@ -1992,10 +1692,10 @@
1992 1692 color: var(--orange);
1993 1693 }
1994 1694
1995 1695 .upgrade_to_pro table .frmsvg {
1996 - height: var(--text-xl);
1997 - width: var(--text-xl);
1696 + height: 20px;
1697 + width: 20px;
1998 1698 }
1999 1699
2000 1700 .upgrade_to_pro table.widefat {
2001 1701 background-color: #fff;
@@ -2001,14 +1701,12 @@
2001 1701 background-color: #fff;
2002 1702 border-collapse: collapse;
2003 1703 }
2004 1704
2005 -.frm-white-body .upgrade_to_pro table th,
1705 +.upgrade_to_pro table th,
2006 1706 .upgrade_to_pro table td {
2007 1707 padding: 10px 15px;
2008 - border: 1px solid var(--grey-300);
2009 - line-height: var(--leading);
2010 - font-size: var(--text-sm);
1708 + border: 1px solid #d2e0f2;
2011 1709 }
2012 1710
2013 1711 .upgrade_to_pro table th.frmcenter {
2014 1712 text-align: center;
@@ -2014,9 +1712,9 @@
2014 1712 text-align: center;
2015 1713 }
2016 1714
2017 1715 .widefat th.frm_table_break {
2018 - background-color: var(--sidebar-color);
1716 + background-color: #f6f7fb;
2019 1717 }
2020 1718
2021 1719 h2.frm-h2 + .howto {
2022 1720 color: var(--medium-grey);
@@ -2032,18 +1730,18 @@
2032 1730 margin-top: 0;
2033 1731 }
2034 1732
2035 1733 .frm-addons {
2036 - margin-top: var(--gap-lg);
1734 + margin-top: 30px;
2037 1735 display: grid;
2038 1736 grid-template-columns: 1fr 1fr 1fr;
2039 - grid-gap: var(--gap-md);
1737 + grid-gap: 30px 2%;
2040 1738 }
2041 1739
2042 1740 .frm-addons,
2043 1741 .frm-addons h2,
2044 1742 .frm-addons h3 {
2045 - color: var(--grey-700);
1743 + color: var(--dark-grey);
2046 1744 }
2047 1745
2048 1746 .frm-addons h2 {
2049 1747 font-size: 17px;
@@ -2055,9 +1753,9 @@
2055 1753
2056 1754 .frm-card {
2057 1755 width: 100%;
2058 1756 border-radius: 10px;
2059 - border: 1px solid var(--grey-300);
1757 + border: 1px solid var(--grey-border);
2060 1758 opacity: 1;
2061 1759 transition: opacity 1s;
2062 1760 }
2063 1761
@@ -2071,10 +1769,10 @@
2071 1769 position: relative;
2072 1770 }
2073 1771
2074 1772 .frm-addons .plugin-card-top {
2075 - height: 155px;
2076 - padding-top: var(--gap-lg);
1773 + height: 140px;
1774 + padding-top: 30px;
2077 1775 overflow: hidden;
2078 1776 }
2079 1777
2080 1778 .frm-addons .plugin-card-top h2 {
@@ -2111,16 +1809,15 @@
2111 1809 .frm-addon-active .button {
2112 1810 visibility: hidden;
2113 1811 }
2114 1812
2115 -.frm-save-and-reload-options {
1813 +#frm_save_and_reload_options {
2116 1814 margin-top: 10px;
2117 1815 font-size: 13px;
2118 1816 }
2119 1817
2120 -.frm-save-and-reload,
2121 -.frm-save-and-reload + .frm-button-secondary {
2122 - visibility: visible !important;
1818 +#frm_save_and_reload_settings, #frm_save_and_reload_settings + .frm-button-secondary {
1819 + visibility: visible;
2123 1820 }
2124 1821
2125 1822 .addon-status-label {
2126 1823 opacity: .7;
@@ -2149,13 +1846,9 @@
2149 1846 .frm-new-template.plugin-card-bottom {
2150 1847 overflow: visible;
2151 1848 }
2152 1849
2153 -#frm-new-template p:first-child {
2154 - margin-top: 0;
2155 -}
2156 -
2157 -.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),
2158 1851 #wpbody-content > .updated,
2159 1852 #wpbody-content > #update-nag,
2160 1853 #wpbody-content > .update-nag,
2161 1854 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2177,86 +1870,35 @@
2177 1870 margin: 0;
2178 1871 padding: 10px 20px;
2179 1872 }
2180 1873
2181 -.frm-modal .postbox,
2182 1874 #frm_new_form_modal .postbox {
2183 1875 max-height: 600px;
2184 1876 overflow: hidden;
2185 - margin-bottom: 0;
2186 1877 }
2187 1878
2188 -.frm-modal .postbox .frm_modal_top,
2189 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2190 - padding: var(--gap-md) var(--gap-md) 0;
1879 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child {
1880 + padding: 30px 20px;
2191 1881 position: relative;
1882 + border-bottom: 1px solid var(--grey-border);
2192 1883 }
2193 1884
2194 -.frm-modal .postbox .frm-modal-title,
2195 -.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 {
2196 1886 display: inline-block;
2197 - font-size: var(--text-xl);
2198 - color: var(--grey-900);
1887 + font-size: 24px;
1888 + color: #282F36;
2199 1889 }
2200 1890
2201 -.frm-inline-modal > a.dismiss,
2202 -.frm-modal .postbox > a.dismiss,
2203 -.frm-modal .postbox .frm-modal-title + div:last-child,
2204 -.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 {
2205 1892 position: absolute;
2206 - right: 30px;
2207 - top: 25px;
2208 - z-index: 2;
1893 + right: 20px;
1894 + top: 37px;
2209 1895 }
2210 1896
2211 -body.rtl .frm-inline-modal > a.dismiss,
2212 -body.rtl .frm-modal .postbox > a.dismiss,
2213 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2214 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2215 - right: unset;
2216 - left: 30px;
1897 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child a {
1898 + color: var(--grey);
2217 1899 }
2218 1900
2219 -.frm-info-modal .postbox > a.dismiss,
2220 -.frm-inline-modal > a.dismiss {
2221 - right: 13px;
2222 - top: 13px;
2223 -}
2224 -
2225 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2226 -.frm-modal a.dismiss .frmsvg,
2227 -.frm_common_modal .frm_modal_top a .frmsvg {
2228 - color: var(--grey-900);
2229 -}
2230 -
2231 -.frm-modal .frm_modal_content > div.inside,
2232 -.frm_common_modal .frm_modal_content > div.inside {
2233 - padding: var(--gap-md);
2234 - margin: 0;
2235 - font-size: var(--text-sm);
2236 - color: var(--grey-700);
2237 -}
2238 -
2239 -.frm_common_modal .postbox {
2240 - display: flex;
2241 - flex-direction: column;
2242 -}
2243 -
2244 -.frm-modal .postbox > div.inside .cta-inside {
2245 - overflow-y: auto;
2246 - height: auto;
2247 - padding: 0 var(--gap-sm);
2248 -}
2249 -
2250 -.frm_modal_footer {
2251 - padding: 0 var(--gap-md) var(--gap-sm);
2252 - text-align: right;
2253 -}
2254 -
2255 -body.frm-body-with-open-modal {
2256 - overflow-y: hidden;
2257 -}
2258 -
2259 1901 #frm_new_form_modal .postbox > div.inside {
2260 1902 max-height: 490px;
2261 1903 overflow-y: auto;
2262 1904 overflow-x: hidden;
@@ -2266,9 +1908,9 @@
2266 1908
2267 1909 #frm_new_form_modal .postbox > div.inside .cta-inside {
2268 1910 overflow-y: auto;
2269 1911 height: auto;
2270 - padding: 0 var(--gap-md);
1912 + padding: 0 15px;
2271 1913 }
2272 1914
2273 1915 #frm_new_form_modal .accordion-container {
2274 1916 width: 100%;
@@ -2274,16 +1916,13 @@
2274 1916 width: 100%;
2275 1917 }
2276 1918
2277 1919 .frm-templates-list {
2278 - margin-top: 0;
1920 + margin-top: 0px;
2279 1921 }
2280 1922
2281 -.frm-templates-list.frm_grid_container li {
2282 - margin-bottom: 0;
2283 -}
2284 -
2285 1923 .frm-templates-list li {
1924 + width: 50%;
2286 1925 vertical-align: top;
2287 1926 position: relative;
2288 1927 box-sizing: border-box;
2289 1928 border-radius: 6px;
@@ -2312,17 +1951,14 @@
2312 1951 .frm-templates-list li.frm-selectable:hover p {
2313 1952 max-width: calc( 100% - 65px );
2314 1953 }
2315 1954
2316 -.frm-templates-list .frm-featured-form {
2317 - display: flex;
1955 +.frm-templates-list li > div:not(.frm-hover-icons) {
1956 + display: inline-block;
2318 1957 width: 100%;
1958 + padding: 5px;
2319 1959 }
2320 1960
2321 -.frm-templates-list li .frm-featured-form {
2322 - padding: 7px 5px;
2323 -}
2324 -
2325 1961 .frm-templates-list li li > div {
2326 1962 padding-left: 0;
2327 1963 }
2328 1964
@@ -2329,38 +1965,23 @@
2329 1965 .frm-templates-list li > div > div {
2330 1966 vertical-align: middle;
2331 1967 }
2332 1968
2333 -.frm-templates-list .frm-inner-circle,
2334 -.frm-category-icon, /* Deprecated */
2335 -.frm-icon-wrapper {
2336 - background: var(--primary-500);
2337 - border-radius: var(--small-radius);
2338 - color: #fff;
1969 +.frm-templates-list li .frm-category-icon {
2339 1970 width: 40px;
2340 1971 height: 40px;
2341 - font-size: 18px;
2342 - box-sizing: border-box;
2343 - align-self: center;
2344 - justify-content: center;
2345 - align-items: center;
2346 - display: inline-flex;
2347 -}
2348 -
2349 -.frm-templates-list .frm-inner-circle .frmsvg {
1972 + overflow: hidden;
1973 + display: inline-block;
1974 + border-radius: 4px;
1975 + text-align: center;
2350 1976 vertical-align: top;
2351 1977 }
2352 1978
2353 -.frm-templates-list li .frm-category-icon {
2354 - overflow: hidden;
2355 - align-self: flex-start;
2356 -}
2357 -
2358 -.frm-templates-list .frm-template-details {
1979 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2359 1980 /* the content container to the right of the icon in Create new form modal */
2360 1981 display: inline-block;
2361 1982 width: calc( 100% - 40px );
2362 - padding-left: var(--gap-sm);
1983 + padding-left: 13px;
2363 1984 box-sizing: border-box;
2364 1985 transform: translateY(-2px);
2365 1986 }
2366 1987
@@ -2374,18 +1995,54 @@
2374 1995 }
2375 1996
2376 1997 .frm-templates-list li h3,
2377 1998 .frm-templates-list .frm-install-template h3 {
2378 - font-size: var(--text-sm) !important;
1999 + font-size: 14px !important;
2000 + line-height: 24px;
2001 + height: 24px;
2379 2002 }
2380 2003
2004 +.frm-templates-list li p {
2005 + font-size: 13px;
2006 + color: rgba(40, 47, 54, 0.6);
2007 +}
2008 +
2381 2009 .frm-templates-list .frm-install-template div {
2382 2010 text-align: left;
2383 2011 }
2384 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 +
2385 2042 #frm_new_form_modal .frm-search {
2386 - width: 100%;
2387 - margin: var(--gap-sm) 0 var(--gap-md);
2043 + width: calc( 100% - 20px );
2044 + margin: 15px 10px 30px;
2388 2045 }
2389 2046
2390 2047 #frm_leave_email,
2391 2048 #frm_code_from_email
@@ -2392,10 +2049,14 @@
2392 2049 {
2393 2050 width: 480px;
2394 2051 }
2395 2052
2396 -#frm_new_form_modal #template-search-input {
2397 - 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;
2398 2059 }
2399 2060
2400 2061 #frm-email-block .frm-with-left-icon .frmsvg {
2401 2062 padding: 0;
@@ -2405,12 +2066,12 @@
2405 2066
2406 2067 #frm_new_form_modal .accordion-container {
2407 2068 display: inline-block;
2408 2069 padding: 0;
2409 - border-top: 1px solid var(--grey-300);
2070 + border-top: 1px solid var(--grey-border);
2410 2071 box-sizing: border-box;
2411 - margin: 0 5px;
2412 - width: calc( 100% - 10px );
2072 + margin: 0 10px;
2073 + width: calc( 100% - 20px );
2413 2074 }
2414 2075
2415 2076 #frm_new_form_modal .accordion-section-title {
2416 2077 padding: 0;
@@ -2420,13 +2081,13 @@
2420 2081 .control-section:hover .accordion-section-title,
2421 2082 #frm_new_form_modal .accordion-section.open .accordion-section-title
2422 2083 {
2423 2084 background: #fff !important;
2424 - border-bottom-color: transparent;
2085 + border-bottom: none;
2425 2086 }
2426 2087
2427 2088 #frm_new_form_modal .accordion-section.open:hover {
2428 - border-bottom-color: transparent;
2089 + border-bottom: none;
2429 2090 }
2430 2091
2431 2092 #frm_new_form_modal .accordion-section {
2432 2093 padding: 8px 0 4px;
@@ -2432,9 +2093,9 @@
2432 2093 padding: 8px 0 4px;
2433 2094 }
2434 2095
2435 2096 #frm_new_form_modal .accordion-section + .accordion-section {
2436 - border-top: 1px solid var(--grey-300);
2097 + border-top: 1px solid var(--grey-border);
2437 2098 border-radius: 0;
2438 2099 }
2439 2100
2440 2101 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2443,9 +2104,9 @@
2443 2104 padding-left: 0;
2444 2105 }
2445 2106
2446 2107 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2447 - padding-left: var(--gap-sm);
2108 + padding-left: 10px;
2448 2109 }
2449 2110
2450 2111 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2451 2112 padding: 0 10px;
@@ -2452,127 +2113,131 @@
2452 2113 overflow: hidden;
2453 2114 }
2454 2115
2455 2116 #frm_new_form_modal .accordion-section-content {
2456 - padding: var(--gap-sm);
2117 + padding: 10px 0;
2457 2118 }
2458 2119
2459 2120 .frm-hover-icons {
2460 2121 position: absolute;
2461 2122 right: 0;
2462 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2463 - max-width: 91px;
2123 + top: 0;
2124 + height: 20px;
2125 + width: 65px;
2464 2126 height: 100%;
2465 2127 box-sizing: border-box;
2466 - padding: 0 10px 0 5px !important;
2467 - border-radius: var(--small-radius);
2128 + padding: 14px 10px 0 5px !important;
2129 + border-radius: 6px;
2468 2130 text-align: right;
2469 - display: flex;
2470 - gap: 5px;
2471 2131 }
2472 2132
2473 -.frm-ready-made-solution .frm-hover-icons {
2474 - visibility: hidden;
2133 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2134 + width: 91px;
2475 2135 }
2476 2136
2477 -.frm-ready-made-solution:hover .frm-hover-icons {
2478 - visibility: visible;
2479 -}
2480 -
2481 2137 .frm-hover-icons a {
2482 2138 width: 22px;
2483 2139 height: 22px;
2484 - font-size: var(--text-md);
2485 - display: inline-flex;
2486 - align-items: center;
2487 - justify-content: center;
2140 + display: inline-block;
2488 2141 border-radius: 50%;
2489 2142 box-sizing: border-box;
2490 - line-height: var(--leading);
2143 + line-height: 20px;
2491 2144 text-align: center;
2492 2145 }
2493 2146
2494 2147 .frm-hover-icons > .frm-preview-form,
2495 2148 .frm-hover-icons > .frm-delete-form {
2496 - border: 1px solid var(--primary-500);
2149 + border: 1px solid var(--primary-color);
2150 + margin-right: 5px;
2497 2151 }
2498 2152
2499 -.frm-hover-icons > .frm-create-form,
2500 -.frm-ready-made-solution .frm-hover-icons a {
2501 - background-color: var(--primary-500);
2153 +.frm-hover-icons > .frm-create-form {
2154 + background-color: var(--primary-color);
2502 2155 }
2503 2156
2504 -.frm-hover-icons > a .frmsvg {
2505 - width: 14px;
2506 - height: 14px;
2507 - vertical-align: baseline;
2157 +.frm-hover-icons > .frm-preview-form .frmsvg {
2158 + width: 16px;
2159 + height: 16px;
2160 + color: var(--primary-color);
2508 2161 }
2509 2162
2510 -.frm-hover-icons > .frm-preview-form .frmsvg,
2511 2163 .frm-hover-icons > .frm-delete-form .frmsvg {
2512 - color: var(--primary-500);
2164 + width: 14px;
2165 + height: 14px;
2166 + color: var(--primary-color);
2167 + transform: translateY(-1px);
2513 2168 }
2514 2169
2515 2170 .frm-hover-icons > .frm-unlock-form {
2516 - background-color: var(--primary-500);
2171 + background-color: var(--primary-color);
2517 2172 }
2518 2173
2519 2174 .frm-hover-icons > .frm-unlock-form .frmsvg {
2520 - background-color: var(--primary-500);
2175 + width: 12px;
2176 + height: 12px;
2177 + background-color: var(--primary-color);
2178 + transform: translateY(-2px);
2521 2179 }
2522 2180
2523 -.frm-ready-made-solution .frmsvg {
2181 +.frm-hover-icons > .frm-create-form .frmsvg {
2524 2182 width: 14px;
2525 2183 height: 14px;
2526 2184 }
2527 2185
2528 -.frm-hover-icons .frm-create-form svg,
2529 -.frm-ready-made-solution .frm-hover-icons svg {
2186 +.frm-hover-icons .frm-create-form svg {
2530 2187 color: #fff;
2531 2188 }
2532 2189
2533 2190 .frm-hover-icons .frm-create-form:hover,
2534 -.frm-ready-made-solution .frm-hover-icons a:hover,
2535 2191 .frm-hover-icons > .frm-unlock-form:hover,
2536 2192 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2537 2193 {
2538 - background-color: var(--primary-700) !important;
2194 + background-color: var(--primary-hover) !important;
2539 2195 }
2540 2196
2541 2197 .frm-hover-icons .frm-preview-form:hover,
2542 2198 .frm-hover-icons .frm-delete-form:hover
2543 2199 {
2544 - border: 1px solid var(--primary-700) !important;
2200 + border: 1px solid var(--primary-hover) !important;
2545 2201 }
2546 2202
2547 2203 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2548 2204 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2549 - color: var(--primary-700) !important;
2205 + color: var(--primary-hover) !important;
2550 2206 }
2551 2207
2552 -.frm-application-card h4 .frmsvg,
2553 2208 .frm-locked-template h3 .frmsvg {
2554 - height: var(--text-sm);
2555 - width: var(--text-sm);
2556 - vertical-align: text-top;
2557 - color: var(--grey-500);
2209 + height: 12px;
2210 + width: 14px;
2211 + vertical-align: top;
2212 + padding-top: 6px;
2558 2213 }
2559 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 +
2560 2222 #frm_new_form_modal .frm-use-this-template {
2561 2223 margin-left: 10px;
2562 2224 }
2563 2225
2564 2226 #frm_new_form_modal #frm-preview-block {
2565 - padding: var(--gap-md) var(--gap-lg);
2227 + padding: 20px 40px;
2566 2228 overflow-x: hidden;
2567 2229 }
2568 2230
2569 2231 #frm_new_form_modal #frm-details-block {
2570 - padding: var(--gap-md) var(--gap-lg);
2232 + padding: 20px 40px;
2571 2233 }
2572 2234
2573 2235 .frm-modal-back {
2574 2236 cursor: pointer;
2237 + font-size: 17px;
2238 + vertical-align: top;
2239 + margin-top: 4px;
2575 2240 margin-right: 4px;
2576 2241 }
2577 2242
2578 2243 .frm-modal-cancel {
@@ -2579,28 +2244,19 @@
2579 2244 float: left;
2580 2245 }
2581 2246
2582 2247 .frm-plan-required-tag {
2583 - margin-left: 5px;
2584 - transform: translateY(-1px);
2585 2248 background: #FDE6DE;
2586 2249 color: #F15A24;
2587 -}
2588 -
2589 -.frm-ready-made-solution .frm-meta-tag {
2590 - width: fit-content;
2591 - background: #FDE6DE;
2592 - color: #F15A24;
2593 -}
2594 -
2595 -.frm-meta-tag {
2596 2250 font-size: 10px;
2597 - padding: 4px 6px;
2251 + padding: 4px 8px;
2598 2252 border-radius: 4px;
2599 2253 text-transform: uppercase;
2600 2254 font-weight: normal;
2601 2255 display: inline-block;
2602 2256 line-height: 12px;
2257 + transform: translateY(-1px);
2258 + margin-left: 5px;
2603 2259 }
2604 2260
2605 2261 #frm_new_form_modal.frm-expired #frm-create-block,
2606 2262 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2610,14 +2266,18 @@
2610 2266 #frm-create-footer {
2611 2267 padding: 15px 20px;
2612 2268 }
2613 2269
2270 +#frm-create-footer .frm_error_style {
2271 + border-radius: 6px;
2272 +}
2273 +
2614 2274 #frm_code_from_email_options {
2615 2275 margin-top: 20px;
2616 2276 }
2617 2277
2618 2278 #frm_code_from_email_options * {
2619 - color: var(--primary-500);
2279 + color: var(--primary-color);
2620 2280 }
2621 2281
2622 2282 #frm-email-block p,
2623 2283 #frm-code-block p,
@@ -2653,23 +2313,20 @@
2653 2313 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2654 2314 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2655 2315 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2656 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,
2657 2319 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2658 2320 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2659 2321 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2660 2322 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2661 -#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
2662 2325 {
2663 2326 display: inline-block;
2664 2327 }
2665 2328
2666 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2667 -li[data-preview] .frm-hover-icons .frm-preview-form,
2668 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2669 - display: inline-flex;
2670 -}
2671 -
2672 2329 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2673 2330 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2674 2331 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2675 2332 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2704,9 +2361,9 @@
2704 2361 }
2705 2362
2706 2363 #frm-upgrade-body-list-wrapper ul li:before {
2707 2364 content: "\2022";
2708 - color: var(--primary-500);
2365 + color: var(--primary-color);
2709 2366 display: inline-block;
2710 2367 width: 1em;
2711 2368 margin-left: -1em;
2712 2369 }
@@ -2712,112 +2369,126 @@
2712 2369 }
2713 2370
2714 2371 /* Embed Form Modal */
2715 2372
2716 -.frm-embed-modal-content {
2717 - 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;
2718 2378 }
2719 2379
2720 -.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 {
2721 2385 display: flex;
2722 2386 justify-content: center;
2723 2387 }
2724 2388
2725 -#frm_embed_modal .frm_embed_example {
2726 - background: var(--sidebar-color);
2727 - border: 1px solid var(--sidebar-hover);
2728 - border-radius: var(--small-radius);
2729 - color: var(--grey-900);
2730 - font-size: var(--text-sm);
2731 - 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;
2732 2396 width: 100%;
2397 + margin-bottom: 15px;
2733 2398 height: auto !important;
2734 2399 resize: none;
2735 2400 }
2736 2401
2737 -#frm_embed_modal textarea.frm_embed_example {
2402 +#frm_form_embed_modal textarea.frm_embed_example {
2738 2403 padding-bottom: 0;
2739 2404 }
2740 2405
2741 -.frm-embed-modal-content > div a {
2406 +.frm_embed_form_content > div a {
2742 2407 position: absolute;
2743 2408 right: 0;
2744 - top: 0;
2409 + top: 8px;
2745 2410 }
2746 2411
2747 -.frm-embed-modal-content > div {
2412 +.frm_embed_form_content > div {
2748 2413 position: relative;
2749 - margin-bottom: var(--gap-sm);
2750 2414 }
2751 2415
2752 -.frm-embed-modal-content > div:last-child {
2753 - margin-bottom: 0;
2754 -}
2755 -
2756 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2416 +.frm_embed_form_content svg[id^="frm_copy_embed_"] {
2757 2417 position: absolute;
2758 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2418 + top: 35px;
2759 2419 right: 10px;
2760 2420 cursor: pointer;
2761 2421 opacity: 0.5;
2762 2422 }
2763 2423
2764 -.frm-border-info-box,
2765 2424 .frm-embed-modal-option {
2766 - border-radius: var(--small-radius);
2767 - border: 1px solid var(--grey-300);
2768 - padding: var(--gap-sm);
2425 + border-radius: 6px;
2426 + border: 1px solid #E3E8EB;
2427 + padding: 20px;
2769 2428 cursor: pointer;
2770 - display: flex;
2771 - gap: var(--gap-sm);
2772 - font-size: var(--text-sm);
2773 2429 }
2774 2430
2775 2431 .frm-embed-modal-option + .frm-embed-modal-option {
2776 - margin-top: var(--gap-sm);
2432 + margin-top: 10px;
2777 2433 }
2778 2434
2779 -.frm-collapsed .frmsvg,
2780 -.caret.rotate-270,
2781 -.frm-embed-modal-option .caret {
2782 - align-self: center;
2783 - margin-left: auto;
2784 - transform: rotate(-90deg);
2435 +#frm_form_embed_modal .frm-modal-cancel {
2436 + display: none;
2785 2437 }
2786 2438
2787 -#frm_embed_modal .frm_modal_footer {
2788 - display: none;
2439 +#frm_form_embed_modal.frm-on-page-2 .frm-modal-cancel {
2440 + display: inline;
2789 2441 }
2790 2442
2791 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2792 - 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;
2793 2450 }
2794 2451
2795 -.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 {
2796 2469 max-height: 300px;
2797 2470 overflow-y: scroll;
2798 2471 }
2799 2472
2800 -.frm-embed-modal-wrapper.frm-dialog {
2473 +.frm-embed-form-modal-wrapper.frm-dialog {
2801 2474 overflow: visible;
2802 2475 }
2803 2476
2804 2477 /* Bulk Options */
2805 2478 #frm-bulk-modal .frm_grid_container {
2479 + border-top: 1px solid var(--grey-border);
2806 2480 grid-template-columns: repeat(12, 8.33%);
2807 2481 grid-gap: 0;
2808 2482 }
2809 2483
2810 2484 #frm-bulk-modal .frm8 {
2811 - border-right: 1px solid var(--grey-300);
2812 - padding: 10px 20px 10px var(--gap-lg);
2485 + border-right: 1px solid var(--grey-border);
2486 + padding: 0 20px 20px;
2813 2487 }
2814 2488
2815 -#frm-bulk-modal .frm4 {
2816 - padding: 10px 0;
2817 -}
2818 -
2819 -.frm-inline-modal .howto {
2489 +.frm-inline-modal .howto,
2490 +#frm-bulk-modal .howto {
2820 2491 margin: 5px 0 10px;
2821 2492 color: var(--grey);
2822 2493 }
2823 2494
@@ -2834,18 +2505,18 @@
2834 2505 }
2835 2506
2836 2507 .frm-bulk-edit-link {
2837 2508 text-align: right;
2838 - font-size: var(--text-sm);
2509 + font-size: 14px;
2839 2510 padding: 0 5px 10px;
2840 2511 }
2841 2512
2842 2513 .frm-small-add {
2843 - font-size: var(--text-sm) !important;
2514 + font-size: 14px !important;
2844 2515 }
2845 2516
2846 2517 .frm-small-add span {
2847 - color: var(--primary-500);
2518 + color: var(--primary-color);
2848 2519 font-size: 12px;
2849 2520 height: 12px;
2850 2521 width: 12px;
2851 2522 }
@@ -2860,33 +2531,34 @@
2860 2531 }
2861 2532
2862 2533 .frm-right-panel .inside a.frm_pro_tip,
2863 2534 a.frm_pro_tip {
2864 - font-size: var(--text-sm);
2535 + font-size: 14px;
2536 + border: 1px solid var(--orange);
2865 2537 display: inline-block;
2866 - color: var(--grey-700);
2867 - background: #FFE7DE;
2868 - 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;
2869 2542 padding: 5px 15px;
2870 2543 margin: 0 auto;
2871 - display: flex;
2872 - align-items: center;
2544 + line-height: 1.4;
2873 2545 }
2874 2546
2875 2547 a.frm_pro_tip:hover {
2876 - color: var(--grey-700);
2877 - border-color: var(--primary-500);
2548 + color: var(--dark-grey);
2549 + border-color: var(--primary-color);
2878 2550 }
2879 2551
2880 2552 a.frm_pro_tip:hover .frmsvg {
2881 - fill: var(--primary-500);
2553 + fill: var(--primary-color);
2882 2554 }
2883 2555
2884 2556 .frm_field_list .frm_pro_tip {
2885 2557 margin: 10px 15px;
2558 + padding-left: 40px;
2886 2559 position: relative;
2887 - width: calc(100% - 30px);
2888 - box-sizing: border-box;
2560 + background: #fff;
2889 2561 }
2890 2562
2891 2563 a.frm_pro_tip .frmsvg,
2892 2564 a.frm_pro_tip i {
@@ -2893,15 +2565,17 @@
2893 2565 color: var(--orange);
2894 2566 margin-right: 5px;
2895 2567 }
2896 2568
2897 -a.frm_pro_tip .frmsvg {
2898 - margin-right: 10px;
2569 +.frm_field_list a.frm_pro_tip .frmsvg {
2570 + position: absolute;
2571 + left: 15px;
2572 + top: calc(50% - 11px);
2899 2573 }
2900 2574
2901 -.frm-tip-info {
2902 - flex: 1;
2903 - text-align: left;
2575 +.pro-tip {
2576 + font-weight: 500;
2577 + color: var(--darkest-grey);
2904 2578 }
2905 2579
2906 2580 .frm-tip-cta {
2907 2581 color: var(--orange);
@@ -2911,9 +2585,9 @@
2911 2585 float: right;
2912 2586 }
2913 2587
2914 2588 .frm_pro_tip:hover .frm-tip-cta {
2915 - color: var(--primary-500);
2589 + color: var(--primary-color);
2916 2590 }
2917 2591
2918 2592 /*Switch form dropdown*/
2919 2593 h1 .fa-caret-down {
@@ -2928,23 +2602,16 @@
2928 2602 vertical-align: middle;
2929 2603 }
2930 2604
2931 2605 .caret,
2932 -.wp-admin .frm_wrap select,
2933 -.frm_wrap .frm_form_builder select,
2934 2606 .frm_wrap .ui-autocomplete-input {
2935 - 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%;
2936 - background-size: var(--text-md) var(--text-md);
2937 - 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;
2938 2609 }
2939 2610
2940 -.caret {
2941 - padding-right: var(--gap-xs) !important;
2942 -}
2943 -
2944 2611 .frm-btn-group .caret {
2945 2612 float: right;
2946 - margin-top: calc( var(--text-md) / 2 );
2613 + margin-top: 6px;
2947 2614 }
2948 2615
2949 2616 .dropdown {
2950 2617 position: relative;
@@ -2953,10 +2620,8 @@
2953 2620 .dropdown-toggle:focus {
2954 2621 outline: 0;
2955 2622 }
2956 2623
2957 -.frm_wrap .ui-autocomplete,
2958 -#frm_adv_info.frm-dropdown-menu,
2959 2624 .frm-dropdown-menu {
2960 2625 /* Copied from .dropdown-menu rules from Bootstrap */
2961 2626 position: absolute;
2962 2627 top: 100%;
@@ -2963,25 +2628,22 @@
2963 2628 left: 0;
2964 2629 z-index: 1000;
2965 2630 display: none;
2966 2631 float: left;
2967 - padding-left: 4px;
2968 - padding-right: 4px;
2969 - margin: var(--gap-xs) 0 0;
2632 + padding: 0.5rem 0;
2633 + margin: 0;
2970 2634 text-align: left;
2971 2635 list-style: none;
2972 - background: none;
2973 2636 background-color: #fff;
2974 2637 background-clip: padding-box;
2975 - border: 1px solid var(--grey-100);
2638 + border: 1px solid rgba(0, 0, 0, 0.15);
2976 2639 border-radius: 0.25rem;
2977 - box-shadow: var(--box-shadow-lg);
2978 2640
2979 2641 /* Custom rules */
2980 2642 max-height: 200px;
2981 2643 overflow-y: auto;
2982 2644 overflow-x: hidden;
2983 - font-size: var(--text-md);
2645 + font-size: 0.9rem;
2984 2646 width: auto;
2985 2647 min-width: 160px;
2986 2648 }
2987 2649
@@ -2989,8 +2651,12 @@
2989 2651 min-width: 100px;
2990 2652 max-width: 99%;
2991 2653 }
2992 2654
2655 +#frm_bs_dropdown > a {
2656 + font-size: 1em;
2657 +}
2658 +
2993 2659 #frm_bs_dropdown .frm-dropdown-menu {
2994 2660 max-width: 400px;
2995 2661 }
2996 2662
@@ -2999,15 +2665,11 @@
2999 2665 }
3000 2666
3001 2667 #frm_field_group_controls .frm-dropdown-menu,
3002 2668 .frm-field-action-icons .frm-dropdown-menu {
3003 - min-width: 180px !important;
2669 + min-width: 160px !important;
3004 2670 }
3005 2671
3006 -.frm-field-action-icons .frm-dropdown-toggle svg {
3007 - color: #9EA9B8;
3008 -}
3009 -
3010 2672 .multiselect-container.frm-dropdown-menu,
3011 2673 #search-submit .frm-dropdown-menu {
3012 2674 min-width: 200px !important;
3013 2675 }
@@ -3015,9 +2677,9 @@
3015 2677 .preview .frm-dropdown-menu {
3016 2678 min-width: 230px !important;
3017 2679 }
3018 2680
3019 -.frm-dropdown-menu.dropdown-menu-right {
2681 +.frm-dropdown-menu.pull-right {
3020 2682 right: 0;
3021 2683 left: auto;
3022 2684 }
3023 2685
@@ -3031,11 +2693,8 @@
3031 2693 .frm-dropdown-menu > .dropdown-item {
3032 2694 margin: 0;
3033 2695 }
3034 2696
3035 -.frm-select-list-item,
3036 -.frm_wrap .ui-autocomplete li > div,
3037 -.multiselect-container button.multiselect-option,
3038 2697 .frm-dropdown-menu > .dropdown-item > a,
3039 2698 .frm-dropdown-menu .frm_dropdown_li {
3040 2699 clear: both;
3041 2700 font-weight: normal;
@@ -3040,24 +2699,19 @@
3040 2699 clear: both;
3041 2700 font-weight: normal;
3042 2701 white-space: nowrap;
3043 2702 text-decoration: none;
3044 - border-radius: var(--small-radius);
3045 2703 }
3046 2704
3047 -.frm-dropdown-menu > .active > a,
3048 -.frm-dropdown-menu > .active > a:hover,
3049 -.frm-dropdown-menu > .active > a:focus {
2705 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3050 2706 text-decoration: none;
3051 2707 outline: 0;
3052 2708 }
3053 2709
3054 -.frm-select-list-item.disabled,
3055 2710 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3056 2711 color: #999999;
3057 2712 }
3058 2713
3059 -.frm-select-list-item.disabled:hover,
3060 2714 .frm-dropdown-menu > .disabled > a:hover,
3061 2715 .frm-dropdown-menu > .disabled > a:focus {
3062 2716 text-decoration: none;
3063 2717 background-color: transparent;
@@ -3074,11 +2728,12 @@
3074 2728 }
3075 2729
3076 2730 .dropdown-header {
3077 2731 display: block;
3078 - padding: 3px 10px;
3079 - font-size: var(--text-xs);
3080 - color: var(--grey-400);
2732 + padding: 3px 20px;
2733 + font-size: 12px;
2734 + line-height: 1.428571429;
2735 + color: #999999;
3081 2736 }
3082 2737
3083 2738 .dropdown-backdrop {
3084 2739 position: fixed;
@@ -3088,9 +2743,8 @@
3088 2743 top: 0;
3089 2744 z-index: 990;
3090 2745 }
3091 2746
3092 -.dropdown-menu-right > .frm-dropdown-menu,
3093 2747 .pull-right > .frm-dropdown-menu {
3094 2748 right: 0;
3095 2749 left: auto;
3096 2750 }
@@ -3110,13 +2764,13 @@
3110 2764 .btn {
3111 2765 border: 1px solid #ddd;
3112 2766 background: #fff;
3113 2767 height: 28px;
3114 - line-height: var(--leading);
2768 + line-height: 1.5;
3115 2769 }
3116 2770
3117 2771 a.frm_option_icon:before {
3118 - color: var(--primary-500);
2772 + color: var(--primary-color);
3119 2773 font-size: 22px;
3120 2774 width: 22px;
3121 2775 height: 22px;
3122 2776 }
@@ -3122,9 +2776,9 @@
3122 2776 }
3123 2777
3124 2778 a.frm_option_icon:focus::before,
3125 2779 a.frm_option_icon:hover::before {
3126 - color: var(--primary-700);
2780 + color: var(--primary-hover);
3127 2781 }
3128 2782
3129 2783 .frm_top_left .frm-dropdown-toggle {
3130 2784 color: #999;
@@ -3138,17 +2792,17 @@
3138 2792 text-decoration: none;
3139 2793 }
3140 2794
3141 2795 .frm-card .frm-dropdown-toggle {
3142 - border: 1px solid var(--grey-300);
2796 + border: 1px solid var(--grey-border);
3143 2797 border-radius: var(--small-radius);
3144 2798 font-size: 13px;
3145 - color: var(--grey-700);
2799 + color: var(--dark-grey);
3146 2800 padding: 7px 20px;
3147 2801 }
3148 2802
3149 2803 .frm_actions_dropdown .frm-dropdown-menu {
3150 - font-size: var(--text-sm);
2804 + font-size: 14px;
3151 2805 color: #5F6C72;
3152 2806 }
3153 2807
3154 2808 .frm-dropdown-menu .frm_icon_font {
@@ -3160,21 +2814,20 @@
3160 2814 /* BS Multiselect */
3161 2815 .multiselect-container.frm-dropdown-menu {
3162 2816 top: auto;
3163 2817 left: auto;
3164 - font-size: var(--text-sm);
3165 - padding: 4px;
2818 + font-size: 14px;
2819 + padding-top: 3px;
3166 2820 margin-bottom: 3px;
3167 2821 }
3168 2822
3169 2823 .frm-right-panel .accordion-section-content {
3170 2824 background: transparent;
3171 - padding: 0;
3172 - overflow: initial;
2825 + padding-top: 0
3173 2826 }
3174 2827
3175 -.frm-right-panel .accordion-section-content > .inside {
3176 - padding: 0 0 var(--gap-xs);
2828 +.frm-right-panel .accordion-section-content > .inside {
2829 + padding: 0;
3177 2830 }
3178 2831
3179 2832 .frm-right-panel .accordion-section-content .inside a {
3180 2833 font-size: inherit;
@@ -3181,10 +2834,10 @@
3181 2834 }
3182 2835
3183 2836 #post-body-content + .frm-right-panel h3.accordion-section-title {
3184 2837 padding: 7px 10px 8px 14px;
3185 - font-size: var(--text-md);
3186 - color: var(--grey-700);
2838 + font-size: 16px;
2839 + color: var(--dark-grey);
3187 2840 }
3188 2841
3189 2842 .frm-right-panel .control-section.open h3 {
3190 2843 border-bottom: none;
@@ -3193,22 +2846,22 @@
3193 2846 .js .frm-right-panel .control-section.open .accordion-section-title,
3194 2847 .js .frm-right-panel .control-section .accordion-section-title:focus,
3195 2848 .js .frm-right-panel .control-section .accordion-section-title:hover {
3196 2849 background: transparent;
3197 - color: var(--grey-900);
2850 + color: var(--dark-grey);
3198 2851 }
3199 2852
3200 2853 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3201 - color: var(--grey-700);
2854 + color: var(--dark-grey);
3202 2855 }
3203 2856
3204 2857 .frm-with-line,
3205 2858 .accordion-section-content h4 {
3206 - font-size: var(--text-md);
2859 + font-size: 16px;
3207 2860 font-weight: 400;
3208 2861 margin: 20px -20px 10px;
3209 2862 padding: 0 20px;
3210 - color: var(--grey-700);
2863 + color: var(--dark-grey);
3211 2864 position: relative;
3212 2865 border: none !important;
3213 2866 }
3214 2867
@@ -3238,9 +2891,9 @@
3238 2891 .accordion-section-content h4:before {
3239 2892 content: '';
3240 2893 display: block;
3241 2894 position: absolute;
3242 - border-bottom: 1px solid var(--grey-300);
2895 + border-bottom: 1px solid var(--grey-border);
3243 2896 left: 0;
3244 2897 width: 100%;
3245 2898 top: 50%;
3246 2899 }
@@ -3258,9 +2911,8 @@
3258 2911 font-family: "s11-fp" !important;
3259 2912 font-size: 18px;
3260 2913 font-variant: normal;
3261 2914 text-rendering: auto;
3262 - vertical-align: text-top;
3263 2915 }
3264 2916
3265 2917 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3266 2918 transform: rotate(90deg);
@@ -3266,9 +2918,9 @@
3266 2918 transform: rotate(90deg);
3267 2919 }
3268 2920
3269 2921 .frm-right-panel .accordion-section-title:after {
3270 - top: calc(50% - 10px) !important;
2922 + right: 20px;
3271 2923 }
3272 2924
3273 2925 .frm-right-panel .open .accordion-section-title:after {
3274 2926 content: "\e62a" !important;
@@ -3277,9 +2929,9 @@
3277 2929 .frm-right-panel .accordion-section-title:before {
3278 2930 content: "\f1de" !important;
3279 2931 color: var(--grey);
3280 2932 font-size: 17px !important;
3281 - margin: 0 10px 0 0;
2933 + margin: 0 10px;
3282 2934 }
3283 2935
3284 2936 .form-title-style .accordion-section-title:before,
3285 2937 .section-fields-style .accordion-section-title:before {
@@ -3337,21 +2989,16 @@
3337 2989 .progress-bars-style .accordion-section-title:before{
3338 2990 content: "\e939" !important;
3339 2991 }
3340 2992
3341 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3342 2993 .frm-right-panel h3.accordion-section-title {
3343 2994 padding: 15px 20px;
3344 2995 background: var(--sidebar-color);
3345 - line-height: var(--leading);
3346 - color: var(--grey-700);
3347 - font-size: var(--text-lg);
3348 - font-weight: 400;
2996 + line-height: 1;
3349 2997 }
3350 2998
3351 -.control-section .accordion-section-title:after, /** Form template list */
3352 -.customize-pane-child .accordion-section-title:after {
3353 - top: 15px;
2999 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
3000 + top: 19px;
3354 3001 }
3355 3002
3356 3003 .accordion-container .frm-dropdown-menu {
3357 3004 min-width: 40px;
@@ -3376,12 +3023,14 @@
3376 3023 max-width: 250px;
3377 3024 }
3378 3025
3379 3026 .multiselect-container button.multiselect-option {
3027 + display: block;
3380 3028 width: 100%;
3381 3029 text-align: left;
3030 + background: none;
3382 3031 border: none;
3383 - margin-bottom: 4px;
3032 + padding: 5px 0 5px 15px;
3384 3033 }
3385 3034
3386 3035 .multiselect-container button.multiselect-option label {
3387 3036 margin-left: 5px;
@@ -3399,15 +3048,8 @@
3399 3048 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3400 3049 display: block;
3401 3050 }
3402 3051
3403 -.multiselect-option label {
3404 - max-width: calc(100% - 22px);
3405 - text-overflow: ellipsis;
3406 - overflow: hidden;
3407 - white-space: nowrap;
3408 -}
3409 -
3410 3052 .frm_scale {
3411 3053 text-align: center;
3412 3054 float: left;
3413 3055 margin-right: 10px;
@@ -3429,13 +3071,8 @@
3429 3071 width: 100%;
3430 3072 height: auto;
3431 3073 }
3432 3074
3433 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3434 - vertical-align: sub;
3435 - vertical-align: -webkit-baseline-middle;
3436 -}
3437 -
3438 3075 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3439 3076 background-color: var(--blue-border);
3440 3077 }
3441 3078
@@ -3462,9 +3099,9 @@
3462 3099 .frm-fake-field {
3463 3100 display: block;
3464 3101 height: 25px;
3465 3102 background-color: var(--light-blue);
3466 - border: 1px solid var(--grey-300);
3103 + border: 1px solid var(--grey-border);
3467 3104 margin: 10px 0;
3468 3105 border-radius: var(--small-radius);
3469 3106 }
3470 3107
@@ -3470,15 +3107,15 @@
3470 3107
3471 3108 .frm-embed-message {
3472 3109 position: absolute;
3473 3110 background: #fff;
3474 - border: 1px solid var(--grey-300);
3475 - color: var(--grey-700);
3476 - padding: var(--gap-md);
3477 - 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;
3478 3115 max-width: 200px;
3479 3116 min-width: 50%;
3480 - margin: 0 var(--gap-md);
3117 + margin: 0 25px;
3481 3118 overflow: hidden;
3482 3119 text-overflow: ellipsis;
3483 3120 }
3484 3121
@@ -3485,9 +3122,9 @@
3485 3122 .frm-summary-message {
3486 3123 top: 50%;
3487 3124 left: 50%;
3488 3125 padding: 15px 0;
3489 - font-size: var(--text-md);
3126 + font-size: 16px;
3490 3127 transform: translate(-50%, -50%);
3491 3128 }
3492 3129
3493 3130 .frm-summary-learn-more {
@@ -3496,9 +3133,8 @@
3496 3133
3497 3134 .frm-single-settings .frm-embed-message {
3498 3135 width: 100%;
3499 3136 position: static;
3500 - border-radius: var(--small-radius);
3501 3137 }
3502 3138
3503 3139 #new_fields input[type=text],
3504 3140 #new_fields input[type=number],
@@ -3535,8 +3171,19 @@
3535 3171 width: 16px;
3536 3172 padding: 0;
3537 3173 }
3538 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 +
3539 3186 .frm_wrap .frm-number-range + .frm_last input,
3540 3187 .frm_wrap .frm-number-range input {
3541 3188 text-align: center;
3542 3189 font-weight: 600;
@@ -3543,9 +3190,9 @@
3543 3190 }
3544 3191
3545 3192 .frm_wrap .frm-number-range input[type=number],
3546 3193 .frm_wrap .frm-number-range input[type=text] {
3547 - color: var(--primary-700);
3194 + color: var(--primary-hover);
3548 3195 }
3549 3196
3550 3197 .frm-range-min {
3551 3198 position: relative;
@@ -3555,25 +3202,24 @@
3555 3202 content: '';
3556 3203 height: 3px;
3557 3204 width: 10px;
3558 3205 border-radius: 30%;
3559 - background: var(--primary-700);
3206 + background: var(--primary-hover);
3560 3207 position: absolute;
3561 3208 top: 17px;
3562 3209 right: -28%;
3563 3210 }
3564 3211
3565 -.frm_grid_container > p,
3566 3212 .frm_grid_container > p.frm_form_field,
3567 3213 .frm_grid_container > div.frm_form_field,
3568 3214 #new_fields .frm_grid_container > p {
3569 - margin-top: 8px;
3570 - margin-bottom: 8px;
3215 + margin-top: 7px;
3216 + margin-bottom: 7px;
3571 3217 margin-right: 0;
3572 3218 }
3573 3219
3574 3220 #new_fields div.frm_grid_container > .frm_primary_label {
3575 - margin-top: 8px;
3221 + margin-top: 7px;
3576 3222 }
3577 3223
3578 3224 #new_fields .frm_primary_label + p,
3579 3225 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3607,9 +3253,9 @@
3607 3253 }
3608 3254
3609 3255 .frm_form_builder .frm_radio label,
3610 3256 .frm_form_builder .frm_checkbox label {
3611 - font-size: var(--text-sm);
3257 + font-size: 14px;
3612 3258 }
3613 3259
3614 3260 /* Start copied front-end CSS */
3615 3261 .horizontal_radio .frm_radio,
@@ -3647,64 +3293,22 @@
3647 3293
3648 3294 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3649 3295 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3650 3296 .frm_wrap input[type=checkbox],
3651 -.frm-white-body input[type=checkbox],
3652 3297 .field-group input[type=checkbox],
3653 3298 .frm_scale input[type=radio],
3654 3299 .frm_radio input[type=radio],
3655 3300 .frm_checkbox input[type=checkbox] {
3656 - border: 1px solid var(--grey-300);
3301 + border: 1px solid var(--grey-border);
3657 3302 box-shadow: none;
3658 3303 -webkit-appearance: none;
3659 3304 }
3660 3305
3661 -
3662 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3663 -.frm_wrap input[type=checkbox],
3664 -.frm-white-body input[type=checkbox],
3665 -.field-group input[type=checkbox],
3666 -.frm_checkbox input[type=checkbox] {
3667 - border-radius: 4px;
3668 -}
3669 -
3670 -.frm-white-body input[type="checkbox"]:checked,
3671 -.frm_wrap input[type="checkbox"]:checked {
3672 - background-color: var(--primary-500);
3673 - border-color: var(--primary-500) !important;
3674 -}
3675 -
3676 -.frm-white-body input[type="checkbox"]:checked:focus,
3677 -.frm_wrap input[type="checkbox"]:checked:focus {
3678 - border-color: var(--primary-500);
3679 -}
3680 -
3681 -.frm-white-body input[type="checkbox"]:checked::before,
3682 -.frm_wrap input[type="checkbox"]:checked::before {
3683 - 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");
3684 - height: 12px;
3685 - width: 12px;
3686 - margin: 1px;
3687 -}
3688 -
3689 3306 .frm_radio input[type="radio"],
3690 3307 .frm_checkbox input[type="checkbox"] {
3691 3308 margin-right: 5px;
3692 3309 }
3693 3310
3694 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3695 - margin: 5px 0;
3696 - width: 18px;
3697 - position: relative; /* override Bootstrap */
3698 -}
3699 -
3700 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3701 - position: relative !important;
3702 - left: calc(50% - 6px);
3703 - top: calc(50% - 6px);
3704 - margin: 0 !important;
3705 -}
3706 -
3707 3311 .frm_inner_field_container {
3708 3312 margin-bottom: 10px;
3709 3313 }
3710 3314
@@ -3730,22 +3334,8 @@
3730 3334 li.ui-state-default.selected > .frm_inner_field_container > label {
3731 3335 max-width: calc(100% - 100px);
3732 3336 }
3733 3337
3734 -.frm-drag-fade {
3735 - background-color: var(--lightest-grey) !important;
3736 - border-radius: 4px;
3737 -}
3738 -
3739 -.frm-drag-fade * {
3740 - opacity: 0;
3741 -}
3742 -
3743 -.frm-dragging .divider_section_only,
3744 -.frm-dragging .frm_field_box {
3745 - pointer-events: none;
3746 -}
3747 -
3748 3338 .frm_form_settings #op-popup, /* 1Password */
3749 3339 .frm_form_settings com-1password-op-button,
3750 3340 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3751 3341 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3880,15 +3470,15 @@
3880 3470 animation: spin 2s linear infinite;
3881 3471 }
3882 3472
3883 3473 .frm-wait:before {
3884 - border-bottom-color: var(--primary-700);
3885 - border-right-color: var(--primary-700);
3474 + border-bottom-color: var(--primary-hover);
3475 + border-right-color: var(--primary-hover);
3886 3476 }
3887 3477
3888 3478 .frm_loading_button.frm-button-secondary:before {
3889 - border-bottom-color: var(--primary-500);
3890 - border-right-color: var(--primary-500);
3479 + border-bottom-color: var(--primary-color);
3480 + border-right-color: var(--primary-color);
3891 3481 }
3892 3482
3893 3483 input[type=submit]:focus {
3894 3484 outline: none !important;
@@ -3912,9 +3502,9 @@
3912 3502 #editorcontainer #dyncontent {
3913 3503 margin: 0;
3914 3504 width: 100%;
3915 3505 padding: 6px;
3916 - line-height: var(--leading);
3506 + line-height: 1.5;
3917 3507 border: 0 none;
3918 3508 outline: none;
3919 3509 -moz-box-sizing: border-box;
3920 3510 -webkit-box-sizing: border-box;
@@ -3960,9 +3550,9 @@
3960 3550 font-size: 12px;
3961 3551 }
3962 3552
3963 3553 .frm_border_bottom {
3964 - border-bottom: 1px solid var(--grey-300);
3554 + border-bottom: 1px solid var(--grey-border);
3965 3555 margin-bottom: 10px;
3966 3556 padding-bottom: 10px;
3967 3557 }
3968 3558
@@ -3973,8 +3563,9 @@
3973 3563 .frm_posttax_opt_list .frm_border_bottom input {
3974 3564 margin-right: 1px;
3975 3565 }
3976 3566
3567 +.frm_logic_row,
3977 3568 .frm_add_remove div.frm_form_field {
3978 3569 padding-bottom: 5px;
3979 3570 }
3980 3571
@@ -4032,23 +3623,17 @@
4032 3623 font-size: inherit;
4033 3624 }
4034 3625
4035 3626 #frm-options-panel {
4036 - padding: 0 var(--gap-sm);
4037 - color: var(--grey-900);
3627 + padding: 0 15px;
3628 + color: var(--darkest-grey);
4038 3629 }
4039 3630
4040 -.frm-right-panel a.frm_add_logic_link,
4041 3631 #frm-options-panel h3 {
4042 3632 padding: 15px 0;
4043 3633 margin-top: -2px;
4044 3634 }
4045 3635
4046 -#frm_style_sidebar h3,
4047 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4048 - padding: 15px 0;
4049 -}
4050 -
4051 3636 .frm_field_key {
4052 3637 background-color: #F7F7F7;
4053 3638 }
4054 3639
@@ -4082,12 +3667,8 @@
4082 3667 .frm-alt-table tr:nth-child(even) {
4083 3668 background-color: var(--sidebar-color);
4084 3669 }
4085 3670
4086 -.frm-alt-table h3 {
4087 - margin-bottom: 0;
4088 -}
4089 -
4090 3671 .form-field .frm_cb_button {
4091 3672 height: 22px;
4092 3673 line-height: 20px;
4093 3674 margin-bottom: 10px;
@@ -4192,9 +3773,9 @@
4192 3773 li.sortable-placeholder {
4193 3774 border: none;
4194 3775 margin: 0;
4195 3776 visibility: visible !important;
4196 - box-shadow: 2px -10px 0 2px var(--primary-500);
3777 + box-shadow: 2px -10px 0 1px var(--primary-color);
4197 3778 }
4198 3779
4199 3780 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4200 3781 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4205,8 +3786,9 @@
4205 3786 #frm_form_editor_container > ul > li > ul {
4206 3787 position: relative;
4207 3788 }
4208 3789
3790 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4209 3791 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4210 3792 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4211 3793 position: absolute;
4212 3794 top: 20px;
@@ -4213,29 +3795,38 @@
4213 3795 bottom: 0;
4214 3796 }
4215 3797
4216 3798 .edit_field_type_divider + li.sortable-placeholder {
4217 - box-shadow: 2px 5px 0 2px var(--primary-500);
3799 + box-shadow: 2px 5px 0 1px var(--primary-color);
4218 3800 }
4219 3801
4220 3802 .start_divider li.sortable-placeholder {
4221 - box-shadow: 2px -5px 0 2px var(--primary-500);
3803 + box-shadow: 2px -5px 0 1px var(--primary-color);
4222 3804 }
4223 3805
4224 -.frm-is-collapsed + .sortable-placeholder {
4225 - 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);
4226 3808 }
4227 3809
4228 -.frm_single_option.ui-sortable-placeholder {
4229 - 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);
4230 3812 }
4231 3813
4232 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,
4233 3817 .frm-show-click,
4234 3818 li.ui-state-default.edit_field_type_divider .frm-show-click {
4235 3819 display: none;
4236 3820 }
4237 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 +
4238 3829 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4239 3830 .frm_form_field.ui-sortable-helper .frm_form_fields,
4240 3831 .frm_form_field.ui-sortable-helper .frm_description,
4241 3832 .frm_form_field.ui-sortable-helper .description {
@@ -4278,8 +3869,16 @@
4278 3869 #new_fields .frm_single_option input[type=text] {
4279 3870 width: calc(100% - 73px);
4280 3871 }
4281 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 +
4282 3881 .frm-right-panel .frm_single_option a.frm_remove_tag,
4283 3882 .frm_single_option a {
4284 3883 padding-left: 7px;
4285 3884 }
@@ -4337,10 +3936,10 @@
4337 3936 /* Image options for Radio and Checkbox */
4338 3937
4339 3938 .frm_image_options .frm_image_option_container {
4340 3939 --field-border-width: 1px;
4341 - --border-color: var(--grey-300);
4342 - --border-color-active: var(--primary-500);
3940 + --border-color: var(--grey-border);
3941 + --border-color-active: var(--primary-color);
4343 3942 --border-radius: var(--small-radius);
4344 3943 }
4345 3944
4346 3945 .frm_image_option_container svg {
@@ -4394,10 +3993,10 @@
4394 3993 height: 75px;
4395 3994 object-fit: cover;
4396 3995 }
4397 3996
4398 -.frm_list_entry_page img {
4399 - max-width: 100%;
3997 +.frm_list_entry_page .frm_file_link img {
3998 + max-width: 75px;
4400 3999 height: auto;
4401 4000 }
4402 4001
4403 4002 .frm_image_option_container .frm_empty_url {
@@ -4441,13 +4040,13 @@
4441 4040 margin-top: 17px;
4442 4041 }
4443 4042
4444 4043 .frm_image_data {
4445 - margin-left: var(--gap-xs);
4044 + margin-left: 10px;
4446 4045 display: flex;
4447 4046 flex-direction: column;
4448 - font-size: var(--text-sm);
4449 - justify-content: space-around;
4047 + font-size: 14px;
4048 + line-height: 17px;
4450 4049 }
4451 4050
4452 4051 .frm_image_styling_frame {
4453 4052 display: flex;
@@ -4471,9 +4070,10 @@
4471 4070 max-width: 54px;
4472 4071 }
4473 4072
4474 4073 .frm_image_preview_title{
4475 - color: var(--grey-500);
4074 + margin-top: 6px;
4075 + color: rgba(40, 47, 54, 0.65);
4476 4076 overflow: hidden;
4477 4077 white-space: nowrap;
4478 4078 text-overflow: ellipsis;
4479 4079 }
@@ -4479,9 +4079,9 @@
4479 4079 }
4480 4080
4481 4081 .frm_wrap .frm_choose_image_box {
4482 4082 cursor: pointer;
4483 - color: var(--grey-700);
4083 + color: var(--dark-grey);
4484 4084 background-color: #F2F2F2;
4485 4085 margin-left: 24px;
4486 4086 text-align: center;
4487 4087 width: 100%;
@@ -4490,11 +4090,13 @@
4490 4090 .frm_wrap .frm_choose_image_box:hover {
4491 4091 background: #fff;
4492 4092 }
4493 4093
4094 +a.frm_remove_image_option .frmsvg,
4494 4095 a.frm_remove_image_option,
4495 4096 .frm_remove_image_option {
4496 - color: var(--grey-400);
4097 + margin-top: 9px;
4098 + color: rgba(40, 47, 54, 0.4);
4497 4099 cursor: pointer;
4498 4100 }
4499 4101
4500 4102 a.frm_remove_image_option:hover .frmsvg,
@@ -4504,10 +4106,17 @@
4504 4106 }
4505 4107
4506 4108 /* Form settings */
4507 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 +
4508 4117 .frm-form-setting-tabs {
4509 - margin-top: var(--gap-sm) !important;
4118 + margin-top: 20px !important;
4510 4119 }
4511 4120
4512 4121 .frm-right-panel > .postbox {
4513 4122 background-color: transparent;
@@ -4518,44 +4127,40 @@
4518 4127
4519 4128 .frm-right-panel .postbox.frm_with_icons .inside,
4520 4129 .frm-right-panel .postbox .inside,
4521 4130 .frm-right-panel .inside {
4522 - font-size: var(--text-md);
4131 + font-size: 16px;
4523 4132 padding: 15px 20px 20px;
4524 - color: var(--grey-700);
4133 + color: var(--dark-grey);
4525 4134 }
4526 4135
4527 4136 .frm-right-panel .misc-pub-section {
4528 - padding: var(--gap-xs) 0;
4137 + padding: 10px 0;
4138 + line-height: 1.4em;
4529 4139 position: relative;
4530 4140 }
4531 4141
4532 4142 .frm-right-panel .inside a,
4533 4143 .frm-form-setting-tabs a {
4534 - font-size: var(--text-md);
4535 - color: var(--grey-700);
4536 - padding: var(--gap-sm);
4144 + font-size: 16px;
4145 + color: var(--dark-grey);
4146 + padding: 15px 15px 15px 20px;
4537 4147 display: block;
4538 4148 }
4539 4149
4540 -.frm-form-setting-tabs a {
4541 - color: var(--grey-900);
4542 - padding: var(--gap-sm) var(--gap-md);
4543 -}
4544 -
4545 4150 .frm-right-panel .inside a {
4546 4151 padding: 0;
4547 - color: var(--primary-500);
4152 + color: var(--primary-color);
4548 4153 display: inline-block;
4549 4154 }
4550 4155
4551 4156 .frm-right-panel .inside a:hover {
4552 - color: var(--primary-700);
4157 + color: var(--primary-hover);
4553 4158 }
4554 4159
4555 4160 .frm-form-setting-tabs a:hover {
4556 4161 background: var(--sidebar-hover);
4557 - color: var(--grey-900);
4162 + color: var(--dark-grey);
4558 4163 }
4559 4164
4560 4165 .frm-right-panel .inside i,
4561 4166 .frm-right-panel .inside .frmsvg,
@@ -4564,20 +4169,16 @@
4564 4169 margin: 0 5px;
4565 4170 display: inline-block;
4566 4171 width: 20px;
4567 4172 height: 20px;
4568 - color: var(--grey-500);
4173 + color: var(--grey);
4569 4174 }
4570 4175
4571 -.frm-form-setting-tabs a .frmsvg {
4572 - margin: 0;
4573 -}
4574 -
4575 4176 .frm-right-panel .inside a:hover i,
4576 4177 .frm-right-panel .inside a:hover .frmsvg,
4577 4178 .frm-form-setting-tabs a:hover .frmsvg,
4578 4179 .frm-form-setting-tabs a:hover span {
4579 - color: var(--grey-700);
4180 + color: var(--dark-grey);
4580 4181 }
4581 4182
4582 4183 .frm_settings_form .tabs-panel {
4583 4184 padding: 0 25px;
@@ -4591,9 +4192,9 @@
4591 4192
4592 4193 #frm_adv_info .tabs-panel {
4593 4194 min-height: 0 !important;
4594 4195 overflow-x: hidden;
4595 - padding: 0;
4196 + padding: 0 20px;
4596 4197 border: none;
4597 4198 background: transparent;
4598 4199 }
4599 4200
@@ -4602,130 +4203,48 @@
4602 4203 }
4603 4204
4604 4205 .frm_posttax_opt_list,
4605 4206 .frm_submit_logic_rows {
4606 - border: 1px solid var(--grey-300);
4607 - padding: var(--gap-md);
4207 + border: 1px solid var(--grey-border);
4208 + padding: 25px;
4608 4209 border-radius: var(--small-radius);
4609 - margin: 5px 0 5px var(--gap-md);
4210 + margin: 5px 0 5px 25px;
4610 4211 }
4611 4212
4612 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4613 - margin: 0;
4614 -}
4615 -
4616 -/* Color picker CSS */
4617 -.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;
4618 4219 position: absolute;
4619 - margin-left: calc( ( 100% - 35px ) * -1 );
4620 - margin-top: 1px;
4621 - width: calc( 100% - 36px );
4220 + font-size: 10px;
4221 + line-height: 20px;
4222 + left: 6px;
4622 4223 }
4623 4224
4624 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4625 - border: none;
4626 - padding: 5px 8px;
4627 - font-family: inherit;
4628 - color: var(--grey-700);
4629 - font-size: var(--text-md);
4630 - width: 100%;
4631 - line-height: var(--leading);
4632 -}
4633 -
4634 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4635 - display: none !important;
4636 -}
4637 -
4638 -.frm-right-panel .wp-picker-holder {
4639 - position: absolute;
4640 - z-index: 999;
4641 -}
4642 -
4643 -.frm-right-panel .wp-picker-input-wrap label {
4644 - margin-bottom: 0;
4645 -}
4646 -
4647 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4648 - width: 100%;
4649 - overflow: hidden;
4650 - margin: 0 !important;
4651 - height: var(--h-md) !important;
4652 - padding: 0 0 0 var(--gap-lg) !important;
4653 - border-radius: var(--small-radius);
4654 - border-color: var(--grey-300);
4655 -}
4656 -
4657 -.frm-right-panel .wp-color-result-text {
4658 - line-height: var(--leading) !important;
4659 - font-size: var(--text-md);
4660 - background: #fff !important;
4661 - color: var(--grey-900);
4662 - padding: 5px 8px;
4663 - border-color: var(--grey-300);
4664 - text-align: left;
4665 -}
4666 -
4667 -.frm-right-panel .color-alpha {
4668 - width: var(--gap-lg) !important;
4669 -}
4670 -
4671 -.frm_grid_container .wp-picker-container {
4672 - width: 100%;
4673 - position: relative;
4674 -}
4675 -
4676 -.wp-picker-container button.wp-color-result {
4677 - border: 1px solid var(--grey-300) !important;
4678 -}
4679 -
4680 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4681 - max-width: 100%;
4682 - position: relative;
4683 -}
4684 -
4685 -.frm_end .wp-picker-holder {
4686 - margin-left: -145px;
4687 -}
4688 -
4689 -.frm_end.frm6 .wp-picker-holder {
4690 - margin-left: -86px;
4691 -}
4692 -/* End of color picker CSS */
4693 -
4694 -/*
4695 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4696 -To use this element, you can call the FrmHtmlHelper::toggle function.
4697 -*/
4698 -.frm_toggle_opt {
4699 - padding: 0;
4700 - white-space: normal;
4225 +.frm_toggle_off {
4701 4226 display: inline;
4702 - vertical-align: middle;
4703 - font-weight: normal;
4227 + left: auto;
4228 + right: 5px;
4229 + color: var(--dark-grey);
4704 4230 }
4705 4231
4706 -.frm_on_label,
4707 -.frm_off_label {
4708 - color: #444444;
4709 -}
4710 -
4711 4232 .frm_toggle {
4712 4233 position: relative;
4713 4234 display: inline-block;
4714 - width: 40px;
4715 - height: var(--h-xs);
4235 + width: 45px;
4236 + height: 20px;
4716 4237 vertical-align: middle;
4238 + margin: 2px;
4717 4239 }
4718 4240
4719 -.frm_toggle_block {
4720 - display: inline-flex;
4721 - gap: var(--gap-sm);
4722 - align-items: center;
4241 +label > span.frm_toggle {
4242 + margin-right: 15px;
4723 4243 }
4724 4244
4725 -.frm_toggle input, /* Reverse compatibility */
4726 -.frm_toggle_block input {
4727 - display:none !important;
4245 +.frm_toggle input {
4246 + display: none !important;
4728 4247 }
4729 4248
4730 4249 .frm_toggle_slider {
4731 4250 position: absolute;
@@ -4733,44 +4252,26 @@
4733 4252 top: 0;
4734 4253 left: 0;
4735 4254 right: 0;
4736 4255 bottom: 0;
4737 - background-color: var(--grey-border);
4738 4256 transition: .4s;
4739 4257 border-radius: 30px;
4258 + background-color: #fff;
4259 + box-shadow: 0 0 0 2px var(--grey);
4740 4260 }
4741 4261
4742 4262 .frm_toggle_slider:before {
4743 4263 border-radius: 50%;
4744 4264 position: absolute;
4745 - 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>");
4746 - height: 22px;
4747 - width: 22px;
4748 - padding: 0 5.5px;
4749 - left: 1px;
4750 - bottom: 1px;
4751 - background-color: white;
4752 - transition: .4s;
4753 - box-sizing: border-box;
4754 - box-shadow: var(--box-shadow-md);
4755 - font-size: 21px;
4756 - 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);
4757 4272 }
4758 4273
4759 -input:checked + .frm_toggle .frm_toggle_slider {
4760 - background-color: var(--primary-500);
4761 -}
4762 -
4763 -input:focus + .frm_toggle .frm_toggle_slider {
4764 - box-shadow: var(--box-shadow-md);
4765 -}
4766 -
4767 -input:checked + .frm_toggle .frm_toggle_slider:before {
4768 - padding: 0 6px;
4769 - transform: translateX(16px);
4770 - 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>");
4771 -}
4772 -
4773 4274 input[disabled] + .frm_toggle_slider {
4774 4275 pointer-events: none;
4775 4276 cursor: text;
4776 4277 opacity: .5;
@@ -4775,53 +4276,16 @@
4775 4276 cursor: text;
4776 4277 opacity: .5;
4777 4278 }
4778 4279
4779 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4780 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4781 -}
4782 -
4783 -.rtl .frm_toggle_opt {
4784 - padding: 0 8px;
4785 -}
4786 -
4787 -.rtl .frm_toggle_slider:before {
4788 - left: 17px;
4789 -}
4790 -
4791 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4792 - transform: none!important;
4793 - left: 1px;
4794 -}
4795 -
4796 -/* Deprecated admin toggle */
4797 -.frm_toggle_off,
4798 -.frm_toggle_on {
4799 - display: none;
4800 - color: #fff;
4801 - z-index: 999;
4802 - position: absolute;
4803 - font-size: 10px;
4804 - line-height: 20px;
4805 - left: 6px;
4806 -}
4807 -
4808 -.frm_toggle_off {
4809 - display: inline;
4810 - left: auto;
4811 - right: 5px;
4812 - color: var(--dark-grey);
4813 -}
4814 -
4815 4280 .frm_toggle_long {
4816 - width: 80% !important;
4281 + width: 80%;
4817 4282 height: 28px;
4818 - display: inline-block !important;
4819 4283 }
4820 4284
4821 4285 .frm_toggle_long .frm_toggle_slider {
4822 - background: var(--primary-700);
4823 - box-shadow: 0 0 0 2px var(--primary-700);
4286 + background: var(--primary-hover);
4287 + box-shadow: 0 0 0 2px var(--primary-hover);
4824 4288 }
4825 4289
4826 4290 .frm_toggle_long .frm_toggle_off,
4827 4291 .frm_toggle_long .frm_toggle_on {
@@ -4846,11 +4310,20 @@
4846 4310 border-radius: var(--border-radius) 0 0 var(--border-radius);
4847 4311 height: 100%;
4848 4312 background-color: #fff;
4849 4313 color: var(--primary-color);
4850 - content: '' !important;
4851 4314 }
4852 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 +
4853 4326 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4854 4327 transform: translateX(101%);
4855 4328 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4856 4329 }
@@ -4865,9 +4338,9 @@
4865 4338
4866 4339 .frm_toggle_long .frm_toggle_on,
4867 4340 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4868 4341 display: inline;
4869 - color: var(--primary-500);
4342 + color: var(--primary-color);
4870 4343 font-weight: normal;
4871 4344 }
4872 4345
4873 4346 .frm_toggle_long .frm_toggle_off,
@@ -4875,9 +4348,11 @@
4875 4348 color: #fff;
4876 4349 font-weight: bold;
4877 4350 }
4878 4351
4879 -/* End toggle styling */
4352 +input:focus + .frm_toggle_slider {
4353 + box-shadow: 0 0 1px #008ec2;
4354 +}
4880 4355
4881 4356 /* Global Settings */
4882 4357
4883 4358 .tabs-panel {
@@ -4895,59 +4370,21 @@
4895 4370 margin-right: 20px !important;
4896 4371 display: inline-block !important;
4897 4372 }
4898 4373
4899 -#frm_stripe_icon {
4900 - border-radius: 5px;
4901 -}
4902 -
4903 -#captcha_settings .frm_primary_label {
4904 - margin-top: var(--gap-sm);
4905 -}
4906 -
4907 -.frm-long-icon-buttons {
4908 - display: flex;
4909 - gap: var(--gap-md);
4910 -}
4911 -
4912 -.frm-long-icon-buttons > label {
4913 - border: 1px solid var(--grey-300);
4914 - color: var(--grey-700);
4915 - border-radius: var(--small-radius);
4916 - display: flex;
4917 - padding: var(--gap-sm);
4918 - gap: var(--gap-sm);
4919 - justify-content: center;
4920 - align-items: center;
4921 - width: calc( 33% - var(--gap-sm) );
4922 - box-sizing: border-box;
4923 -}
4924 -
4925 -.frm-long-icon-buttons > label:hover {
4926 - color: var(--primary-500);
4927 -}
4928 -
4929 -.frm-long-icon-buttons input[type=radio] {
4930 - display: none;
4931 -}
4932 -
4933 -.frm-long-icon-buttons input[type=radio]:checked + label {
4934 - border-color: var(--primary-500);
4935 - box-shadow: 0 0 0 1px var(--primary-color);
4936 -}
4937 -
4938 -.frm-long-icon-buttons label > svg {
4939 - height: 21px;
4940 -}
4941 -
4942 4374 .frm-example-icon .frmsvg,
4943 4375 .frm-example-icon i {
4944 4376 height: 20px;
4945 4377 width: 20px;
4946 4378 font-size: 20px;
4947 - color: var(--grey-700);
4379 + color: var(--dark-grey);
4948 4380 }
4949 4381
4382 +.edd_frm_license_row {
4383 + clear: both;
4384 + line-height: 2em;
4385 +}
4386 +
4950 4387 .frm_license_msg {
4951 4388 margin-top: 0;
4952 4389 }
4953 4390
@@ -4974,14 +4411,23 @@
4974 4411
4975 4412 .frm_no_items {
4976 4413 margin: 0 auto 50px;
4977 4414 text-align: center;
4978 - color: var(--grey-700);
4415 + color: var(--dark-grey);
4979 4416 max-width: 500px;
4980 4417 }
4981 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 +
4982 4428 .frm-subscribe {
4983 - margin: var(--gap-lg) 0;
4429 + margin: 30px 0;
4984 4430 }
4985 4431
4986 4432 /* Inbox */
4987 4433
@@ -4991,16 +4437,16 @@
4991 4437
4992 4438 .frm_inbox_card {
4993 4439 display: grid;
4994 4440 grid-template-columns: 72px 1fr;
4995 - grid-gap: var(--gap-xs);
4996 - border-bottom: 1px solid var(--grey-300);
4997 - padding: var(--gap-md);
4441 + grid-gap: 15px;
4442 + border-bottom: 1px solid var(--grey-border);
4443 + padding: 25px;
4998 4444 }
4999 4445
5000 4446 .frm_inbox_card_icon {
5001 4447 grid-row: span 3 / span 3;
5002 - padding-top: var(--gap-xs);
4448 + padding-top: 20px;
5003 4449 text-align: center
5004 4450 }
5005 4451
5006 4452 .frm_inbox_card_icon svg {
@@ -5019,8 +4465,11 @@
5019 4465 border: none;
5020 4466 text-transform: none;
5021 4467 margin: 0;
5022 4468 padding: 0;
4469 + font-weight: 600;
4470 + color: var(--medium-grey);
4471 + font-size: 16px;
5023 4472 }
5024 4473
5025 4474 .frm_inbox_date {
5026 4475 text-align: right;
@@ -5048,8 +4497,37 @@
5048 4497 margin-left: 2px;
5049 4498 vertical-align: text-bottom;
5050 4499 }
5051 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 +
5052 4530 /* Import/Export */
5053 4531 .csv_opts #frm_csv_col_sep {
5054 4532 width: 45px;
5055 4533 }
@@ -5100,9 +4578,9 @@
5100 4578 padding: 0;
5101 4579 }
5102 4580
5103 4581 .frm-feature-banner {
5104 - background: var(--grey-700);
4582 + background: var(--dark-grey);
5105 4583 color: #fff;
5106 4584 border-radius: var(--small-radius);
5107 4585 padding: 20px;
5108 4586 margin: 10px 0;
@@ -5108,9 +4586,9 @@
5108 4586 margin: 10px 0;
5109 4587 }
5110 4588
5111 4589 .frm-feature-banner p {
5112 - font-size: var(--text-sm);
4590 + font-size: 14px;
5113 4591 }
5114 4592
5115 4593 .frm-feature-banner .dismiss {
5116 4594 margin-top: -10px;
@@ -5145,31 +4623,29 @@
5145 4623 /*Form Settings Tab*/
5146 4624
5147 4625 h2.frm-h2,
5148 4626 .frm_form_settings h2 {
5149 - border-bottom: 1px solid var(--grey-300);
5150 - color: var(--grey-900);
5151 - 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;
5152 4631 padding: 9px 0 5px;
5153 4632 margin: 0;
5154 4633 }
5155 4634
5156 4635 .frm_settings_form h3,
5157 -.frm_form_settings h3,
5158 -.frm_form_settings span.frm_add_logic_link {
5159 - font-size: var(--text-md);
5160 - border-top: 1px solid var(--grey-300);
5161 - padding-top: var(--gap-sm);
5162 - 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;
5163 4640 font-weight: normal;
5164 4641 text-transform: uppercase;
5165 4642 color: var(--medium-grey);
5166 - display: block;
5167 4643 }
5168 4644
5169 4645 .frm_form_settings .howto {
5170 - color: var(--grey-500);
5171 - font-size: var(--text-sm);
4646 + color: var(--medium-grey);
4647 + font-size: 15px;
5172 4648 margin-top: 8px;
5173 4649 }
5174 4650
5175 4651 .frm_form_settings .advanced_settings .form-table {
@@ -5184,10 +4660,18 @@
5184 4660 width: 95%;
5185 4661 }
5186 4662
5187 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;
5188 4669 padding: 3px 0;
4670 + font-size: 15px;
5189 4671 max-height: 310px;
4672 + overflow-y: auto;
4673 + overflow-x: hidden;
5190 4674 }
5191 4675
5192 4676 .frm_wrap .ui-widget {
5193 4677 font-family: inherit;
@@ -5193,15 +4677,26 @@
5193 4677 font-family: inherit;
5194 4678 }
5195 4679
5196 4680 .frm_wrap .ui-autocomplete li {
5197 - padding: 2px 4px;
4681 + padding: 2px 10px;
5198 4682 background: none;
5199 - color: var(--grey-700);
4683 + color: var(--dark-grey);
5200 4684 border: none;
5201 4685 font-weight: normal;
5202 4686 }
5203 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 +
5204 4699 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5205 4700 border: none;
5206 4701 font-weight: inherit;
5207 4702 }
@@ -5240,9 +4735,9 @@
5240 4735 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5241 4736 height: 10px;
5242 4737 }
5243 4738
5244 -#frm_adv_info .frm_noallow {
4739 +.frm_page_container #frm_adv_info .frm_noallow {
5245 4740 display: none;
5246 4741 }
5247 4742
5248 4743 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5277,9 +4772,9 @@
5277 4772 #frm_notification_settings .widget-top .widget-action,
5278 4773 #frm_form_editor_container .widget-top .widget-action {
5279 4774 border: 0;
5280 4775 margin: 0;
5281 - padding: 8px;
4776 + padding: 10px;
5282 4777 background: 0 0;
5283 4778 cursor: pointer;
5284 4779 outline: 0;
5285 4780 }
@@ -5284,12 +4779,12 @@
5284 4779 outline: 0;
5285 4780 }
5286 4781
5287 4782 #frm_email_addon_menu {
5288 - border: 1px solid var(--grey-300);
5289 - padding: var(--gap-sm);
4783 + border: 1px solid var(--grey-border);
4784 + padding: 15px;
5290 4785 border-radius: 4px;
5291 - margin: var(--gap-md) 0 var(--gap-sm);
4786 + margin: 25px 0 15px;
5292 4787 }
5293 4788
5294 4789 #frm_email_addon_menu .frm-search {
5295 4790 float: right;
@@ -5300,12 +4795,8 @@
5300 4795 clear: none;
5301 4796 padding-top: 7px;
5302 4797 }
5303 4798
5304 -.frm_email_settings .widget .widget-top {
5305 - background-color: var(--sidebar-color);
5306 -}
5307 -
5308 4799 .frm_email_settings .widget .widget-top,
5309 4800 .frm_email_settings .widget .widget-top h3 {
5310 4801 cursor: pointer !important;
5311 4802 }
@@ -5310,17 +4801,23 @@
5310 4801 cursor: pointer !important;
5311 4802 }
5312 4803
5313 4804 .frm_email_settings .widget {
5314 - margin-bottom: var(--gap-sm);
4805 + margin-bottom: 15px;
4806 + line-height: 1.4em;
4807 + padding: 0;
5315 4808 }
5316 4809
4810 +.frm_email_settings .widget:last-of-type {
4811 + margin-bottom: 20px;
4812 +}
4813 +
5317 4814 .frm_form_action_settings .widget-top {
5318 4815 box-shadow: none;
5319 - border-color: var(--grey-300);
5320 - border-radius: var(--small-radius);
4816 + border-color: var(--grey-border);
4817 + border-radius: 4px;
5321 4818 background: var(--lightest-grey);
5322 - color: var(--grey-700);
4819 + color: var(--dark-grey);
5323 4820 }
5324 4821
5325 4822 .frm_form_action_settings:hover .widget-top {
5326 4823 border-color: var(--grey);
@@ -5332,9 +4829,9 @@
5332 4829 border-bottom: none;
5333 4830 }
5334 4831
5335 4832 .frm_form_action_settings.open:hover .widget-top {
5336 - border-color: var(--grey-300);
4833 + border-color: var(--grey-border);
5337 4834 }
5338 4835
5339 4836 .frm_form_action_settings > .widget-inside {
5340 4837 display: none;
@@ -5346,9 +4843,9 @@
5346 4843
5347 4844 .frm_form_action_settings .widget-inside {
5348 4845 min-height: 25px;
5349 4846 padding: 15px;
5350 - border-color: var(--grey-300);
4847 + border-color: var(--grey-border);
5351 4848 border-bottom-left-radius: 4px;
5352 4849 border-bottom-right-radius: 4px;
5353 4850 }
5354 4851
@@ -5356,14 +4853,14 @@
5356 4853 .frm_form_action_settings .widget-title h3 {
5357 4854 display: inline-block;
5358 4855 border-bottom: none;
5359 4856 padding: 10px 10px 5px;
5360 - font-size: var(--text-md);
4857 + font-size: 16px;
5361 4858 font-weight: 500;
5362 4859 }
5363 4860
5364 4861 #frm_email_addon_menu h3 {
5365 - margin: 0 0 var(--gap-sm);
4862 + margin: 0 0 15px;
5366 4863 clear: both;
5367 4864 }
5368 4865
5369 4866 .frm_single_api_settings p > label {
@@ -5399,9 +4896,9 @@
5399 4896 }
5400 4897
5401 4898 #frm-hide-groups,
5402 4899 #frm-show-groups {
5403 - font-size: var(--text-md);
4900 + font-size: 16px;
5404 4901 float: right;
5405 4902 }
5406 4903
5407 4904 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5408,16 +4905,16 @@
5408 4905 outline: none;
5409 4906 }
5410 4907
5411 4908 .frm_actions_list a {
5412 - font-size: var(--text-sm);
5413 - color: var(--grey-700);
4909 + font-size: 14px;
4910 + color: var(--dark-grey);
5414 4911 word-break: break-word;
5415 4912 }
5416 4913
5417 4914 .frm_actions_list span.frm-outer-circle {
5418 4915 /* 50px total with 30px content */
5419 - background-color: var(--grey-100);
4916 + background-color: var(--sidebar-color);
5420 4917 padding: 10px;
5421 4918 text-align: center;
5422 4919 border-radius: 50%;
5423 4920 display: block;
@@ -5423,13 +4920,12 @@
5423 4920 display: block;
5424 4921 width: 30px;
5425 4922 height: 30px;
5426 4923 margin: 0 auto 15px;
5427 - line-height: 1;
5428 4924 }
5429 4925
5430 4926 .frm_email_settings .widget-title h4 {
5431 - color: var(--grey-700);
4927 + color: var(--dark-grey);
5432 4928 }
5433 4929
5434 4930 .frm_disabled_action .widget-title h4 {
5435 4931 color: var(--grey);
@@ -5445,17 +4941,16 @@
5445 4941 }
5446 4942
5447 4943 span.frm-inner-circle,
5448 4944 .frm_email_settings .widget-title .frm_form_action_icon {
5449 - background-color: var(--grey-400);
4945 + background-color: var(--grey-border);
5450 4946 border-radius: 50%;
5451 4947 display: inline-block;
5452 4948 text-align: center;
5453 - line-height: 1;
5454 4949 }
5455 4950
5456 4951 span.frm-inner-circle {
5457 - background-color: var(--primary-700);
4952 + background-color: var(--primary-hover);
5458 4953 height: 22px;
5459 4954 width: 22px;
5460 4955 padding: 4px;
5461 4956 color: #fff;
@@ -5468,9 +4963,9 @@
5468 4963 .frm_email_settings .widget-title .frm_form_action_icon {
5469 4964 height: 15px;
5470 4965 width: 15px;
5471 4966 padding: 5px;
5472 - color: #fff;
4967 + color: var(--lightest-grey);
5473 4968 vertical-align: middle;
5474 4969 }
5475 4970
5476 4971 .frm_actions_list .frmsvg,
@@ -5491,9 +4986,9 @@
5491 4986 }
5492 4987
5493 4988 span.frm-inner-circle.frm-inverse {
5494 4989 background-color: transparent;
5495 - color: var(--primary-700);
4990 + color: var(--primary-hover);
5496 4991 padding: 0;
5497 4992 height: 30px;
5498 4993 width: 100%;
5499 4994 }
@@ -5499,9 +4994,9 @@
5499 4994 }
5500 4995
5501 4996 .frm_actions_list span.frm-inverse i,
5502 4997 .frm_actions_list span.frm-inverse .frmsvg {
5503 - color: var(--primary-700);
4998 + color: var(--primary-hover);
5504 4999 height: 30px;
5505 5000 width: 30px;
5506 5001 font-size: 30px;
5507 5002 padding: 0;
@@ -5513,9 +5008,9 @@
5513 5008 font-size: 30px;
5514 5009 }
5515 5010
5516 5011 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5517 - background: #fff;
5012 + background: transparent;
5518 5013 padding: 0;
5519 5014 height: 24px;
5520 5015 width: 24px;
5521 5016 }
@@ -5521,17 +5016,18 @@
5521 5016 }
5522 5017
5523 5018 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5524 5019 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5525 - color: var(--grey-400);
5020 + color: var(--grey-border);
5526 5021 height: 24px;
5527 5022 width: 24px;
5528 5023 font-size: 24px;
5024 + line-height: 1em;
5529 5025 }
5530 5026
5531 5027 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5532 5028 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5533 - color: var(--grey-500);
5029 + color: var(--grey);
5534 5030 }
5535 5031
5536 5032 .frm_email_icons {
5537 5033 padding: 10px 0 5px 6px;
@@ -5542,8 +5038,9 @@
5542 5038 margin-left: 8px;
5543 5039 color: var(--grey);
5544 5040 opacity: 0;
5545 5041 transition: all .2s ease;
5042 + vertical-align: middle;
5546 5043 }
5547 5044
5548 5045 .frm_email_icons a .frmsvg {
5549 5046 color: var(--grey);
@@ -5562,8 +5059,16 @@
5562 5059 .frm_actions_list .frm_inactive_action i {
5563 5060 opacity: .4;
5564 5061 }
5565 5062
5063 +.frm-no-margin {
5064 + margin: 0;
5065 +}
5066 +
5067 +.frm-no-border {
5068 + border: none !important;
5069 +}
5070 +
5566 5071 table td, .form-table tr td {
5567 5072 vertical-align: top;
5568 5073 }
5569 5074
@@ -5590,12 +5095,8 @@
5590 5095 #frm_notification_settings .frm_form_action_settings td p {
5591 5096 padding: 7px 0;
5592 5097 }
5593 5098
5594 -#permissions_settings_settings .frm_grid_container {
5595 - align-items: center;
5596 -}
5597 -
5598 5099 #frm_notification_settings .form-table > tbody > tr > th {
5599 5100 width: 150px;
5600 5101 font-weight: normal;
5601 5102 padding-right: 10px;
@@ -5617,8 +5118,9 @@
5617 5118 #frm_notification_settings .frm_left_label {
5618 5119 /* For add-ons that haven't been updated for 4.0 */
5619 5120 float: none;
5620 5121 width: auto !important;
5122 + line-height: 1;
5621 5123 }
5622 5124
5623 5125 .frm-fields .frm_autoresponder_rows select {
5624 5126 width: auto;
@@ -5631,17 +5133,16 @@
5631 5133 width: 100%;
5632 5134 }
5633 5135
5634 5136 #frm_notification_settings .frm_email_buttons {
5635 - padding: var(--gap-2xs);
5137 + padding: 7px;
5636 5138 background: var(--light-blue);
5637 - color: var(--primary-700);
5638 - border-radius: var(--small-radius);
5139 + color: var(--primary-hover);
5140 + border-radius: 4px;
5639 5141 border-color: var(--blue-border);
5640 - line-height: 1;
5142 + line-height: 1em;
5641 5143 height: auto;
5642 - min-height: 12px;
5643 - font-size: var(--text-xs);
5144 + font-size: 12px;
5644 5145 box-shadow: none;
5645 5146 }
5646 5147
5647 5148 .frm_reply_to_container,
@@ -5646,31 +5147,34 @@
5646 5147
5647 5148 .frm_reply_to_container,
5648 5149 .frm_bcc_cc_container {
5649 5150 float: right;
5650 - margin: -4px 0 0;
5151 + margin: -8px 0 0;
5651 5152 z-index: 1;
5652 5153 position: relative;
5653 5154 }
5654 5155
5655 5156 .frm_email_row .frm_cancel1_icon:before {
5157 + line-height: 1;
5656 5158 vertical-align: bottom;
5657 5159 }
5658 5160
5161 +.frm_action_id {
5162 + padding-top: 10px;
5163 +}
5164 +
5659 5165 .frm_logic_field_opts {
5660 5166 max-width: 35%;
5661 5167 }
5662 5168
5663 5169 .frm-inline-select,
5664 -p.frm-inline-select,
5665 5170 #frm_submit_logic_row,
5666 5171 .frm_logic_rows .frm-collapse-me {
5667 - line-height: var(--h-md) !important;
5172 + line-height: 30px;
5668 5173 }
5669 5174
5670 -.frm_logic_row {
5671 - padding: var(--gap-xs) 0 0;
5672 - align-items: center;
5175 +.frm_logic_row:first-of-type {
5176 + padding-top: 8px;
5673 5177 }
5674 5178
5675 5179 .frm-single-settings .frm_logic_row > select {
5676 5180 max-width: 32.5% !important;
@@ -5707,8 +5211,13 @@
5707 5211 margin-bottom: 0;
5708 5212 padding: 0;
5709 5213 }
5710 5214
5215 +.frm_form_settings input[type="text"] {
5216 + line-height: normal;
5217 + height: auto;
5218 +}
5219 +
5711 5220 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5712 5221 padding-bottom: 0;
5713 5222 }
5714 5223
@@ -5717,9 +5226,9 @@
5717 5226 padding-right: 15px;
5718 5227 }
5719 5228
5720 5229 #form_global_settings h3 {
5721 - font-size: var(--text-sm);
5230 + font-size: 14px;
5722 5231 margin-top: 25px;
5723 5232 }
5724 5233
5725 5234 #form_global_settings .tabs-panel + h3 {
@@ -5734,9 +5243,9 @@
5734 5243 border-top: 1px solid #eee;
5735 5244 border-bottom: none;
5736 5245 margin: 15px -15px 0;
5737 5246 padding: 8px 15px;
5738 - font-size: var(--text-sm);
5247 + font-size: 14px;
5739 5248 }
5740 5249
5741 5250 #poststuff .frm_form_settings h3.frm_first_h3,
5742 5251 #poststuff h3.frm_first_h3 {
@@ -5747,8 +5256,20 @@
5747 5256 h3.frm_add_logic_link {
5748 5257 margin-bottom: 0 !important;
5749 5258 }
5750 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 +
5751 5272 a.frm_add_logic_link.frm_hidden {
5752 5273 display: none;
5753 5274 }
5754 5275
@@ -5768,9 +5289,9 @@
5768 5289 bottom: 0;
5769 5290 }
5770 5291
5771 5292 .frm_right_addon input {
5772 - padding-right: var(--gap-lg);
5293 + padding-right: 30px;
5773 5294 }
5774 5295
5775 5296 .frm_icon_font {
5776 5297 color: #A0A0A0;
@@ -5776,12 +5297,8 @@
5776 5297 color: #A0A0A0;
5777 5298 color: var(--grey);
5778 5299 }
5779 5300
5780 -.frm-fields label .frm_icon_font {
5781 - font-size: inherit;
5782 -}
5783 -
5784 5301 .misc-pub-revisions.frm_icon_font,
5785 5302 .misc-pub-revisions.frm_icon_font:hover {
5786 5303 color: inherit;
5787 5304 }
@@ -5868,10 +5385,10 @@
5868 5385 position: relative;
5869 5386 top: 2px;
5870 5387 }
5871 5388
5872 -.frm-field-action-icons > a {
5873 - font-size: var(--text-md);
5389 +.frm-field-action-icons a {
5390 + font-size: 16px;
5874 5391 width: 17px;
5875 5392 }
5876 5393
5877 5394 .frm-field-action-icons a:hover {
@@ -5881,26 +5398,21 @@
5881 5398 .frm-field-action-icons .dropdown {
5882 5399 display: inline-block;
5883 5400 }
5884 5401
5885 -.frm-field-action-icons > a .frmsvg {
5886 - color: var(--grey-500) !important;
5402 +.frm-field-action-icons a .frmsvg {
5403 + color: #9EA9B8 !important;
5887 5404 font-size: 17px;
5888 5405 width: 17px;
5889 5406 height: 17px;
5890 5407 }
5891 5408
5892 -.frm-field-action-icons > a .frmsvg,
5893 -.frm-field-action-icons > div > a .frmsvg {
5894 - vertical-align: baseline;
5895 -}
5896 -
5897 5409 .edit_field_type_end_divider .frm-field-action-icons {
5898 5410 display: none !important;
5899 5411 }
5900 5412
5901 5413 .frm-move {
5902 - cursor: grab;
5414 + cursor: move;
5903 5415 }
5904 5416
5905 5417 span.howto {
5906 5418 display: inline;
@@ -5946,9 +5458,9 @@
5946 5458 margin-bottom: 10px;
5947 5459 }
5948 5460
5949 5461 .frm_no_entries_form .frm_no_entries_text {
5950 - line-height: var(--leading);
5462 + line-height: 200%;
5951 5463 }
5952 5464
5953 5465 #form_entries_page #the-list .no-items {
5954 5466 height: 240px; /* Equals to the max height of search dropdown */
@@ -5977,10 +5489,9 @@
5977 5489 }
5978 5490
5979 5491 .frm_wrap .google-visualization-table-tr-head,
5980 5492 .frm_wrap .google-visualization-table-tr-head th {
5981 - white-space: pre-wrap;
5982 - font-size: var(--text-md);
5493 + font-size: 16px;
5983 5494 font-weight: 400 !important;
5984 5495 text-align: left;
5985 5496 }
5986 5497
@@ -5996,8 +5507,12 @@
5996 5507 width: 20%;
5997 5508 min-width: 175px;
5998 5509 }
5999 5510
5511 +#form_reports_page h2 {
5512 + margin-top: 2em !important;
5513 +}
5514 +
6000 5515 /* Views Page */
6001 5516 #form_views_page img.frm_no_views {
6002 5517 max-width: 100%;
6003 5518 }
@@ -6107,9 +5622,9 @@
6107 5622 }
6108 5623
6109 5624 #frm-show-fields {
6110 5625 min-height: 350px;
6111 - padding: 0 0 35px;
5626 + padding: 10px 0 35px;
6112 5627 margin: 0;
6113 5628 position: relative;
6114 5629 }
6115 5630
@@ -6155,10 +5670,11 @@
6155 5670 .frm-field-group-hover-target #frm_field_group_controls {
6156 5671 visibility: visible;
6157 5672 }
6158 5673
6159 -#frm_field_group_controls .dropdown-item a span {
6160 - 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);
6161 5677 }
6162 5678
6163 5679 #frm_field_group_controls .dropdown-item a:hover {
6164 5680 text-decoration: none;
@@ -6274,16 +5790,15 @@
6274 5790 }
6275 5791
6276 5792 .frm-page-collapsed .frm_clone_icon,
6277 5793 .frm-page-collapsed .frm_delete_field,
6278 -.frm-page-collapsed .frm_clone_field,
6279 -.frm-section-collapsed .frm_clone_icon {
5794 +.frm-section-collapsed .frm_clone_icon,
5795 +.frm-section-collapsed .frm_delete_field {
6280 5796 opacity: .5;
6281 5797 cursor: not-allowed;
6282 5798 }
6283 5799
6284 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6285 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5800 +.edit_field_type_summary .frm_clone_field {
6286 5801 display: none !important;
6287 5802 }
6288 5803
6289 5804 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6315,9 +5830,9 @@
6315 5830 content: '';
6316 5831 display: block;
6317 5832 padding: 2px 0;
6318 5833 line-height: 1px;
6319 - border-top: 2px solid var(--grey-300);
5834 + border-top: 2px solid var(--grey-border);
6320 5835 top: -2px;
6321 5836 position: absolute;
6322 5837 width: 100%;
6323 5838 transition: .5s border-color ease-in-out;
@@ -6338,10 +5853,10 @@
6338 5853 .frm_sorting li.ui-state-default.edit_field_type_divider {
6339 5854 overflow: visible;
6340 5855 position: relative;
6341 5856 padding: 0 0 0 20px;
6342 - margin: 25px 0 0 -5px;
6343 - border-left: 1px solid var(--primary-700);
5857 + margin: 25px 0 0 -20px;
5858 + border-left: 1px solid var(--primary-hover);
6344 5859 transition: border 0.7s ease-out;
6345 5860 }
6346 5861
6347 5862 .frm-section-collapsed {
@@ -6349,9 +5864,9 @@
6349 5864 }
6350 5865
6351 5866 .frm_sorting li.edit_field_type_end_divider,
6352 5867 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6353 - margin: 0 0 var(--gap-sm);
5868 + margin: 0 0 15px;
6354 5869 }
6355 5870
6356 5871 .frm-first-page .frm_prev_page {
6357 5872 display: none;
@@ -6356,19 +5871,22 @@
6356 5871 .frm-first-page .frm_prev_page {
6357 5872 display: none;
6358 5873 }
6359 5874
6360 -#frm_builder_page .frm_remove_form_row.frm_button,
6361 -#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 {
6362 5879 border-radius: var(--small-radius);
6363 5880 border: 1px solid var(--blue-border);
5881 + color: var(--primary-color);
6364 5882 }
6365 5883
6366 -#frm_builder_page .frm_remove_form_row .frmsvg,
6367 -#frm_builder_page .frm_remove_form_row i:before,
5884 +.frm_wrap .frm_remove_form_row .frmsvg,
5885 +.frm_remove_form_row i:before,
6368 5886 .frm_wrap .frm_add_form_row .frmsvg,
6369 5887 .frm_add_form_row i:before {
6370 - color: var(--primary-700);
5888 + color: var(--primary-hover);
6371 5889 }
6372 5890
6373 5891 .frm-preview-buttons .frm_button_submit {
6374 5892 margin: 0 5px;
@@ -6374,10 +5892,10 @@
6374 5892 margin: 0 5px;
6375 5893 }
6376 5894
6377 5895 .frm-page-break {
6378 - border-top: 1px dashed var(--primary-700);
6379 - margin-top: var(--gap-lg);
5896 + border-top: 1px dashed var(--primary-hover);
5897 + margin-top: 30px;
6380 5898 position: relative;
6381 5899 }
6382 5900
6383 5901 .edit_field_type_divider:before,
@@ -6390,9 +5908,9 @@
6390 5908 width: 4px;
6391 5909 height: 4px;
6392 5910 background-color: #fff;
6393 5911 border-radius: 50%;
6394 - border: 1px solid var(--primary-700);
5912 + border: 1px solid var(--primary-hover);
6395 5913 text-rendering: auto;
6396 5914 -webkit-font-smoothing: antialiased;
6397 5915 }
6398 5916
@@ -6414,12 +5932,13 @@
6414 5932 width: 20px;
6415 5933 height: 20px;
6416 5934 left: -11px;
6417 5935 top: 0;
6418 - background: var(--primary-700);
5936 + background: var(--primary-hover);
6419 5937 text-align: center;
6420 5938 color: #fff;
6421 5939 font-size: 13px;
5940 + line-height: 22px;
6422 5941 }
6423 5942
6424 5943 .edit_field_type_divider:before{
6425 5944 font-family: 's11-fp';
@@ -6440,20 +5959,20 @@
6440 5959
6441 5960
6442 5961 .frm_sorting li.edit_field_type_divider:hover,
6443 5962 .frm_sorting li.edit_field_type_divider.selected {
6444 - border-left-color: var(--primary-500);
5963 + border-left-color: var(--primary-color);
6445 5964 }
6446 5965
6447 5966 .edit_field_type_divider.selected:before,
6448 5967 .edit_field_type_divider:hover:before {
6449 - border-color: var(--primary-500);
6450 - background: var(--primary-500);
5968 + border-color: var(--primary-color);
5969 + background: var(--primary-color);
6451 5970 }
6452 5971
6453 5972 .edit_field_type_divider.selected:after,
6454 5973 .edit_field_type_divider:hover:after {
6455 - border-color: var(--primary-500);
5974 + border-color: var(--primary-color);
6456 5975 }
6457 5976
6458 5977 .frm-section-collapsed:after {
6459 5978 border-color: transparent !important;
@@ -6461,11 +5980,19 @@
6461 5980 }
6462 5981
6463 5982 .frm-page-break .frm-collapse-page.button {
6464 5983 margin-left: 46%;
6465 - 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);
6466 5988 }
6467 5989
5990 +#frm-fake-page .frm-collapse-page.button {
5991 + border-color: var(--grey) !important;
5992 + color: var(--grey);
5993 +}
5994 +
6468 5995 #frm-fake-page.frm-page-collapsed {
6469 5996 margin-bottom: 0;
6470 5997 }
6471 5998
@@ -6471,15 +5998,15 @@
6471 5998
6472 5999 .frm-page-collapsed {
6473 6000 position: relative;
6474 6001 overflow: visible !important;
6475 - margin-bottom: var(--gap-lg);
6002 + margin-bottom: 30px;
6476 6003 }
6477 6004
6478 6005 .frm-page-collapsed:after {
6479 6006 content: '';
6480 6007 display: block;
6481 - border: 1px dashed var(--grey-300);
6008 + border: 1px dashed var(--grey-border);
6482 6009 border-left: none;
6483 6010 border-right: none;
6484 6011 height: 6px;
6485 6012 position: absolute;
@@ -6486,22 +6013,25 @@
6486 6013 width: calc( 100% - 10px );
6487 6014 bottom: -15px;
6488 6015 }
6489 6016
6490 -.frm-collapse-page .frmsvg,
6491 6017 .frm-collapse-page .frm_arrowdown6_icon {
6492 - width: var(--text-sm);
6493 - height: var(--text-sm);
6494 - font-size: var(--text-sm);
6018 + width: 16px;
6495 6019 text-align: center;
6496 6020 margin-left: 2px;
6497 - color: currentColor;
6021 + color: var(--primary-hover);
6498 6022 }
6499 6023
6500 6024 #frm-fake-page .frm_arrowdown6_icon {
6501 - color: currentColor;
6025 + color: var(--grey);
6502 6026 }
6503 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 +
6504 6034 .frm-collapsed i:before,
6505 6035 .frm-section-collapsed .frm_arrowdown6_icon:before,
6506 6036 .frm-page-collapsed .frm_arrowdown6_icon:before {
6507 6037 content: '\e913';
@@ -6549,14 +6079,14 @@
6549 6079 .frm_no_section_fields {
6550 6080 text-align: center;
6551 6081 position: absolute;
6552 6082 color: var(--medium-grey);
6553 - font-size: var(--text-md);
6083 + font-size: 16px;
6554 6084 box-sizing: border-box;
6555 - border: 1px dashed var(--grey-300);
6085 + border: 2px dashed var(--primary-color);
6556 6086 }
6557 6087
6558 -.ui-droppable-active ~ .frm_no_fields {
6088 +.drop-me + .frm_no_fields {
6559 6089 border-style: solid;
6560 6090 }
6561 6091
6562 6092 .frm_no_section_fields {
@@ -6588,9 +6118,9 @@
6588 6118 display: block;
6589 6119 }
6590 6120
6591 6121 .frm-large-plus.frmsvg {
6592 - color: var(--primary-700);
6122 + color: var(--primary-hover);
6593 6123 height: 45px;
6594 6124 width: 45px;
6595 6125 }
6596 6126
@@ -6710,12 +6240,10 @@
6710 6240
6711 6241 .frm-category-tabs > li a,
6712 6242 .frm-category-tabs > li a:active {
6713 6243 outline: none;
6244 + -webkit-box-shadow: none;
6714 6245 box-shadow: none;
6715 - display: flex;
6716 - gap: var(--gap-xs);
6717 - align-items: center;
6718 6246 }
6719 6247
6720 6248 .frm-category-tabs > li.active .frmsvg,
6721 6249 .frm-category-tabs > li.active i,
@@ -6720,15 +6248,15 @@
6720 6248 .frm-category-tabs > li.active .frmsvg,
6721 6249 .frm-category-tabs > li.active i,
6722 6250 .frm-category-tabs > li.active span,
6723 6251 .frm-category-tabs > li.active a {
6724 - color: var(--primary-500);
6252 + color: var(--primary-color);
6725 6253 }
6726 6254
6727 6255 .frm_wrap .manage-menus {
6728 6256 margin-top: 0;
6729 6257 border: none;
6730 - border-bottom: 1px solid var(--grey-300);
6258 + border-bottom: 1px solid var(--grey-border);
6731 6259 background: var(--lightest-grey);
6732 6260 }
6733 6261
6734 6262 .general_settings .postbox .manage-menus {
@@ -6764,9 +6292,9 @@
6764 6292 padding-top: 10px;
6765 6293 }
6766 6294
6767 6295 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6768 - color: var(--grey-900);
6296 + color: var(--darkest-grey);
6769 6297 }
6770 6298
6771 6299 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6772 6300 box-shadow: none;
@@ -6782,14 +6310,14 @@
6782 6310 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6783 6311 .frm_update_msg,
6784 6312 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6785 6313 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6786 - border-color: var(--primary-500);
6314 + border-color: var(--primary-color);
6787 6315 transition: .5s border-color ease-in-out;
6788 6316 }
6789 6317
6790 6318 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6791 - box-shadow: 0 0 1px 0 var(--primary-500);
6319 + box-shadow: 0 0 1px 0 var(--primary-color);
6792 6320 }
6793 6321
6794 6322 .frm_sorting li.ui-state-default {
6795 6323 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6812,9 +6340,9 @@
6812 6340 font-weight: bold;
6813 6341 border: 1px solid #DFDFDF;
6814 6342 background-color: #EEEEEE;
6815 6343 padding: 3px 5px 2px;
6816 - font-size: var(--text-md);
6344 + font-size: 16px;
6817 6345 line-height: 20px;
6818 6346 }
6819 6347
6820 6348 .frm_update_msg {
@@ -6852,13 +6380,8 @@
6852 6380 .widefat .column-shortcode {
6853 6381 width: 9em;
6854 6382 }
6855 6383
6856 -.toplevel_page_formidable .column-shortcode div {
6857 - display: flex;
6858 - gap: var(--gap-xs);
6859 -}
6860 -
6861 6384 .widefat .column-entries, .widefat .column-link {
6862 6385 width: 10%;
6863 6386 text-align: center;
6864 6387 }
@@ -6866,22 +6389,23 @@
6866 6389 .widefat .column-form_key, .widefat .column-created_at {
6867 6390 width: 10%;
6868 6391 }
6869 6392
6870 -.frm-white-body .search-box,
6393 +.post-type-frm_display .search-box,
6871 6394 .frm_wrap .frm-search {
6872 6395 float: right;
6873 - margin: 0;
6396 + margin-bottom: 15px;
6874 6397 clear: right;
6875 6398 }
6876 6399
6877 -.frm-white-body .search-box,
6400 +#form_entries_page form .frm-search {
6401 + margin-top: 15px;
6402 +}
6403 +
6878 6404 .frm-search {
6879 - min-width: 32%;
6405 + width: 32%;
6406 + float: right;
6880 6407 position: relative;
6881 - display: flex;
6882 - gap: var(--gap-sm);
6883 - align-items: center;
6884 6408 }
6885 6409
6886 6410 .frm-inline-modal .frm-search,
6887 6411 #frm_adv_info .frm-search {
@@ -6887,9 +6411,9 @@
6887 6411 #frm_adv_info .frm-search {
6888 6412 float: none;
6889 6413 width: 100%;
6890 6414 clear: both;
6891 - margin: var(--gap-xs) 0;
6415 + margin: 5px 0 10px;
6892 6416 }
6893 6417
6894 6418 .frm-button-group a {
6895 6419 margin: 0 7px !important;
@@ -6906,9 +6430,9 @@
6906 6430
6907 6431 i.frm-show-box,
6908 6432 i.frm-show-inline-modal,
6909 6433 .frm-with-left-icon i,
6910 -.frm-with-right-icon i:not([class*=mce-]),
6434 +.frm-with-right-icon i,
6911 6435 .frmsvg.frm-show-box,
6912 6436 .frmsvg.frm-show-inline-modal,
6913 6437 .frm-with-left-icon .frmsvg,
6914 6438 .frm-with-right-icon .frmsvg,
@@ -6914,17 +6438,18 @@
6914 6438 .frm-with-right-icon .frmsvg,
6915 6439 .frm-search > .frmsvg,
6916 6440 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6917 6441 position: absolute;
6918 - padding: 0 14px;
6442 + padding: 7px 10px;
6919 6443 pointer-events: none;
6920 6444 left: 0;
6921 - color: var(--grey-400);
6922 - font-size: var(--text-xs);
6445 + color: var(--grey);
6446 + opacity: .5;
6447 + font-size: 18px;
6923 6448 }
6924 6449
6925 6450 .frm-with-right-icon .frmsvg,
6926 -.frm-with-right-icon i:not([class*=mce-]) {
6451 +.frm-with-right-icon i {
6927 6452 right: 0;
6928 6453 top: -3px;
6929 6454 left: auto;
6930 6455 padding: 0 10px 0 5px;
@@ -6929,35 +6454,20 @@
6929 6454 left: auto;
6930 6455 padding: 0 10px 0 5px;
6931 6456 }
6932 6457
6933 -.frm_form_settings .frm-with-right-icon .frmsvg {
6934 - top: 0;
6935 -}
6936 -
6937 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
6938 - top: auto;
6939 - bottom: 0;
6940 -}
6941 -
6942 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
6943 - top: auto;
6944 - bottom: 6px;
6945 -}
6946 -
6947 6458 .frmsvg.frm-show-box,
6948 6459 .frmsvg.frm-show-inline-modal,
6949 6460 i.frm-show-box,
6950 6461 i.frm-show-inline-modal {
6951 - color: var(--primary-500);
6462 + color: var(--primary-color);
6952 6463 pointer-events: initial;
6953 6464 cursor: pointer;
6954 6465 z-index: 1;
6955 6466 opacity: 1;
6467 + right: 2px;
6956 6468 top: auto;
6957 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
6958 - margin-bottom: 0;
6959 - padding: 0;
6469 + padding: 7px 10px;
6960 6470 }
6961 6471
6962 6472 .frm-open .frmsvg.frm-show-inline-modal,
6963 6473 .frm-open i.frm-show-inline-modal {
@@ -6980,9 +6490,9 @@
6980 6490
6981 6491 .frm_wrap .frm-with-right-icon textarea,
6982 6492 .frm_wrap .frm-with-right-icon input,
6983 6493 .frm_wrap .frm-with-right-icon input[type=text] {
6984 - padding-right: var(--gap-md);
6494 + padding-right: 35px;
6985 6495 }
6986 6496
6987 6497 #frm-show-fields .frm-with-left-icon .frmsvg,
6988 6498 #frm-show-fields .frm-with-left-icon i {
@@ -6988,29 +6498,43 @@
6988 6498 #frm-show-fields .frm-with-left-icon i {
6989 6499 padding-top: 10px;
6990 6500 }
6991 6501
6502 +.frm-search input.frm-search-input,
6992 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 +
6993 6514 .frm-search .dropdown-toggle,
6994 6515 .frm-search input.frm-search-input {
6995 - border-radius: var(--small-radius);
6516 + border-radius: var(--border-radius);
6996 6517 padding-left: 33px !important;
6997 - border-color: var(--grey-300);
6998 6518 }
6999 6519
7000 -.frm_wrap .frm-search .frm-search-input,
7001 -.frm-modal .frm-search .frm-search-input,
7002 -.frm-white-body .search-box input[name="s"], /* Views search */
7003 -.frm_wrap .frm-search input[name="s"] {
7004 - padding-top: 3px;
7005 - padding-bottom: 3px;
7006 - flex: 1;
7007 - 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;
7008 6526 }
7009 6527
7010 -.frm-search .dropdown-toggle {
6528 +.frm-search .dropdown-toggle,
6529 +.frm-search input.frm-auto-search {
7011 6530 width: 100%;
6531 + border-right-width: 1px;
6532 + border-radius: var(--border-radius) !important;
7012 6533 float: none;
6534 +}
6535 +
6536 +.frm-search .dropdown-toggle {
7013 6537 max-width: 200px;
7014 6538 background: transparent;
7015 6539 padding: 7px;
7016 6540 min-height: 32px;
@@ -7018,18 +6542,22 @@
7018 6542 overflow: hidden;
7019 6543 text-overflow: ellipsis;
7020 6544 }
7021 6545
7022 -span.multiselect-selected-text {
6546 +.frm-search span.multiselect-selected-text {
7023 6547 white-space: nowrap;
7024 - display: inline-block;
7025 - max-width: 90%;
7026 - text-overflow: ellipsis;
7027 - overflow: hidden;
6548 + display: inline-block;
7028 6549 }
7029 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 +
7030 6558 .frm-search #search-submit a {
7031 - color: var(--grey-800);
6559 + color: var(--primary-color);
7032 6560 }
7033 6561
7034 6562 .frm-search #search-submit .caret {
7035 6563 opacity:.7;
@@ -7035,15 +6563,15 @@
7035 6563 opacity:.7;
7036 6564 }
7037 6565
7038 6566 .frm-not-set input {
7039 - color: var(--primary-500) !important;
6567 + color: var(--primary-color) !important;
7040 6568 font-size: 13px;
7041 6569 }
7042 6570
7043 6571 .frm-not-set .frmsvg,
7044 6572 .frm-not-set i {
7045 - color: var(--primary-700);
6573 + color: var(--primary-hover);
7046 6574 opacity: 1;
7047 6575 }
7048 6576
7049 6577 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7111,9 +6639,9 @@
7111 6639
7112 6640 .post-type-frm_display #advanced-sortables h2.hndle,
7113 6641 .post-type-frm_display #side-sortables h2.hndle,
7114 6642 .post-type-frm_display #normal-sortables h2.hndle {
7115 - border-bottom: 1px solid var(--grey-300);
6643 + border-bottom: 1px solid var(--grey-border);
7116 6644 margin: 10px 0 0 !important;
7117 6645 padding: 0 25px 8px;
7118 6646 }
7119 6647
@@ -7122,9 +6650,9 @@
7122 6650 padding-top: 10px;
7123 6651 }
7124 6652
7125 6653 .post-type-frm_display #post-body-content {
7126 - margin-top: var(--gap-lg);
6654 + margin-top: 30px;
7127 6655 }
7128 6656
7129 6657 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7130 6658 margin: 0;
@@ -7131,15 +6659,15 @@
7131 6659 }
7132 6660
7133 6661 .post-type-frm_display .postbox .hndle,
7134 6662 .post-type-frm_display .postbox {
7135 - border-color: var(--grey-300);
6663 + border-color: var(--grey-border);
7136 6664 }
7137 6665
7138 6666 .post-type-frm_display #postbox-container-1 .postbox,
7139 6667 .post-type-frm_display #postbox-container-2 .postbox {
7140 6668 border-radius: var(--small-radius);
7141 - border-color: var(--grey-300);
6669 + border-color: var(--grey-border);
7142 6670 box-shadow: none;
7143 6671 }
7144 6672
7145 6673 .post-type-frm_display #side-sortables .postbox {
@@ -7218,9 +6746,9 @@
7218 6746 background-color: transparent;
7219 6747 }
7220 6748
7221 6749 .post-type-frm_display #major-publishing-actions {
7222 - border-color: var(--grey-300);
6750 + border-color: var(--grey-border);
7223 6751 background: var(--sidebar-color);
7224 6752 }
7225 6753
7226 6754 .post-type-frm_display #frm_adv_info {
@@ -7274,9 +6802,9 @@
7274 6802 .settings-lite-cta ul,
7275 6803 .settings-lite-cta p,
7276 6804 .settings-lite-cta {
7277 6805 color: #666;
7278 - font-size: var(--text-md);
6806 + font-size: 16px;
7279 6807 box-shadow: none !important;
7280 6808 }
7281 6809
7282 6810 .frm-info-modal h3,
@@ -7290,9 +6818,8 @@
7290 6818
7291 6819 .frm-info-modal .postbox .inside,
7292 6820 .settings-lite-cta .postbox .inside {
7293 6821 padding: 20px 40px;
7294 - margin: 0;
7295 6822 }
7296 6823
7297 6824 .cta-inside a {
7298 6825 color: var(--orange)
@@ -7298,15 +6825,21 @@
7298 6825 color: var(--orange)
7299 6826 }
7300 6827
7301 6828 .info-modal-inside a.frm-standard-link {
7302 - color: var(--primary-500);
6829 + color: var(--primary-color);
7303 6830 }
7304 6831
7305 6832 .info-modal-inside a.frm-standard-link:hover {
7306 - color: var(--primary-700);
6833 + color: var(--primary-hover);
7307 6834 }
7308 6835
6836 +.frm-caution {
6837 + text-transform: uppercase;
6838 + font-weight: bold;
6839 + color: var(--dark-grey);
6840 +}
6841 +
7309 6842 .frm_no_p_margin > p {
7310 6843 margin: 0;
7311 6844 }
7312 6845
@@ -7316,12 +6849,14 @@
7316 6849 font-size: 11px;
7317 6850 overflow: hidden;
7318 6851 }
7319 6852
6853 +.frm_code_list.frm-full-hover {
6854 + margin: 0 -20px;
6855 +}
6856 +
7320 6857 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7321 - margin: var(--gap-xs) 0 0;
7322 - min-width: 300px;
7323 - max-height: calc( ( 40px * 5 ) + 56px );
6858 + margin: 4px 0 0;
7324 6859 }
7325 6860
7326 6861 .frm_code_list.frm-full-hover li {
7327 6862 margin: 0;
@@ -7326,28 +6861,55 @@
7326 6861 .frm_code_list.frm-full-hover li {
7327 6862 margin: 0;
7328 6863 }
7329 6864
7330 -.frm-select-list-item,
7331 -.frm_wrap .ui-autocomplete li > div,
7332 -.multiselect-container button.multiselect-option,
7333 6865 .frm-dropdown-menu > .dropdown-item > a,
7334 -.frm-dropdown-menu > .dropdown-item > a:visited,
7335 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7336 6866 .frm-dropdown-menu .frm_dropdown_li,
7337 6867 .frm_code_list.frm-full-hover a {
7338 - display: flex;
7339 - color: var(--grey-700);
7340 - padding: 5px 10px;
7341 - font-size: var(--text-md);
7342 - gap: var(--gap-xs);
7343 - align-items: center;
6868 + display: block;
6869 + color: var(--dark-grey);
6870 + padding: 3px 25px;
6871 + font-size: 15px;
7344 6872 }
7345 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 +
7346 6906 .frm_code_list.frm-full-hover a span {
6907 + color: var(--grey);
6908 + float: right;
6909 + font-size: 14px;
7347 6910 max-width: 83px;
7348 6911 text-align: right;
7349 - margin-left: auto;
7350 6912 }
7351 6913
7352 6914 .frm_code_list.frm-full-hover a,
7353 6915 .frm_code_list.frm-full-hover a span {
@@ -7355,54 +6917,24 @@
7355 6917 overflow: hidden;
7356 6918 text-overflow: ellipsis;
7357 6919 }
7358 6920
7359 -.frm_code_list.frm-full-hover.frmcenter a {
7360 - display: block;
7361 -}
7362 -
7363 -#frm-layout-classes frm-full-hover a span {
7364 - max-width: 45%;
7365 -}
7366 -
7367 -.frm-select-list-item.active,
7368 -.frm-select-list-item:hover,
7369 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7370 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7371 -.multiselect-container button.multiselect-option.active,
7372 -.multiselect-container button.multiselect-option:hover,
7373 6921 .frm-dropdown-menu > .dropdown-item > a:hover,
7374 6922 .frm_code_list.frm-full-hover a:hover span,
7375 6923 .frm_code_list.frm-full-hover a:hover {
7376 - background: var(--primary-25);
7377 - color: var(--primary-500);
7378 - border-radius: var(--small-radius);
6924 + background: var(--sidebar-color);
6925 + color: var(--primary-color);
7379 6926 }
7380 6927
7381 -.frm-select-list-item .frmsvg,
7382 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7383 - opacity: .8;
7384 -}
7385 -
7386 -.frm-select-list-item:hover .frmsvg,
7387 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7388 - opacity: 1;
7389 -}
7390 -
7391 6928 .frm-dropdown-menu.frm_code_list > li > a {
7392 6929 padding: 3px 15px;
7393 6930 width: 300px;
7394 6931 }
7395 6932
7396 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7397 -.frm-dropdown-menu .frm-with-search {
7398 - padding: var(--gap-xs) 10px 0;
6933 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6934 + padding: 3px 10px;
7399 6935 }
7400 6936
7401 -.frm-dropdown-menu .subsubsub {
7402 - padding: 0 10px;
7403 -}
7404 -
7405 6937 .frm_grid_container {
7406 6938 overflow: visible;
7407 6939 }
7408 6940
@@ -7418,16 +6950,16 @@
7418 6950 .frm_code_list.frm_grid_container a {
7419 6951 padding: 5px 0;
7420 6952 text-align: center;
7421 6953 background-color: var(--light-blue);
7422 - border: 1px solid var(--primary-500);
7423 - color: var(--primary-500);
6954 + border: 1px solid var(--primary-color);
6955 + color: var(--primary-color);
7424 6956 display: block;
7425 6957 border-radius: var(--small-radius);
7426 6958 }
7427 6959
7428 6960 .frm_code_list.frm_grid_container a:hover {
7429 - background-color: var(--primary-700);
6961 + background-color: var(--primary-hover);
7430 6962 color: #fff;
7431 6963 }
7432 6964
7433 6965 .frm_field_list #frm-insert-fields .button a {
@@ -7435,15 +6967,10 @@
7435 6967 max-width: 95%;
7436 6968 overflow: hidden;
7437 6969 }
7438 6970
7439 -.field_type_list.frm_grid_container {
7440 - gap: var(--gap-xs) var(--gap-sm);
7441 - margin: var(--gap-xs);
7442 -}
7443 -
7444 6971 .field_type_list li {
7445 - margin: 0;
6972 + margin: 0 0 10px;
7446 6973 padding: 0;
7447 6974 }
7448 6975
7449 6976 #frm-insert-fields .frm-search {
@@ -7455,13 +6982,22 @@
7455 6982 #frm-insert-fields li,
7456 6983 #frm-insert-fields li a {
7457 6984 text-decoration: none;
7458 6985 font-weight: normal;
7459 - font-size: var(--text-md) !important;
7460 - color: var(--grey-900);
6986 + font-size: 15px !important;
6987 + color: var(--dark-grey);
7461 6988 }
7462 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 +
7463 6996 #frm-insert-fields li.frm_show_upgrade {
6997 + margin: 0 0 10px;
6998 + padding: 5px 20px;
6999 + box-sizing: border-box;
7464 7000 cursor: pointer;
7465 7001 opacity: .5;
7466 7002 }
7467 7003
@@ -7468,11 +7004,14 @@
7468 7004 #frm-insert-fields li a span {
7469 7005 vertical-align: middle;
7470 7006 }
7471 7007
7472 -.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 +
7473 7012 #frm-insert-fields li a:not(.disabled):hover {
7474 - background: var(--grey-100);
7013 + background: var(--sidebar-hover);
7475 7014 }
7476 7015
7477 7016 #frm-insert-fields li a.disabled:hover {
7478 7017 cursor: not-allowed;
@@ -7494,9 +7033,9 @@
7494 7033 .frmsvg {
7495 7034 fill: currentColor;
7496 7035 width: 18px;
7497 7036 height: 18px;
7498 - vertical-align: middle;
7037 + vertical-align: text-bottom;
7499 7038 }
7500 7039
7501 7040 input[disabled],
7502 7041 .frmsvg svg {
@@ -7522,19 +7061,38 @@
7522 7061 width: 13px;
7523 7062 height: 13px;
7524 7063 }
7525 7064
7065 +.frm_code_list a .frmsvg,
7526 7066 .frmbutton.ui-sortable-helper .frmsvg,
7527 7067 .field_type_list li.frmbutton .frmsvg,
7068 +.frm_code_list a i,
7528 7069 .frmbutton.ui-sortable-helper i,
7529 -.field_type_list li.frmbutton i,
7070 +.field_type_list li.frmbutton i {
7071 + margin: .15em .2em;
7072 + color: var(--grey);
7073 + display: inline-block;
7074 + vertical-align: middle;
7075 + width: 20px;
7076 + height: 20px;
7077 + padding-right: 15px;
7078 + text-align: left;
7079 + font-size: 18px;
7080 +}
7081 +
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;
7087 +}
7088 +
7530 7089 .frm_code_list a .frmsvg,
7531 7090 .frm_code_list a i {
7532 - color: var(--grey-500);
7533 - display: inline-block;
7534 - vertical-align: middle;
7535 - width: var(--text-md);
7536 - font-size: var(--text-md);
7091 + margin: 0 5px 0 0;
7092 + padding: 0;
7093 + width: 15px;
7094 + font-size: 15px;
7537 7095 }
7538 7096
7539 7097 .frm_code_list i:before {
7540 7098 font-size: inherit;
@@ -7541,31 +7099,40 @@
7541 7099 }
7542 7100
7543 7101 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7544 7102 #frm-insert-fields li a:not(.disabled):hover i {
7545 - color: var(--grey-600);
7103 + color: var(--dark-grey);
7546 7104 }
7547 7105
7106 +.frmbutton.ui-draggable-dragging {
7107 + width: auto !important;
7108 +}
7109 +
7548 7110 /* Icon while dragging */
7549 -.frmbutton.ui-draggable-dragging {
7550 - pointer-events: none;
7111 +.frmbutton.ui-draggable-dragging,
7112 +.frmbutton.ui-draggable-dragging a {
7113 + cursor: move;
7551 7114 }
7552 7115
7553 -#frm-insert-fields li.frm_show_upgrade,
7554 -#frm-insert-fields li a,
7116 +.frmbutton.ui-sortable-helper a,
7117 +.frmbutton.ui-draggable-dragging a:hover,
7555 7118 .frmbutton.ui-draggable-dragging a {
7556 7119 text-decoration: none;
7557 - display: inline-flex !important;
7558 - gap: var(--gap-xs);
7559 - align-items: center;
7560 - border-radius: var(--border-radius) !important;
7561 - padding: var(--gap-xs) var(--gap-sm) !important;
7562 - color: var(--grey-900) !important;
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;
7563 7128 }
7564 7129
7565 -.frmbutton.ui-draggable-dragging a {
7566 - border: 1px solid var(--grey-300);
7567 - box-shadow: var(--box-shadow-md);
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;
7568 7135 }
7569 7136
7570 7137 .frmbutton.ui-draggable-dragging span {
7571 7138 font-size: 15px;
@@ -7571,18 +7138,23 @@
7571 7138 font-size: 15px;
7572 7139 }
7573 7140
7574 7141 #frm-show-fields .frmbutton.ui-sortable-helper i,
7142 +.frmbutton.ui-sortable-helper span,
7575 7143 .frmbutton.ui-draggable-dragging i,
7576 7144 .frmbutton.ui-draggable-dragging .frmsvg {
7577 7145 color: #fff !important;
7578 7146 }
7579 7147
7580 -.frmbutton.ui-draggable-dragging i,
7581 -.frmbutton.ui-draggable-dragging .frmsvg {
7582 - 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;
7583 7151 }
7584 7152
7153 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7154 + display: none;
7155 +}
7156 +
7585 7157 .frm_sorting li.ui-state-default.ui-sortable-helper,
7586 7158 .frmbutton.ui-sortable-helper {
7587 7159 transition: opacity .2s;
7588 7160 opacity: 1;
@@ -7587,13 +7159,10 @@
7587 7159 transition: opacity .2s;
7588 7160 opacity: 1;
7589 7161 }
7590 7162
7591 -.frm-field-group-count {
7592 - background-color: var(--sidebar-hover);
7593 - padding: 5px;
7594 - color: #fff !important;
7595 - border-radius: 10px;
7163 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7164 + opacity: 0;
7596 7165 }
7597 7166
7598 7167 /* End dragging */
7599 7168
@@ -7619,64 +7188,13 @@
7619 7188 .frm_noallow a {
7620 7189 color: inherit;
7621 7190 }
7622 7191
7623 -#frm_upgrade_modal_image {
7624 - max-width: 200px;
7625 -}
7626 -
7627 -.frm-tab-message {
7628 - max-width: 600px;
7629 - margin: 20px auto;
7630 - color: rgba(63, 75, 91, 0.8);
7631 -}
7632 -
7633 -.frm-settings-screenshot-toolbar {
7634 - min-height: 39px;
7635 - display: flex;
7636 -}
7637 -
7638 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7639 - height: 8px;
7640 - width: 8px;
7641 - border-radius: 50%;
7642 - align-self: center;
7643 - margin-left: 10px;
7644 -}
7645 -
7646 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7647 - margin-left: 20px;
7648 -}
7649 -
7650 -.frm-settings-screenshot-toolbar img {
7651 - object-fit: contain;
7652 - align-self: flex-end;
7653 - margin-left: 25px;
7654 -}
7655 -
7656 -.frm-settings-screenshot-toolbar + div {
7657 - background: #fff;
7658 - padding-top: 25px;
7659 - border-radius: 0 0 16px 16px;
7660 -}
7661 -
7662 -.frm-settings-screenshot-toolbar + div img {
7663 - max-width: calc( 100% - 40px );
7664 -}
7665 -
7666 -.frm-settings-screenshot-wrapper {
7667 - max-width: 700px;
7668 - margin: 50px auto 0;
7669 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7670 - border-radius: 16px;
7671 - background: #EBECF1;
7672 -}
7673 -
7674 7192 .frm-dialog {
7675 7193 z-index: 100;
7676 7194 padding: 0 !important;
7677 - border-radius: 16px;
7678 - border: none;
7195 + border-radius: 10px;
7196 + border: 1px solid var(--grey);
7679 7197 background-color: #fff;
7680 7198 max-width: 100% !important;
7681 7199 }
7682 7200
@@ -7683,14 +7201,20 @@
7683 7201 .frm-dialog .postbox {
7684 7202 background: transparent;
7685 7203 box-shadow: none;
7686 7204 border: none;
7687 - line-height: var(--leading);
7688 7205 }
7689 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 +
7690 7214 .frm-dialog input[type=text],
7691 7215 .frm-dialog textarea {
7692 - font-size: var(--text-md);
7216 + font-size: 16px;
7693 7217 }
7694 7218
7695 7219 .frm-dialog textarea {
7696 7220 height: 75px;
@@ -7703,16 +7227,14 @@
7703 7227 .frm-dialog .frm-sub-label,
7704 7228 .frm-sub-label {
7705 7229 color: var(--grey);
7706 7230 text-transform: none;
7707 - padding-left: 8px;
7708 7231 }
7709 7232
7710 7233 h2 .frm-sub-label {
7711 - font-size: var(--text-md);
7234 + font-size: 16px;
7712 7235 }
7713 7236
7714 -.frm-views-editor-body .ui-widget-overlay,
7715 7237 .frm-white-body .ui-widget-overlay,
7716 7238 .toplevel_page_formidable .ui-widget-overlay {
7717 7239 position: fixed;
7718 7240 width: 100%;
@@ -7720,10 +7242,9 @@
7720 7242 top: 0;
7721 7243 left: 0;
7722 7244 right: 0;
7723 7245 bottom: 0;
7724 - background: var(--grey-500);
7725 - opacity: .5;
7246 + background: var(--grey-border);
7726 7247 z-index: 2;
7727 7248 }
7728 7249
7729 7250 #frm_upgrade_modal {
@@ -7738,15 +7259,15 @@
7738 7259 color: #c4c4c4;
7739 7260 padding-bottom: 20px;
7740 7261 }
7741 7262
7742 -.frm-upgrade-message img {
7263 +#frm-upgrade-message img {
7743 7264 max-width: 100%;
7744 7265 }
7745 7266
7746 7267 a.frm-link-secondary {
7747 7268 color: #c4c4c4;
7748 - font-size: var(--text-sm);
7269 + font-size: 14px;
7749 7270 text-decoration: underline;
7750 7271 }
7751 7272
7752 7273 .field_type_list li.button.frm_noallow,
@@ -7789,9 +7310,8 @@
7789 7310 opacity: 0;
7790 7311
7791 7312 /* Custom rules */
7792 7313 z-index: 9999999;
7793 - pointer-events: none;
7794 7314 }
7795 7315
7796 7316 .tooltip.show {
7797 7317 opacity: 0.9;
@@ -7951,25 +7471,93 @@
7951 7471 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
7952 7472 padding: 10px 40px;
7953 7473 border-top-color: #ccc;
7954 7474 background: var(--sidebar-color);
7955 - color: var(--grey-700);
7475 + color: var(--dark-grey);
7956 7476 border-radius: 0;
7957 7477 opacity: 1;
7958 - font-size: var(--text-sm);
7478 + font-size: 14px;
7959 7479 }
7960 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 +
7961 7494 #frm_custom_css_box {
7962 7495 width: 100%;
7963 7496 }
7964 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 +
7965 7554 /*form inputs/selects */
7966 7555 .frm_form_field.frm_scroll_box .frm_opt_container,
7967 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
7968 -.frm-white-body .wrap input[type="search"],
7969 -.frm-white-body .wrap input[type="number"],
7970 -.frm-white-body .wrap select,
7971 -.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,
7972 7560 button.frm_choose_image_box,
7973 7561 #titlediv input[type="text"],
7974 7562 .frm-fields button.btn,
7975 7563 .frm_wrap textarea,
@@ -7974,11 +7562,9 @@
7974 7562 .frm-fields button.btn,
7975 7563 .frm_wrap textarea,
7976 7564 .frm_wrap input[type="tel"],
7977 7565 .frm_wrap input[type="text"],
7978 -.frm_wrap input[type=search],
7979 7566 .frm_wrap input[type="number"],
7980 -.frm_wrap input[type="date"],
7981 7567 .frm_wrap select,
7982 7568 .wp-admin .frm_wrap select,
7983 7569 .field-group textarea,
7984 7570 .field-group input[type="text"],
@@ -7985,33 +7571,17 @@
7985 7571 .field-group select {
7986 7572 outline: 0;
7987 7573 box-shadow: none;
7988 7574 border-radius: var(--small-radius);
7989 - padding: 5px 14px;
7990 - border-color: var(--grey-300);
7991 - color: var(--grey-800);
7992 - font-size: var(--text-md);
7575 + padding: 6px 9px;
7576 + border-color: var(--grey-border);
7577 + color: var(--dark-grey);
7578 + font-size: 15px;
7993 7579 margin: 0;
7994 7580 background-color: #fff;
7995 - line-height: var(--leading);
7581 + line-height: 1;
7996 7582 }
7997 7583
7998 -.frm_wrap ::-webkit-datetime-edit {
7999 - line-height: var(--leading);
8000 -}
8001 -
8002 -.frm-white-body textarea:focus,
8003 -.frm-white-body input:focus,
8004 -.frm-white-body select:focus,
8005 -.frm_wrap input:focus,
8006 -.frm_wrap select:focus,
8007 -.wp-core-ui .frm_wrap select:focus,
8008 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8009 -.frm_wrap textarea:focus {
8010 - border-color: var(--primary-500) !important;
8011 - box-shadow: none !important;
8012 -}
8013 -
8014 7584 #postbox-container-2 textarea,
8015 7585 .frm_wrap textarea,
8016 7586 .field-group textarea {
8017 7587 line-height: 2;
@@ -8028,12 +7598,19 @@
8028 7598 .wp-admin .frm_wrap select {
8029 7599 max-width: 100%;
8030 7600 }
8031 7601
8032 -.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"] {
8033 7606 padding: 10px 12px;
8034 7607 }
8035 7608
7609 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7610 + padding: 6px 9px;
7611 +}
7612 +
8036 7613 .frm_wrap input[disabled],
8037 7614 .frm_wrap select[disabled],
8038 7615 .frm_wrap textarea[disabled],
8039 7616 .frm_wrap input[readonly],
@@ -8039,23 +7616,37 @@
8039 7616 .frm_wrap input[readonly],
8040 7617 .frm_wrap select[readonly],
8041 7618 .frm_wrap textarea[readonly],
8042 7619 .frm_wrap input::placeholder {
8043 - color: var(--grey-500);
7620 + color: var(--grey);
8044 7621 }
8045 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 +
8046 7633 #postcustomstuff table td > div {
8047 7634 /* To override some inline css in add-on */
8048 7635 padding-top: 0 !important;
8049 7636 }
8050 7637
8051 -.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;
8052 7643 vertical-align: top;
8053 7644 }
8054 7645
8055 7646 .frm_wrap .frm_form_builder select {
8056 - line-height: var(--leading);
8057 - height: var(--text-md);
7647 + line-height: 40px;
7648 + height: 40px;
8058 7649 width: 100%;
8059 7650 }
8060 7651
8061 7652 #postbox-container-2 select,
@@ -8061,25 +7652,11 @@
8061 7652 #postbox-container-2 select,
8062 7653 .wp-admin .frm_wrap select,
8063 7654 .frm_wrap .frm_form_builder select {
8064 7655 height: auto;
8065 - background-position: right 11px top 55%;
7656 + padding: 0 24px 0 12px;
8066 7657 }
8067 7658
8068 -.frm-white-body .tablenav select,
8069 -.frm-white-body .tablenav input[type="text"],
8070 -.wp-admin .frm_wrap .tablenav select,
8071 -.frm_wrap .tablenav input[type="date"],
8072 -.frm_wrap .tablenav input[type="text"] {
8073 - padding-top: 0;
8074 - padding-bottom: 0;
8075 - line-height: 1;
8076 -}
8077 -
8078 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8079 - line-height: 1;
8080 -}
8081 -
8082 7659 .frm-fields button.btn,
8083 7660 .frm-fields textarea,
8084 7661 .frm-fields input[type="text"],
8085 7662 .frm-fields select,
@@ -8091,9 +7668,10 @@
8091 7668 outline: 0;
8092 7669 }
8093 7670
8094 7671 .frm-fields button.btn {
8095 - height: var(--h-md);
7672 + line-height: normal;
7673 + height: auto;
8096 7674 text-align: inherit;
8097 7675 }
8098 7676
8099 7677 .global-font .field-group input[type="text"] {
@@ -8134,9 +7712,9 @@
8134 7712 }
8135 7713
8136 7714 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8137 7715 background: #fff !important;
8138 - border-color: var(--primary-500);
7716 + border-color: var(--primary-color);
8139 7717 }
8140 7718
8141 7719 .frm_images_dropdown .frm_text_label_for_image {
8142 7720 padding: 0;
@@ -8164,9 +7742,9 @@
8164 7742 }
8165 7743
8166 7744 .windows::-webkit-scrollbar-thumb,
8167 7745 .windows ::-webkit-scrollbar-thumb {
8168 - background: var(--grey-300);
7746 + background: var(--grey-border);
8169 7747 -webkit-border-radius: var(--border-radius);
8170 7748 -webkit-box-shadow: none;
8171 7749 }
8172 7750
@@ -8188,9 +7766,8 @@
8188 7766 .rtl #frm_top_bar #frm_bs_dropdown {
8189 7767 padding-left: 15px;
8190 7768 }
8191 7769
8192 -.rtl .frm-full-close,
8193 7770 .rtl .frm_wrap .columns-2 .frm-right-panel,
8194 7771 .rtl .frm-right-panel {
8195 7772 border-right-width: 1px;
8196 7773 border-left-width: 0;
@@ -8195,14 +7772,9 @@
8195 7772 border-right-width: 1px;
8196 7773 border-left-width: 0;
8197 7774 }
8198 7775
8199 -.rtl .frm-full-close {
8200 - padding-left: 0;
8201 - padding-right: var(--gap-md);
8202 -}
8203 -
8204 -.rtl .frm-text-right {
7776 +.rtl .frm_right_text {
8205 7777 text-align: left;
8206 7778 }
8207 7779
8208 7780 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8247,39 +7819,22 @@
8247 7819 right: unset;
8248 7820 left: 2px;
8249 7821 }
8250 7822
7823 +.rtl #frm_upgrade_modal .dismiss i,
7824 +.rtl .frm-inline-modal i,
7825 +.rtl #frm-bulk-modal i,
8251 7826 .rtl .frm_has_shortcodes > i {
8252 7827 right: auto;
8253 7828 left: 5px;
8254 7829 }
8255 7830
7831 +.rtl .frm_code_list.frm-full-hover a span,
8256 7832 .rtl .frm_reply_to_container,
8257 7833 .rtl .frm_bcc_cc_container {
8258 7834 float: left;
8259 7835 }
8260 7836
8261 -.rtl .frm-default-switcher {
8262 - float: left;
8263 - position: relative;
8264 -}
8265 -
8266 -.rtl .frm-with-right-icon .frmsvg {
8267 - right: auto;
8268 - left: 0;
8269 -}
8270 -
8271 -.rtl .frm-inline-modal > a.dismiss {
8272 - left: 13px;
8273 - right: auto;
8274 -}
8275 -
8276 -.rtl.wp-admin .frm_wrap select {
8277 - padding-left: var(--gap-lg) !important;
8278 - padding-right: 5px !important;
8279 - background-position: left 11px top 55%;
8280 -}
8281 -
8282 7837 /* ---------------------------------------------------------------
8283 7838 Clearfix
8284 7839 --------------------------------------------------------------- */
8285 7840 span.clear {
@@ -8321,12 +7876,15 @@
8321 7876 @media only screen and (max-width: 1200px) {
8322 7877 .frm-addons {
8323 7878 grid-template-columns: 1fr 1fr;
8324 7879 }
7880 +
7881 + ul.frm_form_nav > li {
7882 + margin-right: 2.5%;
7883 + }
8325 7884 }
8326 7885
8327 7886 @media only screen and (max-width: 1050px) {
8328 - .frm-white-body,
8329 7887 .frm_wrap {
8330 7888 --biggest-sidebar: 390px;
8331 7889 }
8332 7890
@@ -8336,18 +7894,15 @@
8336 7894
8337 7895 .frm_actions_list {
8338 7896 margin-left: 0;
8339 7897 }
7898 +
7899 + ul.frm_form_nav > li {
7900 + margin-right: 1.5%;
7901 + }
8340 7902 }
8341 7903
8342 7904 @media only screen and (max-width: 960px) {
8343 - .frm-white-body,
8344 - .frm_wrap {
8345 - --gap-sm: 8px;
8346 - --gap-md: 16px;
8347 - --gap-2xl: 24px;
8348 - }
8349 -
8350 7905 .auto-fold #adminmenuwrap {
8351 7906 width: 36px;
8352 7907 }
8353 7908
@@ -8358,27 +7913,36 @@
8358 7913 p.howto {
8359 7914 display: inline-block;
8360 7915 }
8361 7916
7917 + ul.frm_form_nav {
7918 + clear: left;
7919 + padding-top: 0;
7920 + }
7921 +
7922 + ul.frm_form_nav > li {
7923 + margin-right: 3.5%;
7924 + }
7925 +
7926 + .frm-full-screen #frm_top_bar {
7927 + padding: 0 10px !important;
7928 + }
7929 +
7930 + .frm-full-close {
7931 + padding: 15px 0 10px 10px;
7932 + }
7933 +
7934 + .frm-full-close .frmsvg {
7935 + padding: 0;
7936 + }
8362 7937 }
8363 7938
8364 7939 @media only screen and (max-width: 850px) {
8365 - #frm_bs_dropdown {
8366 - /* There isn't enough room for the title on a screen this size so just hide it. */
8367 - display: none;
8368 - }
8369 -
8370 - .frm-white-body,
8371 7940 .frm_wrap {
8372 7941 --biggest-sidebar: 350px;
8373 7942 --big-sidebar: 350px;
8374 7943 }
8375 7944
8376 - #frm_bs_dropdown .frm_bstooltip {
8377 - /* There isn't enough room for the title on a screen this size so just hide it. */
8378 - display: none !important;
8379 - }
8380 -
8381 7945 .frm_col_one {
8382 7946 clear: none;
8383 7947 }
8384 7948
@@ -8387,9 +7951,10 @@
8387 7951 display: block;
8388 7952 margin: 5px 0;
8389 7953 }
8390 7954
8391 - #frm_top_bar h1 {
7955 + .post-type-frm_display #frm_top_bar h1,
7956 + .frm_page_container #frm_top_bar h1 {
8392 7957 width: auto;
8393 7958 max-width: 200px;
8394 7959 }
8395 7960
@@ -8459,9 +8024,8 @@
8459 8024 }
8460 8025 }
8461 8026
8462 8027 @media only screen and (max-width: 782px) {
8463 - .frm-white-body,
8464 8028 .frm_wrap {
8465 8029 --small-sidebar: 20%;
8466 8030 --medium-sidebar: 35%
8467 8031 }
@@ -8475,9 +8039,9 @@
8475 8039 .frm_wrap #publishing-action {
8476 8040 line-height: normal;
8477 8041 }
8478 8042
8479 - .frm-white-body #screen-meta-links {
8043 + .frm-full-screen #screen-meta-links {
8480 8044 display: none;
8481 8045 }
8482 8046
8483 8047 .frm_wrap .misc-pub-section {
@@ -8536,13 +8100,8 @@
8536 8100 .with_frm_style .frm_checkbox input[type=checkbox] {
8537 8101 width: 25px !important;
8538 8102 }
8539 8103
8540 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8541 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8542 - width: 18px !important;
8543 - }
8544 -
8545 8104 .wp-list-table.toplevel_page_formidable .column-entries,
8546 8105 .wp-list-table.toplevel_page_formidable .column-form_key,
8547 8106 .wp-list-table.toplevel_page_formidable .column-shortcode,
8548 8107 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8556,13 +8115,27 @@
8556 8115 padding: 3px 8px 3px 35%;
8557 8116 text-align: left;
8558 8117 }
8559 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 +
8560 8129 #form_entries_page .wp-list-table th.frm_hidden,
8561 8130 #form_entries_page .wp-list-table td.frm_hidden {
8562 8131 display: none !important;
8563 8132 }
8564 8133
8134 + ul.frm_form_nav > li {
8135 + margin-right: 15px;
8136 + }
8137 +
8565 8138 .frm-white-body.auto-fold #wpcontent {
8566 8139 padding-left: 0;
8567 8140 }
8568 8141
@@ -8573,13 +8146,11 @@
8573 8146 .frm-addons {
8574 8147 grid-template-columns: 1fr;
8575 8148 }
8576 8149
8577 - .frm-admin-page-styles .frm_page_container,
8578 - .frm_wrap .frm_page_container {
8579 - left: 0 !important;
8580 - top: 46px !important;
8581 - height: calc( 100vh - 46px ) !important;
8150 + .frm_single_entry_page.frm_wrap .frm_page_container {
8151 + height: auto;
8152 + display: block;
8582 8153 }
8583 8154
8584 8155 .frm_single_entry_page.frm_wrap .columns-2 {
8585 8156 display: block;
@@ -8597,14 +8168,13 @@
8597 8168 border-radius: 6px;
8598 8169 }
8599 8170
8600 8171 #wp-content-media-buttons a.frm_insert_form {
8601 - padding: 0 var(--gap-sm);
8172 + padding: 0 15px;
8602 8173 }
8603 8174 }
8604 8175
8605 8176 @media only screen and (max-width: 700px) {
8606 - .frm-white-body,
8607 8177 .frm_wrap {
8608 8178 --biggest-sidebar: 50%;
8609 8179 --big-sidebar: 50%;
8610 8180 }
@@ -8610,9 +8180,8 @@
8610 8180 }
8611 8181 }
8612 8182
8613 8183 @media only screen and (max-width: 600px) {
8614 - .frm-white-body,
8615 8184 .frm_wrap {
8616 8185 --small-sidebar: 45px;
8617 8186 }
8618 8187
@@ -8618,9 +8187,9 @@
8618 8187
8619 8188 .frm-form-setting-tabs a {
8620 8189 visibility: collapse;
8621 8190 font-size: 0;
8622 - padding: 0 var(--gap-sm);
8191 + padding: 0 15px;
8623 8192 }
8624 8193
8625 8194 .frm-form-setting-tabs a .frmsvg,
8626 8195 .frm-form-setting-tabs a i {
@@ -8692,12 +8261,8 @@
8692 8261 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8693 8262 right: auto;
8694 8263 left: 0;
8695 8264 }
8696 -
8697 - .frm_on_submit_type svg {
8698 - display: none;
8699 - }
8700 8265 }
8701 8266
8702 8267 @media only screen and (max-width: 475px) {
8703 8268 #frm_bs_dropdown {
@@ -8713,18 +8278,8 @@
8713 8278 margin-right: 0;
8714 8279 }
8715 8280 }
8716 8281
8717 -/* Firefox */
8718 -@-moz-document url-prefix() {
8719 - .frm-white-body .tablenav select,
8720 - .frm-white-body .tablenav input[type="text"],
8721 - .wp-admin .frm_wrap .tablenav select,
8722 - .frm_wrap .tablenav input[type="text"] {
8723 - padding-top: 5px;
8724 - }
8725 -}
8726 -
8727 8282 /* PRINT */
8728 8283 @media print {
8729 8284 a, .misc-pub-section a {
8730 8285 color: #000 !important;
@@ -8775,9 +8330,9 @@
8775 8330 display: block;
8776 8331 padding: 20px;
8777 8332 }
8778 8333
8779 - .frm_wrap .columns-2,
8334 + .frm_page_container .columns-2,
8780 8335 .frm_wrap .frm_page_container {
8781 8336 height: auto;
8782 8337 display: block;
8783 8338 }
@@ -8814,10 +8369,9 @@
8814 8369 width: 100%;
8815 8370 }
8816 8371 }
8817 8372
8818 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8819 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8373 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8820 8374 display: inline-block;
8821 8375 }
8822 8376
8823 8377 /* Change the order of subfields of the Name field in the backend */
@@ -8824,12 +8378,16 @@
8824 8378 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8825 8379 order: 2;
8826 8380 }
8827 8381
8382 +.frm-video-wrapper {
8383 + padding: 0 20px;
8384 +}
8385 +
8828 8386 .frm-video-wrapper iframe {
8829 8387 width: 100%;
8830 8388 max-width: 843px;
8831 - border-radius: var(--border-radius);
8389 + border-radius: 10px;
8832 8390 }
8833 8391
8834 8392 #frm_field_group_popup {
8835 8393 position: absolute;
@@ -8892,9 +8450,9 @@
8892 8450 }
8893 8451
8894 8452 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8895 8453 #frm_field_group_popup .frm-row-layout-option:hover {
8896 - outline: 1px solid var(--primary-500);
8454 + outline: 1px solid var(--primary-color);
8897 8455 }
8898 8456
8899 8457 .frm-custom-field-group-layout,
8900 8458 .frm-break-field-group {
@@ -8899,9 +8457,9 @@
8899 8457 .frm-custom-field-group-layout,
8900 8458 .frm-break-field-group {
8901 8459 padding: 5px 15px;
8902 8460 cursor: pointer;
8903 - font-size: var(--text-sm);
8461 + font-size: 14px;
8904 8462 line-height: 19px;
8905 8463 color: rgba(40, 47, 54, 0.85);
8906 8464 }
8907 8465
@@ -8973,17 +8531,22 @@
8973 8531 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
8974 8532 pointer-events: none;
8975 8533 }
8976 8534
8977 -.frm-sortable-helper {
8978 - /* Make sure the item being dragged appears above other form builder fields */
8979 - 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;
8980 8543 }
8981 8544
8982 8545 #frm_banner {
8983 8546 width: 100%;
8984 8547 color: #fff;
8985 - background: var(--primary-500);
8548 + background: var(--primary-color);
8986 8549 height: 40px;
8987 8550 line-height: 40px;
8988 8551 text-align: center;
8989 8552 position: relative;
@@ -9013,89 +8576,4 @@
9013 8576
9014 8577 .frm-banner-dismiss .frmsvg {
9015 8578 vertical-align: top;
9016 8579 }
9017 -
9018 -.frm-ready-made-solution:not(.frm-search-result) {
9019 - display: none !important;
9020 -}
9021 -
9022 -#frm_new_form_modal .frm-ready-made-solution {
9023 - padding: var(--gap-xs) !important;
9024 - margin: var(--gap-xs) 0 var(--gap-sm);
9025 - display: flex;
9026 - gap: var(--gap-sm);
9027 - position: relative;
9028 - overflow: visible !important;
9029 -}
9030 -
9031 -#frm_new_form_modal .frm-ready-made-solution:after {
9032 - width: 100%;
9033 - height: 1px;
9034 - background: var(--grey-300);
9035 - content: '';
9036 - position: absolute;
9037 - bottom: -10px;
9038 - left: 0;
9039 -}
9040 -
9041 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9042 - content: none;
9043 -}
9044 -
9045 -#frm_new_form_modal .frm-solution-details {
9046 - flex: 1;
9047 - display: flex;
9048 - gap: var(--gap-2xs);
9049 - flex-direction: column;
9050 -}
9051 -
9052 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9053 - width: 30%;
9054 - text-align: center;
9055 -}
9056 -
9057 -.frm-ready-made-solution h3 ~ a {
9058 - color: var(--primary-500);
9059 -}
9060 -
9061 -.frm-ready-made-solution img {
9062 - max-width: 100%;
9063 - display: block;
9064 - box-shadow: var(--box-shadow-lg);
9065 -}
9066 -
9067 -/* On Submit action */
9068 -.frm_single_on_submit_settings .frm_form_field {
9069 - margin: 8px 0;
9070 -}
9071 -
9072 -.frm_on_submit_type_setting {
9073 - padding: 8px 0;
9074 -}
9075 -
9076 -.frm_on_submit_type label {
9077 - display: flex;
9078 - border: 1px solid var(--grey-border);
9079 - border-radius: var(--small-radius);
9080 - gap: 16px;
9081 - padding: 16px;
9082 - align-items: center;
9083 - justify-content: center;
9084 -}
9085 -
9086 -.frm_on_submit_type input {
9087 - opacity: 0 !important;
9088 - position: absolute;
9089 - z-index: -1;
9090 -}
9091 -
9092 -.frm_on_submit_type input[type="radio"]:checked + label {
9093 - border-color: var(--primary-color);
9094 - box-shadow: 0 0 0 1px var(--primary-color);
9095 -}
9096 -
9097 -#form_settings_page .frm_on_submit_type label:hover,
9098 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9099 - color: var(--primary-color);
9100 -}
9101 -/* End On Submit action */