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/frame.css +81 -276 4.0.73.11.7 View file →
@@ -52,19 +52,19 @@
52 52 /******************************** SIDEBAR ***********************************/
53 53 /******************************************************************************/
54 54
55 55 #sidebar {
56 - overflow-x: hidden;
57 - overflow-y: auto;
56 + overflow: auto;
58 57 position: absolute;
59 - z-index: 80;
58 + z-index: 75;
60 59 top: 0;
61 60 right: 0;
62 61 bottom: 60px;
63 62 width: 350px;
64 - border-left: 1px solid #ddd;
65 - background: #f8f9fa;
66 - overscroll-behavior: contain;
63 + border-left: 1px solid #dfdfdf;
64 + background: whitesmoke;
65 +
66 + -webkit-overflow-scrolling: touch;
67 67 }
68 68
69 69 .viz-group {
70 70 margin: 0;
@@ -82,13 +82,13 @@
82 82 background: #fff;
83 83 }
84 84
85 85 .viz-group-wrapper ul .viz-group-title {
86 - border-top: 1px solid #e5e5e5;
86 + border-top: 1px solid #ddd;
87 87 }
88 88
89 89 .viz-group-wrapper ul li {
90 - border-top: 1px solid #e5e5e5;
90 + border-top: 1px solid #ddd;
91 91 }
92 92
93 93 .viz-group-wrapper ul ul li.viz-subsection {
94 94 margin: 5px;
@@ -97,19 +97,19 @@
97 97
98 98 .viz-group-wrapper .viz-group .viz-group .viz-group-title {
99 99 position: relative;
100 100 margin: 0;
101 - padding: 12px 36px 12px 16px;
101 + padding: 10px 10px 11px 14px;
102 102 border-top: none;
103 103 border-bottom: none;
104 - border-left: 4px solid transparent;
104 + border-left: 4px solid #fff;
105 105 color: #555d66;
106 106 background-color: #fff;
107 - font-size: 13px;
107 + font-size: 14px;
108 108 font-weight: 600;
109 - line-height: 1.4;
109 + line-height: 21px;
110 110 cursor: pointer;
111 - transition: 0.15s color ease-in-out, 0.15s background-color ease-in-out, 0.15s border-color ease-in-out;
111 + transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
112 112 }
113 113
114 114 .viz-title-small {
115 115 font-size: smaller;
@@ -124,15 +124,13 @@
124 124
125 125 .viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
126 126 position: absolute;
127 127 z-index: 1;
128 - top: 50%;
129 - right: 12px;
130 - transform: translateY(-50%);
131 - color: inherit;
132 - font: 400 18px/1 dashicons;
128 + top: 11px;
129 + right: 10px;
130 + color: #a0a5aa;
131 + font: 400 20px/1 dashicons;
133 132 content: "\f345";
134 - opacity: 0.6;
135 133 }
136 134
137 135 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
138 136 content: "\f347";
@@ -175,17 +173,15 @@
175 173 position: relative;
176 174 width: 100%;
177 175 height: 100%;
178 176 margin: 0;
179 - padding-bottom: 60px;
180 177 }
181 178
182 -.viz-group.bottom-fixed {
179 +.viz-group.bottom-fixed {
183 180 display: block;
184 - position: fixed;
185 - width: 350px;
186 - padding: 12px;
187 - margin: 0 auto;
181 + position: absolute;
182 + bottom: 0;
183 + width: 100%;
188 184 }
189 185
190 186 .viz-group ul li h2,
191 187 .viz-group ul li h3 {
@@ -201,9 +197,9 @@
201 197 .viz-group-content {
202 198 display: none;
203 199 margin: 0;
204 200 padding: 0;
205 - background-color: #fff;
201 + background-color: #fdfdfd;
206 202 }
207 203
208 204 div.viz-group-content {
209 205 padding: 15px;
@@ -236,46 +232,39 @@
236 232
237 233 .viz-section-title {
238 234 display: block;
239 235 position: relative;
240 - margin-bottom: 0;
241 - padding: 10px 36px 10px 16px;
242 - border-top: 1px solid #e5e5e5;
243 - border-left: 3px solid transparent;
244 - background-color: #f8f9fa;
245 - font-size: 12px;
246 - font-weight: 600;
247 - color: #555d66;
248 - text-transform: uppercase;
249 - letter-spacing: 0.4px;
236 + margin-bottom: 5px;
237 + padding: 4px 20px;
238 + border-top: 1px solid #eee;
239 + border-bottom: 1px solid #eee;
240 + background-color: rgba(0, 0, 0, 0.02);
241 + box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
242 + font-weight: bold;
250 243 cursor: pointer;
251 - transition: border-left-color 0.15s ease-in-out, color 0.15s ease-in-out, background-color 0.15s ease-in-out;
252 244 }
253 245
254 -.viz-section-title:hover,
255 -.viz-section-title.open {
256 - border-left-color: #0073aa;
257 - color: #0073aa;
258 - background-color: #f0f6fb;
259 -}
260 -
261 246 .viz-group-wrapper ul ul li .viz-section-title {
262 - border-left: 3px solid transparent;
247 + margin-bottom: 0;
248 + border: none;
249 + box-shadow: none;
263 250 }
264 251
265 252 .viz-section-title::after {
266 253 position: absolute;
267 - top: 50%;
268 - right: 10px;
269 - transform: translateY(-50%);
270 - color: inherit;
271 - font: 400 16px/1 dashicons;
272 - content: "\f345";
273 - opacity: 0.6;
254 + z-index: 1;
255 + top: 13px;
256 + right: 20px;
257 + width: 0;
258 + height: 0;
259 + border-width: 4px 4px 0;
260 + border-style: solid;
261 + border-color: #ccc transparent;
262 + content: "";
274 263 }
275 264
276 265 .viz-section-title.open::after {
277 - content: "\f347";
266 + border-width: 0 4px 4px;
278 267 }
279 268
280 269 .section-items,
281 270 .viz-section-items {
@@ -321,9 +310,9 @@
321 310
322 311 .section-delimiter,
323 312 .viz-section-delimiter {
324 313 margin: 15px 0;
325 - border-top: 1px solid #e5e5e5;
314 + border-top: 1px dashed #ccc;
326 315 }
327 316
328 317 .viz-section-table-column {
329 318 width: 50%;
@@ -361,9 +350,9 @@
361 350
362 351 #rate-the-plugin {
363 352 margin-top: 40px;
364 353 padding: 20px;
365 - border-top: 1px solid #e5e5e5;
354 + border-top: 1px dashed #ddd;
366 355 text-align: center;
367 356 }
368 357
369 358 .rate-the-plugin {
@@ -403,73 +392,16 @@
403 392 padding: 0;
404 393 }
405 394
406 395 #viz-tabs .wp-color-picker {
407 - width: 4rem !important;
396 + width: 4rem !important;
408 397 }
409 398
410 -/* Modern flat tab nav */
411 -#viz-tabs .ui-tabs-nav {
412 - display: flex;
413 - padding: 0;
414 - margin: 0;
415 - background: #fff;
416 - border: none;
417 - border-bottom: 2px solid #e5e5e5;
418 - border-radius: 0;
419 - box-shadow: none;
420 -}
421 -
422 -#viz-tabs .ui-tabs-nav li {
423 - flex: 1;
424 - margin: 0;
425 - border: none;
426 - border-bottom: 2px solid transparent;
427 - border-radius: 0;
428 - background: transparent;
429 - top: 2px;
430 - transition: border-color 0.15s ease-in-out;
431 -}
432 -
433 -#viz-tabs .ui-tabs-nav li a {
434 - display: block;
435 - width: 100%;
436 - padding: 10px 0;
437 - color: #555d66;
438 - font-size: 13px;
439 - font-weight: 500;
440 - text-align: center;
441 - box-sizing: border-box;
442 -}
443 -
444 -#viz-tabs .ui-tabs-nav li:hover a {
445 - color: #0073aa;
446 -}
447 -
448 -#viz-tabs .ui-tabs-nav .ui-state-active {
449 - border-bottom-color: #0073aa;
450 - background: transparent;
451 -}
452 -
453 -#viz-tabs .ui-tabs-nav .ui-state-active a {
454 - color: #0073aa;
455 - font-weight: 600;
456 -}
457 -
458 -#viz-tabs .ui-tabs-nav li a:focus,
459 -#viz-tabs .ui-tabs-nav li.ui-state-focus a {
460 - outline: none;
461 - box-shadow: none;
462 - border-radius: 2px;
463 -}
464 -
465 399 .viz-info-panel {
466 400 display: flex;
467 401 flex-direction: column;
468 - padding: 16px;
469 - gap: 14px;
470 - background: #fff;
471 - border-bottom: 1px solid #e5e5e5;
402 + padding: 10px;
403 + gap: 10px;
472 404 }
473 405
474 406 .viz-info-panel label {
475 407 margin: 0;
@@ -551,47 +483,40 @@
551 483 .type-box span {
552 484 display: block;
553 485 position: absolute;
554 486 right: 0;
555 - bottom: 0;
487 + bottom: -6px;
556 488 width: 100%;
557 - padding: 6px 0;
558 - border-top: 1px solid #e5e5e5;
559 - background-color: #fff;
560 - font-weight: 600;
561 - font-size: 12px;
489 + padding: 4px 0;
490 + border-top: 1px dashed #ddd;
491 + border-bottom: 1px dashed #ddd;
492 + background: #e0e0e0;
493 + background-color: #efefef;
494 + box-shadow: 0 0 8px #ddd;
495 + font-weight: bold;
562 496 text-align: center;
563 - color: #555d66;
564 497 }
565 498
566 499 .type-box .pro-upsell {
567 - color: #d63638;
500 + color: #c55555;
568 501 }
569 502
570 503 #type-picker {
571 - max-width: 960px;
572 - margin: 30px auto;
573 - padding: 0 16px;
574 - display: flex;
575 - flex-wrap: wrap;
576 - gap: 16px;
504 + width: 954px;
505 + margin: 50px auto;
577 506 }
578 507
579 508 .type-box {
509 + float: left;
580 510 position: relative;
581 - border: 1px solid #ddd;
582 - border-left: 3px solid transparent;
583 - background-color: #fff;
584 - box-shadow: 0 1px 3px rgba(0,0,0,0.08);
585 - border-radius: 2px;
586 - overflow: hidden;
587 - transition: border-left-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
511 + margin: 0 20px 20px 0;
512 + border: 1px dashed #ddd;
513 + background-color: #efefef;
514 + box-shadow: 0 0 8px #ddd;
588 515 }
589 516
590 -.type-box:hover,
591 -.type-box:has(.type-label-selected) {
592 - border-left-color: #0073aa;
593 - box-shadow: 0 2px 6px rgba(0,114,170,0.15);
517 +.type-box.viz-hidden {
518 + display: none;
594 519 }
595 520
596 521 .type-box.viz-hidden {
597 522 display: none;
@@ -596,23 +521,23 @@
596 521 .type-box.viz-hidden {
597 522 display: none;
598 523 }
599 524
525 +.type-box:nth-child(3n+1) {
526 + margin-right: 0;
527 +}
528 +
600 529 .type-box .pro-upsell .visualizder-pro-label {
601 530 display: inline;
602 531 position: absolute;
603 532 top: 0;
604 533 width: 74px;
534 + height: 10px;
605 535 height: 17px;
606 536 border: none;
607 537 color: #fff;
608 538 z-index: 4;
609 - background: #d63638;
610 - font-size: 10px;
611 - font-weight: 600;
612 - letter-spacing: 0.5px;
613 - line-height: 17px;
614 - text-align: center;
539 + background: #c55555;
615 540 }
616 541
617 542 .type-label {
618 543 display: block;
@@ -618,10 +543,10 @@
618 543 display: block;
619 544 width: 270px;
620 545 height: 205px;
621 546 padding: 15px;
622 - border: none;
623 - background-color: #f9f9f9;
547 + border: 1px solid #e0e0e0;
548 + background-color: white;
624 549 background-image: url(../images/chart_types_v395.png);
625 550 background-repeat: no-repeat;
626 551 background-position: center center;
627 552 background-size: 900px 1150px;
@@ -626,9 +551,8 @@
626 551 background-position: center center;
627 552 background-size: 900px 1150px;
628 553 filter: grayscale(100%);
629 554 cursor: pointer;
630 - transition: filter 0.15s ease-in-out, background-color 0.15s ease-in-out;
631 555 }
632 556
633 557 #type-picker.lib-ChartJS .type-label {
634 558 background-image: url(../images/chart_types_chartjs.png);
@@ -639,19 +563,12 @@
639 563 }
640 564
641 565 .type-label-selected,
642 566 .type-box .type-label:hover {
567 +/* background-image: url(../images/chart_types_v340.png);*/
643 568 filter: grayscale(0);
644 - background-color: #f0f7fb;
645 569 }
646 570
647 -.type-label:focus,
648 -.viz-group-title:focus,
649 -.viz-section-title:focus {
650 - outline: 2px solid #2271b1;
651 - outline-offset: 2px;
652 -}
653 -
654 571 .type-box-area .type-label {
655 572 background-position: -8px -225px;
656 573 }
657 574
@@ -1094,56 +1011,12 @@
1094 1011 border-bottom: 1px solid #ddd;
1095 1012 }
1096 1013
1097 1014 #vz-chart-copyright {
1098 - bottom: 60px;
1015 + bottom: 10px;
1099 1016 text-align: center;
1100 - z-index: 999;
1101 - background: #f3f3f3;
1102 1017 }
1103 1018
1104 -/* Import steps — stepped data-source + schedule flow */
1105 -.vz-import-step-btn {
1106 - width: 100%;
1107 - margin-bottom: 4px !important;
1108 - text-align: left;
1109 -}
1110 -
1111 -.vz-import-step-toggle {
1112 - display: flex;
1113 - justify-content: space-between;
1114 - align-items: center;
1115 - width: 100%;
1116 - margin: 0;
1117 - padding: 5px 10px;
1118 - background: #f0f0f1;
1119 - border: 1px solid #c3c4c7;
1120 - border-radius: 2px;
1121 - cursor: pointer;
1122 - font-size: 13px;
1123 - color: #50575e;
1124 - line-height: 2;
1125 -}
1126 -
1127 -.vz-import-step-toggle:hover {
1128 - background: #e5e5e5;
1129 - border-color: #a7aaad;
1130 -}
1131 -
1132 -.vz-import-step-toggle .dashicons {
1133 - transition: transform 0.2s ease;
1134 - flex-shrink: 0;
1135 -}
1136 -
1137 -.vz-import-step-toggle[aria-expanded="true"] .dashicons {
1138 - transform: rotate(180deg);
1139 -}
1140 -
1141 -#vz-wp-sync-options,
1142 -#vz-db-sync-options {
1143 - padding-top: 8px;
1144 -}
1145 -
1146 1019 #sidebar {
1147 1020 border-left: 1px solid #ddd;
1148 1021 background: #f3f3f3;
1149 1022 }
@@ -1239,9 +1112,8 @@
1239 1112 bottom: 0;
1240 1113 left: 0;
1241 1114 width: 100%;
1242 1115 opacity: 0;
1243 - pointer-events: none;
1244 1116 background: rgba(253,253,253,0.9);
1245 1117 transition: 0.5s ease;
1246 1118 }
1247 1119
@@ -1246,9 +1118,8 @@
1246 1118 }
1247 1119
1248 1120 .only-pro-feature:hover .only-pro-content {
1249 1121 opacity: 1;
1250 - pointer-events: auto;
1251 1122 }
1252 1123
1253 1124 .only-pro-container {
1254 1125 display: flex;
@@ -1262,13 +1133,12 @@
1262 1133 display: flex;
1263 1134 flex-direction: column;
1264 1135 align-items: center;
1265 1136 justify-content: center;
1266 - gap: 12px;
1267 1137 }
1268 1138
1269 1139 .only-pro-content p {
1270 - margin: 0;
1140 + margin: 0 0 15px;
1271 1141 font-size: 14px;
1272 1142 font-weight: 700;
1273 1143 }
1274 1144
@@ -1283,8 +1153,11 @@
1283 1153 border-width: 1px;
1284 1154 border-style: solid;
1285 1155 border-radius: 3px;
1286 1156 }
1157 +.only-pro-content .only-pro-container a {
1158 + color: #fff !important;
1159 +}
1287 1160
1288 1161 .only-pro-content a:hover {
1289 1162 background: #2D419B;
1290 1163 }
@@ -1301,9 +1174,9 @@
1301 1174 background: #999;
1302 1175 }
1303 1176
1304 1177 span.viz-section-error {
1305 - color: #ff0000;
1178 + color: #ff000;
1306 1179 }
1307 1180
1308 1181 #visualizer-error-manual {
1309 1182 color: #ff595e;
@@ -1606,76 +1479,8 @@
1606 1479 }
1607 1480
1608 1481
1609 1482 /******************************************************************************/
1610 -/************************ manual config JSON editor *************************/
1611 -/******************************************************************************/
1612 -code.viz-manual-config-example {
1613 - display: block;
1614 - white-space: pre;
1615 - background: #f5f5f5;
1616 - border: 1px solid #e0e0e0;
1617 - border-radius: 3px;
1618 - padding: 6px 8px;
1619 - margin-top: 6px;
1620 - font-size: 11px;
1621 - line-height: 1.5;
1622 -}
1623 -
1624 -
1625 -textarea[name="manual"] + .CodeMirror {
1626 - background: #282923;
1627 - color: #f8f8f2;
1628 - border-radius: 4px;
1629 - height: 200px;
1630 - font-size: 13px;
1631 -}
1632 -
1633 -textarea[name="manual"] + .CodeMirror .CodeMirror-scroll {
1634 - min-height: 200px;
1635 -}
1636 -
1637 -textarea[name="manual"] + .CodeMirror .CodeMirror-gutters {
1638 - background: #1e1f1c;
1639 - border-right: 1px solid #404040;
1640 - color: #75715e;
1641 -}
1642 -
1643 -textarea[name="manual"] + .CodeMirror .CodeMirror-linenumber {
1644 - color: #75715e;
1645 -}
1646 -
1647 -textarea[name="manual"] + .CodeMirror .CodeMirror-cursor {
1648 - border-left: 1px solid #f8f8f0;
1649 -}
1650 -
1651 -textarea[name="manual"] + .CodeMirror .CodeMirror-selected {
1652 - background: #49483e;
1653 -}
1654 -
1655 -textarea[name="manual"] + .CodeMirror pre.CodeMirror-line,
1656 -textarea[name="manual"] + .CodeMirror pre.CodeMirror-line-like {
1657 - color: #f8f8f2;
1658 -}
1659 -
1660 -textarea[name="manual"] + .CodeMirror .cm-string {
1661 - color: #A9DC76;
1662 -}
1663 -
1664 -textarea[name="manual"] + .CodeMirror .cm-number {
1665 - color: #AB9DF2;
1666 -}
1667 -
1668 -textarea[name="manual"] + .CodeMirror .cm-atom {
1669 - color: #78DCE8;
1670 -}
1671 -
1672 -textarea[name="manual"] + .CodeMirror .cm-punctuation,
1673 -textarea[name="manual"] + .CodeMirror .cm-bracket {
1674 - color: #f8f8f2;
1675 -}
1676 -
1677 -/******************************************************************************/
1678 1483 /******************************** data tables *******************************/
1679 1484 /******************************************************************************/
1680 1485 .db-wizard-results .dt-button {
1681 1486 display: none !important;
@@ -1873,5 +1678,5 @@
1873 1678 }
1874 1679 .pro-upsell .pro-upsell-overlay .pro-upsell-action .button{
1875 1680 width: 100%;
1876 1681 text-align: center;
1877 -}
1682 +}