PluginProbe
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More / 5.3.1
Formidable Forms – WordPress Form Builder for Contact Forms, Calculators, Quizzes & More v5.3.1
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 +1464 -1965 6.3.15.3.1 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,
@@ -1734,18 +1446,11 @@
1734 1446 color: inherit;
1735 1447 }
1736 1448
1737 1449 #frm_form_editor_container .divider_section_only .frm_primary_label {
1738 - display: flex;
1739 - align-items: center;
1740 - gap: var(--gap-xs);
1741 1450 font-size: 20px;
1742 1451 }
1743 1452
1744 -#frm_form_editor_container .divider_section_only .frm_primary_label .frm-sub-label {
1745 - padding: 0;
1746 -}
1747 -
1748 1453 form .form-field.frm_field_loading {
1749 1454 margin-bottom: 0;
1750 1455 min-height: 0;
1751 1456 padding: 0;
@@ -1833,8 +1538,14 @@
1833 1538 max-width: 700px;
1834 1539 margin: 20px auto !important;
1835 1540 }
1836 1541
1542 +.upgrade_to_pro h1,
1543 +.upgrade_to_pro h3,
1544 +.upgrade_to_pro {
1545 + color: #444;
1546 +}
1547 +
1837 1548 .upgrade_to_pro .error {
1838 1549 display: none;
1839 1550 }
1840 1551
@@ -1844,19 +1555,19 @@
1844 1555 }
1845 1556
1846 1557 .frm_error_style,
1847 1558 .frm_warning_style,
1848 -.frm_note_style,
1849 1559 .frm_message,
1850 1560 #post-body-content .frm_updated_message,
1851 1561 div.frm_updated_message {
1852 - border-radius: var(--small-radius);
1853 - background-color: #D5F2DC;
1854 - color: #1E561F;
1855 - padding: var(--gap-sm) var(--gap-md);
1856 - font-size: var(--text-sm);
1857 - margin: var(--gap-sm) 0;
1858 - text-align: left;
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;
1859 1570 }
1860 1571
1861 1572 #frm_top_bar + .wrap > .frm_updated_message, #frm_top_bar + .wrap > .frm_warning_style {
1862 1573 display: inline-block;
@@ -1867,20 +1578,21 @@
1867 1578 #post-body-content > .frm_updated_message {
1868 1579 margin: 5px 65px;
1869 1580 }
1870 1581
1871 -#form_global_settings #post-body-content > .frm_updated_message,
1872 -#form_global_settings #post-body-content > .frm_warning_style {
1582 +#form_global_settings .frm_updated_message {
1873 1583 margin: 5px 25px;
1874 1584 }
1875 1585
1876 1586 .frm_error_style {
1877 1587 color: #973937;
1878 - background-color: #EBCCCC;
1588 + border-color: #F2DEDE;
1589 + background-color: #F2DEDE;
1879 1590 clear: both;
1880 1591 }
1881 1592
1882 1593 .frm_error_style a {
1594 + color: #973937;
1883 1595 text-decoration: underline;
1884 1596 font-weight: 600;
1885 1597 }
1886 1598
@@ -1888,10 +1600,14 @@
1888 1600 opacity: .7;
1889 1601 }
1890 1602
1891 1603 .frm_warning_style {
1892 - color: #7A4D05;
1893 - 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;
1894 1610 }
1895 1611
1896 1612 .frm_warning_heading{
1897 1613 font-weight: bold;
@@ -1897,61 +1613,8 @@
1897 1613 font-weight: bold;
1898 1614 margin-bottom:4px;
1899 1615 }
1900 1616
1901 -/* Warning message dismiss */
1902 -.frm_warning_style {
1903 - position: relative;
1904 - padding-right: calc(var(--gap-md) + 15px);
1905 -}
1906 -
1907 -body.rtl .frm_warning_style {
1908 - padding-right: var(--gap-md);
1909 - padding-left: calc(var(--gap-md) + 15px);
1910 -}
1911 -
1912 -.frm-warning-dismiss {
1913 - position: absolute;
1914 - top: 10px;
1915 - right: 10px;
1916 - display: flex;
1917 - cursor: pointer;
1918 - transition: opacity 0.2s ease-out;
1919 -}
1920 -
1921 -body.rtl .frm-warning-dismiss {
1922 - left: 10px;
1923 - right: auto;
1924 -}
1925 -
1926 -.frm-warning-dismiss:hover {
1927 - opacity: 0.8;
1928 -}
1929 -
1930 -.frm-warning-dismiss.frmsvg,
1931 -.frm-warning-dismiss.frmsvg svg {
1932 - width: 15px;
1933 - height: 15px;
1934 -}
1935 -
1936 -.frm_note_style {
1937 - background: rgba(188, 224, 253, 0.23);
1938 - color: var(--grey-700);
1939 -}
1940 -
1941 -.frm-banner-alert {
1942 - text-align: left;
1943 - margin: 0;
1944 - border-radius: 0;
1945 - padding: 10px 0 10px 40px;
1946 -}
1947 -
1948 -.frm-banner-alert a {
1949 - color: var(--primary-500);
1950 - font-weight: 400;
1951 - text-decoration: none;
1952 -}
1953 -
1954 1617 .frm_updated_message ul,
1955 1618 .frm_updated_message li,
1956 1619 .frm_warning_style ul,
1957 1620 .frm_warning_style li,
@@ -1960,24 +1623,57 @@
1960 1623 margin: 0;
1961 1624 }
1962 1625
1963 1626 .frm-inline-message {
1964 - border: 1px solid var(--primary-700);
1627 + border: 1px solid var(--primary-hover);
1965 1628 border-radius: var(--small-radius);
1966 - color: var(--primary-700);
1629 + color: var(--primary-hover);
1967 1630 background: #fff;
1968 1631 text-align: center;
1969 1632 padding: 20px;
1970 - font-size: var(--text-sm);
1971 - line-height: var(--leading);
1633 + font-size: 14px;
1634 + line-height: 1.4em;
1972 1635 }
1973 1636
1974 1637 .frm-inline-message a {
1975 - text-decoration: underline;
1976 1638 font-weight: 600;
1977 - color: var(--primary-700);
1639 + color: var(--primary-hover);
1978 1640 }
1979 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 +
1980 1676 .frm_pro_heading span {
1981 1677 margin-top: 10px;
1982 1678 }
1983 1679
@@ -1986,14 +1682,15 @@
1986 1682 }
1987 1683
1988 1684 .frm-yes {
1989 1685 color: var(--green);
1990 - font-size: var(--text-xl);
1686 + font-size: 21px;
1687 + font-weight: 500;
1991 1688 }
1992 1689
1993 1690 .frm-nope {
1994 - color: var(--grey-400);
1995 - font-size: var(--text-xl);
1691 + color: #d2e0f2;
1692 + font-size: 21px;
1996 1693 }
1997 1694
1998 1695 .upgrade_to_pro a {
1999 1696 color: var(--orange);
@@ -1999,10 +1696,10 @@
1999 1696 color: var(--orange);
2000 1697 }
2001 1698
2002 1699 .upgrade_to_pro table .frmsvg {
2003 - height: var(--text-xl);
2004 - width: var(--text-xl);
1700 + height: 20px;
1701 + width: 20px;
2005 1702 }
2006 1703
2007 1704 .upgrade_to_pro table.widefat {
2008 1705 background-color: #fff;
@@ -2008,14 +1705,12 @@
2008 1705 background-color: #fff;
2009 1706 border-collapse: collapse;
2010 1707 }
2011 1708
2012 -.frm-white-body .upgrade_to_pro table th,
1709 +.upgrade_to_pro table th,
2013 1710 .upgrade_to_pro table td {
2014 1711 padding: 10px 15px;
2015 - border: 1px solid var(--grey-300);
2016 - line-height: var(--leading);
2017 - font-size: var(--text-sm);
1712 + border: 1px solid #d2e0f2;
2018 1713 }
2019 1714
2020 1715 .upgrade_to_pro table th.frmcenter {
2021 1716 text-align: center;
@@ -2021,9 +1716,9 @@
2021 1716 text-align: center;
2022 1717 }
2023 1718
2024 1719 .widefat th.frm_table_break {
2025 - background-color: var(--sidebar-color);
1720 + background-color: #f6f7fb;
2026 1721 }
2027 1722
2028 1723 h2.frm-h2 + .howto {
2029 1724 color: var(--medium-grey);
@@ -2039,18 +1734,18 @@
2039 1734 margin-top: 0;
2040 1735 }
2041 1736
2042 1737 .frm-addons {
2043 - margin-top: var(--gap-lg);
1738 + margin-top: 30px;
2044 1739 display: grid;
2045 1740 grid-template-columns: 1fr 1fr 1fr;
2046 - grid-gap: var(--gap-md);
1741 + grid-gap: 30px 2%;
2047 1742 }
2048 1743
2049 1744 .frm-addons,
2050 1745 .frm-addons h2,
2051 1746 .frm-addons h3 {
2052 - color: var(--grey-700);
1747 + color: var(--dark-grey);
2053 1748 }
2054 1749
2055 1750 .frm-addons h2 {
2056 1751 font-size: 17px;
@@ -2062,9 +1757,9 @@
2062 1757
2063 1758 .frm-card {
2064 1759 width: 100%;
2065 1760 border-radius: 10px;
2066 - border: 1px solid var(--grey-300);
1761 + border: 1px solid var(--grey-border);
2067 1762 opacity: 1;
2068 1763 transition: opacity 1s;
2069 1764 }
2070 1765
@@ -2078,10 +1773,10 @@
2078 1773 position: relative;
2079 1774 }
2080 1775
2081 1776 .frm-addons .plugin-card-top {
2082 - min-height: 155px;
2083 - padding-top: var(--gap-lg);
1777 + height: 140px;
1778 + padding-top: 30px;
2084 1779 overflow: hidden;
2085 1780 }
2086 1781
2087 1782 .frm-addons .plugin-card-top h2 {
@@ -2118,16 +1813,15 @@
2118 1813 .frm-addon-active .button {
2119 1814 visibility: hidden;
2120 1815 }
2121 1816
2122 -.frm-save-and-reload-options {
1817 +#frm_save_and_reload_options {
2123 1818 margin-top: 10px;
2124 1819 font-size: 13px;
2125 1820 }
2126 1821
2127 -.frm-save-and-reload,
2128 -.frm-save-and-reload + .frm-button-secondary {
2129 - visibility: visible !important;
1822 +#frm_save_and_reload_settings, #frm_save_and_reload_settings + .frm-button-secondary {
1823 + visibility: visible;
2130 1824 }
2131 1825
2132 1826 .addon-status-label {
2133 1827 opacity: .7;
@@ -2156,13 +1850,9 @@
2156 1850 .frm-new-template.plugin-card-bottom {
2157 1851 overflow: visible;
2158 1852 }
2159 1853
2160 -#frm-new-template p:first-child {
2161 - margin-top: 0;
2162 -}
2163 -
2164 -.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install):not(.frm-banner-alert),
1854 +.frm-admin-page-formidableedit #wpbody-content > *:not(.frm-review-notice):not(.frm_previous_install),
2165 1855 #wpbody-content > .updated,
2166 1856 #wpbody-content > #update-nag,
2167 1857 #wpbody-content > .update-nag,
2168 1858 #wpbody-content > .notice:not(.frm-review-notice),
@@ -2193,9 +1883,9 @@
2193 1883 }
2194 1884
2195 1885 .frm-modal .postbox .frm_modal_top,
2196 1886 .frm-dialog .frm_common_modal .postbox > div:first-child {
2197 - padding: var(--gap-md) var(--gap-md) 0;
1887 + padding: 30px 30px 10px;
2198 1888 position: relative;
2199 1889 }
2200 1890
2201 1891 .frm-modal .postbox .frm-modal-title,
@@ -2200,70 +1890,36 @@
2200 1890
2201 1891 .frm-modal .postbox .frm-modal-title,
2202 1892 .frm-dialog .frm_common_modal .postbox > div:first-child > div:first-child {
2203 1893 display: inline-block;
2204 - font-size: var(--text-xl);
2205 - color: var(--grey-900);
1894 + font-size: 24px;
1895 + color: #282F36;
2206 1896 }
2207 1897
2208 -.frm-inline-modal > a.dismiss,
2209 -.frm-modal .postbox > a.dismiss,
2210 1898 .frm-modal .postbox .frm-modal-title + div:last-child,
2211 1899 .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2212 1900 position: absolute;
2213 1901 right: 30px;
2214 - top: 25px;
2215 - z-index: 2;
1902 + top: 37px;
2216 1903 }
2217 1904
2218 -body.rtl .frm-inline-modal > a.dismiss,
2219 -body.rtl .frm-modal .postbox > a.dismiss,
2220 -body.rtl .frm-modal .postbox .frm-modal-title + div:last-child,
2221 -body.rtl .frm-dialog .frm_common_modal .postbox > div:first-child > div:last-child {
2222 - right: unset;
2223 - left: 30px;
2224 -}
2225 -
2226 -.frm-info-modal .postbox > a.dismiss,
2227 -.frm-inline-modal > a.dismiss {
2228 - right: 13px;
2229 - top: 13px;
2230 -}
2231 -
2232 1905 .frm-modal .postbox .frm-modal-title + div:last-child a,
2233 -.frm-modal a.dismiss .frmsvg,
2234 1906 .frm_common_modal .frm_modal_top a .frmsvg {
2235 - color: var(--grey-900);
1907 + color: var(--grey);
2236 1908 }
2237 1909
2238 -.frm-modal .frm_modal_content > div.inside,
2239 -.frm_common_modal .frm_modal_content > div.inside {
2240 - padding: var(--gap-md);
2241 - margin: 0;
2242 - font-size: var(--text-sm);
2243 - color: var(--grey-700);
2244 -}
2245 -
2246 -.frm_common_modal .postbox {
2247 - display: flex;
2248 - flex-direction: column;
2249 -}
2250 -
2251 1910 .frm-modal .postbox > div.inside .cta-inside {
2252 1911 overflow-y: auto;
2253 1912 height: auto;
2254 - padding: 0 var(--gap-sm);
1913 + padding: 0 15px;
2255 1914 }
2256 1915
2257 1916 .frm_modal_footer {
2258 - padding: 0 var(--gap-md) var(--gap-sm);
1917 + padding: 15px 30px;
2259 1918 text-align: right;
1919 + border-top: 1px solid var(--sidebar-hover);
2260 1920 }
2261 1921
2262 -body.frm-body-with-open-modal {
2263 - overflow-y: hidden;
2264 -}
2265 -
2266 1922 #frm_new_form_modal .postbox > div.inside {
2267 1923 max-height: 490px;
2268 1924 overflow-y: auto;
2269 1925 overflow-x: hidden;
@@ -2273,9 +1929,9 @@
2273 1929
2274 1930 #frm_new_form_modal .postbox > div.inside .cta-inside {
2275 1931 overflow-y: auto;
2276 1932 height: auto;
2277 - padding: 0 var(--gap-md);
1933 + padding: 0 20px;
2278 1934 }
2279 1935
2280 1936 #frm_new_form_modal .accordion-container {
2281 1937 width: 100%;
@@ -2281,16 +1937,13 @@
2281 1937 width: 100%;
2282 1938 }
2283 1939
2284 1940 .frm-templates-list {
2285 - margin-top: 0;
1941 + margin-top: 0px;
2286 1942 }
2287 1943
2288 -.frm-templates-list.frm_grid_container li {
2289 - margin-bottom: 0;
2290 -}
2291 -
2292 1944 .frm-templates-list li {
1945 + width: 50%;
2293 1946 vertical-align: top;
2294 1947 position: relative;
2295 1948 box-sizing: border-box;
2296 1949 border-radius: 6px;
@@ -2319,17 +1972,14 @@
2319 1972 .frm-templates-list li.frm-selectable:hover p {
2320 1973 max-width: calc( 100% - 65px );
2321 1974 }
2322 1975
2323 -.frm-templates-list .frm-featured-form {
2324 - display: flex;
1976 +.frm-templates-list li > div:not(.frm-hover-icons) {
1977 + display: inline-block;
2325 1978 width: 100%;
1979 + padding: 5px;
2326 1980 }
2327 1981
2328 -.frm-templates-list li .frm-featured-form {
2329 - padding: 7px 5px;
2330 -}
2331 -
2332 1982 .frm-templates-list li li > div {
2333 1983 padding-left: 0;
2334 1984 }
2335 1985
@@ -2336,38 +1986,23 @@
2336 1986 .frm-templates-list li > div > div {
2337 1987 vertical-align: middle;
2338 1988 }
2339 1989
2340 -.frm-templates-list .frm-inner-circle,
2341 -.frm-category-icon, /* Deprecated */
2342 -.frm-icon-wrapper {
2343 - background: var(--primary-500);
2344 - border-radius: var(--small-radius);
2345 - color: #fff;
1990 +.frm-templates-list li .frm-category-icon {
2346 1991 width: 40px;
2347 1992 height: 40px;
2348 - font-size: 18px;
2349 - box-sizing: border-box;
2350 - align-self: center;
2351 - justify-content: center;
2352 - align-items: center;
2353 - display: inline-flex;
2354 -}
2355 -
2356 -.frm-templates-list .frm-inner-circle .frmsvg {
1993 + overflow: hidden;
1994 + display: inline-block;
1995 + border-radius: 4px;
1996 + text-align: center;
2357 1997 vertical-align: top;
2358 1998 }
2359 1999
2360 -.frm-templates-list li .frm-category-icon {
2361 - overflow: hidden;
2362 - align-self: flex-start;
2363 -}
2364 -
2365 -.frm-templates-list .frm-template-details {
2000 +.frm-templates-list li > div > div:last-child:not(.frm-dropdown-menu) {
2366 2001 /* the content container to the right of the icon in Create new form modal */
2367 2002 display: inline-block;
2368 2003 width: calc( 100% - 40px );
2369 - padding-left: var(--gap-sm);
2004 + padding-left: 13px;
2370 2005 box-sizing: border-box;
2371 2006 transform: translateY(-2px);
2372 2007 }
2373 2008
@@ -2381,18 +2016,54 @@
2381 2016 }
2382 2017
2383 2018 .frm-templates-list li h3,
2384 2019 .frm-templates-list .frm-install-template h3 {
2385 - font-size: var(--text-sm) !important;
2020 + font-size: 14px !important;
2021 + line-height: 24px;
2022 + height: 24px;
2386 2023 }
2387 2024
2025 +.frm-templates-list li p {
2026 + font-size: 13px;
2027 + color: rgba(40, 47, 54, 0.6);
2028 +}
2029 +
2388 2030 .frm-templates-list .frm-install-template div {
2389 2031 text-align: left;
2390 2032 }
2391 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 +
2392 2063 #frm_new_form_modal .frm-search {
2393 - width: 100%;
2394 - margin: var(--gap-sm) 0 var(--gap-md);
2064 + width: calc( 100% - 20px );
2065 + margin: 15px 10px 30px;
2395 2066 }
2396 2067
2397 2068 #frm_leave_email,
2398 2069 #frm_code_from_email
@@ -2399,10 +2070,13 @@
2399 2070 {
2400 2071 width: 480px;
2401 2072 }
2402 2073
2403 -#frm_new_form_modal #template-search-input {
2404 - 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;
2405 2079 }
2406 2080
2407 2081 #frm-email-block .frm-with-left-icon .frmsvg {
2408 2082 padding: 0;
@@ -2412,12 +2086,12 @@
2412 2086
2413 2087 #frm_new_form_modal .accordion-container {
2414 2088 display: inline-block;
2415 2089 padding: 0;
2416 - border-top: 1px solid var(--grey-300);
2090 + border-top: 1px solid var(--grey-border);
2417 2091 box-sizing: border-box;
2418 - margin: 0 5px;
2419 - width: calc( 100% - 10px );
2092 + margin: 0 10px;
2093 + width: calc( 100% - 20px );
2420 2094 }
2421 2095
2422 2096 #frm_new_form_modal .accordion-section-title {
2423 2097 padding: 0;
@@ -2427,13 +2101,13 @@
2427 2101 .control-section:hover .accordion-section-title,
2428 2102 #frm_new_form_modal .accordion-section.open .accordion-section-title
2429 2103 {
2430 2104 background: #fff !important;
2431 - border-bottom-color: transparent;
2105 + border-bottom: none;
2432 2106 }
2433 2107
2434 2108 #frm_new_form_modal .accordion-section.open:hover {
2435 - border-bottom-color: transparent;
2109 + border-bottom: none;
2436 2110 }
2437 2111
2438 2112 #frm_new_form_modal .accordion-section {
2439 2113 padding: 8px 0 4px;
@@ -2439,9 +2113,9 @@
2439 2113 padding: 8px 0 4px;
2440 2114 }
2441 2115
2442 2116 #frm_new_form_modal .accordion-section + .accordion-section {
2443 - border-top: 1px solid var(--grey-300);
2117 + border-top: 1px solid var(--grey-border);
2444 2118 border-radius: 0;
2445 2119 }
2446 2120
2447 2121 .frm-templates-list.frm-categories-list li > div > div:last-child,
@@ -2450,9 +2124,9 @@
2450 2124 padding-left: 0;
2451 2125 }
2452 2126
2453 2127 #frm_new_form_modal .frm-templates-list.frm-categories-list .accordion-section-title {
2454 - padding-left: var(--gap-sm);
2128 + padding-left: 10px;
2455 2129 }
2456 2130
2457 2131 #frm_new_form_modal .frm-templates-list.frm-categories-list li.frm-selectable {
2458 2132 padding: 0 10px;
@@ -2459,75 +2133,74 @@
2459 2133 overflow: hidden;
2460 2134 }
2461 2135
2462 2136 #frm_new_form_modal .accordion-section-content {
2463 - padding: var(--gap-sm);
2137 + padding: 10px 0;
2464 2138 }
2465 2139
2466 2140 .frm-hover-icons {
2467 2141 position: absolute;
2468 2142 right: 0;
2469 - top: calc( ( 58px - 2px - 22px ) / 2 ); /* Template item height - borders - icon height */
2470 - max-width: 91px;
2143 + top: 0;
2144 + height: 20px;
2145 + width: 65px;
2471 2146 height: 100%;
2472 2147 box-sizing: border-box;
2473 - padding: 0 10px 0 5px !important;
2474 - border-radius: var(--small-radius);
2148 + padding: 14px 10px 0 5px !important;
2149 + border-radius: 6px;
2475 2150 text-align: right;
2476 - display: flex;
2477 - gap: 5px;
2478 2151 }
2479 2152
2480 -.frm-ready-made-solution .frm-hover-icons {
2481 - visibility: hidden;
2153 +#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons {
2154 + width: 91px;
2482 2155 }
2483 2156
2484 -.frm-ready-made-solution:hover .frm-hover-icons {
2485 - visibility: visible;
2486 -}
2487 -
2488 2157 .frm-hover-icons a {
2489 2158 width: 22px;
2490 2159 height: 22px;
2491 - font-size: var(--text-md);
2492 - display: inline-flex;
2493 - align-items: center;
2494 - justify-content: center;
2160 + display: inline-block;
2495 2161 border-radius: 50%;
2496 2162 box-sizing: border-box;
2497 - line-height: var(--leading);
2163 + line-height: 20px;
2498 2164 text-align: center;
2499 2165 }
2500 2166
2501 2167 .frm-hover-icons > .frm-preview-form,
2502 2168 .frm-hover-icons > .frm-delete-form {
2503 - border: 1px solid var(--primary-500);
2169 + border: 1px solid var(--primary-color);
2170 + margin-right: 5px;
2504 2171 }
2505 2172
2506 2173 .frm-hover-icons > .frm-create-form,
2507 2174 .frm-ready-made-solution .frm-hover-icons a {
2508 - background-color: var(--primary-500);
2175 + background-color: var(--primary-color);
2509 2176 }
2510 2177
2511 -.frm-hover-icons > a .frmsvg {
2512 - width: 14px;
2513 - height: 14px;
2514 - vertical-align: baseline;
2178 +.frm-hover-icons > .frm-preview-form .frmsvg {
2179 + width: 16px;
2180 + height: 16px;
2181 + color: var(--primary-color);
2515 2182 }
2516 2183
2517 -.frm-hover-icons > .frm-preview-form .frmsvg,
2518 2184 .frm-hover-icons > .frm-delete-form .frmsvg {
2519 - color: var(--primary-500);
2185 + width: 14px;
2186 + height: 14px;
2187 + color: var(--primary-color);
2188 + transform: translateY(-1px);
2520 2189 }
2521 2190
2522 2191 .frm-hover-icons > .frm-unlock-form {
2523 - background-color: var(--primary-500);
2192 + background-color: var(--primary-color);
2524 2193 }
2525 2194
2526 2195 .frm-hover-icons > .frm-unlock-form .frmsvg {
2527 - background-color: var(--primary-500);
2196 + width: 12px;
2197 + height: 12px;
2198 + background-color: var(--primary-color);
2199 + transform: translateY(-2px);
2528 2200 }
2529 2201
2202 +.frm-hover-icons > .frm-create-form .frmsvg,
2530 2203 .frm-ready-made-solution .frmsvg {
2531 2204 width: 14px;
2532 2205 height: 14px;
2533 2206 }
@@ -2541,28 +2214,27 @@
2541 2214 .frm-ready-made-solution .frm-hover-icons a:hover,
2542 2215 .frm-hover-icons > .frm-unlock-form:hover,
2543 2216 .frm-hover-icons > .frm-unlock-form:hover .frmsvg
2544 2217 {
2545 - background-color: var(--primary-700) !important;
2218 + background-color: var(--primary-hover) !important;
2546 2219 }
2547 2220
2548 2221 .frm-hover-icons .frm-preview-form:hover,
2549 2222 .frm-hover-icons .frm-delete-form:hover
2550 2223 {
2551 - border: 1px solid var(--primary-700) !important;
2224 + border: 1px solid var(--primary-hover) !important;
2552 2225 }
2553 2226
2554 2227 .frm-hover-icons .frm-preview-form:hover .frmsvg,
2555 2228 .frm-hover-icons .frm-delete-form:hover .frmsvg {
2556 - color: var(--primary-700) !important;
2229 + color: var(--primary-hover) !important;
2557 2230 }
2558 2231
2559 -.frm-application-card h4 .frmsvg,
2560 2232 .frm-locked-template h3 .frmsvg {
2561 - height: var(--text-sm);
2562 - width: var(--text-sm);
2563 - vertical-align: text-top;
2564 - color: var(--grey-500);
2233 + height: 12px;
2234 + width: 14px;
2235 + vertical-align: top;
2236 + padding-top: 6px;
2565 2237 }
2566 2238
2567 2239 #frm_new_form_modal .frm-use-this-template {
2568 2240 margin-left: 10px;
@@ -2568,18 +2240,21 @@
2568 2240 margin-left: 10px;
2569 2241 }
2570 2242
2571 2243 #frm_new_form_modal #frm-preview-block {
2572 - padding: var(--gap-md) var(--gap-lg);
2244 + padding: 20px 30px;
2573 2245 overflow-x: hidden;
2574 2246 }
2575 2247
2576 2248 #frm_new_form_modal #frm-details-block {
2577 - padding: var(--gap-md) var(--gap-lg);
2249 + padding: 20px 30px;
2578 2250 }
2579 2251
2580 2252 .frm-modal-back {
2581 2253 cursor: pointer;
2254 + font-size: 17px;
2255 + vertical-align: top;
2256 + margin-top: 4px;
2582 2257 margin-right: 4px;
2583 2258 }
2584 2259
2585 2260 .frm-modal-cancel {
@@ -2586,28 +2261,19 @@
2586 2261 float: left;
2587 2262 }
2588 2263
2589 2264 .frm-plan-required-tag {
2590 - margin-left: 5px;
2591 - transform: translateY(-1px);
2592 2265 background: #FDE6DE;
2593 2266 color: #F15A24;
2594 -}
2595 -
2596 -.frm-ready-made-solution .frm-meta-tag {
2597 - width: fit-content;
2598 - background: #FDE6DE;
2599 - color: #F15A24;
2600 -}
2601 -
2602 -.frm-meta-tag {
2603 2267 font-size: 10px;
2604 - padding: 4px 6px;
2268 + padding: 4px 8px;
2605 2269 border-radius: 4px;
2606 2270 text-transform: uppercase;
2607 2271 font-weight: normal;
2608 2272 display: inline-block;
2609 2273 line-height: 12px;
2274 + transform: translateY(-1px);
2275 + margin-left: 5px;
2610 2276 }
2611 2277
2612 2278 #frm_new_form_modal.frm-expired #frm-create-block,
2613 2279 #frm_new_form_modal.frm-expiring #frm-create-block {
@@ -2617,14 +2283,18 @@
2617 2283 #frm-create-footer {
2618 2284 padding: 15px 20px;
2619 2285 }
2620 2286
2287 +#frm-create-footer .frm_error_style {
2288 + border-radius: 6px;
2289 +}
2290 +
2621 2291 #frm_code_from_email_options {
2622 2292 margin-top: 20px;
2623 2293 }
2624 2294
2625 2295 #frm_code_from_email_options * {
2626 - color: var(--primary-500);
2296 + color: var(--primary-color);
2627 2297 }
2628 2298
2629 2299 #frm-email-block p,
2630 2300 #frm-code-block p,
@@ -2660,23 +2330,20 @@
2660 2330 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-title,
2661 2331 #frm_new_form_modal[frm-page="email"] #frm-email-title,
2662 2332 #frm_new_form_modal[frm-page="code"] #frm-email-title,
2663 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,
2664 2336 #frm_code_from_email_error[frm-error="wrong-code"] span[frm-error="wrong-code"],
2665 2337 #frm_code_from_email_error[frm-error="empty"] span[frm-error="empty"],
2666 2338 #frm_code_from_email_error[frm-error="custom"] span[frm-error="custom"],
2667 2339 #frm_leave_email_error[frm-error="invalid"] span[frm-error="invalid"],
2668 -#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
2669 2342 {
2670 2343 display: inline-block;
2671 2344 }
2672 2345
2673 -.frm-locked-template .frm-hover-icons .frm-unlock-form,
2674 -li[data-preview] .frm-hover-icons .frm-preview-form,
2675 -#frm_new_form_modal .frm-selectable[data-custom="1"] .frm-hover-icons .frm-delete-form {
2676 - display: inline-flex;
2677 -}
2678 -
2679 2346 #frm_new_form_modal[frm-page="create"] #frm-create-block,
2680 2347 #frm_new_form_modal[frm-page="preview"] #frm-preview-block,
2681 2348 #frm_new_form_modal[frm-page="details"] #frm-details-block,
2682 2349 #frm_new_form_modal[frm-page="upgrade"] #frm-upgrade-block,
@@ -2711,9 +2378,9 @@
2711 2378 }
2712 2379
2713 2380 #frm-upgrade-body-list-wrapper ul li:before {
2714 2381 content: "\2022";
2715 - color: var(--primary-500);
2382 + color: var(--primary-color);
2716 2383 display: inline-block;
2717 2384 width: 1em;
2718 2385 margin-left: -1em;
2719 2386 }
@@ -2719,10 +2386,17 @@
2719 2386 }
2720 2387
2721 2388 /* Embed Form Modal */
2722 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 +
2723 2397 .frm-embed-modal-content {
2724 - padding: var(--gap-md);
2398 + padding: 20px;
2725 2399 }
2726 2400
2727 2401 .frm-embed-modal-content.frm-loading-page-options {
2728 2402 display: flex;
@@ -2729,15 +2403,16 @@
2729 2403 justify-content: center;
2730 2404 }
2731 2405
2732 2406 #frm_embed_modal .frm_embed_example {
2733 - background: var(--sidebar-color);
2734 - border: 1px solid var(--sidebar-hover);
2735 - border-radius: var(--small-radius);
2736 - color: var(--grey-900);
2737 - font-size: var(--text-sm);
2738 - padding-right: var(--gap-lg);
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;
2739 2413 width: 100%;
2414 + margin-bottom: 15px;
2740 2415 height: auto !important;
2741 2416 resize: none;
2742 2417 }
2743 2418
@@ -2747,59 +2422,67 @@
2747 2422
2748 2423 .frm-embed-modal-content > div a {
2749 2424 position: absolute;
2750 2425 right: 0;
2751 - top: 0;
2426 + top: 8px;
2752 2427 }
2753 2428
2754 2429 .frm-embed-modal-content > div {
2755 2430 position: relative;
2756 - margin-bottom: var(--gap-sm);
2757 2431 }
2758 2432
2759 -.frm-embed-modal-content > div:last-child {
2760 - margin-bottom: 0;
2761 -}
2762 -
2763 2433 .frm-embed-modal-content svg[id^="frm_copy_embed_"] {
2764 2434 position: absolute;
2765 - bottom: calc( ( 38px - 18px ) / 2 ); /* Input height - SVG height */
2435 + top: 35px;
2766 2436 right: 10px;
2767 2437 cursor: pointer;
2768 2438 opacity: 0.5;
2769 2439 }
2770 2440
2771 -.frm-border-info-box,
2772 2441 .frm-embed-modal-option {
2773 - border-radius: var(--small-radius);
2774 - border: 1px solid var(--grey-300);
2775 - padding: var(--gap-sm);
2442 + border-radius: 6px;
2443 + border: 1px solid #E3E8EB;
2444 + padding: 20px;
2776 2445 cursor: pointer;
2777 - display: flex;
2778 - gap: var(--gap-sm);
2779 - font-size: var(--text-sm);
2780 2446 }
2781 2447
2782 2448 .frm-embed-modal-option + .frm-embed-modal-option {
2783 - margin-top: var(--gap-sm);
2449 + margin-top: 10px;
2784 2450 }
2785 2451
2786 -.frm-collapsed .frmsvg,
2787 -.caret.rotate-270,
2788 -.frm-embed-modal-option .caret {
2789 - align-self: center;
2790 - margin-left: auto;
2791 - transform: rotate(-90deg);
2452 +#frm_embed_modal .frm-modal-cancel {
2453 + display: none;
2792 2454 }
2793 2455
2794 -#frm_embed_modal .frm_modal_footer {
2795 - display: none;
2456 +#frm_embed_modal.frm-on-page-2 .frm-modal-cancel {
2457 + display: inline;
2796 2458 }
2797 2459
2798 -#frm_embed_modal.frm-on-page-2 .frm_modal_footer {
2799 - 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;
2800 2467 }
2801 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 +
2802 2485 .frm-embed-modal-content ul {
2803 2486 max-height: 300px;
2804 2487 overflow-y: scroll;
2805 2488 }
@@ -2809,22 +2492,20 @@
2809 2492 }
2810 2493
2811 2494 /* Bulk Options */
2812 2495 #frm-bulk-modal .frm_grid_container {
2496 + border-top: 1px solid var(--grey-border);
2813 2497 grid-template-columns: repeat(12, 8.33%);
2814 2498 grid-gap: 0;
2815 2499 }
2816 2500
2817 2501 #frm-bulk-modal .frm8 {
2818 - border-right: 1px solid var(--grey-300);
2819 - padding: 10px 20px 10px var(--gap-lg);
2502 + border-right: 1px solid var(--grey-border);
2503 + padding: 0 20px 20px;
2820 2504 }
2821 2505
2822 -#frm-bulk-modal .frm4 {
2823 - padding: 10px 0;
2824 -}
2825 -
2826 -.frm-inline-modal .howto {
2506 +.frm-inline-modal .howto,
2507 +#frm-bulk-modal .howto {
2827 2508 margin: 5px 0 10px;
2828 2509 color: var(--grey);
2829 2510 }
2830 2511
@@ -2841,18 +2522,18 @@
2841 2522 }
2842 2523
2843 2524 .frm-bulk-edit-link {
2844 2525 text-align: right;
2845 - font-size: var(--text-sm);
2526 + font-size: 14px;
2846 2527 padding: 0 5px 10px;
2847 2528 }
2848 2529
2849 2530 .frm-small-add {
2850 - font-size: var(--text-sm) !important;
2531 + font-size: 14px !important;
2851 2532 }
2852 2533
2853 2534 .frm-small-add span {
2854 - color: var(--primary-500);
2535 + color: var(--primary-color);
2855 2536 font-size: 12px;
2856 2537 height: 12px;
2857 2538 width: 12px;
2858 2539 }
@@ -2867,30 +2548,32 @@
2867 2548 }
2868 2549
2869 2550 .frm-right-panel .inside a.frm_pro_tip,
2870 2551 a.frm_pro_tip {
2871 - font-size: var(--text-sm);
2552 + font-size: 14px;
2872 2553 display: inline-block;
2873 - color: var(--grey-700);
2554 + color: var(--dark-grey);
2874 2555 background: #FFE7DE;
2875 2556 border-radius: var(--small-radius);
2876 2557 padding: 5px 15px;
2877 2558 margin: 0 auto;
2559 + line-height: 1.4;
2878 2560 display: flex;
2879 2561 align-items: center;
2880 2562 }
2881 2563
2882 2564 a.frm_pro_tip:hover {
2883 - color: var(--grey-700);
2884 - border-color: var(--primary-500);
2565 + color: var(--dark-grey);
2566 + border-color: var(--primary-color);
2885 2567 }
2886 2568
2887 2569 a.frm_pro_tip:hover .frmsvg {
2888 - fill: var(--primary-500);
2570 + fill: var(--primary-color);
2889 2571 }
2890 2572
2891 2573 .frm_field_list .frm_pro_tip {
2892 2574 margin: 10px 15px;
2575 + padding-left: 40px;
2893 2576 position: relative;
2894 2577 width: calc(100% - 30px);
2895 2578 box-sizing: border-box;
2896 2579 }
@@ -2906,9 +2589,8 @@
2906 2589 }
2907 2590
2908 2591 .frm-tip-info {
2909 2592 flex: 1;
2910 - text-align: left;
2911 2593 }
2912 2594
2913 2595 .frm-tip-cta {
2914 2596 color: var(--orange);
@@ -2918,9 +2600,9 @@
2918 2600 float: right;
2919 2601 }
2920 2602
2921 2603 .frm_pro_tip:hover .frm-tip-cta {
2922 - color: var(--primary-500);
2604 + color: var(--primary-color);
2923 2605 }
2924 2606
2925 2607 /*Switch form dropdown*/
2926 2608 h1 .fa-caret-down {
@@ -2935,23 +2617,16 @@
2935 2617 vertical-align: middle;
2936 2618 }
2937 2619
2938 2620 .caret,
2939 -.wp-admin .frm_wrap select,
2940 -.frm_wrap .frm_form_builder select,
2941 2621 .frm_wrap .ui-autocomplete-input {
2942 - background: transparent url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23667085%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2943 - background-size: var(--text-md) var(--text-md);
2944 - padding-right: var(--gap-lg) !important;
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;
2945 2624 }
2946 2625
2947 -.caret {
2948 - padding-right: var(--gap-xs) !important;
2949 -}
2950 -
2951 2626 .frm-btn-group .caret {
2952 2627 float: right;
2953 - margin-top: calc( var(--text-md) / 2 );
2628 + margin-top: 6px;
2954 2629 }
2955 2630
2956 2631 .dropdown {
2957 2632 position: relative;
@@ -2960,10 +2635,8 @@
2960 2635 .dropdown-toggle:focus {
2961 2636 outline: 0;
2962 2637 }
2963 2638
2964 -.frm_wrap .ui-autocomplete,
2965 -#frm_adv_info.frm-dropdown-menu,
2966 2639 .frm-dropdown-menu {
2967 2640 /* Copied from .dropdown-menu rules from Bootstrap */
2968 2641 position: absolute;
2969 2642 top: 100%;
@@ -2970,25 +2643,22 @@
2970 2643 left: 0;
2971 2644 z-index: 1000;
2972 2645 display: none;
2973 2646 float: left;
2974 - padding-left: 4px;
2975 - padding-right: 4px;
2976 - margin: var(--gap-xs) 0 0;
2647 + padding: 0.5rem 0;
2648 + margin: 0;
2977 2649 text-align: left;
2978 2650 list-style: none;
2979 - background: none;
2980 2651 background-color: #fff;
2981 2652 background-clip: padding-box;
2982 - border: 1px solid var(--grey-100);
2653 + border: 1px solid rgba(0, 0, 0, 0.15);
2983 2654 border-radius: 0.25rem;
2984 - box-shadow: var(--box-shadow-lg);
2985 2655
2986 2656 /* Custom rules */
2987 2657 max-height: 200px;
2988 2658 overflow-y: auto;
2989 2659 overflow-x: hidden;
2990 - font-size: var(--text-md);
2660 + font-size: 0.9rem;
2991 2661 width: auto;
2992 2662 min-width: 160px;
2993 2663 }
2994 2664
@@ -2996,8 +2666,12 @@
2996 2666 min-width: 100px;
2997 2667 max-width: 99%;
2998 2668 }
2999 2669
2670 +#frm_bs_dropdown > a {
2671 + font-size: 1em;
2672 +}
2673 +
3000 2674 #frm_bs_dropdown .frm-dropdown-menu {
3001 2675 max-width: 400px;
3002 2676 }
3003 2677
@@ -3006,15 +2680,11 @@
3006 2680 }
3007 2681
3008 2682 #frm_field_group_controls .frm-dropdown-menu,
3009 2683 .frm-field-action-icons .frm-dropdown-menu {
3010 - min-width: 180px !important;
2684 + min-width: 160px !important;
3011 2685 }
3012 2686
3013 -.frm-field-action-icons .frm-dropdown-toggle svg {
3014 - color: #9EA9B8;
3015 -}
3016 -
3017 2687 .multiselect-container.frm-dropdown-menu,
3018 2688 #search-submit .frm-dropdown-menu {
3019 2689 min-width: 200px !important;
3020 2690 }
@@ -3022,9 +2692,9 @@
3022 2692 .preview .frm-dropdown-menu {
3023 2693 min-width: 230px !important;
3024 2694 }
3025 2695
3026 -.frm-dropdown-menu.dropdown-menu-right {
2696 +.frm-dropdown-menu.pull-right {
3027 2697 right: 0;
3028 2698 left: auto;
3029 2699 }
3030 2700
@@ -3038,11 +2708,8 @@
3038 2708 .frm-dropdown-menu > .dropdown-item {
3039 2709 margin: 0;
3040 2710 }
3041 2711
3042 -.frm-select-list-item,
3043 -.frm_wrap .ui-autocomplete li > div,
3044 -.multiselect-container button.multiselect-option,
3045 2712 .frm-dropdown-menu > .dropdown-item > a,
3046 2713 .frm-dropdown-menu .frm_dropdown_li {
3047 2714 clear: both;
3048 2715 font-weight: normal;
@@ -3047,24 +2714,19 @@
3047 2714 clear: both;
3048 2715 font-weight: normal;
3049 2716 white-space: nowrap;
3050 2717 text-decoration: none;
3051 - border-radius: var(--small-radius);
3052 2718 }
3053 2719
3054 -.frm-dropdown-menu > .active > a,
3055 -.frm-dropdown-menu > .active > a:hover,
3056 -.frm-dropdown-menu > .active > a:focus {
2720 +.frm-dropdown-menu > .active > a, .frm-dropdown-menu > .active > a:hover, .frm-dropdown-menu > .active > a:focus {
3057 2721 text-decoration: none;
3058 2722 outline: 0;
3059 2723 }
3060 2724
3061 -.frm-select-list-item.disabled,
3062 2725 .frm-dropdown-menu > .disabled > a, .frm-dropdown-menu > .disabled > a:hover, .frm-dropdown-menu > .disabled > a:focus {
3063 2726 color: #999999;
3064 2727 }
3065 2728
3066 -.frm-select-list-item.disabled:hover,
3067 2729 .frm-dropdown-menu > .disabled > a:hover,
3068 2730 .frm-dropdown-menu > .disabled > a:focus {
3069 2731 text-decoration: none;
3070 2732 background-color: transparent;
@@ -3081,11 +2743,12 @@
3081 2743 }
3082 2744
3083 2745 .dropdown-header {
3084 2746 display: block;
3085 - padding: 3px 10px;
3086 - font-size: var(--text-xs);
3087 - color: var(--grey-400);
2747 + padding: 3px 20px;
2748 + font-size: 12px;
2749 + line-height: 1.428571429;
2750 + color: #999999;
3088 2751 }
3089 2752
3090 2753 .dropdown-backdrop {
3091 2754 position: fixed;
@@ -3095,9 +2758,8 @@
3095 2758 top: 0;
3096 2759 z-index: 990;
3097 2760 }
3098 2761
3099 -.dropdown-menu-right > .frm-dropdown-menu,
3100 2762 .pull-right > .frm-dropdown-menu {
3101 2763 right: 0;
3102 2764 left: auto;
3103 2765 }
@@ -3117,13 +2779,13 @@
3117 2779 .btn {
3118 2780 border: 1px solid #ddd;
3119 2781 background: #fff;
3120 2782 height: 28px;
3121 - line-height: var(--leading);
2783 + line-height: 1.5;
3122 2784 }
3123 2785
3124 2786 a.frm_option_icon:before {
3125 - color: var(--primary-500);
2787 + color: var(--primary-color);
3126 2788 font-size: 22px;
3127 2789 width: 22px;
3128 2790 height: 22px;
3129 2791 }
@@ -3129,9 +2791,9 @@
3129 2791 }
3130 2792
3131 2793 a.frm_option_icon:focus::before,
3132 2794 a.frm_option_icon:hover::before {
3133 - color: var(--primary-700);
2795 + color: var(--primary-hover);
3134 2796 }
3135 2797
3136 2798 .frm_top_left .frm-dropdown-toggle {
3137 2799 color: #999;
@@ -3145,17 +2807,17 @@
3145 2807 text-decoration: none;
3146 2808 }
3147 2809
3148 2810 .frm-card .frm-dropdown-toggle {
3149 - border: 1px solid var(--grey-300);
2811 + border: 1px solid var(--grey-border);
3150 2812 border-radius: var(--small-radius);
3151 2813 font-size: 13px;
3152 - color: var(--grey-700);
2814 + color: var(--dark-grey);
3153 2815 padding: 7px 20px;
3154 2816 }
3155 2817
3156 2818 .frm_actions_dropdown .frm-dropdown-menu {
3157 - font-size: var(--text-sm);
2819 + font-size: 14px;
3158 2820 color: #5F6C72;
3159 2821 }
3160 2822
3161 2823 .frm-dropdown-menu .frm_icon_font {
@@ -3167,21 +2829,20 @@
3167 2829 /* BS Multiselect */
3168 2830 .multiselect-container.frm-dropdown-menu {
3169 2831 top: auto;
3170 2832 left: auto;
3171 - font-size: var(--text-sm);
3172 - padding: 4px;
2833 + font-size: 14px;
2834 + padding-top: 3px;
3173 2835 margin-bottom: 3px;
3174 2836 }
3175 2837
3176 2838 .frm-right-panel .accordion-section-content {
3177 2839 background: transparent;
3178 - padding: 0;
3179 - overflow: initial;
2840 + padding-top: 0
3180 2841 }
3181 2842
3182 -.frm-right-panel .accordion-section-content > .inside {
3183 - padding: 0 0 var(--gap-xs);
2843 +.frm-right-panel .accordion-section-content > .inside {
2844 + padding: 0;
3184 2845 }
3185 2846
3186 2847 .frm-right-panel .accordion-section-content .inside a {
3187 2848 font-size: inherit;
@@ -3188,10 +2849,10 @@
3188 2849 }
3189 2850
3190 2851 #post-body-content + .frm-right-panel h3.accordion-section-title {
3191 2852 padding: 7px 10px 8px 14px;
3192 - font-size: var(--text-md);
3193 - color: var(--grey-700);
2853 + font-size: 16px;
2854 + color: var(--dark-grey);
3194 2855 }
3195 2856
3196 2857 .frm-right-panel .control-section.open h3 {
3197 2858 border-bottom: none;
@@ -3200,22 +2861,22 @@
3200 2861 .js .frm-right-panel .control-section.open .accordion-section-title,
3201 2862 .js .frm-right-panel .control-section .accordion-section-title:focus,
3202 2863 .js .frm-right-panel .control-section .accordion-section-title:hover {
3203 2864 background: transparent;
3204 - color: var(--grey-900);
2865 + color: var(--dark-grey);
3205 2866 }
3206 2867
3207 2868 .js .frm-right-panel .control-section .accordion-section-title:hover:before {
3208 - color: var(--grey-700);
2869 + color: var(--dark-grey);
3209 2870 }
3210 2871
3211 2872 .frm-with-line,
3212 2873 .accordion-section-content h4 {
3213 - font-size: var(--text-md);
2874 + font-size: 16px;
3214 2875 font-weight: 400;
3215 2876 margin: 20px -20px 10px;
3216 2877 padding: 0 20px;
3217 - color: var(--grey-700);
2878 + color: var(--dark-grey);
3218 2879 position: relative;
3219 2880 border: none !important;
3220 2881 }
3221 2882
@@ -3245,9 +2906,9 @@
3245 2906 .accordion-section-content h4:before {
3246 2907 content: '';
3247 2908 display: block;
3248 2909 position: absolute;
3249 - border-bottom: 1px solid var(--grey-300);
2910 + border-bottom: 1px solid var(--grey-border);
3250 2911 left: 0;
3251 2912 width: 100%;
3252 2913 top: 50%;
3253 2914 }
@@ -3265,9 +2926,8 @@
3265 2926 font-family: "s11-fp" !important;
3266 2927 font-size: 18px;
3267 2928 font-variant: normal;
3268 2929 text-rendering: auto;
3269 - vertical-align: text-top;
3270 2930 }
3271 2931
3272 2932 #frm_new_form_modal .accordion-section.open .accordion-section-title:after {
3273 2933 transform: rotate(90deg);
@@ -3273,9 +2933,9 @@
3273 2933 transform: rotate(90deg);
3274 2934 }
3275 2935
3276 2936 .frm-right-panel .accordion-section-title:after {
3277 - top: calc(50% - 10px) !important;
2937 + right: 20px;
3278 2938 }
3279 2939
3280 2940 .frm-right-panel .open .accordion-section-title:after {
3281 2941 content: "\e62a" !important;
@@ -3284,9 +2944,9 @@
3284 2944 .frm-right-panel .accordion-section-title:before {
3285 2945 content: "\f1de" !important;
3286 2946 color: var(--grey);
3287 2947 font-size: 17px !important;
3288 - margin: 0 10px 0 0;
2948 + margin: 0 10px;
3289 2949 }
3290 2950
3291 2951 .form-title-style .accordion-section-title:before,
3292 2952 .section-fields-style .accordion-section-title:before {
@@ -3344,16 +3004,12 @@
3344 3004 .progress-bars-style .accordion-section-title:before{
3345 3005 content: "\e939" !important;
3346 3006 }
3347 3007
3348 -#frm_view_editor_left.frm-right-panel .accordion-section-title,
3349 3008 .frm-right-panel h3.accordion-section-title {
3350 3009 padding: 15px 20px;
3351 3010 background: var(--sidebar-color);
3352 - line-height: var(--leading);
3353 - color: var(--grey-700);
3354 - font-size: var(--text-lg);
3355 - font-weight: 400;
3011 + line-height: 1;
3356 3012 }
3357 3013
3358 3014 .control-section .accordion-section-title:after, /** Form template list */
3359 3015 .customize-pane-child .accordion-section-title:after {
@@ -3383,12 +3039,14 @@
3383 3039 max-width: 250px;
3384 3040 }
3385 3041
3386 3042 .multiselect-container button.multiselect-option {
3043 + display: block;
3387 3044 width: 100%;
3388 3045 text-align: left;
3046 + background: none;
3389 3047 border: none;
3390 - margin-bottom: 4px;
3048 + padding: 5px 0 5px 15px;
3391 3049 }
3392 3050
3393 3051 .multiselect-container button.multiselect-option label {
3394 3052 margin-left: 5px;
@@ -3436,13 +3094,8 @@
3436 3094 width: 100%;
3437 3095 height: auto;
3438 3096 }
3439 3097
3440 -.frm_form_builder .frm_time_wrap .frm_time_sep {
3441 - vertical-align: sub;
3442 - vertical-align: -webkit-baseline-middle;
3443 -}
3444 -
3445 3098 .frm_form_builder input[type=range]::-webkit-slider-runnable-track {
3446 3099 background-color: var(--blue-border);
3447 3100 }
3448 3101
@@ -3469,9 +3122,9 @@
3469 3122 .frm-fake-field {
3470 3123 display: block;
3471 3124 height: 25px;
3472 3125 background-color: var(--light-blue);
3473 - border: 1px solid var(--grey-300);
3126 + border: 1px solid var(--grey-border);
3474 3127 margin: 10px 0;
3475 3128 border-radius: var(--small-radius);
3476 3129 }
3477 3130
@@ -3477,15 +3130,15 @@
3477 3130
3478 3131 .frm-embed-message {
3479 3132 position: absolute;
3480 3133 background: #fff;
3481 - border: 1px solid var(--grey-300);
3482 - color: var(--grey-700);
3483 - padding: var(--gap-md);
3484 - font-size: var(--text-lg);
3134 + border: 1px solid var(--grey-border);
3135 + color: var(--dark-grey);
3136 + padding: 37px 0;
3137 + font-size: 18px;
3485 3138 max-width: 200px;
3486 3139 min-width: 50%;
3487 - margin: 0 var(--gap-md);
3140 + margin: 0 25px;
3488 3141 overflow: hidden;
3489 3142 text-overflow: ellipsis;
3490 3143 }
3491 3144
@@ -3492,9 +3145,9 @@
3492 3145 .frm-summary-message {
3493 3146 top: 50%;
3494 3147 left: 50%;
3495 3148 padding: 15px 0;
3496 - font-size: var(--text-md);
3149 + font-size: 16px;
3497 3150 transform: translate(-50%, -50%);
3498 3151 }
3499 3152
3500 3153 .frm-summary-learn-more {
@@ -3503,9 +3156,8 @@
3503 3156
3504 3157 .frm-single-settings .frm-embed-message {
3505 3158 width: 100%;
3506 3159 position: static;
3507 - border-radius: var(--small-radius);
3508 3160 }
3509 3161
3510 3162 #new_fields input[type=text],
3511 3163 #new_fields input[type=number],
@@ -3542,8 +3194,19 @@
3542 3194 width: 16px;
3543 3195 padding: 0;
3544 3196 }
3545 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 +
3546 3209 .frm_wrap .frm-number-range + .frm_last input,
3547 3210 .frm_wrap .frm-number-range input {
3548 3211 text-align: center;
3549 3212 font-weight: 600;
@@ -3550,9 +3213,9 @@
3550 3213 }
3551 3214
3552 3215 .frm_wrap .frm-number-range input[type=number],
3553 3216 .frm_wrap .frm-number-range input[type=text] {
3554 - color: var(--primary-700);
3217 + color: var(--primary-hover);
3555 3218 }
3556 3219
3557 3220 .frm-range-min {
3558 3221 position: relative;
@@ -3562,25 +3225,24 @@
3562 3225 content: '';
3563 3226 height: 3px;
3564 3227 width: 10px;
3565 3228 border-radius: 30%;
3566 - background: var(--primary-700);
3229 + background: var(--primary-hover);
3567 3230 position: absolute;
3568 3231 top: 17px;
3569 3232 right: -28%;
3570 3233 }
3571 3234
3572 -.frm_grid_container > p,
3573 3235 .frm_grid_container > p.frm_form_field,
3574 3236 .frm_grid_container > div.frm_form_field,
3575 3237 #new_fields .frm_grid_container > p {
3576 - margin-top: 8px;
3577 - margin-bottom: 8px;
3238 + margin-top: 7px;
3239 + margin-bottom: 7px;
3578 3240 margin-right: 0;
3579 3241 }
3580 3242
3581 3243 #new_fields div.frm_grid_container > .frm_primary_label {
3582 - margin-top: 8px;
3244 + margin-top: 7px;
3583 3245 }
3584 3246
3585 3247 #new_fields .frm_primary_label + p,
3586 3248 #new_fields .frm_primary_label + .frm6 + .frm6,
@@ -3614,9 +3276,9 @@
3614 3276 }
3615 3277
3616 3278 .frm_form_builder .frm_radio label,
3617 3279 .frm_form_builder .frm_checkbox label {
3618 - font-size: var(--text-sm);
3280 + font-size: 14px;
3619 3281 }
3620 3282
3621 3283 /* Start copied front-end CSS */
3622 3284 .horizontal_radio .frm_radio,
@@ -3654,64 +3316,22 @@
3654 3316
3655 3317 .frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3656 3318 .frm_wrap .with_frm_style .frm_radio input[type=radio],
3657 3319 .frm_wrap input[type=checkbox],
3658 -.frm-white-body input[type=checkbox],
3659 3320 .field-group input[type=checkbox],
3660 3321 .frm_scale input[type=radio],
3661 3322 .frm_radio input[type=radio],
3662 3323 .frm_checkbox input[type=checkbox] {
3663 - border: 1px solid var(--grey-300);
3324 + border: 1px solid var(--grey-border);
3664 3325 box-shadow: none;
3665 3326 -webkit-appearance: none;
3666 3327 }
3667 3328
3668 -
3669 -.frm_wrap .with_frm_style .frm_checkbox input[type=checkbox],
3670 -.frm_wrap input[type=checkbox],
3671 -.frm-white-body input[type=checkbox],
3672 -.field-group input[type=checkbox],
3673 -.frm_checkbox input[type=checkbox] {
3674 - border-radius: 4px;
3675 -}
3676 -
3677 -.frm-white-body input[type="checkbox"]:checked,
3678 -.frm_wrap input[type="checkbox"]:checked {
3679 - background-color: var(--primary-500);
3680 - border-color: var(--primary-500) !important;
3681 -}
3682 -
3683 -.frm-white-body input[type="checkbox"]:checked:focus,
3684 -.frm_wrap input[type="checkbox"]:checked:focus {
3685 - border-color: var(--primary-500);
3686 -}
3687 -
3688 -.frm-white-body input[type="checkbox"]:checked::before,
3689 -.frm_wrap input[type="checkbox"]:checked::before {
3690 - content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.2%202c.2.3.2.7%200%201l-5%205c-.3.2-.6.2-.9%200L.8 5.3a.6.6%200%200%201%20.9-.8l2%202%204.6-4.5c.3-.3.6-.3.9%200Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
3691 - height: 12px;
3692 - width: 12px;
3693 - margin: 1px;
3694 -}
3695 -
3696 3329 .frm_radio input[type="radio"],
3697 3330 .frm_checkbox input[type="checkbox"] {
3698 3331 margin-right: 5px;
3699 3332 }
3700 3333
3701 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio] {
3702 - margin: 5px 0;
3703 - width: 18px;
3704 - position: relative; /* override Bootstrap */
3705 -}
3706 -
3707 -.frm_single_entry_page .with_frm_style .frm_radio input[type=radio]:before {
3708 - position: relative !important;
3709 - left: calc(50% - 6px);
3710 - top: calc(50% - 6px);
3711 - margin: 0 !important;
3712 -}
3713 -
3714 3334 .frm_inner_field_container {
3715 3335 margin-bottom: 10px;
3716 3336 }
3717 3337
@@ -3737,22 +3357,8 @@
3737 3357 li.ui-state-default.selected > .frm_inner_field_container > label {
3738 3358 max-width: calc(100% - 100px);
3739 3359 }
3740 3360
3741 -.frm-drag-fade {
3742 - background-color: var(--lightest-grey) !important;
3743 - border-radius: 4px;
3744 -}
3745 -
3746 -.frm-drag-fade * {
3747 - opacity: 0;
3748 -}
3749 -
3750 -.frm-dragging .divider_section_only,
3751 -.frm-dragging .frm_field_box {
3752 - pointer-events: none;
3753 -}
3754 -
3755 3361 .frm_form_settings #op-popup, /* 1Password */
3756 3362 .frm_form_settings com-1password-op-button,
3757 3363 .frm_conf_below .frm_conf_field_container .frm_primary_label,
3758 3364 .frm_conf_inline .frm_inner_field_container .frm-show-click a,
@@ -3887,15 +3493,15 @@
3887 3493 animation: spin 2s linear infinite;
3888 3494 }
3889 3495
3890 3496 .frm-wait:before {
3891 - border-bottom-color: var(--primary-700);
3892 - border-right-color: var(--primary-700);
3497 + border-bottom-color: var(--primary-hover);
3498 + border-right-color: var(--primary-hover);
3893 3499 }
3894 3500
3895 3501 .frm_loading_button.frm-button-secondary:before {
3896 - border-bottom-color: var(--primary-500);
3897 - border-right-color: var(--primary-500);
3502 + border-bottom-color: var(--primary-color);
3503 + border-right-color: var(--primary-color);
3898 3504 }
3899 3505
3900 3506 input[type=submit]:focus {
3901 3507 outline: none !important;
@@ -3919,9 +3525,9 @@
3919 3525 #editorcontainer #dyncontent {
3920 3526 margin: 0;
3921 3527 width: 100%;
3922 3528 padding: 6px;
3923 - line-height: var(--leading);
3529 + line-height: 1.5;
3924 3530 border: 0 none;
3925 3531 outline: none;
3926 3532 -moz-box-sizing: border-box;
3927 3533 -webkit-box-sizing: border-box;
@@ -3967,9 +3573,9 @@
3967 3573 font-size: 12px;
3968 3574 }
3969 3575
3970 3576 .frm_border_bottom {
3971 - border-bottom: 1px solid var(--grey-300);
3577 + border-bottom: 1px solid var(--grey-border);
3972 3578 margin-bottom: 10px;
3973 3579 padding-bottom: 10px;
3974 3580 }
3975 3581
@@ -3980,8 +3586,9 @@
3980 3586 .frm_posttax_opt_list .frm_border_bottom input {
3981 3587 margin-right: 1px;
3982 3588 }
3983 3589
3590 +.frm_logic_row,
3984 3591 .frm_add_remove div.frm_form_field {
3985 3592 padding-bottom: 5px;
3986 3593 }
3987 3594
@@ -4039,23 +3646,17 @@
4039 3646 font-size: inherit;
4040 3647 }
4041 3648
4042 3649 #frm-options-panel {
4043 - padding: 0 var(--gap-sm);
4044 - color: var(--grey-900);
3650 + padding: 0 15px;
3651 + color: var(--darkest-grey);
4045 3652 }
4046 3653
4047 -.frm-right-panel a.frm_add_logic_link,
4048 3654 #frm-options-panel h3 {
4049 3655 padding: 15px 0;
4050 3656 margin-top: -2px;
4051 3657 }
4052 3658
4053 -#frm_style_sidebar h3,
4054 -#frm_view_editor_left.frm-right-panel .accordion-section-title {
4055 - padding: 15px 0;
4056 -}
4057 -
4058 3659 .frm_field_key {
4059 3660 background-color: #F7F7F7;
4060 3661 }
4061 3662
@@ -4089,12 +3690,8 @@
4089 3690 .frm-alt-table tr:nth-child(even) {
4090 3691 background-color: var(--sidebar-color);
4091 3692 }
4092 3693
4093 -.frm-alt-table h3 {
4094 - margin-bottom: 0;
4095 -}
4096 -
4097 3694 .form-field .frm_cb_button {
4098 3695 height: 22px;
4099 3696 line-height: 20px;
4100 3697 margin-bottom: 10px;
@@ -4199,9 +3796,9 @@
4199 3796 li.sortable-placeholder {
4200 3797 border: none;
4201 3798 margin: 0;
4202 3799 visibility: visible !important;
4203 - box-shadow: 2px -10px 0 2px var(--primary-500);
3800 + box-shadow: 2px -10px 0 1px var(--primary-color);
4204 3801 }
4205 3802
4206 3803 #frm_form_editor_container > ul > .frm_single_option.ui-sortable-placeholder,
4207 3804 #frm_form_editor_container > ul > li.sortable-placeholder {
@@ -4212,8 +3809,9 @@
4212 3809 #frm_form_editor_container > ul > li > ul {
4213 3810 position: relative;
4214 3811 }
4215 3812
3813 +#frm_form_editor_container > ul > li > ul > .frm_single_option.ui-sortable-placeholder,
4216 3814 #frm_form_editor_container > ul > li > ul > li.sortable-placeholder,
4217 3815 #frm_form_editor_container ul.start_divider > li > ul > li.sortable-placeholder {
4218 3816 position: absolute;
4219 3817 top: 20px;
@@ -4220,29 +3818,38 @@
4220 3818 bottom: 0;
4221 3819 }
4222 3820
4223 3821 .edit_field_type_divider + li.sortable-placeholder {
4224 - box-shadow: 2px 5px 0 2px var(--primary-500);
3822 + box-shadow: 2px 5px 0 1px var(--primary-color);
4225 3823 }
4226 3824
4227 3825 .start_divider li.sortable-placeholder {
4228 - box-shadow: 2px -5px 0 2px var(--primary-500);
3826 + box-shadow: 2px -5px 0 1px var(--primary-color);
4229 3827 }
4230 3828
4231 -.frm-is-collapsed + .sortable-placeholder {
4232 - 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);
4233 3831 }
4234 3832
4235 -.frm_single_option.ui-sortable-placeholder {
4236 - 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);
4237 3835 }
4238 3836
4239 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,
4240 3840 .frm-show-click,
4241 3841 li.ui-state-default.edit_field_type_divider .frm-show-click {
4242 3842 display: none;
4243 3843 }
4244 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 +
4245 3852 .frm_form_field.ui-sortable-helper .frm-field-action-icons,
4246 3853 .frm_form_field.ui-sortable-helper .frm_form_fields,
4247 3854 .frm_form_field.ui-sortable-helper .frm_description,
4248 3855 .frm_form_field.ui-sortable-helper .description {
@@ -4285,8 +3892,16 @@
4285 3892 #new_fields .frm_single_option input[type=text] {
4286 3893 width: calc(100% - 73px);
4287 3894 }
4288 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 +
4289 3904 .frm-right-panel .frm_single_option a.frm_remove_tag,
4290 3905 .frm_single_option a {
4291 3906 padding-left: 7px;
4292 3907 }
@@ -4344,10 +3959,10 @@
4344 3959 /* Image options for Radio and Checkbox */
4345 3960
4346 3961 .frm_image_options .frm_image_option_container {
4347 3962 --field-border-width: 1px;
4348 - --border-color: var(--grey-300);
4349 - --border-color-active: var(--primary-500);
3963 + --border-color: var(--grey-border);
3964 + --border-color-active: var(--primary-color);
4350 3965 --border-radius: var(--small-radius);
4351 3966 }
4352 3967
4353 3968 .frm_image_option_container svg {
@@ -4401,10 +4016,10 @@
4401 4016 height: 75px;
4402 4017 object-fit: cover;
4403 4018 }
4404 4019
4405 -.frm_list_entry_page img {
4406 - max-width: 100%;
4020 +.frm_list_entry_page .frm_file_link img {
4021 + max-width: 75px;
4407 4022 height: auto;
4408 4023 }
4409 4024
4410 4025 .frm_image_option_container .frm_empty_url {
@@ -4448,13 +4063,13 @@
4448 4063 margin-top: 17px;
4449 4064 }
4450 4065
4451 4066 .frm_image_data {
4452 - margin-left: var(--gap-xs);
4067 + margin-left: 10px;
4453 4068 display: flex;
4454 4069 flex-direction: column;
4455 - font-size: var(--text-sm);
4456 - justify-content: space-around;
4070 + font-size: 14px;
4071 + line-height: 17px;
4457 4072 }
4458 4073
4459 4074 .frm_image_styling_frame {
4460 4075 display: flex;
@@ -4478,9 +4093,10 @@
4478 4093 max-width: 54px;
4479 4094 }
4480 4095
4481 4096 .frm_image_preview_title{
4482 - color: var(--grey-500);
4097 + margin-top: 6px;
4098 + color: rgba(40, 47, 54, 0.65);
4483 4099 overflow: hidden;
4484 4100 white-space: nowrap;
4485 4101 text-overflow: ellipsis;
4486 4102 }
@@ -4486,9 +4102,9 @@
4486 4102 }
4487 4103
4488 4104 .frm_wrap .frm_choose_image_box {
4489 4105 cursor: pointer;
4490 - color: var(--grey-700);
4106 + color: var(--dark-grey);
4491 4107 background-color: #F2F2F2;
4492 4108 margin-left: 24px;
4493 4109 text-align: center;
4494 4110 width: 100%;
@@ -4497,11 +4113,13 @@
4497 4113 .frm_wrap .frm_choose_image_box:hover {
4498 4114 background: #fff;
4499 4115 }
4500 4116
4117 +a.frm_remove_image_option .frmsvg,
4501 4118 a.frm_remove_image_option,
4502 4119 .frm_remove_image_option {
4503 - color: var(--grey-400);
4120 + margin-top: 9px;
4121 + color: rgba(40, 47, 54, 0.4);
4504 4122 cursor: pointer;
4505 4123 }
4506 4124
4507 4125 a.frm_remove_image_option:hover .frmsvg,
@@ -4511,10 +4129,17 @@
4511 4129 }
4512 4130
4513 4131 /* Form settings */
4514 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 +
4515 4140 .frm-form-setting-tabs {
4516 - margin-top: var(--gap-sm) !important;
4141 + margin-top: 20px !important;
4517 4142 }
4518 4143
4519 4144 .frm-right-panel > .postbox {
4520 4145 background-color: transparent;
@@ -4525,44 +4150,40 @@
4525 4150
4526 4151 .frm-right-panel .postbox.frm_with_icons .inside,
4527 4152 .frm-right-panel .postbox .inside,
4528 4153 .frm-right-panel .inside {
4529 - font-size: var(--text-md);
4154 + font-size: 16px;
4530 4155 padding: 15px 20px 20px;
4531 - color: var(--grey-700);
4156 + color: var(--dark-grey);
4532 4157 }
4533 4158
4534 4159 .frm-right-panel .misc-pub-section {
4535 - padding: var(--gap-xs) 0;
4160 + padding: 10px 0;
4161 + line-height: 1.4em;
4536 4162 position: relative;
4537 4163 }
4538 4164
4539 4165 .frm-right-panel .inside a,
4540 4166 .frm-form-setting-tabs a {
4541 - font-size: var(--text-md);
4542 - color: var(--grey-700);
4543 - padding: var(--gap-sm);
4167 + font-size: 16px;
4168 + color: var(--dark-grey);
4169 + padding: 15px 15px 15px 20px;
4544 4170 display: block;
4545 4171 }
4546 4172
4547 -.frm-form-setting-tabs a {
4548 - color: var(--grey-900);
4549 - padding: var(--gap-sm) var(--gap-md);
4550 -}
4551 -
4552 4173 .frm-right-panel .inside a {
4553 4174 padding: 0;
4554 - color: var(--primary-500);
4175 + color: var(--primary-color);
4555 4176 display: inline-block;
4556 4177 }
4557 4178
4558 4179 .frm-right-panel .inside a:hover {
4559 - color: var(--primary-700);
4180 + color: var(--primary-hover);
4560 4181 }
4561 4182
4562 4183 .frm-form-setting-tabs a:hover {
4563 4184 background: var(--sidebar-hover);
4564 - color: var(--grey-900);
4185 + color: var(--dark-grey);
4565 4186 }
4566 4187
4567 4188 .frm-right-panel .inside i,
4568 4189 .frm-right-panel .inside .frmsvg,
@@ -4571,20 +4192,16 @@
4571 4192 margin: 0 5px;
4572 4193 display: inline-block;
4573 4194 width: 20px;
4574 4195 height: 20px;
4575 - color: var(--grey-500);
4196 + color: var(--grey);
4576 4197 }
4577 4198
4578 -.frm-form-setting-tabs a .frmsvg {
4579 - margin: 0;
4580 -}
4581 -
4582 4199 .frm-right-panel .inside a:hover i,
4583 4200 .frm-right-panel .inside a:hover .frmsvg,
4584 4201 .frm-form-setting-tabs a:hover .frmsvg,
4585 4202 .frm-form-setting-tabs a:hover span {
4586 - color: var(--grey-700);
4203 + color: var(--dark-grey);
4587 4204 }
4588 4205
4589 4206 .frm_settings_form .tabs-panel {
4590 4207 padding: 0 25px;
@@ -4598,9 +4215,9 @@
4598 4215
4599 4216 #frm_adv_info .tabs-panel {
4600 4217 min-height: 0 !important;
4601 4218 overflow-x: hidden;
4602 - padding: 0;
4219 + padding: 0 20px;
4603 4220 border: none;
4604 4221 background: transparent;
4605 4222 }
4606 4223
@@ -4609,130 +4226,48 @@
4609 4226 }
4610 4227
4611 4228 .frm_posttax_opt_list,
4612 4229 .frm_submit_logic_rows {
4613 - border: 1px solid var(--grey-300);
4614 - padding: var(--gap-md);
4230 + border: 1px solid var(--grey-border);
4231 + padding: 25px;
4615 4232 border-radius: var(--small-radius);
4616 - margin: 5px 0 5px var(--gap-md);
4233 + margin: 5px 0 5px 25px;
4617 4234 }
4618 4235
4619 -.frm_submit_logic_rows .frm_grid_container > p.frm_form_field {
4620 - margin: 0;
4621 -}
4622 -
4623 -/* Color picker CSS */
4624 -.frm-right-panel .wp-picker-open + .wp-picker-input-wrap {
4236 +/* Admin toggle */
4237 +.frm_toggle_off,
4238 +.frm_toggle_on {
4239 + display: none;
4240 + color: #fff;
4241 + z-index: 999;
4625 4242 position: absolute;
4626 - margin-left: calc( ( 100% - 35px ) * -1 );
4627 - margin-top: 1px;
4628 - width: calc( 100% - 36px );
4243 + font-size: 10px;
4244 + line-height: 20px;
4245 + left: 6px;
4629 4246 }
4630 4247
4631 -.frm-right-panel .wp-picker-container input[type="text"].wp-color-picker {
4632 - border: none;
4633 - padding: 5px 8px;
4634 - font-family: inherit;
4635 - color: var(--grey-700);
4636 - font-size: var(--text-md);
4637 - width: 100%;
4638 - line-height: var(--leading);
4639 -}
4640 -
4641 -.frm-right-panel .wp-picker-input-wrap .wp-picker-clear {
4642 - display: none !important;
4643 -}
4644 -
4645 -.frm-right-panel .wp-picker-holder {
4646 - position: absolute;
4647 - z-index: 999;
4648 -}
4649 -
4650 -.frm-right-panel .wp-picker-input-wrap label {
4651 - margin-bottom: 0;
4652 -}
4653 -
4654 -.frm-right-panel .wp-picker-container .wp-color-result.button {
4655 - width: 100%;
4656 - overflow: hidden;
4657 - margin: 0 !important;
4658 - height: var(--h-md) !important;
4659 - padding: 0 0 0 var(--gap-lg) !important;
4660 - border-radius: var(--small-radius);
4661 - border-color: var(--grey-300);
4662 -}
4663 -
4664 -.frm-right-panel .wp-color-result-text {
4665 - line-height: var(--leading) !important;
4666 - font-size: var(--text-md);
4667 - background: #fff !important;
4668 - color: var(--grey-900);
4669 - padding: 5px 8px;
4670 - border-color: var(--grey-300);
4671 - text-align: left;
4672 -}
4673 -
4674 -.frm-right-panel .color-alpha {
4675 - width: var(--gap-lg) !important;
4676 -}
4677 -
4678 -.frm_grid_container .wp-picker-container {
4679 - width: 100%;
4680 - position: relative;
4681 -}
4682 -
4683 -.wp-picker-container button.wp-color-result {
4684 - border: 1px solid var(--grey-300) !important;
4685 -}
4686 -
4687 -.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker {
4688 - max-width: 100%;
4689 - position: relative;
4690 -}
4691 -
4692 -.frm_end .wp-picker-holder {
4693 - margin-left: -145px;
4694 -}
4695 -
4696 -.frm_end.frm6 .wp-picker-holder {
4697 - margin-left: -86px;
4698 -}
4699 -/* End of color picker CSS */
4700 -
4701 -/*
4702 -These are the styles for the "Enable Formidable styling" toggle in the visual styler.
4703 -To use this element, you can call the FrmHtmlHelper::toggle function.
4704 -*/
4705 -.frm_toggle_opt {
4706 - padding: 0;
4707 - white-space: normal;
4248 +.frm_toggle_off {
4708 4249 display: inline;
4709 - vertical-align: middle;
4710 - font-weight: normal;
4250 + left: auto;
4251 + right: 5px;
4252 + color: var(--dark-grey);
4711 4253 }
4712 4254
4713 -.frm_on_label,
4714 -.frm_off_label {
4715 - color: #444444;
4716 -}
4717 -
4718 4255 .frm_toggle {
4719 4256 position: relative;
4720 4257 display: inline-block;
4721 - width: 40px;
4722 - height: var(--h-xs);
4258 + width: 45px;
4259 + height: 20px;
4723 4260 vertical-align: middle;
4261 + margin: 2px;
4724 4262 }
4725 4263
4726 -.frm_toggle_block {
4727 - display: inline-flex;
4728 - gap: var(--gap-sm);
4729 - align-items: center;
4264 +label > span.frm_toggle {
4265 + margin-right: 15px;
4730 4266 }
4731 4267
4732 -.frm_toggle input, /* Reverse compatibility */
4733 -.frm_toggle_block input {
4734 - display:none !important;
4268 +.frm_toggle input {
4269 + display: none !important;
4735 4270 }
4736 4271
4737 4272 .frm_toggle_slider {
4738 4273 position: absolute;
@@ -4740,44 +4275,26 @@
4740 4275 top: 0;
4741 4276 left: 0;
4742 4277 right: 0;
4743 4278 bottom: 0;
4744 - background-color: var(--grey-border);
4745 4279 transition: .4s;
4746 4280 border-radius: 30px;
4281 + background-color: #fff;
4282 + box-shadow: 0 0 0 2px var(--grey);
4747 4283 }
4748 4284
4749 4285 .frm_toggle_slider:before {
4750 4286 border-radius: 50%;
4751 4287 position: absolute;
4752 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 20 20%27><path d=%27M16.8 4.5l-1.3-1.3L10 8.6 4.5 3.2 3.2 4.5 8.6 10l-5.4 5.5 1.3 1.3 5.5-5.4 5.5 5.4 1.3-1.3-5.4-5.5 5.4-5.5z%27 fill=%27%2398A2B3%27/%3E</svg>");
4753 - height: 22px;
4754 - width: 22px;
4755 - padding: 0 5.5px;
4756 - left: 1px;
4757 - bottom: 1px;
4758 - background-color: white;
4759 - transition: .4s;
4760 - box-sizing: border-box;
4761 - box-shadow: var(--box-shadow-md);
4762 - font-size: 21px;
4763 - line-height: 18px;
4288 + content: "";
4289 + height: 16px;
4290 + width: 16px;
4291 + left: 2px;
4292 + top: 2px;
4293 + transition: .3s;
4294 + background-color: var(--grey);
4764 4295 }
4765 4296
4766 -input:checked + .frm_toggle .frm_toggle_slider {
4767 - background-color: var(--primary-500);
4768 -}
4769 -
4770 -input:focus + .frm_toggle .frm_toggle_slider {
4771 - box-shadow: var(--box-shadow-md);
4772 -}
4773 -
4774 -input:checked + .frm_toggle .frm_toggle_slider:before {
4775 - padding: 0 6px;
4776 - transform: translateX(16px);
4777 - content: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 height=%2711px%27 width=%2711px%27 viewBox=%270 0 10 10%27><path d=%27M9.2 2c.2.3.2.7 0 1l-5 5c-.3.2-.6.2-.9 0L.8 5.3a.6.6 0 0 1 .9-.8l2 2 4.6-4.5c.3-.3.6-.3.9 0Z%27 fill=%27%234199FD%27/%3E</svg>");
4778 -}
4779 -
4780 4297 input[disabled] + .frm_toggle_slider {
4781 4298 pointer-events: none;
4782 4299 cursor: text;
4783 4300 opacity: .5;
@@ -4782,53 +4299,16 @@
4782 4299 cursor: text;
4783 4300 opacity: .5;
4784 4301 }
4785 4302
4786 -.frm_toggle_opt ~ .frm_toggle .frm_toggle_slider:before {
4787 - content: '' !important; /* Don't show x/check if off label included or on builder page */
4788 -}
4789 -
4790 -.rtl .frm_toggle_opt {
4791 - padding: 0 8px;
4792 -}
4793 -
4794 -.rtl .frm_toggle_slider:before {
4795 - left: 17px;
4796 -}
4797 -
4798 -.rtl input:checked + .frm_toggle .frm_toggle_slider:before {
4799 - transform: none!important;
4800 - left: 1px;
4801 -}
4802 -
4803 -/* Deprecated admin toggle */
4804 -.frm_toggle_off,
4805 -.frm_toggle_on {
4806 - display: none;
4807 - color: #fff;
4808 - z-index: 999;
4809 - position: absolute;
4810 - font-size: 10px;
4811 - line-height: 20px;
4812 - left: 6px;
4813 -}
4814 -
4815 -.frm_toggle_off {
4816 - display: inline;
4817 - left: auto;
4818 - right: 5px;
4819 - color: var(--dark-grey);
4820 -}
4821 -
4822 4303 .frm_toggle_long {
4823 - width: 80% !important;
4304 + width: 80%;
4824 4305 height: 28px;
4825 - display: inline-block !important;
4826 4306 }
4827 4307
4828 4308 .frm_toggle_long .frm_toggle_slider {
4829 - background: var(--primary-700);
4830 - box-shadow: 0 0 0 2px var(--primary-700);
4309 + background: var(--primary-hover);
4310 + box-shadow: 0 0 0 2px var(--primary-hover);
4831 4311 }
4832 4312
4833 4313 .frm_toggle_long .frm_toggle_off,
4834 4314 .frm_toggle_long .frm_toggle_on {
@@ -4853,11 +4333,20 @@
4853 4333 border-radius: var(--border-radius) 0 0 var(--border-radius);
4854 4334 height: 100%;
4855 4335 background-color: #fff;
4856 4336 color: var(--primary-color);
4857 - content: '' !important;
4858 4337 }
4859 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 +
4860 4349 .frm_toggle_long input:checked + .frm_toggle_slider:before {
4861 4350 transform: translateX(101%);
4862 4351 border-radius: 0 var(--border-radius) var(--border-radius) 0;
4863 4352 }
@@ -4872,9 +4361,9 @@
4872 4361
4873 4362 .frm_toggle_long .frm_toggle_on,
4874 4363 .frm_toggle_long input:checked + .frm_toggle_slider + .frm_toggle_on + .frm_toggle_off {
4875 4364 display: inline;
4876 - color: var(--primary-500);
4365 + color: var(--primary-color);
4877 4366 font-weight: normal;
4878 4367 }
4879 4368
4880 4369 .frm_toggle_long .frm_toggle_off,
@@ -4882,9 +4371,11 @@
4882 4371 color: #fff;
4883 4372 font-weight: bold;
4884 4373 }
4885 4374
4886 -/* End toggle styling */
4375 +input:focus + .frm_toggle_slider {
4376 + box-shadow: 0 0 1px #008ec2;
4377 +}
4887 4378
4888 4379 /* Global Settings */
4889 4380
4890 4381 .tabs-panel {
@@ -4902,59 +4393,21 @@
4902 4393 margin-right: 20px !important;
4903 4394 display: inline-block !important;
4904 4395 }
4905 4396
4906 -#frm_stripe_icon {
4907 - border-radius: 5px;
4908 -}
4909 -
4910 -#captcha_settings .frm_primary_label {
4911 - margin-top: var(--gap-sm);
4912 -}
4913 -
4914 -.frm-long-icon-buttons {
4915 - display: flex;
4916 - gap: var(--gap-md);
4917 -}
4918 -
4919 -.frm-long-icon-buttons > label {
4920 - border: 1px solid var(--grey-300);
4921 - color: var(--grey-700);
4922 - border-radius: var(--small-radius);
4923 - display: flex;
4924 - padding: var(--gap-sm);
4925 - gap: var(--gap-sm);
4926 - justify-content: center;
4927 - align-items: center;
4928 - width: calc( 33% - var(--gap-sm) );
4929 - box-sizing: border-box;
4930 -}
4931 -
4932 -.frm-long-icon-buttons > label:hover {
4933 - color: var(--primary-500);
4934 -}
4935 -
4936 -.frm-long-icon-buttons input[type=radio] {
4937 - display: none;
4938 -}
4939 -
4940 -.frm-long-icon-buttons input[type=radio]:checked + label {
4941 - border-color: var(--primary-500);
4942 - box-shadow: 0 0 0 1px var(--primary-color);
4943 -}
4944 -
4945 -.frm-long-icon-buttons label > svg {
4946 - height: 21px;
4947 -}
4948 -
4949 4397 .frm-example-icon .frmsvg,
4950 4398 .frm-example-icon i {
4951 4399 height: 20px;
4952 4400 width: 20px;
4953 4401 font-size: 20px;
4954 - color: var(--grey-700);
4402 + color: var(--dark-grey);
4955 4403 }
4956 4404
4405 +.edd_frm_license_row {
4406 + clear: both;
4407 + line-height: 2em;
4408 +}
4409 +
4957 4410 .frm_license_msg {
4958 4411 margin-top: 0;
4959 4412 }
4960 4413
@@ -4981,14 +4434,23 @@
4981 4434
4982 4435 .frm_no_items {
4983 4436 margin: 0 auto 50px;
4984 4437 text-align: center;
4985 - color: var(--grey-700);
4438 + color: var(--dark-grey);
4986 4439 max-width: 500px;
4987 4440 }
4988 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 +
4989 4451 .frm-subscribe {
4990 - margin: var(--gap-lg) 0;
4452 + margin: 30px 0;
4991 4453 }
4992 4454
4993 4455 /* Inbox */
4994 4456
@@ -4998,16 +4460,16 @@
4998 4460
4999 4461 .frm_inbox_card {
5000 4462 display: grid;
5001 4463 grid-template-columns: 72px 1fr;
5002 - grid-gap: var(--gap-xs);
5003 - border-bottom: 1px solid var(--grey-300);
5004 - padding: var(--gap-md);
4464 + grid-gap: 15px;
4465 + border-bottom: 1px solid var(--grey-border);
4466 + padding: 25px;
5005 4467 }
5006 4468
5007 4469 .frm_inbox_card_icon {
5008 4470 grid-row: span 3 / span 3;
5009 - padding-top: var(--gap-xs);
4471 + padding-top: 20px;
5010 4472 text-align: center
5011 4473 }
5012 4474
5013 4475 .frm_inbox_card_icon svg {
@@ -5026,8 +4488,11 @@
5026 4488 border: none;
5027 4489 text-transform: none;
5028 4490 margin: 0;
5029 4491 padding: 0;
4492 + font-weight: 600;
4493 + color: var(--medium-grey);
4494 + font-size: 16px;
5030 4495 }
5031 4496
5032 4497 .frm_inbox_date {
5033 4498 text-align: right;
@@ -5055,8 +4520,37 @@
5055 4520 margin-left: 2px;
5056 4521 vertical-align: text-bottom;
5057 4522 }
5058 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 +
5059 4553 /* Import/Export */
5060 4554 .csv_opts #frm_csv_col_sep {
5061 4555 width: 45px;
5062 4556 }
@@ -5107,9 +4601,9 @@
5107 4601 padding: 0;
5108 4602 }
5109 4603
5110 4604 .frm-feature-banner {
5111 - background: var(--grey-700);
4605 + background: var(--dark-grey);
5112 4606 color: #fff;
5113 4607 border-radius: var(--small-radius);
5114 4608 padding: 20px;
5115 4609 margin: 10px 0;
@@ -5115,9 +4609,9 @@
5115 4609 margin: 10px 0;
5116 4610 }
5117 4611
5118 4612 .frm-feature-banner p {
5119 - font-size: var(--text-sm);
4613 + font-size: 14px;
5120 4614 }
5121 4615
5122 4616 .frm-feature-banner .dismiss {
5123 4617 margin-top: -10px;
@@ -5152,31 +4646,29 @@
5152 4646 /*Form Settings Tab*/
5153 4647
5154 4648 h2.frm-h2,
5155 4649 .frm_form_settings h2 {
5156 - border-bottom: 1px solid var(--grey-300);
5157 - color: var(--grey-900);
5158 - 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;
5159 4654 padding: 9px 0 5px;
5160 4655 margin: 0;
5161 4656 }
5162 4657
5163 4658 .frm_settings_form h3,
5164 -.frm_form_settings h3,
5165 -.frm_form_settings span.frm_add_logic_link {
5166 - font-size: var(--text-md);
5167 - border-top: 1px solid var(--grey-300);
5168 - padding-top: var(--gap-sm);
5169 - margin: var(--gap-sm) 0;
4659 +.frm_form_settings h3 {
4660 + font-size: 16px;
4661 + border-top: 1px solid var(--grey-border);
4662 + padding-top: 10px;
5170 4663 font-weight: normal;
5171 4664 text-transform: uppercase;
5172 4665 color: var(--medium-grey);
5173 - display: block;
5174 4666 }
5175 4667
5176 4668 .frm_form_settings .howto {
5177 - color: var(--grey-500);
5178 - font-size: var(--text-sm);
4669 + color: var(--medium-grey);
4670 + font-size: 15px;
5179 4671 margin-top: 8px;
5180 4672 }
5181 4673
5182 4674 .frm_form_settings .advanced_settings .form-table {
@@ -5191,10 +4683,18 @@
5191 4683 width: 95%;
5192 4684 }
5193 4685
5194 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;
5195 4692 padding: 3px 0;
4693 + font-size: 15px;
5196 4694 max-height: 310px;
4695 + overflow-y: auto;
4696 + overflow-x: hidden;
5197 4697 }
5198 4698
5199 4699 .frm_wrap .ui-widget {
5200 4700 font-family: inherit;
@@ -5200,15 +4700,26 @@
5200 4700 font-family: inherit;
5201 4701 }
5202 4702
5203 4703 .frm_wrap .ui-autocomplete li {
5204 - padding: 2px 4px;
4704 + padding: 2px 10px;
5205 4705 background: none;
5206 - color: var(--grey-700);
4706 + color: var(--dark-grey);
5207 4707 border: none;
5208 4708 font-weight: normal;
5209 4709 }
5210 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 +
5211 4722 .frm_wrap .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
5212 4723 border: none;
5213 4724 font-weight: inherit;
5214 4725 }
@@ -5247,9 +4758,9 @@
5247 4758 #frm-insert-fields-box ul.frm_code_list li.clear.frm_block {
5248 4759 height: 10px;
5249 4760 }
5250 4761
5251 -#frm_adv_info .frm_noallow {
4762 +.frm_page_container #frm_adv_info .frm_noallow {
5252 4763 display: none;
5253 4764 }
5254 4765
5255 4766 #frm_adv_info #frm-conditionals .frm_noallow {
@@ -5284,9 +4795,9 @@
5284 4795 #frm_notification_settings .widget-top .widget-action,
5285 4796 #frm_form_editor_container .widget-top .widget-action {
5286 4797 border: 0;
5287 4798 margin: 0;
5288 - padding: 8px;
4799 + padding: 10px;
5289 4800 background: 0 0;
5290 4801 cursor: pointer;
5291 4802 outline: 0;
5292 4803 }
@@ -5291,12 +4802,12 @@
5291 4802 outline: 0;
5292 4803 }
5293 4804
5294 4805 #frm_email_addon_menu {
5295 - border: 1px solid var(--grey-300);
5296 - padding: var(--gap-sm);
4806 + border: 1px solid var(--grey-border);
4807 + padding: 15px;
5297 4808 border-radius: 4px;
5298 - margin: var(--gap-md) 0 var(--gap-sm);
4809 + margin: 25px 0 15px;
5299 4810 }
5300 4811
5301 4812 #frm_email_addon_menu .frm-search {
5302 4813 float: right;
@@ -5307,12 +4818,8 @@
5307 4818 clear: none;
5308 4819 padding-top: 7px;
5309 4820 }
5310 4821
5311 -.frm_email_settings .widget .widget-top {
5312 - background-color: var(--sidebar-color);
5313 -}
5314 -
5315 4822 .frm_email_settings .widget .widget-top,
5316 4823 .frm_email_settings .widget .widget-top h3 {
5317 4824 cursor: pointer !important;
5318 4825 }
@@ -5317,17 +4824,23 @@
5317 4824 cursor: pointer !important;
5318 4825 }
5319 4826
5320 4827 .frm_email_settings .widget {
5321 - margin-bottom: var(--gap-sm);
4828 + margin-bottom: 15px;
4829 + line-height: 1.4em;
4830 + padding: 0;
5322 4831 }
5323 4832
4833 +.frm_email_settings .widget:last-of-type {
4834 + margin-bottom: 20px;
4835 +}
4836 +
5324 4837 .frm_form_action_settings .widget-top {
5325 4838 box-shadow: none;
5326 - border-color: var(--grey-300);
5327 - border-radius: var(--small-radius);
4839 + border-color: var(--grey-border);
4840 + border-radius: 4px;
5328 4841 background: var(--lightest-grey);
5329 - color: var(--grey-700);
4842 + color: var(--dark-grey);
5330 4843 }
5331 4844
5332 4845 .frm_form_action_settings:hover .widget-top {
5333 4846 border-color: var(--grey);
@@ -5339,9 +4852,9 @@
5339 4852 border-bottom: none;
5340 4853 }
5341 4854
5342 4855 .frm_form_action_settings.open:hover .widget-top {
5343 - border-color: var(--grey-300);
4856 + border-color: var(--grey-border);
5344 4857 }
5345 4858
5346 4859 .frm_form_action_settings > .widget-inside {
5347 4860 display: none;
@@ -5353,9 +4866,9 @@
5353 4866
5354 4867 .frm_form_action_settings .widget-inside {
5355 4868 min-height: 25px;
5356 4869 padding: 15px;
5357 - border-color: var(--grey-300);
4870 + border-color: var(--grey-border);
5358 4871 border-bottom-left-radius: 4px;
5359 4872 border-bottom-right-radius: 4px;
5360 4873 }
5361 4874
@@ -5363,14 +4876,14 @@
5363 4876 .frm_form_action_settings .widget-title h3 {
5364 4877 display: inline-block;
5365 4878 border-bottom: none;
5366 4879 padding: 10px 10px 5px;
5367 - font-size: var(--text-md);
4880 + font-size: 16px;
5368 4881 font-weight: 500;
5369 4882 }
5370 4883
5371 4884 #frm_email_addon_menu h3 {
5372 - margin: 0 0 var(--gap-sm);
4885 + margin: 0 0 15px;
5373 4886 clear: both;
5374 4887 }
5375 4888
5376 4889 .frm_single_api_settings p > label {
@@ -5406,9 +4919,9 @@
5406 4919 }
5407 4920
5408 4921 #frm-hide-groups,
5409 4922 #frm-show-groups {
5410 - font-size: var(--text-md);
4923 + font-size: 16px;
5411 4924 float: right;
5412 4925 }
5413 4926
5414 4927 .frm_actions_list a:active, .frm_actions_list a:focus {
@@ -5415,16 +4928,16 @@
5415 4928 outline: none;
5416 4929 }
5417 4930
5418 4931 .frm_actions_list a {
5419 - font-size: var(--text-sm);
5420 - color: var(--grey-700);
4932 + font-size: 14px;
4933 + color: var(--dark-grey);
5421 4934 word-break: break-word;
5422 4935 }
5423 4936
5424 4937 .frm_actions_list span.frm-outer-circle {
5425 4938 /* 50px total with 30px content */
5426 - background-color: var(--grey-100);
4939 + background-color: var(--sidebar-color);
5427 4940 padding: 10px;
5428 4941 text-align: center;
5429 4942 border-radius: 50%;
5430 4943 display: block;
@@ -5430,13 +4943,12 @@
5430 4943 display: block;
5431 4944 width: 30px;
5432 4945 height: 30px;
5433 4946 margin: 0 auto 15px;
5434 - line-height: 1;
5435 4947 }
5436 4948
5437 4949 .frm_email_settings .widget-title h4 {
5438 - color: var(--grey-700);
4950 + color: var(--dark-grey);
5439 4951 }
5440 4952
5441 4953 .frm_disabled_action .widget-title h4 {
5442 4954 color: var(--grey);
@@ -5452,17 +4964,16 @@
5452 4964 }
5453 4965
5454 4966 span.frm-inner-circle,
5455 4967 .frm_email_settings .widget-title .frm_form_action_icon {
5456 - background-color: var(--grey-400);
4968 + background-color: var(--grey-border);
5457 4969 border-radius: 50%;
5458 4970 display: inline-block;
5459 4971 text-align: center;
5460 - line-height: 1;
5461 4972 }
5462 4973
5463 4974 span.frm-inner-circle {
5464 - background-color: var(--primary-700);
4975 + background-color: var(--primary-hover);
5465 4976 height: 22px;
5466 4977 width: 22px;
5467 4978 padding: 4px;
5468 4979 color: #fff;
@@ -5475,9 +4986,9 @@
5475 4986 .frm_email_settings .widget-title .frm_form_action_icon {
5476 4987 height: 15px;
5477 4988 width: 15px;
5478 4989 padding: 5px;
5479 - color: #fff;
4990 + color: var(--lightest-grey);
5480 4991 vertical-align: middle;
5481 4992 }
5482 4993
5483 4994 .frm_actions_list .frmsvg,
@@ -5498,9 +5009,9 @@
5498 5009 }
5499 5010
5500 5011 span.frm-inner-circle.frm-inverse {
5501 5012 background-color: transparent;
5502 - color: var(--primary-700);
5013 + color: var(--primary-hover);
5503 5014 padding: 0;
5504 5015 height: 30px;
5505 5016 width: 100%;
5506 5017 }
@@ -5506,9 +5017,9 @@
5506 5017 }
5507 5018
5508 5019 .frm_actions_list span.frm-inverse i,
5509 5020 .frm_actions_list span.frm-inverse .frmsvg {
5510 - color: var(--primary-700);
5021 + color: var(--primary-hover);
5511 5022 height: 30px;
5512 5023 width: 30px;
5513 5024 font-size: 30px;
5514 5025 padding: 0;
@@ -5520,9 +5031,9 @@
5520 5031 font-size: 30px;
5521 5032 }
5522 5033
5523 5034 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse {
5524 - background: #fff;
5035 + background: transparent;
5525 5036 padding: 0;
5526 5037 height: 24px;
5527 5038 width: 24px;
5528 5039 }
@@ -5528,17 +5039,18 @@
5528 5039 }
5529 5040
5530 5041 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse .frmsvg,
5531 5042 .frm_email_settings .widget-title .frm_form_action_icon.frm-inverse i:before {
5532 - color: var(--grey-400);
5043 + color: var(--grey-border);
5533 5044 height: 24px;
5534 5045 width: 24px;
5535 5046 font-size: 24px;
5047 + line-height: 1em;
5536 5048 }
5537 5049
5538 5050 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse .frmsvg,
5539 5051 .frm_email_settings .widget-title:hover .frm_form_action_icon.frm-inverse i:before {
5540 - color: var(--grey-500);
5052 + color: var(--grey);
5541 5053 }
5542 5054
5543 5055 .frm_email_icons {
5544 5056 padding: 10px 0 5px 6px;
@@ -5549,8 +5061,9 @@
5549 5061 margin-left: 8px;
5550 5062 color: var(--grey);
5551 5063 opacity: 0;
5552 5064 transition: all .2s ease;
5065 + vertical-align: middle;
5553 5066 }
5554 5067
5555 5068 .frm_email_icons a .frmsvg {
5556 5069 color: var(--grey);
@@ -5569,8 +5082,16 @@
5569 5082 .frm_actions_list .frm_inactive_action i {
5570 5083 opacity: .4;
5571 5084 }
5572 5085
5086 +.frm-no-margin {
5087 + margin: 0;
5088 +}
5089 +
5090 +.frm-no-border {
5091 + border: none !important;
5092 +}
5093 +
5573 5094 table td, .form-table tr td {
5574 5095 vertical-align: top;
5575 5096 }
5576 5097
@@ -5597,12 +5118,8 @@
5597 5118 #frm_notification_settings .frm_form_action_settings td p {
5598 5119 padding: 7px 0;
5599 5120 }
5600 5121
5601 -#permissions_settings_settings .frm_grid_container {
5602 - align-items: center;
5603 -}
5604 -
5605 5122 #frm_notification_settings .form-table > tbody > tr > th {
5606 5123 width: 150px;
5607 5124 font-weight: normal;
5608 5125 padding-right: 10px;
@@ -5624,8 +5141,9 @@
5624 5141 #frm_notification_settings .frm_left_label {
5625 5142 /* For add-ons that haven't been updated for 4.0 */
5626 5143 float: none;
5627 5144 width: auto !important;
5145 + line-height: 1;
5628 5146 }
5629 5147
5630 5148 .frm-fields .frm_autoresponder_rows select {
5631 5149 width: auto;
@@ -5638,17 +5156,16 @@
5638 5156 width: 100%;
5639 5157 }
5640 5158
5641 5159 #frm_notification_settings .frm_email_buttons {
5642 - padding: var(--gap-2xs);
5160 + padding: 7px;
5643 5161 background: var(--light-blue);
5644 - color: var(--primary-700);
5645 - border-radius: var(--small-radius);
5162 + color: var(--primary-hover);
5163 + border-radius: 4px;
5646 5164 border-color: var(--blue-border);
5647 - line-height: 1;
5165 + line-height: 1em;
5648 5166 height: auto;
5649 - min-height: 12px;
5650 - font-size: var(--text-xs);
5167 + font-size: 12px;
5651 5168 box-shadow: none;
5652 5169 }
5653 5170
5654 5171 .frm_reply_to_container,
@@ -5653,31 +5170,34 @@
5653 5170
5654 5171 .frm_reply_to_container,
5655 5172 .frm_bcc_cc_container {
5656 5173 float: right;
5657 - margin: -4px 0 0;
5174 + margin: -8px 0 0;
5658 5175 z-index: 1;
5659 5176 position: relative;
5660 5177 }
5661 5178
5662 5179 .frm_email_row .frm_cancel1_icon:before {
5180 + line-height: 1;
5663 5181 vertical-align: bottom;
5664 5182 }
5665 5183
5184 +.frm_action_id {
5185 + padding-top: 10px;
5186 +}
5187 +
5666 5188 .frm_logic_field_opts {
5667 5189 max-width: 35%;
5668 5190 }
5669 5191
5670 5192 .frm-inline-select,
5671 -p.frm-inline-select,
5672 5193 #frm_submit_logic_row,
5673 5194 .frm_logic_rows .frm-collapse-me {
5674 - line-height: var(--h-md) !important;
5195 + line-height: 30px;
5675 5196 }
5676 5197
5677 -.frm_logic_row {
5678 - padding: var(--gap-xs) 0 0;
5679 - align-items: center;
5198 +.frm_logic_row:first-of-type {
5199 + padding-top: 8px;
5680 5200 }
5681 5201
5682 5202 .frm-single-settings .frm_logic_row > select {
5683 5203 max-width: 32.5% !important;
@@ -5714,8 +5234,13 @@
5714 5234 margin-bottom: 0;
5715 5235 padding: 0;
5716 5236 }
5717 5237
5238 +.frm_form_settings input[type="text"] {
5239 + line-height: normal;
5240 + height: auto;
5241 +}
5242 +
5718 5243 #poststuff .widgets-holder-wrap .frm_form_action_settings .widget-inside {
5719 5244 padding-bottom: 0;
5720 5245 }
5721 5246
@@ -5724,9 +5249,9 @@
5724 5249 padding-right: 15px;
5725 5250 }
5726 5251
5727 5252 #form_global_settings h3 {
5728 - font-size: var(--text-sm);
5253 + font-size: 14px;
5729 5254 margin-top: 25px;
5730 5255 }
5731 5256
5732 5257 #form_global_settings .tabs-panel + h3 {
@@ -5741,9 +5266,9 @@
5741 5266 border-top: 1px solid #eee;
5742 5267 border-bottom: none;
5743 5268 margin: 15px -15px 0;
5744 5269 padding: 8px 15px;
5745 - font-size: var(--text-sm);
5270 + font-size: 14px;
5746 5271 }
5747 5272
5748 5273 #poststuff .frm_form_settings h3.frm_first_h3,
5749 5274 #poststuff h3.frm_first_h3 {
@@ -5754,8 +5279,20 @@
5754 5279 h3.frm_add_logic_link {
5755 5280 margin-bottom: 0 !important;
5756 5281 }
5757 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 +
5758 5295 a.frm_add_logic_link.frm_hidden {
5759 5296 display: none;
5760 5297 }
5761 5298
@@ -5775,9 +5312,9 @@
5775 5312 bottom: 0;
5776 5313 }
5777 5314
5778 5315 .frm_right_addon input {
5779 - padding-right: var(--gap-lg);
5316 + padding-right: 30px;
5780 5317 }
5781 5318
5782 5319 .frm_icon_font {
5783 5320 color: #A0A0A0;
@@ -5783,12 +5320,8 @@
5783 5320 color: #A0A0A0;
5784 5321 color: var(--grey);
5785 5322 }
5786 5323
5787 -.frm-fields label .frm_icon_font {
5788 - font-size: inherit;
5789 -}
5790 -
5791 5324 .misc-pub-revisions.frm_icon_font,
5792 5325 .misc-pub-revisions.frm_icon_font:hover {
5793 5326 color: inherit;
5794 5327 }
@@ -5875,10 +5408,10 @@
5875 5408 position: relative;
5876 5409 top: 2px;
5877 5410 }
5878 5411
5879 -.frm-field-action-icons > a {
5880 - font-size: var(--text-md);
5412 +.frm-field-action-icons a {
5413 + font-size: 16px;
5881 5414 width: 17px;
5882 5415 }
5883 5416
5884 5417 .frm-field-action-icons a:hover {
@@ -5888,26 +5421,21 @@
5888 5421 .frm-field-action-icons .dropdown {
5889 5422 display: inline-block;
5890 5423 }
5891 5424
5892 -.frm-field-action-icons > a .frmsvg {
5893 - color: var(--grey-500) !important;
5425 +.frm-field-action-icons a .frmsvg {
5426 + color: #9EA9B8 !important;
5894 5427 font-size: 17px;
5895 5428 width: 17px;
5896 5429 height: 17px;
5897 5430 }
5898 5431
5899 -.frm-field-action-icons > a .frmsvg,
5900 -.frm-field-action-icons > div > a .frmsvg {
5901 - vertical-align: baseline;
5902 -}
5903 -
5904 5432 .edit_field_type_end_divider .frm-field-action-icons {
5905 5433 display: none !important;
5906 5434 }
5907 5435
5908 5436 .frm-move {
5909 - cursor: grab;
5437 + cursor: move;
5910 5438 }
5911 5439
5912 5440 span.howto {
5913 5441 display: inline;
@@ -5953,9 +5481,9 @@
5953 5481 margin-bottom: 10px;
5954 5482 }
5955 5483
5956 5484 .frm_no_entries_form .frm_no_entries_text {
5957 - line-height: var(--leading);
5485 + line-height: 200%;
5958 5486 }
5959 5487
5960 5488 #form_entries_page #the-list .no-items {
5961 5489 height: 240px; /* Equals to the max height of search dropdown */
@@ -5984,10 +5512,9 @@
5984 5512 }
5985 5513
5986 5514 .frm_wrap .google-visualization-table-tr-head,
5987 5515 .frm_wrap .google-visualization-table-tr-head th {
5988 - white-space: pre-wrap;
5989 - font-size: var(--text-md);
5516 + font-size: 16px;
5990 5517 font-weight: 400 !important;
5991 5518 text-align: left;
5992 5519 }
5993 5520
@@ -6003,8 +5530,12 @@
6003 5530 width: 20%;
6004 5531 min-width: 175px;
6005 5532 }
6006 5533
5534 +#form_reports_page h2 {
5535 + margin-top: 2em !important;
5536 +}
5537 +
6007 5538 /* Views Page */
6008 5539 #form_views_page img.frm_no_views {
6009 5540 max-width: 100%;
6010 5541 }
@@ -6114,9 +5645,9 @@
6114 5645 }
6115 5646
6116 5647 #frm-show-fields {
6117 5648 min-height: 350px;
6118 - padding: 0 0 35px;
5649 + padding: 10px 0 35px;
6119 5650 margin: 0;
6120 5651 position: relative;
6121 5652 }
6122 5653
@@ -6162,10 +5693,11 @@
6162 5693 .frm-field-group-hover-target #frm_field_group_controls {
6163 5694 visibility: visible;
6164 5695 }
6165 5696
6166 -#frm_field_group_controls .dropdown-item a span {
6167 - 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);
6168 5700 }
6169 5701
6170 5702 #frm_field_group_controls .dropdown-item a:hover {
6171 5703 text-decoration: none;
@@ -6281,16 +5813,15 @@
6281 5813 }
6282 5814
6283 5815 .frm-page-collapsed .frm_clone_icon,
6284 5816 .frm-page-collapsed .frm_delete_field,
6285 -.frm-page-collapsed .frm_clone_field,
6286 -.frm-section-collapsed .frm_clone_icon {
5817 +.frm-section-collapsed .frm_clone_icon,
5818 +.frm-section-collapsed .frm_delete_field {
6287 5819 opacity: .5;
6288 5820 cursor: not-allowed;
6289 5821 }
6290 5822
6291 -/* Hide the Duplicate summary option because we are missing the logic that also adds a new page */
6292 -.edit_field_type_summary .frm_more_options_li:nth-child(2) {
5823 +.edit_field_type_summary .frm_clone_field {
6293 5824 display: none !important;
6294 5825 }
6295 5826
6296 5827 .frm_no_section_fields:not(.frm_block) + ul.start_divider {
@@ -6322,9 +5853,9 @@
6322 5853 content: '';
6323 5854 display: block;
6324 5855 padding: 2px 0;
6325 5856 line-height: 1px;
6326 - border-top: 2px solid var(--grey-300);
5857 + border-top: 2px solid var(--grey-border);
6327 5858 top: -2px;
6328 5859 position: absolute;
6329 5860 width: 100%;
6330 5861 transition: .5s border-color ease-in-out;
@@ -6336,9 +5867,8 @@
6336 5867 }
6337 5868
6338 5869 .frm-section-collapsed .divider_section_only:hover:after,
6339 5870 li.selected.frm-section-collapsed .divider_section_only:before,
6340 -li.selected.frm-section-collapsed .divider_section_only:after,
6341 5871 .divider_section_only:hover:before,
6342 5872 li.selected .divider_section_only:before {
6343 5873 border-color: transparent;
6344 5874 }
@@ -6346,10 +5876,10 @@
6346 5876 .frm_sorting li.ui-state-default.edit_field_type_divider {
6347 5877 overflow: visible;
6348 5878 position: relative;
6349 5879 padding: 0 0 0 20px;
6350 - margin: 25px 0 0 -5px;
6351 - border-left: 1px solid var(--primary-700);
5880 + margin: 25px 0 0 -20px;
5881 + border-left: 1px solid var(--primary-hover);
6352 5882 transition: border 0.7s ease-out;
6353 5883 }
6354 5884
6355 5885 .frm-section-collapsed {
@@ -6357,9 +5887,9 @@
6357 5887 }
6358 5888
6359 5889 .frm_sorting li.edit_field_type_end_divider,
6360 5890 .frm_sorting .no_repeat_section li.ui-state-default.edit_field_type_end_divider:hover {
6361 - margin: 0 0 var(--gap-sm);
5891 + margin: 0 0 15px;
6362 5892 }
6363 5893
6364 5894 .frm-first-page .frm_prev_page {
6365 5895 display: none;
@@ -6364,19 +5894,22 @@
6364 5894 .frm-first-page .frm_prev_page {
6365 5895 display: none;
6366 5896 }
6367 5897
6368 -#frm_builder_page .frm_remove_form_row.frm_button,
6369 -#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 {
6370 5902 border-radius: var(--small-radius);
6371 5903 border: 1px solid var(--blue-border);
5904 + color: var(--primary-color);
6372 5905 }
6373 5906
6374 -#frm_builder_page .frm_remove_form_row .frmsvg,
6375 -#frm_builder_page .frm_remove_form_row i:before,
5907 +.frm_wrap .frm_remove_form_row .frmsvg,
5908 +.frm_remove_form_row i:before,
6376 5909 .frm_wrap .frm_add_form_row .frmsvg,
6377 5910 .frm_add_form_row i:before {
6378 - color: var(--primary-700);
5911 + color: var(--primary-hover);
6379 5912 }
6380 5913
6381 5914 .frm-preview-buttons .frm_button_submit {
6382 5915 margin: 0 5px;
@@ -6382,10 +5915,10 @@
6382 5915 margin: 0 5px;
6383 5916 }
6384 5917
6385 5918 .frm-page-break {
6386 - border-top: 1px dashed var(--primary-700);
6387 - margin-top: var(--gap-lg);
5919 + border-top: 1px dashed var(--primary-hover);
5920 + margin-top: 30px;
6388 5921 position: relative;
6389 5922 }
6390 5923
6391 5924 .edit_field_type_divider:before,
@@ -6398,9 +5931,9 @@
6398 5931 width: 4px;
6399 5932 height: 4px;
6400 5933 background-color: #fff;
6401 5934 border-radius: 50%;
6402 - border: 1px solid var(--primary-700);
5935 + border: 1px solid var(--primary-hover);
6403 5936 text-rendering: auto;
6404 5937 -webkit-font-smoothing: antialiased;
6405 5938 }
6406 5939
@@ -6422,12 +5955,13 @@
6422 5955 width: 20px;
6423 5956 height: 20px;
6424 5957 left: -11px;
6425 5958 top: 0;
6426 - background: var(--primary-700);
5959 + background: var(--primary-hover);
6427 5960 text-align: center;
6428 5961 color: #fff;
6429 5962 font-size: 13px;
5963 + line-height: 22px;
6430 5964 }
6431 5965
6432 5966 .edit_field_type_divider:before{
6433 5967 font-family: 's11-fp';
@@ -6448,20 +5982,20 @@
6448 5982
6449 5983
6450 5984 .frm_sorting li.edit_field_type_divider:hover,
6451 5985 .frm_sorting li.edit_field_type_divider.selected {
6452 - border-left-color: var(--primary-500);
5986 + border-left-color: var(--primary-color);
6453 5987 }
6454 5988
6455 5989 .edit_field_type_divider.selected:before,
6456 5990 .edit_field_type_divider:hover:before {
6457 - border-color: var(--primary-500);
6458 - background: var(--primary-500);
5991 + border-color: var(--primary-color);
5992 + background: var(--primary-color);
6459 5993 }
6460 5994
6461 5995 .edit_field_type_divider.selected:after,
6462 5996 .edit_field_type_divider:hover:after {
6463 - border-color: var(--primary-500);
5997 + border-color: var(--primary-color);
6464 5998 }
6465 5999
6466 6000 .frm-section-collapsed:after {
6467 6001 border-color: transparent !important;
@@ -6469,11 +6003,19 @@
6469 6003 }
6470 6004
6471 6005 .frm-page-break .frm-collapse-page.button {
6472 6006 margin-left: 46%;
6473 - 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);
6474 6011 }
6475 6012
6013 +#frm-fake-page .frm-collapse-page.button {
6014 + border-color: var(--grey) !important;
6015 + color: var(--grey);
6016 +}
6017 +
6476 6018 #frm-fake-page.frm-page-collapsed {
6477 6019 margin-bottom: 0;
6478 6020 }
6479 6021
@@ -6479,15 +6021,15 @@
6479 6021
6480 6022 .frm-page-collapsed {
6481 6023 position: relative;
6482 6024 overflow: visible !important;
6483 - margin-bottom: var(--gap-lg);
6025 + margin-bottom: 30px;
6484 6026 }
6485 6027
6486 6028 .frm-page-collapsed:after {
6487 6029 content: '';
6488 6030 display: block;
6489 - border: 1px dashed var(--grey-300);
6031 + border: 1px dashed var(--grey-border);
6490 6032 border-left: none;
6491 6033 border-right: none;
6492 6034 height: 6px;
6493 6035 position: absolute;
@@ -6494,40 +6036,31 @@
6494 6036 width: calc( 100% - 10px );
6495 6037 bottom: -15px;
6496 6038 }
6497 6039
6498 -.frm-collapse-page .frmsvg,
6499 6040 .frm-collapse-page .frm_arrowdown6_icon {
6500 - width: var(--text-sm);
6501 - height: var(--text-sm);
6502 - font-size: var(--text-sm);
6041 + width: 16px;
6503 6042 text-align: center;
6504 6043 margin-left: 2px;
6505 - color: currentColor;
6044 + color: var(--primary-hover);
6506 6045 }
6507 6046
6508 6047 #frm-fake-page .frm_arrowdown6_icon {
6509 - color: currentColor;
6048 + color: var(--grey);
6510 6049 }
6511 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 +
6512 6057 .frm-collapsed i:before,
6058 +.frm-section-collapsed .frm_arrowdown6_icon:before,
6513 6059 .frm-page-collapsed .frm_arrowdown6_icon:before {
6514 6060 content: '\e913';
6515 6061 }
6516 6062
6517 -.frm-collapse-section svg {
6518 - fill: var(--primary-color);
6519 - transition: transform 0.2s ease-out, fill 0.2s ease-out;
6520 -}
6521 -
6522 -.frm-collapse-section:hover svg {
6523 - fill: var(--primary-700);
6524 -}
6525 -
6526 -.frm-section-collapsed .frm-collapse-section svg {
6527 - transform: rotate(-90deg);
6528 -}
6529 -
6530 6063 .open .widget-top .frm_arrow_right_icon:before {
6531 6064 content: '\e62a';
6532 6065 }
6533 6066
@@ -6569,14 +6102,14 @@
6569 6102 .frm_no_section_fields {
6570 6103 text-align: center;
6571 6104 position: absolute;
6572 6105 color: var(--medium-grey);
6573 - font-size: var(--text-md);
6106 + font-size: 16px;
6574 6107 box-sizing: border-box;
6575 - border: 1px dashed var(--grey-300);
6108 + border: 1px dashed var(--grey-border);
6576 6109 }
6577 6110
6578 -.ui-droppable-active ~ .frm_no_fields {
6111 +.drop-me + .frm_no_fields {
6579 6112 border-style: solid;
6580 6113 }
6581 6114
6582 6115 .frm_no_section_fields {
@@ -6608,9 +6141,9 @@
6608 6141 display: block;
6609 6142 }
6610 6143
6611 6144 .frm-large-plus.frmsvg {
6612 - color: var(--primary-700);
6145 + color: var(--primary-hover);
6613 6146 height: 45px;
6614 6147 width: 45px;
6615 6148 }
6616 6149
@@ -6730,12 +6263,10 @@
6730 6263
6731 6264 .frm-category-tabs > li a,
6732 6265 .frm-category-tabs > li a:active {
6733 6266 outline: none;
6267 + -webkit-box-shadow: none;
6734 6268 box-shadow: none;
6735 - display: flex;
6736 - gap: var(--gap-xs);
6737 - align-items: center;
6738 6269 }
6739 6270
6740 6271 .frm-category-tabs > li.active .frmsvg,
6741 6272 .frm-category-tabs > li.active i,
@@ -6740,15 +6271,15 @@
6740 6271 .frm-category-tabs > li.active .frmsvg,
6741 6272 .frm-category-tabs > li.active i,
6742 6273 .frm-category-tabs > li.active span,
6743 6274 .frm-category-tabs > li.active a {
6744 - color: var(--primary-500);
6275 + color: var(--primary-color);
6745 6276 }
6746 6277
6747 6278 .frm_wrap .manage-menus {
6748 6279 margin-top: 0;
6749 6280 border: none;
6750 - border-bottom: 1px solid var(--grey-300);
6281 + border-bottom: 1px solid var(--grey-border);
6751 6282 background: var(--lightest-grey);
6752 6283 }
6753 6284
6754 6285 .general_settings .postbox .manage-menus {
@@ -6784,9 +6315,9 @@
6784 6315 padding-top: 10px;
6785 6316 }
6786 6317
6787 6318 .frm-right-panel .ui-state-default, #postbox-container-1 .ui-state-default {
6788 - color: var(--grey-900);
6319 + color: var(--darkest-grey);
6789 6320 }
6790 6321
6791 6322 .no_repeat_section .frm_sorting > li.ui-state-default.edit_field_type_end_divider:hover {
6792 6323 box-shadow: none;
@@ -6802,14 +6333,14 @@
6802 6333 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only,
6803 6334 .frm_update_msg,
6804 6335 .frm_sorting li.ui-state-default.frm_not_divider.selected,
6805 6336 .frm_sorting li.ui-state-default.selected.edit_field_type_divider .divider_section_only {
6806 - border-color: var(--primary-500);
6337 + border-color: var(--primary-color);
6807 6338 transition: .5s border-color ease-in-out;
6808 6339 }
6809 6340
6810 6341 .frm_sorting li.ui-state-default.frm_not_divider.selected {
6811 - box-shadow: 0 0 1px 0 var(--primary-500);
6342 + box-shadow: 0 0 1px 0 var(--primary-color);
6812 6343 }
6813 6344
6814 6345 .frm_sorting li.ui-state-default {
6815 6346 transition: .7s box-shadow ease-in-out, .7s height linear;
@@ -6832,9 +6363,9 @@
6832 6363 font-weight: bold;
6833 6364 border: 1px solid #DFDFDF;
6834 6365 background-color: #EEEEEE;
6835 6366 padding: 3px 5px 2px;
6836 - font-size: var(--text-md);
6367 + font-size: 16px;
6837 6368 line-height: 20px;
6838 6369 }
6839 6370
6840 6371 .frm_update_msg {
@@ -6872,13 +6403,8 @@
6872 6403 .widefat .column-shortcode {
6873 6404 width: 9em;
6874 6405 }
6875 6406
6876 -.toplevel_page_formidable .column-shortcode div {
6877 - display: flex;
6878 - gap: var(--gap-xs);
6879 -}
6880 -
6881 6407 .widefat .column-entries, .widefat .column-link {
6882 6408 width: 10%;
6883 6409 text-align: center;
6884 6410 }
@@ -6886,22 +6412,23 @@
6886 6412 .widefat .column-form_key, .widefat .column-created_at {
6887 6413 width: 10%;
6888 6414 }
6889 6415
6890 -.frm-white-body .search-box,
6416 +.post-type-frm_display .search-box,
6891 6417 .frm_wrap .frm-search {
6892 6418 float: right;
6893 - margin: 0;
6419 + margin-bottom: 15px;
6894 6420 clear: right;
6895 6421 }
6896 6422
6897 -.frm-white-body .search-box,
6423 +#form_entries_page form .frm-search {
6424 + margin-top: 15px;
6425 +}
6426 +
6898 6427 .frm-search {
6899 - min-width: 32%;
6428 + width: 32%;
6429 + float: right;
6900 6430 position: relative;
6901 - display: flex;
6902 - gap: var(--gap-sm);
6903 - align-items: center;
6904 6431 }
6905 6432
6906 6433 .frm-inline-modal .frm-search,
6907 6434 #frm_adv_info .frm-search {
@@ -6907,9 +6434,9 @@
6907 6434 #frm_adv_info .frm-search {
6908 6435 float: none;
6909 6436 width: 100%;
6910 6437 clear: both;
6911 - margin: var(--gap-xs) 0;
6438 + margin: 5px 0 10px;
6912 6439 }
6913 6440
6914 6441 .frm-button-group a {
6915 6442 margin: 0 7px !important;
@@ -6926,9 +6453,9 @@
6926 6453
6927 6454 i.frm-show-box,
6928 6455 i.frm-show-inline-modal,
6929 6456 .frm-with-left-icon i,
6930 -.frm-with-right-icon i:not([class*=mce-]),
6457 +.frm-with-right-icon i,
6931 6458 .frmsvg.frm-show-box,
6932 6459 .frmsvg.frm-show-inline-modal,
6933 6460 .frm-with-left-icon .frmsvg,
6934 6461 .frm-with-right-icon .frmsvg,
@@ -6934,17 +6461,18 @@
6934 6461 .frm-with-right-icon .frmsvg,
6935 6462 .frm-search > .frmsvg,
6936 6463 .frm-search span:not(.multiselect-selected-text):not(.multiselect-native-select) {
6937 6464 position: absolute;
6938 - padding: 0 14px;
6465 + padding: 7px 10px;
6939 6466 pointer-events: none;
6940 6467 left: 0;
6941 - color: var(--grey-400);
6942 - font-size: var(--text-xs);
6468 + color: var(--grey);
6469 + opacity: .5;
6470 + font-size: 18px;
6943 6471 }
6944 6472
6945 6473 .frm-with-right-icon .frmsvg,
6946 -.frm-with-right-icon i:not([class*=mce-]) {
6474 +.frm-with-right-icon i {
6947 6475 right: 0;
6948 6476 top: -3px;
6949 6477 left: auto;
6950 6478 padding: 0 10px 0 5px;
@@ -6949,35 +6477,20 @@
6949 6477 left: auto;
6950 6478 padding: 0 10px 0 5px;
6951 6479 }
6952 6480
6953 -.frm_form_settings .frm-with-right-icon .frmsvg {
6954 - top: 0;
6955 -}
6956 -
6957 -.frm_form_settings .wp-editor-container .frm-with-right-icon .frmsvg {
6958 - top: auto;
6959 - bottom: 0;
6960 -}
6961 -
6962 -.frm_form_settings .frm_has_textarea .frm-with-right-icon .frmsvg {
6963 - top: auto;
6964 - bottom: 6px;
6965 -}
6966 -
6967 6481 .frmsvg.frm-show-box,
6968 6482 .frmsvg.frm-show-inline-modal,
6969 6483 i.frm-show-box,
6970 6484 i.frm-show-inline-modal {
6971 - color: var(--primary-500);
6485 + color: var(--primary-color);
6972 6486 pointer-events: initial;
6973 6487 cursor: pointer;
6974 6488 z-index: 1;
6975 6489 opacity: 1;
6490 + right: 2px;
6976 6491 top: auto;
6977 - margin: calc( ( 36px - 18px ) / 2 ); /* input height - svg / 2 */
6978 - margin-bottom: 0;
6979 - padding: 0;
6492 + padding: 7px 10px;
6980 6493 }
6981 6494
6982 6495 .frm-open .frmsvg.frm-show-inline-modal,
6983 6496 .frm-open i.frm-show-inline-modal {
@@ -7000,9 +6513,9 @@
7000 6513
7001 6514 .frm_wrap .frm-with-right-icon textarea,
7002 6515 .frm_wrap .frm-with-right-icon input,
7003 6516 .frm_wrap .frm-with-right-icon input[type=text] {
7004 - padding-right: var(--gap-md);
6517 + padding-right: 35px;
7005 6518 }
7006 6519
7007 6520 #frm-show-fields .frm-with-left-icon .frmsvg,
7008 6521 #frm-show-fields .frm-with-left-icon i {
@@ -7008,29 +6521,43 @@
7008 6521 #frm-show-fields .frm-with-left-icon i {
7009 6522 padding-top: 10px;
7010 6523 }
7011 6524
6525 +.frm-search input.frm-search-input,
7012 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 +
7013 6537 .frm-search .dropdown-toggle,
7014 6538 .frm-search input.frm-search-input {
7015 - border-radius: var(--small-radius);
6539 + border-radius: var(--border-radius);
7016 6540 padding-left: 33px !important;
7017 - border-color: var(--grey-300);
7018 6541 }
7019 6542
7020 -.frm_wrap .frm-search .frm-search-input,
7021 -.frm-modal .frm-search .frm-search-input,
7022 -.frm-white-body .search-box input[name="s"], /* Views search */
7023 -.frm_wrap .frm-search input[name="s"] {
7024 - padding-top: 3px;
7025 - padding-bottom: 3px;
7026 - flex: 1;
7027 - font-size: var(--text-sm);
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;
7028 6549 }
7029 6550
7030 -.frm-search .dropdown-toggle {
6551 +.frm-search .dropdown-toggle,
6552 +.frm-search input.frm-auto-search {
7031 6553 width: 100%;
6554 + border-right-width: 1px;
6555 + border-radius: var(--border-radius) !important;
7032 6556 float: none;
6557 +}
6558 +
6559 +.frm-search .dropdown-toggle {
7033 6560 max-width: 200px;
7034 6561 background: transparent;
7035 6562 padding: 7px;
7036 6563 min-height: 32px;
@@ -7038,18 +6565,22 @@
7038 6565 overflow: hidden;
7039 6566 text-overflow: ellipsis;
7040 6567 }
7041 6568
7042 -span.multiselect-selected-text {
6569 +.frm-search span.multiselect-selected-text {
7043 6570 white-space: nowrap;
7044 - display: inline-block;
7045 - max-width: 90%;
7046 - text-overflow: ellipsis;
7047 - overflow: hidden;
6571 + display: inline-block;
7048 6572 }
7049 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 +
7050 6581 .frm-search #search-submit a {
7051 - color: var(--grey-800);
6582 + color: var(--primary-color);
7052 6583 }
7053 6584
7054 6585 .frm-search #search-submit .caret {
7055 6586 opacity:.7;
@@ -7055,15 +6586,15 @@
7055 6586 opacity:.7;
7056 6587 }
7057 6588
7058 6589 .frm-not-set input {
7059 - color: var(--primary-500) !important;
6590 + color: var(--primary-color) !important;
7060 6591 font-size: 13px;
7061 6592 }
7062 6593
7063 6594 .frm-not-set .frmsvg,
7064 6595 .frm-not-set i {
7065 - color: var(--primary-700);
6596 + color: var(--primary-hover);
7066 6597 opacity: 1;
7067 6598 }
7068 6599
7069 6600 .post-type-frm_display select[name="m"] + #post-query-submit,
@@ -7131,9 +6662,9 @@
7131 6662
7132 6663 .post-type-frm_display #advanced-sortables h2.hndle,
7133 6664 .post-type-frm_display #side-sortables h2.hndle,
7134 6665 .post-type-frm_display #normal-sortables h2.hndle {
7135 - border-bottom: 1px solid var(--grey-300);
6666 + border-bottom: 1px solid var(--grey-border);
7136 6667 margin: 10px 0 0 !important;
7137 6668 padding: 0 25px 8px;
7138 6669 }
7139 6670
@@ -7142,9 +6673,9 @@
7142 6673 padding-top: 10px;
7143 6674 }
7144 6675
7145 6676 .post-type-frm_display #post-body-content {
7146 - margin-top: var(--gap-lg);
6677 + margin-top: 30px;
7147 6678 }
7148 6679
7149 6680 .post-type-frm_display.edit-php #wpbody-content > .wrap {
7150 6681 margin: 0;
@@ -7151,15 +6682,15 @@
7151 6682 }
7152 6683
7153 6684 .post-type-frm_display .postbox .hndle,
7154 6685 .post-type-frm_display .postbox {
7155 - border-color: var(--grey-300);
6686 + border-color: var(--grey-border);
7156 6687 }
7157 6688
7158 6689 .post-type-frm_display #postbox-container-1 .postbox,
7159 6690 .post-type-frm_display #postbox-container-2 .postbox {
7160 6691 border-radius: var(--small-radius);
7161 - border-color: var(--grey-300);
6692 + border-color: var(--grey-border);
7162 6693 box-shadow: none;
7163 6694 }
7164 6695
7165 6696 .post-type-frm_display #side-sortables .postbox {
@@ -7238,9 +6769,9 @@
7238 6769 background-color: transparent;
7239 6770 }
7240 6771
7241 6772 .post-type-frm_display #major-publishing-actions {
7242 - border-color: var(--grey-300);
6773 + border-color: var(--grey-border);
7243 6774 background: var(--sidebar-color);
7244 6775 }
7245 6776
7246 6777 .post-type-frm_display #frm_adv_info {
@@ -7294,9 +6825,9 @@
7294 6825 .settings-lite-cta ul,
7295 6826 .settings-lite-cta p,
7296 6827 .settings-lite-cta {
7297 6828 color: #666;
7298 - font-size: var(--text-md);
6829 + font-size: 16px;
7299 6830 box-shadow: none !important;
7300 6831 }
7301 6832
7302 6833 .frm-info-modal h3,
@@ -7303,8 +6834,14 @@
7303 6834 .settings-lite-cta h3 {
7304 6835 font-size: 17px !important;
7305 6836 }
7306 6837
6838 +.frm_placeholder_block h3 {
6839 + font-size: 22px;
6840 + font-weight: 400;
6841 + color: var(--medium-grey);
6842 +}
6843 +
7307 6844 .frm-green-icons .frmsvg {
7308 6845 color: var(--green);
7309 6846 }
7310 6847
@@ -7310,9 +6847,8 @@
7310 6847
7311 6848 .frm-info-modal .postbox .inside,
7312 6849 .settings-lite-cta .postbox .inside {
7313 6850 padding: 20px 40px;
7314 - margin: 0;
7315 6851 }
7316 6852
7317 6853 .cta-inside a {
7318 6854 color: var(--orange)
@@ -7318,15 +6854,21 @@
7318 6854 color: var(--orange)
7319 6855 }
7320 6856
7321 6857 .info-modal-inside a.frm-standard-link {
7322 - color: var(--primary-500);
6858 + color: var(--primary-color);
7323 6859 }
7324 6860
7325 6861 .info-modal-inside a.frm-standard-link:hover {
7326 - color: var(--primary-700);
6862 + color: var(--primary-hover);
7327 6863 }
7328 6864
6865 +.frm-caution {
6866 + text-transform: uppercase;
6867 + font-weight: bold;
6868 + color: var(--dark-grey);
6869 +}
6870 +
7329 6871 .frm_no_p_margin > p {
7330 6872 margin: 0;
7331 6873 }
7332 6874
@@ -7336,12 +6878,14 @@
7336 6878 font-size: 11px;
7337 6879 overflow: hidden;
7338 6880 }
7339 6881
6882 +.frm_code_list.frm-full-hover {
6883 + margin: 0 -20px;
6884 +}
6885 +
7340 6886 #frm-navbarDrop + .frm_code_list.frm-full-hover {
7341 - margin: var(--gap-xs) 0 0;
7342 - min-width: 300px;
7343 - max-height: calc( ( 40px * 5 ) + 56px );
6887 + margin: 4px 0 0;
7344 6888 }
7345 6889
7346 6890 .frm_code_list.frm-full-hover li {
7347 6891 margin: 0;
@@ -7346,28 +6890,55 @@
7346 6890 .frm_code_list.frm-full-hover li {
7347 6891 margin: 0;
7348 6892 }
7349 6893
7350 -.frm-select-list-item,
7351 -.frm_wrap .ui-autocomplete li > div,
7352 -.multiselect-container button.multiselect-option,
7353 6894 .frm-dropdown-menu > .dropdown-item > a,
7354 -.frm-dropdown-menu > .dropdown-item > a:visited,
7355 -.frm-dropdown-menu > .dropdown-item > a:link, /* Override jQuery UI */
7356 6895 .frm-dropdown-menu .frm_dropdown_li,
7357 6896 .frm_code_list.frm-full-hover a {
7358 - display: flex;
7359 - color: var(--grey-700);
7360 - padding: 5px 10px;
7361 - font-size: var(--text-md);
7362 - gap: var(--gap-xs);
7363 - align-items: center;
6897 + display: block;
6898 + color: var(--dark-grey);
6899 + padding: 3px 25px;
6900 + font-size: 15px;
7364 6901 }
7365 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 +
7366 6935 .frm_code_list.frm-full-hover a span {
6936 + color: var(--grey);
6937 + float: right;
6938 + font-size: 14px;
7367 6939 max-width: 83px;
7368 6940 text-align: right;
7369 - margin-left: auto;
7370 6941 }
7371 6942
7372 6943 .frm_code_list.frm-full-hover a,
7373 6944 .frm_code_list.frm-full-hover a span {
@@ -7375,54 +6946,24 @@
7375 6946 overflow: hidden;
7376 6947 text-overflow: ellipsis;
7377 6948 }
7378 6949
7379 -.frm_code_list.frm-full-hover.frmcenter a {
7380 - display: block;
7381 -}
7382 -
7383 -#frm-layout-classes frm-full-hover a span {
7384 - max-width: 45%;
7385 -}
7386 -
7387 -.frm-select-list-item.active,
7388 -.frm-select-list-item:hover,
7389 -.frm_wrap .ui-autocomplete li div.ui-state-active,
7390 -.frm_wrap .ui-autocomplete li.ui-state-focus,
7391 -.multiselect-container button.multiselect-option.active,
7392 -.multiselect-container button.multiselect-option:hover,
7393 6950 .frm-dropdown-menu > .dropdown-item > a:hover,
7394 6951 .frm_code_list.frm-full-hover a:hover span,
7395 6952 .frm_code_list.frm-full-hover a:hover {
7396 - background: var(--primary-25);
7397 - color: var(--primary-500);
7398 - border-radius: var(--small-radius);
6953 + background: var(--sidebar-color);
6954 + color: var(--primary-color);
7399 6955 }
7400 6956
7401 -.frm-select-list-item .frmsvg,
7402 -.frm-dropdown-menu > .dropdown-item > a .frmsvg {
7403 - opacity: .8;
7404 -}
7405 -
7406 -.frm-select-list-item:hover .frmsvg,
7407 -.frm-dropdown-menu > .dropdown-item > a:hover .frmsvg {
7408 - opacity: 1;
7409 -}
7410 -
7411 6957 .frm-dropdown-menu.frm_code_list > li > a {
7412 6958 padding: 3px 15px;
7413 6959 width: 300px;
7414 6960 }
7415 6961
7416 -#frm_edit_box_content_modal .frm-with-search, /* Temp. Add .frm-dropdown-menu in Views */
7417 -.frm-dropdown-menu .frm-with-search {
7418 - padding: var(--gap-xs) 10px 0;
6962 +.frm-dropdown-menu.frm_code_list .frm-with-search {
6963 + padding: 3px 10px;
7419 6964 }
7420 6965
7421 -.frm-dropdown-menu .subsubsub {
7422 - padding: 0 10px;
7423 -}
7424 -
7425 6966 .frm_grid_container {
7426 6967 overflow: visible;
7427 6968 }
7428 6969
@@ -7438,16 +6979,16 @@
7438 6979 .frm_code_list.frm_grid_container a {
7439 6980 padding: 5px 0;
7440 6981 text-align: center;
7441 6982 background-color: var(--light-blue);
7442 - border: 1px solid var(--primary-500);
7443 - color: var(--primary-500);
6983 + border: 1px solid var(--primary-color);
6984 + color: var(--primary-color);
7444 6985 display: block;
7445 6986 border-radius: var(--small-radius);
7446 6987 }
7447 6988
7448 6989 .frm_code_list.frm_grid_container a:hover {
7449 - background-color: var(--primary-700);
6990 + background-color: var(--primary-hover);
7450 6991 color: #fff;
7451 6992 }
7452 6993
7453 6994 .frm_field_list #frm-insert-fields .button a {
@@ -7455,15 +6996,10 @@
7455 6996 max-width: 95%;
7456 6997 overflow: hidden;
7457 6998 }
7458 6999
7459 -.field_type_list.frm_grid_container {
7460 - gap: var(--gap-xs) var(--gap-sm);
7461 - margin: var(--gap-xs);
7462 -}
7463 -
7464 7000 .field_type_list li {
7465 - margin: 0;
7001 + margin: 0 0 10px;
7466 7002 padding: 0;
7467 7003 }
7468 7004
7469 7005 #frm-insert-fields .frm-search {
@@ -7475,13 +7011,22 @@
7475 7011 #frm-insert-fields li,
7476 7012 #frm-insert-fields li a {
7477 7013 text-decoration: none;
7478 7014 font-weight: normal;
7479 - font-size: var(--text-md) !important;
7480 - color: var(--grey-900);
7015 + font-size: 15px !important;
7016 + color: var(--dark-grey);
7481 7017 }
7482 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 +
7483 7025 #frm-insert-fields li.frm_show_upgrade {
7026 + margin: 0 0 10px;
7027 + padding: 5px 20px;
7028 + box-sizing: border-box;
7484 7029 cursor: pointer;
7485 7030 opacity: .5;
7486 7031 }
7487 7032
@@ -7488,11 +7033,14 @@
7488 7033 #frm-insert-fields li a span {
7489 7034 vertical-align: middle;
7490 7035 }
7491 7036
7492 -.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 +
7493 7041 #frm-insert-fields li a:not(.disabled):hover {
7494 - background: var(--grey-100);
7042 + background: var(--sidebar-hover);
7495 7043 }
7496 7044
7497 7045 #frm-insert-fields li a.disabled:hover {
7498 7046 cursor: not-allowed;
@@ -7514,9 +7062,9 @@
7514 7062 .frmsvg {
7515 7063 fill: currentColor;
7516 7064 width: 18px;
7517 7065 height: 18px;
7518 - vertical-align: middle;
7066 + vertical-align: text-bottom;
7519 7067 }
7520 7068
7521 7069 input[disabled],
7522 7070 .frmsvg svg {
@@ -7542,27 +7090,40 @@
7542 7090 width: 13px;
7543 7091 height: 13px;
7544 7092 }
7545 7093
7094 +.frm_code_list a .frmsvg,
7546 7095 .frmbutton.ui-sortable-helper .frmsvg,
7547 7096 .field_type_list li.frmbutton .frmsvg,
7097 +.frm_code_list a i,
7548 7098 .frmbutton.ui-sortable-helper i,
7549 -.field_type_list li.frmbutton i,
7550 -.frm_code_list a .frmsvg,
7551 -.frm_code_list a i {
7552 - color: var(--grey-500);
7099 +.field_type_list li.frmbutton i {
7100 + margin: .15em .2em;
7101 + color: var(--grey);
7553 7102 display: inline-block;
7554 7103 vertical-align: middle;
7555 - width: var(--text-md);
7556 - font-size: var(--text-md);
7104 + width: 20px;
7105 + height: 20px;
7106 + padding-right: 15px;
7107 + text-align: left;
7108 + font-size: 18px;
7557 7109 }
7558 7110
7559 -/* Standardize icon size for field buttons in the builder */
7560 -.field_type_list li.frmbutton .frmsvg {
7561 - width: var(--text-xl);
7562 - font-size: var(--text-xl);
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;
7563 7116 }
7564 7117
7118 +.frm_code_list a .frmsvg,
7119 +.frm_code_list a i {
7120 + margin: 0 5px 0 0;
7121 + padding: 0;
7122 + width: 15px;
7123 + font-size: 15px;
7124 +}
7125 +
7565 7126 .frm_code_list i:before {
7566 7127 font-size: inherit;
7567 7128 }
7568 7129
@@ -7567,36 +7128,40 @@
7567 7128 }
7568 7129
7569 7130 #frm-insert-fields li a:not(.disabled):hover .frmsvg,
7570 7131 #frm-insert-fields li a:not(.disabled):hover i {
7571 - color: var(--grey-600);
7132 + color: var(--dark-grey);
7572 7133 }
7573 7134
7574 -/* Icon while dragging */
7575 7135 .frmbutton.ui-draggable-dragging {
7576 - pointer-events: none;
7136 + width: auto !important;
7577 7137 }
7578 7138
7579 -#frm-insert-fields li.frm_show_upgrade,
7580 -#frm-insert-fields li a,
7139 +/* Icon while dragging */
7140 +.frmbutton.ui-draggable-dragging,
7581 7141 .frmbutton.ui-draggable-dragging a {
7582 - text-decoration: none;
7583 - display: inline-flex !important;
7584 - gap: var(--gap-xs);
7585 - align-items: center;
7586 - border-radius: var(--border-radius) !important;
7587 - padding: var(--gap-xs) var(--gap-sm) !important;
7588 - color: var(--grey-900) !important;
7142 + cursor: move;
7589 7143 }
7590 7144
7591 -/* Adjust field button size to full width in builder */
7592 -#frm-insert-fields li a {
7593 - display: flex !important;
7145 +.frmbutton.ui-sortable-helper a,
7146 +.frmbutton.ui-draggable-dragging a:hover,
7147 +.frmbutton.ui-draggable-dragging a {
7148 + text-decoration: none;
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;
7594 7157 }
7595 7158
7596 -.frmbutton.ui-draggable-dragging a {
7597 - border: 1px solid var(--grey-300);
7598 - 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;
7599 7164 }
7600 7165
7601 7166 .frmbutton.ui-draggable-dragging span {
7602 7167 font-size: 15px;
@@ -7602,18 +7167,23 @@
7602 7167 font-size: 15px;
7603 7168 }
7604 7169
7605 7170 #frm-show-fields .frmbutton.ui-sortable-helper i,
7171 +.frmbutton.ui-sortable-helper span,
7606 7172 .frmbutton.ui-draggable-dragging i,
7607 7173 .frmbutton.ui-draggable-dragging .frmsvg {
7608 7174 color: #fff !important;
7609 7175 }
7610 7176
7611 -.frmbutton.ui-draggable-dragging i,
7612 -.frmbutton.ui-draggable-dragging .frmsvg {
7613 - 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;
7614 7180 }
7615 7181
7182 +.frmbutton.ui-draggable-dragging .frm-dropdown-menu {
7183 + display: none;
7184 +}
7185 +
7616 7186 .frm_sorting li.ui-state-default.ui-sortable-helper,
7617 7187 .frmbutton.ui-sortable-helper {
7618 7188 transition: opacity .2s;
7619 7189 opacity: 1;
@@ -7618,13 +7188,10 @@
7618 7188 transition: opacity .2s;
7619 7189 opacity: 1;
7620 7190 }
7621 7191
7622 -.frm-field-group-count {
7623 - background-color: var(--sidebar-hover);
7624 - padding: 5px;
7625 - color: #fff !important;
7626 - border-radius: 10px;
7192 +.frmbutton.ui-sortable-helper:not(.ui-draggable-dragging) {
7193 + opacity: 0;
7627 7194 }
7628 7195
7629 7196 /* End dragging */
7630 7197
@@ -7650,64 +7217,13 @@
7650 7217 .frm_noallow a {
7651 7218 color: inherit;
7652 7219 }
7653 7220
7654 -#frm_upgrade_modal_image {
7655 - max-width: 200px;
7656 -}
7657 -
7658 -.frm-tab-message {
7659 - max-width: 600px;
7660 - margin: 20px auto;
7661 - color: rgba(63, 75, 91, 0.8);
7662 -}
7663 -
7664 -.frm-settings-screenshot-toolbar {
7665 - min-height: 39px;
7666 - display: flex;
7667 -}
7668 -
7669 -.frm-settings-screenshot-toolbar .frm-minmax-icon {
7670 - height: 8px;
7671 - width: 8px;
7672 - border-radius: 50%;
7673 - align-self: center;
7674 - margin-left: 10px;
7675 -}
7676 -
7677 -.frm-settings-screenshot-toolbar .frm-minmax-icon:first-of-type {
7678 - margin-left: 20px;
7679 -}
7680 -
7681 -.frm-settings-screenshot-toolbar img {
7682 - object-fit: contain;
7683 - align-self: flex-end;
7684 - margin-left: 25px;
7685 -}
7686 -
7687 -.frm-settings-screenshot-toolbar + div {
7688 - background: #fff;
7689 - padding-top: 25px;
7690 - border-radius: 0 0 16px 16px;
7691 -}
7692 -
7693 -.frm-settings-screenshot-toolbar + div img {
7694 - max-width: calc( 100% - 40px );
7695 -}
7696 -
7697 -.frm-settings-screenshot-wrapper {
7698 - max-width: 700px;
7699 - margin: 50px auto 0;
7700 - box-shadow: 0px 4px 4px rgba(189, 196, 205, 0.25), 0px 12px 56px rgba(42, 57, 75, 0.25);
7701 - border-radius: 16px;
7702 - background: #EBECF1;
7703 -}
7704 -
7705 7221 .frm-dialog {
7706 7222 z-index: 100;
7707 7223 padding: 0 !important;
7708 - border-radius: 16px;
7709 - border: none;
7224 + border-radius: 10px;
7225 + border: 1px solid var(--grey);
7710 7226 background-color: #fff;
7711 7227 max-width: 100% !important;
7712 7228 }
7713 7229
@@ -7714,14 +7230,21 @@
7714 7230 .frm-dialog .postbox {
7715 7231 background: transparent;
7716 7232 box-shadow: none;
7717 7233 border: none;
7718 - line-height: var(--leading);
7234 + line-height: 1.4em;
7719 7235 }
7720 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 +
7721 7244 .frm-dialog input[type=text],
7722 7245 .frm-dialog textarea {
7723 - font-size: var(--text-md);
7246 + font-size: 16px;
7724 7247 }
7725 7248
7726 7249 .frm-dialog textarea {
7727 7250 height: 75px;
@@ -7734,16 +7257,14 @@
7734 7257 .frm-dialog .frm-sub-label,
7735 7258 .frm-sub-label {
7736 7259 color: var(--grey);
7737 7260 text-transform: none;
7738 - padding-left: 8px;
7739 7261 }
7740 7262
7741 7263 h2 .frm-sub-label {
7742 - font-size: var(--text-md);
7264 + font-size: 16px;
7743 7265 }
7744 7266
7745 -.frm-views-editor-body .ui-widget-overlay,
7746 7267 .frm-white-body .ui-widget-overlay,
7747 7268 .toplevel_page_formidable .ui-widget-overlay {
7748 7269 position: fixed;
7749 7270 width: 100%;
@@ -7751,10 +7272,9 @@
7751 7272 top: 0;
7752 7273 left: 0;
7753 7274 right: 0;
7754 7275 bottom: 0;
7755 - background: var(--grey-500);
7756 - opacity: .5;
7276 + background: var(--grey-border);
7757 7277 z-index: 2;
7758 7278 }
7759 7279
7760 7280 #frm_upgrade_modal {
@@ -7769,15 +7289,15 @@
7769 7289 color: #c4c4c4;
7770 7290 padding-bottom: 20px;
7771 7291 }
7772 7292
7773 -.frm-upgrade-message img {
7293 +#frm-upgrade-message img {
7774 7294 max-width: 100%;
7775 7295 }
7776 7296
7777 7297 a.frm-link-secondary {
7778 7298 color: #c4c4c4;
7779 - font-size: var(--text-sm);
7299 + font-size: 14px;
7780 7300 text-decoration: underline;
7781 7301 }
7782 7302
7783 7303 .field_type_list li.button.frm_noallow,
@@ -7820,9 +7340,8 @@
7820 7340 opacity: 0;
7821 7341
7822 7342 /* Custom rules */
7823 7343 z-index: 9999999;
7824 - pointer-events: none;
7825 7344 }
7826 7345
7827 7346 .tooltip.show {
7828 7347 opacity: 0.9;
@@ -7982,25 +7501,93 @@
7982 7501 box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
7983 7502 padding: 10px 40px;
7984 7503 border-top-color: #ccc;
7985 7504 background: var(--sidebar-color);
7986 - color: var(--grey-700);
7505 + color: var(--dark-grey);
7987 7506 border-radius: 0;
7988 7507 opacity: 1;
7989 - font-size: var(--text-sm);
7508 + font-size: 14px;
7990 7509 }
7991 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 +
7992 7524 #frm_custom_css_box {
7993 7525 width: 100%;
7994 7526 }
7995 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 +
7996 7584 /*form inputs/selects */
7997 7585 .frm_form_field.frm_scroll_box .frm_opt_container,
7998 -.frm-white-body .wrap input[type="text"], /* Cover Views pages */
7999 -.frm-white-body .wrap input[type="search"],
8000 -.frm-white-body .wrap input[type="number"],
8001 -.frm-white-body .wrap select,
8002 -.frm-white-body .wrap textarea,
7586 +#postbox-container-2 input[type="text"],
7587 +#postbox-container-2 input[type="number"],
7588 +#postbox-container-2 select,
7589 +#postbox-container-2 textarea,
8003 7590 button.frm_choose_image_box,
8004 7591 #titlediv input[type="text"],
8005 7592 .frm-fields button.btn,
8006 7593 .frm_wrap textarea,
@@ -8005,11 +7592,9 @@
8005 7592 .frm-fields button.btn,
8006 7593 .frm_wrap textarea,
8007 7594 .frm_wrap input[type="tel"],
8008 7595 .frm_wrap input[type="text"],
8009 -.frm_wrap input[type=search],
8010 7596 .frm_wrap input[type="number"],
8011 -.frm_wrap input[type="date"],
8012 7597 .frm_wrap select,
8013 7598 .wp-admin .frm_wrap select,
8014 7599 .field-group textarea,
8015 7600 .field-group input[type="text"],
@@ -8016,33 +7601,17 @@
8016 7601 .field-group select {
8017 7602 outline: 0;
8018 7603 box-shadow: none;
8019 7604 border-radius: var(--small-radius);
8020 - padding: 5px 14px;
8021 - border-color: var(--grey-300);
8022 - color: var(--grey-800);
8023 - font-size: var(--text-md);
7605 + padding: 6px 9px;
7606 + border-color: var(--grey-border);
7607 + color: var(--dark-grey);
7608 + font-size: 15px;
8024 7609 margin: 0;
8025 7610 background-color: #fff;
8026 - line-height: var(--leading);
7611 + line-height: 1;
8027 7612 }
8028 7613
8029 -.frm_wrap ::-webkit-datetime-edit {
8030 - line-height: var(--leading);
8031 -}
8032 -
8033 -.frm-white-body textarea:focus,
8034 -.frm-white-body input:focus,
8035 -.frm-white-body select:focus,
8036 -.frm_wrap input:focus,
8037 -.frm_wrap select:focus,
8038 -.wp-core-ui .frm_wrap select:focus,
8039 -.frm-btn-group .multiselect.dropdown-toggle:focus,
8040 -.frm_wrap textarea:focus {
8041 - border-color: var(--primary-500) !important;
8042 - box-shadow: none !important;
8043 -}
8044 -
8045 7614 #postbox-container-2 textarea,
8046 7615 .frm_wrap textarea,
8047 7616 .field-group textarea {
8048 7617 line-height: 2;
@@ -8059,12 +7628,19 @@
8059 7628 .wp-admin .frm_wrap select {
8060 7629 max-width: 100%;
8061 7630 }
8062 7631
8063 -.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"] {
8064 7636 padding: 10px 12px;
8065 7637 }
8066 7638
7639 +.frm_wrap .frm_form_builder input[type="text"].frm_other_input {
7640 + padding: 6px 9px;
7641 +}
7642 +
8067 7643 .frm_wrap input[disabled],
8068 7644 .frm_wrap select[disabled],
8069 7645 .frm_wrap textarea[disabled],
8070 7646 .frm_wrap input[readonly],
@@ -8070,23 +7646,37 @@
8070 7646 .frm_wrap input[readonly],
8071 7647 .frm_wrap select[readonly],
8072 7648 .frm_wrap textarea[readonly],
8073 7649 .frm_wrap input::placeholder {
8074 - color: var(--grey-500);
7650 + color: var(--grey);
8075 7651 }
8076 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 +
8077 7663 #postcustomstuff table td > div {
8078 7664 /* To override some inline css in add-on */
8079 7665 padding-top: 0 !important;
8080 7666 }
8081 7667
8082 -.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;
8083 7673 vertical-align: top;
8084 7674 }
8085 7675
8086 7676 .frm_wrap .frm_form_builder select {
8087 - line-height: var(--leading);
8088 - height: var(--text-md);
7677 + line-height: 40px;
7678 + height: 40px;
8089 7679 width: 100%;
8090 7680 }
8091 7681
8092 7682 #postbox-container-2 select,
@@ -8092,25 +7682,11 @@
8092 7682 #postbox-container-2 select,
8093 7683 .wp-admin .frm_wrap select,
8094 7684 .frm_wrap .frm_form_builder select {
8095 7685 height: auto;
8096 - background-position: right 11px top 55%;
7686 + padding: 0 24px 0 12px;
8097 7687 }
8098 7688
8099 -.frm-white-body .tablenav select,
8100 -.frm-white-body .tablenav input[type="text"],
8101 -.wp-admin .frm_wrap .tablenav select,
8102 -.frm_wrap .tablenav input[type="date"],
8103 -.frm_wrap .tablenav input[type="text"] {
8104 - padding-top: 0;
8105 - padding-bottom: 0;
8106 - line-height: 1;
8107 -}
8108 -
8109 -.frm_wrap .tablenav ::-webkit-datetime-edit {
8110 - line-height: 1;
8111 -}
8112 -
8113 7689 .frm-fields button.btn,
8114 7690 .frm-fields textarea,
8115 7691 .frm-fields input[type="text"],
8116 7692 .frm-fields select,
@@ -8122,9 +7698,10 @@
8122 7698 outline: 0;
8123 7699 }
8124 7700
8125 7701 .frm-fields button.btn {
8126 - height: var(--h-md);
7702 + line-height: normal;
7703 + height: auto;
8127 7704 text-align: inherit;
8128 7705 }
8129 7706
8130 7707 .global-font .field-group input[type="text"] {
@@ -8165,9 +7742,9 @@
8165 7742 }
8166 7743
8167 7744 .frm_images_dropdown input[type="radio"]:checked + .frm_image_option_container {
8168 7745 background: #fff !important;
8169 - border-color: var(--primary-500);
7746 + border-color: var(--primary-color);
8170 7747 }
8171 7748
8172 7749 .frm_images_dropdown .frm_text_label_for_image {
8173 7750 padding: 0;
@@ -8195,9 +7772,9 @@
8195 7772 }
8196 7773
8197 7774 .windows::-webkit-scrollbar-thumb,
8198 7775 .windows ::-webkit-scrollbar-thumb {
8199 - background: var(--grey-300);
7776 + background: var(--grey-border);
8200 7777 -webkit-border-radius: var(--border-radius);
8201 7778 -webkit-box-shadow: none;
8202 7779 }
8203 7780
@@ -8219,9 +7796,8 @@
8219 7796 .rtl #frm_top_bar #frm_bs_dropdown {
8220 7797 padding-left: 15px;
8221 7798 }
8222 7799
8223 -.rtl .frm-full-close,
8224 7800 .rtl .frm_wrap .columns-2 .frm-right-panel,
8225 7801 .rtl .frm-right-panel {
8226 7802 border-right-width: 1px;
8227 7803 border-left-width: 0;
@@ -8226,14 +7802,9 @@
8226 7802 border-right-width: 1px;
8227 7803 border-left-width: 0;
8228 7804 }
8229 7805
8230 -.rtl .frm-full-close {
8231 - padding-left: 0;
8232 - padding-right: var(--gap-md);
8233 -}
8234 -
8235 -.rtl .frm-text-right {
7806 +.rtl .frm_right_text {
8236 7807 text-align: left;
8237 7808 }
8238 7809
8239 7810 .rtl .frm_wrap #frm_adv_info ul.category-tabs li:first-child {
@@ -8278,39 +7849,22 @@
8278 7849 right: unset;
8279 7850 left: 2px;
8280 7851 }
8281 7852
7853 +.rtl #frm_upgrade_modal .dismiss i,
7854 +.rtl .frm-inline-modal i,
7855 +.rtl #frm-bulk-modal i,
8282 7856 .rtl .frm_has_shortcodes > i {
8283 7857 right: auto;
8284 7858 left: 5px;
8285 7859 }
8286 7860
7861 +.rtl .frm_code_list.frm-full-hover a span,
8287 7862 .rtl .frm_reply_to_container,
8288 7863 .rtl .frm_bcc_cc_container {
8289 7864 float: left;
8290 7865 }
8291 7866
8292 -.rtl .frm-default-switcher {
8293 - float: left;
8294 - position: relative;
8295 -}
8296 -
8297 -.rtl .frm-with-right-icon .frmsvg {
8298 - right: auto;
8299 - left: 0;
8300 -}
8301 -
8302 -.rtl .frm-inline-modal > a.dismiss {
8303 - left: 13px;
8304 - right: auto;
8305 -}
8306 -
8307 -.rtl.wp-admin .frm_wrap select {
8308 - padding-left: var(--gap-lg) !important;
8309 - padding-right: 5px !important;
8310 - background-position: left 11px top 55%;
8311 -}
8312 -
8313 7867 /* ---------------------------------------------------------------
8314 7868 Clearfix
8315 7869 --------------------------------------------------------------- */
8316 7870 span.clear {
@@ -8352,12 +7906,15 @@
8352 7906 @media only screen and (max-width: 1200px) {
8353 7907 .frm-addons {
8354 7908 grid-template-columns: 1fr 1fr;
8355 7909 }
7910 +
7911 + ul.frm_form_nav > li {
7912 + margin-right: 2.5%;
7913 + }
8356 7914 }
8357 7915
8358 7916 @media only screen and (max-width: 1050px) {
8359 - .frm-white-body,
8360 7917 .frm_wrap {
8361 7918 --biggest-sidebar: 390px;
8362 7919 }
8363 7920
@@ -8367,18 +7924,15 @@
8367 7924
8368 7925 .frm_actions_list {
8369 7926 margin-left: 0;
8370 7927 }
7928 +
7929 + ul.frm_form_nav > li {
7930 + margin-right: 1.5%;
7931 + }
8371 7932 }
8372 7933
8373 7934 @media only screen and (max-width: 960px) {
8374 - .frm-white-body,
8375 - .frm_wrap {
8376 - --gap-sm: 8px;
8377 - --gap-md: 16px;
8378 - --gap-2xl: 24px;
8379 - }
8380 -
8381 7935 .auto-fold #adminmenuwrap {
8382 7936 width: 36px;
8383 7937 }
8384 7938
@@ -8389,32 +7943,36 @@
8389 7943 p.howto {
8390 7944 display: inline-block;
8391 7945 }
8392 7946
8393 - /* Fix: Issue where the admin page content had extra white space to the left on small screens */
8394 - .auto-fold.frm-admin-page-styles:not(.frm-full-screen) .frm_page_container,
8395 - .auto-fold:not(.frm-full-screen) .frm_wrap .frm_page_container {
8396 - left: 36px;
7947 + ul.frm_form_nav {
7948 + clear: left;
7949 + padding-top: 0;
8397 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 + }
8398 7967 }
8399 7968
8400 7969 @media only screen and (max-width: 850px) {
8401 - #frm_bs_dropdown {
8402 - /* There isn't enough room for the title on a screen this size so just hide it. */
8403 - display: none;
8404 - }
8405 -
8406 - .frm-white-body,
8407 7970 .frm_wrap {
8408 7971 --biggest-sidebar: 350px;
8409 7972 --big-sidebar: 350px;
8410 7973 }
8411 7974
8412 - #frm_bs_dropdown .frm_bstooltip {
8413 - /* There isn't enough room for the title on a screen this size so just hide it. */
8414 - display: none !important;
8415 - }
8416 -
8417 7975 .frm_col_one {
8418 7976 clear: none;
8419 7977 }
8420 7978
@@ -8423,9 +7981,10 @@
8423 7981 display: block;
8424 7982 margin: 5px 0;
8425 7983 }
8426 7984
8427 - #frm_top_bar h1 {
7985 + .post-type-frm_display #frm_top_bar h1,
7986 + .frm_page_container #frm_top_bar h1 {
8428 7987 width: auto;
8429 7988 max-width: 200px;
8430 7989 }
8431 7990
@@ -8495,9 +8054,8 @@
8495 8054 }
8496 8055 }
8497 8056
8498 8057 @media only screen and (max-width: 782px) {
8499 - .frm-white-body,
8500 8058 .frm_wrap {
8501 8059 --small-sidebar: 20%;
8502 8060 --medium-sidebar: 35%
8503 8061 }
@@ -8511,9 +8069,9 @@
8511 8069 .frm_wrap #publishing-action {
8512 8070 line-height: normal;
8513 8071 }
8514 8072
8515 - .frm-white-body #screen-meta-links {
8073 + .frm-full-screen #screen-meta-links {
8516 8074 display: none;
8517 8075 }
8518 8076
8519 8077 .frm_wrap .misc-pub-section {
@@ -8572,13 +8130,8 @@
8572 8130 .with_frm_style .frm_checkbox input[type=checkbox] {
8573 8131 width: 25px !important;
8574 8132 }
8575 8133
8576 - .frm_single_entry_page .with_frm_style .frm_radio input[type=radio],
8577 - .frm_single_entry_page .with_frm_style .frm_checkbox input[type=checkbox] {
8578 - width: 18px !important;
8579 - }
8580 -
8581 8134 .wp-list-table.toplevel_page_formidable .column-entries,
8582 8135 .wp-list-table.toplevel_page_formidable .column-form_key,
8583 8136 .wp-list-table.toplevel_page_formidable .column-shortcode,
8584 8137 .wp-list-table.toplevel_page_formidable .column-created_at {
@@ -8592,13 +8145,27 @@
8592 8145 padding: 3px 8px 3px 35%;
8593 8146 text-align: left;
8594 8147 }
8595 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 +
8596 8159 #form_entries_page .wp-list-table th.frm_hidden,
8597 8160 #form_entries_page .wp-list-table td.frm_hidden {
8598 8161 display: none !important;
8599 8162 }
8600 8163
8164 + ul.frm_form_nav > li {
8165 + margin-right: 15px;
8166 + }
8167 +
8601 8168 .frm-white-body.auto-fold #wpcontent {
8602 8169 padding-left: 0;
8603 8170 }
8604 8171
@@ -8609,13 +8176,11 @@
8609 8176 .frm-addons {
8610 8177 grid-template-columns: 1fr;
8611 8178 }
8612 8179
8613 - .frm-admin-page-styles .frm_page_container,
8614 - .frm_wrap .frm_page_container {
8615 - left: 0 !important;
8616 - top: 46px !important;
8617 - height: calc( 100vh - 46px ) !important;
8180 + .frm_single_entry_page.frm_wrap .frm_page_container {
8181 + height: auto;
8182 + display: block;
8618 8183 }
8619 8184
8620 8185 .frm_single_entry_page.frm_wrap .columns-2 {
8621 8186 display: block;
@@ -8633,14 +8198,13 @@
8633 8198 border-radius: 6px;
8634 8199 }
8635 8200
8636 8201 #wp-content-media-buttons a.frm_insert_form {
8637 - padding: 0 var(--gap-sm);
8202 + padding: 0 15px;
8638 8203 }
8639 8204 }
8640 8205
8641 8206 @media only screen and (max-width: 700px) {
8642 - .frm-white-body,
8643 8207 .frm_wrap {
8644 8208 --biggest-sidebar: 50%;
8645 8209 --big-sidebar: 50%;
8646 8210 }
@@ -8646,9 +8210,8 @@
8646 8210 }
8647 8211 }
8648 8212
8649 8213 @media only screen and (max-width: 600px) {
8650 - .frm-white-body,
8651 8214 .frm_wrap {
8652 8215 --small-sidebar: 45px;
8653 8216 }
8654 8217
@@ -8654,9 +8217,9 @@
8654 8217
8655 8218 .frm-form-setting-tabs a {
8656 8219 visibility: collapse;
8657 8220 font-size: 0;
8658 - padding: 0 var(--gap-sm);
8221 + padding: 0 15px;
8659 8222 }
8660 8223
8661 8224 .frm-form-setting-tabs a .frmsvg,
8662 8225 .frm-form-setting-tabs a i {
@@ -8728,12 +8291,8 @@
8728 8291 .rtl #frm_builder_page .frm_actions_dropdown > .frm-dropdown-menu {
8729 8292 right: auto;
8730 8293 left: 0;
8731 8294 }
8732 -
8733 - .frm_on_submit_type svg {
8734 - display: none;
8735 - }
8736 8295 }
8737 8296
8738 8297 @media only screen and (max-width: 475px) {
8739 8298 #frm_bs_dropdown {
@@ -8749,18 +8308,8 @@
8749 8308 margin-right: 0;
8750 8309 }
8751 8310 }
8752 8311
8753 -/* Firefox */
8754 -@-moz-document url-prefix() {
8755 - .frm-white-body .tablenav select,
8756 - .frm-white-body .tablenav input[type="text"],
8757 - .wp-admin .frm_wrap .tablenav select,
8758 - .frm_wrap .tablenav input[type="text"] {
8759 - padding-top: 5px;
8760 - }
8761 -}
8762 -
8763 8312 /* PRINT */
8764 8313 @media print {
8765 8314 a, .misc-pub-section a {
8766 8315 color: #000 !important;
@@ -8811,9 +8360,9 @@
8811 8360 display: block;
8812 8361 padding: 20px;
8813 8362 }
8814 8363
8815 - .frm_wrap .columns-2,
8364 + .frm_page_container .columns-2,
8816 8365 .frm_wrap .frm_page_container {
8817 8366 height: auto;
8818 8367 display: block;
8819 8368 }
@@ -8850,10 +8399,9 @@
8850 8399 width: 100%;
8851 8400 }
8852 8401 }
8853 8402
8854 -.frm-admin-page-styles #frm-publishing #save_menu_header,
8855 -.frm-admin-page-styles2 #frm-publishing #save_menu_header {
8403 +.frm-admin-page-styles #frm-publishing #save_menu_header {
8856 8404 display: inline-block;
8857 8405 }
8858 8406
8859 8407 /* Change the order of subfields of the Name field in the backend */
@@ -8860,12 +8408,16 @@
8860 8408 .edit_form_item .frm_combo_inputs_container[data-name-layout="last_first"] .frm_form_subfield-first {
8861 8409 order: 2;
8862 8410 }
8863 8411
8412 +.frm-video-wrapper {
8413 + padding: 0 20px;
8414 +}
8415 +
8864 8416 .frm-video-wrapper iframe {
8865 8417 width: 100%;
8866 8418 max-width: 843px;
8867 - border-radius: var(--border-radius);
8419 + border-radius: 10px;
8868 8420 }
8869 8421
8870 8422 #frm_field_group_popup {
8871 8423 position: absolute;
@@ -8928,9 +8480,9 @@
8928 8480 }
8929 8481
8930 8482 #frm_field_group_popup .frm-row-layout-option.frm-active-row-layout,
8931 8483 #frm_field_group_popup .frm-row-layout-option:hover {
8932 - outline: 1px solid var(--primary-500);
8484 + outline: 1px solid var(--primary-color);
8933 8485 }
8934 8486
8935 8487 .frm-custom-field-group-layout,
8936 8488 .frm-break-field-group {
@@ -8935,9 +8487,9 @@
8935 8487 .frm-custom-field-group-layout,
8936 8488 .frm-break-field-group {
8937 8489 padding: 5px 15px;
8938 8490 cursor: pointer;
8939 - font-size: var(--text-sm);
8491 + font-size: 14px;
8940 8492 line-height: 19px;
8941 8493 color: rgba(40, 47, 54, 0.85);
8942 8494 }
8943 8495
@@ -9009,17 +8561,12 @@
9009 8561 .frm-multiselect-key-is-down li.form-field:not(.edit_field_type_divider) {
9010 8562 pointer-events: none;
9011 8563 }
9012 8564
9013 -.frm-sortable-helper {
9014 - /* Make sure the item being dragged appears above other form builder fields */
9015 - z-index: 99;
9016 -}
9017 -
9018 8565 #frm_banner {
9019 8566 width: 100%;
9020 8567 color: #fff;
9021 - background: var(--primary-500);
8568 + background: var(--primary-color);
9022 8569 height: 40px;
9023 8570 line-height: 40px;
9024 8571 text-align: center;
9025 8572 position: relative;
@@ -9055,83 +8602,35 @@
9055 8602 display: none !important;
9056 8603 }
9057 8604
9058 8605 #frm_new_form_modal .frm-ready-made-solution {
9059 - padding: var(--gap-xs) !important;
9060 - margin: var(--gap-xs) 0 var(--gap-sm);
8606 + padding: 20px 5px;
9061 8607 display: flex;
9062 - gap: var(--gap-sm);
9063 - position: relative;
9064 - overflow: visible !important;
9065 8608 }
9066 8609
9067 -#frm_new_form_modal .frm-ready-made-solution:after {
9068 - width: 100%;
9069 - height: 1px;
9070 - background: var(--grey-300);
9071 - content: '';
9072 - position: absolute;
9073 - bottom: -10px;
9074 - left: 0;
8610 +.frm-ready-made-solution .frm-hover-icons {
8611 + padding: 5px;
8612 + position: static;
9075 8613 }
9076 8614
9077 -#frm_new_form_modal .frm-ready-made-solution.frm-search-result:last-of-type::after {
9078 - content: none;
8615 +#frm_new_form_modal .frm-ready-made-solution > div:first-child {
8616 + width: 300px;
9079 8617 }
9080 8618
9081 -#frm_new_form_modal .frm-solution-details {
9082 - flex: 1;
9083 - display: flex;
9084 - gap: var(--gap-2xs);
9085 - 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;
9086 8628 }
9087 8629
9088 -#frm_new_form_modal .frm-ready-made-solution > div:first-child {
9089 - width: 30%;
9090 - text-align: center;
9091 -}
9092 -
9093 8630 .frm-ready-made-solution h3 ~ a {
9094 - color: var(--primary-500);
8631 + color: var(--primary-color);
9095 8632 }
9096 8633
9097 8634 .frm-ready-made-solution img {
9098 8635 max-width: 100%;
9099 - display: block;
9100 - box-shadow: var(--box-shadow-lg);
9101 8636 }
9102 -
9103 -/* On Submit action */
9104 -.frm_single_on_submit_settings .frm_form_field {
9105 - margin: 8px 0;
9106 -}
9107 -
9108 -.frm_on_submit_type_setting {
9109 - padding: 8px 0;
9110 -}
9111 -
9112 -.frm_on_submit_type label {
9113 - display: flex;
9114 - border: 1px solid var(--grey-border);
9115 - border-radius: var(--small-radius);
9116 - gap: 16px;
9117 - padding: 16px;
9118 - align-items: center;
9119 - justify-content: center;
9120 -}
9121 -
9122 -.frm_on_submit_type input {
9123 - opacity: 0 !important;
9124 - position: absolute;
9125 - z-index: -1;
9126 -}
9127 -
9128 -.frm_on_submit_type input[type="radio"]:checked + label {
9129 - border-color: var(--primary-color);
9130 - box-shadow: 0 0 0 1px var(--primary-color);
9131 -}
9132 -
9133 -#form_settings_page .frm_on_submit_type label:hover,
9134 -.frm_on_submit_type input[type="radio"]:checked + label svg {
9135 - color: var(--primary-color);
9136 -}
9137 -/* End On Submit action */