PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 4.0.8
Visualizer – Tables & Charts Manager with Built-in AI Generator v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 All 149 releases
← All changes | css/library.css +520 -6 3.10.04.0.8 View file →
@@ -4,8 +4,12 @@
4 4 *::after {
5 5 box-sizing: border-box;
6 6 }
7 7
8 +body {
9 + height: auto;
10 +}
11 +
8 12 #visualizer-icon {
9 13 background-image: url("../images/icon.png");
10 14 }
11 15
@@ -33,8 +37,13 @@
33 37 }
34 38 #visualizer-content-wrapper {
35 39 padding: 0;
36 40 }
41 +
42 +.visualizer-banner {
43 + margin: 40px 0;
44 +}
45 +
37 46 #visualizer-library {
38 47 width: auto;
39 48 margin: 20px -10px;
40 49 display: flex;
@@ -137,10 +146,10 @@
137 146 }
138 147 .visualizer-chart-action .tooltip-text::before {
139 148 content: '';
140 149 position: absolute;
141 - display: block;
142 - width: 0px;
150 + display: block;
151 + width: 0px;
143 152 left: 50%;
144 153 top: 0;
145 154 border: 10px solid transparent;
146 155 border-top: 0;
@@ -155,8 +164,12 @@
155 164 width: 16px;
156 165 height: 16px;
157 166 font-size: 16px;
158 167 }
168 +.visualizer-chart-action .visualizer-action-label {
169 + font-size: 12px;
170 + line-height: 1;
171 +}
159 172 .visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action:hover,
160 173 .visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action:focus {
161 174 color: #3F3F3F;
162 175 background: #ffffff;
@@ -161,12 +174,24 @@
161 174 color: #3F3F3F;
162 175 background: #ffffff;
163 176 }
164 177
165 -.visualizer-chart-action.visualizer-chart-delete,
166 -.visualizer-chart-action.visualizer-nochart-delete {
178 +.visualizer-chart-action.visualizer-chart-edit,
179 +.visualizer-chart-action.visualizer-nochart-edit {
167 180 margin-right: auto;
181 + width: auto;
182 + height: auto;
183 + padding: 0 10px;
184 + gap: 6px;
168 185 }
186 +.visualizer-chart-action.visualizer-chart-edit .dashicons,
187 +.visualizer-chart-action.visualizer-nochart-edit .dashicons {
188 + margin-right: 0;
189 + line-height: 1;
190 +}
191 +.visualizer-chart-action.visualizer-chart-edit .tooltip-text {
192 + display: none;
193 +}
169 194 .visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-delete:hover,
170 195 .visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-nochart-delete:hover {
171 196 color: #DA1E28;
172 197 }
@@ -251,11 +276,15 @@
251 276 text-align: center;
252 277 color: #FFFFFF;
253 278 justify-content: center;
254 279 }
280 +.visualizer-sidebar-box .button.button-secondary{
281 + background: #ffffff;
282 + color: #007CBA;
283 +}
255 284 .visualizer-sidebar-box .we-offer{
256 - background-color: transparent;
257 - color: #007CBA;
285 + background-color: transparent;
286 + color: #007CBA;
258 287 font-weight: 400;
259 288 padding: 0px;
260 289 font-size: 14px;
261 290 font-style: italic;
@@ -381,8 +410,17 @@
381 410 }
382 411 #visualizer-sidebar .visualizer-sidebar-box p {
383 412 margin-bottom: 0;
384 413 }
414 +#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action {
415 + display: flex;
416 + gap: 20px;
417 + margin-top: 25px;
418 +}
419 +#visualizer-sidebar .visualizer-sidebar-box p.vz-sidebar-box-action .button{
420 + width: 100%;
421 + text-align: center;
422 +}
385 423 #visualizer-sidebar.one-columns {
386 424 border-top: 5px solid #007CBA;
387 425 }
388 426
@@ -396,8 +434,10 @@
396 434 }
397 435
398 436 div.visualizer-library-form .viz-filter {
399 437 vertical-align: middle;
438 + min-height: 30px;
439 + line-height: 1;
400 440 }
401 441
402 442 button.media-modal-close {
403 443 display: none !important;
@@ -517,4 +557,478 @@
517 557 .visualizer-chart{
518 558 height: calc(100% - 24px);
519 559 }
520 560 }
561 +
562 +
563 +
564 +.vizualizer-renew-notice-overlay {
565 + display: none;
566 + position: fixed;
567 + top: 0;
568 + left: 0;
569 + width: 100%;
570 + height: 100%;
571 + background-color: rgba(0, 0, 0, 0.5);
572 + z-index: 999;
573 +}
574 +
575 +.vizualizer-renew-notice-popup {
576 + display: none;
577 + position: fixed;
578 + top: 50%;
579 + left: 50%;
580 + transform: translate(-50%, -50%);
581 + background-color: #fff;
582 + z-index: 1000;
583 + padding: 20px;
584 + border: 1px solid #ccc;
585 + border-radius: 8px;
586 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
587 + max-width: 400px;
588 + font-weight: bold;
589 + margin-bottom: 20px;
590 +}
591 +
592 +.vizualizer-renew-notice-heading {
593 + color: #d32f2f;
594 + text-align: left;
595 + margin-bottom: 10px;
596 +}
597 +
598 +.vizualizer-renew-notice-message {
599 + word-wrap: break-word;
600 + width: 250px;
601 +}
602 +
603 +.vizualizer-renew-notice-buttons-container {
604 + display: grid;
605 + grid-template-columns: 1fr;
606 + gap: 10px;
607 + text-align: center;
608 + margin-top: 20px;
609 +}
610 +
611 +.vizualizer-renew-notice-button {
612 + padding: 10px 20px;
613 + cursor: pointer;
614 + color: white;
615 + border: none;
616 + text-align: center;
617 + text-decoration: none;
618 + display: inline-block;
619 + font-size: 16px;
620 + width: 200px;
621 + height: 50px;
622 + border-radius: 4px;
623 + transition: background-color 0.3s;
624 + font-weight: bold;
625 + margin-top: 10px;
626 +}
627 +
628 +.vizualizer-renew-notice-renew-button {
629 + background-color: #008CBA;
630 +}
631 +
632 +.vizualizer-renew-notice-activate-button {
633 + background-color: #4CAF50;
634 +}
635 +
636 +.vizualizer-renew-notice-close-icon {
637 + position: absolute;
638 + top: -10px;
639 + right: -70px;
640 + cursor: pointer;
641 + color: #333;
642 + background: none;
643 + border: none;
644 + padding: 0;
645 + outline: none;
646 + /* Reset button styles */
647 + display: inline-block;
648 + font: inherit;
649 + text-align: inherit;
650 + text-decoration: none;
651 +}
652 +
653 +/* ── View toggle buttons ── */
654 +span.viz-view-toggle-group {
655 + display: inline-flex;
656 + align-items: center;
657 + gap: 4px;
658 + margin-left: 0;
659 + margin-right: 8px;
660 + vertical-align: middle;
661 + border: 1px solid #c3c4c7;
662 + border-radius: 4px;
663 + padding: 1px;
664 + background: #f6f7f7;
665 +}
666 +
667 +.viz-view-toggle {
668 + display: inline-flex;
669 + align-items: center;
670 + justify-content: center;
671 + width: 28px;
672 + height: 28px;
673 + padding: 0;
674 + cursor: pointer;
675 + background: transparent;
676 + border: none;
677 + border-radius: 3px;
678 + color: #646970;
679 + line-height: 1;
680 + text-decoration: none;
681 +}
682 +
683 +.viz-view-toggle.active {
684 + background: #007CBA;
685 + color: #fff;
686 +}
687 +
688 +.viz-view-toggle:hover:not(.active) {
689 + background: #e0e0e0;
690 + color: #1d2327;
691 +}
692 +
693 +.viz-view-toggle:focus {
694 + outline: 2px solid #007CBA;
695 + outline-offset: 0;
696 + box-shadow: none;
697 +}
698 +
699 +/* ── Edit button — more visible ── */
700 +.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit {
701 + display: flex;
702 +}
703 +
704 +.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit:hover,
705 +.visualizer-action-group:not(.visualizer-nochart) .visualizer-chart-action.visualizer-chart-edit:focus {
706 + background-color: #0069a6 !important;
707 + color: #fff !important;
708 +}
709 +
710 +/* ── Compact upsell banner ── */
711 +#visualizer-library .items--upsell {
712 + width: 100%;
713 +}
714 +
715 +.viz-upsell-banner {
716 + display: flex;
717 + align-items: center;
718 + gap: 12px;
719 + background: #fff;
720 + border-left: 4px solid #007CBA;
721 + padding: 12px 16px;
722 + margin-bottom: 10px;
723 +}
724 +
725 +.viz-upsell-banner__icon {
726 + color: #007CBA;
727 + font-size: 20px;
728 + flex-shrink: 0;
729 +}
730 +
731 +.viz-upsell-banner__text {
732 + flex: 1;
733 + display: flex;
734 + flex-direction: column;
735 + gap: 2px;
736 +}
737 +
738 +.viz-upsell-banner__text strong {
739 + font-size: 13px;
740 + font-weight: 600;
741 + color: #1d2327;
742 +}
743 +
744 +.viz-upsell-banner__text span {
745 + font-size: 12px;
746 + color: #50575e;
747 +}
748 +
749 +.viz-upsell-banner__actions {
750 + display: flex;
751 + gap: 8px;
752 + flex-shrink: 0;
753 +}
754 +
755 +/* ── Chart type badge (list view only) ── */
756 +.viz-chart-type-badge {
757 + display: none;
758 + font-size: 11px;
759 + font-weight: 500;
760 + text-transform: capitalize;
761 + background: #e8f0f8;
762 + color: #007CBA;
763 + border: 1px solid #c3daf9;
764 + border-radius: 10px;
765 + padding: 2px 8px;
766 + white-space: nowrap;
767 + flex-shrink: 0;
768 +}
769 +
770 +/* ── List view: WP-style table ── */
771 +#visualizer-library.view-list {
772 + display: block;
773 + margin: 20px 0;
774 +}
775 +
776 +.viz-charts-table {
777 + border-collapse: collapse;
778 + width: 100%;
779 +}
780 +
781 +.viz-charts-table thead th {
782 + padding: 10px 12px;
783 + font-size: 12px;
784 + font-weight: 700;
785 + color: #1d2327;
786 + text-align: left;
787 + background: #f6f7f7;
788 + border-bottom: 2px solid #c3c4c7;
789 + white-space: nowrap;
790 +}
791 +
792 +.viz-charts-table tbody tr {
793 + background: #fff;
794 + border-bottom: 1px solid #f0f0f1;
795 + transition: background 0.1s;
796 +}
797 +
798 +.viz-charts-table tbody tr:hover {
799 + background: #f6f7f7;
800 +}
801 +
802 +.viz-charts-table td {
803 + padding: 10px 12px;
804 + vertical-align: middle;
805 + font-size: 13px;
806 + color: #3c434a;
807 +}
808 +
809 +/* Column widths */
810 +.viz-charts-table .col-id {
811 + width: 50px;
812 + font-weight: 600;
813 + color: #787c82;
814 +}
815 +
816 +.viz-charts-table .col-title {
817 + font-weight: 600;
818 + color: #1d2327;
819 +}
820 +
821 +.viz-charts-table .col-type {
822 + width: 110px;
823 +}
824 +
825 +.viz-charts-table .col-shortcode {
826 + width: 260px;
827 +}
828 +
829 +.viz-charts-table .col-actions {
830 + width: 1%;
831 + white-space: nowrap;
832 +}
833 +
834 +/* Type badge in table */
835 +.viz-charts-table .viz-chart-type-badge {
836 + display: inline-block;
837 +}
838 +
839 +/* Shortcode cell */
840 +.viz-shortcode-display {
841 + display: inline-block;
842 + font-size: 11px;
843 + background: #f6f7f7;
844 + border: 1px solid #ddd;
845 + border-radius: 3px;
846 + padding: 3px 7px;
847 + color: #50575e;
848 + white-space: nowrap;
849 + max-width: 260px;
850 + overflow: hidden;
851 + text-overflow: ellipsis;
852 + vertical-align: middle;
853 + font-family: Consolas, Monaco, monospace;
854 + cursor: pointer;
855 + transition: background 0.15s, border-color 0.15s;
856 +}
857 +
858 +.viz-shortcode-display:hover {
859 + background: #e8f0f8;
860 + border-color: #bfdbfe;
861 + color: #1d2327;
862 +}
863 +
864 +.viz-shortcode-display.viz-shortcode-copied {
865 + background: #dcfce7;
866 + border-color: #86efac;
867 + color: #15803d;
868 +}
869 +
870 +/* Action buttons in table: colored bordered icon buttons */
871 +.viz-charts-table .visualizer-action-group {
872 + display: flex;
873 + flex-wrap: nowrap;
874 + gap: 4px;
875 + justify-content: flex-end;
876 +}
877 +
878 +.viz-charts-table .visualizer-chart-action {
879 + width: 32px;
880 + height: 32px;
881 + border: 1px solid #c3c4c7;
882 + border-radius: 4px;
883 + background: #fff;
884 + color: #646970;
885 + display: inline-flex;
886 + align-items: center;
887 + justify-content: center;
888 +}
889 +
890 +.viz-charts-table .visualizer-chart-action:hover {
891 + background: #f6f7f7;
892 +}
893 +
894 +.viz-charts-table .visualizer-chart-action.visualizer-chart-delete {
895 + border-color: #fca5a5;
896 + color: #dc2626;
897 + margin-right: 0;
898 +}
899 +
900 +.viz-charts-table .visualizer-chart-action.visualizer-chart-delete:hover {
901 + background: #fef2f2;
902 +}
903 +
904 +.viz-charts-table .visualizer-chart-action.visualizer-chart-shortcode {
905 + color: #2563eb;
906 + border-color: #bfdbfe;
907 +}
908 +
909 +.viz-charts-table .visualizer-chart-action.visualizer-chart-shortcode:hover {
910 + background: #eff6ff;
911 +}
912 +
913 +.viz-charts-table .visualizer-chart-action.visualizer-chart-clone,
914 +.viz-charts-table .visualizer-chart-action.visualizer-chart-export {
915 + color: #64748b;
916 + border-color: #cbd5e1;
917 +}
918 +
919 +.viz-charts-table .visualizer-chart-action.visualizer-chart-clone:hover,
920 +.viz-charts-table .visualizer-chart-action.visualizer-chart-export:hover {
921 + background: #f8fafc;
922 +}
923 +
924 +.viz-charts-table .visualizer-action-group .visualizer-chart-action.visualizer-chart-edit {
925 + width: auto;
926 + height: auto;
927 + padding: 0 8px;
928 + gap: 6px;
929 +}
930 +
931 +/* Upsell banner after the table */
932 +#visualizer-library.view-list .items--upsell {
933 + margin-top: 12px;
934 +}
935 +
936 +.viz-add-new-group {
937 + display: inline-flex;
938 + align-items: center;
939 + position: relative;
940 +}
941 +
942 +.viz-add-new-group .add-new-h2 {
943 + margin-right: 0;
944 + border-top-right-radius: 0;
945 + border-bottom-right-radius: 0;
946 + min-height: 30px;
947 + line-height: 2.15384615;
948 +}
949 +
950 +.viz-add-new-toggle {
951 + display: inline-flex;
952 + align-items: center;
953 + justify-content: center;
954 + width: 28px;
955 + height: 30px;
956 + margin-left: 0;
957 + border: 1px solid #2271b1;
958 + border-left: 0;
959 + border-radius: 0 3px 3px 0;
960 + background: #f6f7f7;
961 + color: #2271b1;
962 + cursor: pointer;
963 + position: relative;
964 + top: -3px;
965 +}
966 +
967 +.viz-add-new-toggle .dashicons {
968 + font-size: 16px;
969 + line-height: 1;
970 + display: flex;
971 + justify-content: center;
972 + align-items: center;
973 +}
974 +
975 +.viz-add-new-toggle .dashicon {
976 + display: flex;
977 + justify-content: center;
978 + align-items: center;
979 +}
980 +
981 +.viz-add-new-toggle:hover,
982 +.viz-add-new-toggle:focus {
983 + background: #2271b1;
984 + color: #fff;
985 + outline: none;
986 +}
987 +
988 +.viz-add-new-menu {
989 + position: absolute;
990 + top: 100%;
991 + left: 0;
992 + margin-top: 2px;
993 + min-width: 190px;
994 + background: #fff;
995 + border: 1px solid #dcdcde;
996 + border-radius: 6px;
997 + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
998 + padding: 6px 0;
999 + display: none;
1000 + z-index: 100001;
1001 +}
1002 +
1003 +.viz-add-new-group.is-open .viz-add-new-menu {
1004 + display: block;
1005 +}
1006 +
1007 +.viz-add-new-item {
1008 + width: 100%;
1009 + text-align: left;
1010 + padding: 8px 12px;
1011 + background: none;
1012 + border: none;
1013 + cursor: pointer;
1014 + font-size: 13px;
1015 + color: #1d2327;
1016 +}
1017 +
1018 +.viz-add-new-item:hover,
1019 +.viz-add-new-item:focus {
1020 + background: #f6f7f7;
1021 + outline: none;
1022 +}
1023 +
1024 +@media screen and (max-width: 782px) {
1025 + .viz-add-new-toggle {
1026 + min-height: 33px;
1027 + }
1028 +}
1029 +
1030 +.toplevel_page_visualizer .button,
1031 +.toplevel_page_visualizer button {
1032 + min-height: 30px;
1033 + line-height: 2.15384615;
1034 +}