PluginProbe
Contact Forms by Cimatti / 2.2.4
Contact Forms by Cimatti v2.2.4
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.4, at assets/css/admin.css

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