PluginProbe
Contact Forms by Cimatti / 2.2.32
Contact Forms by Cimatti v2.2.32
2.3.6 2.3.5 2.3.0 2.2.32 2.2.4 2.2.0 2.1.2 2.1.1 trunk 1.0 1.1 1.2 1.2.1 1.3 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 1.4.1 All 62 releases
contact-forms / assets / css / admin.css

admin.css in Contact Forms by Cimatti 2.2.32, at assets/css/admin.css

1,411 lines 34.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Modern accessible admin styles */
2
3 /* Hide duplicate h2 inside tokens list when already wrapped in a postbox */
4 .postbox .accua_forms_token_list > h2 {
5 display: none;
6 }
7
8 /* Form edit page: title field (mirrors WP core #poststuff #titlediv styling) */
9 #accua_forms_edit_page #titlediv {
10 margin-top: 10px;
11 margin-bottom: 20px;
12 }
13
14 #accua_forms_edit_page #titlediv #title {
15 padding: 3px 8px;
16 font-size: 1.7em;
17 line-height: 100%;
18 height: 1.7em;
19 width: 100%;
20 outline: none;
21 margin: 0;
22 background-color: #fff;
23 }
24
25 /* ==========================================================================
26 Widget Accordion Animation (form field editor)
27 Uses CSS transitions instead of jQuery slideDown/slideUp for smoother UX
28 ========================================================================== */
29
30 /* Widget-inside: collapsed state (default) - use display:none like original */
31 #accua_forms_edit_page #widgets-right .widget .widget-inside {
32 display: none;
33 }
34
35 /* Widget-inside: expanded state (.open class on parent .widget) */
36 #accua_forms_edit_page #widgets-right .widget.open .widget-inside {
37 display: block;
38 }
39
40 /* Rotate caret icon when widget is open */
41 #accua_forms_edit_page #widgets-right .widget.open a.widget-action:after {
42 transform: rotate(90deg);
43 }
44
45 /* Respect reduced motion preference for accessibility */
46 @media (prefers-reduced-motion: reduce) {
47 #accua_forms_edit_page #widgets-right a.widget-action:after {
48 transition: none;
49 }
50 }
51
52 input[type="text"].accua_form_value, textarea.accua_form_value {
53 width: 95%;
54 margin-right: 5%;
55 }
56
57
58 #accua_forms_edit_page .sidebar-name-arrow {
59 display: none !important;
60 }
61
62 #accua_forms_edit_page .widget-control-actions br.clear {
63 display: none;
64 }
65 /*
66 #accua_forms_edit_page #widgets-left .widget-holder, #accua_forms_edit_page #widgets-right .widgets-sortables {
67 overflow-y: scroll !important;
68 overflow-x: hidden !important;
69 height: 400px;
70 min-height: 400px;
71 }*/
72
73 #accua_forms_edit_page .widget-liquid-left {
74 width: 100% !important;
75 }
76
77 #accua_forms_edit_page #widgets-left .widget {
78 width: 98% !important;
79 margin-bottom: 7px !important;
80 float: none !important;
81 }
82
83 .accua-form-widget-scroll-wrapper {
84 width: 100% !important;
85 }
86
87 .accua-form-widget-scroll-wrapper .ui-resizable-handle, #accua_form_preview_area_wrapper .ui-resizable-handle {
88 background: #ddd;
89 bottom: -10px;
90 height: 7px;
91 border-radius: 3px;
92 }
93
94 .accua-form-widget-scroll-wrapper.ui-resizable > *:first-child {
95 /*min-height: auto !important;
96 height: 100% !important;
97 max-height: none !important;*/
98 width: auto !important;
99 /*overflow-y: scroll !important;
100 overflow-x: hidden !important;*/
101 margin: 0 !important;
102 padding: 0 !important;
103 }
104
105 .accua-form-widget-scroll-wrapper > *:first-child p.description {
106 padding-top: 5px;
107 }
108
109 /* Widget header - flex layout for proper centering */
110 #accua_forms_edit_page #widgets-right .widget-top {
111 display: flex;
112 align-items: center;
113 }
114
115 #accua_forms_edit_page #widgets-right .widget-title-action {
116 position: static;
117 order: 2;
118 display: flex;
119 align-items: center;
120 height: auto;
121 flex-shrink: 0;
122 }
123
124 #accua_forms_edit_page #widgets-right .widget-title {
125 flex: 1;
126 min-width: 0;
127 order: 1;
128 }
129
130 /* Widget toggle button */
131 #accua_forms_edit_page #widgets-right a.widget-action {
132 position: static;
133 display: flex;
134 align-items: center;
135 justify-content: center;
136 width: 2.5rem;
137 color: #555d66;
138 text-decoration: none;
139 box-shadow: none;
140 outline: none;
141 }
142
143 #accua_forms_edit_page #widgets-right a.widget-action:hover,
144 #accua_forms_edit_page #widgets-right a.widget-action:focus,
145 #accua_forms_edit_page #widgets-right a.widget-action:active {
146 color: #23282d;
147 text-decoration: none;
148 box-shadow: none;
149 }
150
151 #accua_forms_edit_page #widgets-right a.widget-action:after {
152 content: "\f140";
153 font: 400 1.25rem/1 dashicons;
154 -webkit-font-smoothing: antialiased;
155 -moz-osx-font-smoothing: grayscale;
156 }
157
158 #accua_forms_edit_page #widgets-right a.widget-action:focus:after {
159 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
160 border-radius: 50%;
161 }
162
163 /* Add field button (+) in available fields list */
164 #accua_forms_edit_page #widget-list .widget-title-action {
165 position: static;
166 display: flex;
167 align-items: center;
168 height: auto;
169 order: 2;
170 flex-shrink: 0;
171 }
172
173 #accua_forms_edit_page #widget-list .widget-top {
174 display: flex;
175 align-items: center;
176 }
177
178 #accua_forms_edit_page #widget-list .widget-title {
179 flex: 1;
180 min-width: 0;
181 order: 1;
182 }
183
184 /* Hide expand caret in available fields list (not needed there) */
185 #accua_forms_edit_page #widget-list a.widget-action {
186 display: none;
187 }
188
189 #accua_forms_edit_page #widget-list a.widget-add-action {
190 display: flex;
191 align-items: center;
192 justify-content: center;
193 width: 2.5rem;
194 color: #50575e;
195 text-decoration: none;
196 box-shadow: none;
197 outline: none;
198 }
199
200 #accua_forms_edit_page #widget-list a.widget-add-action:hover,
201 #accua_forms_edit_page #widget-list a.widget-add-action:focus {
202 color: #135e96;
203 }
204
205 #accua_forms_edit_page #widget-list a.widget-add-action:after {
206 content: "\f502";
207 font: 400 1.25rem/1 dashicons;
208 -webkit-font-smoothing: antialiased;
209 -moz-osx-font-smoothing: grayscale;
210 }
211
212 #accua_forms_edit_page #widget-list a.widget-add-action:focus:after {
213 box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
214 border-radius: 50%;
215 }
216
217 #accua_forms_edit_page .sidebar-name {
218 cursor: auto !important;
219 }
220
221
222 /* ==========================================================================
223 Tab component
224 ========================================================================== */
225
226 /* --- Shared base --- */
227
228 .accua-tabs:not(.is-initialized) > .accua-tabs__panel:not(:first-of-type) {
229 display: none;
230 }
231
232 /* High-specificity hide: prevent flash of customise/other panels before JS initializes */
233 #accua_forms_edit_page #accua_tabs:not(.is-initialized) > .accua-tabs__panel:not(:first-of-type) {
234 display: none !important;
235 }
236
237 .accua-tabs__panel[hidden] {
238 display: none !important;
239 }
240
241 .accua-tabs__tablist {
242 display: flex;
243 margin: 0;
244 padding: 0;
245 }
246
247 .accua-tabs__tab {
248 background: none;
249 border: none;
250 cursor: pointer;
251 font-family: inherit;
252 font-size: 13px;
253 line-height: 1.4;
254 white-space: nowrap;
255 transition: color 0.15s ease, background-color 0.15s ease;
256 }
257
258 .accua-tabs__tab:focus-visible {
259 outline: 2px solid var(--wp-admin-theme-color, #3858e9);
260 outline-offset: -2px;
261 border-radius: 2px;
262 }
263
264 /* --- Primary variant (outer/main tabs) — underline indicator --- */
265
266 .accua-tabs--primary > .accua-tabs__tablist,
267 .accua-tabs--primary > .accua-tabs__header > .accua-tabs__tablist {
268 border-bottom: 1px solid #c3c4c7;
269 gap: 0;
270 }
271
272 .accua-tabs--primary .accua-tabs__tab {
273 padding: 12px 16px;
274 color: #50575e;
275 font-weight: 400;
276 border-bottom: 2px solid transparent;
277 margin-bottom: -1px;
278 }
279
280 .accua-tabs--primary .accua-tabs__tab:hover {
281 color: var(--wp-admin-theme-color, #3858e9);
282 }
283
284 .accua-tabs--primary .accua-tabs__tab[aria-selected="true"] {
285 color: #1d2327;
286 font-weight: 600;
287 border-bottom-color: var(--wp-admin-theme-color, #3858e9);
288 }
289
290 .accua-tabs--primary > .accua-tabs__panel, #accua_form_preview_pane {
291 padding: 1rem 0;
292 }
293
294 /* Form builder utility rules */
295 #accua_form_use_ajax .accua_form_value {
296 margin-right: 6px;
297 }
298
299 #accua_form_use_ajax label {
300 cursor: pointer;
301 }
302
303 #accua_form_use_ajax, #accua_form_layout {
304 clear: both;
305 line-height: 25px;
306 }
307
308 #accua_form_layout {
309 margin-bottom: 9px;
310 }
311
312 #accua_form_layout select {
313 display: block;
314 margin-top: 4px;
315 margin-left: 0;
316 width: 100%;
317 max-width: 280px;
318 }
319
320 #accua_forms_edit_page {
321 --fields-col-height: calc(100vh - 200px);
322 }
323
324 #accua_forms_edit_page #accua_tabs {
325 position: relative;
326 margin-top: 20px;
327 display: grid;
328 grid-template-columns: 1fr 1fr;
329 gap: 0 16px;
330 }
331
332 /* 3-column grid when Fields tab is active — preview is 50% of total width */
333 #accua_forms_edit_page #accua_tabs:has(> [data-tab="fields"]:not([hidden])) {
334 grid-template-columns: 3fr 7fr calc(50% - 8px);
335 }
336
337 /* Tablist header spans full width */
338 #accua_forms_edit_page #accua_tabs > .accua-tabs__header {
339 grid-column: 1 / -1;
340 }
341
342 /* Panels fill column 1 by default */
343 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel {
344 grid-column: 1;
345 grid-row: 2;
346 }
347
348 /* Panels without preview span all columns */
349 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel[data-tab="messages"],
350 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel[data-tab="retention"],
351 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel[data-tab="google_ads"],
352 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel[data-tab="tokens"] {
353 grid-column: 1 / -1;
354 align-content: start;
355 }
356
357 /* Fields panel: dissolve into parent grid so children become grid items */
358 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) {
359 display: contents;
360 }
361
362 /* Available fields — column 1, scrollable */
363 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-left {
364 grid-column: 1;
365 grid-row: 2;
366 width: auto;
367 float: none;
368 min-width: 0;
369 padding-top: 1rem;
370 padding-right: 4px;
371 max-height: var(--fields-col-height);
372 overflow-y: auto;
373 overflow-x: hidden;
374 align-self: start;
375 }
376
377 /* Drop zone — column 2 */
378 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-right {
379 grid-column: 2;
380 grid-row: 2;
381 width: auto;
382 float: none;
383 margin: 0;
384 min-width: 0;
385 padding-top: 1rem;
386 align-self: start;
387 }
388
389 /* Column titles — consistent styling across all three columns */
390 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-left > h2,
391 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-right h2,
392 #accua_forms_edit_page .accua-form-preview-pane > h2 {
393 margin: 0 0 12px 0;
394 padding: 0;
395 font-size: 1.3em;
396 font-weight: 600;
397 color: #1d2327;
398 line-height: 1.4;
399 }
400
401 /* Available fields filter input */
402 .accua-fields-filter {
403 display: block;
404 width: 98%;
405 padding: 10px;
406 margin-bottom: 7px;
407 font-size: 14px;
408 border: 1px solid #dcdcde;
409 border-radius: 0;
410 box-sizing: border-box;
411 background: #fff;
412 }
413
414 .accua-fields-filter:focus {
415 border-color: #2271b1;
416 box-shadow: 0 0 0 1px #2271b1;
417 outline: none;
418 }
419
420 /* Preview pane — column 3 (or 2 for non-fields tabs), scrollable */
421 #accua_forms_edit_page .accua-form-preview-pane {
422 grid-column: 2;
423 grid-row: 2;
424 min-height: 200px;
425 border-left: 1px solid #e0e0e0;
426 padding-left: 16px;
427 align-self: start;
428 }
429
430 #accua_forms_edit_page #accua_tabs:has(> [data-tab="fields"]:not([hidden])) > .accua-form-preview-pane {
431 grid-column: 3;
432 grid-row: 2;
433 }
434
435 /* 3-column grid when Appearance tab is active — preview is 50% of total width */
436 #accua_forms_edit_page #accua_tabs:has(> [data-tab="customise"]:not([hidden])) {
437 grid-template-columns: 5fr 5fr calc(50% - 8px);
438 }
439
440 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) {
441 display: contents;
442 }
443
444 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) > .accua-customise-columns {
445 display: contents;
446 }
447
448 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) > .accua-customise-columns > .accua-style-column:first-child {
449 grid-column: 1;
450 grid-row: 2;
451 min-width: 0;
452 padding-top: 16px;
453 }
454
455 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) > .accua-customise-columns > .accua-style-column:last-child {
456 grid-column: 2;
457 grid-row: 2;
458 min-width: 0;
459 padding-top: 16px;
460 }
461
462 #accua_forms_edit_page #accua_tabs:has(> [data-tab="customise"]:not([hidden])) > .accua-form-preview-pane {
463 grid-column: 3;
464 grid-row: 2;
465 }
466
467 #accua_forms_edit_page .accua-form-preview-pane[hidden] {
468 display: none;
469 }
470
471 @media screen and (max-width: 1200px) {
472 #accua_forms_edit_page #accua_tabs {
473 grid-template-columns: 1fr;
474 }
475 /* Fields tab: 2-column grid (available | inserted), preview below */
476 #accua_forms_edit_page #accua_tabs:has(> [data-tab="fields"]:not([hidden])) {
477 grid-template-columns: 3fr 7fr;
478 }
479 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-left {
480 grid-column: 1;
481 grid-row: 2;
482 max-height: none;
483 overflow-y: visible;
484 }
485 #accua_forms_edit_page #accua_tabs > [data-tab="fields"]:not([hidden]) > .widget-liquid-right {
486 grid-column: 2;
487 grid-row: 2;
488 max-height: none;
489 overflow-y: visible;
490 }
491 /* Customise tab: 2-column grid (style cols side by side), preview below */
492 #accua_forms_edit_page #accua_tabs:has(> [data-tab="customise"]:not([hidden])) {
493 grid-template-columns: 1fr 1fr;
494 }
495 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) > .accua-customise-columns > .accua-style-column:first-child {
496 grid-column: 1;
497 grid-row: 2;
498 padding-top: 16px;
499 }
500 #accua_forms_edit_page #accua_tabs > [data-tab="customise"]:not([hidden]) > .accua-customise-columns > .accua-style-column:last-child {
501 grid-column: 2;
502 grid-row: 2;
503 padding-top: 16px;
504 }
505 #accua_forms_edit_page #accua_tabs > .accua-tabs__panel {
506 grid-column: 1;
507 }
508 #accua_forms_edit_page .accua-form-preview-pane,
509 #accua_forms_edit_page #accua_tabs:has(> [data-tab="fields"]:not([hidden])) > .accua-form-preview-pane,
510 #accua_forms_edit_page #accua_tabs:has(> [data-tab="customise"]:not([hidden])) > .accua-form-preview-pane {
511 grid-column: 1 / -1;
512 grid-row: 3;
513 border-left: none;
514 padding-left: 0;
515 border-top: 1px solid #e0e0e0;
516 padding-top: 16px;
517 max-height: none;
518 overflow-y: visible;
519 }
520 }
521
522 .accua-forms-metabox-holder {
523 float: left;
524 margin-right: 2%;
525 width: 47%;
526 }
527
528
529
530 /* Delete form button — modern WordPress destructive action */
531 #accua_forms_edit_page form#delete_form input[type="submit"] {
532 background: none;
533 border: none;
534 color: #d63638;
535 cursor: pointer;
536 font-size: 13px;
537 text-decoration: none;
538 padding: 4px 8px;
539 border-radius: 2px;
540 transition: color 0.15s ease, background-color 0.15s ease;
541 }
542
543 #accua_forms_edit_page form#delete_form input[type="submit"]:hover {
544 background: #d63638;
545 color: #fff;
546 }
547
548 #accua_forms_edit_page form#delete_form input[type="submit"]:focus-visible {
549 outline: 2px solid #d63638;
550 outline-offset: 1px;
551 }
552
553 /* Tab header actions alignment */
554 .accua_tabs_actions {
555 display: flex;
556 align-items: center;
557 gap: 12px;
558 padding-right: 4px;
559 }
560
561 /* Tabs header with flexbox layout — tablist + actions side-by-side */
562 .accua-tabs__header {
563 display: flex;
564 justify-content: space-between;
565 align-items: stretch;
566 margin-bottom: 0;
567 border-bottom: 1px solid #c3c4c7;
568 }
569
570 /* Override the shared tablist border-bottom — the header provides the full-width line instead */
571 .accua-tabs--primary > .accua-tabs__header > .accua-tabs__tablist {
572 border-bottom: none;
573 }
574
575 /* Default message preview — faithful rendering of email content */
576 [data-tab="messages"] .defalut_content_message {
577 margin-top: 8px;
578 padding: 0;
579 overflow: auto;
580 max-height: 300px;
581 }
582
583 [data-tab="messages"] .defalut_message {
584 padding-top: 12px;
585 font-weight: 600;
586 font-size: 13px;
587 color: #50575e;
588 }
589
590 [data-tab="messages"] #dashboard_right_now a.insert-media {
591 float: none;
592 top: 0;
593 }
594
595 [data-tab="messages"] .wp-editor-wrap {
596 margin-top: 10px;
597 }
598
599 [data-tab="messages"] .label_input {
600 display: block;
601 line-height: 27px;
602 margin-bottom: 9px;
603 width: 100%;
604 float: left;
605 }
606
607 [data-tab="messages"] .label_input label {
608 float: left;
609 margin-right: 10px;
610 width: 20%;
611 }
612
613 [data-tab="messages"] .label_input input.accua_form_value[type="text"] {
614 float: left;
615 width: 45%;
616 }
617
618 [data-tab="messages"] input.accua_form_check_override[type="checkbox"] {
619 margin-right: 5px;
620 }
621
622 /* Radio group — vertical stack with clickable labels */
623 .accua-radio-group {
624 margin: 0;
625 padding: 0;
626 border: 0;
627 }
628
629 .accua-radio-group label {
630 display: block;
631 padding: 4px 0;
632 cursor: pointer;
633 }
634
635 .accua-radio-group input[type="radio"] {
636 margin: 0 6px 0 0;
637 vertical-align: middle;
638 }
639
640 [data-tab="messages"] .accua_form_value[disabled] {
641 color: #BBBBBB;
642 }
643
644 [data-tab="messages"] .default_value {
645 border: 1px solid #ddd;
646 color: #999;
647 float: left;
648 line-height: 22px;
649 min-height: 21px;
650 margin: 1px 5% 1px 0;
651 padding-left: 1%;
652 padding-right: 1%;
653 width: 43%;
654 }
655
656 /* Submissions page: vertical spacing when action rows wrap */
657 #accua_forms_submissions_list_page .tablenav .actions {
658 margin-bottom: 6px;
659 }
660
661 /* Submissions page: expandable long values */
662 .accua-expandable-cell {
663 margin: 0;
664 }
665
666 .accua-expandable-cell > summary {
667 cursor: pointer;
668 list-style: none;
669 display: flex;
670 align-items: baseline;
671 overflow: hidden;
672 white-space: nowrap;
673 }
674
675 .accua-expandable-cell > summary span {
676 overflow: hidden;
677 text-overflow: ellipsis;
678 min-width: 0;
679 }
680
681 .accua-expandable-cell > summary::after {
682 content: " [+]";
683 font-size: 11px;
684 color: #2271b1;
685 }
686
687 .accua-expandable-cell[open] > summary {
688 font-size: 0;
689 }
690
691 .accua-expandable-cell[open] > summary::after {
692 content: "[−]";
693 font-size: 13px;
694 }
695
696 #accua_form_preview_area_wrapper {
697 position: relative;
698 width: 100%;
699 overflow: unset;
700 }
701
702 #accua_form_preview_area_wrapper .ui-resizable-handle.ui-resizable-s{
703 display: none !important;
704 }
705
706 #accua_form_preview_area {
707 /* position: absolute;
708 top: 0;
709 left: 0;
710 bottom: 0;
711 right: 0;*/
712 width: 100%;
713 height: 100%;
714 border: none;
715 min-height: 400px;
716 }
717
718 /* Preview loading state - Modern accessible design */
719 #accua_form_preview_area_wrapper.accua-form-preview-loading {
720 position: relative;
721 }
722
723 #accua_form_preview_area_wrapper.accua-form-preview-loading::after {
724 content: "";
725 position: absolute;
726 top: 0;
727 left: 0;
728 right: 0;
729 bottom: 0;
730 background: rgba(255, 255, 255, 0.85);
731 z-index: 10;
732 }
733
734 #accua_form_preview_area_wrapper.accua-form-preview-loading::before {
735 content: "";
736 position: absolute;
737 top: 50%;
738 left: 50%;
739 width: 28px;
740 height: 28px;
741 margin: -14px 0 0 -14px;
742 border: 3px solid #2271b1;
743 border-top-color: transparent;
744 border-radius: 50%;
745 z-index: 11;
746 animation: accua-form-loading-spin 0.75s linear infinite;
747 }
748
749 /* Reduce motion for users who prefer it (EAA/WCAG compliance) */
750 @media (prefers-reduced-motion: reduce) {
751 #accua_form_preview_area_wrapper.accua-form-preview-loading::before {
752 animation: none;
753 border-color: #2271b1;
754 opacity: 0.6;
755 }
756 }
757
758 @keyframes accua-form-loading-spin {
759 to {
760 transform: rotate(360deg);
761 }
762 }
763
764 #accua_forms_edit_page #dialog_token {
765 padding: 0 20px 20px;
766 }
767
768 #accua_forms_edit_page .defalut_content_message {
769 word-wrap: break-word;
770 overflow-wrap: break-word;
771 }
772
773 .accua_forms_admin_page textarea {
774 resize: vertical;
775 }
776 /*
777 .widget-content p{
778 width: 47%;
779 float: left;
780 margin-right: 5px;
781 }
782 */.widget-title h3, .widget-title h4 {
783 padding: 10px;
784 font-size: 14px;
785 min-width: 0;
786 word-wrap: break-word;
787 }
788
789 #accua_forms_edit_page .widget-title h4 {
790 white-space: normal;
791 overflow: visible;
792 text-overflow: clip;
793 }
794
795 .widget-control-remove.delete{
796 color: #b32d2e;
797 }
798
799
800 /* Save button states - WordPress-style inline feedback (DRY: shared between global and field save buttons) */
801 .accua_form_save_settings_button,
802 .accua-field-save-btn {
803 position: relative;
804 min-width: 80px;
805 transition: background-color 0.2s ease, border-color 0.2s ease;
806 }
807
808 /* Saving state - border spinner animation with visible text */
809 .accua_form_save_settings_button.accua-saving-active,
810 .accua-field-save-btn.accua-saving-active {
811 pointer-events: none;
812 border-color: transparent !important;
813 background-image: none;
814 animation: accua-btn-border-spin 0.8s linear infinite;
815 box-shadow: inset 0 0 0 2px #0073aa;
816 }
817
818 @keyframes accua-btn-border-spin {
819 0% { box-shadow: inset 0 0 0 2px #0073aa, inset 0 -20px 0 0 rgba(0, 115, 170, 0.1); }
820 25% { box-shadow: inset 0 0 0 2px #0073aa, inset 20px 0 0 0 rgba(0, 115, 170, 0.1); }
821 50% { box-shadow: inset 0 0 0 2px #0073aa, inset 0 20px 0 0 rgba(0, 115, 170, 0.1); }
822 75% { box-shadow: inset 0 0 0 2px #0073aa, inset -20px 0 0 0 rgba(0, 115, 170, 0.1); }
823 100% { box-shadow: inset 0 0 0 2px #0073aa, inset 0 -20px 0 0 rgba(0, 115, 170, 0.1); }
824 }
825
826 /* Saved state - green background with checkmark after text */
827 .accua_form_save_settings_button.accua-saved-active,
828 .accua-field-save-btn.accua-saved-active {
829 background-color: #00a32a !important;
830 border-color: #00a32a !important;
831 color: #fff !important;
832 }
833
834 .accua_form_save_settings_button.accua-saved-active::after,
835 .accua-field-save-btn.accua-saved-active::after {
836 content: ' ✓';
837 font-weight: bold;
838 }
839
840 /* Error state */
841 .accua_form_save_settings_button.accua-error,
842 .accua-field-save-btn.accua-error {
843 background-color: #d63638 !important;
844 border-color: #d63638 !important;
845 color: #fff !important;
846 }
847
848 /* Reduce motion for accessibility */
849 @media (prefers-reduced-motion: reduce) {
850 .accua_form_save_settings_button.accua-saving-active,
851 .accua-field-save-btn.accua-saving-active {
852 animation: none;
853 box-shadow: inset 0 0 0 2px #0073aa;
854 }
855 }
856
857 /* Hide the old status containers - no longer needed */
858 .accua_form_save_settings_status {
859 display: none;
860 }
861
862
863 .widgets-holder-wrap.dashed{
864 border: 2px dashed #c3c4c7;
865 }
866 .widgets-holder-wrap.dashed h3 {
867 padding: 20px !important;
868 }
869 .widgets-holder-wrap.dashed .widgets-sortables.ui-sortable {
870 margin-top: 22px !important;
871 margin-bottom: 22px !important;
872 }
873
874 [data-tab="customise"] .accua_form_value[type="text"]{
875 width: 67%;
876 float: right;
877 }
878 [data-tab="customise"] .wp-picker-input-wrap .accua_form_value[type="text"]{
879 width: 100%;
880 float: right;
881 }
882
883 /* ============================================
884 Grafica e generali - Redesigned Style Editor
885 ============================================ */
886
887 /* Two-column layout */
888 .accua-customise-columns {
889 display: flex;
890 flex-wrap: wrap;
891 gap: 30px;
892 }
893
894 [data-tab="customise"] .accua-style-column {
895 flex: 1 1 calc(50% - 15px);
896 min-width: 280px;
897 box-sizing: border-box;
898 }
899
900 /* Section headers */
901 [data-tab="customise"] h2 {
902 font-size: 1.3em;
903 font-weight: 600;
904 color: #1d2327;
905 margin: 16px 0 12px 0;
906 padding: 0;
907 line-height: 1.4;
908 }
909
910 [data-tab="customise"] h2:first-of-type {
911 margin-top: 0;
912 }
913
914 /* General section paragraphs */
915 .accua-customise-columns > .accua-style-column > p {
916 margin: 0 0 12px 0;
917 padding: 0;
918 font-size: 13px;
919 line-height: 1.5;
920 }
921
922 /* Style row - consistent height with inline inputs */
923 .accua-style-row {
924 display: flex;
925 align-items: flex-start; /* Changed from center to allow vertical expansion */
926 gap: 8px;
927 padding: 6px 8px;
928 margin: 0 -8px;
929 min-height: 40px; /* Minimum height for consistency */
930 background: transparent;
931 border: none;
932 border-radius: 3px;
933 box-sizing: border-box;
934 transition: background-color 0.15s ease;
935 }
936
937 /* Align checkbox and label to the top when color picker is open */
938 .accua-style-row .accua-style-toggle,
939 .accua-style-row .accua-style-content {
940 padding-top: 4px; /* Align with first row of content */
941 }
942
943 /* Active state when checkbox is checked */
944 .accua-style-row:has(input[type="checkbox"]:checked) {
945 background: #f0f6fc;
946 }
947
948 /* Hover state for better interactivity feedback */
949 .accua-style-row:hover {
950 background: #f6f7f7;
951 }
952
953 .accua-style-row:has(input[type="checkbox"]:checked):hover {
954 background: #e8f2fb;
955 }
956
957 /* Toggle column (checkbox) */
958 .accua-style-toggle {
959 flex: 0 0 18px;
960 }
961
962 .accua-style-toggle input[type="checkbox"] {
963 margin: 0;
964 cursor: pointer;
965 }
966
967 /* Content column - inline layout, allows vertical expansion for color picker */
968 .accua-style-content {
969 flex: 1;
970 display: flex;
971 flex-direction: row;
972 flex-wrap: wrap; /* Allow wrapping for color picker to go below */
973 align-items: flex-start;
974 gap: 10px;
975 min-width: 0;
976 }
977
978 /* CSS Property label - compact inline style */
979 .accua-style-label {
980 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
981 font-size: 12px;
982 font-weight: 500;
983 color: #50575e;
984 min-width: 120px;
985 flex-shrink: 0;
986 cursor: pointer;
987 }
988
989 .accua-style-row:has(input[type="checkbox"]:checked) .accua-style-label {
990 color: #135e96;
991 font-weight: 600;
992 }
993
994 /* Text input styling */
995 .accua-style-content input[type="text"]:not(.wp-color-picker) {
996 width: 100px;
997 padding: 4px 8px;
998 font-size: 12px;
999 border: 1px solid #8c8f94;
1000 border-radius: 3px;
1001 background: #fff;
1002 box-sizing: border-box;
1003 }
1004
1005 .accua-style-content input[type="text"]:not(.wp-color-picker):focus {
1006 border-color: #2271b1;
1007 outline: none;
1008 box-shadow: 0 0 0 1px #2271b1;
1009 }
1010
1011 /* Hide input when checkbox is unchecked */
1012 .accua-style-row:not(:has(input[type="checkbox"]:checked)) .accua-style-content input[type="text"]:not(.wp-color-picker),
1013 .accua-style-row:not(:has(input[type="checkbox"]:checked)) .accua-style-content .wp-picker-container {
1014 display: none;
1015 }
1016
1017 /* Help text - hidden (redundant with labels) */
1018 .accua-style-help {
1019 display: none !important;
1020 }
1021
1022 /* Color swatch button - compact */
1023 .accua-style-content .wp-picker-container .wp-color-result {
1024 height: 28px;
1025 min-height: 28px;
1026 border-radius: 3px;
1027 box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
1028 margin: 0;
1029 }
1030
1031 /* Hide the "Seleziona un colore" label text - we show hex value instead */
1032 .accua-style-content .wp-picker-container .wp-color-result-text {
1033 display: none;
1034 }
1035
1036 /* Hex input field - ALWAYS visible and styled */
1037 .accua-style-content .wp-picker-container .wp-picker-input-wrap {
1038 display: inline-flex !important; /* Force always visible - WordPress hides by default */
1039 align-items: center;
1040 gap: 4px;
1041 margin-left: 6px;
1042 }
1043
1044 /* Hide only the screen reader text, not the entire label (which contains the input!) */
1045 .accua-style-content .wp-picker-container .wp-picker-input-wrap label .screen-reader-text {
1046 position: absolute;
1047 clip: rect(1px, 1px, 1px, 1px);
1048 width: 1px;
1049 height: 1px;
1050 overflow: hidden;
1051 padding: 0;
1052 margin: -1px;
1053 }
1054
1055 .accua-style-content .wp-picker-container .wp-color-picker {
1056 display: inline-block !important; /* Force always visible */
1057 width: 80px !important;
1058 padding: 4px 6px;
1059 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
1060 font-size: 12px;
1061 border: 1px solid #8c8f94;
1062 border-radius: 3px;
1063 background: #fff;
1064 box-sizing: border-box;
1065 height: 28px;
1066 }
1067
1068 .accua-style-content .wp-picker-container .wp-color-picker:focus {
1069 border-color: #2271b1;
1070 outline: none;
1071 box-shadow: 0 0 0 1px #2271b1;
1072 }
1073
1074 /* Clear button styling - compact */
1075 .accua-style-content .wp-picker-container .wp-picker-clear {
1076 padding: 4px 8px;
1077 font-size: 11px;
1078 line-height: 1.4;
1079 height: 28px;
1080 margin: 0;
1081 }
1082
1083 /* Color picker container - appears below the checkbox/label row */
1084 .accua-style-content .wp-picker-container {
1085 flex-basis: 100%;
1086 display: flex;
1087 flex-wrap: wrap;
1088 align-items: center;
1089 gap: 6px;
1090 }
1091
1092 /* Iris color picker holder - below the controls */
1093 .accua-style-content .wp-picker-container .wp-picker-holder {
1094 position: relative;
1095 z-index: 1;
1096 flex-basis: 100%;
1097 margin-top: 4px;
1098 }
1099
1100 /* Style row to accommodate expanded color picker */
1101 .accua-style-row:has(.wp-picker-active) {
1102 z-index: 1;
1103 }
1104
1105 /* Responsive adjustments */
1106 @media screen and (max-width: 1200px) {
1107 [data-tab="customise"] .accua-style-column {
1108 flex: 1 1 100%;
1109 }
1110
1111 [data-tab="customise"] h2:not(:first-of-type) {
1112 margin-top: 30px;
1113 }
1114 }
1115
1116 /* Legacy support - hide old elements */
1117 [data-tab="customise"] .default_value,
1118 [data-tab="customise"] .label_input,
1119 [data-tab="customise"] .label_container {
1120 display: none;
1121 }
1122
1123
1124 /* ==========================================================================
1125 Settings page — Tab panel overrides
1126 ========================================================================== */
1127
1128 #accua_settings_tabs > .accua-tabs__panel {
1129 min-height: 0;
1130 background: transparent;
1131 padding: 20px 0 0;
1132 }
1133
1134 /* Retention panel — transparent background */
1135 [data-tab="retention"] {
1136 min-height: 0;
1137 background: transparent;
1138 padding: 20px 10px 10px;
1139 }
1140
1141 /* Full-width panels in settings tabs */
1142 #accua_settings_tabs .accua-forms-metabox-holder {
1143 float: none;
1144 width: auto;
1145 margin-right: 0;
1146 }
1147
1148 /* ==========================================================================
1149 Settings page — Section layout
1150 Uses native WordPress .postbox + .inside for grouped settings sections.
1151 Only custom overrides below for grid layout and minor adjustments.
1152 ========================================================================== */
1153
1154 /* Postbox header h2: match native .hndle padding without cursor:move */
1155 .postbox > .postbox-header > h2 {
1156 padding: 1rem 12px;
1157 margin: 0;
1158 }
1159
1160 /* Danger variant */
1161 .postbox.accua-danger-zone {
1162 border-color: #d63638;
1163 }
1164
1165 /* Messages tab — 2-column grid */
1166 .accua-settings-grid {
1167 display: grid;
1168 grid-template-columns: repeat(2, 1fr);
1169 gap: 16px;
1170 }
1171
1172 .accua-settings-grid > .postbox {
1173 min-height: 320px;
1174 margin-bottom: 0;
1175 }
1176
1177 @media screen and (max-width: 1200px) {
1178 .accua-settings-grid {
1179 grid-template-columns: 1fr;
1180 }
1181 }
1182
1183 /* ==========================================================================
1184 Form edit page layout — Fields tab helpers
1185 ========================================================================== */
1186
1187 #accua_tabs [data-tab="fields"] #widgets-left {
1188 padding-top: 0;
1189 margin-right: 0;
1190 }
1191
1192 #accua_tabs [data-tab="fields"] #widgets-right {
1193 width: 100%;
1194 }
1195
1196 #accua_tabs [data-tab="fields"] #widgets-right .widgets-holder-wrap {
1197 margin-top: 0;
1198 }
1199
1200 /* note */
1201
1202 input#delete-sub-data, input#delete-note {
1203 background: none;
1204 border: none;
1205 padding: 0;
1206 text-decoration: underline;
1207 cursor: pointer;
1208 }
1209 input#delete-note {
1210 display: inline-block;
1211 }
1212 .system-note .note_content {
1213 padding: 10px;
1214 background: #efefef;
1215 position: relative;
1216 line-height: 18px;
1217 font-size: 14px;
1218 }
1219 .system-note .note_content::after {
1220 content: "";
1221 display: block;
1222 position: absolute;
1223 bottom: -10px;
1224 left: 20px;
1225 width: 0;
1226 height: 0;
1227 border-width: 10px 10px 0 0;
1228 border-style: solid;
1229 border-color: #efefef transparent;
1230 }
1231 .system-note p.meta, form#delete-note {
1232 padding: 10px;
1233 color: #999;
1234 margin: 0;
1235 display: inline-block;
1236 }
1237 form#delete-note {
1238 padding: 0;
1239 }
1240
1241 /* Lead status row: select + tooltip + progress aligned */
1242 .accua-lead-status-row {
1243 display: flex;
1244 align-items: center;
1245 gap: 4px;
1246 margin-bottom: 16px;
1247 }
1248
1249 .accua-lead-status-row .dashicons-editor-help {
1250 color: #787c82;
1251 cursor: pointer;
1252 }
1253
1254
1255
1256 th#lead_status {
1257 width: 200px;
1258 }
1259
1260 /* ============================================
1261 Restore Default Button Styles
1262 ============================================ */
1263
1264 .accua-restore-default-wrapper {
1265 margin-top: 12px;
1266 padding-top: 12px;
1267 border-top: 1px solid #f0f0f1;
1268 }
1269
1270 .accua-restore-default-wrapper .description {
1271 color: #787c82;
1272 font-size: 12px;
1273 font-style: italic;
1274 margin-left: 8px;
1275 }
1276
1277 /* Success state */
1278 .accua-restore-default-btn.accua-restored {
1279 color: #00a32a !important;
1280 }
1281
1282 /* Error state */
1283 .accua-restore-default-btn.accua-error {
1284 color: #d63638 !important;
1285 }
1286
1287 /* ==========================================================================
1288 Dashboard page
1289 ========================================================================== */
1290
1291 #accua-forms-graph-content {
1292 padding: 20px;
1293 }
1294
1295 #accua-form-report-graph {
1296 height: 300px;
1297 }
1298
1299 #accua_dashboard_page .postbox > .inside {
1300 padding: 20px;
1301 }
1302
1303 /* Single submission page */
1304 #accua_forms_submissions_list_page #poststuff .postbox > .inside {
1305 padding: 16px;
1306 }
1307
1308 #accua_forms_submissions_list_page #poststuff #note_site_user {
1309 width: 100%;
1310 margin-bottom: 8px;
1311 }
1312
1313 #accua_forms_submissions_list_page #accua-notes-form {
1314 margin-bottom: 12px;
1315 }
1316
1317 #accua_forms_submissions_list_page #post-body-content .widefat td:first-child {
1318 width: 140px;
1319 font-weight: 600;
1320 }
1321
1322 #accua_forms_submissions_list_page #post-body-content .widefat .accua-field-value {
1323 white-space: pre-wrap;
1324 }
1325
1326 #accua_forms_submissions_list_page #post-body-content .postbox + .postbox {
1327 margin-top: 20px;
1328 }
1329
1330 #accua_forms_submissions_list_page #postbox-container-1 .postbox + .postbox {
1331 margin-top: 20px;
1332 }
1333
1334 #accua_forms_submissions_list_page #postbox-container-1 .inside p:first-child {
1335 margin-top: 0;
1336 }
1337
1338 #accua_dashboard_page .submitdelete {
1339 color: #b32d2e;
1340 }
1341
1342 #accua_dashboard_page .submitdelete:hover {
1343 color: #a00;
1344 }
1345
1346 #accua_dashboard_page td.column-afs_referrer,
1347 #accua_dashboard_page td.column-afs_uri {
1348 overflow: hidden;
1349 white-space: nowrap;
1350 text-overflow: ellipsis;
1351 }
1352
1353 #accua_dashboard_page .column-actions {
1354 white-space: nowrap;
1355 }
1356
1357 #accua_forms_submissions_list_page td.column-referrer,
1358 #accua_forms_submissions_list_page td.column-uri {
1359 overflow: hidden;
1360 white-space: nowrap;
1361 text-overflow: ellipsis;
1362 }
1363
1364 #accua_forms_submissions_list_page .submitdelete.deletion {
1365 color: #b32d2e;
1366 }
1367
1368 #accua_forms_submissions_list_page .submitdelete.deletion:hover {
1369 color: #a00;
1370 }
1371
1372 /* Notes */
1373 .accua-note {
1374 padding: 12px 0;
1375 border-top: 1px solid #f0f0f1;
1376 }
1377
1378 .accua-note:first-child {
1379 border-top: none;
1380 padding-top: 0;
1381 }
1382
1383 .accua-note-content {
1384 white-space: pre-wrap;
1385 margin-bottom: 4px;
1386 }
1387
1388 .accua-note-meta {
1389 color: #787c82;
1390 font-size: 12px;
1391 margin: 0;
1392 }
1393
1394 .accua-note-meta .row-actions {
1395 position: static;
1396 padding: 0;
1397 }
1398
1399 .accua-note-meta .button-link {
1400 color: #b32d2e;
1401 text-decoration: none;
1402 font-size: 12px;
1403 }
1404
1405 .accua-note-meta .button-link:hover,
1406 .accua-note-meta .button-link:focus {
1407 color: #a00;
1408 text-decoration: underline;
1409 }
1410
1411