PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.7
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.7
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 3.10.4 All 148 releases
← All changes | css/style-wizard.css +48 -246 4.0.53.11.7 View file →
@@ -243,15 +243,8 @@
243 243 padding: 24px 0;
244 244 position: relative;
245 245 border-bottom: 1px solid #D9D9D9;
246 246 }
247 -.vz-form-wrap .form-block.no-sep{
248 - border-bottom: 0;
249 - padding-bottom: 12px;
250 -}
251 -.vz-form-wrap .form-block.vz-final-block{
252 - padding: 12px 0;
253 -}
254 247 .vz-form-wrap .form-block:last-child{
255 248 border-bottom: 0;
256 249 }
257 250 .vz-form-wrap .form-label{
@@ -954,23 +947,8 @@
954 947 border-top: 1px solid #D9D9D9;
955 948 padding-left: 20px;
956 949 padding-right: 20px;
957 950 }
958 -.vz-accordion-title--static{
959 - padding: 22px 30px 22px 80px;
960 -}
961 -.vz-accordion-title--static .vz-checkbox{
962 - position: absolute;
963 - left: 30px;
964 - top: 50%;
965 - margin-top: -10px;
966 - width: 20px;
967 - height: 20px;
968 - z-index: 12;
969 -}
970 -.vz-accordion-content--static{
971 - display: block;
972 -}
973 951
974 952 .vz-features-list ul li{
975 953 padding: 25px 0;
976 954 display: flex;
@@ -989,157 +967,17 @@
989 967 }
990 968 .vz-features-list ul li .txt{
991 969 width: 100%;
992 970 }
993 -.vz-final-options{
994 - display: flex;
995 - flex-direction: column;
996 - gap: 10px;
997 -}
998 -.vz-option-card{
999 - display: flex;
1000 - align-items: center;
1001 - gap: 16px;
1002 - padding: 16px 18px;
1003 - border: 1px solid #E5E7EB;
1004 - border-radius: 8px;
1005 - background: #fff;
1006 - position: relative;
1007 -}
1008 -.vz-option-check{
1009 - width: 20px;
1010 - height: 20px;
1011 - display: flex;
1012 - align-items: center;
1013 - justify-content: center;
1014 - flex-shrink: 0;
1015 -}
1016 -.vz-option-check input[type=checkbox]{
1017 - width: 18px;
1018 - height: 18px;
1019 -}
1020 -.vz-option-icon{
1021 - width: 40px;
1022 - height: 40px;
1023 - border-radius: 8px;
1024 - background: #F3F4F6;
1025 - display: flex;
1026 - align-items: center;
1027 - justify-content: center;
1028 - flex-shrink: 0;
1029 -}
1030 -.vz-option-icon img{
1031 - display: block;
1032 - max-width: 24px;
1033 - max-height: 24px;
1034 -}
1035 -.vz-option-body{
1036 - flex: 1;
1037 -}
1038 -.vz-option-title{
971 +.pro-label{
972 + background: #007CBA;
973 + border-radius: 6px;
974 + color: #ffffff;
975 + text-transform: uppercase;
1039 976 font-size: 16px;
1040 - font-weight: 600;
1041 - color: #0f172a;
1042 - display: flex;
1043 - align-items: center;
1044 - gap: 8px;
1045 - margin-bottom: 4px;
977 + line-height: 19px;
978 + padding: 2px 9px 4px;
1046 979 }
1047 -.vz-option-title .pro-label.free-label{
1048 - font-size: 11px;
1049 - line-height: 14px;
1050 - padding: 2px 8px 3px;
1051 -}
1052 -.vz-option-card--newsletter .vz-option-icon{
1053 - background: #E6F3F3;
1054 - color: #39C3D2;
1055 -}
1056 -.vz-option-card--newsletter .vz-option-icon .dashicons{
1057 - font-size: 22px;
1058 - width: 22px;
1059 - height: 22px;
1060 -}
1061 -.vz-option-card--newsletter .vz-option-body{
1062 - display: flex;
1063 - flex-direction: column;
1064 - gap: 6px;
1065 -}
1066 -.vz-option-card--newsletter .vz-option-input{
1067 - max-width: 320px;
1068 - display: flex;
1069 - align-items: center;
1070 - gap: 8px;
1071 -}
1072 -.vz-option-card--newsletter .vz-save-email[disabled]{
1073 - opacity: 0.6;
1074 - cursor: not-allowed;
1075 -}
1076 -.vz-option-card--newsletter .vz-field-error{
1077 - display: block;
1078 - margin-top: 6px;
1079 -}
1080 -.vz-option-card--newsletter .vz-change-email{
1081 - background: transparent;
1082 - border: 0;
1083 - color: #39C3D2;
1084 - text-decoration: underline;
1085 - cursor: pointer;
1086 - padding: 0 0 0 6px;
1087 - font-size: 13px;
1088 -}
1089 -.vz-option-card--newsletter .vz-email-text{
1090 - color: #39C3D2;
1091 - font-weight: 600;
1092 - padding-left: 6px;
1093 -}
1094 -.vz-install-status{
1095 - position: absolute;
1096 - right: 14px;
1097 - top: 14px;
1098 - width: 18px;
1099 - height: 18px;
1100 - border-radius: 50%;
1101 - border: 2px solid #cbd5e1;
1102 - display: none;
1103 - align-items: center;
1104 - justify-content: center;
1105 - font-size: 12px;
1106 - line-height: 1;
1107 - color: #ffffff;
1108 -}
1109 -.vz-install-status.is-installing{
1110 - display: flex;
1111 - border-color: #39C3D2;
1112 - border-top-color: transparent;
1113 - animation: spin 1s linear infinite;
1114 -}
1115 -.vz-install-status.is-done{
1116 - display: flex;
1117 - background: #00AA63;
1118 - border-color: #00AA63;
1119 -}
1120 -.vz-install-status.is-error{
1121 - display: flex;
1122 - background: #d63638;
1123 - border-color: #d63638;
1124 -}
1125 -.vz-install-status.is-done:before{
1126 - content: "✓";
1127 -}
1128 -.vz-install-status.is-error:before{
1129 - content: "!";
1130 -}
1131 -.pro-label{
1132 - display: inline;
1133 - width: 74px;
1134 - height: 17px;
1135 - border: none;
1136 - color: #fff;
1137 - z-index: 4;
1138 - background: #d63638;
1139 - letter-spacing: 0.5px;
1140 - text-align: center;
1141 -}
1142 980 .pro-label.free-label{
1143 981 background: #BDE6EB;
1144 982 border-radius: 6px;
1145 983 color: #39C3D2;
@@ -1149,25 +987,36 @@
1149 987 padding: 2px 9px 4px;
1150 988 }
1151 989 /* visualizer accordion style End */
1152 990 .vz-chart-list{
1153 - max-width: 1100px;
1154 - padding: 0;
991 +/* max-width: 780px;*/
992 + padding: 0 18px;
1155 993 margin-bottom: 40px;
1156 - margin-left: auto;
1157 - margin-right: auto;
1158 994 }
1159 995 .vz-chart-list > ul{
1160 - display: grid;
1161 - grid-template-columns: repeat(5, minmax(0, 1fr));
1162 - gap: 16px;
1163 - align-items: stretch;
996 + display: flex;
997 + flex-wrap: wrap;
998 + justify-content: space-between;
1164 999 }
1165 1000 .vz-chart-list .slick-arrow{
1166 - display: none;
1001 + position: absolute;
1002 + width: 30px;
1003 + top: 50%;
1004 + height: 30px;
1005 + margin-top: -15px;
1006 + font-size: 0;
1007 + color: #757575;
1008 + display: grid;
1009 + place-items: center;
1010 + border: 0;
1011 + background: transparent;
1012 + cursor: pointer;
1167 1013 }
1168 1014 .vz-chart-list .slick-arrow:before{
1169 - display: none;
1015 + display: block;
1016 + font-family: "dashicons";
1017 + font-size: 24px;
1018 + line-height: 1;
1170 1019 }
1171 1020 .vz-chart-list .slick-arrow.slick-prev{
1172 1021 left: -42px;
1173 1022 }
@@ -1180,21 +1029,21 @@
1180 1029 .vz-chart-list .slick-arrow.slick-next:before{
1181 1030 content: "\f345";
1182 1031 }
1183 1032 .vz-chart-list > ul > li{
1184 - width: 100%;
1185 - max-width: 100%;
1186 - padding-bottom: 0;
1033 + width: 48%;
1034 + max-width: 362px;
1035 + padding-bottom: 60px;
1187 1036 }
1188 1037 .vz-chart-list .slick-slide{
1189 - margin-right: 0;
1038 + margin-right: 34px;
1190 1039 }
1191 1040 .vz-chart-option{
1192 - width: 100%;
1041 + width: 317px;
1193 1042 position: relative;
1194 1043 display: flex;
1195 1044 flex-wrap: wrap;
1196 - padding: 12px 12px 16px;
1045 + padding: 12px 12px 20px;
1197 1046 }
1198 1047 .vz-chart-option .img{
1199 1048 order: 1;
1200 1049 position: relative;
@@ -1200,11 +1049,10 @@
1200 1049 position: relative;
1201 1050 z-index: 1;
1202 1051 display: block;
1203 1052 width: 100%;
1204 - max-width: 100%;
1205 - aspect-ratio: 23 / 18;
1206 - height: auto;
1053 + max-width: 338px;
1054 + height: 198px;
1207 1055 background-color: #ffffff;
1208 1056 margin-bottom: 20px;
1209 1057 background-image: url(../images/chart_types_v395.png);
1210 1058 background-repeat: no-repeat;
@@ -1211,57 +1059,26 @@
1211 1059 background-position: center center;
1212 1060 transition: all .3s ease-in-out;
1213 1061 /* filter: grayscale(100%);
1214 1062 -webkit-filter: grayscale(100%); */
1215 - --wizard-sprite-scale: 0.45;
1216 - background-size: calc(900px * var(--wizard-sprite-scale)) calc(1150px * var(--wizard-sprite-scale));
1063 + background-size: 900px 1150px;
1217 1064 filter: grayscale(100%);
1218 1065 }
1219 1066 .vz-chart-option .img.type-box-pie{
1220 - background-position: calc(-5px * var(--wizard-sprite-scale)) calc(-17px * var(--wizard-sprite-scale));
1067 + background-position: -5px -17px;
1221 1068 }
1222 1069 .vz-chart-option .img.type-box-bar{
1223 - background-position: calc(-305px * var(--wizard-sprite-scale)) calc(-235px * var(--wizard-sprite-scale));
1070 + background-position: -305px -235px;
1224 1071 }
1225 -.vz-chart-option .img.type-box-area{
1226 - background-position: calc(-8px * var(--wizard-sprite-scale)) calc(-225px * var(--wizard-sprite-scale));
1227 -}
1228 -.vz-chart-option .img.type-box-scatter{
1229 - background-position: calc(-300px * var(--wizard-sprite-scale)) calc(0px * var(--wizard-sprite-scale));
1230 -}
1231 -.vz-chart-option .img.type-box-gauge{
1232 - background-position: calc(-7px * var(--wizard-sprite-scale)) calc(-450px * var(--wizard-sprite-scale));
1233 -}
1234 1072 .vz-chart-option .img.type-box-line{
1235 - background-position: calc(-606px * var(--wizard-sprite-scale)) calc(-14px * var(--wizard-sprite-scale));
1073 + background-position: -606px -14px;
1236 1074 }
1237 1075 .vz-chart-option .img.type-box-tabular{
1238 - background-position: calc(-306px * var(--wizard-sprite-scale)) calc(-693px * var(--wizard-sprite-scale));
1076 + background-position: -306px -693px;
1239 1077 }
1240 1078 .vz-chart-option .img.type-box-geo{
1241 - background-position: calc(-603px * var(--wizard-sprite-scale)) calc(-459px * var(--wizard-sprite-scale));
1079 + background-position: -603px -459px;
1242 1080 }
1243 -.vz-chart-option .img.type-box-candlestick{
1244 - background-position: calc(-304px * var(--wizard-sprite-scale)) calc(-450px * var(--wizard-sprite-scale));
1245 -}
1246 -.vz-chart-option .img.type-box-bubble{
1247 - background-position: calc(-604px * var(--wizard-sprite-scale)) calc(-906px * var(--wizard-sprite-scale));
1248 -}
1249 -.vz-chart-option .img.type-box-column{
1250 - background-position: calc(-600px * var(--wizard-sprite-scale)) calc(-225px * var(--wizard-sprite-scale));
1251 -}
1252 -.vz-chart-option .img.type-box-timeline{
1253 - background-position: calc(-8px * var(--wizard-sprite-scale)) calc(-670px * var(--wizard-sprite-scale));
1254 -}
1255 -.vz-chart-option .img.type-box-combo{
1256 - background-position: calc(-606px * var(--wizard-sprite-scale)) calc(-670px * var(--wizard-sprite-scale));
1257 -}
1258 -.vz-chart-option .img.type-box-polarArea{
1259 - background-position: calc(-2px * var(--wizard-sprite-scale)) calc(-912px * var(--wizard-sprite-scale));
1260 -}
1261 -.vz-chart-option .img.type-box-radar{
1262 - background-position: calc(-301px * var(--wizard-sprite-scale)) calc(-899px * var(--wizard-sprite-scale));
1263 -}
1264 1081 .vz-chart-option:hover .img{
1265 1082 background-image: url(../images/chart_types_v395.png);
1266 1083 filter: grayscale(0);
1267 1084 }
@@ -1294,36 +1111,26 @@
1294 1111 opacity: .7;
1295 1112 display: flex;
1296 1113 flex-wrap: wrap;
1297 1114 align-items: center;
1298 - font-size: 13px;
1299 - line-height: 16px;
1300 1115 }
1301 1116 .vz-pro-label-wrap {
1302 1117 order: 3;
1303 1118 width: calc(100% - 20px);
1304 1119 padding-left: 12px;
1120 + position: relative;
1305 1121 z-index: 1;
1306 1122 display: flex;
1307 1123 flex-wrap: wrap;
1308 1124 align-items: center;
1309 - padding-right: 42px;
1310 1125 }
1311 1126 .vz-pro-label-wrap h3 {
1312 1127 opacity: .7;
1313 1128 color: #000000;
1314 - font-size: 13px;
1315 - line-height: 16px;
1316 1129 }
1317 1130 .vz-pro-label-wrap span.pro-label{
1318 - position: absolute;
1319 - top: 8px;
1320 - right: 8px;
1321 - margin-left: 0;
1131 + margin-left: 30px;
1322 1132 font-weight: 600;
1323 - font-size: 11px;
1324 - line-height: 14px;
1325 - padding: 2px 8px 3px;
1326 1133 }
1327 1134 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .bg{
1328 1135 background: #BDE6EB;
1329 1136 }
@@ -1344,8 +1151,9 @@
1344 1151 left: 0;
1345 1152 top: 0;
1346 1153 width: 100%;
1347 1154 height: 100%;
1155 + padding: 12px 12px 20px;
1348 1156 z-index: 2;
1349 1157 opacity: 0;
1350 1158 visibility: hidden;
1351 1159 transition: all .3s ease-in-out;
@@ -1351,11 +1159,10 @@
1351 1159 transition: all .3s ease-in-out;
1352 1160 }
1353 1161 .vz-pro-option .pro-overlay .pro-box{
1354 1162 padding-bottom: 58.88%;
1355 - background: rgba(185, 185, 185, 0.5);
1163 + background: rgba(255,255,255,.5);
1356 1164 backdrop-filter: blur(2px);
1357 - height: 100%;
1358 1165 }
1359 1166 .vz-pro-option .pro-overlay .pro-box .btn {
1360 1167 position: absolute;
1361 1168 top: 50%;
@@ -1361,9 +1168,8 @@
1361 1168 top: 50%;
1362 1169 left: 50%;
1363 1170 white-space: nowrap;
1364 1171 transform: translate(-50%, -50%);
1365 - font-size: 14px;
1366 1172 }
1367 1173
1368 1174 .vz-power-pro{
1369 1175 background: #FFFFFF;
@@ -1408,11 +1214,8 @@
1408 1214 height: 100%;
1409 1215 background: #39C3D2;
1410 1216 transition: all .3s ease-in-out;
1411 1217 }
1412 -.vz-import-status{
1413 - margin-top: 12px;
1414 -}
1415 1218 .vz-chart-list .slick-arrow[disabled="disabled"], .vz-chart-list .slick-arrow[aria-disabled="true"] {
1416 1219 color: #eeeeee
1417 1220 }
1418 1221 .vz-btn-group span.spinner {
@@ -1449,9 +1252,8 @@
1449 1252 .vz-form-row .vz-form-col-6, .vz-form-row .vz-form-col-4, .vz-form-row .vz-form-col-8{width: 100%;}
1450 1253 .vz-document-list > ul > li{width: 100%;}
1451 1254 .vz-help-improve-box .left{width: 100%;}
1452 1255 .vz-help-improve-box .right{width: 100%;}
1453 - .vz-chart-list > ul{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;}
1454 - .vz-chart-list > ul > li{width: 100%; max-width: 100%; padding-bottom: 0;}
1256 + .vz-chart-list > ul > li{width: 100%; max-width: 100%; padding-bottom: 30px;}
1455 1257 .vz-shortcode-preview-content{padding-right: 20px;}
1456 1258 .vz-newsletter-wrap .vz-newsletter, .vz-newsletter-wrap .vz-newsletter-img{width: 100%; padding-bottom: 20px;}
1457 -}
1259 +}