PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.2.07
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.2.07
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 +1484 -2042 6.3.25.2.07 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,
@@ -1734,18 +1442,11 @@
1734 1442 color: inherit;
1735 1443 }
1736 1444
1737 1445 #frm_form_editor_container .divider_section_only .frm_primary_label {
1738 - display: flex;
1739 - align-items: center;
1740 - gap: var(--gap-xs);
1741 1446 font-size: 20px;
1742 1447 }
1743 1448
1744 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1745 - padding: 0;
1746 -}
1747 -
1748 1449 form .form-field.frm_field_loading {
1749 1450 margin-bottom: 0;
1750 1451 min-height: 0;
1751 1452 padding: 0;
@@ -1833,8 +1534,14 @@
1833 1534 max-width: 700px;
1834 1535 margin: 20px auto !important;
1835 1536 }
1836 1537
1538 +.upgrade_to_pro h1,
1539 +.upgrade_to_pro h3,
1540 +.upgrade_to_pro {
1541 + color: #444;
1542 +}
1543 +
1837 1544 .upgrade_to_pro .error {
1838 1545 display: none;
1839 1546 }
1840 1547
@@ -1844,19 +1551,19 @@
1844 1551 }
1845 1552
1846 1553 .frm_error_style,
1847 1554 .frm_warning_style,
1848 -.frm_note_style,
1849 1555 .frm_message,
1850 1556 #post-body-content .frm_updated_message,
1851 1557 div.frm_updated_message {
1852 - border-radius: var(--small-radius);
1853 - background-color: #D5F2DC;
1854 - color: #1E561F;
1855 - padding: var(--gap-sm) var(--gap-md);
1856 - font-size: var(--text-sm);
1857 - margin: var(--gap-sm) 0;
1858 - 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;
1859 1566 }
1860 1567
1861 1568 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1862 1569 display: inline-block;
@@ -1867,20 +1574,21 @@
1867 1574 #post-body-content > .frm_updated_message {
1868 1575 margin: 5px 65px;
1869 1576 }
1870 1577
1871 -#form_global_settings #post-body-content > .frm_updated_message,
1872 -#form_global_settings #post-body-content > .frm_warning_style {
1578 +#form_global_settings .frm_updated_message {
1873 1579 margin: 5px 25px;
1874 1580 }
1875 1581
1876 1582 .frm_error_style {
1877 1583 color: #973937;
1878 - background-color: #EBCCCC;
1584 + border-color: #F2DEDE;
1585 + background-color: #F2DEDE;
1879 1586 clear: both;
1880 1587 }
1881 1588
1882 1589 .frm_error_style a {
1590 + color: #973937;
1883 1591 text-decoration: underline;
1884 1592 font-weight: 600;
1885 1593 }
1886 1594
@@ -1888,10 +1596,14 @@
1888 1596 opacity: .7;
1889 1597 }
1890 1598
1891 1599 .frm_warning_style {
1892 - color: #7A4D05;
1893 - 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;
1894 1606 }
1895 1607
1896 1608 .frm_warning_heading{
1897 1609 font-weight: bold;
@@ -1897,61 +1609,8 @@
1897 1609 font-weight: bold;
1898 1610 margin-bottom:4px;
1899 1611 }
1900 1612
1901 -/* Warning message dismiss */
1902 -.frm_warning_style {
1903 - position: relative;
1904 - padding-right: calc(var(--gap-md) + 15px);
1905 -}
1906 -
1907 -body.rtl .frm_warning_style {
1908 - padding-right: var(--gap-md);
1909 - padding-left: calc(var(--gap-md) + 15px);
1910 -}
1911 -
1912 -.frm-warning-dismiss {
1913 - position: absolute;
1914 - top: 10px;
1915 - right: 10px;
1916 - display: flex;
1917 - cursor: pointer;
1918 - transition: opacity 0.2s ease-out;
1919 -}
1920 -
1921 -body.rtl .frm-warning-dismiss {
1922 - left: 10px;
1923 - right: auto;
1924 -}
1925 -
1926 -.frm-warning-dismiss:hover {
1927 - opacity: 0.8;
1928 -}
1929 -
1930 -.frm-warning-dismiss.frmsvg,
1931 -.frm-warning-dismiss.frmsvg svg {
1932 - width: 15px;
1933 - height: 15px;
1934 -}
1935 -
1936 -.frm_note_style {
1937 - background: rgba(188, 224, 253, 0.23);
1938 - color: var(--grey-700);
1939 -}
1940 -
1941 -.frm-banner-alert {
1942 - text-align: left;
1943 - margin: 0;
1944 - border-radius: 0;
1945 - padding: 10px 0 10px 40px;
1946 -}
1947 -
1948 -.frm-banner-alert a {
1949 - color: var(--primary-500);
1950 - font-weight: 400;
1951 - text-decoration: none;
1952 -}
1953 -
1954 1613 .frm_updated_message ul,
1955 1614 .frm_updated_message li,
1956 1615 .frm_warning_style ul,
1957 1616 .frm_warning_style li,
@@ -1960,24 +1619,57 @@
1960 1619 margin: 0;
1961 1620 }
1962 1621
1963 1622 .frm-inline-message {
1964 - border: 1px solid var(--primary-700);
1623 + border: 1px solid var(--primary-hover);
1965 1624 border-radius: var(--small-radius);
1966 - color: var(--primary-700);
1625 + color: var(--primary-hover);
1967 1626 background: #fff;
1968 1627 text-align: center;
1969 1628 padding: 20px;
1970 - font-size: var(--text-sm);
1971 - line-height: var(--leading);
1629 + font-size: 14px;
1630 + line-height: 1.4em;
1972 1631 }
1973 1632
1974 1633 .frm-inline-message a {
1975 - text-decoration: underline;
1976 1634 font-weight: 600;
1977 - color: var(--primary-700);
1635 + color: var(--primary-hover);
1978 1636 }
1979 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 +
1980 1672 .frm_pro_heading span {
1981 1673 margin-top: 10px;
1982 1674 }
1983 1675
@@ -1986,14 +1678,15 @@
1986 1678 }
1987 1679
1988 1680 .frm-yes {
1989 1681 color: var(--green);
1990 - font-size: var(--text-xl);
1682 + font-size: 21px;
1683 + font-weight: 500;
1991 1684 }
1992 1685
1993 1686 .frm-nope {
1994 - color: var(--grey-400);
1995 - font-size: var(--text-xl);
1687 + color: #d2e0f2;
1688 + font-size: 21px;
1996 1689 }
1997 1690
1998 1691 .upgrade_to_pro a {
1999 1692 color: var(--orange);
@@ -1999,10 +1692,10 @@
1999 1692 color: var(--orange);
2000 1693 }
2001 1694
2002 1695 .upgrade_to_pro table .frmsvg {
2003 - height: var(--text-xl);
2004 - width: var(--text-xl);
1696 + height: 20px;
1697 + width: 20px;
2005 1698 }
2006 1699
2007 1700 .upgrade_to_pro table.widefat {
2008 1701 background-color: #fff;
@@ -2008,14 +1701,12 @@
2008 1701 background-color: #fff;
2009 1702 border-collapse: collapse;
2010 1703 }
2011 1704
2012 -.frm-white-body .upgrade_to_pro table th,
1705 +.upgrade_to_pro table th,
2013 1706 .upgrade_to_pro table td {
2014 1707 padding: 10px 15px;
2015 - border: 1px solid var(--grey-300);
2016 - line-height: var(--leading);
2017 - font-size: var(--text-sm);
1708 + border: 1px solid #d2e0f2;
2018 1709 }
2019 1710
2020 1711 .upgrade_to_pro table th.frmcenter {
2021 1712 text-align: center;
@@ -2021,9 +1712,9 @@
2021 1712 text-align: center;
2022 1713 }
2023 1714
2024 1715 .widefat th.frm_table_break {
2025 - background-color: var(--sidebar-color);
1716 + background-color: #f6f7fb;
2026 1717 }
2027 1718
2028 1719 h2.frm-h2 + .howto {
2029 1720 color: var(--medium-grey);
@@ -2039,18 +1730,18 @@
2039 1730 margin-top: 0;
2040 1731 }
2041 1732
2042 1733 .frm-addons {
2043 - margin-top: var(--gap-lg);
1734 + margin-top: 30px;
2044 1735 display: grid;
2045 1736 grid-template-columns: 1fr 1fr 1fr;
2046 - grid-gap: var(--gap-md);
1737 + grid-gap: 30px 2%;
2047 1738 }
2048 1739
2049 1740 .frm-addons,
2050 1741 .frm-addons h2,
2051 1742 .frm-addons h3 {
2052 - color: var(--grey-700);
1743 + color: var(--dark-grey);
2053 1744 }
2054 1745
2055 1746 .frm-addons h2 {
2056 1747 font-size: 17px;
@@ -2062,9 +1753,9 @@
2062 1753
2063 1754 .frm-card {
2064 1755 width: 100%;
2065 1756 border-radius: 10px;
2066 - border: 1px solid var(--grey-300);
1757 + border: 1px solid var(--grey-border);
2067 1758 opacity: 1;
2068 1759 transition: opacity 1s;
2069 1760 }
2070 1761
@@ -2078,10 +1769,10 @@
2078 1769 position: relative;
2079 1770 }
2080 1771
2081 1772 .frm-addons .plugin-card-top {
2082 - min-height: 155px;
2083 - padding-top: var(--gap-lg);
1773 + height: 140px;
1774 + padding-top: 30px;
2084 1775 overflow: hidden;
2085 1776 }
2086 1777
2087 1778 .frm-addons .plugin-card-top h2 {
@@ -2118,16 +1809,15 @@
2118 1809 .frm-addon-active .button {
2119 1810 visibility: hidden;
2120 1811 }
2121 1812
2122 -.frm-save-and-reload-options {
1813 +#frm_save_and_reload_options {
2123 1814 margin-top: 10px;
2124 1815 font-size: 13px;
2125 1816 }
2126 1817
2127 -.frm-save-and-reload,
2128 -.frm-save-and-reload + .frm-button-secondary {
2129 - visibility: visible !important;
1818 +#frm_save_and_reload_settings, #frm_save_and_reload_settings + .frm-button-secondary {
1819 + visibility: visible;
2130 1820 }
2131 1821
2132 1822 .addon-status-label {
2133 1823 opacity: .7;
@@ -2156,13 +1846,9 @@
2156 1846 .frm-new-template.plugin-card-bottom {
2157 1847 overflow: visible;
2158 1848 }
2159 1849
2160 -#frm-new-template p:first-child {
2161 - margin-top: 0;
2162 -}
2163 -
2164 -.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),
2165 1851 #wpbody-content > .updated,
2166 1852 #wpbody-content > #update-nag,
2167 1853 #wpbody-content > .update-nag,
2168 1854 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2184,86 +1870,35 @@
2184 1870 margin: 0;
2185 1871 padding: 10px 20px;
2186 1872 }
2187 1873
2188 -.frm-modal .postbox,
2189 1874 #frm_new_form_modal .postbox {
2190 1875 max-height: 600px;
2191 1876 overflow: hidden;
2192 - margin-bottom: 0;
2193 1877 }
2194 1878
2195 -.frm-modal .postbox .frm_modal_top,
2196 -.frm-dialog .frm_common_modal .postbox > div:first-child {
2197 - padding: var(--gap-md) var(--gap-md) 0;
1879 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child {
1880 + padding: 30px 20px;
2198 1881 position: relative;
1882 + border-bottom: 1px solid var(--grey-border);
2199 1883 }
2200 1884
2201 -.frm-modal .postbox .frm-modal-title,
2202 -.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 {
2203 1886 display: inline-block;
2204 - font-size: var(--text-xl);
2205 - color: var(--grey-900);
1887 + font-size: 24px;
1888 + color: #282F36;
2206 1889 }
2207 1890
2208 -.frm-inline-modal > a.dismiss,
2209 -.frm-modal .postbox > a.dismiss,
2210 -.frm-modal .postbox .frm-modal-title + div:last-child,
2211 -.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 {
2212 1892 position: absolute;
2213 - right: 30px;
2214 - top: 25px;
2215 - z-index: 2;
1893 + right: 20px;
1894 + top: 37px;
2216 1895 }
2217 1896
2218 -body.rtl .frm-inline-modal > a.dismiss,
2219 -body.rtl .frm-modal .postbox > a.dismiss,
2220 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2221 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2222 - right: unset;
2223 - left: 30px;
1897 +#wpwrap ~ .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child a {
1898 + color: var(--grey);
2224 1899 }
2225 1900
2226 -.frm-info-modal .postbox > a.dismiss,
2227 -.frm-inline-modal > a.dismiss {
2228 - right: 13px;
2229 - top: 13px;
2230 -}
2231 -
2232 -.frm-modal .postbox .frm-modal-title + div:last-child a,
2233 -.frm-modal a.dismiss .frmsvg,
2234 -.frm_common_modal .frm_modal_top a .frmsvg {
2235 - color: var(--grey-900);
2236 -}
2237 -
2238 -.frm-modal .frm_modal_content > div.inside,
2239 -.frm_common_modal .frm_modal_content > div.inside {
2240 - padding: var(--gap-md);
2241 - margin: 0;
2242 - font-size: var(--text-sm);
2243 - color: var(--grey-700);
2244 -}
2245 -
2246 -.frm_common_modal .postbox {
2247 - display: flex;
2248 - flex-direction: column;
2249 -}
2250 -
2251 -.frm-modal .postbox > div.inside .cta-inside {
2252 - overflow-y: auto;
2253 - height: auto;
2254 - padding: 0 var(--gap-sm);
2255 -}
2256 -
2257 -.frm_modal_footer {
2258 - padding: 0 var(--gap-md) var(--gap-sm);
2259 - text-align: right;
2260 -}
2261 -
2262 -body.frm-body-with-open-modal {
2263 - overflow-y: hidden;
2264 -}
2265 -
2266 1901 #frm_new_form_modal .postbox > div.inside {
2267 1902 max-height: 490px;
2268 1903 overflow-y: auto;
2269 1904 overflow-x: hidden;
@@ -2273,9 +1908,9 @@
2273 1908
2274 1909 #frm_new_form_modal .postbox > div.inside .cta-inside {
2275 1910 overflow-y: auto;
2276 1911 height: auto;
2277 - padding: 0 var(--gap-md);
1912 + padding: 0 15px;
2278 1913 }
2279 1914
2280 1915 #frm_new_form_modal .accordion-container {
2281 1916 width: 100%;
@@ -2281,16 +1916,13 @@
2281 1916 width: 100%;
2282 1917 }
2283 1918
2284 1919 .frm-templates-list {
2285 - margin-top: 0;
1920 + margin-top: 0px;
2286 1921 }
2287 1922
2288 -.frm-templates-list.frm_grid_container li {
2289 - margin-bottom: 0;
2290 -}
2291 -
2292 1923 .frm-templates-list li {
1924 + width: 50%;
2293 1925 vertical-align: top;
2294 1926 position: relative;
2295 1927 box-sizing: border-box;
2296 1928 border-radius: 6px;
@@ -2319,17 +1951,14 @@
2319 1951 .frm-templates-list li.frm-selectable:hover p {
2320 1952 max-width: calc( 100% - 65px );
2321 1953 }
2322 1954
2323 -.frm-templates-list .frm-featured-form {
2324 - display: flex;
1955 +.frm-templates-list li > div:not(.frm-hover-icons) {
1956 + display: inline-block;
2325 1957 width: 100%;
1958 + padding: 5px;
2326 1959 }
2327 1960
2328 -.frm-templates-list li .frm-featured-form {
2329 - padding: 7px 5px;
2330 -}
2331 -
2332 1961 .frm-templates-list li li > div {
2333 1962 padding-left: 0;
2334 1963 }
2335 1964
@@ -2336,38 +1965,23 @@
2336 1965 .frm-templates-list li > div > div {
2337 1966 vertical-align: middle;
2338 1967 }
2339 1968
2340 -.frm-templates-list .frm-inner-circle,
2341 -.frm-category-icon, /* Deprecated */
2342 -.frm-icon-wrapper {
2343 - background: var(--primary-500);
2344 - border-radius: var(--small-radius);
2345 - color: #fff;
1969 +.frm-templates-list li .frm-category-icon {
2346 1970 width: 40px;
2347 1971 height: 40px;
2348 - font-size: 18px;
2349 - box-sizing: border-box;
2350 - align-self: center;
2351 - justify-content: center;
2352 - align-items: center;
2353 - display: inline-flex;
2354 -}
2355 -
2356 -.frm-templates-list .frm-inner-circle .frmsvg {
1972 + overflow: hidden;
1973 + display: inline-block;
1974 + border-radius: 4px;
1975 + text-align: center;
2357 1976 vertical-align: top;
2358 1977 }
2359 1978
2360 -.frm-templates-list li .frm-category-icon {
2361 - overflow: hidden;
2362 - align-self: flex-start;
2363 -}
2364 -
2365 -.frm-templates-list .frm-template-details {
1979 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2366 1980 /* the content container to the right of the icon in Create new form modal */
2367 1981 display: inline-block;
2368 1982 width: calc( 100% - 40px );
2369 - padding-left: var(--gap-sm);
1983 + padding-left: 13px;
2370 1984 box-sizing: border-box;
2371 1985 transform: translateY(-2px);
2372 1986 }
2373 1987
@@ -2381,18 +1995,54 @@
2381 1995 }
2382 1996
2383 1997 .frm-templates-list li h3,
2384 1998 .frm-templates-list .frm-install-template h3 {
2385 - font-size: var(--text-sm) !important;
1999 + font-size: 14px !important;
2000 + line-height: 24px;
2001 + height: 24px;
2386 2002 }
2387 2003
2004 +.frm-templates-list li p {
2005 + font-size: 13px;
2006 + color: rgba(40, 47, 54, 0.6);
2007 +}
2008 +
2388 2009 .frm-templates-list .frm-install-template div {
2389 2010 text-align: left;
2390 2011 }
2391 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 +
2392 2042 #frm_new_form_modal .frm-search {
2393 - width: 100%;
2394 - margin: var(--gap-sm) 0 var(--gap-md);
2043 + width: calc( 100% - 20px );
2044 + margin: 15px 10px 30px;
2395 2045 }
2396 2046
2397 2047 #frm_leave_email,
2398 2048 #frm_code_from_email
@@ -2399,10 +2049,14 @@
2399 2049 {
2400 2050 width: 480px;
2401 2051 }
2402 2052
2403 -#frm_new_form_modal #template-search-input {
2404 - 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;
2405 2059 }
2406 2060
2407 2061 #frm-email-block .frm-with-left-icon .frmsvg {
2408 2062 padding: 0;
@@ -2412,12 +2066,12 @@
2412 2066
2413 2067 #frm_new_form_modal .accordion-container {
2414 2068 display: inline-block;
2415 2069 padding: 0;
2416 - border-top: 1px solid var(--grey-300);
2070 + border-top: 1px solid var(--grey-border);
2417 2071 box-sizing: border-box;
2418 - margin: 0 5px;
2419 - width: calc( 100% - 10px );
2072 + margin: 0 10px;
2073 + width: calc( 100% - 20px );
2420 2074 }
2421 2075
2422 2076 #frm_new_form_modal .accordion-section-title {
2423 2077 padding: 0;
@@ -2427,13 +2081,13 @@
2427 2081 .control-section:hover .accordion-section-title,
2428 2082 #frm_new_form_modal .accordion-section.open .accordion-section-title
2429 2083 {
2430 2084 background: #fff !important;
2431 - border-bottom-color: transparent;
2085 + border-bottom: none;
2432 2086 }
2433 2087
2434 2088 #frm_new_form_modal .accordion-section.open:hover {
2435 - border-bottom-color: transparent;
2089 + border-bottom: none;
2436 2090 }
2437 2091
2438 2092 #frm_new_form_modal .accordion-section {
2439 2093 padding: 8px 0 4px;
@@ -2439,9 +2093,9 @@
2439 2093 padding: 8px 0 4px;
2440 2094 }
2441 2095
2442 2096 #frm_new_form_modal .accordion-section + .accordion-section {
2443 - border-top: 1px solid var(--grey-300);
2097 + border-top: 1px solid var(--grey-border);
2444 2098 border-radius: 0;
2445 2099 }
2446 2100
2447 2101 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2450,9 +2104,9 @@
2450 2104 padding-left: 0;
2451 2105 }
2452 2106
2453 2107 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2454 - padding-left: var(--gap-sm);
2108 + padding-left: 10px;
2455 2109 }
2456 2110
2457 2111 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2458 2112 padding: 0 10px;
@@ -2459,127 +2113,131 @@
2459 2113 overflow: hidden;
2460 2114 }
2461 2115
2462 2116 #frm_new_form_modal .accordion-section-content {
2463 - padding: var(--gap-sm);
2117 + padding: 10px 0;
2464 2118 }
2465 2119
2466 2120 .frm-hover-icons {
2467 2121 position: absolute;
2468 2122 right: 0;
2469 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2470 - max-width: 91px;
2123 + top: 0;
2124 + height: 20px;
2125 + width: 65px;
2471 2126 height: 100%;
2472 2127 box-sizing: border-box;
2473 - padding: 0 10px 0 5px !important;
2474 - border-radius: var(--small-radius);
2128 + padding: 14px 10px 0 5px !important;
2129 + border-radius: 6px;
2475 2130 text-align: right;
2476 - display: flex;
2477 - gap: 5px;
2478 2131 }
2479 2132
2480 -.frm-ready-made-solution .frm-hover-icons {
2481 - visibility: hidden;
2133 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2134 + width: 91px;
2482 2135 }
2483 2136
2484 -.frm-ready-made-solution:hover .frm-hover-icons {
2485 - visibility: visible;
2486 -}
2487 -
2488 2137 .frm-hover-icons a {
2489 2138 width: 22px;
2490 2139 height: 22px;
2491 - font-size: var(--text-md);
2492 - display: inline-flex;
2493 - align-items: center;
2494 - justify-content: center;
2140 + display: inline-block;
2495 2141 border-radius: 50%;
2496 2142 box-sizing: border-box;
2497 - line-height: var(--leading);
2143 + line-height: 20px;
2498 2144 text-align: center;
2499 2145 }
2500 2146
2501 2147 .frm-hover-icons > .frm-preview-form,
2502 2148 .frm-hover-icons > .frm-delete-form {
2503 - border: 1px solid var(--primary-500);
2149 + border: 1px solid var(--primary-color);
2150 + margin-right: 5px;
2504 2151 }
2505 2152
2506 -.frm-hover-icons > .frm-create-form,
2507 -.frm-ready-made-solution .frm-hover-icons a {
2508 - background-color: var(--primary-500);
2153 +.frm-hover-icons > .frm-create-form {
2154 + background-color: var(--primary-color);
2509 2155 }
2510 2156
2511 -.frm-hover-icons > a .frmsvg {
2512 - width: 14px;
2513 - height: 14px;
2514 - vertical-align: baseline;
2157 +.frm-hover-icons > .frm-preview-form .frmsvg {
2158 + width: 16px;
2159 + height: 16px;
2160 + color: var(--primary-color);
2515 2161 }
2516 2162
2517 -.frm-hover-icons > .frm-preview-form .frmsvg,
2518 2163 .frm-hover-icons > .frm-delete-form .frmsvg {
2519 - color: var(--primary-500);
2164 + width: 14px;
2165 + height: 14px;
2166 + color: var(--primary-color);
2167 + transform: translateY(-1px);
2520 2168 }
2521 2169
2522 2170 .frm-hover-icons > .frm-unlock-form {
2523 - background-color: var(--primary-500);
2171 + background-color: var(--primary-color);
2524 2172 }
2525 2173
2526 2174 .frm-hover-icons > .frm-unlock-form .frmsvg {
2527 - background-color: var(--primary-500);
2175 + width: 12px;
2176 + height: 12px;
2177 + background-color: var(--primary-color);
2178 + transform: translateY(-2px);
2528 2179 }
2529 2180
2530 -.frm-ready-made-solution .frmsvg {
2181 +.frm-hover-icons > .frm-create-form .frmsvg {
2531 2182 width: 14px;
2532 2183 height: 14px;
2533 2184 }
2534 2185
2535 -.frm-hover-icons .frm-create-form svg,
2536 -.frm-ready-made-solution .frm-hover-icons svg {
2186 +.frm-hover-icons .frm-create-form svg {
2537 2187 color: #fff;
2538 2188 }
2539 2189
2540 2190 .frm-hover-icons .frm-create-form:hover,
2541 -.frm-ready-made-solution .frm-hover-icons a:hover,
2542 2191 .frm-hover-icons > .frm-unlock-form:hover,
2543 2192 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2544 2193 {
2545 - background-color: var(--primary-700) !important;
2194 + background-color: var(--primary-hover) !important;
2546 2195 }
2547 2196
2548 2197 .frm-hover-icons .frm-preview-form:hover,
2549 2198 .frm-hover-icons .frm-delete-form:hover
2550 2199 {
2551 - border: 1px solid var(--primary-700) !important;
2200 + border: 1px solid var(--primary-hover) !important;
2552 2201 }
2553 2202
2554 2203 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2555 2204 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2556 - color: var(--primary-700) !important;
2205 + color: var(--primary-hover) !important;
2557 2206 }
2558 2207
2559 -.frm-application-card h4 .frmsvg,
2560 2208 .frm-locked-template h3 .frmsvg {
2561 - height: var(--text-sm);
2562 - width: var(--text-sm);
2563 - vertical-align: text-top;
2564 - color: var(--grey-500);
2209 + height: 12px;
2210 + width: 14px;
2211 + vertical-align: top;
2212 + padding-top: 6px;
2565 2213 }
2566 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 +
2567 2222 #frm_new_form_modal .frm-use-this-template {
2568 2223 margin-left: 10px;
2569 2224 }
2570 2225
2571 2226 #frm_new_form_modal #frm-preview-block {
2572 - padding: var(--gap-md) var(--gap-lg);
2227 + padding: 20px 40px;
2573 2228 overflow-x: hidden;
2574 2229 }
2575 2230
2576 2231 #frm_new_form_modal #frm-details-block {
2577 - padding: var(--gap-md) var(--gap-lg);
2232 + padding: 20px 40px;
2578 2233 }
2579 2234
2580 2235 .frm-modal-back {
2581 2236 cursor: pointer;
2237 + font-size: 17px;
2238 + vertical-align: top;
2239 + margin-top: 4px;
2582 2240 margin-right: 4px;
2583 2241 }
2584 2242
2585 2243 .frm-modal-cancel {
@@ -2586,28 +2244,19 @@
2586 2244 float: left;
2587 2245 }
2588 2246
2589 2247 .frm-plan-required-tag {
2590 - margin-left: 5px;
2591 - transform: translateY(-1px);
2592 2248 background: #FDE6DE;
2593 2249 color: #F15A24;
2594 -}
2595 -
2596 -.frm-ready-made-solution .frm-meta-tag {
2597 - width: fit-content;
2598 - background: #FDE6DE;
2599 - color: #F15A24;
2600 -}
2601 -
2602 -.frm-meta-tag {
2603 2250 font-size: 10px;
2604 - padding: 4px 6px;
2251 + padding: 4px 8px;
2605 2252 border-radius: 4px;
2606 2253 text-transform: uppercase;
2607 2254 font-weight: normal;
2608 2255 display: inline-block;
2609 2256 line-height: 12px;
2257 + transform: translateY(-1px);
2258 + margin-left: 5px;
2610 2259 }
2611 2260
2612 2261 #frm_new_form_modal.frm-expired #frm-create-block,
2613 2262 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2617,14 +2266,18 @@
2617 2266 #frm-create-footer {
2618 2267 padding: 15px 20px;
2619 2268 }
2620 2269
2270 +#frm-create-footer .frm_error_style {
2271 + border-radius: 6px;
2272 +}
2273 +
2621 2274 #frm_code_from_email_options {
2622 2275 margin-top: 20px;
2623 2276 }
2624 2277
2625 2278 #frm_code_from_email_options * {
2626 - color: var(--primary-500);
2279 + color: var(--primary-color);
2627 2280 }
2628 2281
2629 2282 #frm-email-block p,
2630 2283 #frm-code-block p,
@@ -2660,23 +2313,20 @@
2660 2313 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2661 2314 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2662 2315 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2663 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,
2664 2319 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2665 2320 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2666 2321 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2667 2322 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2668 -#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
2669 2325 {
2670 2326 display: inline-block;
2671 2327 }
2672 2328
2673 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2674 -li[data-preview] .frm-hover-icons .frm-preview-form,
2675 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2676 - display: inline-flex;
2677 -}
2678 -
2679 2329 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2680 2330 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2681 2331 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2682 2332 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2711,9 +2361,9 @@
2711 2361 }
2712 2362
2713 2363 #frm-upgrade-body-list-wrapper ul li:before {
2714 2364 content: "\2022";
2715 - color: var(--primary-500);
2365 + color: var(--primary-color);
2716 2366 display: inline-block;
2717 2367 width: 1em;
2718 2368 margin-left: -1em;
2719 2369 }
@@ -2719,112 +2369,126 @@
2719 2369 }
2720 2370
2721 2371 /* Embed Form Modal */
2722 2372
2723 -.frm-embed-modal-content {
2724 - 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;
2725 2378 }
2726 2379
2727 -.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 {
2728 2385 display: flex;
2729 2386 justify-content: center;
2730 2387 }
2731 2388
2732 -#frm_embed_modal .frm_embed_example {
2733 - background: var(--sidebar-color);
2734 - border: 1px solid var(--sidebar-hover);
2735 - border-radius: var(--small-radius);
2736 - color: var(--grey-900);
2737 - font-size: var(--text-sm);
2738 - 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;
2739 2396 width: 100%;
2397 + margin-bottom: 15px;
2740 2398 height: auto !important;
2741 2399 resize: none;
2742 2400 }
2743 2401
2744 -#frm_embed_modal textarea.frm_embed_example {
2402 +#frm_form_embed_modal textarea.frm_embed_example {
2745 2403 padding-bottom: 0;
2746 2404 }
2747 2405
2748 -.frm-embed-modal-content > div a {
2406 +.frm_embed_form_content > div a {
2749 2407 position: absolute;
2750 2408 right: 0;
2751 - top: 0;
2409 + top: 8px;
2752 2410 }
2753 2411
2754 -.frm-embed-modal-content > div {
2412 +.frm_embed_form_content > div {
2755 2413 position: relative;
2756 - margin-bottom: var(--gap-sm);
2757 2414 }
2758 2415
2759 -.frm-embed-modal-content > div:last-child {
2760 - margin-bottom: 0;
2761 -}
2762 -
2763 -.frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2416 +.frm_embed_form_content svg[id^="frm_copy_embed_"] {
2764 2417 position: absolute;
2765 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2418 + top: 35px;
2766 2419 right: 10px;
2767 2420 cursor: pointer;
2768 2421 opacity: 0.5;
2769 2422 }
2770 2423
2771 -.frm-border-info-box,
2772 2424 .frm-embed-modal-option {
2773 - border-radius: var(--small-radius);
2774 - border: 1px solid var(--grey-300);
2775 - padding: var(--gap-sm);
2425 + border-radius: 6px;
2426 + border: 1px solid #E3E8EB;
2427 + padding: 20px;
2776 2428 cursor: pointer;
2777 - display: flex;
2778 - gap: var(--gap-sm);
2779 - font-size: var(--text-sm);
2780 2429 }
2781 2430
2782 2431 .frm-embed-modal-option + .frm-embed-modal-option {
2783 - margin-top: var(--gap-sm);
2432 + margin-top: 10px;
2784 2433 }
2785 2434
2786 -.frm-collapsed .frmsvg,
2787 -.caret.rotate-270,
2788 -.frm-embed-modal-option .caret {
2789 - align-self: center;
2790 - margin-left: auto;
2791 - transform: rotate(-90deg);
2435 +#frm_form_embed_modal .frm-modal-cancel {
2436 + display: none;
2792 2437 }
2793 2438
2794 -#frm_embed_modal .frm_modal_footer {
2795 - display: none;
2439 +#frm_form_embed_modal.frm-on-page-2 .frm-modal-cancel {
2440 + display: inline;
2796 2441 }
2797 2442
2798 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2799 - 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;
2800 2450 }
2801 2451
2802 -.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 {
2803 2469 max-height: 300px;
2804 2470 overflow-y: scroll;
2805 2471 }
2806 2472
2807 -.frm-embed-modal-wrapper.frm-dialog {
2473 +.frm-embed-form-modal-wrapper.frm-dialog {
2808 2474 overflow: visible;
2809 2475 }
2810 2476
2811 2477 /* Bulk Options */
2812 2478 #frm-bulk-modal .frm_grid_container {
2479 + border-top: 1px solid var(--grey-border);
2813 2480 grid-template-columns: repeat(12, 8.33%);
2814 2481 grid-gap: 0;
2815 2482 }
2816 2483
2817 2484 #frm-bulk-modal .frm8 {
2818 - border-right: 1px solid var(--grey-300);
2819 - padding: 10px 20px 10px var(--gap-lg);
2485 + border-right: 1px solid var(--grey-border);
2486 + padding: 0 20px 20px;
2820 2487 }
2821 2488
2822 -#frm-bulk-modal .frm4 {
2823 - padding: 10px 0;
2824 -}
2825 -
2826 -.frm-inline-modal .howto {
2489 +.frm-inline-modal .howto,
2490 +#frm-bulk-modal .howto {
2827 2491 margin: 5px 0 10px;
2828 2492 color: var(--grey);
2829 2493 }
2830 2494
@@ -2841,18 +2505,18 @@
2841 2505 }
2842 2506
2843 2507 .frm-bulk-edit-link {
2844 2508 text-align: right;
2845 - font-size: var(--text-sm);
2509 + font-size: 14px;
2846 2510 padding: 0 5px 10px;
2847 2511 }
2848 2512
2849 2513 .frm-small-add {
2850 - font-size: var(--text-sm) !important;
2514 + font-size: 14px !important;
2851 2515 }
2852 2516
2853 2517 .frm-small-add span {
2854 - color: var(--primary-500);
2518 + color: var(--primary-color);
2855 2519 font-size: 12px;
2856 2520 height: 12px;
2857 2521 width: 12px;
2858 2522 }
@@ -2867,33 +2531,34 @@
2867 2531 }
2868 2532
2869 2533 .frm-right-panel .inside a.frm_pro_tip,
2870 2534 a.frm_pro_tip {
2871 - font-size: var(--text-sm);
2535 + font-size: 14px;
2536 + border: 1px solid var(--orange);
2872 2537 display: inline-block;
2873 - color: var(--grey-700);
2874 - background: #FFE7DE;
2875 - 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;
2876 2542 padding: 5px 15px;
2877 2543 margin: 0 auto;
2878 - display: flex;
2879 - align-items: center;
2544 + line-height: 1.4;
2880 2545 }
2881 2546
2882 2547 a.frm_pro_tip:hover {
2883 - color: var(--grey-700);
2884 - border-color: var(--primary-500);
2548 + color: var(--dark-grey);
2549 + border-color: var(--primary-color);
2885 2550 }
2886 2551
2887 2552 a.frm_pro_tip:hover .frmsvg {
2888 - fill: var(--primary-500);
2553 + fill: var(--primary-color);
2889 2554 }
2890 2555
2891 2556 .frm_field_list .frm_pro_tip {
2892 2557 margin: 10px 15px;
2558 + padding-left: 40px;
2893 2559 position: relative;
2894 - width: calc(100% - 30px);
2895 - box-sizing: border-box;
2560 + background: #fff;
2896 2561 }
2897 2562
2898 2563 a.frm_pro_tip .frmsvg,
2899 2564 a.frm_pro_tip i {
@@ -2900,15 +2565,17 @@
2900 2565 color: var(--orange);
2901 2566 margin-right: 5px;
2902 2567 }
2903 2568
2904 -a.frm_pro_tip .frmsvg {
2905 - margin-right: 10px;
2569 +.frm_field_list a.frm_pro_tip .frmsvg {
2570 + position: absolute;
2571 + left: 15px;
2572 + top: calc(50% - 11px);
2906 2573 }
2907 2574
2908 -.frm-tip-info {
2909 - flex: 1;
2910 - text-align: left;
2575 +.pro-tip {
2576 + font-weight: 500;
2577 + color: var(--darkest-grey);
2911 2578 }
2912 2579
2913 2580 .frm-tip-cta {
2914 2581 color: var(--orange);
@@ -2918,9 +2585,9 @@
2918 2585 float: right;
2919 2586 }
2920 2587
2921 2588 .frm_pro_tip:hover .frm-tip-cta {
2922 - color: var(--primary-500);
2589 + color: var(--primary-color);
2923 2590 }
2924 2591
2925 2592 /*Switch form dropdown*/
2926 2593 h1 .fa-caret-down {
@@ -2935,23 +2602,16 @@
2935 2602 vertical-align: middle;
2936 2603 }
2937 2604
2938 2605 .caret,
2939 -.wp-admin .frm_wrap select,
2940 -.frm_wrap .frm_form_builder select,
2941 2606 .frm_wrap .ui-autocomplete-input {
2942 - 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%;
2943 - background-size: var(--text-md) var(--text-md);
2944 - 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;
2945 2609 }
2946 2610
2947 -.caret {
2948 - padding-right: var(--gap-xs) !important;
2949 -}
2950 -
2951 2611 .frm-btn-group .caret {
2952 2612 float: right;
2953 - margin-top: calc( var(--text-md) / 2 );
2613 + margin-top: 6px;
2954 2614 }
2955 2615
2956 2616 .dropdown {
2957 2617 position: relative;
@@ -2960,10 +2620,8 @@
2960 2620 .dropdown-toggle:focus {
2961 2621 outline: 0;
2962 2622 }
2963 2623
2964 -.frm_wrap .ui-autocomplete,
2965 -#frm_adv_info.frm-dropdown-menu,
2966 2624 .frm-dropdown-menu {
2967 2625 /* Copied from .dropdown-menu rules from Bootstrap */
2968 2626 position: absolute;
2969 2627 top: 100%;
@@ -2970,25 +2628,22 @@
2970 2628 left: 0;
2971 2629 z-index: 1000;
2972 2630 display: none;
2973 2631 float: left;
2974 - padding-left: 4px;
2975 - padding-right: 4px;
2976 - margin: var(--gap-xs) 0 0;
2632 + padding: 0.5rem 0;
2633 + margin: 0;
2977 2634 text-align: left;
2978 2635 list-style: none;
2979 - background: none;
2980 2636 background-color: #fff;
2981 2637 background-clip: padding-box;
2982 - border: 1px solid var(--grey-100);
2638 + border: 1px solid rgba(0, 0, 0, 0.15);
2983 2639 border-radius: 0.25rem;
2984 - box-shadow: var(--box-shadow-lg);
2985 2640
2986 2641 /* Custom rules */
2987 2642 max-height: 200px;
2988 2643 overflow-y: auto;
2989 2644 overflow-x: hidden;
2990 - font-size: var(--text-md);
2645 + font-size: 0.9rem;
2991 2646 width: auto;
2992 2647 min-width: 160px;
2993 2648 }
2994 2649
@@ -2996,8 +2651,12 @@
2996 2651 min-width: 100px;
2997 2652 max-width: 99%;
2998 2653 }
2999 2654
2655 +#frm_bs_dropdown > a {
2656 + font-size: 1em;
2657 +}
2658 +
3000 2659 #frm_bs_dropdown .frm-dropdown-menu {
3001 2660 max-width: 400px;
3002 2661 }
3003 2662
@@ -3006,15 +2665,11 @@
3006 2665 }
3007 2666
3008 2667 #frm_field_group_controls .frm-dropdown-menu,
3009 2668 .frm-field-action-icons .frm-dropdown-menu {
3010 - min-width: 180px !important;
2669 + min-width: 160px !important;
3011 2670 }
3012 2671
3013 -.frm-field-action-icons .frm-dropdown-toggle svg {
3014 - color: #9EA9B8;
3015 -}
3016 -
3017 2672 .multiselect-container.frm-dropdown-menu,
3018 2673 #search-submit .frm-dropdown-menu {
3019 2674 min-width: 200px !important;
3020 2675 }
@@ -3022,9 +2677,9 @@
3022 2677 .preview .frm-dropdown-menu {
3023 2678 min-width: 230px !important;
3024 2679 }
3025 2680
3026 -.frm-dropdown-menu.dropdown-menu-right {
2681 +.frm-dropdown-menu.pull-right {
3027 2682 right: 0;
3028 2683 left: auto;
3029 2684 }
3030 2685
@@ -3038,11 +2693,8 @@
3038 2693 .frm-dropdown-menu > .dropdown-item {
3039 2694 margin: 0;
3040 2695 }
3041 2696
3042 -.frm-select-list-item,
3043 -.frm_wrap .ui-autocomplete li > div,
3044 -.multiselect-container button.multiselect-option,
3045 2697 .frm-dropdown-menu > .dropdown-item > a,
3046 2698 .frm-dropdown-menu .frm_dropdown_li {
3047 2699 clear: both;
3048 2700 font-weight: normal;
@@ -3047,24 +2699,19 @@
3047 2699 clear: both;
3048 2700 font-weight: normal;
3049 2701 white-space: nowrap;
3050 2702 text-decoration: none;
3051 - border-radius: var(--small-radius);
3052 2703 }
3053 2704
3054 -.frm-dropdown-menu > .active > a,
3055 -.frm-dropdown-menu > .active > a:hover,
3056 -.frm-dropdown-menu > .active > a:focus {
2705 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3057 2706 text-decoration: none;
3058 2707 outline: 0;
3059 2708 }
3060 2709
3061 -.frm-select-list-item.disabled,
3062 2710 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3063 2711 color: #999999;
3064 2712 }
3065 2713
3066 -.frm-select-list-item.disabled:hover,
3067 2714 .frm-dropdown-menu > .disabled > a:hover,
3068 2715 .frm-dropdown-menu > .disabled > a:focus {
3069 2716 text-decoration: none;
3070 2717 background-color: transparent;
@@ -3081,11 +2728,12 @@
3081 2728 }
3082 2729
3083 2730 .dropdown-header {
3084 2731 display: block;
3085 - padding: 3px 10px;
3086 - font-size: var(--text-xs);
3087 - color: var(--grey-400);
2732 + padding: 3px 20px;
2733 + font-size: 12px;
2734 + line-height: 1.428571429;
2735 + color: #999999;
3088 2736 }
3089 2737
3090 2738 .dropdown-backdrop {
3091 2739 position: fixed;
@@ -3095,9 +2743,8 @@
3095 2743 top: 0;
3096 2744 z-index: 990;
3097 2745 }
3098 2746
3099 -.dropdown-menu-right > .frm-dropdown-menu,
3100 2747 .pull-right > .frm-dropdown-menu {
3101 2748 right: 0;
3102 2749 left: auto;
3103 2750 }
@@ -3117,13 +2764,13 @@
3117 2764 .btn {
3118 2765 border: 1px solid #ddd;
3119 2766 background: #fff;
3120 2767 height: 28px;
3121 - line-height: var(--leading);
2768 + line-height: 1.5;
3122 2769 }
3123 2770
3124 2771 a.frm_option_icon:before {
3125 - color: var(--primary-500);
2772 + color: var(--primary-color);
3126 2773 font-size: 22px;
3127 2774 width: 22px;
3128 2775 height: 22px;
3129 2776 }
@@ -3129,9 +2776,9 @@
3129 2776 }
3130 2777
3131 2778 a.frm_option_icon:focus::before,
3132 2779 a.frm_option_icon:hover::before {
3133 - color: var(--primary-700);
2780 + color: var(--primary-hover);
3134 2781 }
3135 2782
3136 2783 .frm_top_left .frm-dropdown-toggle {
3137 2784 color: #999;
@@ -3145,17 +2792,17 @@
3145 2792 text-decoration: none;
3146 2793 }
3147 2794
3148 2795 .frm-card .frm-dropdown-toggle {
3149 - border: 1px solid var(--grey-300);
2796 + border: 1px solid var(--grey-border);
3150 2797 border-radius: var(--small-radius);
3151 2798 font-size: 13px;
3152 - color: var(--grey-700);
2799 + color: var(--dark-grey);
3153 2800 padding: 7px 20px;
3154 2801 }
3155 2802
3156 2803 .frm_actions_dropdown .frm-dropdown-menu {
3157 - font-size: var(--text-sm);
2804 + font-size: 14px;
3158 2805 color: #5F6C72;
3159 2806 }
3160 2807
3161 2808 .frm-dropdown-menu .frm_icon_font {
@@ -3167,21 +2814,20 @@
3167 2814 /* BS Multiselect */
3168 2815 .multiselect-container.frm-dropdown-menu {
3169 2816 top: auto;
3170 2817 left: auto;
3171 - font-size: var(--text-sm);
3172 - padding: 4px;
2818 + font-size: 14px;
2819 + padding-top: 3px;
3173 2820 margin-bottom: 3px;
3174 2821 }
3175 2822
3176 2823 .frm-right-panel .accordion-section-content {
3177 2824 background: transparent;
3178 - padding: 0;
3179 - overflow: initial;
2825 + padding-top: 0
3180 2826 }
3181 2827
3182 -.frm-right-panel .accordion-section-content > .inside {
3183 - padding: 0 0 var(--gap-xs);
2828 +.frm-right-panel .accordion-section-content > .inside {
2829 + padding: 0;
3184 2830 }
3185 2831
3186 2832 .frm-right-panel .accordion-section-content .inside a {
3187 2833 font-size: inherit;
@@ -3188,10 +2834,10 @@
3188 2834 }
3189 2835
3190 2836 #post-body-content + .frm-right-panel h3.accordion-section-title {
3191 2837 padding: 7px 10px 8px 14px;
3192 - font-size: var(--text-md);
3193 - color: var(--grey-700);
2838 + font-size: 16px;
2839 + color: var(--dark-grey);
3194 2840 }
3195 2841
3196 2842 .frm-right-panel .control-section.open h3 {
3197 2843 border-bottom: none;
@@ -3200,22 +2846,22 @@
3200 2846 .js .frm-right-panel .control-section.open .accordion-section-title,
3201 2847 .js .frm-right-panel .control-section .accordion-section-title:focus,
3202 2848 .js .frm-right-panel .control-section .accordion-section-title:hover {
3203 2849 background: transparent;
3204 - color: var(--grey-900);
2850 + color: var(--dark-grey);
3205 2851 }
3206 2852
3207 2853 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3208 - color: var(--grey-700);
2854 + color: var(--dark-grey);
3209 2855 }
3210 2856
3211 2857 .frm-with-line,
3212 2858 .accordion-section-content h4 {
3213 - font-size: var(--text-md);
2859 + font-size: 16px;
3214 2860 font-weight: 400;
3215 2861 margin: 20px -20px 10px;
3216 2862 padding: 0 20px;
3217 - color: var(--grey-700);
2863 + color: var(--dark-grey);
3218 2864 position: relative;
3219 2865 border: none !important;
3220 2866 }
3221 2867
@@ -3245,9 +2891,9 @@
3245 2891 .accordion-section-content h4:before {
3246 2892 content: '';
3247 2893 display: block;
3248 2894 position: absolute;
3249 - border-bottom: 1px solid var(--grey-300);
2895 + border-bottom: 1px solid var(--grey-border);
3250 2896 left: 0;
3251 2897 width: 100%;
3252 2898 top: 50%;
3253 2899 }
@@ -3265,9 +2911,8 @@
3265 2911 font-family: "s11-fp" !important;
3266 2912 font-size: 18px;
3267 2913 font-variant: normal;
3268 2914 text-rendering: auto;
3269 - vertical-align: text-top;
3270 2915 }
3271 2916
3272 2917 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3273 2918 transform: rotate(90deg);
@@ -3273,9 +2918,9 @@
3273 2918 transform: rotate(90deg);
3274 2919 }
3275 2920
3276 2921 .frm-right-panel .accordion-section-title:after {
3277 - top: calc(50% - 10px) !important;
2922 + right: 20px;
3278 2923 }
3279 2924
3280 2925 .frm-right-panel .open .accordion-section-title:after {
3281 2926 content: "\e62a" !important;
@@ -3284,9 +2929,9 @@
3284 2929 .frm-right-panel .accordion-section-title:before {
3285 2930 content: "\f1de" !important;
3286 2931 color: var(--grey);
3287 2932 font-size: 17px !important;
3288 - margin: 0 10px 0 0;
2933 + margin: 0 10px;
3289 2934 }
3290 2935
3291 2936 .form-title-style .accordion-section-title:before,
3292 2937 .section-fields-style .accordion-section-title:before {
@@ -3344,21 +2989,16 @@
3344 2989 .progress-bars-style .accordion-section-title:before{
3345 2990 content: "\e939" !important;
3346 2991 }
3347 2992
3348 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3349 2993 .frm-right-panel h3.accordion-section-title {
3350 2994 padding: 15px 20px;
3351 2995 background: var(--sidebar-color);
3352 - line-height: var(--leading);
3353 - color: var(--grey-700);
3354 - font-size: var(--text-lg);
3355 - font-weight: 400;
2996 + line-height: 1;
3356 2997 }
3357 2998
3358 -.control-section .accordion-section-title:after, /** Form template list */
3359 -.customize-pane-child .accordion-section-title:after {
3360 - top: 15px;
2999 +.control-section .accordion-section-title:after, .customize-pane-child .accordion-section-title:after {
3000 + top: 19px;
3361 3001 }
3362 3002
3363 3003 .accordion-container .frm-dropdown-menu {
3364 3004 min-width: 40px;
@@ -3383,12 +3023,14 @@
3383 3023 max-width: 250px;
3384 3024 }
3385 3025
3386 3026 .multiselect-container button.multiselect-option {
3027 + display: block;
3387 3028 width: 100%;
3388 3029 text-align: left;
3030 + background: none;
3389 3031 border: none;
3390 - margin-bottom: 4px;
3032 + padding: 5px 0 5px 15px;
3391 3033 }
3392 3034
3393 3035 .multiselect-container button.multiselect-option label {
3394 3036 margin-left: 5px;
@@ -3406,15 +3048,8 @@
3406 3048 .frm-btn-group.btn-group, .frm-btn-group.btn-group-vertical {
3407 3049 display: block;
3408 3050 }
3409 3051
3410 -.multiselect-option label {
3411 - max-width: calc(100% - 22px);
3412 - text-overflow: ellipsis;
3413 - overflow: hidden;
3414 - white-space: nowrap;
3415 -}
3416 -
3417 3052 .frm_scale {
3418 3053 text-align: center;
3419 3054 float: left;
3420 3055 margin-right: 10px;
@@ -3436,13 +3071,8 @@
3436 3071 width: 100%;
3437 3072 height: auto;
3438 3073 }
3439 3074
3440 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3441 - vertical-align: sub;
3442 - vertical-align: -webkit-baseline-middle;
3443 -}
3444 -
3445 3075 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3446 3076 background-color: var(--blue-border);
3447 3077 }
3448 3078
@@ -3469,9 +3099,9 @@
3469 3099 .frm-fake-field {
3470 3100 display: block;
3471 3101 height: 25px;
3472 3102 background-color: var(--light-blue);
3473 - border: 1px solid var(--grey-300);
3103 + border: 1px solid var(--grey-border);
3474 3104 margin: 10px 0;
3475 3105 border-radius: var(--small-radius);
3476 3106 }
3477 3107
@@ -3477,15 +3107,15 @@
3477 3107
3478 3108 .frm-embed-message {
3479 3109 position: absolute;
3480 3110 background: #fff;
3481 - border: 1px solid var(--grey-300);
3482 - color: var(--grey-700);
3483 - padding: var(--gap-md);
3484 - 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;
3485 3115 max-width: 200px;
3486 3116 min-width: 50%;
3487 - margin: 0 var(--gap-md);
3117 + margin: 0 25px;
3488 3118 overflow: hidden;
3489 3119 text-overflow: ellipsis;
3490 3120 }
3491 3121
@@ -3492,9 +3122,9 @@
3492 3122 .frm-summary-message {
3493 3123 top: 50%;
3494 3124 left: 50%;
3495 3125 padding: 15px 0;
3496 - font-size: var(--text-md);
3126 + font-size: 16px;
3497 3127 transform: translate(-50%, -50%);
3498 3128 }
3499 3129
3500 3130 .frm-summary-learn-more {
@@ -3503,9 +3133,8 @@
3503 3133
3504 3134 .frm-single-settings .frm-embed-message {
3505 3135 width: 100%;
3506 3136 position: static;
3507 - border-radius: var(--small-radius);
3508 3137 }
3509 3138
3510 3139 #new_fields input[type=text],
3511 3140 #new_fields input[type=number],
@@ -3542,8 +3171,19 @@
3542 3171 width: 16px;
3543 3172 padding: 0;
3544 3173 }
3545 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 +
3546 3186 .frm_wrap .frm-number-range + .frm_last input,
3547 3187 .frm_wrap .frm-number-range input {
3548 3188 text-align: center;
3549 3189 font-weight: 600;
@@ -3550,9 +3190,9 @@
3550 3190 }
3551 3191
3552 3192 .frm_wrap .frm-number-range input[type=number],
3553 3193 .frm_wrap .frm-number-range input[type=text] {
3554 - color: var(--primary-700);
3194 + color: var(--primary-hover);
3555 3195 }
3556 3196
3557 3197 .frm-range-min {
3558 3198 position: relative;
@@ -3562,25 +3202,24 @@
3562 3202 content: '';
3563 3203 height: 3px;
3564 3204 width: 10px;
3565 3205 border-radius: 30%;
3566 - background: var(--primary-700);
3206 + background: var(--primary-hover);
3567 3207 position: absolute;
3568 3208 top: 17px;
3569 3209 right: -28%;
3570 3210 }
3571 3211
3572 -.frm_grid_container > p,
3573 3212 .frm_grid_container > p.frm_form_field,
3574 3213 .frm_grid_container > div.frm_form_field,
3575 3214 #new_fields .frm_grid_container > p {
3576 - margin-top: 8px;
3577 - margin-bottom: 8px;
3215 + margin-top: 7px;
3216 + margin-bottom: 7px;
3578 3217 margin-right: 0;
3579 3218 }
3580 3219
3581 3220 #new_fields div.frm_grid_container > .frm_primary_label {
3582 - margin-top: 8px;
3221 + margin-top: 7px;
3583 3222 }
3584 3223
3585 3224 #new_fields .frm_primary_label + p,
3586 3225 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3614,9 +3253,9 @@
3614 3253 }
3615 3254
3616 3255 .frm_form_builder .frm_radio label,
3617 3256 .frm_form_builder .frm_checkbox label {
3618 - font-size: var(--text-sm);
3257 + font-size: 14px;
3619 3258 }
3620 3259
3621 3260 /* Start copied front-end CSS */
3622 3261 .horizontal_radio .frm_radio,
@@ -3654,64 +3293,22 @@
3654 3293
3655 3294 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3656 3295 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3657 3296 .frm_wrap input[type=checkbox],
3658 -.frm-white-body input[type=checkbox],
3659 3297 .field-group input[type=checkbox],
3660 3298 .frm_scale input[type=radio],
3661 3299 .frm_radio input[type=radio],
3662 3300 .frm_checkbox input[type=checkbox] {
3663 - border: 1px solid var(--grey-300);
3301 + border: 1px solid var(--grey-border);
3664 3302 box-shadow: none;
3665 3303 -webkit-appearance: none;
3666 3304 }
3667 3305
3668 -
3669 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3670 -.frm_wrap input[type=checkbox],
3671 -.frm-white-body input[type=checkbox],
3672 -.field-group input[type=checkbox],
3673 -.frm_checkbox input[type=checkbox] {
3674 - border-radius: 4px;
3675 -}
3676 -
3677 -.frm-white-body input[type="checkbox"]:checked,
3678 -.frm_wrap input[type="checkbox"]:checked {
3679 - background-color: var(--primary-500);
3680 - border-color: var(--primary-500) !important;
3681 -}
3682 -
3683 -.frm-white-body input[type="checkbox"]:checked:focus,
3684 -.frm_wrap input[type="checkbox"]:checked:focus {
3685 - border-color: var(--primary-500);
3686 -}
3687 -
3688 -.frm-white-body input[type="checkbox"]:checked::before,
3689 -.frm_wrap input[type="checkbox"]:checked::before {
3690 - 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");
3691 - height: 12px;
3692 - width: 12px;
3693 - margin: 1px;
3694 -}
3695 -
3696 3306 .frm_radio input[type="radio"],
3697 3307 .frm_checkbox input[type="checkbox"] {
3698 3308 margin-right: 5px;
3699 3309 }
3700 3310
3701 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3702 - margin: 5px 0;
3703 - width: 18px;
3704 - position: relative; /* override Bootstrap */
3705 -}
3706 -
3707 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3708 - position: relative !important;
3709 - left: calc(50% - 6px);
3710 - top: calc(50% - 6px);
3711 - margin: 0 !important;
3712 -}
3713 -
3714 3311 .frm_inner_field_container {
3715 3312 margin-bottom: 10px;
3716 3313 }
3717 3314
@@ -3737,22 +3334,8 @@
3737 3334 li.ui-state-default.selected > .frm_inner_field_container > label {
3738 3335 max-width: calc(100% - 100px);
3739 3336 }
3740 3337
3741 -.frm-drag-fade {
3742 - background-color: var(--lightest-grey) !important;
3743 - border-radius: 4px;
3744 -}
3745 -
3746 -.frm-drag-fade * {
3747 - opacity: 0;
3748 -}
3749 -
3750 -.frm-dragging .divider_section_only,
3751 -.frm-dragging .frm_field_box {
3752 - pointer-events: none;
3753 -}
3754 -
3755 3338 .frm_form_settings #op-popup, /* 1Password */
3756 3339 .frm_form_settings com-1password-op-button,
3757 3340 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3758 3341 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3887,15 +3470,15 @@
3887 3470 animation: spin 2s linear infinite;
3888 3471 }
3889 3472
3890 3473 .frm-wait:before {
3891 - border-bottom-color: var(--primary-700);
3892 - border-right-color: var(--primary-700);
3474 + border-bottom-color: var(--primary-hover);
3475 + border-right-color: var(--primary-hover);
3893 3476 }
3894 3477
3895 3478 .frm_loading_button.frm-button-secondary:before {
3896 - border-bottom-color: var(--primary-500);
3897 - border-right-color: var(--primary-500);
3479 + border-bottom-color: var(--primary-color);
3480 + border-right-color: var(--primary-color);
3898 3481 }
3899 3482
3900 3483 input[type=submit]:focus {
3901 3484 outline: none !important;
@@ -3919,9 +3502,9 @@
3919 3502 #editorcontainer #dyncontent {
3920 3503 margin: 0;
3921 3504 width: 100%;
3922 3505 padding: 6px;
3923 - line-height: var(--leading);
3506 + line-height: 1.5;
3924 3507 border: 0 none;
3925 3508 outline: none;
3926 3509 -moz-box-sizing: border-box;
3927 3510 -webkit-box-sizing: border-box;
@@ -3967,9 +3550,9 @@
3967 3550 font-size: 12px;
3968 3551 }
3969 3552
3970 3553 .frm_border_bottom {
3971 - border-bottom: 1px solid var(--grey-300);
3554 + border-bottom: 1px solid var(--grey-border);
3972 3555 margin-bottom: 10px;
3973 3556 padding-bottom: 10px;
3974 3557 }
3975 3558
@@ -3980,8 +3563,9 @@
3980 3563 .frm_posttax_opt_list .frm_border_bottom input {
3981 3564 margin-right: 1px;
3982 3565 }
3983 3566
3567 +.frm_logic_row,
3984 3568 .frm_add_remove div.frm_form_field {
3985 3569 padding-bottom: 5px;
3986 3570 }
3987 3571
@@ -4039,23 +3623,17 @@
4039 3623 font-size: inherit;
4040 3624 }
4041 3625
4042 3626 #frm-options-panel {
4043 - padding: 0 var(--gap-sm);
4044 - color: var(--grey-900);
3627 + padding: 0 15px;
3628 + color: var(--darkest-grey);
4045 3629 }
4046 3630
4047 -.frm-right-panel a.frm_add_logic_link,
4048 3631 #frm-options-panel h3 {
4049 3632 padding: 15px 0;
4050 3633 margin-top: -2px;
4051 3634 }
4052 3635
4053 -#frm_style_sidebar h3,
4054 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4055 - padding: 15px 0;
4056 -}
4057 -
4058 3636 .frm_field_key {
4059 3637 background-color: #F7F7F7;
4060 3638 }
4061 3639
@@ -4089,12 +3667,8 @@
4089 3667 .frm-alt-table tr:nth-child(even) {
4090 3668 background-color: var(--sidebar-color);
4091 3669 }
4092 3670
4093 -.frm-alt-table h3 {
4094 - margin-bottom: 0;
4095 -}
4096 -
4097 3671 .form-field .frm_cb_button {
4098 3672 height: 22px;
4099 3673 line-height: 20px;
4100 3674 margin-bottom: 10px;
@@ -4199,9 +3773,9 @@
4199 3773 li.sortable-placeholder {
4200 3774 border: none;
4201 3775 margin: 0;
4202 3776 visibility: visible !important;
4203 - box-shadow: 2px -10px 0 2px var(--primary-500);
3777 + box-shadow: 2px -10px 0 1px var(--primary-color);
4204 3778 }
4205 3779
4206 3780 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4207 3781 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4212,8 +3786,9 @@
4212 3786 #frm_form_editor_container > ul > li > ul {
4213 3787 position: relative;
4214 3788 }
4215 3789
3790 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4216 3791 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4217 3792 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4218 3793 position: absolute;
4219 3794 top: 20px;
@@ -4220,29 +3795,38 @@
4220 3795 bottom: 0;
4221 3796 }
4222 3797
4223 3798 .edit_field_type_divider + li.sortable-placeholder {
4224 - box-shadow: 2px 5px 0 2px var(--primary-500);
3799 + box-shadow: 2px 5px 0 1px var(--primary-color);
4225 3800 }
4226 3801
4227 3802 .start_divider li.sortable-placeholder {
4228 - box-shadow: 2px -5px 0 2px var(--primary-500);
3803 + box-shadow: 2px -5px 0 1px var(--primary-color);
4229 3804 }
4230 3805
4231 -.frm-is-collapsed + .sortable-placeholder {
4232 - 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);
4233 3808 }
4234 3809
4235 -.frm_single_option.ui-sortable-placeholder {
4236 - 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);
4237 3812 }
4238 3813
4239 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,
4240 3817 .frm-show-click,
4241 3818 li.ui-state-default.edit_field_type_divider .frm-show-click {
4242 3819 display: none;
4243 3820 }
4244 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 +
4245 3829 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4246 3830 .frm_form_field.ui-sortable-helper .frm_form_fields,
4247 3831 .frm_form_field.ui-sortable-helper .frm_description,
4248 3832 .frm_form_field.ui-sortable-helper .description {
@@ -4285,8 +3869,16 @@
4285 3869 #new_fields .frm_single_option input[type=text] {
4286 3870 width: calc(100% - 73px);
4287 3871 }
4288 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 +
4289 3881 .frm-right-panel .frm_single_option a.frm_remove_tag,
4290 3882 .frm_single_option a {
4291 3883 padding-left: 7px;
4292 3884 }
@@ -4344,10 +3936,10 @@
4344 3936 /* Image options for Radio and Checkbox */
4345 3937
4346 3938 .frm_image_options .frm_image_option_container {
4347 3939 --field-border-width: 1px;
4348 - --border-color: var(--grey-300);
4349 - --border-color-active: var(--primary-500);
3940 + --border-color: var(--grey-border);
3941 + --border-color-active: var(--primary-color);
4350 3942 --border-radius: var(--small-radius);
4351 3943 }
4352 3944
4353 3945 .frm_image_option_container svg {
@@ -4401,10 +3993,10 @@
4401 3993 height: 75px;
4402 3994 object-fit: cover;
4403 3995 }
4404 3996
4405 -.frm_list_entry_page img {
4406 - max-width: 100%;
3997 +.frm_list_entry_page .frm_file_link img {
3998 + max-width: 75px;
4407 3999 height: auto;
4408 4000 }
4409 4001
4410 4002 .frm_image_option_container .frm_empty_url {
@@ -4448,13 +4040,13 @@
4448 4040 margin-top: 17px;
4449 4041 }
4450 4042
4451 4043 .frm_image_data {
4452 - margin-left: var(--gap-xs);
4044 + margin-left: 10px;
4453 4045 display: flex;
4454 4046 flex-direction: column;
4455 - font-size: var(--text-sm);
4456 - justify-content: space-around;
4047 + font-size: 14px;
4048 + line-height: 17px;
4457 4049 }
4458 4050
4459 4051 .frm_image_styling_frame {
4460 4052 display: flex;
@@ -4478,9 +4070,10 @@
4478 4070 max-width: 54px;
4479 4071 }
4480 4072
4481 4073 .frm_image_preview_title{
4482 - color: var(--grey-500);
4074 + margin-top: 6px;
4075 + color: rgba(40, 47, 54, 0.65);
4483 4076 overflow: hidden;
4484 4077 white-space: nowrap;
4485 4078 text-overflow: ellipsis;
4486 4079 }
@@ -4486,9 +4079,9 @@
4486 4079 }
4487 4080
4488 4081 .frm_wrap .frm_choose_image_box {
4489 4082 cursor: pointer;
4490 - color: var(--grey-700);
4083 + color: var(--dark-grey);
4491 4084 background-color: #F2F2F2;
4492 4085 margin-left: 24px;
4493 4086 text-align: center;
4494 4087 width: 100%;
@@ -4497,11 +4090,13 @@
4497 4090 .frm_wrap .frm_choose_image_box:hover {
4498 4091 background: #fff;
4499 4092 }
4500 4093
4094 +a.frm_remove_image_option .frmsvg,
4501 4095 a.frm_remove_image_option,
4502 4096 .frm_remove_image_option {
4503 - color: var(--grey-400);
4097 + margin-top: 9px;
4098 + color: rgba(40, 47, 54, 0.4);
4504 4099 cursor: pointer;
4505 4100 }
4506 4101
4507 4102 a.frm_remove_image_option:hover .frmsvg,
@@ -4511,10 +4106,17 @@
4511 4106 }
4512 4107
4513 4108 /* Form settings */
4514 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 +
4515 4117 .frm-form-setting-tabs {
4516 - margin-top: var(--gap-sm) !important;
4118 + margin-top: 20px !important;
4517 4119 }
4518 4120
4519 4121 .frm-right-panel > .postbox {
4520 4122 background-color: transparent;
@@ -4525,44 +4127,40 @@
4525 4127
4526 4128 .frm-right-panel .postbox.frm_with_icons .inside,
4527 4129 .frm-right-panel .postbox .inside,
4528 4130 .frm-right-panel .inside {
4529 - font-size: var(--text-md);
4131 + font-size: 16px;
4530 4132 padding: 15px 20px 20px;
4531 - color: var(--grey-700);
4133 + color: var(--dark-grey);
4532 4134 }
4533 4135
4534 4136 .frm-right-panel .misc-pub-section {
4535 - padding: var(--gap-xs) 0;
4137 + padding: 10px 0;
4138 + line-height: 1.4em;
4536 4139 position: relative;
4537 4140 }
4538 4141
4539 4142 .frm-right-panel .inside a,
4540 4143 .frm-form-setting-tabs a {
4541 - font-size: var(--text-md);
4542 - color: var(--grey-700);
4543 - padding: var(--gap-sm);
4144 + font-size: 16px;
4145 + color: var(--dark-grey);
4146 + padding: 15px 15px 15px 20px;
4544 4147 display: block;
4545 4148 }
4546 4149
4547 -.frm-form-setting-tabs a {
4548 - color: var(--grey-900);
4549 - padding: var(--gap-sm) var(--gap-md);
4550 -}
4551 -
4552 4150 .frm-right-panel .inside a {
4553 4151 padding: 0;
4554 - color: var(--primary-500);
4152 + color: var(--primary-color);
4555 4153 display: inline-block;
4556 4154 }
4557 4155
4558 4156 .frm-right-panel .inside a:hover {
4559 - color: var(--primary-700);
4157 + color: var(--primary-hover);
4560 4158 }
4561 4159
4562 4160 .frm-form-setting-tabs a:hover {
4563 4161 background: var(--sidebar-hover);
4564 - color: var(--grey-900);
4162 + color: var(--dark-grey);
4565 4163 }
4566 4164
4567 4165 .frm-right-panel .inside i,
4568 4166 .frm-right-panel .inside .frmsvg,
@@ -4571,20 +4169,16 @@
4571 4169 margin: 0 5px;
4572 4170 display: inline-block;
4573 4171 width: 20px;
4574 4172 height: 20px;
4575 - color: var(--grey-500);
4173 + color: var(--grey);
4576 4174 }
4577 4175
4578 -.frm-form-setting-tabs a .frmsvg {
4579 - margin: 0;
4580 -}
4581 -
4582 4176 .frm-right-panel .inside a:hover i,
4583 4177 .frm-right-panel .inside a:hover .frmsvg,
4584 4178 .frm-form-setting-tabs a:hover .frmsvg,
4585 4179 .frm-form-setting-tabs a:hover span {
4586 - color: var(--grey-700);
4180 + color: var(--dark-grey);
4587 4181 }
4588 4182
4589 4183 .frm_settings_form .tabs-panel {
4590 4184 padding: 0 25px;
@@ -4598,9 +4192,9 @@
4598 4192
4599 4193 #frm_adv_info .tabs-panel {
4600 4194 min-height: 0 !important;
4601 4195 overflow-x: hidden;
4602 - padding: 0;
4196 + padding: 0 20px;
4603 4197 border: none;
4604 4198 background: transparent;
4605 4199 }
4606 4200
@@ -4609,130 +4203,48 @@
4609 4203 }
4610 4204
4611 4205 .frm_posttax_opt_list,
4612 4206 .frm_submit_logic_rows {
4613 - border: 1px solid var(--grey-300);
4614 - padding: var(--gap-md);
4207 + border: 1px solid var(--grey-border);
4208 + padding: 25px;
4615 4209 border-radius: var(--small-radius);
4616 - margin: 5px 0 5px var(--gap-md);
4210 + margin: 5px 0 5px 25px;
4617 4211 }
4618 4212
4619 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4620 - margin: 0;
4621 -}
4622 -
4623 -/* Color picker CSS */
4624 -.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;
4625 4219 position: absolute;
4626 - margin-left: calc( ( 100% - 35px ) * -1 );
4627 - margin-top: 1px;
4628 - width: calc( 100% - 36px );
4220 + font-size: 10px;
4221 + line-height: 20px;
4222 + left: 6px;
4629 4223 }
4630 4224
4631 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4632 - border: none;
4633 - padding: 5px 8px;
4634 - font-family: inherit;
4635 - color: var(--grey-700);
4636 - font-size: var(--text-md);
4637 - width: 100%;
4638 - line-height: var(--leading);
4639 -}
4640 -
4641 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4642 - display: none !important;
4643 -}
4644 -
4645 -.frm-right-panel .wp-picker-holder {
4646 - position: absolute;
4647 - z-index: 999;
4648 -}
4649 -
4650 -.frm-right-panel .wp-picker-input-wrap label {
4651 - margin-bottom: 0;
4652 -}
4653 -
4654 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4655 - width: 100%;
4656 - overflow: hidden;
4657 - margin: 0 !important;
4658 - height: var(--h-md) !important;
4659 - padding: 0 0 0 var(--gap-lg) !important;
4660 - border-radius: var(--small-radius);
4661 - border-color: var(--grey-300);
4662 -}
4663 -
4664 -.frm-right-panel .wp-color-result-text {
4665 - line-height: var(--leading) !important;
4666 - font-size: var(--text-md);
4667 - background: #fff !important;
4668 - color: var(--grey-900);
4669 - padding: 5px 8px;
4670 - border-color: var(--grey-300);
4671 - text-align: left;
4672 -}
4673 -
4674 -.frm-right-panel .color-alpha {
4675 - width: var(--gap-lg) !important;
4676 -}
4677 -
4678 -.frm_grid_container .wp-picker-container {
4679 - width: 100%;
4680 - position: relative;
4681 -}
4682 -
4683 -.wp-picker-container button.wp-color-result {
4684 - border: 1px solid var(--grey-300) !important;
4685 -}
4686 -
4687 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4688 - max-width: 100%;
4689 - position: relative;
4690 -}
4691 -
4692 -.frm_end .wp-picker-holder {
4693 - margin-left: -145px;
4694 -}
4695 -
4696 -.frm_end.frm6 .wp-picker-holder {
4697 - margin-left: -86px;
4698 -}
4699 -/* End of color picker CSS */
4700 -
4701 -/*
4702 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4703 -To use this element, you can call the FrmHtmlHelper::toggle function.
4704 -*/
4705 -.frm_toggle_opt {
4706 - padding: 0;
4707 - white-space: normal;
4225 +.frm_toggle_off {
4708 4226 display: inline;
4709 - vertical-align: middle;
4710 - font-weight: normal;
4227 + left: auto;
4228 + right: 5px;
4229 + color: var(--dark-grey);
4711 4230 }
4712 4231
4713 -.frm_on_label,
4714 -.frm_off_label {
4715 - color: #444444;
4716 -}
4717 -
4718 4232 .frm_toggle {
4719 4233 position: relative;
4720 4234 display: inline-block;
4721 - width: 40px;
4722 - height: var(--h-xs);
4235 + width: 45px;
4236 + height: 20px;
4723 4237 vertical-align: middle;
4238 + margin: 2px;
4724 4239 }
4725 4240
4726 -.frm_toggle_block {
4727 - display: inline-flex;
4728 - gap: var(--gap-sm);
4729 - align-items: center;
4241 +label > span.frm_toggle {
4242 + margin-right: 15px;
4730 4243 }
4731 4244
4732 -.frm_toggle input, /* Reverse compatibility */
4733 -.frm_toggle_block input {
4734 - display:none !important;
4245 +.frm_toggle input {
4246 + display: none !important;
4735 4247 }
4736 4248
4737 4249 .frm_toggle_slider {
4738 4250 position: absolute;
@@ -4740,44 +4252,26 @@
4740 4252 top: 0;
4741 4253 left: 0;
4742 4254 right: 0;
4743 4255 bottom: 0;
4744 - background-color: var(--grey-border);
4745 4256 transition: .4s;
4746 4257 border-radius: 30px;
4258 + background-color: #fff;
4259 + box-shadow: 0 0 0 2px var(--grey);
4747 4260 }
4748 4261
4749 4262 .frm_toggle_slider:before {
4750 4263 border-radius: 50%;
4751 4264 position: absolute;
4752 - 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>");
4753 - height: 22px;
4754 - width: 22px;
4755 - padding: 0 5.5px;
4756 - left: 1px;
4757 - bottom: 1px;
4758 - background-color: white;
4759 - transition: .4s;
4760 - box-sizing: border-box;
4761 - box-shadow: var(--box-shadow-md);
4762 - font-size: 21px;
4763 - 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);
4764 4272 }
4765 4273
4766 -input:checked + .frm_toggle .frm_toggle_slider {
4767 - background-color: var(--primary-500);
4768 -}
4769 -
4770 -input:focus + .frm_toggle .frm_toggle_slider {
4771 - box-shadow: var(--box-shadow-md);
4772 -}
4773 -
4774 -input:checked + .frm_toggle .frm_toggle_slider:before {
4775 - padding: 0 6px;
4776 - transform: translateX(16px);
4777 - 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>");
4778 -}
4779 -
4780 4274 input[disabled] + .frm_toggle_slider {
4781 4275 pointer-events: none;
4782 4276 cursor: text;
4783 4277 opacity: .5;
@@ -4782,53 +4276,16 @@
4782 4276 cursor: text;
4783 4277 opacity: .5;
4784 4278 }
4785 4279
4786 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4787 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4788 -}
4789 -
4790 -.rtl .frm_toggle_opt {
4791 - padding: 0 8px;
4792 -}
4793 -
4794 -.rtl .frm_toggle_slider:before {
4795 - left: 17px;
4796 -}
4797 -
4798 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4799 - transform: none!important;
4800 - left: 1px;
4801 -}
4802 -
4803 -/* Deprecated admin toggle */
4804 -.frm_toggle_off,
4805 -.frm_toggle_on {
4806 - display: none;
4807 - color: #fff;
4808 - z-index: 999;
4809 - position: absolute;
4810 - font-size: 10px;
4811 - line-height: 20px;
4812 - left: 6px;
4813 -}
4814 -
4815 -.frm_toggle_off {
4816 - display: inline;
4817 - left: auto;
4818 - right: 5px;
4819 - color: var(--dark-grey);
4820 -}
4821 -
4822 4280 .frm_toggle_long {
4823 - width: 80% !important;
4281 + width: 80%;
4824 4282 height: 28px;
4825 - display: inline-block !important;
4826 4283 }
4827 4284
4828 4285 .frm_toggle_long .frm_toggle_slider {
4829 - background: var(--primary-700);
4830 - box-shadow: 0 0 0 2px var(--primary-700);
4286 + background: var(--primary-hover);
4287 + box-shadow: 0 0 0 2px var(--primary-hover);
4831 4288 }
4832 4289
4833 4290 .frm_toggle_long .frm_toggle_off,
4834 4291 .frm_toggle_long .frm_toggle_on {
@@ -4853,11 +4310,20 @@
4853 4310 border-radius: var(--border-radius) 0 0 var(--border-radius);
4854 4311 height: 100%;
4855 4312 background-color: #fff;
4856 4313 color: var(--primary-color);
4857 - content: '' !important;
4858 4314 }
4859 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 +
4860 4326 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4861 4327 transform: translateX(101%);
4862 4328 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4863 4329 }
@@ -4872,9 +4338,9 @@
4872 4338
4873 4339 .frm_toggle_long .frm_toggle_on,
4874 4340 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4875 4341 display: inline;
4876 - color: var(--primary-500);
4342 + color: var(--primary-color);
4877 4343 font-weight: normal;
4878 4344 }
4879 4345
4880 4346 .frm_toggle_long .frm_toggle_off,
@@ -4882,9 +4348,11 @@
4882 4348 color: #fff;
4883 4349 font-weight: bold;
4884 4350 }
4885 4351
4886 -/* End toggle styling */
4352 +input:focus + .frm_toggle_slider {
4353 + box-shadow: 0 0 1px #008ec2;
4354 +}
4887 4355
4888 4356 /* Global Settings */
4889 4357
4890 4358 .tabs-panel {
@@ -4902,59 +4370,21 @@
4902 4370 margin-right: 20px !important;
4903 4371 display: inline-block !important;
4904 4372 }
4905 4373
4906 -#frm_stripe_icon {
4907 - border-radius: 5px;
4908 -}
4909 -
4910 -#captcha_settings .frm_primary_label {
4911 - margin-top: var(--gap-sm);
4912 -}
4913 -
4914 -.frm-long-icon-buttons {
4915 - display: flex;
4916 - gap: var(--gap-md);
4917 -}
4918 -
4919 -.frm-long-icon-buttons > label {
4920 - border: 1px solid var(--grey-300);
4921 - color: var(--grey-700);
4922 - border-radius: var(--small-radius);
4923 - display: flex;
4924 - padding: var(--gap-sm);
4925 - gap: var(--gap-sm);
4926 - justify-content: center;
4927 - align-items: center;
4928 - width: calc( 33% - var(--gap-sm) );
4929 - box-sizing: border-box;
4930 -}
4931 -
4932 -.frm-long-icon-buttons > label:hover {
4933 - color: var(--primary-500);
4934 -}
4935 -
4936 -.frm-long-icon-buttons input[type=radio] {
4937 - display: none;
4938 -}
4939 -
4940 -.frm-long-icon-buttons input[type=radio]:checked + label {
4941 - border-color: var(--primary-500);
4942 - box-shadow: 0 0 0 1px var(--primary-color);
4943 -}
4944 -
4945 -.frm-long-icon-buttons label > svg {
4946 - height: 21px;
4947 -}
4948 -
4949 4374 .frm-example-icon .frmsvg,
4950 4375 .frm-example-icon i {
4951 4376 height: 20px;
4952 4377 width: 20px;
4953 4378 font-size: 20px;
4954 - color: var(--grey-700);
4379 + color: var(--dark-grey);
4955 4380 }
4956 4381
4382 +.edd_frm_license_row {
4383 + clear: both;
4384 + line-height: 2em;
4385 +}
4386 +
4957 4387 .frm_license_msg {
4958 4388 margin-top: 0;
4959 4389 }
4960 4390
@@ -4981,14 +4411,23 @@
4981 4411
4982 4412 .frm_no_items {
4983 4413 margin: 0 auto 50px;
4984 4414 text-align: center;
4985 - color: var(--grey-700);
4415 + color: var(--dark-grey);
4986 4416 max-width: 500px;
4987 4417 }
4988 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 +
4989 4428 .frm-subscribe {
4990 - margin: var(--gap-lg) 0;
4429 + margin: 30px 0;
4991 4430 }
4992 4431
4993 4432 /* Inbox */
4994 4433
@@ -4998,16 +4437,16 @@
4998 4437
4999 4438 .frm_inbox_card {
5000 4439 display: grid;
5001 4440 grid-template-columns: 72px 1fr;
5002 - grid-gap: var(--gap-xs);
5003 - border-bottom: 1px solid var(--grey-300);
5004 - padding: var(--gap-md);
4441 + grid-gap: 15px;
4442 + border-bottom: 1px solid var(--grey-border);
4443 + padding: 25px;
5005 4444 }
5006 4445
5007 4446 .frm_inbox_card_icon {
5008 4447 grid-row: span 3 / span 3;
5009 - padding-top: var(--gap-xs);
4448 + padding-top: 20px;
5010 4449 text-align: center
5011 4450 }
5012 4451
5013 4452 .frm_inbox_card_icon svg {
@@ -5026,8 +4465,11 @@
5026 4465 border: none;
5027 4466 text-transform: none;
5028 4467 margin: 0;
5029 4468 padding: 0;
4469 + font-weight: 600;
4470 + color: var(--medium-grey);
4471 + font-size: 16px;
5030 4472 }
5031 4473
5032 4474 .frm_inbox_date {
5033 4475 text-align: right;
@@ -5055,8 +4497,37 @@
5055 4497 margin-left: 2px;
5056 4498 vertical-align: text-bottom;
5057 4499 }
5058 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 +
5059 4530 /* Import/Export */
5060 4531 .csv_opts #frm_csv_col_sep {
5061 4532 width: 45px;
5062 4533 }
@@ -5107,9 +4578,9 @@
5107 4578 padding: 0;
5108 4579 }
5109 4580
5110 4581 .frm-feature-banner {
5111 - background: var(--grey-700);
4582 + background: var(--dark-grey);
5112 4583 color: #fff;
5113 4584 border-radius: var(--small-radius);
5114 4585 padding: 20px;
5115 4586 margin: 10px 0;
@@ -5115,9 +4586,9 @@
5115 4586 margin: 10px 0;
5116 4587 }
5117 4588
5118 4589 .frm-feature-banner p {
5119 - font-size: var(--text-sm);
4590 + font-size: 14px;
5120 4591 }
5121 4592
5122 4593 .frm-feature-banner .dismiss {
5123 4594 margin-top: -10px;
@@ -5152,31 +4623,29 @@
5152 4623 /*Form Settings Tab*/
5153 4624
5154 4625 h2.frm-h2,
5155 4626 .frm_form_settings h2 {
5156 - border-bottom: 1px solid var(--grey-300);
5157 - color: var(--grey-900);
5158 - 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;
5159 4631 padding: 9px 0 5px;
5160 4632 margin: 0;
5161 4633 }
5162 4634
5163 4635 .frm_settings_form h3,
5164 -.frm_form_settings h3,
5165 -.frm_form_settings span.frm_add_logic_link {
5166 - font-size: var(--text-md);
5167 - border-top: 1px solid var(--grey-300);
5168 - padding-top: var(--gap-sm);
5169 - 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;
5170 4640 font-weight: normal;
5171 4641 text-transform: uppercase;
5172 4642 color: var(--medium-grey);
5173 - display: block;
5174 4643 }
5175 4644
5176 4645 .frm_form_settings .howto {
5177 - color: var(--grey-500);
5178 - font-size: var(--text-sm);
4646 + color: var(--medium-grey);
4647 + font-size: 15px;
5179 4648 margin-top: 8px;
5180 4649 }
5181 4650
5182 4651 .frm_form_settings .advanced_settings .form-table {
@@ -5191,10 +4660,18 @@
5191 4660 width: 95%;
5192 4661 }
5193 4662
5194 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;
5195 4669 padding: 3px 0;
4670 + font-size: 15px;
5196 4671 max-height: 310px;
4672 + overflow-y: auto;
4673 + overflow-x: hidden;
5197 4674 }
5198 4675
5199 4676 .frm_wrap .ui-widget {
5200 4677 font-family: inherit;
@@ -5200,15 +4677,26 @@
5200 4677 font-family: inherit;
5201 4678 }
5202 4679
5203 4680 .frm_wrap .ui-autocomplete li {
5204 - padding: 2px 4px;
4681 + padding: 2px 10px;
5205 4682 background: none;
5206 - color: var(--grey-700);
4683 + color: var(--dark-grey);
5207 4684 border: none;
5208 4685 font-weight: normal;
5209 4686 }
5210 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 +
5211 4699 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5212 4700 border: none;
5213 4701 font-weight: inherit;
5214 4702 }
@@ -5247,9 +4735,9 @@
5247 4735 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5248 4736 height: 10px;
5249 4737 }
5250 4738
5251 -#frm_adv_info .frm_noallow {
4739 +.frm_page_container #frm_adv_info .frm_noallow {
5252 4740 display: none;
5253 4741 }
5254 4742
5255 4743 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5284,9 +4772,9 @@
5284 4772 #frm_notification_settings .widget-top .widget-action,
5285 4773 #frm_form_editor_container .widget-top .widget-action {
5286 4774 border: 0;
5287 4775 margin: 0;
5288 - padding: 8px;
4776 + padding: 10px;
5289 4777 background: 0 0;
5290 4778 cursor: pointer;
5291 4779 outline: 0;
5292 4780 }
@@ -5291,12 +4779,12 @@
5291 4779 outline: 0;
5292 4780 }
5293 4781
5294 4782 #frm_email_addon_menu {
5295 - border: 1px solid var(--grey-300);
5296 - padding: var(--gap-sm);
4783 + border: 1px solid var(--grey-border);
4784 + padding: 15px;
5297 4785 border-radius: 4px;
5298 - margin: var(--gap-md) 0 var(--gap-sm);
4786 + margin: 25px 0 15px;
5299 4787 }
5300 4788
5301 4789 #frm_email_addon_menu .frm-search {
5302 4790 float: right;
@@ -5307,12 +4795,8 @@
5307 4795 clear: none;
5308 4796 padding-top: 7px;
5309 4797 }
5310 4798
5311 -.frm_email_settings .widget .widget-top {
5312 - background-color: var(--sidebar-color);
5313 -}
5314 -
5315 4799 .frm_email_settings .widget .widget-top,
5316 4800 .frm_email_settings .widget .widget-top h3 {
5317 4801 cursor: pointer !important;
5318 4802 }
@@ -5317,17 +4801,23 @@
5317 4801 cursor: pointer !important;
5318 4802 }
5319 4803
5320 4804 .frm_email_settings .widget {
5321 - margin-bottom: var(--gap-sm);
4805 + margin-bottom: 15px;
4806 + line-height: 1.4em;
4807 + padding: 0;
5322 4808 }
5323 4809
4810 +.frm_email_settings .widget:last-of-type {
4811 + margin-bottom: 20px;
4812 +}
4813 +
5324 4814 .frm_form_action_settings .widget-top {
5325 4815 box-shadow: none;
5326 - border-color: var(--grey-300);
5327 - border-radius: var(--small-radius);
4816 + border-color: var(--grey-border);
4817 + border-radius: 4px;
5328 4818 background: var(--lightest-grey);
5329 - color: var(--grey-700);
4819 + color: var(--dark-grey);
5330 4820 }
5331 4821
5332 4822 .frm_form_action_settings:hover .widget-top {
5333 4823 border-color: var(--grey);
@@ -5339,9 +4829,9 @@
5339 4829 border-bottom: none;
5340 4830 }
5341 4831
5342 4832 .frm_form_action_settings.open:hover .widget-top {
5343 - border-color: var(--grey-300);
4833 + border-color: var(--grey-border);
5344 4834 }
5345 4835
5346 4836 .frm_form_action_settings > .widget-inside {
5347 4837 display: none;
@@ -5353,9 +4843,9 @@
5353 4843
5354 4844 .frm_form_action_settings .widget-inside {
5355 4845 min-height: 25px;
5356 4846 padding: 15px;
5357 - border-color: var(--grey-300);
4847 + border-color: var(--grey-border);
5358 4848 border-bottom-left-radius: 4px;
5359 4849 border-bottom-right-radius: 4px;
5360 4850 }
5361 4851
@@ -5363,14 +4853,14 @@
5363 4853 .frm_form_action_settings .widget-title h3 {
5364 4854 display: inline-block;
5365 4855 border-bottom: none;
5366 4856 padding: 10px 10px 5px;
5367 - font-size: var(--text-md);
4857 + font-size: 16px;
5368 4858 font-weight: 500;
5369 4859 }
5370 4860
5371 4861 #frm_email_addon_menu h3 {
5372 - margin: 0 0 var(--gap-sm);
4862 + margin: 0 0 15px;
5373 4863 clear: both;
5374 4864 }
5375 4865
5376 4866 .frm_single_api_settings p > label {
@@ -5406,9 +4896,9 @@
5406 4896 }
5407 4897
5408 4898 #frm-hide-groups,
5409 4899 #frm-show-groups {
5410 - font-size: var(--text-md);
4900 + font-size: 16px;
5411 4901 float: right;
5412 4902 }
5413 4903
5414 4904 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5415,16 +4905,16 @@
5415 4905 outline: none;
5416 4906 }
5417 4907
5418 4908 .frm_actions_list a {
5419 - font-size: var(--text-sm);
5420 - color: var(--grey-700);
4909 + font-size: 14px;
4910 + color: var(--dark-grey);
5421 4911 word-break: break-word;
5422 4912 }
5423 4913
5424 4914 .frm_actions_list span.frm-outer-circle {
5425 4915 /* 50px total with 30px content */
5426 - background-color: var(--grey-100);
4916 + background-color: var(--sidebar-color);
5427 4917 padding: 10px;
5428 4918 text-align: center;
5429 4919 border-radius: 50%;
5430 4920 display: block;
@@ -5430,13 +4920,12 @@
5430 4920 display: block;
5431 4921 width: 30px;
5432 4922 height: 30px;
5433 4923 margin: 0 auto 15px;
5434 - line-height: 1;
5435 4924 }
5436 4925
5437 4926 .frm_email_settings .widget-title h4 {
5438 - color: var(--grey-700);
4927 + color: var(--dark-grey);
5439 4928 }
5440 4929
5441 4930 .frm_disabled_action .widget-title h4 {
5442 4931 color: var(--grey);
@@ -5452,17 +4941,16 @@
5452 4941 }
5453 4942
5454 4943 span.frm-inner-circle,
5455 4944 .frm_email_settings .widget-title .frm_form_action_icon {
5456 - background-color: var(--grey-400);
4945 + background-color: var(--grey-border);
5457 4946 border-radius: 50%;
5458 4947 display: inline-block;
5459 4948 text-align: center;
5460 - line-height: 1;
5461 4949 }
5462 4950
5463 4951 span.frm-inner-circle {
5464 - background-color: var(--primary-700);
4952 + background-color: var(--primary-hover);
5465 4953 height: 22px;
5466 4954 width: 22px;
5467 4955 padding: 4px;
5468 4956 color: #fff;
@@ -5475,9 +4963,9 @@
5475 4963 .frm_email_settings .widget-title .frm_form_action_icon {
5476 4964 height: 15px;
5477 4965 width: 15px;
5478 4966 padding: 5px;
5479 - color: #fff;
4967 + color: var(--lightest-grey);
5480 4968 vertical-align: middle;
5481 4969 }
5482 4970
5483 4971 .frm_actions_list .frmsvg,
@@ -5498,9 +4986,9 @@
5498 4986 }
5499 4987
5500 4988 span.frm-inner-circle.frm-inverse {
5501 4989 background-color: transparent;
5502 - color: var(--primary-700);
4990 + color: var(--primary-hover);
5503 4991 padding: 0;
5504 4992 height: 30px;
5505 4993 width: 100%;
5506 4994 }
@@ -5506,9 +4994,9 @@
5506 4994 }
5507 4995
5508 4996 .frm_actions_list span.frm-inverse i,
5509 4997 .frm_actions_list span.frm-inverse .frmsvg {
5510 - color: var(--primary-700);
4998 + color: var(--primary-hover);
5511 4999 height: 30px;
5512 5000 width: 30px;
5513 5001 font-size: 30px;
5514 5002 padding: 0;
@@ -5520,9 +5008,9 @@
5520 5008 font-size: 30px;
5521 5009 }
5522 5010
5523 5011 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5524 - background: #fff;
5012 + background: transparent;
5525 5013 padding: 0;
5526 5014 height: 24px;
5527 5015 width: 24px;
5528 5016 }
@@ -5528,17 +5016,18 @@
5528 5016 }
5529 5017
5530 5018 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5531 5019 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5532 - color: var(--grey-400);
5020 + color: var(--grey-border);
5533 5021 height: 24px;
5534 5022 width: 24px;
5535 5023 font-size: 24px;
5024 + line-height: 1em;
5536 5025 }
5537 5026
5538 5027 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5539 5028 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5540 - color: var(--grey-500);
5029 + color: var(--grey);
5541 5030 }
5542 5031
5543 5032 .frm_email_icons {
5544 5033 padding: 10px 0 5px 6px;
@@ -5549,8 +5038,9 @@
5549 5038 margin-left: 8px;
5550 5039 color: var(--grey);
5551 5040 opacity: 0;
5552 5041 transition: all .2s ease;
5042 + vertical-align: middle;
5553 5043 }
5554 5044
5555 5045 .frm_email_icons a .frmsvg {
5556 5046 color: var(--grey);
@@ -5569,8 +5059,16 @@
5569 5059 .frm_actions_list .frm_inactive_action i {
5570 5060 opacity: .4;
5571 5061 }
5572 5062
5063 +.frm-no-margin {
5064 + margin: 0;
5065 +}
5066 +
5067 +.frm-no-border {
5068 + border: none !important;
5069 +}
5070 +
5573 5071 table td, .form-table tr td {
5574 5072 vertical-align: top;
5575 5073 }
5576 5074
@@ -5597,12 +5095,8 @@
5597 5095 #frm_notification_settings .frm_form_action_settings td p {
5598 5096 padding: 7px 0;
5599 5097 }
5600 5098
5601 -#permissions_settings_settings .frm_grid_container {
5602 - align-items: center;
5603 -}
5604 -
5605 5099 #frm_notification_settings .form-table > tbody > tr > th {
5606 5100 width: 150px;
5607 5101 font-weight: normal;
5608 5102 padding-right: 10px;
@@ -5624,8 +5118,9 @@
5624 5118 #frm_notification_settings .frm_left_label {
5625 5119 /* For add-ons that haven't been updated for 4.0 */
5626 5120 float: none;
5627 5121 width: auto !important;
5122 + line-height: 1;
5628 5123 }
5629 5124
5630 5125 .frm-fields .frm_autoresponder_rows select {
5631 5126 width: auto;
@@ -5638,17 +5133,16 @@
5638 5133 width: 100%;
5639 5134 }
5640 5135
5641 5136 #frm_notification_settings .frm_email_buttons {
5642 - padding: var(--gap-2xs);
5137 + padding: 7px;
5643 5138 background: var(--light-blue);
5644 - color: var(--primary-700);
5645 - border-radius: var(--small-radius);
5139 + color: var(--primary-hover);
5140 + border-radius: 4px;
5646 5141 border-color: var(--blue-border);
5647 - line-height: 1;
5142 + line-height: 1em;
5648 5143 height: auto;
5649 - min-height: 12px;
5650 - font-size: var(--text-xs);
5144 + font-size: 12px;
5651 5145 box-shadow: none;
5652 5146 }
5653 5147
5654 5148 .frm_reply_to_container,
@@ -5653,31 +5147,34 @@
5653 5147
5654 5148 .frm_reply_to_container,
5655 5149 .frm_bcc_cc_container {
5656 5150 float: right;
5657 - margin: -4px 0 0;
5151 + margin: -8px 0 0;
5658 5152 z-index: 1;
5659 5153 position: relative;
5660 5154 }
5661 5155
5662 5156 .frm_email_row .frm_cancel1_icon:before {
5157 + line-height: 1;
5663 5158 vertical-align: bottom;
5664 5159 }
5665 5160
5161 +.frm_action_id {
5162 + padding-top: 10px;
5163 +}
5164 +
5666 5165 .frm_logic_field_opts {
5667 5166 max-width: 35%;
5668 5167 }
5669 5168
5670 5169 .frm-inline-select,
5671 -p.frm-inline-select,
5672 5170 #frm_submit_logic_row,
5673 5171 .frm_logic_rows .frm-collapse-me {
5674 - line-height: var(--h-md) !important;
5172 + line-height: 30px;
5675 5173 }
5676 5174
5677 -.frm_logic_row {
5678 - padding: var(--gap-xs) 0 0;
5679 - align-items: center;
5175 +.frm_logic_row:first-of-type {
5176 + padding-top: 8px;
5680 5177 }
5681 5178
5682 5179 .frm-single-settings .frm_logic_row > select {
5683 5180 max-width: 32.5% !important;
@@ -5714,8 +5211,13 @@
5714 5211 margin-bottom: 0;
5715 5212 padding: 0;
5716 5213 }
5717 5214
5215 +.frm_form_settings input[type="text"] {
5216 + line-height: normal;
5217 + height: auto;
5218 +}
5219 +
5718 5220 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5719 5221 padding-bottom: 0;
5720 5222 }
5721 5223
@@ -5724,9 +5226,9 @@
5724 5226 padding-right: 15px;
5725 5227 }
5726 5228
5727 5229 #form_global_settings h3 {
5728 - font-size: var(--text-sm);
5230 + font-size: 14px;
5729 5231 margin-top: 25px;
5730 5232 }
5731 5233
5732 5234 #form_global_settings .tabs-panel + h3 {
@@ -5741,9 +5243,9 @@
5741 5243 border-top: 1px solid #eee;
5742 5244 border-bottom: none;
5743 5245 margin: 15px -15px 0;
5744 5246 padding: 8px 15px;
5745 - font-size: var(--text-sm);
5247 + font-size: 14px;
5746 5248 }
5747 5249
5748 5250 #poststuff .frm_form_settings h3.frm_first_h3,
5749 5251 #poststuff h3.frm_first_h3 {
@@ -5754,8 +5256,20 @@
5754 5256 h3.frm_add_logic_link {
5755 5257 margin-bottom: 0 !important;
5756 5258 }
5757 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 +
5758 5272 a.frm_add_logic_link.frm_hidden {
5759 5273 display: none;
5760 5274 }
5761 5275
@@ -5775,9 +5289,9 @@
5775 5289 bottom: 0;
5776 5290 }
5777 5291
5778 5292 .frm_right_addon input {
5779 - padding-right: var(--gap-lg);
5293 + padding-right: 30px;
5780 5294 }
5781 5295
5782 5296 .frm_icon_font {
5783 5297 color: #A0A0A0;
@@ -5783,12 +5297,8 @@
5783 5297 color: #A0A0A0;
5784 5298 color: var(--grey);
5785 5299 }
5786 5300
5787 -.frm-fields label .frm_icon_font {
5788 - font-size: inherit;
5789 -}
5790 -
5791 5301 .misc-pub-revisions.frm_icon_font,
5792 5302 .misc-pub-revisions.frm_icon_font:hover {
5793 5303 color: inherit;
5794 5304 }
@@ -5875,10 +5385,10 @@
5875 5385 position: relative;
5876 5386 top: 2px;
5877 5387 }
5878 5388
5879 -.frm-field-action-icons > a {
5880 - font-size: var(--text-md);
5389 +.frm-field-action-icons a {
5390 + font-size: 16px;
5881 5391 width: 17px;
5882 5392 }
5883 5393
5884 5394 .frm-field-action-icons a:hover {
@@ -5888,26 +5398,21 @@
5888 5398 .frm-field-action-icons .dropdown {
5889 5399 display: inline-block;
5890 5400 }
5891 5401
5892 -.frm-field-action-icons > a .frmsvg {
5893 - color: var(--grey-500) !important;
5402 +.frm-field-action-icons a .frmsvg {
5403 + color: #9EA9B8 !important;
5894 5404 font-size: 17px;
5895 5405 width: 17px;
5896 5406 height: 17px;
5897 5407 }
5898 5408
5899 -.frm-field-action-icons > a .frmsvg,
5900 -.frm-field-action-icons > div > a .frmsvg {
5901 - vertical-align: baseline;
5902 -}
5903 -
5904 5409 .edit_field_type_end_divider .frm-field-action-icons {
5905 5410 display: none !important;
5906 5411 }
5907 5412
5908 5413 .frm-move {
5909 - cursor: grab;
5414 + cursor: move;
5910 5415 }
5911 5416
5912 5417 span.howto {
5913 5418 display: inline;
@@ -5953,9 +5458,9 @@
5953 5458 margin-bottom: 10px;
5954 5459 }
5955 5460
5956 5461 .frm_no_entries_form .frm_no_entries_text {
5957 - line-height: var(--leading);
5462 + line-height: 200%;
5958 5463 }
5959 5464
5960 5465 #form_entries_page #the-list .no-items {
5961 5466 height: 240px; /* Equals to the max height of search dropdown */
@@ -5984,10 +5489,9 @@
5984 5489 }
5985 5490
5986 5491 .frm_wrap .google-visualization-table-tr-head,
5987 5492 .frm_wrap .google-visualization-table-tr-head th {
5988 - white-space: pre-wrap;
5989 - font-size: var(--text-md);
5493 + font-size: 16px;
5990 5494 font-weight: 400 !important;
5991 5495 text-align: left;
5992 5496 }
5993 5497
@@ -6003,8 +5507,12 @@
6003 5507 width: 20%;
6004 5508 min-width: 175px;
6005 5509 }
6006 5510
5511 +#form_reports_page h2 {
5512 + margin-top: 2em !important;
5513 +}
5514 +
6007 5515 /* Views Page */
6008 5516 #form_views_page img.frm_no_views {
6009 5517 max-width: 100%;
6010 5518 }
@@ -6114,9 +5622,9 @@
6114 5622 }
6115 5623
6116 5624 #frm-show-fields {
6117 5625 min-height: 350px;
6118 - padding: 0 0 35px;
5626 + padding: 10px 0 35px;
6119 5627 margin: 0;
6120 5628 position: relative;
6121 5629 }
6122 5630
@@ -6162,10 +5670,11 @@
6162 5670 .frm-field-group-hover-target #frm_field_group_controls {
6163 5671 visibility: visible;
6164 5672 }
6165 5673
6166 -#frm_field_group_controls .dropdown-item a span {
6167 - 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);
6168 5677 }
6169 5678
6170 5679 #frm_field_group_controls .dropdown-item a:hover {
6171 5680 text-decoration: none;
@@ -6281,16 +5790,15 @@
6281 5790 }
6282 5791
6283 5792 .frm-page-collapsed .frm_clone_icon,
6284 5793 .frm-page-collapsed .frm_delete_field,
6285 -.frm-page-collapsed .frm_clone_field,
6286 -.frm-section-collapsed .frm_clone_icon {
5794 +.frm-section-collapsed .frm_clone_icon,
5795 +.frm-section-collapsed .frm_delete_field {
6287 5796 opacity: .5;
6288 5797 cursor: not-allowed;
6289 5798 }
6290 5799
6291 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6292 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5800 +.edit_field_type_summary .frm_clone_field {
6293 5801 display: none !important;
6294 5802 }
6295 5803
6296 5804 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6322,9 +5830,9 @@
6322 5830 content: '';
6323 5831 display: block;
6324 5832 padding: 2px 0;
6325 5833 line-height: 1px;
6326 - border-top: 2px solid var(--grey-300);
5834 + border-top: 2px solid var(--grey-border);
6327 5835 top: -2px;
6328 5836 position: absolute;
6329 5837 width: 100%;
6330 5838 transition: .5s border-color ease-in-out;
@@ -6336,9 +5844,8 @@
6336 5844 }
6337 5845
6338 5846 .frm-section-collapsed .divider_section_only:hover:after,
6339 5847 li.selected.frm-section-collapsed .divider_section_only:before,
6340 -li.selected.frm-section-collapsed .divider_section_only:after,
6341 5848 .divider_section_only:hover:before,
6342 5849 li.selected .divider_section_only:before {
6343 5850 border-color: transparent;
6344 5851 }
@@ -6346,10 +5853,10 @@
6346 5853 .frm_sorting li.ui-state-default.edit_field_type_divider {
6347 5854 overflow: visible;
6348 5855 position: relative;
6349 5856 padding: 0 0 0 20px;
6350 - margin: 25px 0 0 -5px;
6351 - border-left: 1px solid var(--primary-700);
5857 + margin: 25px 0 0 -20px;
5858 + border-left: 1px solid var(--primary-hover);
6352 5859 transition: border 0.7s ease-out;
6353 5860 }
6354 5861
6355 5862 .frm-section-collapsed {
@@ -6357,9 +5864,9 @@
6357 5864 }
6358 5865
6359 5866 .frm_sorting li.edit_field_type_end_divider,
6360 5867 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6361 - margin: 0 0 var(--gap-sm);
5868 + margin: 0 0 15px;
6362 5869 }
6363 5870
6364 5871 .frm-first-page .frm_prev_page {
6365 5872 display: none;
@@ -6364,19 +5871,22 @@
6364 5871 .frm-first-page .frm_prev_page {
6365 5872 display: none;
6366 5873 }
6367 5874
6368 -#frm_builder_page .frm_remove_form_row.frm_button,
6369 -#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 {
6370 5879 border-radius: var(--small-radius);
6371 5880 border: 1px solid var(--blue-border);
5881 + color: var(--primary-color);
6372 5882 }
6373 5883
6374 -#frm_builder_page .frm_remove_form_row .frmsvg,
6375 -#frm_builder_page .frm_remove_form_row i:before,
5884 +.frm_wrap .frm_remove_form_row .frmsvg,
5885 +.frm_remove_form_row i:before,
6376 5886 .frm_wrap .frm_add_form_row .frmsvg,
6377 5887 .frm_add_form_row i:before {
6378 - color: var(--primary-700);
5888 + color: var(--primary-hover);
6379 5889 }
6380 5890
6381 5891 .frm-preview-buttons .frm_button_submit {
6382 5892 margin: 0 5px;
@@ -6382,10 +5892,10 @@
6382 5892 margin: 0 5px;
6383 5893 }
6384 5894
6385 5895 .frm-page-break {
6386 - border-top: 1px dashed var(--primary-700);
6387 - margin-top: var(--gap-lg);
5896 + border-top: 1px dashed var(--primary-hover);
5897 + margin-top: 30px;
6388 5898 position: relative;
6389 5899 }
6390 5900
6391 5901 .edit_field_type_divider:before,
@@ -6398,9 +5908,9 @@
6398 5908 width: 4px;
6399 5909 height: 4px;
6400 5910 background-color: #fff;
6401 5911 border-radius: 50%;
6402 - border: 1px solid var(--primary-700);
5912 + border: 1px solid var(--primary-hover);
6403 5913 text-rendering: auto;
6404 5914 -webkit-font-smoothing: antialiased;
6405 5915 }
6406 5916
@@ -6422,12 +5932,13 @@
6422 5932 width: 20px;
6423 5933 height: 20px;
6424 5934 left: -11px;
6425 5935 top: 0;
6426 - background: var(--primary-700);
5936 + background: var(--primary-hover);
6427 5937 text-align: center;
6428 5938 color: #fff;
6429 5939 font-size: 13px;
5940 + line-height: 22px;
6430 5941 }
6431 5942
6432 5943 .edit_field_type_divider:before{
6433 5944 font-family: 's11-fp';
@@ -6448,20 +5959,20 @@
6448 5959
6449 5960
6450 5961 .frm_sorting li.edit_field_type_divider:hover,
6451 5962 .frm_sorting li.edit_field_type_divider.selected {
6452 - border-left-color: var(--primary-500);
5963 + border-left-color: var(--primary-color);
6453 5964 }
6454 5965
6455 5966 .edit_field_type_divider.selected:before,
6456 5967 .edit_field_type_divider:hover:before {
6457 - border-color: var(--primary-500);
6458 - background: var(--primary-500);
5968 + border-color: var(--primary-color);
5969 + background: var(--primary-color);
6459 5970 }
6460 5971
6461 5972 .edit_field_type_divider.selected:after,
6462 5973 .edit_field_type_divider:hover:after {
6463 - border-color: var(--primary-500);
5974 + border-color: var(--primary-color);
6464 5975 }
6465 5976
6466 5977 .frm-section-collapsed:after {
6467 5978 border-color: transparent !important;
@@ -6469,11 +5980,19 @@
6469 5980 }
6470 5981
6471 5982 .frm-page-break .frm-collapse-page.button {
6472 5983 margin-left: 46%;
6473 - 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);
6474 5988 }
6475 5989
5990 +#frm-fake-page .frm-collapse-page.button {
5991 + border-color: var(--grey) !important;
5992 + color: var(--grey);
5993 +}
5994 +
6476 5995 #frm-fake-page.frm-page-collapsed {
6477 5996 margin-bottom: 0;
6478 5997 }
6479 5998
@@ -6479,15 +5998,15 @@
6479 5998
6480 5999 .frm-page-collapsed {
6481 6000 position: relative;
6482 6001 overflow: visible !important;
6483 - margin-bottom: var(--gap-lg);
6002 + margin-bottom: 30px;
6484 6003 }
6485 6004
6486 6005 .frm-page-collapsed:after {
6487 6006 content: '';
6488 6007 display: block;
6489 - border: 1px dashed var(--grey-300);
6008 + border: 1px dashed var(--grey-border);
6490 6009 border-left: none;
6491 6010 border-right: none;
6492 6011 height: 6px;
6493 6012 position: absolute;
@@ -6494,40 +6013,31 @@
6494 6013 width: calc( 100% - 10px );
6495 6014 bottom: -15px;
6496 6015 }
6497 6016
6498 -.frm-collapse-page .frmsvg,
6499 6017 .frm-collapse-page .frm_arrowdown6_icon {
6500 - width: var(--text-sm);
6501 - height: var(--text-sm);
6502 - font-size: var(--text-sm);
6018 + width: 16px;
6503 6019 text-align: center;
6504 6020 margin-left: 2px;
6505 - color: currentColor;
6021 + color: var(--primary-hover);
6506 6022 }
6507 6023
6508 6024 #frm-fake-page .frm_arrowdown6_icon {
6509 - color: currentColor;
6025 + color: var(--grey);
6510 6026 }
6511 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 +
6512 6034 .frm-collapsed i:before,
6035 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6513 6036 .frm-page-collapsed .frm_arrowdown6_icon:before {
6514 6037 content: '\e913';
6515 6038 }
6516 6039
6517 -.frm-collapse-section svg {
6518 - fill: var(--primary-color);
6519 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6520 -}
6521 -
6522 -.frm-collapse-section:hover svg {
6523 - fill: var(--primary-700);
6524 -}
6525 -
6526 -.frm-section-collapsed .frm-collapse-section svg {
6527 - transform: rotate(-90deg);
6528 -}
6529 -
6530 6040 .open .widget-top .frm_arrow_right_icon:before {
6531 6041 content: '\e62a';
6532 6042 }
6533 6043
@@ -6569,14 +6079,14 @@
6569 6079 .frm_no_section_fields {
6570 6080 text-align: center;
6571 6081 position: absolute;
6572 6082 color: var(--medium-grey);
6573 - font-size: var(--text-md);
6083 + font-size: 16px;
6574 6084 box-sizing: border-box;
6575 - border: 1px dashed var(--grey-300);
6085 + border: 2px dashed var(--primary-color);
6576 6086 }
6577 6087
6578 -.ui-droppable-active ~ .frm_no_fields {
6088 +.drop-me + .frm_no_fields {
6579 6089 border-style: solid;
6580 6090 }
6581 6091
6582 6092 .frm_no_section_fields {
@@ -6608,9 +6118,9 @@
6608 6118 display: block;
6609 6119 }
6610 6120
6611 6121 .frm-large-plus.frmsvg {
6612 - color: var(--primary-700);
6122 + color: var(--primary-hover);
6613 6123 height: 45px;
6614 6124 width: 45px;
6615 6125 }
6616 6126
@@ -6730,12 +6240,10 @@
6730 6240
6731 6241 .frm-category-tabs > li a,
6732 6242 .frm-category-tabs > li a:active {
6733 6243 outline: none;
6244 + -webkit-box-shadow: none;
6734 6245 box-shadow: none;
6735 - display: flex;
6736 - gap: var(--gap-xs);
6737 - align-items: center;
6738 6246 }
6739 6247
6740 6248 .frm-category-tabs > li.active .frmsvg,
6741 6249 .frm-category-tabs > li.active i,
@@ -6740,15 +6248,15 @@
6740 6248 .frm-category-tabs > li.active .frmsvg,
6741 6249 .frm-category-tabs > li.active i,
6742 6250 .frm-category-tabs > li.active span,
6743 6251 .frm-category-tabs > li.active a {
6744 - color: var(--primary-500);
6252 + color: var(--primary-color);
6745 6253 }
6746 6254
6747 6255 .frm_wrap .manage-menus {
6748 6256 margin-top: 0;
6749 6257 border: none;
6750 - border-bottom: 1px solid var(--grey-300);
6258 + border-bottom: 1px solid var(--grey-border);
6751 6259 background: var(--lightest-grey);
6752 6260 }
6753 6261
6754 6262 .general_settings .postbox .manage-menus {
@@ -6784,9 +6292,9 @@
6784 6292 padding-top: 10px;
6785 6293 }
6786 6294
6787 6295 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6788 - color: var(--grey-900);
6296 + color: var(--darkest-grey);
6789 6297 }
6790 6298
6791 6299 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6792 6300 box-shadow: none;
@@ -6802,14 +6310,14 @@
6802 6310 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6803 6311 .frm_update_msg,
6804 6312 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6805 6313 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6806 - border-color: var(--primary-500);
6314 + border-color: var(--primary-color);
6807 6315 transition: .5s border-color ease-in-out;
6808 6316 }
6809 6317
6810 6318 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6811 - box-shadow: 0 0 1px 0 var(--primary-500);
6319 + box-shadow: 0 0 1px 0 var(--primary-color);
6812 6320 }
6813 6321
6814 6322 .frm_sorting li.ui-state-default {
6815 6323 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6832,9 +6340,9 @@
6832 6340 font-weight: bold;
6833 6341 border: 1px solid #DFDFDF;
6834 6342 background-color: #EEEEEE;
6835 6343 padding: 3px 5px 2px;
6836 - font-size: var(--text-md);
6344 + font-size: 16px;
6837 6345 line-height: 20px;
6838 6346 }
6839 6347
6840 6348 .frm_update_msg {
@@ -6872,13 +6380,8 @@
6872 6380 .widefat .column-shortcode {
6873 6381 width: 9em;
6874 6382 }
6875 6383
6876 -.toplevel_page_formidable .column-shortcode div {
6877 - display: flex;
6878 - gap: var(--gap-xs);
6879 -}
6880 -
6881 6384 .widefat .column-entries, .widefat .column-link {
6882 6385 width: 10%;
6883 6386 text-align: center;
6884 6387 }
@@ -6886,22 +6389,23 @@
6886 6389 .widefat .column-form_key, .widefat .column-created_at {
6887 6390 width: 10%;
6888 6391 }
6889 6392
6890 -.frm-white-body .search-box,
6393 +.post-type-frm_display .search-box,
6891 6394 .frm_wrap .frm-search {
6892 6395 float: right;
6893 - margin: 0;
6396 + margin-bottom: 15px;
6894 6397 clear: right;
6895 6398 }
6896 6399
6897 -.frm-white-body .search-box,
6400 +#form_entries_page form .frm-search {
6401 + margin-top: 15px;
6402 +}
6403 +
6898 6404 .frm-search {
6899 - min-width: 32%;
6405 + width: 32%;
6406 + float: right;
6900 6407 position: relative;
6901 - display: flex;
6902 - gap: var(--gap-sm);
6903 - align-items: center;
6904 6408 }
6905 6409
6906 6410 .frm-inline-modal .frm-search,
6907 6411 #frm_adv_info .frm-search {
@@ -6907,9 +6411,9 @@
6907 6411 #frm_adv_info .frm-search {
6908 6412 float: none;
6909 6413 width: 100%;
6910 6414 clear: both;
6911 - margin: var(--gap-xs) 0;
6415 + margin: 5px 0 10px;
6912 6416 }
6913 6417
6914 6418 .frm-button-group a {
6915 6419 margin: 0 7px !important;
@@ -6926,9 +6430,9 @@
6926 6430
6927 6431 i.frm-show-box,
6928 6432 i.frm-show-inline-modal,
6929 6433 .frm-with-left-icon i,
6930 -.frm-with-right-icon i:not([class*=mce-]),
6434 +.frm-with-right-icon i,
6931 6435 .frmsvg.frm-show-box,
6932 6436 .frmsvg.frm-show-inline-modal,
6933 6437 .frm-with-left-icon .frmsvg,
6934 6438 .frm-with-right-icon .frmsvg,
@@ -6934,17 +6438,18 @@
6934 6438 .frm-with-right-icon .frmsvg,
6935 6439 .frm-search > .frmsvg,
6936 6440 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6937 6441 position: absolute;
6938 - padding: 0 14px;
6442 + padding: 7px 10px;
6939 6443 pointer-events: none;
6940 6444 left: 0;
6941 - color: var(--grey-400);
6942 - font-size: var(--text-xs);
6445 + color: var(--grey);
6446 + opacity: .5;
6447 + font-size: 18px;
6943 6448 }
6944 6449
6945 6450 .frm-with-right-icon .frmsvg,
6946 -.frm-with-right-icon i:not([class*=mce-]) {
6451 +.frm-with-right-icon i {
6947 6452 right: 0;
6948 6453 top: -3px;
6949 6454 left: auto;
6950 6455 padding: 0 10px 0 5px;
@@ -6949,35 +6454,20 @@
6949 6454 left: auto;
6950 6455 padding: 0 10px 0 5px;
6951 6456 }
6952 6457
6953 -.frm_form_settings .frm-with-right-icon .frmsvg {
6954 - top: 0;
6955 -}
6956 -
6957 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
6958 - top: auto;
6959 - bottom: 0;
6960 -}
6961 -
6962 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
6963 - top: auto;
6964 - bottom: 6px;
6965 -}
6966 -
6967 6458 .frmsvg.frm-show-box,
6968 6459 .frmsvg.frm-show-inline-modal,
6969 6460 i.frm-show-box,
6970 6461 i.frm-show-inline-modal {
6971 - color: var(--primary-500);
6462 + color: var(--primary-color);
6972 6463 pointer-events: initial;
6973 6464 cursor: pointer;
6974 6465 z-index: 1;
6975 6466 opacity: 1;
6467 + right: 2px;
6976 6468 top: auto;
6977 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
6978 - margin-bottom: 0;
6979 - padding: 0;
6469 + padding: 7px 10px;
6980 6470 }
6981 6471
6982 6472 .frm-open .frmsvg.frm-show-inline-modal,
6983 6473 .frm-open i.frm-show-inline-modal {
@@ -7000,9 +6490,9 @@
7000 6490
7001 6491 .frm_wrap .frm-with-right-icon textarea,
7002 6492 .frm_wrap .frm-with-right-icon input,
7003 6493 .frm_wrap .frm-with-right-icon input[type=text] {
7004 - padding-right: var(--gap-md);
6494 + padding-right: 35px;
7005 6495 }
7006 6496
7007 6497 #frm-show-fields .frm-with-left-icon .frmsvg,
7008 6498 #frm-show-fields .frm-with-left-icon i {
@@ -7008,29 +6498,43 @@
7008 6498 #frm-show-fields .frm-with-left-icon i {
7009 6499 padding-top: 10px;
7010 6500 }
7011 6501
6502 +.frm-search input.frm-search-input,
7012 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 +
7013 6514 .frm-search .dropdown-toggle,
7014 6515 .frm-search input.frm-search-input {
7015 - border-radius: var(--small-radius);
6516 + border-radius: var(--border-radius);
7016 6517 padding-left: 33px !important;
7017 - border-color: var(--grey-300);
7018 6518 }
7019 6519
7020 -.frm_wrap .frm-search .frm-search-input,
7021 -.frm-modal .frm-search .frm-search-input,
7022 -.frm-white-body .search-box input[name="s"], /* Views search */
7023 -.frm_wrap .frm-search input[name="s"] {
7024 - padding-top: 3px;
7025 - padding-bottom: 3px;
7026 - flex: 1;
7027 - 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;
7028 6526 }
7029 6527
7030 -.frm-search .dropdown-toggle {
6528 +.frm-search .dropdown-toggle,
6529 +.frm-search input.frm-auto-search {
7031 6530 width: 100%;
6531 + border-right-width: 1px;
6532 + border-radius: var(--border-radius) !important;
7032 6533 float: none;
6534 +}
6535 +
6536 +.frm-search .dropdown-toggle {
7033 6537 max-width: 200px;
7034 6538 background: transparent;
7035 6539 padding: 7px;
7036 6540 min-height: 32px;
@@ -7038,18 +6542,22 @@
7038 6542 overflow: hidden;
7039 6543 text-overflow: ellipsis;
7040 6544 }
7041 6545
7042 -span.multiselect-selected-text {
6546 +.frm-search span.multiselect-selected-text {
7043 6547 white-space: nowrap;
7044 - display: inline-block;
7045 - max-width: 90%;
7046 - text-overflow: ellipsis;
7047 - overflow: hidden;
6548 + display: inline-block;
7048 6549 }
7049 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 +
7050 6558 .frm-search #search-submit a {
7051 - color: var(--grey-800);
6559 + color: var(--primary-color);
7052 6560 }
7053 6561
7054 6562 .frm-search #search-submit .caret {
7055 6563 opacity:.7;
@@ -7055,15 +6563,15 @@
7055 6563 opacity:.7;
7056 6564 }
7057 6565
7058 6566 .frm-not-set input {
7059 - color: var(--primary-500) !important;
6567 + color: var(--primary-color) !important;
7060 6568 font-size: 13px;
7061 6569 }
7062 6570
7063 6571 .frm-not-set .frmsvg,
7064 6572 .frm-not-set i {
7065 - color: var(--primary-700);
6573 + color: var(--primary-hover);
7066 6574 opacity: 1;
7067 6575 }
7068 6576
7069 6577 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7131,9 +6639,9 @@
7131 6639
7132 6640 .post-type-frm_display #advanced-sortables h2.hndle,
7133 6641 .post-type-frm_display #side-sortables h2.hndle,
7134 6642 .post-type-frm_display #normal-sortables h2.hndle {
7135 - border-bottom: 1px solid var(--grey-300);
6643 + border-bottom: 1px solid var(--grey-border);
7136 6644 margin: 10px 0 0 !important;
7137 6645 padding: 0 25px 8px;
7138 6646 }
7139 6647
@@ -7142,9 +6650,9 @@
7142 6650 padding-top: 10px;
7143 6651 }
7144 6652
7145 6653 .post-type-frm_display #post-body-content {
7146 - margin-top: var(--gap-lg);
6654 + margin-top: 30px;
7147 6655 }
7148 6656
7149 6657 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7150 6658 margin: 0;
@@ -7151,15 +6659,15 @@
7151 6659 }
7152 6660
7153 6661 .post-type-frm_display .postbox .hndle,
7154 6662 .post-type-frm_display .postbox {
7155 - border-color: var(--grey-300);
6663 + border-color: var(--grey-border);
7156 6664 }
7157 6665
7158 6666 .post-type-frm_display #postbox-container-1 .postbox,
7159 6667 .post-type-frm_display #postbox-container-2 .postbox {
7160 6668 border-radius: var(--small-radius);
7161 - border-color: var(--grey-300);
6669 + border-color: var(--grey-border);
7162 6670 box-shadow: none;
7163 6671 }
7164 6672
7165 6673 .post-type-frm_display #side-sortables .postbox {
@@ -7238,9 +6746,9 @@
7238 6746 background-color: transparent;
7239 6747 }
7240 6748
7241 6749 .post-type-frm_display #major-publishing-actions {
7242 - border-color: var(--grey-300);
6750 + border-color: var(--grey-border);
7243 6751 background: var(--sidebar-color);
7244 6752 }
7245 6753
7246 6754 .post-type-frm_display #frm_adv_info {
@@ -7294,9 +6802,9 @@
7294 6802 .settings-lite-cta ul,
7295 6803 .settings-lite-cta p,
7296 6804 .settings-lite-cta {
7297 6805 color: #666;
7298 - font-size: var(--text-md);
6806 + font-size: 16px;
7299 6807 box-shadow: none !important;
7300 6808 }
7301 6809
7302 6810 .frm-info-modal h3,
@@ -7310,9 +6818,8 @@
7310 6818
7311 6819 .frm-info-modal .postbox .inside,
7312 6820 .settings-lite-cta .postbox .inside {
7313 6821 padding: 20px 40px;
7314 - margin: 0;
7315 6822 }
7316 6823
7317 6824 .cta-inside a {
7318 6825 color: var(--orange)
@@ -7318,15 +6825,21 @@
7318 6825 color: var(--orange)
7319 6826 }
7320 6827
7321 6828 .info-modal-inside a.frm-standard-link {
7322 - color: var(--primary-500);
6829 + color: var(--primary-color);
7323 6830 }
7324 6831
7325 6832 .info-modal-inside a.frm-standard-link:hover {
7326 - color: var(--primary-700);
6833 + color: var(--primary-hover);
7327 6834 }
7328 6835
6836 +.frm-caution {
6837 + text-transform: uppercase;
6838 + font-weight: bold;
6839 + color: var(--dark-grey);
6840 +}
6841 +
7329 6842 .frm_no_p_margin > p {
7330 6843 margin: 0;
7331 6844 }
7332 6845
@@ -7336,12 +6849,14 @@
7336 6849 font-size: 11px;
7337 6850 overflow: hidden;
7338 6851 }
7339 6852
6853 +.frm_code_list.frm-full-hover {
6854 + margin: 0 -20px;
6855 +}
6856 +
7340 6857 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7341 - margin: var(--gap-xs) 0 0;
7342 - min-width: 300px;
7343 - max-height: calc( ( 40px * 5 ) + 56px );
6858 + margin: 4px 0 0;
7344 6859 }
7345 6860
7346 6861 .frm_code_list.frm-full-hover li {
7347 6862 margin: 0;
@@ -7346,28 +6861,55 @@
7346 6861 .frm_code_list.frm-full-hover li {
7347 6862 margin: 0;
7348 6863 }
7349 6864
7350 -.frm-select-list-item,
7351 -.frm_wrap .ui-autocomplete li > div,
7352 -.multiselect-container button.multiselect-option,
7353 6865 .frm-dropdown-menu > .dropdown-item > a,
7354 -.frm-dropdown-menu > .dropdown-item > a:visited,
7355 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7356 6866 .frm-dropdown-menu .frm_dropdown_li,
7357 6867 .frm_code_list.frm-full-hover a {
7358 - display: flex;
7359 - color: var(--grey-700);
7360 - padding: 5px 10px;
7361 - font-size: var(--text-md);
7362 - gap: var(--gap-xs);
7363 - align-items: center;
6868 + display: block;
6869 + color: var(--dark-grey);
6870 + padding: 3px 25px;
6871 + font-size: 15px;
7364 6872 }
7365 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 +
7366 6906 .frm_code_list.frm-full-hover a span {
6907 + color: var(--grey);
6908 + float: right;
6909 + font-size: 14px;
7367 6910 max-width: 83px;
7368 6911 text-align: right;
7369 - margin-left: auto;
7370 6912 }
7371 6913
7372 6914 .frm_code_list.frm-full-hover a,
7373 6915 .frm_code_list.frm-full-hover a span {
@@ -7375,54 +6917,24 @@
7375 6917 overflow: hidden;
7376 6918 text-overflow: ellipsis;
7377 6919 }
7378 6920
7379 -.frm_code_list.frm-full-hover.frmcenter a {
7380 - display: block;
7381 -}
7382 -
7383 -#frm-layout-classes frm-full-hover a span {
7384 - max-width: 45%;
7385 -}
7386 -
7387 -.frm-select-list-item.active,
7388 -.frm-select-list-item:hover,
7389 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7390 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7391 -.multiselect-container button.multiselect-option.active,
7392 -.multiselect-container button.multiselect-option:hover,
7393 6921 .frm-dropdown-menu > .dropdown-item > a:hover,
7394 6922 .frm_code_list.frm-full-hover a:hover span,
7395 6923 .frm_code_list.frm-full-hover a:hover {
7396 - background: var(--primary-25);
7397 - color: var(--primary-500);
7398 - border-radius: var(--small-radius);
6924 + background: var(--sidebar-color);
6925 + color: var(--primary-color);
7399 6926 }
7400 6927
7401 -.frm-select-list-item .frmsvg,
7402 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7403 - opacity: .8;
7404 -}
7405 -
7406 -.frm-select-list-item:hover .frmsvg,
7407 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7408 - opacity: 1;
7409 -}
7410 -
7411 6928 .frm-dropdown-menu.frm_code_list > li > a {
7412 6929 padding: 3px 15px;
7413 6930 width: 300px;
7414 6931 }
7415 6932
7416 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7417 -.frm-dropdown-menu .frm-with-search {
7418 - padding: var(--gap-xs) 10px 0;
6933 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6934 + padding: 3px 10px;
7419 6935 }
7420 6936
7421 -.frm-dropdown-menu .subsubsub {
7422 - padding: 0 10px;
7423 -}
7424 -
7425 6937 .frm_grid_container {
7426 6938 overflow: visible;
7427 6939 }
7428 6940
@@ -7438,16 +6950,16 @@
7438 6950 .frm_code_list.frm_grid_container a {
7439 6951 padding: 5px 0;
7440 6952 text-align: center;
7441 6953 background-color: var(--light-blue);
7442 - border: 1px solid var(--primary-500);
7443 - color: var(--primary-500);
6954 + border: 1px solid var(--primary-color);
6955 + color: var(--primary-color);
7444 6956 display: block;
7445 6957 border-radius: var(--small-radius);
7446 6958 }
7447 6959
7448 6960 .frm_code_list.frm_grid_container a:hover {
7449 - background-color: var(--primary-700);
6961 + background-color: var(--primary-hover);
7450 6962 color: #fff;
7451 6963 }
7452 6964
7453 6965 .frm_field_list #frm-insert-fields .button a {
@@ -7455,15 +6967,10 @@
7455 6967 max-width: 95%;
7456 6968 overflow: hidden;
7457 6969 }
7458 6970
7459 -.field_type_list.frm_grid_container {
7460 - gap: var(--gap-xs) var(--gap-sm);
7461 - margin: var(--gap-xs);
7462 -}
7463 -
7464 6971 .field_type_list li {
7465 - margin: 0;
6972 + margin: 0 0 10px;
7466 6973 padding: 0;
7467 6974 }
7468 6975
7469 6976 #frm-insert-fields .frm-search {
@@ -7475,13 +6982,22 @@
7475 6982 #frm-insert-fields li,
7476 6983 #frm-insert-fields li a {
7477 6984 text-decoration: none;
7478 6985 font-weight: normal;
7479 - font-size: var(--text-md) !important;
7480 - color: var(--grey-900);
6986 + font-size: 15px !important;
6987 + color: var(--dark-grey);
7481 6988 }
7482 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 +
7483 6996 #frm-insert-fields li.frm_show_upgrade {
6997 + margin: 0 0 10px;
6998 + padding: 5px 20px;
6999 + box-sizing: border-box;
7484 7000 cursor: pointer;
7485 7001 opacity: .5;
7486 7002 }
7487 7003
@@ -7488,11 +7004,14 @@
7488 7004 #frm-insert-fields li a span {
7489 7005 vertical-align: middle;
7490 7006 }
7491 7007
7492 -.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 +
7493 7012 #frm-insert-fields li a:not(.disabled):hover {
7494 - background: var(--grey-100);
7013 + background: var(--sidebar-hover);
7495 7014 }
7496 7015
7497 7016 #frm-insert-fields li a.disabled:hover {
7498 7017 cursor: not-allowed;
@@ -7514,9 +7033,9 @@
7514 7033 .frmsvg {
7515 7034 fill: currentColor;
7516 7035 width: 18px;
7517 7036 height: 18px;
7518 - vertical-align: middle;
7037 + vertical-align: text-bottom;
7519 7038 }
7520 7039
7521 7040 input[disabled],
7522 7041 .frmsvg svg {
@@ -7542,27 +7061,40 @@
7542 7061 width: 13px;
7543 7062 height: 13px;
7544 7063 }
7545 7064
7065 +.frm_code_list a .frmsvg,
7546 7066 .frmbutton.ui-sortable-helper .frmsvg,
7547 7067 .field_type_list li.frmbutton .frmsvg,
7068 +.frm_code_list a i,
7548 7069 .frmbutton.ui-sortable-helper i,
7549 -.field_type_list li.frmbutton i,
7550 -.frm_code_list a .frmsvg,
7551 -.frm_code_list a i {
7552 - color: var(--grey-500);
7070 +.field_type_list li.frmbutton i {
7071 + margin: .15em .2em;
7072 + color: var(--grey);
7553 7073 display: inline-block;
7554 7074 vertical-align: middle;
7555 - width: var(--text-md);
7556 - font-size: var(--text-md);
7075 + width: 20px;
7076 + height: 20px;
7077 + padding-right: 15px;
7078 + text-align: left;
7079 + font-size: 18px;
7557 7080 }
7558 7081
7559 -/* Standardize icon size for field buttons in the builder */
7560 -.field_type_list li.frmbutton .frmsvg {
7561 - width: var(--text-xl);
7562 - font-size: var(--text-xl);
7082 +/* Icon for Name field is larger */
7083 +.field_type_list li.frm_tname.frmbutton .frmsvg {
7084 + width: 24px;
7085 + height: 24px;
7086 + padding-right: 11px;
7563 7087 }
7564 7088
7089 +.frm_code_list a .frmsvg,
7090 +.frm_code_list a i {
7091 + margin: 0 5px 0 0;
7092 + padding: 0;
7093 + width: 15px;
7094 + font-size: 15px;
7095 +}
7096 +
7565 7097 .frm_code_list i:before {
7566 7098 font-size: inherit;
7567 7099 }
7568 7100
@@ -7567,36 +7099,40 @@
7567 7099 }
7568 7100
7569 7101 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7570 7102 #frm-insert-fields li a:not(.disabled):hover i {
7571 - color: var(--grey-600);
7103 + color: var(--dark-grey);
7572 7104 }
7573 7105
7574 -/* Icon while dragging */
7575 7106 .frmbutton.ui-draggable-dragging {
7576 - pointer-events: none;
7107 + width: auto !important;
7577 7108 }
7578 7109
7579 -#frm-insert-fields li.frm_show_upgrade,
7580 -#frm-insert-fields li a,
7110 +/* Icon while dragging */
7111 +.frmbutton.ui-draggable-dragging,
7581 7112 .frmbutton.ui-draggable-dragging a {
7582 - text-decoration: none;
7583 - display: inline-flex !important;
7584 - gap: var(--gap-xs);
7585 - align-items: center;
7586 - border-radius: var(--border-radius) !important;
7587 - padding: var(--gap-xs) var(--gap-sm) !important;
7588 - color: var(--grey-900) !important;
7113 + cursor: move;
7589 7114 }
7590 7115
7591 -/* Adjust field button size to full width in builder */
7592 -#frm-insert-fields li a {
7593 - display: flex !important;
7116 +.frmbutton.ui-sortable-helper a,
7117 +.frmbutton.ui-draggable-dragging a:hover,
7118 +.frmbutton.ui-draggable-dragging a {
7119 + text-decoration: none;
7120 + height: 25px !important;
7121 + width: 180px;
7122 + text-align: center;
7123 + display: block !important;
7124 + background-color: var(--primary-hover) !important;
7125 + border-radius: 35px !important;
7126 + padding: 5px 20px !important;
7127 + color: #fff !important;
7594 7128 }
7595 7129
7596 -.frmbutton.ui-draggable-dragging a {
7597 - border: 1px solid var(--grey-300);
7598 - 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;
7599 7135 }
7600 7136
7601 7137 .frmbutton.ui-draggable-dragging span {
7602 7138 font-size: 15px;
@@ -7602,18 +7138,23 @@
7602 7138 font-size: 15px;
7603 7139 }
7604 7140
7605 7141 #frm-show-fields .frmbutton.ui-sortable-helper i,
7142 +.frmbutton.ui-sortable-helper span,
7606 7143 .frmbutton.ui-draggable-dragging i,
7607 7144 .frmbutton.ui-draggable-dragging .frmsvg {
7608 7145 color: #fff !important;
7609 7146 }
7610 7147
7611 -.frmbutton.ui-draggable-dragging i,
7612 -.frmbutton.ui-draggable-dragging .frmsvg {
7613 - 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;
7614 7151 }
7615 7152
7153 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7154 + display: none;
7155 +}
7156 +
7616 7157 .frm_sorting li.ui-state-default.ui-sortable-helper,
7617 7158 .frmbutton.ui-sortable-helper {
7618 7159 transition: opacity .2s;
7619 7160 opacity: 1;
@@ -7618,13 +7159,10 @@
7618 7159 transition: opacity .2s;
7619 7160 opacity: 1;
7620 7161 }
7621 7162
7622 -.frm-field-group-count {
7623 - background-color: var(--sidebar-hover);
7624 - padding: 5px;
7625 - color: #fff !important;
7626 - border-radius: 10px;
7163 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7164 + opacity: 0;
7627 7165 }
7628 7166
7629 7167 /* End dragging */
7630 7168
@@ -7650,64 +7188,13 @@
7650 7188 .frm_noallow a {
7651 7189 color: inherit;
7652 7190 }
7653 7191
7654 -#frm_upgrade_modal_image {
7655 - max-width: 200px;
7656 -}
7657 -
7658 -.frm-tab-message {
7659 - max-width: 600px;
7660 - margin: 20px auto;
7661 - color: rgba(63, 75, 91, 0.8);
7662 -}
7663 -
7664 -.frm-settings-screenshot-toolbar {
7665 - min-height: 39px;
7666 - display: flex;
7667 -}
7668 -
7669 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7670 - height: 8px;
7671 - width: 8px;
7672 - border-radius: 50%;
7673 - align-self: center;
7674 - margin-left: 10px;
7675 -}
7676 -
7677 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7678 - margin-left: 20px;
7679 -}
7680 -
7681 -.frm-settings-screenshot-toolbar img {
7682 - object-fit: contain;
7683 - align-self: flex-end;
7684 - margin-left: 25px;
7685 -}
7686 -
7687 -.frm-settings-screenshot-toolbar + div {
7688 - background: #fff;
7689 - padding-top: 25px;
7690 - border-radius: 0 0 16px 16px;
7691 -}
7692 -
7693 -.frm-settings-screenshot-toolbar + div img {
7694 - max-width: calc( 100% - 40px );
7695 -}
7696 -
7697 -.frm-settings-screenshot-wrapper {
7698 - max-width: 700px;
7699 - margin: 50px auto 0;
7700 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7701 - border-radius: 16px;
7702 - background: #EBECF1;
7703 -}
7704 -
7705 7192 .frm-dialog {
7706 7193 z-index: 100;
7707 7194 padding: 0 !important;
7708 - border-radius: 16px;
7709 - border: none;
7195 + border-radius: 10px;
7196 + border: 1px solid var(--grey);
7710 7197 background-color: #fff;
7711 7198 max-width: 100% !important;
7712 7199 }
7713 7200
@@ -7714,14 +7201,20 @@
7714 7201 .frm-dialog .postbox {
7715 7202 background: transparent;
7716 7203 box-shadow: none;
7717 7204 border: none;
7718 - line-height: var(--leading);
7719 7205 }
7720 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 +
7721 7214 .frm-dialog input[type=text],
7722 7215 .frm-dialog textarea {
7723 - font-size: var(--text-md);
7216 + font-size: 16px;
7724 7217 }
7725 7218
7726 7219 .frm-dialog textarea {
7727 7220 height: 75px;
@@ -7734,16 +7227,14 @@
7734 7227 .frm-dialog .frm-sub-label,
7735 7228 .frm-sub-label {
7736 7229 color: var(--grey);
7737 7230 text-transform: none;
7738 - padding-left: 8px;
7739 7231 }
7740 7232
7741 7233 h2 .frm-sub-label {
7742 - font-size: var(--text-md);
7234 + font-size: 16px;
7743 7235 }
7744 7236
7745 -.frm-views-editor-body .ui-widget-overlay,
7746 7237 .frm-white-body .ui-widget-overlay,
7747 7238 .toplevel_page_formidable .ui-widget-overlay {
7748 7239 position: fixed;
7749 7240 width: 100%;
@@ -7751,10 +7242,9 @@
7751 7242 top: 0;
7752 7243 left: 0;
7753 7244 right: 0;
7754 7245 bottom: 0;
7755 - background: var(--grey-500);
7756 - opacity: .5;
7246 + background: var(--grey-border);
7757 7247 z-index: 2;
7758 7248 }
7759 7249
7760 7250 #frm_upgrade_modal {
@@ -7769,15 +7259,15 @@
7769 7259 color: #c4c4c4;
7770 7260 padding-bottom: 20px;
7771 7261 }
7772 7262
7773 -.frm-upgrade-message img {
7263 +#frm-upgrade-message img {
7774 7264 max-width: 100%;
7775 7265 }
7776 7266
7777 7267 a.frm-link-secondary {
7778 7268 color: #c4c4c4;
7779 - font-size: var(--text-sm);
7269 + font-size: 14px;
7780 7270 text-decoration: underline;
7781 7271 }
7782 7272
7783 7273 .field_type_list li.button.frm_noallow,
@@ -7820,9 +7310,8 @@
7820 7310 opacity: 0;
7821 7311
7822 7312 /* Custom rules */
7823 7313 z-index: 9999999;
7824 - pointer-events: none;
7825 7314 }
7826 7315
7827 7316 .tooltip.show {
7828 7317 opacity: 0.9;
@@ -7982,25 +7471,93 @@
7982 7471 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
7983 7472 padding: 10px 40px;
7984 7473 border-top-color: #ccc;
7985 7474 background: var(--sidebar-color);
7986 - color: var(--grey-700);
7475 + color: var(--dark-grey);
7987 7476 border-radius: 0;
7988 7477 opacity: 1;
7989 - font-size: var(--text-sm);
7478 + font-size: 14px;
7990 7479 }
7991 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 +
7992 7494 #frm_custom_css_box {
7993 7495 width: 100%;
7994 7496 }
7995 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 +
7996 7554 /*form inputs/selects */
7997 7555 .frm_form_field.frm_scroll_box .frm_opt_container,
7998 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
7999 -.frm-white-body .wrap input[type="search"],
8000 -.frm-white-body .wrap input[type="number"],
8001 -.frm-white-body .wrap select,
8002 -.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,
8003 7560 button.frm_choose_image_box,
8004 7561 #titlediv input[type="text"],
8005 7562 .frm-fields button.btn,
8006 7563 .frm_wrap textarea,
@@ -8005,11 +7562,9 @@
8005 7562 .frm-fields button.btn,
8006 7563 .frm_wrap textarea,
8007 7564 .frm_wrap input[type="tel"],
8008 7565 .frm_wrap input[type="text"],
8009 -.frm_wrap input[type=search],
8010 7566 .frm_wrap input[type="number"],
8011 -.frm_wrap input[type="date"],
8012 7567 .frm_wrap select,
8013 7568 .wp-admin .frm_wrap select,
8014 7569 .field-group textarea,
8015 7570 .field-group input[type="text"],
@@ -8016,33 +7571,17 @@
8016 7571 .field-group select {
8017 7572 outline: 0;
8018 7573 box-shadow: none;
8019 7574 border-radius: var(--small-radius);
8020 - padding: 5px 14px;
8021 - border-color: var(--grey-300);
8022 - color: var(--grey-800);
8023 - font-size: var(--text-md);
7575 + padding: 6px 9px;
7576 + border-color: var(--grey-border);
7577 + color: var(--dark-grey);
7578 + font-size: 15px;
8024 7579 margin: 0;
8025 7580 background-color: #fff;
8026 - line-height: var(--leading);
7581 + line-height: 1;
8027 7582 }
8028 7583
8029 -.frm_wrap ::-webkit-datetime-edit {
8030 - line-height: var(--leading);
8031 -}
8032 -
8033 -.frm-white-body textarea:focus,
8034 -.frm-white-body input:focus,
8035 -.frm-white-body select:focus,
8036 -.frm_wrap input:focus,
8037 -.frm_wrap select:focus,
8038 -.wp-core-ui .frm_wrap select:focus,
8039 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8040 -.frm_wrap textarea:focus {
8041 - border-color: var(--primary-500) !important;
8042 - box-shadow: none !important;
8043 -}
8044 -
8045 7584 #postbox-container-2 textarea,
8046 7585 .frm_wrap textarea,
8047 7586 .field-group textarea {
8048 7587 line-height: 2;
@@ -8059,12 +7598,19 @@
8059 7598 .wp-admin .frm_wrap select {
8060 7599 max-width: 100%;
8061 7600 }
8062 7601
8063 -.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"] {
8064 7606 padding: 10px 12px;
8065 7607 }
8066 7608
7609 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7610 + padding: 6px 9px;
7611 +}
7612 +
8067 7613 .frm_wrap input[disabled],
8068 7614 .frm_wrap select[disabled],
8069 7615 .frm_wrap textarea[disabled],
8070 7616 .frm_wrap input[readonly],
@@ -8070,23 +7616,37 @@
8070 7616 .frm_wrap input[readonly],
8071 7617 .frm_wrap select[readonly],
8072 7618 .frm_wrap textarea[readonly],
8073 7619 .frm_wrap input::placeholder {
8074 - color: var(--grey-500);
7620 + color: var(--grey);
8075 7621 }
8076 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 +
8077 7633 #postcustomstuff table td > div {
8078 7634 /* To override some inline css in add-on */
8079 7635 padding-top: 0 !important;
8080 7636 }
8081 7637
8082 -.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;
8083 7643 vertical-align: top;
8084 7644 }
8085 7645
8086 7646 .frm_wrap .frm_form_builder select {
8087 - line-height: var(--leading);
8088 - height: var(--text-md);
7647 + line-height: 40px;
7648 + height: 40px;
8089 7649 width: 100%;
8090 7650 }
8091 7651
8092 7652 #postbox-container-2 select,
@@ -8092,25 +7652,11 @@
8092 7652 #postbox-container-2 select,
8093 7653 .wp-admin .frm_wrap select,
8094 7654 .frm_wrap .frm_form_builder select {
8095 7655 height: auto;
8096 - background-position: right 11px top 55%;
7656 + padding: 0 24px 0 12px;
8097 7657 }
8098 7658
8099 -.frm-white-body .tablenav select,
8100 -.frm-white-body .tablenav input[type="text"],
8101 -.wp-admin .frm_wrap .tablenav select,
8102 -.frm_wrap .tablenav input[type="date"],
8103 -.frm_wrap .tablenav input[type="text"] {
8104 - padding-top: 0;
8105 - padding-bottom: 0;
8106 - line-height: 1;
8107 -}
8108 -
8109 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8110 - line-height: 1;
8111 -}
8112 -
8113 7659 .frm-fields button.btn,
8114 7660 .frm-fields textarea,
8115 7661 .frm-fields input[type="text"],
8116 7662 .frm-fields select,
@@ -8122,9 +7668,10 @@
8122 7668 outline: 0;
8123 7669 }
8124 7670
8125 7671 .frm-fields button.btn {
8126 - height: var(--h-md);
7672 + line-height: normal;
7673 + height: auto;
8127 7674 text-align: inherit;
8128 7675 }
8129 7676
8130 7677 .global-font .field-group input[type="text"] {
@@ -8165,9 +7712,9 @@
8165 7712 }
8166 7713
8167 7714 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8168 7715 background: #fff !important;
8169 - border-color: var(--primary-500);
7716 + border-color: var(--primary-color);
8170 7717 }
8171 7718
8172 7719 .frm_images_dropdown .frm_text_label_for_image {
8173 7720 padding: 0;
@@ -8195,9 +7742,9 @@
8195 7742 }
8196 7743
8197 7744 .windows::-webkit-scrollbar-thumb,
8198 7745 .windows ::-webkit-scrollbar-thumb {
8199 - background: var(--grey-300);
7746 + background: var(--grey-border);
8200 7747 -webkit-border-radius: var(--border-radius);
8201 7748 -webkit-box-shadow: none;
8202 7749 }
8203 7750
@@ -8219,9 +7766,8 @@
8219 7766 .rtl #frm_top_bar #frm_bs_dropdown {
8220 7767 padding-left: 15px;
8221 7768 }
8222 7769
8223 -.rtl .frm-full-close,
8224 7770 .rtl .frm_wrap .columns-2 .frm-right-panel,
8225 7771 .rtl .frm-right-panel {
8226 7772 border-right-width: 1px;
8227 7773 border-left-width: 0;
@@ -8226,14 +7772,9 @@
8226 7772 border-right-width: 1px;
8227 7773 border-left-width: 0;
8228 7774 }
8229 7775
8230 -.rtl .frm-full-close {
8231 - padding-left: 0;
8232 - padding-right: var(--gap-md);
8233 -}
8234 -
8235 -.rtl .frm-text-right {
7776 +.rtl .frm_right_text {
8236 7777 text-align: left;
8237 7778 }
8238 7779
8239 7780 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8278,39 +7819,22 @@
8278 7819 right: unset;
8279 7820 left: 2px;
8280 7821 }
8281 7822
7823 +.rtl #frm_upgrade_modal .dismiss i,
7824 +.rtl .frm-inline-modal i,
7825 +.rtl #frm-bulk-modal i,
8282 7826 .rtl .frm_has_shortcodes > i {
8283 7827 right: auto;
8284 7828 left: 5px;
8285 7829 }
8286 7830
7831 +.rtl .frm_code_list.frm-full-hover a span,
8287 7832 .rtl .frm_reply_to_container,
8288 7833 .rtl .frm_bcc_cc_container {
8289 7834 float: left;
8290 7835 }
8291 7836
8292 -.rtl .frm-default-switcher {
8293 - float: left;
8294 - position: relative;
8295 -}
8296 -
8297 -.rtl .frm-with-right-icon .frmsvg {
8298 - right: auto;
8299 - left: 0;
8300 -}
8301 -
8302 -.rtl .frm-inline-modal > a.dismiss {
8303 - left: 13px;
8304 - right: auto;
8305 -}
8306 -
8307 -.rtl.wp-admin .frm_wrap select {
8308 - padding-left: var(--gap-lg) !important;
8309 - padding-right: 5px !important;
8310 - background-position: left 11px top 55%;
8311 -}
8312 -
8313 7837 /* ---------------------------------------------------------------
8314 7838 Clearfix
8315 7839 --------------------------------------------------------------- */
8316 7840 span.clear {
@@ -8352,12 +7876,15 @@
8352 7876 @media only screen and (max-width: 1200px) {
8353 7877 .frm-addons {
8354 7878 grid-template-columns: 1fr 1fr;
8355 7879 }
7880 +
7881 + ul.frm_form_nav > li {
7882 + margin-right: 2.5%;
7883 + }
8356 7884 }
8357 7885
8358 7886 @media only screen and (max-width: 1050px) {
8359 - .frm-white-body,
8360 7887 .frm_wrap {
8361 7888 --biggest-sidebar: 390px;
8362 7889 }
8363 7890
@@ -8367,18 +7894,15 @@
8367 7894
8368 7895 .frm_actions_list {
8369 7896 margin-left: 0;
8370 7897 }
7898 +
7899 + ul.frm_form_nav > li {
7900 + margin-right: 1.5%;
7901 + }
8371 7902 }
8372 7903
8373 7904 @media only screen and (max-width: 960px) {
8374 - .frm-white-body,
8375 - .frm_wrap {
8376 - --gap-sm: 8px;
8377 - --gap-md: 16px;
8378 - --gap-2xl: 24px;
8379 - }
8380 -
8381 7905 .auto-fold #adminmenuwrap {
8382 7906 width: 36px;
8383 7907 }
8384 7908
@@ -8389,32 +7913,36 @@
8389 7913 p.howto {
8390 7914 display: inline-block;
8391 7915 }
8392 7916
8393 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8394 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8395 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8396 - left: 36px;
7917 + ul.frm_form_nav {
7918 + clear: left;
7919 + padding-top: 0;
8397 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 + }
8398 7937 }
8399 7938
8400 7939 @media only screen and (max-width: 850px) {
8401 - #frm_bs_dropdown {
8402 - /* There isn't enough room for the title on a screen this size so just hide it. */
8403 - display: none;
8404 - }
8405 -
8406 - .frm-white-body,
8407 7940 .frm_wrap {
8408 7941 --biggest-sidebar: 350px;
8409 7942 --big-sidebar: 350px;
8410 7943 }
8411 7944
8412 - #frm_bs_dropdown .frm_bstooltip {
8413 - /* There isn't enough room for the title on a screen this size so just hide it. */
8414 - display: none !important;
8415 - }
8416 -
8417 7945 .frm_col_one {
8418 7946 clear: none;
8419 7947 }
8420 7948
@@ -8423,9 +7951,10 @@
8423 7951 display: block;
8424 7952 margin: 5px 0;
8425 7953 }
8426 7954
8427 - #frm_top_bar h1 {
7955 + .post-type-frm_display #frm_top_bar h1,
7956 + .frm_page_container #frm_top_bar h1 {
8428 7957 width: auto;
8429 7958 max-width: 200px;
8430 7959 }
8431 7960
@@ -8495,9 +8024,8 @@
8495 8024 }
8496 8025 }
8497 8026
8498 8027 @media only screen and (max-width: 782px) {
8499 - .frm-white-body,
8500 8028 .frm_wrap {
8501 8029 --small-sidebar: 20%;
8502 8030 --medium-sidebar: 35%
8503 8031 }
@@ -8511,9 +8039,9 @@
8511 8039 .frm_wrap #publishing-action {
8512 8040 line-height: normal;
8513 8041 }
8514 8042
8515 - .frm-white-body #screen-meta-links {
8043 + .frm-full-screen #screen-meta-links {
8516 8044 display: none;
8517 8045 }
8518 8046
8519 8047 .frm_wrap .misc-pub-section {
@@ -8572,13 +8100,8 @@
8572 8100 .with_frm_style .frm_checkbox input[type=checkbox] {
8573 8101 width: 25px !important;
8574 8102 }
8575 8103
8576 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8577 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8578 - width: 18px !important;
8579 - }
8580 -
8581 8104 .wp-list-table.toplevel_page_formidable .column-entries,
8582 8105 .wp-list-table.toplevel_page_formidable .column-form_key,
8583 8106 .wp-list-table.toplevel_page_formidable .column-shortcode,
8584 8107 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8592,13 +8115,27 @@
8592 8115 padding: 3px 8px 3px 35%;
8593 8116 text-align: left;
8594 8117 }
8595 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 +
8596 8129 #form_entries_page .wp-list-table th.frm_hidden,
8597 8130 #form_entries_page .wp-list-table td.frm_hidden {
8598 8131 display: none !important;
8599 8132 }
8600 8133
8134 + ul.frm_form_nav > li {
8135 + margin-right: 15px;
8136 + }
8137 +
8601 8138 .frm-white-body.auto-fold #wpcontent {
8602 8139 padding-left: 0;
8603 8140 }
8604 8141
@@ -8609,13 +8146,11 @@
8609 8146 .frm-addons {
8610 8147 grid-template-columns: 1fr;
8611 8148 }
8612 8149
8613 - .frm-admin-page-styles .frm_page_container,
8614 - .frm_wrap .frm_page_container {
8615 - left: 0 !important;
8616 - top: 46px !important;
8617 - height: calc( 100vh - 46px ) !important;
8150 + .frm_single_entry_page.frm_wrap .frm_page_container {
8151 + height: auto;
8152 + display: block;
8618 8153 }
8619 8154
8620 8155 .frm_single_entry_page.frm_wrap .columns-2 {
8621 8156 display: block;
@@ -8633,14 +8168,13 @@
8633 8168 border-radius: 6px;
8634 8169 }
8635 8170
8636 8171 #wp-content-media-buttons a.frm_insert_form {
8637 - padding: 0 var(--gap-sm);
8172 + padding: 0 15px;
8638 8173 }
8639 8174 }
8640 8175
8641 8176 @media only screen and (max-width: 700px) {
8642 - .frm-white-body,
8643 8177 .frm_wrap {
8644 8178 --biggest-sidebar: 50%;
8645 8179 --big-sidebar: 50%;
8646 8180 }
@@ -8646,9 +8180,8 @@
8646 8180 }
8647 8181 }
8648 8182
8649 8183 @media only screen and (max-width: 600px) {
8650 - .frm-white-body,
8651 8184 .frm_wrap {
8652 8185 --small-sidebar: 45px;
8653 8186 }
8654 8187
@@ -8654,9 +8187,9 @@
8654 8187
8655 8188 .frm-form-setting-tabs a {
8656 8189 visibility: collapse;
8657 8190 font-size: 0;
8658 - padding: 0 var(--gap-sm);
8191 + padding: 0 15px;
8659 8192 }
8660 8193
8661 8194 .frm-form-setting-tabs a .frmsvg,
8662 8195 .frm-form-setting-tabs a i {
@@ -8728,12 +8261,8 @@
8728 8261 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8729 8262 right: auto;
8730 8263 left: 0;
8731 8264 }
8732 -
8733 - .frm_on_submit_type svg {
8734 - display: none;
8735 - }
8736 8265 }
8737 8266
8738 8267 @media only screen and (max-width: 475px) {
8739 8268 #frm_bs_dropdown {
@@ -8749,18 +8278,8 @@
8749 8278 margin-right: 0;
8750 8279 }
8751 8280 }
8752 8281
8753 -/* Firefox */
8754 -@-moz-document url-prefix() {
8755 - .frm-white-body .tablenav select,
8756 - .frm-white-body .tablenav input[type="text"],
8757 - .wp-admin .frm_wrap .tablenav select,
8758 - .frm_wrap .tablenav input[type="text"] {
8759 - padding-top: 5px;
8760 - }
8761 -}
8762 -
8763 8282 /* PRINT */
8764 8283 @media print {
8765 8284 a, .misc-pub-section a {
8766 8285 color: #000 !important;
@@ -8811,9 +8330,9 @@
8811 8330 display: block;
8812 8331 padding: 20px;
8813 8332 }
8814 8333
8815 - .frm_wrap .columns-2,
8334 + .frm_page_container .columns-2,
8816 8335 .frm_wrap .frm_page_container {
8817 8336 height: auto;
8818 8337 display: block;
8819 8338 }
@@ -8850,10 +8369,9 @@
8850 8369 width: 100%;
8851 8370 }
8852 8371 }
8853 8372
8854 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8855 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8373 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8856 8374 display: inline-block;
8857 8375 }
8858 8376
8859 8377 /* Change the order of subfields of the Name field in the backend */
@@ -8860,12 +8378,16 @@
8860 8378 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8861 8379 order: 2;
8862 8380 }
8863 8381
8382 +.frm-video-wrapper {
8383 + padding: 0 20px;
8384 +}
8385 +
8864 8386 .frm-video-wrapper iframe {
8865 8387 width: 100%;
8866 8388 max-width: 843px;
8867 - border-radius: var(--border-radius);
8389 + border-radius: 10px;
8868 8390 }
8869 8391
8870 8392 #frm_field_group_popup {
8871 8393 position: absolute;
@@ -8928,9 +8450,9 @@
8928 8450 }
8929 8451
8930 8452 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8931 8453 #frm_field_group_popup .frm-row-layout-option:hover {
8932 - outline: 1px solid var(--primary-500);
8454 + outline: 1px solid var(--primary-color);
8933 8455 }
8934 8456
8935 8457 .frm-custom-field-group-layout,
8936 8458 .frm-break-field-group {
@@ -8935,9 +8457,9 @@
8935 8457 .frm-custom-field-group-layout,
8936 8458 .frm-break-field-group {
8937 8459 padding: 5px 15px;
8938 8460 cursor: pointer;
8939 - font-size: var(--text-sm);
8461 + font-size: 14px;
8940 8462 line-height: 19px;
8941 8463 color: rgba(40, 47, 54, 0.85);
8942 8464 }
8943 8465
@@ -9009,17 +8531,22 @@
9009 8531 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9010 8532 pointer-events: none;
9011 8533 }
9012 8534
9013 -.frm-sortable-helper {
9014 - /* Make sure the item being dragged appears above other form builder fields */
9015 - 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;
9016 8543 }
9017 8544
9018 8545 #frm_banner {
9019 8546 width: 100%;
9020 8547 color: #fff;
9021 - background: var(--primary-500);
8548 + background: var(--primary-color);
9022 8549 height: 40px;
9023 8550 line-height: 40px;
9024 8551 text-align: center;
9025 8552 position: relative;
@@ -9049,89 +8576,4 @@
9049 8576
9050 8577 .frm-banner-dismiss .frmsvg {
9051 8578 vertical-align: top;
9052 8579 }
9053 -
9054 -.frm-ready-made-solution:not(.frm-search-result) {
9055 - display: none !important;
9056 -}
9057 -
9058 -#frm_new_form_modal .frm-ready-made-solution {
9059 - padding: var(--gap-xs) !important;
9060 - margin: var(--gap-xs) 0 var(--gap-sm);
9061 - display: flex;
9062 - gap: var(--gap-sm);
9063 - position: relative;
9064 - overflow: visible !important;
9065 -}
9066 -
9067 -#frm_new_form_modal .frm-ready-made-solution:after {
9068 - width: 100%;
9069 - height: 1px;
9070 - background: var(--grey-300);
9071 - content: '';
9072 - position: absolute;
9073 - bottom: -10px;
9074 - left: 0;
9075 -}
9076 -
9077 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9078 - content: none;
9079 -}
9080 -
9081 -#frm_new_form_modal .frm-solution-details {
9082 - flex: 1;
9083 - display: flex;
9084 - gap: var(--gap-2xs);
9085 - flex-direction: column;
9086 -}
9087 -
9088 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9089 - width: 30%;
9090 - text-align: center;
9091 -}
9092 -
9093 -.frm-ready-made-solution h3 ~ a {
9094 - color: var(--primary-500);
9095 -}
9096 -
9097 -.frm-ready-made-solution img {
9098 - max-width: 100%;
9099 - display: block;
9100 - box-shadow: var(--box-shadow-lg);
9101 -}
9102 -
9103 -/* On Submit action */
9104 -.frm_single_on_submit_settings .frm_form_field {
9105 - margin: 8px 0;
9106 -}
9107 -
9108 -.frm_on_submit_type_setting {
9109 - padding: 8px 0;
9110 -}
9111 -
9112 -.frm_on_submit_type label {
9113 - display: flex;
9114 - border: 1px solid var(--grey-border);
9115 - border-radius: var(--small-radius);
9116 - gap: 16px;
9117 - padding: 16px;
9118 - align-items: center;
9119 - justify-content: center;
9120 -}
9121 -
9122 -.frm_on_submit_type input {
9123 - opacity: 0 !important;
9124 - position: absolute;
9125 - z-index: -1;
9126 -}
9127 -
9128 -.frm_on_submit_type input[type="radio"]:checked + label {
9129 - border-color: var(--primary-color);
9130 - box-shadow: 0 0 0 1px var(--primary-color);
9131 -}
9132 -
9133 -#form_settings_page .frm_on_submit_type label:hover,
9134 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9135 - color: var(--primary-color);
9136 -}
9137 -/* End On Submit action */