PluginProbe
Contact Forms by Cimatti / 2.2.0
Contact Forms by Cimatti v2.2.0
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.0, at assets/css/admin.css

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