PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.4
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.4
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 +1467 -1932 6.35.4 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,11 +144,10 @@
219 144 .frm_wrap .tablenav {
220 145 margin-bottom: 10px;
221 146 }
222 147
223 -.frm-white-body .tablenav .actions select,
224 148 .wp-admin .frm_wrap .tablenav select {
225 - margin-right: var(--gap-xs);
149 + margin-right: 6px;
226 150 }
227 151
228 152 .tablenav .actions .button {
229 153 margin-top: 1px;
@@ -241,17 +165,17 @@
241 165 background: #fff;
242 166 }
243 167
244 168 .frm-white-body table.widefat th {
245 - font-size: var(--text-md);
169 + font-size: 16px;
246 170 }
247 171
248 172 .frm-white-body table.widefat th a {
249 - color: var(--grey-700);
173 + color: var(--dark-grey);
250 174 }
251 175
252 176 .frm-white-body table.widefat strong a {
253 - color: var(--primary-700);
177 + color: var(--primary-hover);
254 178 }
255 179
256 180 .frm-scroll-box {
257 181 clear: both;
@@ -256,9 +180,9 @@
256 180 .frm-scroll-box {
257 181 clear: both;
258 182 overflow: auto;
259 183 max-height: 405px;
260 - border: 1px solid var(--grey-300);
184 + border: 1px solid var(--grey-border);
261 185 border-radius: var(--small-radius);
262 186 }
263 187
264 188 .frm_form_field.frm_scroll_box .frm_opt_container {
@@ -263,9 +187,9 @@
263 187
264 188 .frm_form_field.frm_scroll_box .frm_opt_container {
265 189 height: 100px;
266 190 overflow: auto;
267 - border: 1px solid var(--grey-300);
191 + border: 1px solid var(--grey-border);
268 192 }
269 193
270 194 .frm-short-list {
271 195 overflow: auto;
@@ -272,9 +196,9 @@
272 196 max-height: 190px;
273 197 }
274 198
275 199 .frm-white-body table.frm-border td {
276 - font-size: var(--text-sm);
200 + font-size: 14px;
277 201 }
278 202
279 203 .frm-white-body .striped > tbody > :nth-child(odd) {
280 204 background-color: #fff;
@@ -288,149 +212,56 @@
288 212 float: right;
289 213 }
290 214
291 215 #frm_top_bar {
292 - display: flex;
293 - gap: var(--gap-sm);
216 + display: block;
294 217 width: 100%;
295 - height: 72px;
218 + max-height: 100px;
219 + padding: 25px 40px 25px;
296 220 margin: 0;
297 221 box-sizing: border-box;
298 222 text-align: center;
299 - padding: 0 var(--gap-md);
300 223 }
301 224
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);
225 +.post-type-frm_display:not(.edit-php) #frm_top_bar,
226 +.frm-full-screen.post-type-frm_display #frm_top_bar,
227 +.frm_page_container #frm_top_bar {
228 + border-bottom: 1px solid var(--grey-border);
229 + padding: 0 20px;
310 230 overflow: visible;
311 231 }
312 232
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;
233 +.frm-full-screen #frm_top_bar {
234 + padding: 0 15px !important;
320 235 }
321 236
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 237 .frm-upgrade-bar {
403 - background: rgba(188, 224, 253, 0.23);
238 + text-align: center;
239 + background: var(--sidebar-color);
404 240 border-bottom: 1px solid var(--sidebar-hover);
405 - padding: 3px 0 3px 40px;
241 + padding: 3px 0;
406 242 font-size: 95%;
407 243 }
408 244
409 245 .frm-upgrade-bar span {
410 - opacity: .9;
246 + opacity: .5;
411 247 }
412 248
413 249 a h1 .frmsvg {
414 - color: var(--grey-400);
415 - vertical-align: middle;
416 - min-width: var(--text-sm);
250 + color: var(--medium-grey);
251 + vertical-align: baseline;
417 252 }
418 253
419 -a .frmsvg {
420 - color: currentColor;
421 -}
422 -
423 254 .frm_wrap .view-switch a.current:before,
424 -.frm-white-body a,
425 -.frm_wrap a,
426 -.frm_wrap a i {
255 +a .frmsvg,
256 +.frm_wrap a i,
257 +.frm_wrap a {
427 258 color: var(--primary-color);
428 259 }
429 260
430 261 .frm_wrap a:active,
431 262 .frm_wrap a:hover {
432 - color: var(--primary-700);
263 + color: var(--primary-hover);
433 264 box-shadow: none;
434 265 }
435 266
436 267 .post-type-frm_display a:focus,
@@ -444,30 +275,34 @@
444 275 white-space: nowrap;
445 276 max-width: 250px;
446 277 overflow: hidden;
447 278 text-overflow: ellipsis;
448 - align-self: center;
449 279 }
450 280
451 -.post-type-frm_display .frm_top_left,
452 281 .frm_top_left.frm_top_wide {
453 282 max-width: 100%;
454 283 }
455 284
456 -.post-type-frm_display .frm_nav_bar .frm-header-logo,
457 -.frm_nav_bar .frm-header-logo {
458 - margin: 18px 0 10px;
285 +.frm-header-logo,
286 +.edit-php.post-type-frm_display .frm-header-logo {
287 + float: left;
288 + margin: 0 15px 0 0;
459 289 }
460 290
461 -#frm_top_bar .frm_form_nav {
462 - flex: 1;
291 +.frm-full-screen.post-type-frm_display .frm-header-logo,
292 +.post-type-frm_display .frm-header-logo,
293 +.frm_page_container .frm-header-logo {
294 + margin: 13px 0 0;
463 295 }
464 296
297 +.frm_page_container .frm-header-logo {
298 + margin-bottom: 6px;
299 +}
300 +
465 301 ul.frm_form_nav {
466 302 margin: 0 auto;
467 - padding-top: 18px;
303 + padding-top: 19px;
468 304 display: block;
469 - min-width: 240px;
470 305 }
471 306
472 307 .nav-tab-wrapper.frm_form_nav {
473 308 padding: 0 25px;
@@ -473,12 +308,16 @@
473 308 padding: 0 25px;
474 309 }
475 310
476 311 ul.frm_form_nav > li {
477 - margin: 0 min(3.5%, 32px) 0 0;
312 + margin: 0 3.5% 0 0;
478 313 display: inline-block;
479 314 }
480 315
316 +ul.frm_form_nav > li:last-of-type {
317 + margin-right: 0;
318 +}
319 +
481 320 .post-type-frm_display #advanced-sortables h2.hndle,
482 321 .post-type-frm_display #side-sortables h2.hndle,
483 322 .post-type-frm_display #normal-sortables h2.hndle,
484 323 .post-type-frm_display .frm_form_nav .nav-tab-active,
@@ -485,12 +324,13 @@
485 324 .frm_form_nav > li > a {
486 325 font-size: 1.3em;
487 326 text-decoration: none;
488 327 display: block;
489 - padding: 6px 2px 4px;
328 + padding: 5px 2px 15px;
490 329 font-weight: 500;
491 - color: var(--grey-700);
492 - border-bottom: 2px solid transparent;
330 + color: var(--dark-grey);
331 + border-bottom: 3px solid transparent;
332 + letter-spacing: 1px;
493 333 }
494 334
495 335 .post-type-frm_display.js .postbox .handlediv .toggle-indicator:before {
496 336 margin-top: 10px;
@@ -505,15 +345,15 @@
505 345 box-shadow: none;
506 346 }
507 347
508 348 .frm_form_nav > li > a {
509 - font-size: var(--text-md);
510 - font-weight: 400;
511 - color: var(--grey-500);
349 + font-size: 13px;
350 + text-transform: uppercase;
351 + opacity: .8;
512 352 }
513 353
514 354 .frm_form_nav > li > a:hover {
515 - border-color: var(--primary-700);
355 + border-color: var(--primary-hover);
516 356 }
517 357
518 358 .frm_form_nav .frm-dropdown-menu a:hover {
519 359 background-color: #eaf2fa;
@@ -521,27 +361,25 @@
521 361
522 362 .post-type-frm_display .frm_form_nav .nav-tab-active,
523 363 .post-type-frm_display .frm_form_nav .nav-tab-active:hover,
524 364 .frm_form_nav > li a.current_page {
525 - color: var(--primary-500);
526 - border-color: var(--primary-500);
365 + color: var(--primary-color);
366 + border-color: var(--primary-color);
527 367 background: transparent;
528 368 opacity: 1;
529 - font-weight: 600;
530 369 }
531 370
532 371 .frm-full-close {
533 372 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 */
373 + float: right;
374 + padding: 15px 0 14px 12px;
375 + border-left: 1px solid var(--grey-border);
537 376 height: 100%;
538 377 box-sizing: border-box;
539 378 }
540 379
541 380 .frm-full-screen .frm-full-close {
542 - display: flex;
543 - align-items: center;
381 + display: block;
544 382 }
545 383
546 384 .frm-full-close a {
547 385 display: block;
@@ -550,49 +388,57 @@
550 388 .frm-full-close .frmsvg {
551 389 font-size: 20px;
552 390 width: 20px;
553 391 height: 20px;
554 - color: var(--grey-500);
392 + padding: 5px;
393 + color: var(--grey);
555 394 }
556 395
557 -#frm_top_bar h1 {
396 +.edit-php.post-type-frm_display #frm_top_bar h1,
397 +.frm_wrap #frm_top_bar h1 {
398 + font-size: 22px;
558 399 font-weight: 400;
559 400 padding: 0;
560 401 margin: 0;
561 - color: var(--grey-900);
562 - display: inline-flex;
563 - gap: var(--gap-sm);
564 - align-items: center;
402 + color: var(--medium-grey);
403 + display: inline-block;
404 + line-height: 1.4;
405 +}
406 +
407 +.frm-full-screen.post-type-frm_display #frm_top_bar h1,
408 +.post-type-frm_display #frm_top_bar h1,
409 +.frm_page_container #frm_top_bar h1 {
410 + margin: 0 15px;
411 + padding: 20px 0 0;
565 412 text-align: left;
566 413 width: 200px;
414 + line-height: 1.16;
567 415 }
568 416
569 -#frm_top_bar h1 span {
417 +.frm-full-screen.post-type-frm_display #frm_top_bar h1 span,
418 +.post-type-frm_display #frm_top_bar h1 span,
419 +.frm_page_container #frm_top_bar h1 span {
420 + font-size: 19px;
570 421 max-width: 175px;
571 422 text-overflow: ellipsis;
572 423 overflow: hidden;
573 424 white-space: nowrap;
574 425 display: inline-block;
575 - vertical-align: bottom;
576 426 }
577 427
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;
428 +#frm_top_bar h1,
429 +#frm_top_bar h2 {
430 + color: var(--medium-grey);
585 431 }
586 432
587 -#frm_top_bar .frm-header-logo {
588 - display: flex; /* Get rid of extra padding below logo */
433 +#frm_top_bar #frm_bs_dropdown {
434 + float: left;
589 435 }
590 436
591 437 #frm_top_bar h2 {
592 438 float: left;
593 - margin: 0 0 0 var(--gap-sm);
594 - padding: 2px 0 2px var(--gap-sm);
439 + margin: 0 0 0 15px;
440 + padding: 2px 0 2px 15px;
595 441 font-weight: normal;
596 442 border-left: 2px solid var(--grey);
597 443 }
598 444
@@ -600,19 +446,28 @@
600 446 margin-top: 0;
601 447 }
602 448
603 449 #frm-publishing {
450 + float: right;
451 + margin-top: 15px;
604 452 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;
453 + max-width: 325px;
454 + min-height: 10px;
611 455 }
612 456
457 +#frm-publishing #publishing-action,
458 +#frm-publishing #preview-action,
459 +#frm-preview-action,
460 +#frm-publishing > input[type=submit],
461 +#frm-publishing > .button,
462 +#frm-publishing > button,
463 +#frm-embed-action {
464 + float: right;
465 + margin: 0 10px 0 0;
466 +}
467 +
613 468 .frm_wrap .postbox {
614 - border-color: var(--grey-300);
469 + border-color: var(--grey-border);
615 470 border-radius: 6px;
616 471 box-shadow: none;
617 472 }
618 473
@@ -620,9 +475,9 @@
620 475 cursor: default;
621 476 padding: 10px 20px;
622 477 margin: 0;
623 478 line-height: 1.4em;
624 - border-color: var(--grey-300);
479 + border-color: var(--grey-border);
625 480 }
626 481
627 482 .frm-pre-hndle {
628 483 font-size: 15px;
@@ -633,12 +488,8 @@
633 488 .frm-empty-row {
634 489 display: none;
635 490 }
636 491
637 -.frm-child-row {
638 - box-shadow: 5px 0px 0px 0px inset var(--sidebar-hover);
639 -}
640 -
641 492 .frm_animate_bg {
642 493 transition: background 200ms linear, color 200ms linear;
643 494 }
644 495
@@ -646,48 +497,16 @@
646 497 clear: both;
647 498 margin: 0;
648 499 }
649 500
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 */
501 +.frm_wrap .frm_page_container {
657 502 height: calc( 100vh - 32px );
658 503 display: flex;
659 504 flex-direction: column;
660 505 overflow: hidden;
661 506 padding-top: 0;
662 - position: fixed;
663 - top: 32px;
664 - bottom: 0;
665 - left: 0;
666 - right: 0;
667 507 }
668 508
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 509 .frm-full-screen.frm-admin-page-entries .frm_page_container,
691 510 .frm-new-entry .frm_page_container,
692 511 .frm-admin-page-reports .frm_page_container,
693 512 .frm_list_entry_page .frm_page_container {
@@ -698,22 +517,16 @@
698 517 .frm-new-entry .columns-2 {
699 518 border: none;
700 519 }
701 520
702 -.frm-white-body #frm_top_bar,
703 -.frm-white-body .columns-2 {
521 +.frm_wrap #frm_top_bar,
522 +.frm_wrap .columns-2 {
704 523 flex: 0 0 auto;
705 524 }
706 525
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 526 .frm_wrap #post-body-content {
714 527 padding-bottom: 0;
715 - padding-top: var(--gap-sm);
528 + padding-top: 20px;
716 529 margin-bottom: 0;
717 530 background: #fff;
718 531 width: auto;
719 532 float: none;
@@ -719,17 +532,16 @@
719 532 float: none;
720 533 flex: 2;
721 534 }
722 535
723 -.frm-white-body .columns-2 {
536 +.frm_wrap .columns-2 {
724 537 flex: 1;
725 538 display: flex;
726 539 overflow: hidden;
727 540 }
728 541
729 -.frm-white-body .columns-2 > div {
542 +.frm_wrap .columns-2 > div {
730 543 overflow-y: auto;
731 - box-sizing: border-box;
732 544 }
733 545
734 546 .frm_wrap .columns-2 .frm-right-panel,
735 547 .frm-right-panel {
@@ -776,9 +588,9 @@
776 588
777 589 .frm-default-switcher a.current,
778 590 .frm-default-switcher a.current .frmsvg,
779 591 .frm-default-switcher a.current i {
780 - color: var( --primary-500);
592 + color: var( --primary-color);
781 593 }
782 594
783 595 #new_fields,
784 596 .frm-has-modal,
@@ -786,15 +598,41 @@
786 598 position: relative;
787 599 }
788 600
789 601 .frm-inline-modal.postbox {
602 + border-color: var(--blue-border);
790 603 background: #fff;
791 604 }
792 605
606 +#frm_upgrade_modal .dismiss .frmsvg,
607 +.frm-inline-modal .frmsvg,
608 +#frm-bulk-modal .frmsvg,
609 +.frm_has_shortcodes > .frmsvg,
610 +#frm_upgrade_modal .dismiss i,
611 +.frm-inline-modal i,
612 +#frm-bulk-modal i,
613 +.frm_has_shortcodes > i {
614 + top: 37px;
615 + right: 5px;
616 + margin-top: -9px;
617 + padding: 5px;
618 + font-size: 10px;
619 + height: 10px;
620 + width: 10px;
621 + line-height: 9px;
622 + font-weight: bold;
623 +}
624 +
625 +#frm_upgrade_modal .dismiss .frmsvg,
626 +.frm-inline-modal .frmsvg,
627 +#frm-bulk-modal .frmsvg,
793 628 .frm_has_shortcodes .frmsvg,
794 -.frm_has_shortcodes i:not([class*=mce-]) {
629 +#frm_upgrade_modal .dismiss i,
630 +.frm-inline-modal i,
631 +#frm-bulk-modal i,
632 +.frm_has_shortcodes i {
795 633 position: absolute;
796 - color: var(--primary-500);
634 + color: var(--primary-color);
797 635 border-radius: 50%;
798 636 border: 1px solid transparent;
799 637 z-index: 100;
800 638 text-align: center;
@@ -799,8 +637,51 @@
799 637 z-index: 100;
800 638 text-align: center;
801 639 }
802 640
641 +#frm_info_modal .dismiss .frmsvg,
642 +#frm_confirm_modal .dismiss .frmsvg,
643 +#frm_upgrade_modal .dismiss .frmsvg,
644 +#frm_info_modal .dismiss i,
645 +#frm_confirm_modal .dismiss i,
646 +#frm_upgrade_modal .dismiss i {
647 + top: 7px;
648 + right: 7px;
649 +}
650 +
651 +#frm-bulk-modal .frmsvg,
652 +#frm-bulk-modal i {
653 + top: 15px;
654 + right: 7px;
655 +}
656 +
657 +.frm-inline-modal .frmsvg,
658 +.frm-inline-modal i {
659 + top: 18px;
660 + right: 7px;
661 + font-size: 11px;
662 + height: 11px;
663 + width: 11px;
664 +}
665 +
666 +#frm_upgrade_modal .dismiss:hover .frmsvg,
667 +.frm-inline-modal .dismiss:hover .frmsvg,
668 +#frm-bulk-modal .dismiss:hover .frmsvg,
669 +#frm_upgrade_modal .dismiss i:hover,
670 +.frm-inline-modal i:hover,
671 +#frm-bulk-modal i:hover {
672 + background: var(--sidebar-color);
673 +}
674 +
675 +#frm_upgrade_modal .dismiss .frmsvg,
676 +.frm-inline-modal .dismiss .frmsvg,
677 +#frm-bulk-modal .dismiss .frmsvg,
678 +#frm_upgrade_modal .dismiss .frm_close_icon,
679 +.frm-inline-modal .frm_close_icon,
680 +#frm-bulk-modal .frm_close_icon {
681 + border-color: var(--primary-color);
682 +}
683 +
803 684 .frm_has_shortcodes input,
804 685 .frm_has_shortcodes textarea {
805 686 padding-left: 18px;
806 687 box-sizing: border-box;
@@ -807,11 +688,13 @@
807 688 }
808 689
809 690 #form_settings_page #frm_adv_info {
810 691 display: none;
692 + position: absolute;
811 693 top: 0;
812 - width: 310px;
813 - max-height: 315px;
694 + left: 0;
695 + width: 300px;
696 + max-height: 350px;
814 697 min-height: 200px;
815 698 overflow-y: scroll;
816 699 z-index: 100;
817 700 }
@@ -822,14 +705,10 @@
822 705 width: var(--small-sidebar);
823 706 min-width: var(--small-sidebar);
824 707 }
825 708
826 -#form_global_settings .frm_grid_container {
827 - gap: 0 var(--gap-md);
828 -}
829 -
830 709 .frm-inner-content {
831 - padding: var(--gap-md);
710 + padding: 10px 25px;
832 711 }
833 712
834 713 .post-type-frm_display #poststuff {
835 714 padding: 0 0 10px 40px;
@@ -895,17 +774,18 @@
895 774 }
896 775
897 776 .frm-right-panel .frm_field_list #frm-insert-fields {
898 777 max-height: none;
899 - font-size: var(--text-sm);
778 + font-size: 14px;
900 779 padding: 0;
901 780 }
902 781
903 -.frm-nav-tabs {
782 +.frm-nav-tabs,
783 +#frm-bulk-modal h2 {
904 784 margin: 10px 0 20px;
905 - padding: 0 var(--gap-sm);
785 + padding: 0 15px;
906 786 display: block;
907 - border-bottom: 1px solid var(--grey-300);
787 + border-bottom: 2px solid var(--sidebar-hover);
908 788 }
909 789
910 790 #frm-nav-tabs {
911 791 position: -webkit-sticky;
@@ -916,20 +796,11 @@
916 796 margin-top: 0;
917 797 padding-top: 5px;
918 798 }
919 799
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 800 .frm-inline-modal .frm-nav-tabs,
930 801 #frm_adv_info .frm-nav-tabs {
931 - margin: 5px 0 0;
802 + margin: 5px 0 10px;
932 803 }
933 804
934 805 #frm_adv_info .frm-nav-tabs.frm-compact-nav {
935 806 padding-right: 0;
@@ -935,25 +806,23 @@
935 806 padding-right: 0;
936 807 padding-left: 20px;
937 808 }
938 809
810 +#frm-bulk-modal h2,
939 811 .frm-nav-tabs li {
940 812 display: inline-block;
813 + font-size: 15px;
941 814 margin: 0;
942 815 }
943 816
817 +#frm-bulk-modal h2,
944 818 .frm-nav-tabs a {
945 - color: var(--grey-700);
819 + color: var(--dark-grey);
946 820 padding: 10px 1px;
947 821 margin: 0 9px;
948 822 border-bottom: 2px solid transparent;
949 823 }
950 824
951 -.frm_form_settings #frm_adv_info .frm-nav-tabs a {
952 - padding: 5px 1px;
953 - color: var(--grey-500);
954 -}
955 -
956 825 .frm-nav-tabs.frm-compact-nav a {
957 826 margin: 0 5px;
958 827 }
959 828
@@ -962,37 +831,33 @@
962 831 opacity: .9;
963 832 }
964 833
965 834 #frm_adv_info .frm-nav-tabs a {
966 - color: var(--grey-700);
835 + color: var(--dark-grey);
967 836 }
968 837
838 +#frm-bulk-modal h2,
969 839 .frm-nav-tabs a:hover,
970 840 .frm-nav-tabs .frm-tabs a {
971 - color: var(--primary-500) !important;
972 - border-color: var(--primary-500);
841 + color: var(--primary-color) !important;
842 + border-color: var(--primary-color);
973 843 }
974 844
975 -.frm_form_settings #frm_adv_info .frm-nav-tabs .frm-tabs a {
976 - font-weight: 500;
845 +#frm-bulk-modal h3,
846 +#frm-bulk-modal h2 {
847 + font-size: 16px;
848 + margin-left: 20px;
849 + font-weight: 400;
977 850 }
978 851
979 -#frm-bulk-modal .howto,
980 852 #frm-bulk-modal h3 {
981 - font-size: var(--text-sm);
982 - font-weight: 400;
983 - margin: 5px 0 10px;
853 + margin: 5px 20px 10px;
984 854 color: var(--grey);
985 855 }
986 856
987 -#frm-bulk-modal h3 {
988 - margin-left: 20px;
989 -}
990 -
991 -.frm-right-panel a.frm_add_logic_link,
992 857 .frm-right-panel h3 {
993 - color: var(--grey-700);
994 - font-size: var(--text-lg);
858 + color: var(--dark-grey);
859 + font-size: 20px;
995 860 font-weight: 400;
996 861 border-top: 2px solid var(--sidebar-hover);
997 862 margin: 0;
998 863 }
@@ -1002,17 +867,10 @@
1002 867 border-top: none;
1003 868 padding-top: 0 !important;
1004 869 }
1005 870
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 871 .frm-right-panel h3 i {
1014 - color: var(--grey-700);
872 + color: var(--dark-grey);
1015 873 float: right;
1016 874 width: 16px;
1017 875 cursor: pointer;
1018 876 }
@@ -1074,12 +932,8 @@
1074 932 .frm_wrap #frm-categorydiv {
1075 933 border-right: none;
1076 934 }
1077 935
1078 -#frm_adv_info #frm-conditionals {
1079 - padding-top: var(--gap-sm);
1080 -}
1081 -
1082 936 #postbox-container-1 #taxonomy-linkcategory #frm-html-tags {
1083 937 display: none;
1084 938 max-height: none;
1085 939 }
@@ -1087,9 +941,9 @@
1087 941 #postbox-container-1 .frm_field_list #frm-insert-fields .frmbutton.dropdown {
1088 942 position: relative;
1089 943 }
1090 944
1091 -.frm-white-body #footer-upgrade {
945 +.toplevel_page_formidable #footer-upgrade {
1092 946 display: none;
1093 947 }
1094 948
1095 949 .frm_list_entry_page h2 {
@@ -1099,8 +953,13 @@
1099 953 .frm_list_entry_page h2 + .error {
1100 954 clear: both;
1101 955 }
1102 956
957 +#titlediv #title {
958 + line-height: 1.5;
959 + height: auto;
960 +}
961 +
1103 962 .frm_sidebar select {
1104 963 width: 100%;
1105 964 margin-left: 0;
1106 965 margin-right: 0;
@@ -1137,12 +996,14 @@
1137 996
1138 997 /* Buttons */
1139 998
1140 999 .frm_orange_button,
1141 -.frm_reverse_button {
1000 +.frm_reverse_button,
1001 +.post-type-frm_display .wrap .add-new-h2 {
1142 1002 font-size: 12px;
1143 1003 border: 1px solid var(--orange);
1144 1004 color: var(--orange);
1005 + line-height: 1.4;
1145 1006 font-weight: 600;
1146 1007 padding: 1px 4px;
1147 1008 border-radius: 4px;
1148 1009 background: transparent;
@@ -1147,11 +1008,33 @@
1147 1008 border-radius: 4px;
1148 1009 background: transparent;
1149 1010 }
1150 1011
1012 +.post-type-frm_display .wrap .add-new-h2 {
1013 + margin: 1px 0 0 10px;
1014 + text-transform: lowercase;
1015 + position: initial;
1016 + vertical-align: middle;
1017 +}
1018 +
1019 +h1 .frm-button-secondary,
1020 +h1 .frm-button-primary,
1021 +h2 .frm-button-secondary,
1022 +h2 .frm-button-primary {
1023 + font-size: 14px !important;
1024 + font-weight: normal;
1025 + margin: 0 5px !important;
1026 + line-height: 25px !important;
1027 + vertical-align: text-bottom !important;
1028 + height: auto !important;
1029 +}
1030 +
1151 1031 .frm_reverse_button:hover,
1152 1032 .frm_reverse_button:active,
1153 -.frm_reverse_button:focus {
1033 +.frm_reverse_button:focus,
1034 +.post-type-frm_display .wrap .add-new-h2:hover,
1035 +.post-type-frm_display .wrap .add-new-h2:active,
1036 +.post-type-frm_display .wrap .add-new-h2:focus {
1154 1037 color: #fff;
1155 1038 background: var(--orange);
1156 1039 border: 1px solid var(--orange);
1157 1040 }
@@ -1162,108 +1045,42 @@
1162 1045 }
1163 1046
1164 1047 .frm-button-primary,
1165 1048 .wp-core-ui .button-primary.frm-button-primary,
1166 -.wp-core-ui .button.frm-button-primary,
1167 1049 .frm-button-secondary,
1168 1050 .wp-core-ui .button-secondary.frm-button-secondary,
1169 1051 .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 1052 .frm_orange_button,
1174 1053 .toplevel_page_formidable #frm_upgrade_modal .button-primary,
1054 +#form_global_settings .button-secondary,
1175 1055 .wp-core-ui.frm-white-body .button-primary,
1176 1056 .wp-core-ui.frm-white-body .button-secondary,
1177 1057 .frm-white-body .button-primary,
1178 1058 .frm-white-body .button-secondary,
1179 -#frm-form-button button,
1180 -.frm-preview-buttons button,
1181 -.frm-button-red,
1182 -.frm-button-tertiary {
1059 +.wp-core-ui.frm-white-body .button:not(.button-small),
1060 +.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 1061 text-shadow: none;
1184 1062 box-shadow: none;
1185 1063 border-radius: 30px;
1186 - border: 1px solid var(--primary-500);
1187 - font-size: var(--text-sm);
1064 + border-color: var(--primary-color);
1065 + font-size: 1em;
1188 1066 transition: all .2s ease;
1189 - padding: 7px 16px;
1190 - height: auto;
1067 + padding: 0 15px;
1068 + height: 28px;
1191 1069 min-height: 28px;
1192 1070 outline: none;
1193 - line-height: var(--leading);
1194 - box-sizing: border-box;
1195 - font-weight: 500;
1196 - margin-bottom: 0;
1197 - display: inline-block;
1071 + line-height: 26px;
1198 1072 }
1199 1073
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 1074 .wp-core-ui.frm-white-body #post-query-submit.button,
1256 -.wp-core-ui.frm-white-body .button.tablenav-pages-navspan,
1257 1075 .wp-core-ui.frm-white-body .button.first-page,
1258 1076 .wp-core-ui.frm-white-body .button.prev-page,
1259 1077 .wp-core-ui.frm-white-body .button.next-page,
1260 1078 .wp-core-ui.frm-white-body .button.last-page,
1261 1079 .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);
1080 + background-color: var(--lightest-grey);
1081 + border-color: var(--grey-border);
1082 + color: var(--dark-grey);
1266 1083 }
1267 1084
1268 1085 .post-type-frm_display.wp-core-ui .button-primary,
1269 1086 .frm-button-primary,
@@ -1268,16 +1085,16 @@
1268 1085 .post-type-frm_display.wp-core-ui .button-primary,
1269 1086 .frm-button-primary,
1270 1087 .wp-core-ui .button-primary.frm-button-primary,
1271 1088 .frm_single_entry_page .button-primary {
1272 - background-color: var(--primary-500) !important;
1089 + background-color: var(--primary-color) !important;
1273 1090 color: #fff !important;
1274 1091 }
1275 1092
1276 1093 .frm-button-primary.frm_large{
1277 - font-size: var(--text-md) !important;
1094 + font-size: 22px !important;
1278 1095 height: auto !important;
1279 - padding: 9px 18px !important;
1096 + padding: 16px 32px !important;
1280 1097 }
1281 1098
1282 1099 .frm-button-primary i:before {
1283 1100 color: #fff;
@@ -1284,10 +1101,10 @@
1284 1101 }
1285 1102
1286 1103 .wp-core-ui .button-primary.frm-button-primary:hover,
1287 1104 .frm-button-primary:hover {
1288 - background: var(--primary-700) !important;
1289 - border-color: var(--primary-700) !important;
1105 + background: var(--primary-hover) !important;
1106 + border-color: var(--primary-hover) !important;
1290 1107 }
1291 1108
1292 1109 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1110 vertical-align: inherit;
@@ -1292,25 +1109,20 @@
1292 1109 .wp-core-ui .button-primary.frm-button-primary:active {
1293 1110 vertical-align: inherit;
1294 1111 }
1295 1112
1296 -.frm-white-body #search-submit,
1297 1113 #frm-form-button .frm_button_submit,
1298 -.frm-white-body .frm-preview-buttons button,
1299 -.frm-white-body .button:not(.frm-button-primary),
1300 1114 .wp-core-ui.frm-white-body .button-secondary,
1301 1115 .wp-core-ui .button-secondary.frm-button-secondary,
1302 1116 .wp-core-ui .button.frm-button-secondary,
1303 -.frm-white-body .frm-button-secondary,
1304 1117 .frm-button-secondary {
1305 - color: var(--grey-800);
1306 - border-color: var(--grey-300);
1307 - background-color: #fff;
1118 + color: var(--primary-color);
1119 + background-color: transparent;
1308 1120 }
1309 1121
1310 1122 #wp-content-media-buttons button,
1311 1123 #wp-content-media-buttons a.button {
1312 - border-color: var(--grey-300);
1124 + border-color: var(--grey-border);
1313 1125 }
1314 1126
1315 1127 .frm_orange_button {
1316 1128 border-color: #da791d !important;
@@ -1317,23 +1129,26 @@
1317 1129 background: var(--orange);
1318 1130 color: #fff;
1319 1131 }
1320 1132
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 1133 .wp-core-ui.frm-white-body .frm-button-secondary:hover,
1325 1134 .wp-core-ui.frm-white-body .button-secondary:hover,
1326 1135 .wp-core-ui.frm-white-body .button-secondary:focus,
1327 -.wp-core-ui.frm-white-body .tablenav .button:hover,
1328 1136 .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;
1137 + border-color: var(--primary-hover) !important;
1138 + background: var(--primary-hover) !important;
1139 + color: #fff;
1140 + box-shadow: none;
1334 1141 }
1335 1142
1143 +.frm-with-plus {
1144 + padding-left: 10px !important;
1145 +}
1146 +
1147 +.frm-with-plus .frmsvg {
1148 + margin-right: 5px;
1149 +}
1150 +
1336 1151 .frm-button-primary .frmsvg {
1337 1152 color: #fff;
1338 1153 }
1339 1154
@@ -1340,20 +1155,23 @@
1340 1155 .frm_wrap .preview i {
1341 1156 font-size: inherit;
1342 1157 }
1343 1158
1344 -.frm-white-body .frm-button-primary:focus,
1345 -.frm-white-body .frm-button-primary:active,
1159 +.wp-core-ui.frm-white-body .frm-button-secondary:hover .frmsvg,
1160 +.frm_wrap .preview > .button:hover .frmsvg,
1161 +.wp-core-ui.frm-white-body .frm-button-secondary:hover i,
1162 +.frm_wrap .preview > .button:hover i {
1163 + color: #fff;
1164 +}
1165 +
1346 1166 #frm-addons-page .button-primary:focus,
1347 1167 #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;
1168 +#frm_upgrade_modal .button:focus,
1169 +.frm_wrap .preview > .button:focus {
1170 + border-color: var(--primary-hover) !important;
1171 + outline: none;
1353 1172 }
1354 1173
1355 -.frm_wrap .preview > .button:focus,
1356 1174 .frm_orange_button:hover,
1357 1175 .frm_orange_button:focus,
1358 1176 .toplevel_page_formidable #frm_upgrade_modal .button-primary:hover,
1359 1177 .toplevel_page_formidable #frm_upgrade_modal .button-primary:focus,
@@ -1401,9 +1219,9 @@
1401 1219 }
1402 1220
1403 1221 .frm-review-notice.notice form,
1404 1222 .frm-review-notice.notice p {
1405 - font-size: var(--text-sm);
1223 + font-size: 14px;
1406 1224 max-width: 600px;
1407 1225 margin-left: auto;
1408 1226 margin-right: auto;
1409 1227 }
@@ -1408,14 +1226,17 @@
1408 1226 margin-right: auto;
1409 1227 }
1410 1228
1411 1229 .frm-review-notice a {
1412 - margin: 0 var(--gap-xs) !important;
1230 + margin: 5px;
1413 1231 }
1414 1232
1415 1233 .frm-review-notice .frm-button-primary,
1416 1234 .frm-review-notice .frm-button-secondary {
1417 1235 min-width: 100px;
1236 + display: inline-block;
1237 + text-align: center;
1238 + padding: 2px 10px;
1418 1239 }
1419 1240
1420 1241 .frm-review-notice p > span {
1421 1242 font-size: 13px;
@@ -1422,9 +1243,9 @@
1422 1243 opacity: 0.75;
1423 1244 }
1424 1245
1425 1246 #frmapi-feedback {
1426 - margin-top: var(--gap-lg);
1247 + margin-top: 30px;
1427 1248 }
1428 1249
1429 1250 .frm-review-notice .frm_error,
1430 1251 .frm-review-notice label {
@@ -1432,112 +1253,12 @@
1432 1253 text-align: left;
1433 1254 }
1434 1255
1435 1256 .frm-review-notice label {
1436 - font-size: var(--text-sm);
1257 + font-size: 14px;
1437 1258 }
1438 1259
1439 -.frm-floating-success-message {
1440 - border-radius: 4px;
1441 - right: 10px !important;
1442 - bottom: 10px !important;
1443 -}
1444 -
1445 1260 /* 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 1261 .frm_invisible {
1541 1262 visibility: hidden;
1542 1263 transition: all .2s ease;
1543 1264 }
@@ -1545,10 +1266,10 @@
1545 1266 .frm_no_float {
1546 1267 float: none;
1547 1268 }
1548 1269
1549 -.frm_block, /* deprecated */
1550 -.frm-block {
1270 +.frm_block,
1271 +.frm_no_section_fields.frm_block {
1551 1272 display: block;
1552 1273 }
1553 1274
1554 1275 .frm_inline {
@@ -1558,81 +1279,81 @@
1558 1279 .frm_inline_block {
1559 1280 display: inline-block !important;
1560 1281 }
1561 1282
1283 +.frm-lookup-modal .dismiss,
1284 +.frm-right-panel .inside a.frm_hidden,
1285 +ul.frm_form_nav > li.frm_hidden,
1286 +a.frm_hidden,
1287 +.button.frm_hidden,
1288 +.wp-core-ui .button.frm_hidden,
1562 1289 .frm_hidden {
1563 1290 display: none;
1564 1291 }
1565 1292
1566 -.frm-text-right {
1567 - text-align: right;
1293 +.frm_no_margin {
1294 + margin: 0;
1568 1295 }
1569 1296
1570 -.frm-border-b {
1571 - border-bottom: 1px solid var(--grey-300);
1297 +.frm_no_top_margin {
1298 + margin-top: 0 !important;
1572 1299 }
1573 1300
1574 -.frm-no-border {
1575 - border: none !important;
1301 +.postbox .inside > p.frm_no_bottom_margin:last-child,
1302 +.frm_no_bottom_margin {
1303 + margin-bottom: 0 !important;
1576 1304 }
1577 1305
1578 -.frm-opacity-100 {
1579 - opacity: 1;
1306 +.frm_tiny_top_margin {
1307 + margin-top: 1px;
1580 1308 }
1581 1309
1582 -.frm-on-bottom {
1583 - z-index: -1;
1310 +.frm_small_top_margin {
1311 + margin-top: 5px;
1584 1312 }
1585 -/* End Generic Classes, Start Forced Generic Classes */
1586 1313
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;
1314 +.frm_cursor_pointer {
1315 + cursor: pointer;
1596 1316 }
1597 1317
1598 -.postbox .inside > p.frm_no_bottom_margin:last-child {
1599 - margin-bottom: 0 !important;
1318 +.frm_right_text {
1319 + text-align: right;
1600 1320 }
1601 1321
1602 -.frm_no_section_fields.frm_block {
1603 - display: block;
1322 +.frm_submit .frm_full_opacity, .frm_full_opacity {
1323 + opacity: 1;
1604 1324 }
1605 1325
1326 +.frm_med_padding {
1327 + padding: 10px;
1328 +}
1329 +
1606 1330 .actions.frm_visible_overflow {
1607 1331 overflow: visible !important;
1608 1332 }
1609 1333
1610 -.frm_full_opacity, /* deprecated */
1611 -.frm_submit .frm_full_opacity,
1612 -.frm_submit .frm-opacity-100 {
1613 - opacity: 1;
1614 -}
1615 -
1616 1334 .frm-dropdown-menu.frm-on-top {
1617 1335 z-index: 99999;
1618 1336 }
1619 1337
1620 -/* End Forced Generic Classes */
1338 +.frm-on-bottom {
1339 + z-index: -1;
1340 +}
1621 1341
1622 1342 .frm_forms.with_frm_style {
1623 1343 max-width: 100%;
1624 1344 }
1625 1345
1346 +.post-type-frm_display .wrap > #posts-filter,
1626 1347 .post-type-frm_display .wrap > .subsubsub,
1627 1348 .post-type-frm_display .wrap > .icl_subsubsub,
1628 1349 .frm_form_settings > p {
1629 - margin: 6px var(--gap-md);
1350 + margin: 6px 40px;
1630 1351 padding: 0;
1631 1352 }
1632 1353
1633 1354 .frm-entry-container {
1634 - margin: 0 40px 40px;
1355 + margin: 20px 40px 40px;
1635 1356 padding: 0;
1636 1357 }
1637 1358
1638 1359 #form_reports_page .frm-inner-content {
@@ -1646,24 +1367,24 @@
1646 1367 clear: both;
1647 1368 }
1648 1369
1649 1370 .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);
1371 +.frm_page_container h2 {
1372 + margin: 10px 0 !important;
1373 + color: var(--medium-grey);
1374 + font-weight: 500;
1375 + font-size: 19px;
1654 1376 }
1655 1377
1656 1378 .post-type-frm_display .wrap > h2:first-child,
1657 -.frm_wrap .wrap > h2:first-child {
1658 - padding-top: 0;
1379 +.frm_page_container .wrap > h2:first-child {
1659 1380 margin-top: 0 !important;
1660 - font-size: var(--text-lg);
1381 + font-size: 22px;
1661 1382 }
1662 1383
1663 1384 #frm_form_editor_container {
1664 1385 position: relative;
1665 - margin-top: 28px;
1386 + margin: 25px 50px 50px;
1666 1387 }
1667 1388
1668 1389 .form-field p {
1669 1390 /* for conflicts */
@@ -1676,30 +1397,21 @@
1676 1397 float: none;
1677 1398 width: auto;
1678 1399 }
1679 1400
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 1401 .accordion-container label,
1686 1402 .frm-fields td > label,
1687 1403 .frm-fields td > div > label,
1688 -.frm_form_field > label:first-child,
1689 1404 .frm-fields p > label,
1690 -.frm_on_submit_type > label,
1691 1405 .post-type-frm_display .frm_form_field > label,
1692 1406 #new_fields .frm_primary_label,
1693 -#form_global_settings .frm_primary_label,
1694 1407 #frm_form_editor_container .frm_primary_label {
1695 - color: var(--grey-700);
1408 + color: var(--dark-grey);
1696 1409 margin: 0 0 3px;
1697 1410 padding: 0;
1698 1411 width: auto;
1699 - font-size: var(--text-sm);
1412 + font-size: 14px;
1700 1413 display: block;
1701 - line-height: var(--leading);
1702 1414 }
1703 1415
1704 1416 .frm-fields td input + label {
1705 1417 display: inline;
@@ -1717,9 +1429,9 @@
1717 1429 .with_frm_style form .form-field {
1718 1430 margin-bottom: 20px;
1719 1431 }
1720 1432
1721 -#frm_builder_page .with_frm_style form .frm_combo_inputs_container > .form-field {
1433 +.with_frm_style form .frm_combo_inputs_container > .form-field {
1722 1434 margin-bottom: 0;
1723 1435 }
1724 1436
1725 1437 .frm_description,
@@ -1826,8 +1538,14 @@
1826 1538 max-width: 700px;
1827 1539 margin: 20px auto !important;
1828 1540 }
1829 1541
1542 +.upgrade_to_pro h1,
1543 +.upgrade_to_pro h3,
1544 +.upgrade_to_pro {
1545 + color: #444;
1546 +}
1547 +
1830 1548 .upgrade_to_pro .error {
1831 1549 display: none;
1832 1550 }
1833 1551
@@ -1837,19 +1555,19 @@
1837 1555 }
1838 1556
1839 1557 .frm_error_style,
1840 1558 .frm_warning_style,
1841 -.frm_note_style,
1842 1559 .frm_message,
1843 1560 #post-body-content .frm_updated_message,
1844 1561 div.frm_updated_message {
1845 - border-radius: var(--small-radius);
1846 - background-color: #D5F2DC;
1847 - color: #1E561F;
1848 - padding: var(--gap-sm) var(--gap-md);
1849 - font-size: var(--text-sm);
1850 - margin: var(--gap-sm) 0;
1851 - text-align: left;
1562 + border-radius: var(--border-radius);
1563 + border: 1px solid #D6E9C6;
1564 + background-color: #DFF0D8;
1565 + color: #468847;
1566 + padding: 5px 25px;
1567 + font-size: 14px;
1568 + margin: 5px 0 15px;
1569 + text-align: center;
1852 1570 }
1853 1571
1854 1572 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1855 1573 display: inline-block;
@@ -1860,20 +1578,21 @@
1860 1578 #post-body-content > .frm_updated_message {
1861 1579 margin: 5px 65px;
1862 1580 }
1863 1581
1864 -#form_global_settings #post-body-content > .frm_updated_message,
1865 -#form_global_settings #post-body-content > .frm_warning_style {
1582 +#form_global_settings .frm_updated_message {
1866 1583 margin: 5px 25px;
1867 1584 }
1868 1585
1869 1586 .frm_error_style {
1870 1587 color: #973937;
1871 - background-color: #EBCCCC;
1588 + border-color: #F2DEDE;
1589 + background-color: #F2DEDE;
1872 1590 clear: both;
1873 1591 }
1874 1592
1875 1593 .frm_error_style a {
1594 + color: #973937;
1876 1595 text-decoration: underline;
1877 1596 font-weight: 600;
1878 1597 }
1879 1598
@@ -1881,10 +1600,14 @@
1881 1600 opacity: .7;
1882 1601 }
1883 1602
1884 1603 .frm_warning_style {
1885 - color: #7A4D05;
1886 - background-color: #FFF2D2;
1604 + color: #8B6E3C;
1605 + border-color: #FBECCD;
1606 + background-color: #FDF9E3;
1607 + border-radius: 10px;
1608 + text-align: left;
1609 + padding-top: 5px;
1887 1610 }
1888 1611
1889 1612 .frm_warning_heading{
1890 1613 font-weight: bold;
@@ -1890,61 +1613,8 @@
1890 1613 font-weight: bold;
1891 1614 margin-bottom:4px;
1892 1615 }
1893 1616
1894 -/* Warning message dismiss */
1895 -.frm_warning_style {
1896 - position: relative;
1897 - padding-right: calc(var(--gap-md) + 15px);
1898 -}
1899 -
1900 -body.rtl .frm_warning_style {
1901 - padding-right: var(--gap-md);
1902 - padding-left: calc(var(--gap-md) + 15px);
1903 -}
1904 -
1905 -.frm-warning-dismiss {
1906 - position: absolute;
1907 - top: 10px;
1908 - right: 10px;
1909 - display: flex;
1910 - cursor: pointer;
1911 - transition: opacity 0.2s ease-out;
1912 -}
1913 -
1914 -body.rtl .frm-warning-dismiss {
1915 - left: 10px;
1916 - right: auto;
1917 -}
1918 -
1919 -.frm-warning-dismiss:hover {
1920 - opacity: 0.8;
1921 -}
1922 -
1923 -.frm-warning-dismiss.frmsvg,
1924 -.frm-warning-dismiss.frmsvg svg {
1925 - width: 15px;
1926 - height: 15px;
1927 -}
1928 -
1929 -.frm_note_style {
1930 - background: rgba(188, 224, 253, 0.23);
1931 - color: var(--grey-700);
1932 -}
1933 -
1934 -.frm-banner-alert {
1935 - text-align: left;
1936 - margin: 0;
1937 - border-radius: 0;
1938 - padding: 10px 0 10px 40px;
1939 -}
1940 -
1941 -.frm-banner-alert a {
1942 - color: var(--primary-500);
1943 - font-weight: 400;
1944 - text-decoration: none;
1945 -}
1946 -
1947 1617 .frm_updated_message ul,
1948 1618 .frm_updated_message li,
1949 1619 .frm_warning_style ul,
1950 1620 .frm_warning_style li,
@@ -1953,24 +1623,57 @@
1953 1623 margin: 0;
1954 1624 }
1955 1625
1956 1626 .frm-inline-message {
1957 - border: 1px solid var(--primary-700);
1627 + border: 1px solid var(--primary-hover);
1958 1628 border-radius: var(--small-radius);
1959 - color: var(--primary-700);
1629 + color: var(--primary-hover);
1960 1630 background: #fff;
1961 1631 text-align: center;
1962 1632 padding: 20px;
1963 - font-size: var(--text-sm);
1964 - line-height: var(--leading);
1633 + font-size: 14px;
1634 + line-height: 1.4em;
1965 1635 }
1966 1636
1967 1637 .frm-inline-message a {
1968 - text-decoration: underline;
1969 1638 font-weight: 600;
1970 - color: var(--primary-700);
1639 + color: var(--primary-hover);
1971 1640 }
1972 1641
1642 +.frm_ribbon {
1643 + -webkit-transform: rotate(45deg);
1644 + -moz-transform: rotate(45deg);
1645 + -ms-transform: rotate(45deg);
1646 + -o-transform: rotate(45deg);
1647 + transform: rotate(45deg);
1648 + border: 25px solid transparent;
1649 + border-bottom: 25px solid var(--orange);
1650 + position: absolute;
1651 + top: -31px;
1652 + right: -74px;
1653 + padding: 0px 10px;
1654 + width: 30px;
1655 + color: white;
1656 + font-family: sans-serif;
1657 + size: 11px;
1658 +}
1659 +
1660 +.plugin-card-top .frm_ribbon {
1661 + right: -33px;
1662 + top: -28px;
1663 +}
1664 +
1665 +.frm_ribbon span {
1666 + position: absolute;
1667 + left: 25px;
1668 + font-size: 15px;
1669 + top: 4px;
1670 +}
1671 +
1672 +.accordion-section-content .frm-selectable:hover .frm_ribbon {
1673 + display: none;
1674 +}
1675 +
1973 1676 .frm_pro_heading span {
1974 1677 margin-top: 10px;
1975 1678 }
1976 1679
@@ -1979,14 +1682,15 @@
1979 1682 }
1980 1683
1981 1684 .frm-yes {
1982 1685 color: var(--green);
1983 - font-size: var(--text-xl);
1686 + font-size: 21px;
1687 + font-weight: 500;
1984 1688 }
1985 1689
1986 1690 .frm-nope {
1987 - color: var(--grey-400);
1988 - font-size: var(--text-xl);
1691 + color: #d2e0f2;
1692 + font-size: 21px;
1989 1693 }
1990 1694
1991 1695 .upgrade_to_pro a {
1992 1696 color: var(--orange);
@@ -1992,10 +1696,10 @@
1992 1696 color: var(--orange);
1993 1697 }
1994 1698
1995 1699 .upgrade_to_pro table .frmsvg {
1996 - height: var(--text-xl);
1997 - width: var(--text-xl);
1700 + height: 20px;
1701 + width: 20px;
1998 1702 }
1999 1703
2000 1704 .upgrade_to_pro table.widefat {
2001 1705 background-color: #fff;
@@ -2001,14 +1705,12 @@
2001 1705 background-color: #fff;
2002 1706 border-collapse: collapse;
2003 1707 }
2004 1708
2005 -.frm-white-body .upgrade_to_pro table th,
1709 +.upgrade_to_pro table th,
2006 1710 .upgrade_to_pro table td {
2007 1711 padding: 10px 15px;
2008 - border: 1px solid var(--grey-300);
2009 - line-height: var(--leading);
2010 - font-size: var(--text-sm);
1712 + border: 1px solid #d2e0f2;
2011 1713 }
2012 1714
2013 1715 .upgrade_to_pro table th.frmcenter {
2014 1716 text-align: center;
@@ -2014,9 +1716,9 @@
2014 1716 text-align: center;
2015 1717 }
2016 1718
2017 1719 .widefat th.frm_table_break {
2018 - background-color: var(--sidebar-color);
1720 + background-color: #f6f7fb;
2019 1721 }
2020 1722
2021 1723 h2.frm-h2 + .howto {
2022 1724 color: var(--medium-grey);
@@ -2032,18 +1734,18 @@
2032 1734 margin-top: 0;
2033 1735 }
2034 1736
2035 1737 .frm-addons {
2036 - margin-top: var(--gap-lg);
1738 + margin-top: 30px;
2037 1739 display: grid;
2038 1740 grid-template-columns: 1fr 1fr 1fr;
2039 - grid-gap: var(--gap-md);
1741 + grid-gap: 30px 2%;
2040 1742 }
2041 1743
2042 1744 .frm-addons,
2043 1745 .frm-addons h2,
2044 1746 .frm-addons h3 {
2045 - color: var(--grey-700);
1747 + color: var(--dark-grey);
2046 1748 }
2047 1749
2048 1750 .frm-addons h2 {
2049 1751 font-size: 17px;
@@ -2055,9 +1757,9 @@
2055 1757
2056 1758 .frm-card {
2057 1759 width: 100%;
2058 1760 border-radius: 10px;
2059 - border: 1px solid var(--grey-300);
1761 + border: 1px solid var(--grey-border);
2060 1762 opacity: 1;
2061 1763 transition: opacity 1s;
2062 1764 }
2063 1765
@@ -2071,10 +1773,10 @@
2071 1773 position: relative;
2072 1774 }
2073 1775
2074 1776 .frm-addons .plugin-card-top {
2075 - height: 155px;
2076 - padding-top: var(--gap-lg);
1777 + height: 140px;
1778 + padding-top: 30px;
2077 1779 overflow: hidden;
2078 1780 }
2079 1781
2080 1782 .frm-addons .plugin-card-top h2 {
@@ -2111,16 +1813,15 @@
2111 1813 .frm-addon-active .button {
2112 1814 visibility: hidden;
2113 1815 }
2114 1816
2115 -.frm-save-and-reload-options {
1817 +#frm_save_and_reload_options {
2116 1818 margin-top: 10px;
2117 1819 font-size: 13px;
2118 1820 }
2119 1821
2120 -.frm-save-and-reload,
2121 -.frm-save-and-reload + .frm-button-secondary {
2122 - visibility: visible !important;
1822 +#frm_save_and_reload_settings, #frm_save_and_reload_settings + .frm-button-secondary {
1823 + visibility: visible;
2123 1824 }
2124 1825
2125 1826 .addon-status-label {
2126 1827 opacity: .7;
@@ -2149,13 +1850,9 @@
2149 1850 .frm-new-template.plugin-card-bottom {
2150 1851 overflow: visible;
2151 1852 }
2152 1853
2153 -#frm-new-template p:first-child {
2154 - margin-top: 0;
2155 -}
2156 -
2157 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1854 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2158 1855 #wpbody-content > .updated,
2159 1856 #wpbody-content > #update-nag,
2160 1857 #wpbody-content > .update-nag,
2161 1858 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2186,9 +1883,9 @@
2186 1883 }
2187 1884
2188 1885 .frm-modal .postbox .frm_modal_top,
2189 1886 .frm-dialog .frm_common_modal .postbox > div:first-child {
2190 - padding: var(--gap-md) var(--gap-md) 0;
1887 + padding: 30px 30px 10px;
2191 1888 position: relative;
2192 1889 }
2193 1890
2194 1891 .frm-modal .postbox .frm-modal-title,
@@ -2193,70 +1890,36 @@
2193 1890
2194 1891 .frm-modal .postbox .frm-modal-title,
2195 1892 .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
2196 1893 display: inline-block;
2197 - font-size: var(--text-xl);
2198 - color: var(--grey-900);
1894 + font-size: 24px;
1895 + color: #282F36;
2199 1896 }
2200 1897
2201 -.frm-inline-modal > a.dismiss,
2202 -.frm-modal .postbox > a.dismiss,
2203 1898 .frm-modal .postbox .frm-modal-title + div:last-child,
2204 1899 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2205 1900 position: absolute;
2206 1901 right: 30px;
2207 - top: 25px;
2208 - z-index: 2;
1902 + top: 37px;
2209 1903 }
2210 1904
2211 -body.rtl .frm-inline-modal > a.dismiss,
2212 -body.rtl .frm-modal .postbox > a.dismiss,
2213 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2214 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2215 - right: unset;
2216 - left: 30px;
2217 -}
2218 -
2219 -.frm-info-modal .postbox > a.dismiss,
2220 -.frm-inline-modal > a.dismiss {
2221 - right: 13px;
2222 - top: 13px;
2223 -}
2224 -
2225 1905 .frm-modal .postbox .frm-modal-title + div:last-child a,
2226 -.frm-modal a.dismiss .frmsvg,
2227 1906 .frm_common_modal .frm_modal_top a .frmsvg {
2228 - color: var(--grey-900);
1907 + color: var(--grey);
2229 1908 }
2230 1909
2231 -.frm-modal .frm_modal_content > div.inside,
2232 -.frm_common_modal .frm_modal_content > div.inside {
2233 - padding: var(--gap-md);
2234 - margin: 0;
2235 - font-size: var(--text-sm);
2236 - color: var(--grey-700);
2237 -}
2238 -
2239 -.frm_common_modal .postbox {
2240 - display: flex;
2241 - flex-direction: column;
2242 -}
2243 -
2244 1910 .frm-modal .postbox > div.inside .cta-inside {
2245 1911 overflow-y: auto;
2246 1912 height: auto;
2247 - padding: 0 var(--gap-sm);
1913 + padding: 0 15px;
2248 1914 }
2249 1915
2250 1916 .frm_modal_footer {
2251 - padding: 0 var(--gap-md) var(--gap-sm);
1917 + padding: 15px 30px;
2252 1918 text-align: right;
1919 + border-top: 1px solid var(--sidebar-hover);
2253 1920 }
2254 1921
2255 -body.frm-body-with-open-modal {
2256 - overflow-y: hidden;
2257 -}
2258 -
2259 1922 #frm_new_form_modal .postbox > div.inside {
2260 1923 max-height: 490px;
2261 1924 overflow-y: auto;
2262 1925 overflow-x: hidden;
@@ -2266,9 +1929,9 @@
2266 1929
2267 1930 #frm_new_form_modal .postbox > div.inside .cta-inside {
2268 1931 overflow-y: auto;
2269 1932 height: auto;
2270 - padding: 0 var(--gap-md);
1933 + padding: 0 20px;
2271 1934 }
2272 1935
2273 1936 #frm_new_form_modal .accordion-container {
2274 1937 width: 100%;
@@ -2274,16 +1937,13 @@
2274 1937 width: 100%;
2275 1938 }
2276 1939
2277 1940 .frm-templates-list {
2278 - margin-top: 0;
1941 + margin-top: 0px;
2279 1942 }
2280 1943
2281 -.frm-templates-list.frm_grid_container li {
2282 - margin-bottom: 0;
2283 -}
2284 -
2285 1944 .frm-templates-list li {
1945 + width: 50%;
2286 1946 vertical-align: top;
2287 1947 position: relative;
2288 1948 box-sizing: border-box;
2289 1949 border-radius: 6px;
@@ -2312,17 +1972,14 @@
2312 1972 .frm-templates-list li.frm-selectable:hover p {
2313 1973 max-width: calc( 100% - 65px );
2314 1974 }
2315 1975
2316 -.frm-templates-list .frm-featured-form {
2317 - display: flex;
1976 +.frm-templates-list li > div:not(.frm-hover-icons) {
1977 + display: inline-block;
2318 1978 width: 100%;
1979 + padding: 5px;
2319 1980 }
2320 1981
2321 -.frm-templates-list li .frm-featured-form {
2322 - padding: 7px 5px;
2323 -}
2324 -
2325 1982 .frm-templates-list li li > div {
2326 1983 padding-left: 0;
2327 1984 }
2328 1985
@@ -2329,38 +1986,23 @@
2329 1986 .frm-templates-list li > div > div {
2330 1987 vertical-align: middle;
2331 1988 }
2332 1989
2333 -.frm-templates-list .frm-inner-circle,
2334 -.frm-category-icon, /* Deprecated */
2335 -.frm-icon-wrapper {
2336 - background: var(--primary-500);
2337 - border-radius: var(--small-radius);
2338 - color: #fff;
1990 +.frm-templates-list li .frm-category-icon {
2339 1991 width: 40px;
2340 1992 height: 40px;
2341 - font-size: 18px;
2342 - box-sizing: border-box;
2343 - align-self: center;
2344 - justify-content: center;
2345 - align-items: center;
2346 - display: inline-flex;
2347 -}
2348 -
2349 -.frm-templates-list .frm-inner-circle .frmsvg {
1993 + overflow: hidden;
1994 + display: inline-block;
1995 + border-radius: 4px;
1996 + text-align: center;
2350 1997 vertical-align: top;
2351 1998 }
2352 1999
2353 -.frm-templates-list li .frm-category-icon {
2354 - overflow: hidden;
2355 - align-self: flex-start;
2356 -}
2357 -
2358 -.frm-templates-list .frm-template-details {
2000 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2359 2001 /* the content container to the right of the icon in Create new form modal */
2360 2002 display: inline-block;
2361 2003 width: calc( 100% - 40px );
2362 - padding-left: var(--gap-sm);
2004 + padding-left: 13px;
2363 2005 box-sizing: border-box;
2364 2006 transform: translateY(-2px);
2365 2007 }
2366 2008
@@ -2374,18 +2016,54 @@
2374 2016 }
2375 2017
2376 2018 .frm-templates-list li h3,
2377 2019 .frm-templates-list .frm-install-template h3 {
2378 - font-size: var(--text-sm) !important;
2020 + font-size: 14px !important;
2021 + line-height: 24px;
2022 + height: 24px;
2379 2023 }
2380 2024
2025 +.frm-templates-list li p {
2026 + font-size: 13px;
2027 + color: rgba(40, 47, 54, 0.6);
2028 +}
2029 +
2381 2030 .frm-templates-list .frm-install-template div {
2382 2031 text-align: left;
2383 2032 }
2384 2033
2034 +.frm-templates-list .frm-add-blank-form .frm-category-icon .frmsvg,
2035 +.frm-templates-list li:last-child div:not(.frm-hover-icons) > .frmsvg {
2036 + color: #fff;
2037 + transform: translateY(10px);
2038 +}
2039 +
2040 +.frm-templates-list .frm-inner-circle {
2041 + border-radius: 4px;
2042 + width: 40px;
2043 + height: 40px;
2044 + padding: 0;
2045 + box-sizing: border-box;
2046 + display: flex;
2047 + flex-direction: row;
2048 + align-items: center;
2049 + justify-content: center;
2050 + position: relative;
2051 +}
2052 +
2053 +.frm-templates-list .frm-inner-circle .frmsvg {
2054 + position: absolute;
2055 + top: 0;
2056 + left: 0;
2057 + width: 100%;
2058 + height: 100%;
2059 + box-sizing: border-box;
2060 + padding: 10px;
2061 +}
2062 +
2385 2063 #frm_new_form_modal .frm-search {
2386 - width: 100%;
2387 - margin: var(--gap-sm) 0 var(--gap-md);
2064 + width: calc( 100% - 20px );
2065 + margin: 15px 10px 30px;
2388 2066 }
2389 2067
2390 2068 #frm_leave_email,
2391 2069 #frm_code_from_email
@@ -2392,10 +2070,13 @@
2392 2070 {
2393 2071 width: 480px;
2394 2072 }
2395 2073
2396 -#frm_new_form_modal #template-search-input {
2397 - width: 100%;
2074 +#frm_new_form_modal #template-search-input,
2075 +#frm_new_form_modal #frm_leave_email,
2076 +#frm_new_form_modal #frm_code_from_email
2077 +{
2078 + border-radius: 4px !important;
2398 2079 }
2399 2080
2400 2081 #frm-email-block .frm-with-left-icon .frmsvg {
2401 2082 padding: 0;
@@ -2405,12 +2086,12 @@
2405 2086
2406 2087 #frm_new_form_modal .accordion-container {
2407 2088 display: inline-block;
2408 2089 padding: 0;
2409 - border-top: 1px solid var(--grey-300);
2090 + border-top: 1px solid var(--grey-border);
2410 2091 box-sizing: border-box;
2411 - margin: 0 5px;
2412 - width: calc( 100% - 10px );
2092 + margin: 0 10px;
2093 + width: calc( 100% - 20px );
2413 2094 }
2414 2095
2415 2096 #frm_new_form_modal .accordion-section-title {
2416 2097 padding: 0;
@@ -2420,13 +2101,13 @@
2420 2101 .control-section:hover .accordion-section-title,
2421 2102 #frm_new_form_modal .accordion-section.open .accordion-section-title
2422 2103 {
2423 2104 background: #fff !important;
2424 - border-bottom-color: transparent;
2105 + border-bottom: none;
2425 2106 }
2426 2107
2427 2108 #frm_new_form_modal .accordion-section.open:hover {
2428 - border-bottom-color: transparent;
2109 + border-bottom: none;
2429 2110 }
2430 2111
2431 2112 #frm_new_form_modal .accordion-section {
2432 2113 padding: 8px 0 4px;
@@ -2432,9 +2113,9 @@
2432 2113 padding: 8px 0 4px;
2433 2114 }
2434 2115
2435 2116 #frm_new_form_modal .accordion-section + .accordion-section {
2436 - border-top: 1px solid var(--grey-300);
2117 + border-top: 1px solid var(--grey-border);
2437 2118 border-radius: 0;
2438 2119 }
2439 2120
2440 2121 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2443,9 +2124,9 @@
2443 2124 padding-left: 0;
2444 2125 }
2445 2126
2446 2127 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2447 - padding-left: var(--gap-sm);
2128 + padding-left: 10px;
2448 2129 }
2449 2130
2450 2131 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2451 2132 padding: 0 10px;
@@ -2452,75 +2133,74 @@
2452 2133 overflow: hidden;
2453 2134 }
2454 2135
2455 2136 #frm_new_form_modal .accordion-section-content {
2456 - padding: var(--gap-sm);
2137 + padding: 10px 0;
2457 2138 }
2458 2139
2459 2140 .frm-hover-icons {
2460 2141 position: absolute;
2461 2142 right: 0;
2462 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2463 - max-width: 91px;
2143 + top: 0;
2144 + height: 20px;
2145 + width: 65px;
2464 2146 height: 100%;
2465 2147 box-sizing: border-box;
2466 - padding: 0 10px 0 5px !important;
2467 - border-radius: var(--small-radius);
2148 + padding: 14px 10px 0 5px !important;
2149 + border-radius: 6px;
2468 2150 text-align: right;
2469 - display: flex;
2470 - gap: 5px;
2471 2151 }
2472 2152
2473 -.frm-ready-made-solution .frm-hover-icons {
2474 - visibility: hidden;
2153 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2154 + width: 91px;
2475 2155 }
2476 2156
2477 -.frm-ready-made-solution:hover .frm-hover-icons {
2478 - visibility: visible;
2479 -}
2480 -
2481 2157 .frm-hover-icons a {
2482 2158 width: 22px;
2483 2159 height: 22px;
2484 - font-size: var(--text-md);
2485 - display: inline-flex;
2486 - align-items: center;
2487 - justify-content: center;
2160 + display: inline-block;
2488 2161 border-radius: 50%;
2489 2162 box-sizing: border-box;
2490 - line-height: var(--leading);
2163 + line-height: 20px;
2491 2164 text-align: center;
2492 2165 }
2493 2166
2494 2167 .frm-hover-icons > .frm-preview-form,
2495 2168 .frm-hover-icons > .frm-delete-form {
2496 - border: 1px solid var(--primary-500);
2169 + border: 1px solid var(--primary-color);
2170 + margin-right: 5px;
2497 2171 }
2498 2172
2499 2173 .frm-hover-icons > .frm-create-form,
2500 2174 .frm-ready-made-solution .frm-hover-icons a {
2501 - background-color: var(--primary-500);
2175 + background-color: var(--primary-color);
2502 2176 }
2503 2177
2504 -.frm-hover-icons > a .frmsvg {
2505 - width: 14px;
2506 - height: 14px;
2507 - vertical-align: baseline;
2178 +.frm-hover-icons > .frm-preview-form .frmsvg {
2179 + width: 16px;
2180 + height: 16px;
2181 + color: var(--primary-color);
2508 2182 }
2509 2183
2510 -.frm-hover-icons > .frm-preview-form .frmsvg,
2511 2184 .frm-hover-icons > .frm-delete-form .frmsvg {
2512 - color: var(--primary-500);
2185 + width: 14px;
2186 + height: 14px;
2187 + color: var(--primary-color);
2188 + transform: translateY(-1px);
2513 2189 }
2514 2190
2515 2191 .frm-hover-icons > .frm-unlock-form {
2516 - background-color: var(--primary-500);
2192 + background-color: var(--primary-color);
2517 2193 }
2518 2194
2519 2195 .frm-hover-icons > .frm-unlock-form .frmsvg {
2520 - background-color: var(--primary-500);
2196 + width: 12px;
2197 + height: 12px;
2198 + background-color: var(--primary-color);
2199 + transform: translateY(-2px);
2521 2200 }
2522 2201
2202 +.frm-hover-icons > .frm-create-form .frmsvg,
2523 2203 .frm-ready-made-solution .frmsvg {
2524 2204 width: 14px;
2525 2205 height: 14px;
2526 2206 }
@@ -2534,28 +2214,27 @@
2534 2214 .frm-ready-made-solution .frm-hover-icons a:hover,
2535 2215 .frm-hover-icons > .frm-unlock-form:hover,
2536 2216 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2537 2217 {
2538 - background-color: var(--primary-700) !important;
2218 + background-color: var(--primary-hover) !important;
2539 2219 }
2540 2220
2541 2221 .frm-hover-icons .frm-preview-form:hover,
2542 2222 .frm-hover-icons .frm-delete-form:hover
2543 2223 {
2544 - border: 1px solid var(--primary-700) !important;
2224 + border: 1px solid var(--primary-hover) !important;
2545 2225 }
2546 2226
2547 2227 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2548 2228 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2549 - color: var(--primary-700) !important;
2229 + color: var(--primary-hover) !important;
2550 2230 }
2551 2231
2552 -.frm-application-card h4 .frmsvg,
2553 2232 .frm-locked-template h3 .frmsvg {
2554 - height: var(--text-sm);
2555 - width: var(--text-sm);
2556 - vertical-align: text-top;
2557 - color: var(--grey-500);
2233 + height: 12px;
2234 + width: 14px;
2235 + vertical-align: top;
2236 + padding-top: 6px;
2558 2237 }
2559 2238
2560 2239 #frm_new_form_modal .frm-use-this-template {
2561 2240 margin-left: 10px;
@@ -2561,18 +2240,21 @@
2561 2240 margin-left: 10px;
2562 2241 }
2563 2242
2564 2243 #frm_new_form_modal #frm-preview-block {
2565 - padding: var(--gap-md) var(--gap-lg);
2244 + padding: 20px 30px;
2566 2245 overflow-x: hidden;
2567 2246 }
2568 2247
2569 2248 #frm_new_form_modal #frm-details-block {
2570 - padding: var(--gap-md) var(--gap-lg);
2249 + padding: 20px 30px;
2571 2250 }
2572 2251
2573 2252 .frm-modal-back {
2574 2253 cursor: pointer;
2254 + font-size: 17px;
2255 + vertical-align: top;
2256 + margin-top: 4px;
2575 2257 margin-right: 4px;
2576 2258 }
2577 2259
2578 2260 .frm-modal-cancel {
@@ -2579,28 +2261,19 @@
2579 2261 float: left;
2580 2262 }
2581 2263
2582 2264 .frm-plan-required-tag {
2583 - margin-left: 5px;
2584 - transform: translateY(-1px);
2585 2265 background: #FDE6DE;
2586 2266 color: #F15A24;
2587 -}
2588 -
2589 -.frm-ready-made-solution .frm-meta-tag {
2590 - width: fit-content;
2591 - background: #FDE6DE;
2592 - color: #F15A24;
2593 -}
2594 -
2595 -.frm-meta-tag {
2596 2267 font-size: 10px;
2597 - padding: 4px 6px;
2268 + padding: 4px 8px;
2598 2269 border-radius: 4px;
2599 2270 text-transform: uppercase;
2600 2271 font-weight: normal;
2601 2272 display: inline-block;
2602 2273 line-height: 12px;
2274 + transform: translateY(-1px);
2275 + margin-left: 5px;
2603 2276 }
2604 2277
2605 2278 #frm_new_form_modal.frm-expired #frm-create-block,
2606 2279 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2610,14 +2283,18 @@
2610 2283 #frm-create-footer {
2611 2284 padding: 15px 20px;
2612 2285 }
2613 2286
2287 +#frm-create-footer .frm_error_style {
2288 + border-radius: 6px;
2289 +}
2290 +
2614 2291 #frm_code_from_email_options {
2615 2292 margin-top: 20px;
2616 2293 }
2617 2294
2618 2295 #frm_code_from_email_options * {
2619 - color: var(--primary-500);
2296 + color: var(--primary-color);
2620 2297 }
2621 2298
2622 2299 #frm-email-block p,
2623 2300 #frm-code-block p,
@@ -2653,23 +2330,20 @@
2653 2330 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2654 2331 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2655 2332 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2656 2333 #frm_new_form_modal[frm-page="renew"] #frm-renew-title,
2334 +.frm-locked-template .frm-hover-icons .frm-unlock-form,
2335 +li[data-preview] .frm-hover-icons .frm-preview-form,
2657 2336 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2658 2337 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2659 2338 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2660 2339 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2661 -#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"]
2340 +#frm_leave_email_error[frm-error="empty"] span[frm-error="empty"],
2341 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form
2662 2342 {
2663 2343 display: inline-block;
2664 2344 }
2665 2345
2666 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2667 -li[data-preview] .frm-hover-icons .frm-preview-form,
2668 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2669 - display: inline-flex;
2670 -}
2671 -
2672 2346 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2673 2347 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2674 2348 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2675 2349 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2704,9 +2378,9 @@
2704 2378 }
2705 2379
2706 2380 #frm-upgrade-body-list-wrapper ul li:before {
2707 2381 content: "\2022";
2708 - color: var(--primary-500);
2382 + color: var(--primary-color);
2709 2383 display: inline-block;
2710 2384 width: 1em;
2711 2385 margin-left: -1em;
2712 2386 }
@@ -2712,10 +2386,17 @@
2712 2386 }
2713 2387
2714 2388 /* Embed Form Modal */
2715 2389
2390 +#frm_embed_modal label {
2391 + font-size: 14px;
2392 + line-height: 25px;
2393 + color: rgba(40, 47, 54, 0.8);
2394 + font-weight: 600;
2395 +}
2396 +
2716 2397 .frm-embed-modal-content {
2717 - padding: var(--gap-md);
2398 + padding: 20px;
2718 2399 }
2719 2400
2720 2401 .frm-embed-modal-content.frm-loading-page-options {
2721 2402 display: flex;
@@ -2722,15 +2403,16 @@
2722 2403 justify-content: center;
2723 2404 }
2724 2405
2725 2406 #frm_embed_modal .frm_embed_example {
2726 - background: var(--sidebar-color);
2727 - border: 1px solid var(--sidebar-hover);
2728 - border-radius: var(--small-radius);
2729 - color: var(--grey-900);
2730 - font-size: var(--text-sm);
2731 - padding-right: var(--gap-lg);
2407 + background: #F6F7FB;
2408 + border: 1px solid #E3E8EB;
2409 + border-radius: 6px;
2410 + color: rgba(40, 47, 54, 0.85);
2411 + font-size: 14px;
2412 + padding: 10px 30px 10px 10px;
2732 2413 width: 100%;
2414 + margin-bottom: 15px;
2733 2415 height: auto !important;
2734 2416 resize: none;
2735 2417 }
2736 2418
@@ -2740,59 +2422,67 @@
2740 2422
2741 2423 .frm-embed-modal-content > div a {
2742 2424 position: absolute;
2743 2425 right: 0;
2744 - top: 0;
2426 + top: 8px;
2745 2427 }
2746 2428
2747 2429 .frm-embed-modal-content > div {
2748 2430 position: relative;
2749 - margin-bottom: var(--gap-sm);
2750 2431 }
2751 2432
2752 -.frm-embed-modal-content > div:last-child {
2753 - margin-bottom: 0;
2754 -}
2755 -
2756 2433 .frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2757 2434 position: absolute;
2758 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2435 + top: 35px;
2759 2436 right: 10px;
2760 2437 cursor: pointer;
2761 2438 opacity: 0.5;
2762 2439 }
2763 2440
2764 -.frm-border-info-box,
2765 2441 .frm-embed-modal-option {
2766 - border-radius: var(--small-radius);
2767 - border: 1px solid var(--grey-300);
2768 - padding: var(--gap-sm);
2442 + border-radius: 6px;
2443 + border: 1px solid #E3E8EB;
2444 + padding: 20px;
2769 2445 cursor: pointer;
2770 - display: flex;
2771 - gap: var(--gap-sm);
2772 - font-size: var(--text-sm);
2773 2446 }
2774 2447
2775 2448 .frm-embed-modal-option + .frm-embed-modal-option {
2776 - margin-top: var(--gap-sm);
2449 + margin-top: 10px;
2777 2450 }
2778 2451
2779 -.frm-collapsed .frmsvg,
2780 -.caret.rotate-270,
2781 -.frm-embed-modal-option .caret {
2782 - align-self: center;
2783 - margin-left: auto;
2784 - transform: rotate(-90deg);
2452 +#frm_embed_modal .frm-modal-cancel {
2453 + display: none;
2785 2454 }
2786 2455
2787 -#frm_embed_modal .frm_modal_footer {
2788 - display: none;
2456 +#frm_embed_modal.frm-on-page-2 .frm-modal-cancel {
2457 + display: inline;
2789 2458 }
2790 2459
2791 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2792 - display: block;
2460 +.frm-embed-modal-icon-wrapper {
2461 + background: var(--primary-color);
2462 + border-radius: 4px;
2463 + padding: 10px;
2464 + color: #fff;
2465 + display: inline-block;
2466 + vertical-align: top;
2793 2467 }
2794 2468
2469 +.frm-embed-modal-icon-wrapper + div {
2470 + display: inline-block;
2471 + padding-left: 13px;
2472 + transform: translateY(-4px);
2473 +}
2474 +
2475 +.frm-embed-modal-option:after {
2476 + content: "\e913" !important;
2477 + font-family: "s11-fp" !important;
2478 + font-size: 18px;
2479 + position: absolute;
2480 + right: 10px;
2481 + top: 50%;
2482 + transform: translateY(-50%);
2483 +}
2484 +
2795 2485 .frm-embed-modal-content ul {
2796 2486 max-height: 300px;
2797 2487 overflow-y: scroll;
2798 2488 }
@@ -2802,22 +2492,20 @@
2802 2492 }
2803 2493
2804 2494 /* Bulk Options */
2805 2495 #frm-bulk-modal .frm_grid_container {
2496 + border-top: 1px solid var(--grey-border);
2806 2497 grid-template-columns: repeat(12, 8.33%);
2807 2498 grid-gap: 0;
2808 2499 }
2809 2500
2810 2501 #frm-bulk-modal .frm8 {
2811 - border-right: 1px solid var(--grey-300);
2812 - padding: 10px 20px 10px var(--gap-lg);
2502 + border-right: 1px solid var(--grey-border);
2503 + padding: 0 20px 20px;
2813 2504 }
2814 2505
2815 -#frm-bulk-modal .frm4 {
2816 - padding: 10px 0;
2817 -}
2818 -
2819 -.frm-inline-modal .howto {
2506 +.frm-inline-modal .howto,
2507 +#frm-bulk-modal .howto {
2820 2508 margin: 5px 0 10px;
2821 2509 color: var(--grey);
2822 2510 }
2823 2511
@@ -2834,18 +2522,18 @@
2834 2522 }
2835 2523
2836 2524 .frm-bulk-edit-link {
2837 2525 text-align: right;
2838 - font-size: var(--text-sm);
2526 + font-size: 14px;
2839 2527 padding: 0 5px 10px;
2840 2528 }
2841 2529
2842 2530 .frm-small-add {
2843 - font-size: var(--text-sm) !important;
2531 + font-size: 14px !important;
2844 2532 }
2845 2533
2846 2534 .frm-small-add span {
2847 - color: var(--primary-500);
2535 + color: var(--primary-color);
2848 2536 font-size: 12px;
2849 2537 height: 12px;
2850 2538 width: 12px;
2851 2539 }
@@ -2860,30 +2548,32 @@
2860 2548 }
2861 2549
2862 2550 .frm-right-panel .inside a.frm_pro_tip,
2863 2551 a.frm_pro_tip {
2864 - font-size: var(--text-sm);
2552 + font-size: 14px;
2865 2553 display: inline-block;
2866 - color: var(--grey-700);
2554 + color: var(--dark-grey);
2867 2555 background: #FFE7DE;
2868 2556 border-radius: var(--small-radius);
2869 2557 padding: 5px 15px;
2870 2558 margin: 0 auto;
2559 + line-height: 1.4;
2871 2560 display: flex;
2872 2561 align-items: center;
2873 2562 }
2874 2563
2875 2564 a.frm_pro_tip:hover {
2876 - color: var(--grey-700);
2877 - border-color: var(--primary-500);
2565 + color: var(--dark-grey);
2566 + border-color: var(--primary-color);
2878 2567 }
2879 2568
2880 2569 a.frm_pro_tip:hover .frmsvg {
2881 - fill: var(--primary-500);
2570 + fill: var(--primary-color);
2882 2571 }
2883 2572
2884 2573 .frm_field_list .frm_pro_tip {
2885 2574 margin: 10px 15px;
2575 + padding-left: 40px;
2886 2576 position: relative;
2887 2577 width: calc(100% - 30px);
2888 2578 box-sizing: border-box;
2889 2579 }
@@ -2899,9 +2589,8 @@
2899 2589 }
2900 2590
2901 2591 .frm-tip-info {
2902 2592 flex: 1;
2903 - text-align: left;
2904 2593 }
2905 2594
2906 2595 .frm-tip-cta {
2907 2596 color: var(--orange);
@@ -2911,9 +2600,9 @@
2911 2600 float: right;
2912 2601 }
2913 2602
2914 2603 .frm_pro_tip:hover .frm-tip-cta {
2915 - color: var(--primary-500);
2604 + color: var(--primary-color);
2916 2605 }
2917 2606
2918 2607 /*Switch form dropdown*/
2919 2608 h1 .fa-caret-down {
@@ -2928,23 +2617,16 @@
2928 2617 vertical-align: middle;
2929 2618 }
2930 2619
2931 2620 .caret,
2932 -.wp-admin .frm_wrap select,
2933 -.frm_wrap .frm_form_builder select,
2934 2621 .frm_wrap .ui-autocomplete-input {
2935 - background: transparent url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23667085%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2936 - background-size: var(--text-md) var(--text-md);
2937 - padding-right: var(--gap-lg) !important;
2622 + 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%;
2623 + background-size: 16px 16px;
2938 2624 }
2939 2625
2940 -.caret {
2941 - padding-right: var(--gap-xs) !important;
2942 -}
2943 -
2944 2626 .frm-btn-group .caret {
2945 2627 float: right;
2946 - margin-top: calc( var(--text-md) / 2 );
2628 + margin-top: 6px;
2947 2629 }
2948 2630
2949 2631 .dropdown {
2950 2632 position: relative;
@@ -2953,10 +2635,8 @@
2953 2635 .dropdown-toggle:focus {
2954 2636 outline: 0;
2955 2637 }
2956 2638
2957 -.frm_wrap .ui-autocomplete,
2958 -#frm_adv_info.frm-dropdown-menu,
2959 2639 .frm-dropdown-menu {
2960 2640 /* Copied from .dropdown-menu rules from Bootstrap */
2961 2641 position: absolute;
2962 2642 top: 100%;
@@ -2963,25 +2643,22 @@
2963 2643 left: 0;
2964 2644 z-index: 1000;
2965 2645 display: none;
2966 2646 float: left;
2967 - padding-left: 4px;
2968 - padding-right: 4px;
2969 - margin: var(--gap-xs) 0 0;
2647 + padding: 0.5rem 0;
2648 + margin: 0;
2970 2649 text-align: left;
2971 2650 list-style: none;
2972 - background: none;
2973 2651 background-color: #fff;
2974 2652 background-clip: padding-box;
2975 - border: 1px solid var(--grey-100);
2653 + border: 1px solid rgba(0, 0, 0, 0.15);
2976 2654 border-radius: 0.25rem;
2977 - box-shadow: var(--box-shadow-lg);
2978 2655
2979 2656 /* Custom rules */
2980 2657 max-height: 200px;
2981 2658 overflow-y: auto;
2982 2659 overflow-x: hidden;
2983 - font-size: var(--text-md);
2660 + font-size: 0.9rem;
2984 2661 width: auto;
2985 2662 min-width: 160px;
2986 2663 }
2987 2664
@@ -2989,8 +2666,12 @@
2989 2666 min-width: 100px;
2990 2667 max-width: 99%;
2991 2668 }
2992 2669
2670 +#frm_bs_dropdown > a {
2671 + font-size: 1em;
2672 +}
2673 +
2993 2674 #frm_bs_dropdown .frm-dropdown-menu {
2994 2675 max-width: 400px;
2995 2676 }
2996 2677
@@ -2999,15 +2680,11 @@
2999 2680 }
3000 2681
3001 2682 #frm_field_group_controls .frm-dropdown-menu,
3002 2683 .frm-field-action-icons .frm-dropdown-menu {
3003 - min-width: 180px !important;
2684 + min-width: 160px !important;
3004 2685 }
3005 2686
3006 -.frm-field-action-icons .frm-dropdown-toggle svg {
3007 - color: #9EA9B8;
3008 -}
3009 -
3010 2687 .multiselect-container.frm-dropdown-menu,
3011 2688 #search-submit .frm-dropdown-menu {
3012 2689 min-width: 200px !important;
3013 2690 }
@@ -3015,9 +2692,9 @@
3015 2692 .preview .frm-dropdown-menu {
3016 2693 min-width: 230px !important;
3017 2694 }
3018 2695
3019 -.frm-dropdown-menu.dropdown-menu-right {
2696 +.frm-dropdown-menu.pull-right {
3020 2697 right: 0;
3021 2698 left: auto;
3022 2699 }
3023 2700
@@ -3031,11 +2708,8 @@
3031 2708 .frm-dropdown-menu > .dropdown-item {
3032 2709 margin: 0;
3033 2710 }
3034 2711
3035 -.frm-select-list-item,
3036 -.frm_wrap .ui-autocomplete li > div,
3037 -.multiselect-container button.multiselect-option,
3038 2712 .frm-dropdown-menu > .dropdown-item > a,
3039 2713 .frm-dropdown-menu .frm_dropdown_li {
3040 2714 clear: both;
3041 2715 font-weight: normal;
@@ -3040,24 +2714,19 @@
3040 2714 clear: both;
3041 2715 font-weight: normal;
3042 2716 white-space: nowrap;
3043 2717 text-decoration: none;
3044 - border-radius: var(--small-radius);
3045 2718 }
3046 2719
3047 -.frm-dropdown-menu > .active > a,
3048 -.frm-dropdown-menu > .active > a:hover,
3049 -.frm-dropdown-menu > .active > a:focus {
2720 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3050 2721 text-decoration: none;
3051 2722 outline: 0;
3052 2723 }
3053 2724
3054 -.frm-select-list-item.disabled,
3055 2725 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3056 2726 color: #999999;
3057 2727 }
3058 2728
3059 -.frm-select-list-item.disabled:hover,
3060 2729 .frm-dropdown-menu > .disabled > a:hover,
3061 2730 .frm-dropdown-menu > .disabled > a:focus {
3062 2731 text-decoration: none;
3063 2732 background-color: transparent;
@@ -3074,11 +2743,12 @@
3074 2743 }
3075 2744
3076 2745 .dropdown-header {
3077 2746 display: block;
3078 - padding: 3px 10px;
3079 - font-size: var(--text-xs);
3080 - color: var(--grey-400);
2747 + padding: 3px 20px;
2748 + font-size: 12px;
2749 + line-height: 1.428571429;
2750 + color: #999999;
3081 2751 }
3082 2752
3083 2753 .dropdown-backdrop {
3084 2754 position: fixed;
@@ -3088,9 +2758,8 @@
3088 2758 top: 0;
3089 2759 z-index: 990;
3090 2760 }
3091 2761
3092 -.dropdown-menu-right > .frm-dropdown-menu,
3093 2762 .pull-right > .frm-dropdown-menu {
3094 2763 right: 0;
3095 2764 left: auto;
3096 2765 }
@@ -3110,13 +2779,13 @@
3110 2779 .btn {
3111 2780 border: 1px solid #ddd;
3112 2781 background: #fff;
3113 2782 height: 28px;
3114 - line-height: var(--leading);
2783 + line-height: 1.5;
3115 2784 }
3116 2785
3117 2786 a.frm_option_icon:before {
3118 - color: var(--primary-500);
2787 + color: var(--primary-color);
3119 2788 font-size: 22px;
3120 2789 width: 22px;
3121 2790 height: 22px;
3122 2791 }
@@ -3122,9 +2791,9 @@
3122 2791 }
3123 2792
3124 2793 a.frm_option_icon:focus::before,
3125 2794 a.frm_option_icon:hover::before {
3126 - color: var(--primary-700);
2795 + color: var(--primary-hover);
3127 2796 }
3128 2797
3129 2798 .frm_top_left .frm-dropdown-toggle {
3130 2799 color: #999;
@@ -3138,17 +2807,17 @@
3138 2807 text-decoration: none;
3139 2808 }
3140 2809
3141 2810 .frm-card .frm-dropdown-toggle {
3142 - border: 1px solid var(--grey-300);
2811 + border: 1px solid var(--grey-border);
3143 2812 border-radius: var(--small-radius);
3144 2813 font-size: 13px;
3145 - color: var(--grey-700);
2814 + color: var(--dark-grey);
3146 2815 padding: 7px 20px;
3147 2816 }
3148 2817
3149 2818 .frm_actions_dropdown .frm-dropdown-menu {
3150 - font-size: var(--text-sm);
2819 + font-size: 14px;
3151 2820 color: #5F6C72;
3152 2821 }
3153 2822
3154 2823 .frm-dropdown-menu .frm_icon_font {
@@ -3160,21 +2829,20 @@
3160 2829 /* BS Multiselect */
3161 2830 .multiselect-container.frm-dropdown-menu {
3162 2831 top: auto;
3163 2832 left: auto;
3164 - font-size: var(--text-sm);
3165 - padding: 4px;
2833 + font-size: 14px;
2834 + padding-top: 3px;
3166 2835 margin-bottom: 3px;
3167 2836 }
3168 2837
3169 2838 .frm-right-panel .accordion-section-content {
3170 2839 background: transparent;
3171 - padding: 0;
3172 - overflow: initial;
2840 + padding-top: 0
3173 2841 }
3174 2842
3175 -.frm-right-panel .accordion-section-content > .inside {
3176 - padding: 0 0 var(--gap-xs);
2843 +.frm-right-panel .accordion-section-content > .inside {
2844 + padding: 0;
3177 2845 }
3178 2846
3179 2847 .frm-right-panel .accordion-section-content .inside a {
3180 2848 font-size: inherit;
@@ -3181,10 +2849,10 @@
3181 2849 }
3182 2850
3183 2851 #post-body-content + .frm-right-panel h3.accordion-section-title {
3184 2852 padding: 7px 10px 8px 14px;
3185 - font-size: var(--text-md);
3186 - color: var(--grey-700);
2853 + font-size: 16px;
2854 + color: var(--dark-grey);
3187 2855 }
3188 2856
3189 2857 .frm-right-panel .control-section.open h3 {
3190 2858 border-bottom: none;
@@ -3193,22 +2861,22 @@
3193 2861 .js .frm-right-panel .control-section.open .accordion-section-title,
3194 2862 .js .frm-right-panel .control-section .accordion-section-title:focus,
3195 2863 .js .frm-right-panel .control-section .accordion-section-title:hover {
3196 2864 background: transparent;
3197 - color: var(--grey-900);
2865 + color: var(--dark-grey);
3198 2866 }
3199 2867
3200 2868 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3201 - color: var(--grey-700);
2869 + color: var(--dark-grey);
3202 2870 }
3203 2871
3204 2872 .frm-with-line,
3205 2873 .accordion-section-content h4 {
3206 - font-size: var(--text-md);
2874 + font-size: 16px;
3207 2875 font-weight: 400;
3208 2876 margin: 20px -20px 10px;
3209 2877 padding: 0 20px;
3210 - color: var(--grey-700);
2878 + color: var(--dark-grey);
3211 2879 position: relative;
3212 2880 border: none !important;
3213 2881 }
3214 2882
@@ -3238,9 +2906,9 @@
3238 2906 .accordion-section-content h4:before {
3239 2907 content: '';
3240 2908 display: block;
3241 2909 position: absolute;
3242 - border-bottom: 1px solid var(--grey-300);
2910 + border-bottom: 1px solid var(--grey-border);
3243 2911 left: 0;
3244 2912 width: 100%;
3245 2913 top: 50%;
3246 2914 }
@@ -3258,9 +2926,8 @@
3258 2926 font-family: "s11-fp" !important;
3259 2927 font-size: 18px;
3260 2928 font-variant: normal;
3261 2929 text-rendering: auto;
3262 - vertical-align: text-top;
3263 2930 }
3264 2931
3265 2932 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3266 2933 transform: rotate(90deg);
@@ -3266,9 +2933,9 @@
3266 2933 transform: rotate(90deg);
3267 2934 }
3268 2935
3269 2936 .frm-right-panel .accordion-section-title:after {
3270 - top: calc(50% - 10px) !important;
2937 + right: 20px;
3271 2938 }
3272 2939
3273 2940 .frm-right-panel .open .accordion-section-title:after {
3274 2941 content: "\e62a" !important;
@@ -3277,9 +2944,9 @@
3277 2944 .frm-right-panel .accordion-section-title:before {
3278 2945 content: "\f1de" !important;
3279 2946 color: var(--grey);
3280 2947 font-size: 17px !important;
3281 - margin: 0 10px 0 0;
2948 + margin: 0 10px;
3282 2949 }
3283 2950
3284 2951 .form-title-style .accordion-section-title:before,
3285 2952 .section-fields-style .accordion-section-title:before {
@@ -3337,16 +3004,12 @@
3337 3004 .progress-bars-style .accordion-section-title:before{
3338 3005 content: "\e939" !important;
3339 3006 }
3340 3007
3341 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3342 3008 .frm-right-panel h3.accordion-section-title {
3343 3009 padding: 15px 20px;
3344 3010 background: var(--sidebar-color);
3345 - line-height: var(--leading);
3346 - color: var(--grey-700);
3347 - font-size: var(--text-lg);
3348 - font-weight: 400;
3011 + line-height: 1;
3349 3012 }
3350 3013
3351 3014 .control-section .accordion-section-title:after, /** Form template list */
3352 3015 .customize-pane-child .accordion-section-title:after {
@@ -3376,12 +3039,14 @@
3376 3039 max-width: 250px;
3377 3040 }
3378 3041
3379 3042 .multiselect-container button.multiselect-option {
3043 + display: block;
3380 3044 width: 100%;
3381 3045 text-align: left;
3046 + background: none;
3382 3047 border: none;
3383 - margin-bottom: 4px;
3048 + padding: 5px 0 5px 15px;
3384 3049 }
3385 3050
3386 3051 .multiselect-container button.multiselect-option label {
3387 3052 margin-left: 5px;
@@ -3429,13 +3094,8 @@
3429 3094 width: 100%;
3430 3095 height: auto;
3431 3096 }
3432 3097
3433 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3434 - vertical-align: sub;
3435 - vertical-align: -webkit-baseline-middle;
3436 -}
3437 -
3438 3098 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3439 3099 background-color: var(--blue-border);
3440 3100 }
3441 3101
@@ -3462,9 +3122,9 @@
3462 3122 .frm-fake-field {
3463 3123 display: block;
3464 3124 height: 25px;
3465 3125 background-color: var(--light-blue);
3466 - border: 1px solid var(--grey-300);
3126 + border: 1px solid var(--grey-border);
3467 3127 margin: 10px 0;
3468 3128 border-radius: var(--small-radius);
3469 3129 }
3470 3130
@@ -3470,15 +3130,15 @@
3470 3130
3471 3131 .frm-embed-message {
3472 3132 position: absolute;
3473 3133 background: #fff;
3474 - border: 1px solid var(--grey-300);
3475 - color: var(--grey-700);
3476 - padding: var(--gap-md);
3477 - font-size: var(--text-lg);
3134 + border: 1px solid var(--grey-border);
3135 + color: var(--dark-grey);
3136 + padding: 37px 0;
3137 + font-size: 18px;
3478 3138 max-width: 200px;
3479 3139 min-width: 50%;
3480 - margin: 0 var(--gap-md);
3140 + margin: 0 25px;
3481 3141 overflow: hidden;
3482 3142 text-overflow: ellipsis;
3483 3143 }
3484 3144
@@ -3485,9 +3145,9 @@
3485 3145 .frm-summary-message {
3486 3146 top: 50%;
3487 3147 left: 50%;
3488 3148 padding: 15px 0;
3489 - font-size: var(--text-md);
3149 + font-size: 16px;
3490 3150 transform: translate(-50%, -50%);
3491 3151 }
3492 3152
3493 3153 .frm-summary-learn-more {
@@ -3496,9 +3156,8 @@
3496 3156
3497 3157 .frm-single-settings .frm-embed-message {
3498 3158 width: 100%;
3499 3159 position: static;
3500 - border-radius: var(--small-radius);
3501 3160 }
3502 3161
3503 3162 #new_fields input[type=text],
3504 3163 #new_fields input[type=number],
@@ -3535,8 +3194,19 @@
3535 3194 width: 16px;
3536 3195 padding: 0;
3537 3196 }
3538 3197
3198 +.frm-star-group:not(.frm-star-hovered) input[type=radio]:checked + label:before,
3199 +.frm-star-group input + label:hover:before,
3200 +.frm-star-group:hover input + label:hover:before,
3201 +.frm-star-group .star-rating-on:before,
3202 +.frm-star-group .star-rating-hover:before,
3203 +.frm-star-group input[type=radio]:checked + label:before,
3204 +.frm-star-group input + label:before,
3205 +.frm-star-group .star-rating:before {
3206 + color: var( --blue-border);
3207 +}
3208 +
3539 3209 .frm_wrap .frm-number-range + .frm_last input,
3540 3210 .frm_wrap .frm-number-range input {
3541 3211 text-align: center;
3542 3212 font-weight: 600;
@@ -3543,9 +3213,9 @@
3543 3213 }
3544 3214
3545 3215 .frm_wrap .frm-number-range input[type=number],
3546 3216 .frm_wrap .frm-number-range input[type=text] {
3547 - color: var(--primary-700);
3217 + color: var(--primary-hover);
3548 3218 }
3549 3219
3550 3220 .frm-range-min {
3551 3221 position: relative;
@@ -3555,25 +3225,24 @@
3555 3225 content: '';
3556 3226 height: 3px;
3557 3227 width: 10px;
3558 3228 border-radius: 30%;
3559 - background: var(--primary-700);
3229 + background: var(--primary-hover);
3560 3230 position: absolute;
3561 3231 top: 17px;
3562 3232 right: -28%;
3563 3233 }
3564 3234
3565 -.frm_grid_container > p,
3566 3235 .frm_grid_container > p.frm_form_field,
3567 3236 .frm_grid_container > div.frm_form_field,
3568 3237 #new_fields .frm_grid_container > p {
3569 - margin-top: 8px;
3570 - margin-bottom: 8px;
3238 + margin-top: 7px;
3239 + margin-bottom: 7px;
3571 3240 margin-right: 0;
3572 3241 }
3573 3242
3574 3243 #new_fields div.frm_grid_container > .frm_primary_label {
3575 - margin-top: 8px;
3244 + margin-top: 7px;
3576 3245 }
3577 3246
3578 3247 #new_fields .frm_primary_label + p,
3579 3248 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3607,9 +3276,9 @@
3607 3276 }
3608 3277
3609 3278 .frm_form_builder .frm_radio label,
3610 3279 .frm_form_builder .frm_checkbox label {
3611 - font-size: var(--text-sm);
3280 + font-size: 14px;
3612 3281 }
3613 3282
3614 3283 /* Start copied front-end CSS */
3615 3284 .horizontal_radio .frm_radio,
@@ -3647,64 +3316,22 @@
3647 3316
3648 3317 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3649 3318 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3650 3319 .frm_wrap input[type=checkbox],
3651 -.frm-white-body input[type=checkbox],
3652 3320 .field-group input[type=checkbox],
3653 3321 .frm_scale input[type=radio],
3654 3322 .frm_radio input[type=radio],
3655 3323 .frm_checkbox input[type=checkbox] {
3656 - border: 1px solid var(--grey-300);
3324 + border: 1px solid var(--grey-border);
3657 3325 box-shadow: none;
3658 3326 -webkit-appearance: none;
3659 3327 }
3660 3328
3661 -
3662 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3663 -.frm_wrap input[type=checkbox],
3664 -.frm-white-body input[type=checkbox],
3665 -.field-group input[type=checkbox],
3666 -.frm_checkbox input[type=checkbox] {
3667 - border-radius: 4px;
3668 -}
3669 -
3670 -.frm-white-body input[type="checkbox"]:checked,
3671 -.frm_wrap input[type="checkbox"]:checked {
3672 - background-color: var(--primary-500);
3673 - border-color: var(--primary-500) !important;
3674 -}
3675 -
3676 -.frm-white-body input[type="checkbox"]:checked:focus,
3677 -.frm_wrap input[type="checkbox"]:checked:focus {
3678 - border-color: var(--primary-500);
3679 -}
3680 -
3681 -.frm-white-body input[type="checkbox"]:checked::before,
3682 -.frm_wrap input[type="checkbox"]:checked::before {
3683 - content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3684 - height: 12px;
3685 - width: 12px;
3686 - margin: 1px;
3687 -}
3688 -
3689 3329 .frm_radio input[type="radio"],
3690 3330 .frm_checkbox input[type="checkbox"] {
3691 3331 margin-right: 5px;
3692 3332 }
3693 3333
3694 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3695 - margin: 5px 0;
3696 - width: 18px;
3697 - position: relative; /* override Bootstrap */
3698 -}
3699 -
3700 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3701 - position: relative !important;
3702 - left: calc(50% - 6px);
3703 - top: calc(50% - 6px);
3704 - margin: 0 !important;
3705 -}
3706 -
3707 3334 .frm_inner_field_container {
3708 3335 margin-bottom: 10px;
3709 3336 }
3710 3337
@@ -3730,22 +3357,8 @@
3730 3357 li.ui-state-default.selected > .frm_inner_field_container > label {
3731 3358 max-width: calc(100% - 100px);
3732 3359 }
3733 3360
3734 -.frm-drag-fade {
3735 - background-color: var(--lightest-grey) !important;
3736 - border-radius: 4px;
3737 -}
3738 -
3739 -.frm-drag-fade * {
3740 - opacity: 0;
3741 -}
3742 -
3743 -.frm-dragging .divider_section_only,
3744 -.frm-dragging .frm_field_box {
3745 - pointer-events: none;
3746 -}
3747 -
3748 3361 .frm_form_settings #op-popup, /* 1Password */
3749 3362 .frm_form_settings com-1password-op-button,
3750 3363 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3751 3364 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3880,15 +3493,15 @@
3880 3493 animation: spin 2s linear infinite;
3881 3494 }
3882 3495
3883 3496 .frm-wait:before {
3884 - border-bottom-color: var(--primary-700);
3885 - border-right-color: var(--primary-700);
3497 + border-bottom-color: var(--primary-hover);
3498 + border-right-color: var(--primary-hover);
3886 3499 }
3887 3500
3888 3501 .frm_loading_button.frm-button-secondary:before {
3889 - border-bottom-color: var(--primary-500);
3890 - border-right-color: var(--primary-500);
3502 + border-bottom-color: var(--primary-color);
3503 + border-right-color: var(--primary-color);
3891 3504 }
3892 3505
3893 3506 input[type=submit]:focus {
3894 3507 outline: none !important;
@@ -3912,9 +3525,9 @@
3912 3525 #editorcontainer #dyncontent {
3913 3526 margin: 0;
3914 3527 width: 100%;
3915 3528 padding: 6px;
3916 - line-height: var(--leading);
3529 + line-height: 1.5;
3917 3530 border: 0 none;
3918 3531 outline: none;
3919 3532 -moz-box-sizing: border-box;
3920 3533 -webkit-box-sizing: border-box;
@@ -3960,9 +3573,9 @@
3960 3573 font-size: 12px;
3961 3574 }
3962 3575
3963 3576 .frm_border_bottom {
3964 - border-bottom: 1px solid var(--grey-300);
3577 + border-bottom: 1px solid var(--grey-border);
3965 3578 margin-bottom: 10px;
3966 3579 padding-bottom: 10px;
3967 3580 }
3968 3581
@@ -3973,8 +3586,9 @@
3973 3586 .frm_posttax_opt_list .frm_border_bottom input {
3974 3587 margin-right: 1px;
3975 3588 }
3976 3589
3590 +.frm_logic_row,
3977 3591 .frm_add_remove div.frm_form_field {
3978 3592 padding-bottom: 5px;
3979 3593 }
3980 3594
@@ -4032,23 +3646,17 @@
4032 3646 font-size: inherit;
4033 3647 }
4034 3648
4035 3649 #frm-options-panel {
4036 - padding: 0 var(--gap-sm);
4037 - color: var(--grey-900);
3650 + padding: 0 15px;
3651 + color: var(--darkest-grey);
4038 3652 }
4039 3653
4040 -.frm-right-panel a.frm_add_logic_link,
4041 3654 #frm-options-panel h3 {
4042 3655 padding: 15px 0;
4043 3656 margin-top: -2px;
4044 3657 }
4045 3658
4046 -#frm_style_sidebar h3,
4047 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4048 - padding: 15px 0;
4049 -}
4050 -
4051 3659 .frm_field_key {
4052 3660 background-color: #F7F7F7;
4053 3661 }
4054 3662
@@ -4082,12 +3690,8 @@
4082 3690 .frm-alt-table tr:nth-child(even) {
4083 3691 background-color: var(--sidebar-color);
4084 3692 }
4085 3693
4086 -.frm-alt-table h3 {
4087 - margin-bottom: 0;
4088 -}
4089 -
4090 3694 .form-field .frm_cb_button {
4091 3695 height: 22px;
4092 3696 line-height: 20px;
4093 3697 margin-bottom: 10px;
@@ -4192,9 +3796,9 @@
4192 3796 li.sortable-placeholder {
4193 3797 border: none;
4194 3798 margin: 0;
4195 3799 visibility: visible !important;
4196 - box-shadow: 2px -10px 0 2px var(--primary-500);
3800 + box-shadow: 2px -10px 0 1px var(--primary-color);
4197 3801 }
4198 3802
4199 3803 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4200 3804 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4205,8 +3809,9 @@
4205 3809 #frm_form_editor_container > ul > li > ul {
4206 3810 position: relative;
4207 3811 }
4208 3812
3813 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4209 3814 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4210 3815 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4211 3816 position: absolute;
4212 3817 top: 20px;
@@ -4213,29 +3818,38 @@
4213 3818 bottom: 0;
4214 3819 }
4215 3820
4216 3821 .edit_field_type_divider + li.sortable-placeholder {
4217 - box-shadow: 2px 5px 0 2px var(--primary-500);
3822 + box-shadow: 2px 5px 0 1px var(--primary-color);
4218 3823 }
4219 3824
4220 3825 .start_divider li.sortable-placeholder {
4221 - box-shadow: 2px -5px 0 2px var(--primary-500);
3826 + box-shadow: 2px -5px 0 1px var(--primary-color);
4222 3827 }
4223 3828
4224 -.frm-is-collapsed + .sortable-placeholder {
4225 - box-shadow: 2px 15px 0 2px var(--primary-500);
3829 +.frm_single_option.ui-sortable-placeholder {
3830 + box-shadow: 0 0 1px 1px var(--primary-color);
4226 3831 }
4227 3832
4228 -.frm_single_option.ui-sortable-placeholder {
4229 - box-shadow: 0 0 1px 1px var(--primary-500);
3833 +.frm-is-collapsed + .sortable-placeholder {
3834 + box-shadow: 2px 15px 0 1px var(--primary-color);
4230 3835 }
4231 3836
4232 3837 .frm_sorting > li.edit_field_type_end_divider:first-child,
3838 +.frm_sorting > .frmbutton + .sortable-placeholder, /* hide for first field */
3839 +.no-drop-placeholder,
4233 3840 .frm-show-click,
4234 3841 li.ui-state-default.edit_field_type_divider .frm-show-click {
4235 3842 display: none;
4236 3843 }
4237 3844
3845 +.frm_form_field.ui-sortable-helper {
3846 + height: 30px !important;
3847 + background-color: #fff !important;
3848 + overflow: hidden !important;
3849 + box-sizing: border-box;
3850 +}
3851 +
4238 3852 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4239 3853 .frm_form_field.ui-sortable-helper .frm_form_fields,
4240 3854 .frm_form_field.ui-sortable-helper .frm_description,
4241 3855 .frm_form_field.ui-sortable-helper .description {
@@ -4278,8 +3892,16 @@
4278 3892 #new_fields .frm_single_option input[type=text] {
4279 3893 width: calc(100% - 73px);
4280 3894 }
4281 3895
3896 +.frm-right-panel.styling_settings .frm_image_preview_wrapper {
3897 + width: 100%;
3898 +}
3899 +
3900 +.frm-right-panel.styling_settings .frm_image_preview_wrapper .frm_choose_image_box {
3901 + margin-left: 0;
3902 +}
3903 +
4282 3904 .frm-right-panel .frm_single_option a.frm_remove_tag,
4283 3905 .frm_single_option a {
4284 3906 padding-left: 7px;
4285 3907 }
@@ -4337,10 +3959,10 @@
4337 3959 /* Image options for Radio and Checkbox */
4338 3960
4339 3961 .frm_image_options .frm_image_option_container {
4340 3962 --field-border-width: 1px;
4341 - --border-color: var(--grey-300);
4342 - --border-color-active: var(--primary-500);
3963 + --border-color: var(--grey-border);
3964 + --border-color-active: var(--primary-color);
4343 3965 --border-radius: var(--small-radius);
4344 3966 }
4345 3967
4346 3968 .frm_image_option_container svg {
@@ -4394,10 +4016,10 @@
4394 4016 height: 75px;
4395 4017 object-fit: cover;
4396 4018 }
4397 4019
4398 -.frm_list_entry_page img {
4399 - max-width: 100%;
4020 +.frm_list_entry_page .frm_file_link img {
4021 + max-width: 75px;
4400 4022 height: auto;
4401 4023 }
4402 4024
4403 4025 .frm_image_option_container .frm_empty_url {
@@ -4441,13 +4063,13 @@
4441 4063 margin-top: 17px;
4442 4064 }
4443 4065
4444 4066 .frm_image_data {
4445 - margin-left: var(--gap-xs);
4067 + margin-left: 10px;
4446 4068 display: flex;
4447 4069 flex-direction: column;
4448 - font-size: var(--text-sm);
4449 - justify-content: space-around;
4070 + font-size: 14px;
4071 + line-height: 17px;
4450 4072 }
4451 4073
4452 4074 .frm_image_styling_frame {
4453 4075 display: flex;
@@ -4471,9 +4093,10 @@
4471 4093 max-width: 54px;
4472 4094 }
4473 4095
4474 4096 .frm_image_preview_title{
4475 - color: var(--grey-500);
4097 + margin-top: 6px;
4098 + color: rgba(40, 47, 54, 0.65);
4476 4099 overflow: hidden;
4477 4100 white-space: nowrap;
4478 4101 text-overflow: ellipsis;
4479 4102 }
@@ -4479,9 +4102,9 @@
4479 4102 }
4480 4103
4481 4104 .frm_wrap .frm_choose_image_box {
4482 4105 cursor: pointer;
4483 - color: var(--grey-700);
4106 + color: var(--dark-grey);
4484 4107 background-color: #F2F2F2;
4485 4108 margin-left: 24px;
4486 4109 text-align: center;
4487 4110 width: 100%;
@@ -4490,11 +4113,13 @@
4490 4113 .frm_wrap .frm_choose_image_box:hover {
4491 4114 background: #fff;
4492 4115 }
4493 4116
4117 +a.frm_remove_image_option .frmsvg,
4494 4118 a.frm_remove_image_option,
4495 4119 .frm_remove_image_option {
4496 - color: var(--grey-400);
4120 + margin-top: 9px;
4121 + color: rgba(40, 47, 54, 0.4);
4497 4122 cursor: pointer;
4498 4123 }
4499 4124
4500 4125 a.frm_remove_image_option:hover .frmsvg,
@@ -4504,10 +4129,17 @@
4504 4129 }
4505 4130
4506 4131 /* Form settings */
4507 4132
4133 +#form_settings_page label,
4134 +.frm_form_builder label {
4135 + font-weight: normal;
4136 + font-size: 15px;
4137 + color: var(--dark-grey);
4138 +}
4139 +
4508 4140 .frm-form-setting-tabs {
4509 - margin-top: var(--gap-sm) !important;
4141 + margin-top: 20px !important;
4510 4142 }
4511 4143
4512 4144 .frm-right-panel > .postbox {
4513 4145 background-color: transparent;
@@ -4518,44 +4150,40 @@
4518 4150
4519 4151 .frm-right-panel .postbox.frm_with_icons .inside,
4520 4152 .frm-right-panel .postbox .inside,
4521 4153 .frm-right-panel .inside {
4522 - font-size: var(--text-md);
4154 + font-size: 16px;
4523 4155 padding: 15px 20px 20px;
4524 - color: var(--grey-700);
4156 + color: var(--dark-grey);
4525 4157 }
4526 4158
4527 4159 .frm-right-panel .misc-pub-section {
4528 - padding: var(--gap-xs) 0;
4160 + padding: 10px 0;
4161 + line-height: 1.4em;
4529 4162 position: relative;
4530 4163 }
4531 4164
4532 4165 .frm-right-panel .inside a,
4533 4166 .frm-form-setting-tabs a {
4534 - font-size: var(--text-md);
4535 - color: var(--grey-700);
4536 - padding: var(--gap-sm);
4167 + font-size: 16px;
4168 + color: var(--dark-grey);
4169 + padding: 15px 15px 15px 20px;
4537 4170 display: block;
4538 4171 }
4539 4172
4540 -.frm-form-setting-tabs a {
4541 - color: var(--grey-900);
4542 - padding: var(--gap-sm) var(--gap-md);
4543 -}
4544 -
4545 4173 .frm-right-panel .inside a {
4546 4174 padding: 0;
4547 - color: var(--primary-500);
4175 + color: var(--primary-color);
4548 4176 display: inline-block;
4549 4177 }
4550 4178
4551 4179 .frm-right-panel .inside a:hover {
4552 - color: var(--primary-700);
4180 + color: var(--primary-hover);
4553 4181 }
4554 4182
4555 4183 .frm-form-setting-tabs a:hover {
4556 4184 background: var(--sidebar-hover);
4557 - color: var(--grey-900);
4185 + color: var(--dark-grey);
4558 4186 }
4559 4187
4560 4188 .frm-right-panel .inside i,
4561 4189 .frm-right-panel .inside .frmsvg,
@@ -4564,20 +4192,16 @@
4564 4192 margin: 0 5px;
4565 4193 display: inline-block;
4566 4194 width: 20px;
4567 4195 height: 20px;
4568 - color: var(--grey-500);
4196 + color: var(--grey);
4569 4197 }
4570 4198
4571 -.frm-form-setting-tabs a .frmsvg {
4572 - margin: 0;
4573 -}
4574 -
4575 4199 .frm-right-panel .inside a:hover i,
4576 4200 .frm-right-panel .inside a:hover .frmsvg,
4577 4201 .frm-form-setting-tabs a:hover .frmsvg,
4578 4202 .frm-form-setting-tabs a:hover span {
4579 - color: var(--grey-700);
4203 + color: var(--dark-grey);
4580 4204 }
4581 4205
4582 4206 .frm_settings_form .tabs-panel {
4583 4207 padding: 0 25px;
@@ -4591,9 +4215,9 @@
4591 4215
4592 4216 #frm_adv_info .tabs-panel {
4593 4217 min-height: 0 !important;
4594 4218 overflow-x: hidden;
4595 - padding: 0;
4219 + padding: 0 20px;
4596 4220 border: none;
4597 4221 background: transparent;
4598 4222 }
4599 4223
@@ -4602,130 +4226,48 @@
4602 4226 }
4603 4227
4604 4228 .frm_posttax_opt_list,
4605 4229 .frm_submit_logic_rows {
4606 - border: 1px solid var(--grey-300);
4607 - padding: var(--gap-md);
4230 + border: 1px solid var(--grey-border);
4231 + padding: 25px;
4608 4232 border-radius: var(--small-radius);
4609 - margin: 5px 0 5px var(--gap-md);
4233 + margin: 5px 0 5px 25px;
4610 4234 }
4611 4235
4612 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4613 - margin: 0;
4614 -}
4615 -
4616 -/* Color picker CSS */
4617 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4236 +/* Admin toggle */
4237 +.frm_toggle_off,
4238 +.frm_toggle_on {
4239 + display: none;
4240 + color: #fff;
4241 + z-index: 999;
4618 4242 position: absolute;
4619 - margin-left: calc( ( 100% - 35px ) * -1 );
4620 - margin-top: 1px;
4621 - width: calc( 100% - 36px );
4243 + font-size: 10px;
4244 + line-height: 20px;
4245 + left: 6px;
4622 4246 }
4623 4247
4624 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4625 - border: none;
4626 - padding: 5px 8px;
4627 - font-family: inherit;
4628 - color: var(--grey-700);
4629 - font-size: var(--text-md);
4630 - width: 100%;
4631 - line-height: var(--leading);
4632 -}
4633 -
4634 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4635 - display: none !important;
4636 -}
4637 -
4638 -.frm-right-panel .wp-picker-holder {
4639 - position: absolute;
4640 - z-index: 999;
4641 -}
4642 -
4643 -.frm-right-panel .wp-picker-input-wrap label {
4644 - margin-bottom: 0;
4645 -}
4646 -
4647 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4648 - width: 100%;
4649 - overflow: hidden;
4650 - margin: 0 !important;
4651 - height: var(--h-md) !important;
4652 - padding: 0 0 0 var(--gap-lg) !important;
4653 - border-radius: var(--small-radius);
4654 - border-color: var(--grey-300);
4655 -}
4656 -
4657 -.frm-right-panel .wp-color-result-text {
4658 - line-height: var(--leading) !important;
4659 - font-size: var(--text-md);
4660 - background: #fff !important;
4661 - color: var(--grey-900);
4662 - padding: 5px 8px;
4663 - border-color: var(--grey-300);
4664 - text-align: left;
4665 -}
4666 -
4667 -.frm-right-panel .color-alpha {
4668 - width: var(--gap-lg) !important;
4669 -}
4670 -
4671 -.frm_grid_container .wp-picker-container {
4672 - width: 100%;
4673 - position: relative;
4674 -}
4675 -
4676 -.wp-picker-container button.wp-color-result {
4677 - border: 1px solid var(--grey-300) !important;
4678 -}
4679 -
4680 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4681 - max-width: 100%;
4682 - position: relative;
4683 -}
4684 -
4685 -.frm_end .wp-picker-holder {
4686 - margin-left: -145px;
4687 -}
4688 -
4689 -.frm_end.frm6 .wp-picker-holder {
4690 - margin-left: -86px;
4691 -}
4692 -/* End of color picker CSS */
4693 -
4694 -/*
4695 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4696 -To use this element, you can call the FrmHtmlHelper::toggle function.
4697 -*/
4698 -.frm_toggle_opt {
4699 - padding: 0;
4700 - white-space: normal;
4248 +.frm_toggle_off {
4701 4249 display: inline;
4702 - vertical-align: middle;
4703 - font-weight: normal;
4250 + left: auto;
4251 + right: 5px;
4252 + color: var(--dark-grey);
4704 4253 }
4705 4254
4706 -.frm_on_label,
4707 -.frm_off_label {
4708 - color: #444444;
4709 -}
4710 -
4711 4255 .frm_toggle {
4712 4256 position: relative;
4713 4257 display: inline-block;
4714 - width: 40px;
4715 - height: var(--h-xs);
4258 + width: 45px;
4259 + height: 20px;
4716 4260 vertical-align: middle;
4261 + margin: 2px;
4717 4262 }
4718 4263
4719 -.frm_toggle_block {
4720 - display: inline-flex;
4721 - gap: var(--gap-sm);
4722 - align-items: center;
4264 +label > span.frm_toggle {
4265 + margin-right: 15px;
4723 4266 }
4724 4267
4725 -.frm_toggle input, /* Reverse compatibility */
4726 -.frm_toggle_block input {
4727 - display:none !important;
4268 +.frm_toggle input {
4269 + display: none !important;
4728 4270 }
4729 4271
4730 4272 .frm_toggle_slider {
4731 4273 position: absolute;
@@ -4733,44 +4275,26 @@
4733 4275 top: 0;
4734 4276 left: 0;
4735 4277 right: 0;
4736 4278 bottom: 0;
4737 - background-color: var(--grey-border);
4738 4279 transition: .4s;
4739 4280 border-radius: 30px;
4281 + background-color: #fff;
4282 + box-shadow: 0 0 0 2px var(--grey);
4740 4283 }
4741 4284
4742 4285 .frm_toggle_slider:before {
4743 4286 border-radius: 50%;
4744 4287 position: absolute;
4745 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 20 20%27><path d=%27M16.8 4.5l-1.3-1.3L10 8.6 4.5 3.2 3.2 4.5 8.6 10l-5.4 5.5 1.3 1.3 5.5-5.4 5.5 5.4 1.3-1.3-5.4-5.5 5.4-5.5z%27 fill=%27%2398A2B3%27/%3E</svg>");
4746 - height: 22px;
4747 - width: 22px;
4748 - padding: 0 5.5px;
4749 - left: 1px;
4750 - bottom: 1px;
4751 - background-color: white;
4752 - transition: .4s;
4753 - box-sizing: border-box;
4754 - box-shadow: var(--box-shadow-md);
4755 - font-size: 21px;
4756 - line-height: 18px;
4288 + content: "";
4289 + height: 16px;
4290 + width: 16px;
4291 + left: 2px;
4292 + top: 2px;
4293 + transition: .3s;
4294 + background-color: var(--grey);
4757 4295 }
4758 4296
4759 -input:checked + .frm_toggle .frm_toggle_slider {
4760 - background-color: var(--primary-500);
4761 -}
4762 -
4763 -input:focus + .frm_toggle .frm_toggle_slider {
4764 - box-shadow: var(--box-shadow-md);
4765 -}
4766 -
4767 -input:checked + .frm_toggle .frm_toggle_slider:before {
4768 - padding: 0 6px;
4769 - transform: translateX(16px);
4770 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 10 10%27><path d=%27M9.2 2c.2.3.2.7 0 1l-5 5c-.3.2-.6.2-.9 0L.8 5.3a.6.6 0 0 1 .9-.8l2 2 4.6-4.5c.3-.3.6-.3.9 0Z%27 fill=%27%234199FD%27/%3E</svg>");
4771 -}
4772 -
4773 4297 input[disabled] + .frm_toggle_slider {
4774 4298 pointer-events: none;
4775 4299 cursor: text;
4776 4300 opacity: .5;
@@ -4775,53 +4299,16 @@
4775 4299 cursor: text;
4776 4300 opacity: .5;
4777 4301 }
4778 4302
4779 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4780 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4781 -}
4782 -
4783 -.rtl .frm_toggle_opt {
4784 - padding: 0 8px;
4785 -}
4786 -
4787 -.rtl .frm_toggle_slider:before {
4788 - left: 17px;
4789 -}
4790 -
4791 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4792 - transform: none!important;
4793 - left: 1px;
4794 -}
4795 -
4796 -/* Deprecated admin toggle */
4797 -.frm_toggle_off,
4798 -.frm_toggle_on {
4799 - display: none;
4800 - color: #fff;
4801 - z-index: 999;
4802 - position: absolute;
4803 - font-size: 10px;
4804 - line-height: 20px;
4805 - left: 6px;
4806 -}
4807 -
4808 -.frm_toggle_off {
4809 - display: inline;
4810 - left: auto;
4811 - right: 5px;
4812 - color: var(--dark-grey);
4813 -}
4814 -
4815 4303 .frm_toggle_long {
4816 - width: 80% !important;
4304 + width: 80%;
4817 4305 height: 28px;
4818 - display: inline-block !important;
4819 4306 }
4820 4307
4821 4308 .frm_toggle_long .frm_toggle_slider {
4822 - background: var(--primary-700);
4823 - box-shadow: 0 0 0 2px var(--primary-700);
4309 + background: var(--primary-hover);
4310 + box-shadow: 0 0 0 2px var(--primary-hover);
4824 4311 }
4825 4312
4826 4313 .frm_toggle_long .frm_toggle_off,
4827 4314 .frm_toggle_long .frm_toggle_on {
@@ -4846,11 +4333,20 @@
4846 4333 border-radius: var(--border-radius) 0 0 var(--border-radius);
4847 4334 height: 100%;
4848 4335 background-color: #fff;
4849 4336 color: var(--primary-color);
4850 - content: '' !important;
4851 4337 }
4852 4338
4339 +input:checked + .frm_toggle_slider {
4340 + background-color: var(--primary-hover);
4341 + box-shadow: 0 0 0 2px var(--primary-hover);
4342 +}
4343 +
4344 +input:checked + .frm_toggle_slider:before {
4345 + transform: translateX(25px);
4346 + background-color: #fff;
4347 +}
4348 +
4853 4349 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4854 4350 transform: translateX(101%);
4855 4351 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4856 4352 }
@@ -4865,9 +4361,9 @@
4865 4361
4866 4362 .frm_toggle_long .frm_toggle_on,
4867 4363 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4868 4364 display: inline;
4869 - color: var(--primary-500);
4365 + color: var(--primary-color);
4870 4366 font-weight: normal;
4871 4367 }
4872 4368
4873 4369 .frm_toggle_long .frm_toggle_off,
@@ -4875,9 +4371,11 @@
4875 4371 color: #fff;
4876 4372 font-weight: bold;
4877 4373 }
4878 4374
4879 -/* End toggle styling */
4375 +input:focus + .frm_toggle_slider {
4376 + box-shadow: 0 0 1px #008ec2;
4377 +}
4880 4378
4881 4379 /* Global Settings */
4882 4380
4883 4381 .tabs-panel {
@@ -4895,59 +4393,21 @@
4895 4393 margin-right: 20px !important;
4896 4394 display: inline-block !important;
4897 4395 }
4898 4396
4899 -#frm_stripe_icon {
4900 - border-radius: 5px;
4901 -}
4902 -
4903 -#captcha_settings .frm_primary_label {
4904 - margin-top: var(--gap-sm);
4905 -}
4906 -
4907 -.frm-long-icon-buttons {
4908 - display: flex;
4909 - gap: var(--gap-md);
4910 -}
4911 -
4912 -.frm-long-icon-buttons > label {
4913 - border: 1px solid var(--grey-300);
4914 - color: var(--grey-700);
4915 - border-radius: var(--small-radius);
4916 - display: flex;
4917 - padding: var(--gap-sm);
4918 - gap: var(--gap-sm);
4919 - justify-content: center;
4920 - align-items: center;
4921 - width: calc( 33% - var(--gap-sm) );
4922 - box-sizing: border-box;
4923 -}
4924 -
4925 -.frm-long-icon-buttons > label:hover {
4926 - color: var(--primary-500);
4927 -}
4928 -
4929 -.frm-long-icon-buttons input[type=radio] {
4930 - display: none;
4931 -}
4932 -
4933 -.frm-long-icon-buttons input[type=radio]:checked + label {
4934 - border-color: var(--primary-500);
4935 - box-shadow: 0 0 0 1px var(--primary-color);
4936 -}
4937 -
4938 -.frm-long-icon-buttons label > svg {
4939 - height: 21px;
4940 -}
4941 -
4942 4397 .frm-example-icon .frmsvg,
4943 4398 .frm-example-icon i {
4944 4399 height: 20px;
4945 4400 width: 20px;
4946 4401 font-size: 20px;
4947 - color: var(--grey-700);
4402 + color: var(--dark-grey);
4948 4403 }
4949 4404
4405 +.edd_frm_license_row {
4406 + clear: both;
4407 + line-height: 2em;
4408 +}
4409 +
4950 4410 .frm_license_msg {
4951 4411 margin-top: 0;
4952 4412 }
4953 4413
@@ -4974,14 +4434,23 @@
4974 4434
4975 4435 .frm_no_items {
4976 4436 margin: 0 auto 50px;
4977 4437 text-align: center;
4978 - color: var(--grey-700);
4438 + color: var(--dark-grey);
4979 4439 max-width: 500px;
4980 4440 }
4981 4441
4442 +.frm_no_items h2 {
4443 + font-size: 25px;
4444 + margin-bottom: 30px !important;
4445 +}
4446 +
4447 +.frm_no_items p {
4448 + font-size: 14px;
4449 +}
4450 +
4982 4451 .frm-subscribe {
4983 - margin: var(--gap-lg) 0;
4452 + margin: 30px 0;
4984 4453 }
4985 4454
4986 4455 /* Inbox */
4987 4456
@@ -4991,16 +4460,16 @@
4991 4460
4992 4461 .frm_inbox_card {
4993 4462 display: grid;
4994 4463 grid-template-columns: 72px 1fr;
4995 - grid-gap: var(--gap-xs);
4996 - border-bottom: 1px solid var(--grey-300);
4997 - padding: var(--gap-md);
4464 + grid-gap: 15px;
4465 + border-bottom: 1px solid var(--grey-border);
4466 + padding: 25px;
4998 4467 }
4999 4468
5000 4469 .frm_inbox_card_icon {
5001 4470 grid-row: span 3 / span 3;
5002 - padding-top: var(--gap-xs);
4471 + padding-top: 20px;
5003 4472 text-align: center
5004 4473 }
5005 4474
5006 4475 .frm_inbox_card_icon svg {
@@ -5019,8 +4488,11 @@
5019 4488 border: none;
5020 4489 text-transform: none;
5021 4490 margin: 0;
5022 4491 padding: 0;
4492 + font-weight: 600;
4493 + color: var(--medium-grey);
4494 + font-size: 16px;
5023 4495 }
5024 4496
5025 4497 .frm_inbox_date {
5026 4498 text-align: right;
@@ -5048,8 +4520,37 @@
5048 4520 margin-left: 2px;
5049 4521 vertical-align: text-bottom;
5050 4522 }
5051 4523
4524 +/* Styles tabs */
4525 +
4526 +#frm_styling_form #frm_delete_style {
4527 + padding-right: 10px;
4528 +}
4529 +
4530 +#frm_styling_form #frm_delete_style .frmsvg {
4531 + vertical-align: -webkit-baseline-middle;
4532 +}
4533 +
4534 +.frm_pro_form .frm_form_field.frm_lite_style,
4535 +.frm_pro_form .frm_lite_style {
4536 + display: none !important;
4537 +}
4538 +
4539 +label.default-style-box input[type="checkbox"] {
4540 + vertical-align: middle;
4541 +}
4542 +
4543 +#frm_styling_form .frm_form_field input[type="checkbox"],
4544 +#frm_styling_form .frm_form_field input[type="radio"] {
4545 + vertical-align: bottom;
4546 +}
4547 +
4548 +#frm_styling_form .howto span {
4549 + float: none;
4550 + margin-top: 0;
4551 +}
4552 +
5052 4553 /* Import/Export */
5053 4554 .csv_opts #frm_csv_col_sep {
5054 4555 width: 45px;
5055 4556 }
@@ -5100,9 +4601,9 @@
5100 4601 padding: 0;
5101 4602 }
5102 4603
5103 4604 .frm-feature-banner {
5104 - background: var(--grey-700);
4605 + background: var(--dark-grey);
5105 4606 color: #fff;
5106 4607 border-radius: var(--small-radius);
5107 4608 padding: 20px;
5108 4609 margin: 10px 0;
@@ -5108,9 +4609,9 @@
5108 4609 margin: 10px 0;
5109 4610 }
5110 4611
5111 4612 .frm-feature-banner p {
5112 - font-size: var(--text-sm);
4613 + font-size: 14px;
5113 4614 }
5114 4615
5115 4616 .frm-feature-banner .dismiss {
5116 4617 margin-top: -10px;
@@ -5145,31 +4646,29 @@
5145 4646 /*Form Settings Tab*/
5146 4647
5147 4648 h2.frm-h2,
5148 4649 .frm_form_settings h2 {
5149 - border-bottom: 1px solid var(--grey-300);
5150 - color: var(--grey-900);
5151 - font-weight: 400 !important;
4650 + border-bottom: 1px solid var(--grey-border);
4651 + color: var(--dark-grey);
4652 + font-size: 20px !important;
4653 + font-weight: 500 !important;
5152 4654 padding: 9px 0 5px;
5153 4655 margin: 0;
5154 4656 }
5155 4657
5156 4658 .frm_settings_form h3,
5157 -.frm_form_settings h3,
5158 -.frm_form_settings span.frm_add_logic_link {
5159 - font-size: var(--text-md);
5160 - border-top: 1px solid var(--grey-300);
5161 - padding-top: var(--gap-sm);
5162 - margin: var(--gap-sm) 0;
4659 +.frm_form_settings h3 {
4660 + font-size: 16px;
4661 + border-top: 1px solid var(--grey-border);
4662 + padding-top: 10px;
5163 4663 font-weight: normal;
5164 4664 text-transform: uppercase;
5165 4665 color: var(--medium-grey);
5166 - display: block;
5167 4666 }
5168 4667
5169 4668 .frm_form_settings .howto {
5170 - color: var(--grey-500);
5171 - font-size: var(--text-sm);
4669 + color: var(--medium-grey);
4670 + font-size: 15px;
5172 4671 margin-top: 8px;
5173 4672 }
5174 4673
5175 4674 .frm_form_settings .advanced_settings .form-table {
@@ -5184,10 +4683,18 @@
5184 4683 width: 95%;
5185 4684 }
5186 4685
5187 4686 .frm_wrap .ui-autocomplete {
4687 + box-shadow: none;
4688 + border: 1px solid var(--grey-border);
4689 + border-radius: var(--small-radius);
4690 + background: var(--lightest-grey);
4691 + position: absolute;
5188 4692 padding: 3px 0;
4693 + font-size: 15px;
5189 4694 max-height: 310px;
4695 + overflow-y: auto;
4696 + overflow-x: hidden;
5190 4697 }
5191 4698
5192 4699 .frm_wrap .ui-widget {
5193 4700 font-family: inherit;
@@ -5193,15 +4700,26 @@
5193 4700 font-family: inherit;
5194 4701 }
5195 4702
5196 4703 .frm_wrap .ui-autocomplete li {
5197 - padding: 2px 4px;
4704 + padding: 2px 10px;
5198 4705 background: none;
5199 - color: var(--grey-700);
4706 + color: var(--dark-grey);
5200 4707 border: none;
5201 4708 font-weight: normal;
5202 4709 }
5203 4710
4711 +.frm_wrap .ui-autocomplete li div.ui-state-active,
4712 +.frm_wrap .ui-autocomplete li.ui-state-focus {
4713 + background: rgb(65, 153, 253);
4714 + color: #fff;
4715 +}
4716 +
4717 +.frm_wrap .ui-autocomplete .ui-menu-item-wrapper {
4718 + padding: 2px 10px;
4719 + border-radius: var(--small-radius);
4720 +}
4721 +
5204 4722 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5205 4723 border: none;
5206 4724 font-weight: inherit;
5207 4725 }
@@ -5240,9 +4758,9 @@
5240 4758 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5241 4759 height: 10px;
5242 4760 }
5243 4761
5244 -#frm_adv_info .frm_noallow {
4762 +.frm_page_container #frm_adv_info .frm_noallow {
5245 4763 display: none;
5246 4764 }
5247 4765
5248 4766 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5277,9 +4795,9 @@
5277 4795 #frm_notification_settings .widget-top .widget-action,
5278 4796 #frm_form_editor_container .widget-top .widget-action {
5279 4797 border: 0;
5280 4798 margin: 0;
5281 - padding: 8px;
4799 + padding: 10px;
5282 4800 background: 0 0;
5283 4801 cursor: pointer;
5284 4802 outline: 0;
5285 4803 }
@@ -5284,12 +4802,12 @@
5284 4802 outline: 0;
5285 4803 }
5286 4804
5287 4805 #frm_email_addon_menu {
5288 - border: 1px solid var(--grey-300);
5289 - padding: var(--gap-sm);
4806 + border: 1px solid var(--grey-border);
4807 + padding: 15px;
5290 4808 border-radius: 4px;
5291 - margin: var(--gap-md) 0 var(--gap-sm);
4809 + margin: 25px 0 15px;
5292 4810 }
5293 4811
5294 4812 #frm_email_addon_menu .frm-search {
5295 4813 float: right;
@@ -5300,12 +4818,8 @@
5300 4818 clear: none;
5301 4819 padding-top: 7px;
5302 4820 }
5303 4821
5304 -.frm_email_settings .widget .widget-top {
5305 - background-color: var(--sidebar-color);
5306 -}
5307 -
5308 4822 .frm_email_settings .widget .widget-top,
5309 4823 .frm_email_settings .widget .widget-top h3 {
5310 4824 cursor: pointer !important;
5311 4825 }
@@ -5310,17 +4824,23 @@
5310 4824 cursor: pointer !important;
5311 4825 }
5312 4826
5313 4827 .frm_email_settings .widget {
5314 - margin-bottom: var(--gap-sm);
4828 + margin-bottom: 15px;
4829 + line-height: 1.4em;
4830 + padding: 0;
5315 4831 }
5316 4832
4833 +.frm_email_settings .widget:last-of-type {
4834 + margin-bottom: 20px;
4835 +}
4836 +
5317 4837 .frm_form_action_settings .widget-top {
5318 4838 box-shadow: none;
5319 - border-color: var(--grey-300);
5320 - border-radius: var(--small-radius);
4839 + border-color: var(--grey-border);
4840 + border-radius: 4px;
5321 4841 background: var(--lightest-grey);
5322 - color: var(--grey-700);
4842 + color: var(--dark-grey);
5323 4843 }
5324 4844
5325 4845 .frm_form_action_settings:hover .widget-top {
5326 4846 border-color: var(--grey);
@@ -5332,9 +4852,9 @@
5332 4852 border-bottom: none;
5333 4853 }
5334 4854
5335 4855 .frm_form_action_settings.open:hover .widget-top {
5336 - border-color: var(--grey-300);
4856 + border-color: var(--grey-border);
5337 4857 }
5338 4858
5339 4859 .frm_form_action_settings > .widget-inside {
5340 4860 display: none;
@@ -5346,9 +4866,9 @@
5346 4866
5347 4867 .frm_form_action_settings .widget-inside {
5348 4868 min-height: 25px;
5349 4869 padding: 15px;
5350 - border-color: var(--grey-300);
4870 + border-color: var(--grey-border);
5351 4871 border-bottom-left-radius: 4px;
5352 4872 border-bottom-right-radius: 4px;
5353 4873 }
5354 4874
@@ -5356,14 +4876,14 @@
5356 4876 .frm_form_action_settings .widget-title h3 {
5357 4877 display: inline-block;
5358 4878 border-bottom: none;
5359 4879 padding: 10px 10px 5px;
5360 - font-size: var(--text-md);
4880 + font-size: 16px;
5361 4881 font-weight: 500;
5362 4882 }
5363 4883
5364 4884 #frm_email_addon_menu h3 {
5365 - margin: 0 0 var(--gap-sm);
4885 + margin: 0 0 15px;
5366 4886 clear: both;
5367 4887 }
5368 4888
5369 4889 .frm_single_api_settings p > label {
@@ -5399,9 +4919,9 @@
5399 4919 }
5400 4920
5401 4921 #frm-hide-groups,
5402 4922 #frm-show-groups {
5403 - font-size: var(--text-md);
4923 + font-size: 16px;
5404 4924 float: right;
5405 4925 }
5406 4926
5407 4927 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5408,16 +4928,16 @@
5408 4928 outline: none;
5409 4929 }
5410 4930
5411 4931 .frm_actions_list a {
5412 - font-size: var(--text-sm);
5413 - color: var(--grey-700);
4932 + font-size: 14px;
4933 + color: var(--dark-grey);
5414 4934 word-break: break-word;
5415 4935 }
5416 4936
5417 4937 .frm_actions_list span.frm-outer-circle {
5418 4938 /* 50px total with 30px content */
5419 - background-color: var(--grey-100);
4939 + background-color: var(--sidebar-color);
5420 4940 padding: 10px;
5421 4941 text-align: center;
5422 4942 border-radius: 50%;
5423 4943 display: block;
@@ -5423,13 +4943,12 @@
5423 4943 display: block;
5424 4944 width: 30px;
5425 4945 height: 30px;
5426 4946 margin: 0 auto 15px;
5427 - line-height: 1;
5428 4947 }
5429 4948
5430 4949 .frm_email_settings .widget-title h4 {
5431 - color: var(--grey-700);
4950 + color: var(--dark-grey);
5432 4951 }
5433 4952
5434 4953 .frm_disabled_action .widget-title h4 {
5435 4954 color: var(--grey);
@@ -5445,17 +4964,16 @@
5445 4964 }
5446 4965
5447 4966 span.frm-inner-circle,
5448 4967 .frm_email_settings .widget-title .frm_form_action_icon {
5449 - background-color: var(--grey-400);
4968 + background-color: var(--grey-border);
5450 4969 border-radius: 50%;
5451 4970 display: inline-block;
5452 4971 text-align: center;
5453 - line-height: 1;
5454 4972 }
5455 4973
5456 4974 span.frm-inner-circle {
5457 - background-color: var(--primary-700);
4975 + background-color: var(--primary-hover);
5458 4976 height: 22px;
5459 4977 width: 22px;
5460 4978 padding: 4px;
5461 4979 color: #fff;
@@ -5468,9 +4986,9 @@
5468 4986 .frm_email_settings .widget-title .frm_form_action_icon {
5469 4987 height: 15px;
5470 4988 width: 15px;
5471 4989 padding: 5px;
5472 - color: #fff;
4990 + color: var(--lightest-grey);
5473 4991 vertical-align: middle;
5474 4992 }
5475 4993
5476 4994 .frm_actions_list .frmsvg,
@@ -5491,9 +5009,9 @@
5491 5009 }
5492 5010
5493 5011 span.frm-inner-circle.frm-inverse {
5494 5012 background-color: transparent;
5495 - color: var(--primary-700);
5013 + color: var(--primary-hover);
5496 5014 padding: 0;
5497 5015 height: 30px;
5498 5016 width: 100%;
5499 5017 }
@@ -5499,9 +5017,9 @@
5499 5017 }
5500 5018
5501 5019 .frm_actions_list span.frm-inverse i,
5502 5020 .frm_actions_list span.frm-inverse .frmsvg {
5503 - color: var(--primary-700);
5021 + color: var(--primary-hover);
5504 5022 height: 30px;
5505 5023 width: 30px;
5506 5024 font-size: 30px;
5507 5025 padding: 0;
@@ -5513,9 +5031,9 @@
5513 5031 font-size: 30px;
5514 5032 }
5515 5033
5516 5034 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5517 - background: #fff;
5035 + background: transparent;
5518 5036 padding: 0;
5519 5037 height: 24px;
5520 5038 width: 24px;
5521 5039 }
@@ -5521,17 +5039,18 @@
5521 5039 }
5522 5040
5523 5041 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5524 5042 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5525 - color: var(--grey-400);
5043 + color: var(--grey-border);
5526 5044 height: 24px;
5527 5045 width: 24px;
5528 5046 font-size: 24px;
5047 + line-height: 1em;
5529 5048 }
5530 5049
5531 5050 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5532 5051 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5533 - color: var(--grey-500);
5052 + color: var(--grey);
5534 5053 }
5535 5054
5536 5055 .frm_email_icons {
5537 5056 padding: 10px 0 5px 6px;
@@ -5542,8 +5061,9 @@
5542 5061 margin-left: 8px;
5543 5062 color: var(--grey);
5544 5063 opacity: 0;
5545 5064 transition: all .2s ease;
5065 + vertical-align: middle;
5546 5066 }
5547 5067
5548 5068 .frm_email_icons a .frmsvg {
5549 5069 color: var(--grey);
@@ -5562,8 +5082,16 @@
5562 5082 .frm_actions_list .frm_inactive_action i {
5563 5083 opacity: .4;
5564 5084 }
5565 5085
5086 +.frm-no-margin {
5087 + margin: 0;
5088 +}
5089 +
5090 +.frm-no-border {
5091 + border: none !important;
5092 +}
5093 +
5566 5094 table td, .form-table tr td {
5567 5095 vertical-align: top;
5568 5096 }
5569 5097
@@ -5590,12 +5118,8 @@
5590 5118 #frm_notification_settings .frm_form_action_settings td p {
5591 5119 padding: 7px 0;
5592 5120 }
5593 5121
5594 -#permissions_settings_settings .frm_grid_container {
5595 - align-items: center;
5596 -}
5597 -
5598 5122 #frm_notification_settings .form-table > tbody > tr > th {
5599 5123 width: 150px;
5600 5124 font-weight: normal;
5601 5125 padding-right: 10px;
@@ -5617,8 +5141,9 @@
5617 5141 #frm_notification_settings .frm_left_label {
5618 5142 /* For add-ons that haven't been updated for 4.0 */
5619 5143 float: none;
5620 5144 width: auto !important;
5145 + line-height: 1;
5621 5146 }
5622 5147
5623 5148 .frm-fields .frm_autoresponder_rows select {
5624 5149 width: auto;
@@ -5631,17 +5156,16 @@
5631 5156 width: 100%;
5632 5157 }
5633 5158
5634 5159 #frm_notification_settings .frm_email_buttons {
5635 - padding: var(--gap-2xs);
5160 + padding: 7px;
5636 5161 background: var(--light-blue);
5637 - color: var(--primary-700);
5638 - border-radius: var(--small-radius);
5162 + color: var(--primary-hover);
5163 + border-radius: 4px;
5639 5164 border-color: var(--blue-border);
5640 - line-height: 1;
5165 + line-height: 1em;
5641 5166 height: auto;
5642 - min-height: 12px;
5643 - font-size: var(--text-xs);
5167 + font-size: 12px;
5644 5168 box-shadow: none;
5645 5169 }
5646 5170
5647 5171 .frm_reply_to_container,
@@ -5646,31 +5170,34 @@
5646 5170
5647 5171 .frm_reply_to_container,
5648 5172 .frm_bcc_cc_container {
5649 5173 float: right;
5650 - margin: -4px 0 0;
5174 + margin: -8px 0 0;
5651 5175 z-index: 1;
5652 5176 position: relative;
5653 5177 }
5654 5178
5655 5179 .frm_email_row .frm_cancel1_icon:before {
5180 + line-height: 1;
5656 5181 vertical-align: bottom;
5657 5182 }
5658 5183
5184 +.frm_action_id {
5185 + padding-top: 10px;
5186 +}
5187 +
5659 5188 .frm_logic_field_opts {
5660 5189 max-width: 35%;
5661 5190 }
5662 5191
5663 5192 .frm-inline-select,
5664 -p.frm-inline-select,
5665 5193 #frm_submit_logic_row,
5666 5194 .frm_logic_rows .frm-collapse-me {
5667 - line-height: var(--h-md) !important;
5195 + line-height: 30px;
5668 5196 }
5669 5197
5670 -.frm_logic_row {
5671 - padding: var(--gap-xs) 0 0;
5672 - align-items: center;
5198 +.frm_logic_row:first-of-type {
5199 + padding-top: 8px;
5673 5200 }
5674 5201
5675 5202 .frm-single-settings .frm_logic_row > select {
5676 5203 max-width: 32.5% !important;
@@ -5707,8 +5234,13 @@
5707 5234 margin-bottom: 0;
5708 5235 padding: 0;
5709 5236 }
5710 5237
5238 +.frm_form_settings input[type="text"] {
5239 + line-height: normal;
5240 + height: auto;
5241 +}
5242 +
5711 5243 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5712 5244 padding-bottom: 0;
5713 5245 }
5714 5246
@@ -5717,9 +5249,9 @@
5717 5249 padding-right: 15px;
5718 5250 }
5719 5251
5720 5252 #form_global_settings h3 {
5721 - font-size: var(--text-sm);
5253 + font-size: 14px;
5722 5254 margin-top: 25px;
5723 5255 }
5724 5256
5725 5257 #form_global_settings .tabs-panel + h3 {
@@ -5734,9 +5266,9 @@
5734 5266 border-top: 1px solid #eee;
5735 5267 border-bottom: none;
5736 5268 margin: 15px -15px 0;
5737 5269 padding: 8px 15px;
5738 - font-size: var(--text-sm);
5270 + font-size: 14px;
5739 5271 }
5740 5272
5741 5273 #poststuff .frm_form_settings h3.frm_first_h3,
5742 5274 #poststuff h3.frm_first_h3 {
@@ -5747,8 +5279,20 @@
5747 5279 h3.frm_add_logic_link {
5748 5280 margin-bottom: 0 !important;
5749 5281 }
5750 5282
5283 +a.frm_add_logic_link {
5284 + display: block;
5285 + text-align: center;
5286 + margin: 10px auto;
5287 + padding: 10px;
5288 + width: 80%;
5289 + max-width: 290px;
5290 + font-size: 19px;
5291 + border: 1px solid var(--primary-color);
5292 + border-radius: var(--border-radius);
5293 +}
5294 +
5751 5295 a.frm_add_logic_link.frm_hidden {
5752 5296 display: none;
5753 5297 }
5754 5298
@@ -5768,9 +5312,9 @@
5768 5312 bottom: 0;
5769 5313 }
5770 5314
5771 5315 .frm_right_addon input {
5772 - padding-right: var(--gap-lg);
5316 + padding-right: 30px;
5773 5317 }
5774 5318
5775 5319 .frm_icon_font {
5776 5320 color: #A0A0A0;
@@ -5776,12 +5320,8 @@
5776 5320 color: #A0A0A0;
5777 5321 color: var(--grey);
5778 5322 }
5779 5323
5780 -.frm-fields label .frm_icon_font {
5781 - font-size: inherit;
5782 -}
5783 -
5784 5324 .misc-pub-revisions.frm_icon_font,
5785 5325 .misc-pub-revisions.frm_icon_font:hover {
5786 5326 color: inherit;
5787 5327 }
@@ -5868,10 +5408,10 @@
5868 5408 position: relative;
5869 5409 top: 2px;
5870 5410 }
5871 5411
5872 -.frm-field-action-icons > a {
5873 - font-size: var(--text-md);
5412 +.frm-field-action-icons a {
5413 + font-size: 16px;
5874 5414 width: 17px;
5875 5415 }
5876 5416
5877 5417 .frm-field-action-icons a:hover {
@@ -5881,26 +5421,21 @@
5881 5421 .frm-field-action-icons .dropdown {
5882 5422 display: inline-block;
5883 5423 }
5884 5424
5885 -.frm-field-action-icons > a .frmsvg {
5886 - color: var(--grey-500) !important;
5425 +.frm-field-action-icons a .frmsvg {
5426 + color: #9EA9B8 !important;
5887 5427 font-size: 17px;
5888 5428 width: 17px;
5889 5429 height: 17px;
5890 5430 }
5891 5431
5892 -.frm-field-action-icons > a .frmsvg,
5893 -.frm-field-action-icons > div > a .frmsvg {
5894 - vertical-align: baseline;
5895 -}
5896 -
5897 5432 .edit_field_type_end_divider .frm-field-action-icons {
5898 5433 display: none !important;
5899 5434 }
5900 5435
5901 5436 .frm-move {
5902 - cursor: grab;
5437 + cursor: move;
5903 5438 }
5904 5439
5905 5440 span.howto {
5906 5441 display: inline;
@@ -5946,9 +5481,9 @@
5946 5481 margin-bottom: 10px;
5947 5482 }
5948 5483
5949 5484 .frm_no_entries_form .frm_no_entries_text {
5950 - line-height: var(--leading);
5485 + line-height: 200%;
5951 5486 }
5952 5487
5953 5488 #form_entries_page #the-list .no-items {
5954 5489 height: 240px; /* Equals to the max height of search dropdown */
@@ -5977,10 +5512,9 @@
5977 5512 }
5978 5513
5979 5514 .frm_wrap .google-visualization-table-tr-head,
5980 5515 .frm_wrap .google-visualization-table-tr-head th {
5981 - white-space: pre-wrap;
5982 - font-size: var(--text-md);
5516 + font-size: 16px;
5983 5517 font-weight: 400 !important;
5984 5518 text-align: left;
5985 5519 }
5986 5520
@@ -5996,8 +5530,12 @@
5996 5530 width: 20%;
5997 5531 min-width: 175px;
5998 5532 }
5999 5533
5534 +#form_reports_page h2 {
5535 + margin-top: 2em !important;
5536 +}
5537 +
6000 5538 /* Views Page */
6001 5539 #form_views_page img.frm_no_views {
6002 5540 max-width: 100%;
6003 5541 }
@@ -6107,9 +5645,9 @@
6107 5645 }
6108 5646
6109 5647 #frm-show-fields {
6110 5648 min-height: 350px;
6111 - padding: 0 0 35px;
5649 + padding: 10px 0 35px;
6112 5650 margin: 0;
6113 5651 position: relative;
6114 5652 }
6115 5653
@@ -6155,10 +5693,11 @@
6155 5693 .frm-field-group-hover-target #frm_field_group_controls {
6156 5694 visibility: visible;
6157 5695 }
6158 5696
6159 -#frm_field_group_controls .dropdown-item a span {
6160 - color: var(--grey-700);
5697 +#frm_field_group_controls .dropdown-item a span,
5698 +.frm-field-action-icons .dropdown-item a span {
5699 + color: var(--dark-grey);
6161 5700 }
6162 5701
6163 5702 #frm_field_group_controls .dropdown-item a:hover {
6164 5703 text-decoration: none;
@@ -6274,16 +5813,15 @@
6274 5813 }
6275 5814
6276 5815 .frm-page-collapsed .frm_clone_icon,
6277 5816 .frm-page-collapsed .frm_delete_field,
6278 -.frm-page-collapsed .frm_clone_field,
6279 -.frm-section-collapsed .frm_clone_icon {
5817 +.frm-section-collapsed .frm_clone_icon,
5818 +.frm-section-collapsed .frm_delete_field {
6280 5819 opacity: .5;
6281 5820 cursor: not-allowed;
6282 5821 }
6283 5822
6284 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6285 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5823 +.edit_field_type_summary .frm_clone_field {
6286 5824 display: none !important;
6287 5825 }
6288 5826
6289 5827 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6315,9 +5853,9 @@
6315 5853 content: '';
6316 5854 display: block;
6317 5855 padding: 2px 0;
6318 5856 line-height: 1px;
6319 - border-top: 2px solid var(--grey-300);
5857 + border-top: 2px solid var(--grey-border);
6320 5858 top: -2px;
6321 5859 position: absolute;
6322 5860 width: 100%;
6323 5861 transition: .5s border-color ease-in-out;
@@ -6338,10 +5876,10 @@
6338 5876 .frm_sorting li.ui-state-default.edit_field_type_divider {
6339 5877 overflow: visible;
6340 5878 position: relative;
6341 5879 padding: 0 0 0 20px;
6342 - margin: 25px 0 0 -5px;
6343 - border-left: 1px solid var(--primary-700);
5880 + margin: 25px 0 0 -20px;
5881 + border-left: 1px solid var(--primary-hover);
6344 5882 transition: border 0.7s ease-out;
6345 5883 }
6346 5884
6347 5885 .frm-section-collapsed {
@@ -6349,9 +5887,9 @@
6349 5887 }
6350 5888
6351 5889 .frm_sorting li.edit_field_type_end_divider,
6352 5890 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6353 - margin: 0 0 var(--gap-sm);
5891 + margin: 0 0 15px;
6354 5892 }
6355 5893
6356 5894 .frm-first-page .frm_prev_page {
6357 5895 display: none;
@@ -6356,19 +5894,22 @@
6356 5894 .frm-first-page .frm_prev_page {
6357 5895 display: none;
6358 5896 }
6359 5897
6360 -#frm_builder_page .frm_remove_form_row.frm_button,
6361 -#frm_builder_page .frm_add_form_row.frm_button {
5898 +#frm-form-button button,
5899 +.frm_remove_form_row.frm_button,
5900 +.frm_add_form_row.frm_button,
5901 +.frm-white-body .frm-preview-buttons button {
6362 5902 border-radius: var(--small-radius);
6363 5903 border: 1px solid var(--blue-border);
5904 + color: var(--primary-color);
6364 5905 }
6365 5906
6366 -#frm_builder_page .frm_remove_form_row .frmsvg,
6367 -#frm_builder_page .frm_remove_form_row i:before,
5907 +.frm_wrap .frm_remove_form_row .frmsvg,
5908 +.frm_remove_form_row i:before,
6368 5909 .frm_wrap .frm_add_form_row .frmsvg,
6369 5910 .frm_add_form_row i:before {
6370 - color: var(--primary-700);
5911 + color: var(--primary-hover);
6371 5912 }
6372 5913
6373 5914 .frm-preview-buttons .frm_button_submit {
6374 5915 margin: 0 5px;
@@ -6374,10 +5915,10 @@
6374 5915 margin: 0 5px;
6375 5916 }
6376 5917
6377 5918 .frm-page-break {
6378 - border-top: 1px dashed var(--primary-700);
6379 - margin-top: var(--gap-lg);
5919 + border-top: 1px dashed var(--primary-hover);
5920 + margin-top: 30px;
6380 5921 position: relative;
6381 5922 }
6382 5923
6383 5924 .edit_field_type_divider:before,
@@ -6390,9 +5931,9 @@
6390 5931 width: 4px;
6391 5932 height: 4px;
6392 5933 background-color: #fff;
6393 5934 border-radius: 50%;
6394 - border: 1px solid var(--primary-700);
5935 + border: 1px solid var(--primary-hover);
6395 5936 text-rendering: auto;
6396 5937 -webkit-font-smoothing: antialiased;
6397 5938 }
6398 5939
@@ -6414,12 +5955,13 @@
6414 5955 width: 20px;
6415 5956 height: 20px;
6416 5957 left: -11px;
6417 5958 top: 0;
6418 - background: var(--primary-700);
5959 + background: var(--primary-hover);
6419 5960 text-align: center;
6420 5961 color: #fff;
6421 5962 font-size: 13px;
5963 + line-height: 22px;
6422 5964 }
6423 5965
6424 5966 .edit_field_type_divider:before{
6425 5967 font-family: 's11-fp';
@@ -6440,20 +5982,20 @@
6440 5982
6441 5983
6442 5984 .frm_sorting li.edit_field_type_divider:hover,
6443 5985 .frm_sorting li.edit_field_type_divider.selected {
6444 - border-left-color: var(--primary-500);
5986 + border-left-color: var(--primary-color);
6445 5987 }
6446 5988
6447 5989 .edit_field_type_divider.selected:before,
6448 5990 .edit_field_type_divider:hover:before {
6449 - border-color: var(--primary-500);
6450 - background: var(--primary-500);
5991 + border-color: var(--primary-color);
5992 + background: var(--primary-color);
6451 5993 }
6452 5994
6453 5995 .edit_field_type_divider.selected:after,
6454 5996 .edit_field_type_divider:hover:after {
6455 - border-color: var(--primary-500);
5997 + border-color: var(--primary-color);
6456 5998 }
6457 5999
6458 6000 .frm-section-collapsed:after {
6459 6001 border-color: transparent !important;
@@ -6461,11 +6003,19 @@
6461 6003 }
6462 6004
6463 6005 .frm-page-break .frm-collapse-page.button {
6464 6006 margin-left: 46%;
6465 - margin-top: calc( -28px / 2 );
6007 + margin-top: -15px;
6008 + background-color: #fff;
6009 + border-color: var(--primary-hover) !important;
6010 + color: var(--primary-hover);
6466 6011 }
6467 6012
6013 +#frm-fake-page .frm-collapse-page.button {
6014 + border-color: var(--grey) !important;
6015 + color: var(--grey);
6016 +}
6017 +
6468 6018 #frm-fake-page.frm-page-collapsed {
6469 6019 margin-bottom: 0;
6470 6020 }
6471 6021
@@ -6471,15 +6021,15 @@
6471 6021
6472 6022 .frm-page-collapsed {
6473 6023 position: relative;
6474 6024 overflow: visible !important;
6475 - margin-bottom: var(--gap-lg);
6025 + margin-bottom: 30px;
6476 6026 }
6477 6027
6478 6028 .frm-page-collapsed:after {
6479 6029 content: '';
6480 6030 display: block;
6481 - border: 1px dashed var(--grey-300);
6031 + border: 1px dashed var(--grey-border);
6482 6032 border-left: none;
6483 6033 border-right: none;
6484 6034 height: 6px;
6485 6035 position: absolute;
@@ -6486,22 +6036,25 @@
6486 6036 width: calc( 100% - 10px );
6487 6037 bottom: -15px;
6488 6038 }
6489 6039
6490 -.frm-collapse-page .frmsvg,
6491 6040 .frm-collapse-page .frm_arrowdown6_icon {
6492 - width: var(--text-sm);
6493 - height: var(--text-sm);
6494 - font-size: var(--text-sm);
6041 + width: 16px;
6495 6042 text-align: center;
6496 6043 margin-left: 2px;
6497 - color: currentColor;
6044 + color: var(--primary-hover);
6498 6045 }
6499 6046
6500 6047 #frm-fake-page .frm_arrowdown6_icon {
6501 - color: currentColor;
6048 + color: var(--grey);
6502 6049 }
6503 6050
6051 +#frm-fake-page .frm-collapse-page:hover,
6052 +#frm-fake-page .frm-collapse-page:hover .frm_arrowdown6_icon,
6053 +.frm-collapse-page:hover .frm_arrowdown6_icon {
6054 + color: #fff;
6055 +}
6056 +
6504 6057 .frm-collapsed i:before,
6505 6058 .frm-section-collapsed .frm_arrowdown6_icon:before,
6506 6059 .frm-page-collapsed .frm_arrowdown6_icon:before {
6507 6060 content: '\e913';
@@ -6549,14 +6102,14 @@
6549 6102 .frm_no_section_fields {
6550 6103 text-align: center;
6551 6104 position: absolute;
6552 6105 color: var(--medium-grey);
6553 - font-size: var(--text-md);
6106 + font-size: 16px;
6554 6107 box-sizing: border-box;
6555 - border: 1px dashed var(--grey-300);
6108 + border: 1px dashed var(--grey-border);
6556 6109 }
6557 6110
6558 -.ui-droppable-active ~ .frm_no_fields {
6111 +.drop-me + .frm_no_fields {
6559 6112 border-style: solid;
6560 6113 }
6561 6114
6562 6115 .frm_no_section_fields {
@@ -6588,9 +6141,9 @@
6588 6141 display: block;
6589 6142 }
6590 6143
6591 6144 .frm-large-plus.frmsvg {
6592 - color: var(--primary-700);
6145 + color: var(--primary-hover);
6593 6146 height: 45px;
6594 6147 width: 45px;
6595 6148 }
6596 6149
@@ -6710,12 +6263,10 @@
6710 6263
6711 6264 .frm-category-tabs > li a,
6712 6265 .frm-category-tabs > li a:active {
6713 6266 outline: none;
6267 + -webkit-box-shadow: none;
6714 6268 box-shadow: none;
6715 - display: flex;
6716 - gap: var(--gap-xs);
6717 - align-items: center;
6718 6269 }
6719 6270
6720 6271 .frm-category-tabs > li.active .frmsvg,
6721 6272 .frm-category-tabs > li.active i,
@@ -6720,15 +6271,15 @@
6720 6271 .frm-category-tabs > li.active .frmsvg,
6721 6272 .frm-category-tabs > li.active i,
6722 6273 .frm-category-tabs > li.active span,
6723 6274 .frm-category-tabs > li.active a {
6724 - color: var(--primary-500);
6275 + color: var(--primary-color);
6725 6276 }
6726 6277
6727 6278 .frm_wrap .manage-menus {
6728 6279 margin-top: 0;
6729 6280 border: none;
6730 - border-bottom: 1px solid var(--grey-300);
6281 + border-bottom: 1px solid var(--grey-border);
6731 6282 background: var(--lightest-grey);
6732 6283 }
6733 6284
6734 6285 .general_settings .postbox .manage-menus {
@@ -6764,9 +6315,9 @@
6764 6315 padding-top: 10px;
6765 6316 }
6766 6317
6767 6318 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6768 - color: var(--grey-900);
6319 + color: var(--darkest-grey);
6769 6320 }
6770 6321
6771 6322 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6772 6323 box-shadow: none;
@@ -6782,14 +6333,14 @@
6782 6333 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6783 6334 .frm_update_msg,
6784 6335 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6785 6336 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6786 - border-color: var(--primary-500);
6337 + border-color: var(--primary-color);
6787 6338 transition: .5s border-color ease-in-out;
6788 6339 }
6789 6340
6790 6341 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6791 - box-shadow: 0 0 1px 0 var(--primary-500);
6342 + box-shadow: 0 0 1px 0 var(--primary-color);
6792 6343 }
6793 6344
6794 6345 .frm_sorting li.ui-state-default {
6795 6346 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6812,9 +6363,9 @@
6812 6363 font-weight: bold;
6813 6364 border: 1px solid #DFDFDF;
6814 6365 background-color: #EEEEEE;
6815 6366 padding: 3px 5px 2px;
6816 - font-size: var(--text-md);
6367 + font-size: 16px;
6817 6368 line-height: 20px;
6818 6369 }
6819 6370
6820 6371 .frm_update_msg {
@@ -6852,13 +6403,8 @@
6852 6403 .widefat .column-shortcode {
6853 6404 width: 9em;
6854 6405 }
6855 6406
6856 -.toplevel_page_formidable .column-shortcode div {
6857 - display: flex;
6858 - gap: var(--gap-xs);
6859 -}
6860 -
6861 6407 .widefat .column-entries, .widefat .column-link {
6862 6408 width: 10%;
6863 6409 text-align: center;
6864 6410 }
@@ -6866,22 +6412,23 @@
6866 6412 .widefat .column-form_key, .widefat .column-created_at {
6867 6413 width: 10%;
6868 6414 }
6869 6415
6870 -.frm-white-body .search-box,
6416 +.post-type-frm_display .search-box,
6871 6417 .frm_wrap .frm-search {
6872 6418 float: right;
6873 - margin: 0;
6419 + margin-bottom: 15px;
6874 6420 clear: right;
6875 6421 }
6876 6422
6877 -.frm-white-body .search-box,
6423 +#form_entries_page form .frm-search {
6424 + margin-top: 15px;
6425 +}
6426 +
6878 6427 .frm-search {
6879 - min-width: 32%;
6428 + width: 32%;
6429 + float: right;
6880 6430 position: relative;
6881 - display: flex;
6882 - gap: var(--gap-sm);
6883 - align-items: center;
6884 6431 }
6885 6432
6886 6433 .frm-inline-modal .frm-search,
6887 6434 #frm_adv_info .frm-search {
@@ -6887,9 +6434,9 @@
6887 6434 #frm_adv_info .frm-search {
6888 6435 float: none;
6889 6436 width: 100%;
6890 6437 clear: both;
6891 - margin: var(--gap-xs) 0;
6438 + margin: 5px 0 10px;
6892 6439 }
6893 6440
6894 6441 .frm-button-group a {
6895 6442 margin: 0 7px !important;
@@ -6906,9 +6453,9 @@
6906 6453
6907 6454 i.frm-show-box,
6908 6455 i.frm-show-inline-modal,
6909 6456 .frm-with-left-icon i,
6910 -.frm-with-right-icon i:not([class*=mce-]),
6457 +.frm-with-right-icon i,
6911 6458 .frmsvg.frm-show-box,
6912 6459 .frmsvg.frm-show-inline-modal,
6913 6460 .frm-with-left-icon .frmsvg,
6914 6461 .frm-with-right-icon .frmsvg,
@@ -6914,17 +6461,18 @@
6914 6461 .frm-with-right-icon .frmsvg,
6915 6462 .frm-search > .frmsvg,
6916 6463 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6917 6464 position: absolute;
6918 - padding: 0 14px;
6465 + padding: 7px 10px;
6919 6466 pointer-events: none;
6920 6467 left: 0;
6921 - color: var(--grey-400);
6922 - font-size: var(--text-xs);
6468 + color: var(--grey);
6469 + opacity: .5;
6470 + font-size: 18px;
6923 6471 }
6924 6472
6925 6473 .frm-with-right-icon .frmsvg,
6926 -.frm-with-right-icon i:not([class*=mce-]) {
6474 +.frm-with-right-icon i {
6927 6475 right: 0;
6928 6476 top: -3px;
6929 6477 left: auto;
6930 6478 padding: 0 10px 0 5px;
@@ -6929,35 +6477,20 @@
6929 6477 left: auto;
6930 6478 padding: 0 10px 0 5px;
6931 6479 }
6932 6480
6933 -.frm_form_settings .frm-with-right-icon .frmsvg {
6934 - top: 0;
6935 -}
6936 -
6937 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
6938 - top: auto;
6939 - bottom: 0;
6940 -}
6941 -
6942 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
6943 - top: auto;
6944 - bottom: 6px;
6945 -}
6946 -
6947 6481 .frmsvg.frm-show-box,
6948 6482 .frmsvg.frm-show-inline-modal,
6949 6483 i.frm-show-box,
6950 6484 i.frm-show-inline-modal {
6951 - color: var(--primary-500);
6485 + color: var(--primary-color);
6952 6486 pointer-events: initial;
6953 6487 cursor: pointer;
6954 6488 z-index: 1;
6955 6489 opacity: 1;
6490 + right: 2px;
6956 6491 top: auto;
6957 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
6958 - margin-bottom: 0;
6959 - padding: 0;
6492 + padding: 7px 10px;
6960 6493 }
6961 6494
6962 6495 .frm-open .frmsvg.frm-show-inline-modal,
6963 6496 .frm-open i.frm-show-inline-modal {
@@ -6980,9 +6513,9 @@
6980 6513
6981 6514 .frm_wrap .frm-with-right-icon textarea,
6982 6515 .frm_wrap .frm-with-right-icon input,
6983 6516 .frm_wrap .frm-with-right-icon input[type=text] {
6984 - padding-right: var(--gap-md);
6517 + padding-right: 35px;
6985 6518 }
6986 6519
6987 6520 #frm-show-fields .frm-with-left-icon .frmsvg,
6988 6521 #frm-show-fields .frm-with-left-icon i {
@@ -6988,29 +6521,43 @@
6988 6521 #frm-show-fields .frm-with-left-icon i {
6989 6522 padding-top: 10px;
6990 6523 }
6991 6524
6525 +.frm-search input.frm-search-input,
6992 6526 .frm-search input[name="s"],
6527 +.frm-search #search-submit {
6528 + border-color: var(--grey-border);
6529 + box-shadow: none;
6530 + margin: 0;
6531 + padding: 7px;
6532 + height: auto;
6533 + font-size: 13px;
6534 + line-height: normal;
6535 +}
6536 +
6993 6537 .frm-search .dropdown-toggle,
6994 6538 .frm-search input.frm-search-input {
6995 - border-radius: var(--small-radius);
6539 + border-radius: var(--border-radius);
6996 6540 padding-left: 33px !important;
6997 - border-color: var(--grey-300);
6998 6541 }
6999 6542
7000 -.frm_wrap .frm-search .frm-search-input,
7001 -.frm-modal .frm-search .frm-search-input,
7002 -.frm-white-body .search-box input[name="s"], /* Views search */
7003 -.frm_wrap .frm-search input[name="s"] {
7004 - padding-top: 3px;
7005 - padding-bottom: 3px;
7006 - flex: 1;
7007 - font-size: var(--text-sm);
6543 +.frm-search input[name="s"] {
6544 + width: 70%;
6545 + float: left;
6546 + border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
6547 + border-right-width: 0;
6548 + padding-left: 33px;
7008 6549 }
7009 6550
7010 -.frm-search .dropdown-toggle {
6551 +.frm-search .dropdown-toggle,
6552 +.frm-search input.frm-auto-search {
7011 6553 width: 100%;
6554 + border-right-width: 1px;
6555 + border-radius: var(--border-radius) !important;
7012 6556 float: none;
6557 +}
6558 +
6559 +.frm-search .dropdown-toggle {
7013 6560 max-width: 200px;
7014 6561 background: transparent;
7015 6562 padding: 7px;
7016 6563 min-height: 32px;
@@ -7018,18 +6565,22 @@
7018 6565 overflow: hidden;
7019 6566 text-overflow: ellipsis;
7020 6567 }
7021 6568
7022 -span.multiselect-selected-text {
6569 +.frm-search span.multiselect-selected-text {
7023 6570 white-space: nowrap;
7024 - display: inline-block;
7025 - max-width: 90%;
7026 - text-overflow: ellipsis;
7027 - overflow: hidden;
6571 + display: inline-block;
7028 6572 }
7029 6573
6574 +.frm-search #search-submit {
6575 + width: 30%;
6576 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
6577 + text-align: center;
6578 + background-color: var(--lightest-grey);
6579 +}
6580 +
7030 6581 .frm-search #search-submit a {
7031 - color: var(--grey-800);
6582 + color: var(--primary-color);
7032 6583 }
7033 6584
7034 6585 .frm-search #search-submit .caret {
7035 6586 opacity:.7;
@@ -7035,15 +6586,15 @@
7035 6586 opacity:.7;
7036 6587 }
7037 6588
7038 6589 .frm-not-set input {
7039 - color: var(--primary-500) !important;
6590 + color: var(--primary-color) !important;
7040 6591 font-size: 13px;
7041 6592 }
7042 6593
7043 6594 .frm-not-set .frmsvg,
7044 6595 .frm-not-set i {
7045 - color: var(--primary-700);
6596 + color: var(--primary-hover);
7046 6597 opacity: 1;
7047 6598 }
7048 6599
7049 6600 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7111,9 +6662,9 @@
7111 6662
7112 6663 .post-type-frm_display #advanced-sortables h2.hndle,
7113 6664 .post-type-frm_display #side-sortables h2.hndle,
7114 6665 .post-type-frm_display #normal-sortables h2.hndle {
7115 - border-bottom: 1px solid var(--grey-300);
6666 + border-bottom: 1px solid var(--grey-border);
7116 6667 margin: 10px 0 0 !important;
7117 6668 padding: 0 25px 8px;
7118 6669 }
7119 6670
@@ -7122,9 +6673,9 @@
7122 6673 padding-top: 10px;
7123 6674 }
7124 6675
7125 6676 .post-type-frm_display #post-body-content {
7126 - margin-top: var(--gap-lg);
6677 + margin-top: 30px;
7127 6678 }
7128 6679
7129 6680 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7130 6681 margin: 0;
@@ -7131,15 +6682,15 @@
7131 6682 }
7132 6683
7133 6684 .post-type-frm_display .postbox .hndle,
7134 6685 .post-type-frm_display .postbox {
7135 - border-color: var(--grey-300);
6686 + border-color: var(--grey-border);
7136 6687 }
7137 6688
7138 6689 .post-type-frm_display #postbox-container-1 .postbox,
7139 6690 .post-type-frm_display #postbox-container-2 .postbox {
7140 6691 border-radius: var(--small-radius);
7141 - border-color: var(--grey-300);
6692 + border-color: var(--grey-border);
7142 6693 box-shadow: none;
7143 6694 }
7144 6695
7145 6696 .post-type-frm_display #side-sortables .postbox {
@@ -7218,9 +6769,9 @@
7218 6769 background-color: transparent;
7219 6770 }
7220 6771
7221 6772 .post-type-frm_display #major-publishing-actions {
7222 - border-color: var(--grey-300);
6773 + border-color: var(--grey-border);
7223 6774 background: var(--sidebar-color);
7224 6775 }
7225 6776
7226 6777 .post-type-frm_display #frm_adv_info {
@@ -7274,9 +6825,9 @@
7274 6825 .settings-lite-cta ul,
7275 6826 .settings-lite-cta p,
7276 6827 .settings-lite-cta {
7277 6828 color: #666;
7278 - font-size: var(--text-md);
6829 + font-size: 16px;
7279 6830 box-shadow: none !important;
7280 6831 }
7281 6832
7282 6833 .frm-info-modal h3,
@@ -7283,8 +6834,14 @@
7283 6834 .settings-lite-cta h3 {
7284 6835 font-size: 17px !important;
7285 6836 }
7286 6837
6838 +.frm_placeholder_block h3 {
6839 + font-size: 22px;
6840 + font-weight: 400;
6841 + color: var(--medium-grey);
6842 +}
6843 +
7287 6844 .frm-green-icons .frmsvg {
7288 6845 color: var(--green);
7289 6846 }
7290 6847
@@ -7290,9 +6847,8 @@
7290 6847
7291 6848 .frm-info-modal .postbox .inside,
7292 6849 .settings-lite-cta .postbox .inside {
7293 6850 padding: 20px 40px;
7294 - margin: 0;
7295 6851 }
7296 6852
7297 6853 .cta-inside a {
7298 6854 color: var(--orange)
@@ -7298,15 +6854,21 @@
7298 6854 color: var(--orange)
7299 6855 }
7300 6856
7301 6857 .info-modal-inside a.frm-standard-link {
7302 - color: var(--primary-500);
6858 + color: var(--primary-color);
7303 6859 }
7304 6860
7305 6861 .info-modal-inside a.frm-standard-link:hover {
7306 - color: var(--primary-700);
6862 + color: var(--primary-hover);
7307 6863 }
7308 6864
6865 +.frm-caution {
6866 + text-transform: uppercase;
6867 + font-weight: bold;
6868 + color: var(--dark-grey);
6869 +}
6870 +
7309 6871 .frm_no_p_margin > p {
7310 6872 margin: 0;
7311 6873 }
7312 6874
@@ -7316,12 +6878,14 @@
7316 6878 font-size: 11px;
7317 6879 overflow: hidden;
7318 6880 }
7319 6881
6882 +.frm_code_list.frm-full-hover {
6883 + margin: 0 -20px;
6884 +}
6885 +
7320 6886 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7321 - margin: var(--gap-xs) 0 0;
7322 - min-width: 300px;
7323 - max-height: calc( ( 40px * 5 ) + 56px );
6887 + margin: 4px 0 0;
7324 6888 }
7325 6889
7326 6890 .frm_code_list.frm-full-hover li {
7327 6891 margin: 0;
@@ -7326,28 +6890,55 @@
7326 6890 .frm_code_list.frm-full-hover li {
7327 6891 margin: 0;
7328 6892 }
7329 6893
7330 -.frm-select-list-item,
7331 -.frm_wrap .ui-autocomplete li > div,
7332 -.multiselect-container button.multiselect-option,
7333 6894 .frm-dropdown-menu > .dropdown-item > a,
7334 -.frm-dropdown-menu > .dropdown-item > a:visited,
7335 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7336 6895 .frm-dropdown-menu .frm_dropdown_li,
7337 6896 .frm_code_list.frm-full-hover a {
7338 - display: flex;
7339 - color: var(--grey-700);
7340 - padding: 5px 10px;
7341 - font-size: var(--text-md);
7342 - gap: var(--gap-xs);
7343 - align-items: center;
6897 + display: block;
6898 + color: var(--dark-grey);
6899 + padding: 3px 25px;
6900 + font-size: 15px;
7344 6901 }
7345 6902
6903 +#frm_field_group_controls .frm-dropdown-menu,
6904 +.frm-field-action-icons .frm-dropdown-menu {
6905 + padding: 0;
6906 + margin: 0;
6907 +}
6908 +
6909 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li {
6910 + padding: 0;
6911 + color: rgba(40, 47, 54, 0.85);
6912 + cursor: pointer;
6913 + position: relative;
6914 + height: 32px;
6915 +}
6916 +
6917 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li .frmsvg {
6918 + color: rgba(40, 47, 54, 0.85) !important;
6919 +}
6920 +
6921 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li a {
6922 + padding: 6px 10px;
6923 + position: absolute;
6924 + top: 0;
6925 + left: 0;
6926 + bottom: 0;
6927 + width: 100%;
6928 + box-sizing: border-box;
6929 +}
6930 +
6931 +#frm_builder_page .frm-dropdown-menu .frm_dropdown_li.frm_more_options_li:hover {
6932 + background: #F6F7FB;
6933 +}
6934 +
7346 6935 .frm_code_list.frm-full-hover a span {
6936 + color: var(--grey);
6937 + float: right;
6938 + font-size: 14px;
7347 6939 max-width: 83px;
7348 6940 text-align: right;
7349 - margin-left: auto;
7350 6941 }
7351 6942
7352 6943 .frm_code_list.frm-full-hover a,
7353 6944 .frm_code_list.frm-full-hover a span {
@@ -7355,54 +6946,24 @@
7355 6946 overflow: hidden;
7356 6947 text-overflow: ellipsis;
7357 6948 }
7358 6949
7359 -.frm_code_list.frm-full-hover.frmcenter a {
7360 - display: block;
7361 -}
7362 -
7363 -#frm-layout-classes frm-full-hover a span {
7364 - max-width: 45%;
7365 -}
7366 -
7367 -.frm-select-list-item.active,
7368 -.frm-select-list-item:hover,
7369 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7370 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7371 -.multiselect-container button.multiselect-option.active,
7372 -.multiselect-container button.multiselect-option:hover,
7373 6950 .frm-dropdown-menu > .dropdown-item > a:hover,
7374 6951 .frm_code_list.frm-full-hover a:hover span,
7375 6952 .frm_code_list.frm-full-hover a:hover {
7376 - background: var(--primary-25);
7377 - color: var(--primary-500);
7378 - border-radius: var(--small-radius);
6953 + background: var(--sidebar-color);
6954 + color: var(--primary-color);
7379 6955 }
7380 6956
7381 -.frm-select-list-item .frmsvg,
7382 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7383 - opacity: .8;
7384 -}
7385 -
7386 -.frm-select-list-item:hover .frmsvg,
7387 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7388 - opacity: 1;
7389 -}
7390 -
7391 6957 .frm-dropdown-menu.frm_code_list > li > a {
7392 6958 padding: 3px 15px;
7393 6959 width: 300px;
7394 6960 }
7395 6961
7396 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7397 -.frm-dropdown-menu .frm-with-search {
7398 - padding: var(--gap-xs) 10px 0;
6962 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6963 + padding: 3px 10px;
7399 6964 }
7400 6965
7401 -.frm-dropdown-menu .subsubsub {
7402 - padding: 0 10px;
7403 -}
7404 -
7405 6966 .frm_grid_container {
7406 6967 overflow: visible;
7407 6968 }
7408 6969
@@ -7418,16 +6979,16 @@
7418 6979 .frm_code_list.frm_grid_container a {
7419 6980 padding: 5px 0;
7420 6981 text-align: center;
7421 6982 background-color: var(--light-blue);
7422 - border: 1px solid var(--primary-500);
7423 - color: var(--primary-500);
6983 + border: 1px solid var(--primary-color);
6984 + color: var(--primary-color);
7424 6985 display: block;
7425 6986 border-radius: var(--small-radius);
7426 6987 }
7427 6988
7428 6989 .frm_code_list.frm_grid_container a:hover {
7429 - background-color: var(--primary-700);
6990 + background-color: var(--primary-hover);
7430 6991 color: #fff;
7431 6992 }
7432 6993
7433 6994 .frm_field_list #frm-insert-fields .button a {
@@ -7435,15 +6996,10 @@
7435 6996 max-width: 95%;
7436 6997 overflow: hidden;
7437 6998 }
7438 6999
7439 -.field_type_list.frm_grid_container {
7440 - gap: var(--gap-xs) var(--gap-sm);
7441 - margin: var(--gap-xs);
7442 -}
7443 -
7444 7000 .field_type_list li {
7445 - margin: 0;
7001 + margin: 0 0 10px;
7446 7002 padding: 0;
7447 7003 }
7448 7004
7449 7005 #frm-insert-fields .frm-search {
@@ -7455,13 +7011,22 @@
7455 7011 #frm-insert-fields li,
7456 7012 #frm-insert-fields li a {
7457 7013 text-decoration: none;
7458 7014 font-weight: normal;
7459 - font-size: var(--text-md) !important;
7460 - color: var(--grey-900);
7015 + font-size: 15px !important;
7016 + color: var(--dark-grey);
7461 7017 }
7462 7018
7019 +#frm-insert-fields li a {
7020 + padding: 5px 20px;
7021 + display: block;
7022 + border-radius: 0 var(--border-radius) var(--border-radius) 0;
7023 +}
7024 +
7463 7025 #frm-insert-fields li.frm_show_upgrade {
7026 + margin: 0 0 10px;
7027 + padding: 5px 20px;
7028 + box-sizing: border-box;
7464 7029 cursor: pointer;
7465 7030 opacity: .5;
7466 7031 }
7467 7032
@@ -7468,11 +7033,14 @@
7468 7033 #frm-insert-fields li a span {
7469 7034 vertical-align: middle;
7470 7035 }
7471 7036
7472 -.frmbutton.ui-draggable-dragging a,
7037 +#frm-insert-fields li:nth-child(2n) a {
7038 + border-radius: var(--border-radius) 0 0 var(--border-radius);
7039 +}
7040 +
7473 7041 #frm-insert-fields li a:not(.disabled):hover {
7474 - background: var(--grey-100);
7042 + background: var(--sidebar-hover);
7475 7043 }
7476 7044
7477 7045 #frm-insert-fields li a.disabled:hover {
7478 7046 cursor: not-allowed;
@@ -7494,9 +7062,9 @@
7494 7062 .frmsvg {
7495 7063 fill: currentColor;
7496 7064 width: 18px;
7497 7065 height: 18px;
7498 - vertical-align: middle;
7066 + vertical-align: text-bottom;
7499 7067 }
7500 7068
7501 7069 input[disabled],
7502 7070 .frmsvg svg {
@@ -7522,19 +7090,38 @@
7522 7090 width: 13px;
7523 7091 height: 13px;
7524 7092 }
7525 7093
7094 +.frm_code_list a .frmsvg,
7526 7095 .frmbutton.ui-sortable-helper .frmsvg,
7527 7096 .field_type_list li.frmbutton .frmsvg,
7097 +.frm_code_list a i,
7528 7098 .frmbutton.ui-sortable-helper i,
7529 -.field_type_list li.frmbutton i,
7099 +.field_type_list li.frmbutton i {
7100 + margin: .15em .2em;
7101 + color: var(--grey);
7102 + display: inline-block;
7103 + vertical-align: middle;
7104 + width: 20px;
7105 + height: 20px;
7106 + padding-right: 15px;
7107 + text-align: left;
7108 + font-size: 18px;
7109 +}
7110 +
7111 +/* Icon for Name field is larger */
7112 +.field_type_list li.frm_tname.frmbutton .frmsvg {
7113 + width: 24px;
7114 + height: 24px;
7115 + padding-right: 11px;
7116 +}
7117 +
7530 7118 .frm_code_list a .frmsvg,
7531 7119 .frm_code_list a i {
7532 - color: var(--grey-500);
7533 - display: inline-block;
7534 - vertical-align: middle;
7535 - width: var(--text-md);
7536 - font-size: var(--text-md);
7120 + margin: 0 5px 0 0;
7121 + padding: 0;
7122 + width: 15px;
7123 + font-size: 15px;
7537 7124 }
7538 7125
7539 7126 .frm_code_list i:before {
7540 7127 font-size: inherit;
@@ -7541,31 +7128,40 @@
7541 7128 }
7542 7129
7543 7130 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7544 7131 #frm-insert-fields li a:not(.disabled):hover i {
7545 - color: var(--grey-600);
7132 + color: var(--dark-grey);
7546 7133 }
7547 7134
7135 +.frmbutton.ui-draggable-dragging {
7136 + width: auto !important;
7137 +}
7138 +
7548 7139 /* Icon while dragging */
7549 -.frmbutton.ui-draggable-dragging {
7550 - pointer-events: none;
7140 +.frmbutton.ui-draggable-dragging,
7141 +.frmbutton.ui-draggable-dragging a {
7142 + cursor: move;
7551 7143 }
7552 7144
7553 -#frm-insert-fields li.frm_show_upgrade,
7554 -#frm-insert-fields li a,
7145 +.frmbutton.ui-sortable-helper a,
7146 +.frmbutton.ui-draggable-dragging a:hover,
7555 7147 .frmbutton.ui-draggable-dragging a {
7556 7148 text-decoration: none;
7557 - display: inline-flex !important;
7558 - gap: var(--gap-xs);
7559 - align-items: center;
7560 - border-radius: var(--border-radius) !important;
7561 - padding: var(--gap-xs) var(--gap-sm) !important;
7562 - color: var(--grey-900) !important;
7149 + height: 25px !important;
7150 + width: 180px;
7151 + text-align: center;
7152 + display: block !important;
7153 + background-color: var(--primary-hover) !important;
7154 + border-radius: 35px !important;
7155 + padding: 5px 20px !important;
7156 + color: #fff !important;
7563 7157 }
7564 7158
7565 -.frmbutton.ui-draggable-dragging a {
7566 - border: 1px solid var(--grey-300);
7567 - box-shadow: var(--box-shadow-md);
7159 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) a {
7160 + /* When the new field is held outside of a dropzone */
7161 + cursor: not-allowed;
7162 + background: var(--sidebar-color) !important;
7163 + color: var(--dark-grey) !important;
7568 7164 }
7569 7165
7570 7166 .frmbutton.ui-draggable-dragging span {
7571 7167 font-size: 15px;
@@ -7571,18 +7167,23 @@
7571 7167 font-size: 15px;
7572 7168 }
7573 7169
7574 7170 #frm-show-fields .frmbutton.ui-sortable-helper i,
7171 +.frmbutton.ui-sortable-helper span,
7575 7172 .frmbutton.ui-draggable-dragging i,
7576 7173 .frmbutton.ui-draggable-dragging .frmsvg {
7577 7174 color: #fff !important;
7578 7175 }
7579 7176
7580 -.frmbutton.ui-draggable-dragging i,
7581 -.frmbutton.ui-draggable-dragging .frmsvg {
7582 - color: var(--grey-700) !important;
7177 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) i,
7178 +.frmbutton.ui-draggable-dragging:not(.ui-sortable-helper) .frmsvg {
7179 + color: var(--dark-grey) !important;
7583 7180 }
7584 7181
7182 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7183 + display: none;
7184 +}
7185 +
7585 7186 .frm_sorting li.ui-state-default.ui-sortable-helper,
7586 7187 .frmbutton.ui-sortable-helper {
7587 7188 transition: opacity .2s;
7588 7189 opacity: 1;
@@ -7587,13 +7188,10 @@
7587 7188 transition: opacity .2s;
7588 7189 opacity: 1;
7589 7190 }
7590 7191
7591 -.frm-field-group-count {
7592 - background-color: var(--sidebar-hover);
7593 - padding: 5px;
7594 - color: #fff !important;
7595 - border-radius: 10px;
7192 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7193 + opacity: 0;
7596 7194 }
7597 7195
7598 7196 /* End dragging */
7599 7197
@@ -7619,64 +7217,13 @@
7619 7217 .frm_noallow a {
7620 7218 color: inherit;
7621 7219 }
7622 7220
7623 -#frm_upgrade_modal_image {
7624 - max-width: 200px;
7625 -}
7626 -
7627 -.frm-tab-message {
7628 - max-width: 600px;
7629 - margin: 20px auto;
7630 - color: rgba(63, 75, 91, 0.8);
7631 -}
7632 -
7633 -.frm-settings-screenshot-toolbar {
7634 - min-height: 39px;
7635 - display: flex;
7636 -}
7637 -
7638 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7639 - height: 8px;
7640 - width: 8px;
7641 - border-radius: 50%;
7642 - align-self: center;
7643 - margin-left: 10px;
7644 -}
7645 -
7646 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7647 - margin-left: 20px;
7648 -}
7649 -
7650 -.frm-settings-screenshot-toolbar img {
7651 - object-fit: contain;
7652 - align-self: flex-end;
7653 - margin-left: 25px;
7654 -}
7655 -
7656 -.frm-settings-screenshot-toolbar + div {
7657 - background: #fff;
7658 - padding-top: 25px;
7659 - border-radius: 0 0 16px 16px;
7660 -}
7661 -
7662 -.frm-settings-screenshot-toolbar + div img {
7663 - max-width: calc( 100% - 40px );
7664 -}
7665 -
7666 -.frm-settings-screenshot-wrapper {
7667 - max-width: 700px;
7668 - margin: 50px auto 0;
7669 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7670 - border-radius: 16px;
7671 - background: #EBECF1;
7672 -}
7673 -
7674 7221 .frm-dialog {
7675 7222 z-index: 100;
7676 7223 padding: 0 !important;
7677 - border-radius: 16px;
7678 - border: none;
7224 + border-radius: 10px;
7225 + border: 1px solid var(--grey);
7679 7226 background-color: #fff;
7680 7227 max-width: 100% !important;
7681 7228 }
7682 7229
@@ -7683,14 +7230,21 @@
7683 7230 .frm-dialog .postbox {
7684 7231 background: transparent;
7685 7232 box-shadow: none;
7686 7233 border: none;
7687 - line-height: var(--leading);
7234 + line-height: 1.4em;
7688 7235 }
7689 7236
7237 +.frm-dialog .frm-sub-label,
7238 +.frm-dialog label {
7239 + color: var(--dark-grey);
7240 + font-size: 17px;
7241 + font-weight: 300;
7242 +}
7243 +
7690 7244 .frm-dialog input[type=text],
7691 7245 .frm-dialog textarea {
7692 - font-size: var(--text-md);
7246 + font-size: 16px;
7693 7247 }
7694 7248
7695 7249 .frm-dialog textarea {
7696 7250 height: 75px;
@@ -7703,16 +7257,14 @@
7703 7257 .frm-dialog .frm-sub-label,
7704 7258 .frm-sub-label {
7705 7259 color: var(--grey);
7706 7260 text-transform: none;
7707 - padding-left: 8px;
7708 7261 }
7709 7262
7710 7263 h2 .frm-sub-label {
7711 - font-size: var(--text-md);
7264 + font-size: 16px;
7712 7265 }
7713 7266
7714 -.frm-views-editor-body .ui-widget-overlay,
7715 7267 .frm-white-body .ui-widget-overlay,
7716 7268 .toplevel_page_formidable .ui-widget-overlay {
7717 7269 position: fixed;
7718 7270 width: 100%;
@@ -7720,10 +7272,9 @@
7720 7272 top: 0;
7721 7273 left: 0;
7722 7274 right: 0;
7723 7275 bottom: 0;
7724 - background: var(--grey-500);
7725 - opacity: .5;
7276 + background: var(--grey-border);
7726 7277 z-index: 2;
7727 7278 }
7728 7279
7729 7280 #frm_upgrade_modal {
@@ -7738,15 +7289,15 @@
7738 7289 color: #c4c4c4;
7739 7290 padding-bottom: 20px;
7740 7291 }
7741 7292
7742 -.frm-upgrade-message img {
7293 +#frm-upgrade-message img {
7743 7294 max-width: 100%;
7744 7295 }
7745 7296
7746 7297 a.frm-link-secondary {
7747 7298 color: #c4c4c4;
7748 - font-size: var(--text-sm);
7299 + font-size: 14px;
7749 7300 text-decoration: underline;
7750 7301 }
7751 7302
7752 7303 .field_type_list li.button.frm_noallow,
@@ -7789,9 +7340,8 @@
7789 7340 opacity: 0;
7790 7341
7791 7342 /* Custom rules */
7792 7343 z-index: 9999999;
7793 - pointer-events: none;
7794 7344 }
7795 7345
7796 7346 .tooltip.show {
7797 7347 opacity: 0.9;
@@ -7951,25 +7501,93 @@
7951 7501 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
7952 7502 padding: 10px 40px;
7953 7503 border-top-color: #ccc;
7954 7504 background: var(--sidebar-color);
7955 - color: var(--grey-700);
7505 + color: var(--dark-grey);
7956 7506 border-radius: 0;
7957 7507 opacity: 1;
7958 - font-size: var(--text-sm);
7508 + font-size: 14px;
7959 7509 }
7960 7510
7511 +#frm_styling_form #post-body {
7512 + padding: 20px;
7513 +}
7514 +
7515 +.ui-datepicker-inline.ui-datepicker {
7516 + max-width: 19em;
7517 +}
7518 +
7519 +.default-style-box.howto {
7520 + margin-left: 20px;
7521 + font-style: normal;
7522 +}
7523 +
7961 7524 #frm_custom_css_box {
7962 7525 width: 100%;
7963 7526 }
7964 7527
7528 +#frm_styling_form .wp-picker-container .wp-color-result.button {
7529 + width: 100%;
7530 + overflow: hidden;
7531 + margin: 0 !important;
7532 + height: 32px !important;
7533 + padding: 0 0 0 30px !important;
7534 + border-radius: var(--small-radius);
7535 + border-color: var(--grey-border);
7536 +}
7537 +
7538 +#frm_styling_form .wp-color-result-text {
7539 + line-height: 30px !important;
7540 + font-size: 15px;
7541 + background: #fff !important;
7542 +}
7543 +
7544 +.wp-picker-open + .wp-picker-input-wrap {
7545 + position: absolute;
7546 + margin-left: -87px;
7547 + margin-top: 1px;
7548 + width: 86px;
7549 +}
7550 +
7551 +.wp-picker-container input[type="text"].wp-color-picker {
7552 + border: none;
7553 + padding: 3px;
7554 + font-family: inherit;
7555 + color: var(--dark-grey);
7556 + font-size: 15px;
7557 + width: 100%;
7558 + line-height: 1;
7559 + text-align: center;
7560 +}
7561 +
7562 +.wp-picker-input-wrap .wp-picker-clear {
7563 + display: none !important;
7564 +}
7565 +
7566 +.wp-picker-holder {
7567 + position: absolute;
7568 + z-index: 999;
7569 +}
7570 +
7571 +.frm_end .wp-picker-holder {
7572 + margin-left: -145px;
7573 +}
7574 +
7575 +.frm_end.frm6 .wp-picker-holder {
7576 + margin-left: -86px;
7577 +}
7578 +
7579 +#frm_styling_form div.tabs-panel {
7580 + padding-left: 5px;
7581 + padding-right: 5px;
7582 +}
7583 +
7965 7584 /*form inputs/selects */
7966 7585 .frm_form_field.frm_scroll_box .frm_opt_container,
7967 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
7968 -.frm-white-body .wrap input[type="search"],
7969 -.frm-white-body .wrap input[type="number"],
7970 -.frm-white-body .wrap select,
7971 -.frm-white-body .wrap textarea,
7586 +#postbox-container-2 input[type="text"],
7587 +#postbox-container-2 input[type="number"],
7588 +#postbox-container-2 select,
7589 +#postbox-container-2 textarea,
7972 7590 button.frm_choose_image_box,
7973 7591 #titlediv input[type="text"],
7974 7592 .frm-fields button.btn,
7975 7593 .frm_wrap textarea,
@@ -7974,11 +7592,9 @@
7974 7592 .frm-fields button.btn,
7975 7593 .frm_wrap textarea,
7976 7594 .frm_wrap input[type="tel"],
7977 7595 .frm_wrap input[type="text"],
7978 -.frm_wrap input[type=search],
7979 7596 .frm_wrap input[type="number"],
7980 -.frm_wrap input[type="date"],
7981 7597 .frm_wrap select,
7982 7598 .wp-admin .frm_wrap select,
7983 7599 .field-group textarea,
7984 7600 .field-group input[type="text"],
@@ -7985,33 +7601,17 @@
7985 7601 .field-group select {
7986 7602 outline: 0;
7987 7603 box-shadow: none;
7988 7604 border-radius: var(--small-radius);
7989 - padding: 5px 14px;
7990 - border-color: var(--grey-300);
7991 - color: var(--grey-800);
7992 - font-size: var(--text-md);
7605 + padding: 6px 9px;
7606 + border-color: var(--grey-border);
7607 + color: var(--dark-grey);
7608 + font-size: 15px;
7993 7609 margin: 0;
7994 7610 background-color: #fff;
7995 - line-height: var(--leading);
7611 + line-height: 1;
7996 7612 }
7997 7613
7998 -.frm_wrap ::-webkit-datetime-edit {
7999 - line-height: var(--leading);
8000 -}
8001 -
8002 -.frm-white-body textarea:focus,
8003 -.frm-white-body input:focus,
8004 -.frm-white-body select:focus,
8005 -.frm_wrap input:focus,
8006 -.frm_wrap select:focus,
8007 -.wp-core-ui .frm_wrap select:focus,
8008 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8009 -.frm_wrap textarea:focus {
8010 - border-color: var(--primary-500) !important;
8011 - box-shadow: none !important;
8012 -}
8013 -
8014 7614 #postbox-container-2 textarea,
8015 7615 .frm_wrap textarea,
8016 7616 .field-group textarea {
8017 7617 line-height: 2;
@@ -8028,12 +7628,19 @@
8028 7628 .wp-admin .frm_wrap select {
8029 7629 max-width: 100%;
8030 7630 }
8031 7631
8032 -.frm_form_field.frm_scroll_box .frm_opt_container {
7632 +.frm_form_field.frm_scroll_box .frm_opt_container,
7633 +.frm_wrap .frm_form_builder textarea,
7634 +.frm_wrap .frm_form_builder input[type="tel"],
7635 +.frm_wrap .frm_form_builder input[type="text"] {
8033 7636 padding: 10px 12px;
8034 7637 }
8035 7638
7639 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7640 + padding: 6px 9px;
7641 +}
7642 +
8036 7643 .frm_wrap input[disabled],
8037 7644 .frm_wrap select[disabled],
8038 7645 .frm_wrap textarea[disabled],
8039 7646 .frm_wrap input[readonly],
@@ -8039,23 +7646,37 @@
8039 7646 .frm_wrap input[readonly],
8040 7647 .frm_wrap select[readonly],
8041 7648 .frm_wrap textarea[readonly],
8042 7649 .frm_wrap input::placeholder {
8043 - color: var(--grey-500);
7650 + color: var(--grey);
8044 7651 }
8045 7652
7653 +#postcustomstuff table input {
7654 + width: 100% !important;
7655 + margin: 0 !important;
7656 +}
7657 +
7658 +#postcustomstuff table td {
7659 + padding: 7px 0 7px 7px !important;
7660 + line-height: 30px;
7661 +}
7662 +
8046 7663 #postcustomstuff table td > div {
8047 7664 /* To override some inline css in add-on */
8048 7665 padding-top: 0 !important;
8049 7666 }
8050 7667
8051 -.wp-admin .frm_wrap .form-table select {
7668 +.wp-admin .frm_wrap .form-table select,
7669 +#postbox-container-2 select,
7670 +.wp-admin .frm_wrap select {
7671 + line-height: 32px;
7672 + height: 32px;
8052 7673 vertical-align: top;
8053 7674 }
8054 7675
8055 7676 .frm_wrap .frm_form_builder select {
8056 - line-height: var(--leading);
8057 - height: var(--text-md);
7677 + line-height: 40px;
7678 + height: 40px;
8058 7679 width: 100%;
8059 7680 }
8060 7681
8061 7682 #postbox-container-2 select,
@@ -8061,25 +7682,11 @@
8061 7682 #postbox-container-2 select,
8062 7683 .wp-admin .frm_wrap select,
8063 7684 .frm_wrap .frm_form_builder select {
8064 7685 height: auto;
8065 - background-position: right 11px top 55%;
7686 + padding: 0 24px 0 12px;
8066 7687 }
8067 7688
8068 -.frm-white-body .tablenav select,
8069 -.frm-white-body .tablenav input[type="text"],
8070 -.wp-admin .frm_wrap .tablenav select,
8071 -.frm_wrap .tablenav input[type="date"],
8072 -.frm_wrap .tablenav input[type="text"] {
8073 - padding-top: 0;
8074 - padding-bottom: 0;
8075 - line-height: 1;
8076 -}
8077 -
8078 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8079 - line-height: 1;
8080 -}
8081 -
8082 7689 .frm-fields button.btn,
8083 7690 .frm-fields textarea,
8084 7691 .frm-fields input[type="text"],
8085 7692 .frm-fields select,
@@ -8091,9 +7698,10 @@
8091 7698 outline: 0;
8092 7699 }
8093 7700
8094 7701 .frm-fields button.btn {
8095 - height: var(--h-md);
7702 + line-height: normal;
7703 + height: auto;
8096 7704 text-align: inherit;
8097 7705 }
8098 7706
8099 7707 .global-font .field-group input[type="text"] {
@@ -8134,9 +7742,9 @@
8134 7742 }
8135 7743
8136 7744 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8137 7745 background: #fff !important;
8138 - border-color: var(--primary-500);
7746 + border-color: var(--primary-color);
8139 7747 }
8140 7748
8141 7749 .frm_images_dropdown .frm_text_label_for_image {
8142 7750 padding: 0;
@@ -8164,9 +7772,9 @@
8164 7772 }
8165 7773
8166 7774 .windows::-webkit-scrollbar-thumb,
8167 7775 .windows ::-webkit-scrollbar-thumb {
8168 - background: var(--grey-300);
7776 + background: var(--grey-border);
8169 7777 -webkit-border-radius: var(--border-radius);
8170 7778 -webkit-box-shadow: none;
8171 7779 }
8172 7780
@@ -8188,9 +7796,8 @@
8188 7796 .rtl #frm_top_bar #frm_bs_dropdown {
8189 7797 padding-left: 15px;
8190 7798 }
8191 7799
8192 -.rtl .frm-full-close,
8193 7800 .rtl .frm_wrap .columns-2 .frm-right-panel,
8194 7801 .rtl .frm-right-panel {
8195 7802 border-right-width: 1px;
8196 7803 border-left-width: 0;
@@ -8195,14 +7802,9 @@
8195 7802 border-right-width: 1px;
8196 7803 border-left-width: 0;
8197 7804 }
8198 7805
8199 -.rtl .frm-full-close {
8200 - padding-left: 0;
8201 - padding-right: var(--gap-md);
8202 -}
8203 -
8204 -.rtl .frm-text-right {
7806 +.rtl .frm_right_text {
8205 7807 text-align: left;
8206 7808 }
8207 7809
8208 7810 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8247,39 +7849,22 @@
8247 7849 right: unset;
8248 7850 left: 2px;
8249 7851 }
8250 7852
7853 +.rtl #frm_upgrade_modal .dismiss i,
7854 +.rtl .frm-inline-modal i,
7855 +.rtl #frm-bulk-modal i,
8251 7856 .rtl .frm_has_shortcodes > i {
8252 7857 right: auto;
8253 7858 left: 5px;
8254 7859 }
8255 7860
7861 +.rtl .frm_code_list.frm-full-hover a span,
8256 7862 .rtl .frm_reply_to_container,
8257 7863 .rtl .frm_bcc_cc_container {
8258 7864 float: left;
8259 7865 }
8260 7866
8261 -.rtl .frm-default-switcher {
8262 - float: left;
8263 - position: relative;
8264 -}
8265 -
8266 -.rtl .frm-with-right-icon .frmsvg {
8267 - right: auto;
8268 - left: 0;
8269 -}
8270 -
8271 -.rtl .frm-inline-modal > a.dismiss {
8272 - left: 13px;
8273 - right: auto;
8274 -}
8275 -
8276 -.rtl.wp-admin .frm_wrap select {
8277 - padding-left: var(--gap-lg) !important;
8278 - padding-right: 5px !important;
8279 - background-position: left 11px top 55%;
8280 -}
8281 -
8282 7867 /* ---------------------------------------------------------------
8283 7868 Clearfix
8284 7869 --------------------------------------------------------------- */
8285 7870 span.clear {
@@ -8321,12 +7906,15 @@
8321 7906 @media only screen and (max-width: 1200px) {
8322 7907 .frm-addons {
8323 7908 grid-template-columns: 1fr 1fr;
8324 7909 }
7910 +
7911 + ul.frm_form_nav > li {
7912 + margin-right: 2.5%;
7913 + }
8325 7914 }
8326 7915
8327 7916 @media only screen and (max-width: 1050px) {
8328 - .frm-white-body,
8329 7917 .frm_wrap {
8330 7918 --biggest-sidebar: 390px;
8331 7919 }
8332 7920
@@ -8336,18 +7924,15 @@
8336 7924
8337 7925 .frm_actions_list {
8338 7926 margin-left: 0;
8339 7927 }
7928 +
7929 + ul.frm_form_nav > li {
7930 + margin-right: 1.5%;
7931 + }
8340 7932 }
8341 7933
8342 7934 @media only screen and (max-width: 960px) {
8343 - .frm-white-body,
8344 - .frm_wrap {
8345 - --gap-sm: 8px;
8346 - --gap-md: 16px;
8347 - --gap-2xl: 24px;
8348 - }
8349 -
8350 7935 .auto-fold #adminmenuwrap {
8351 7936 width: 36px;
8352 7937 }
8353 7938
@@ -8358,27 +7943,36 @@
8358 7943 p.howto {
8359 7944 display: inline-block;
8360 7945 }
8361 7946
7947 + ul.frm_form_nav {
7948 + clear: left;
7949 + padding-top: 0;
7950 + }
7951 +
7952 + ul.frm_form_nav > li {
7953 + margin-right: 3.5%;
7954 + }
7955 +
7956 + .frm-full-screen #frm_top_bar {
7957 + padding: 0 10px !important;
7958 + }
7959 +
7960 + .frm-full-close {
7961 + padding: 15px 0 10px 10px;
7962 + }
7963 +
7964 + .frm-full-close .frmsvg {
7965 + padding: 0;
7966 + }
8362 7967 }
8363 7968
8364 7969 @media only screen and (max-width: 850px) {
8365 - #frm_bs_dropdown {
8366 - /* There isn't enough room for the title on a screen this size so just hide it. */
8367 - display: none;
8368 - }
8369 -
8370 - .frm-white-body,
8371 7970 .frm_wrap {
8372 7971 --biggest-sidebar: 350px;
8373 7972 --big-sidebar: 350px;
8374 7973 }
8375 7974
8376 - #frm_bs_dropdown .frm_bstooltip {
8377 - /* There isn't enough room for the title on a screen this size so just hide it. */
8378 - display: none !important;
8379 - }
8380 -
8381 7975 .frm_col_one {
8382 7976 clear: none;
8383 7977 }
8384 7978
@@ -8387,9 +7981,10 @@
8387 7981 display: block;
8388 7982 margin: 5px 0;
8389 7983 }
8390 7984
8391 - #frm_top_bar h1 {
7985 + .post-type-frm_display #frm_top_bar h1,
7986 + .frm_page_container #frm_top_bar h1 {
8392 7987 width: auto;
8393 7988 max-width: 200px;
8394 7989 }
8395 7990
@@ -8459,9 +8054,8 @@
8459 8054 }
8460 8055 }
8461 8056
8462 8057 @media only screen and (max-width: 782px) {
8463 - .frm-white-body,
8464 8058 .frm_wrap {
8465 8059 --small-sidebar: 20%;
8466 8060 --medium-sidebar: 35%
8467 8061 }
@@ -8475,9 +8069,9 @@
8475 8069 .frm_wrap #publishing-action {
8476 8070 line-height: normal;
8477 8071 }
8478 8072
8479 - .frm-white-body #screen-meta-links {
8073 + .frm-full-screen #screen-meta-links {
8480 8074 display: none;
8481 8075 }
8482 8076
8483 8077 .frm_wrap .misc-pub-section {
@@ -8536,13 +8130,8 @@
8536 8130 .with_frm_style .frm_checkbox input[type=checkbox] {
8537 8131 width: 25px !important;
8538 8132 }
8539 8133
8540 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8541 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8542 - width: 18px !important;
8543 - }
8544 -
8545 8134 .wp-list-table.toplevel_page_formidable .column-entries,
8546 8135 .wp-list-table.toplevel_page_formidable .column-form_key,
8547 8136 .wp-list-table.toplevel_page_formidable .column-shortcode,
8548 8137 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8556,13 +8145,27 @@
8556 8145 padding: 3px 8px 3px 35%;
8557 8146 text-align: left;
8558 8147 }
8559 8148
8149 + .wp-list-table.toplevel_page_formidable td.column-title:before,
8150 + .wp-list-table.toplevel_page_formidable td.column-id:before {
8151 + display: none !important;
8152 + }
8153 +
8154 + .wp-list-table.toplevel_page_formidable td.column-title,
8155 + .wp-list-table.toplevel_page_formidable td.column-id {
8156 + display: table-cell !important;
8157 + }
8158 +
8560 8159 #form_entries_page .wp-list-table th.frm_hidden,
8561 8160 #form_entries_page .wp-list-table td.frm_hidden {
8562 8161 display: none !important;
8563 8162 }
8564 8163
8164 + ul.frm_form_nav > li {
8165 + margin-right: 15px;
8166 + }
8167 +
8565 8168 .frm-white-body.auto-fold #wpcontent {
8566 8169 padding-left: 0;
8567 8170 }
8568 8171
@@ -8573,13 +8176,11 @@
8573 8176 .frm-addons {
8574 8177 grid-template-columns: 1fr;
8575 8178 }
8576 8179
8577 - .frm-admin-page-styles .frm_page_container,
8578 - .frm_wrap .frm_page_container {
8579 - left: 0 !important;
8580 - top: 46px !important;
8581 - height: calc( 100vh - 46px ) !important;
8180 + .frm_single_entry_page.frm_wrap .frm_page_container {
8181 + height: auto;
8182 + display: block;
8582 8183 }
8583 8184
8584 8185 .frm_single_entry_page.frm_wrap .columns-2 {
8585 8186 display: block;
@@ -8597,14 +8198,13 @@
8597 8198 border-radius: 6px;
8598 8199 }
8599 8200
8600 8201 #wp-content-media-buttons a.frm_insert_form {
8601 - padding: 0 var(--gap-sm);
8202 + padding: 0 15px;
8602 8203 }
8603 8204 }
8604 8205
8605 8206 @media only screen and (max-width: 700px) {
8606 - .frm-white-body,
8607 8207 .frm_wrap {
8608 8208 --biggest-sidebar: 50%;
8609 8209 --big-sidebar: 50%;
8610 8210 }
@@ -8610,9 +8210,8 @@
8610 8210 }
8611 8211 }
8612 8212
8613 8213 @media only screen and (max-width: 600px) {
8614 - .frm-white-body,
8615 8214 .frm_wrap {
8616 8215 --small-sidebar: 45px;
8617 8216 }
8618 8217
@@ -8618,9 +8217,9 @@
8618 8217
8619 8218 .frm-form-setting-tabs a {
8620 8219 visibility: collapse;
8621 8220 font-size: 0;
8622 - padding: 0 var(--gap-sm);
8221 + padding: 0 15px;
8623 8222 }
8624 8223
8625 8224 .frm-form-setting-tabs a .frmsvg,
8626 8225 .frm-form-setting-tabs a i {
@@ -8692,12 +8291,8 @@
8692 8291 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8693 8292 right: auto;
8694 8293 left: 0;
8695 8294 }
8696 -
8697 - .frm_on_submit_type svg {
8698 - display: none;
8699 - }
8700 8295 }
8701 8296
8702 8297 @media only screen and (max-width: 475px) {
8703 8298 #frm_bs_dropdown {
@@ -8713,18 +8308,8 @@
8713 8308 margin-right: 0;
8714 8309 }
8715 8310 }
8716 8311
8717 -/* Firefox */
8718 -@-moz-document url-prefix() {
8719 - .frm-white-body .tablenav select,
8720 - .frm-white-body .tablenav input[type="text"],
8721 - .wp-admin .frm_wrap .tablenav select,
8722 - .frm_wrap .tablenav input[type="text"] {
8723 - padding-top: 5px;
8724 - }
8725 -}
8726 -
8727 8312 /* PRINT */
8728 8313 @media print {
8729 8314 a, .misc-pub-section a {
8730 8315 color: #000 !important;
@@ -8775,9 +8360,9 @@
8775 8360 display: block;
8776 8361 padding: 20px;
8777 8362 }
8778 8363
8779 - .frm_wrap .columns-2,
8364 + .frm_page_container .columns-2,
8780 8365 .frm_wrap .frm_page_container {
8781 8366 height: auto;
8782 8367 display: block;
8783 8368 }
@@ -8814,10 +8399,9 @@
8814 8399 width: 100%;
8815 8400 }
8816 8401 }
8817 8402
8818 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8819 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8403 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8820 8404 display: inline-block;
8821 8405 }
8822 8406
8823 8407 /* Change the order of subfields of the Name field in the backend */
@@ -8824,12 +8408,16 @@
8824 8408 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8825 8409 order: 2;
8826 8410 }
8827 8411
8412 +.frm-video-wrapper {
8413 + padding: 0 20px;
8414 +}
8415 +
8828 8416 .frm-video-wrapper iframe {
8829 8417 width: 100%;
8830 8418 max-width: 843px;
8831 - border-radius: var(--border-radius);
8419 + border-radius: 10px;
8832 8420 }
8833 8421
8834 8422 #frm_field_group_popup {
8835 8423 position: absolute;
@@ -8892,9 +8480,9 @@
8892 8480 }
8893 8481
8894 8482 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8895 8483 #frm_field_group_popup .frm-row-layout-option:hover {
8896 - outline: 1px solid var(--primary-500);
8484 + outline: 1px solid var(--primary-color);
8897 8485 }
8898 8486
8899 8487 .frm-custom-field-group-layout,
8900 8488 .frm-break-field-group {
@@ -8899,9 +8487,9 @@
8899 8487 .frm-custom-field-group-layout,
8900 8488 .frm-break-field-group {
8901 8489 padding: 5px 15px;
8902 8490 cursor: pointer;
8903 - font-size: var(--text-sm);
8491 + font-size: 14px;
8904 8492 line-height: 19px;
8905 8493 color: rgba(40, 47, 54, 0.85);
8906 8494 }
8907 8495
@@ -8973,17 +8561,12 @@
8973 8561 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
8974 8562 pointer-events: none;
8975 8563 }
8976 8564
8977 -.frm-sortable-helper {
8978 - /* Make sure the item being dragged appears above other form builder fields */
8979 - z-index: 99;
8980 -}
8981 -
8982 8565 #frm_banner {
8983 8566 width: 100%;
8984 8567 color: #fff;
8985 - background: var(--primary-500);
8568 + background: var(--primary-color);
8986 8569 height: 40px;
8987 8570 line-height: 40px;
8988 8571 text-align: center;
8989 8572 position: relative;
@@ -9019,83 +8602,35 @@
9019 8602 display: none !important;
9020 8603 }
9021 8604
9022 8605 #frm_new_form_modal .frm-ready-made-solution {
9023 - padding: var(--gap-xs) !important;
9024 - margin: var(--gap-xs) 0 var(--gap-sm);
8606 + padding: 20px 5px;
9025 8607 display: flex;
9026 - gap: var(--gap-sm);
9027 - position: relative;
9028 - overflow: visible !important;
9029 8608 }
9030 8609
9031 -#frm_new_form_modal .frm-ready-made-solution:after {
9032 - width: 100%;
9033 - height: 1px;
9034 - background: var(--grey-300);
9035 - content: '';
9036 - position: absolute;
9037 - bottom: -10px;
9038 - left: 0;
8610 +.frm-ready-made-solution .frm-hover-icons {
8611 + padding: 5px;
8612 + position: static;
9039 8613 }
9040 8614
9041 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9042 - content: none;
8615 +#frm_new_form_modal .frm-ready-made-solution > div:first-child {
8616 + width: 300px;
9043 8617 }
9044 8618
9045 -#frm_new_form_modal .frm-solution-details {
9046 - flex: 1;
9047 - display: flex;
9048 - gap: var(--gap-2xs);
9049 - flex-direction: column;
8619 +.frm-ready-made-solution span {
8620 + background-color: #fde6de;
8621 + color: #f25a24;
8622 + padding: 10px;
8623 + text-transform: uppercase;
8624 + font-size: 11px;
8625 + margin-bottom: 10px;
8626 + display: inline-block;
8627 + border-radius: 4px;
9050 8628 }
9051 8629
9052 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9053 - width: 30%;
9054 - text-align: center;
9055 -}
9056 -
9057 8630 .frm-ready-made-solution h3 ~ a {
9058 - color: var(--primary-500);
8631 + color: var(--primary-color);
9059 8632 }
9060 8633
9061 8634 .frm-ready-made-solution img {
9062 8635 max-width: 100%;
9063 - display: block;
9064 - box-shadow: var(--box-shadow-lg);
9065 8636 }
9066 -
9067 -/* On Submit action */
9068 -.frm_single_on_submit_settings .frm_form_field {
9069 - margin: 8px 0;
9070 -}
9071 -
9072 -.frm_on_submit_type_setting {
9073 - padding: 8px 0;
9074 -}
9075 -
9076 -.frm_on_submit_type label {
9077 - display: flex;
9078 - border: 1px solid var(--grey-border);
9079 - border-radius: var(--small-radius);
9080 - gap: 16px;
9081 - padding: 16px;
9082 - align-items: center;
9083 - justify-content: center;
9084 -}
9085 -
9086 -.frm_on_submit_type input {
9087 - opacity: 0 !important;
9088 - position: absolute;
9089 - z-index: -1;
9090 -}
9091 -
9092 -.frm_on_submit_type input[type="radio"]:checked + label {
9093 - border-color: var(--primary-color);
9094 - box-shadow: 0 0 0 1px var(--primary-color);
9095 -}
9096 -
9097 -#form_settings_page .frm_on_submit_type label:hover,
9098 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9099 - color: var(--primary-color);
9100 -}
9101 -/* End On Submit action */