PluginProbe
wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin / 6.5.1.7
wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin v6.5.1.7
6.5.1.7 6.5.1.6 6.5.1.5 6.5.1.4 6.5.1.3 6.5.1.2 6.5.1.1 6.5.0.9 6.5.0.8 6.5.0.7 6.5.0.6 trunk 3.4.2.40 3.4.2.41 3.4.2.42 3.4.2.43 3.4.2.44 3.4.2.45 3.4.2.46 3.4.2.47 3.4.2.48 3.4.2.49 3.4.2.50 6.3.2 6.3.3.1 All 47 releases
wpdatatables / assets / css / admin / chart_wizard.css

chart_wizard.css in wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin 6.5.1.7, at assets/css/admin/chart_wizard.css

600 lines 16.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
2 @font-face {
3 font-family: 'wpDataTablesIcons' !important;
4 src: url(../../fonts/wpDataTablesIcons.eot);
5 src: url(../../fonts/wpDataTablesIcons.eot?#iefix) format('embedded-opentype'), url(../../fonts/wpDataTablesIcons.woff) format('woff'), url(../../fonts/wpDataTablesIcons.ttf) format('truetype'), url(../../fonts/wpDataTablesIcons.svg#wpDataTablesIcons) format('svg');
6 }
7
8 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .existing-columns,
9 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .chosen_columns {
10 height: 308px;
11 box-shadow: 0px 2px 5px rgba(23, 43, 77, 0.1), 0px 0px 1px rgba(23, 43, 77, 0.32);
12 border-radius: 3px;
13 }
14
15 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .existing-columns .card-header,
16 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .chosen_columns .card-header {
17 border-radius: 4px;
18 background: #F8F8FA;
19 padding: 14px 16px ;
20 }
21 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .existing-columns .card-header h2,
22 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .chosen_columns .card-header h2{
23 color: #304463;
24 font-weight: 500;
25 font-size: 13px;
26 line-height: 20px;
27 }
28 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .existing-columns .card-body.card-padding,
29 .wpdt-c .wdt-chart-wizard .wdt-chart-column-picker-container .chosen_columns .card-body.card-padding{
30 padding: 16px;
31 }
32
33 .wpdt-c div.chosen_columns .alert {
34 margin: 3px;
35 }
36
37 .wpdt-c .chart-wizard-step .alert.wdt-custom {
38 font-size: 12px;
39 line-height: 16px;
40 color: #091E6F;
41 font-weight: 500;
42 }
43 .wpdt-c .wdt-chart-wizard{
44 background: #F1F1F1;
45 }
46 .wpdt-c .chart-name,
47 .wpdt-c .charts-type,
48 .wpdt-c .data-source,
49 .wpdt-c .render-engine,
50 .wpdt-c #chart-container-tabs-1,
51 .wpdt-c #chart-container-tabs-2,
52 .wpdt-c #chart-container-tabs-3,
53 .wpdt-c #chart-container-tabs-4,
54 .wpdt-c #chart-container-tabs-5,
55 .wpdt-c #chart-container-tabs-6,
56 .wpdt-c #chart-container-tabs-7,
57 .wpdt-c #chart-container-tabs-8,
58 .wpdt-c .chart-preview-container,
59 .wpdt-c #chart-container-tabs .tab-nav.settings,
60 .wpdt-c .wdt-chart-column-picker-container,
61 .wpdt-c .wdt-chart-wizard .bootstrap-select{
62 background: #FFFFFF !important;
63 }
64 .wpdt-c .wdt-chart-wizard-chart-selecter-block {
65 margin-top: 10px;
66 }
67 .wpdt-c .wdt-chart-wizard .render-engine .form-group{
68 padding: 0;
69 }
70
71 .wpdt-c .wdt-chart-wizard .deselect-all-columns,
72 .wpdt-c .wdt-chart-wizard .select-all-columns {
73 position: absolute;
74 right: 16px;
75 top: 15px;
76 width: 100px;
77 font-weight: 500;
78 font-size: 14px;
79 line-height: 20px;
80 color: #008CFF;
81 background: #F8F8FA;
82 border: none;
83 padding: 0;
84 text-align: right;
85 }
86
87 .wpdt-c .steps .chart-wizard-step.step4{
88 min-width: 1030px;
89 }
90
91 .wpdt-c .steps .chart-wizard-step.step4 fieldset{
92 width: 50%;
93 }
94
95 .wpdt-c .steps .chart-wizard-step.step5 label{
96 display: block;
97 text-align: center;
98 font-style: normal;
99 font-weight: normal;
100 font-size: 13px;
101 line-height: 20px;
102 color: #061938;
103 }
104 .wpdt-c .wpdt-chart-message{
105 text-align: center;
106 }
107 .wpdt-c .wpdt-chart-message img {
108 margin-top: 15px;
109 margin-bottom: 12px;
110 }
111 .wpdt-c .wpdt-chart-message h4{
112 font-size: 20px;
113 line-height: 24px;
114 color: #304463;
115 margin-bottom: 4px;
116 }
117 .wpdt-c .chart-wizard-breadcrumb {
118 margin: 0;
119 padding-bottom: 0;
120 padding-top: 0;
121 background-color: #ffffff;
122 }
123
124 .wpdt-c .chart-wizard-breadcrumb li {
125 font-style: normal;
126 font-weight: normal;
127 font-size: 13px;
128 line-height: 20px;
129 color: #304463;
130 }
131
132 .wpdt-c .chart-wizard-breadcrumb > .active {
133 font-style: normal;
134 font-weight: normal;
135 font-size: 13px;
136 line-height: 20px;
137 color: #008CFF;
138 }
139
140 .wpdt-c div.wdt-chart-column-picker-container div.picker_column {
141 padding-top: 90px;
142 }
143
144 .wpdt-c div.wdt-chart-column-picker-container div.picker_column button {
145 width: 30px;
146 }
147
148 .wpdt-c div.wdt-chart-column-picker-container div.picker_column button {
149 display: block;
150 margin: 0 auto 5px auto;
151 }
152
153 .wpdt-c div.wdt-chart-column-picker-container div.chart-column-block {
154 border-radius: 4px;
155 background-color: #F8F8FA;
156 text-transform: inherit;
157 color: #304463;
158 text-align: left;
159 font-weight: 600;
160 font-size: 13px;
161 line-height: 20px;
162 padding: 8px 16px;
163 }
164
165 .wpdt-c div.wdt-chart-column-picker-container div.chart-column-block:hover {
166 transition: .5s ease;
167 cursor: pointer;
168 background-color: rgba(0, 140, 255, 0.06);
169 }
170
171 .wpdt-c div.wdt-chart-column-picker-container div.chart-column-block.selected {
172 border-radius: 4px;
173 transition: .5s ease;
174 color: #304463;
175 background-color: rgba(0, 140, 255, 0.06);;
176 }
177
178 .wpdt-c div.wdt-chart-column-picker-container div.wdt-chart-wizart-existing-columns-container,
179 .wpdt-c div.wdt-chart-column-picker-container div.wdt-chart-wizard-chosen-columns-container {
180 height: 220px;
181 overflow-y: auto;
182 }
183 .wpdt-c div.wdt-chart-column-picker-container div.wdt-chart-wizard-chosen-columns-container i{
184 margin-right: 8px;
185 }
186
187 .wpdt-c .wpDataTables #series-settings-container div.chart-series-block {
188 margin: 3px;
189 position: relative;
190 overflow: hidden;
191 }
192
193 .wpdt-c .wpDataTables #series-settings-container div.chart-series-block .chart-series-label {
194 margin: 3px;
195 float: left;
196 }
197
198 .wpdt-c .wpDataTables #series-settings-container div.chart-series-block .chart-series-color {
199 margin: 3px;
200 float: left;
201 }
202
203 .wpdt-c #wdt-chart-shortcode-id {
204 background: #F4F5F7;
205 border-radius: 0 3px 3px 0;
206 padding: 4px 8px;
207 border: none;
208 color: #172B4D;
209 font-style: normal;
210 font-weight: 600;
211 font-size: 12px;
212 line-height: 20px;
213 }
214 .wpdt-c #finishButton,
215 .wpdt-c #saveButton,
216 .wpdt-c #open-range-picker-btn,
217 .wpdt-c #wdt-chart-wizard-next-step,
218 .wpdt-c #wdt-chart-wizard-previous-step {
219 position: relative;
220 font-family: Inter;
221 font-style: normal;
222 font-weight: 500;
223 font-size: 14px;
224 box-sizing: border-box;
225 border-radius: 6px;
226 line-height: 20px;
227 background: #008CFF;
228 border-color: #008CFF;
229 }
230 .wpdt-c #open-range-picker-btn {
231 padding: 8px 16px;
232 color: #304463;
233 background: #FFFFFF;
234 border: 1px solid #DFE1E6;
235 }
236 .wpdt-c #wdt-chart-wizard-next-step {
237 padding: 8px 27px 8px 12px;
238 }
239 .wpdt-c #wdt-chart-wizard-previous-step {
240 position: relative;
241 padding: 8px 16px 8px 29px;
242 background: #FFFFFF;
243 color: #304463;
244 }
245 .wpdt-c #wdt-chart-wizard-previous-step:hover,
246 .wpdt-c #open-range-picker-btn:hover,
247 .wpdt-c #wdt-range-picker .modal-content .modal-footer #wdt-cancel-range:hover{
248 background: linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)), #FFFFFF;
249 box-sizing: border-box;
250 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
251 }
252
253
254 .wpdt-c #wdt-chart-wizard-previous-step:before {
255 position: absolute;
256 left: 5px;
257 font-family: "wpDataTablesIcons";
258 content: "\f053";
259 font-weight: 400;
260 font-style: normal;
261 font-size: 14px;
262 line-height: 20px;
263 text-align: center;
264 color: #253858;
265 margin-right: 10px;
266 padding-left: 8px;
267 }
268
269 .wpdt-c #wdt-chart-wizard-next-step:after {
270 position: absolute;
271 font-family: "wpDataTablesIcons";
272 content: "\f054";
273 font-style: normal;
274 font-weight: 400;
275 font-size: 14px;
276 line-height: 20px;
277 text-align: center;
278 color: #FFFFFF;
279 margin-left: 8px;
280 }
281
282 .wpdt-c .wdt-datatables-admin-wrap #wdt-chart-wizard-next-step.wdt-save-chart {
283 padding: 8px 12px 8px 12px !important;
284 background-color: #008CFF;
285 }
286 .wpdt-c .wdt-datatables-admin-wrap #wdt-chart-wizard-next-step.wdt-save-chart:after {
287 display: none;
288 }
289 .wpdt-c .wdt-datatables-admin-wrap #wdt-chart-wizard-next-step.wdt-save-chart i {
290 margin-right: 8px;
291 }
292 .wpdt-c #wpdt-shortcode-container {
293 margin: 0 auto;
294 display: flex;
295 justify-content: center;
296 }
297 .wpdt-c #wpdt-shortcode-container .wdt-copy-shortcode{
298 display: inline-block;
299 color: #304463;
300 cursor: pointer;
301 }
302 .wpdt-c #wpdt-shortcode-container .wdt-copy-shortcode i{
303 padding: 4px 7px;
304 background: #EBECF0;
305 border-radius: 3px 0 0 3px;
306 line-height: 20px;
307 }
308
309 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card {
310 display: inline-block;
311 min-width: inherit;
312 width: 100%;
313 box-shadow: none;
314 border: none;
315 }
316
317 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card:hover {
318 cursor: pointer;
319 }
320
321 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card:hover .card-header {
322 border-color: #2196f3;
323 transition: .5s ease;
324 }
325
326 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card-header {
327 margin: 0 auto;
328 border: 1px solid #d7d7d7;
329 border-radius: 4px;
330 background-color: #fbfbfb;
331 }
332
333 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card-header img {
334 margin: 0 auto;
335 }
336
337 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card-body span {
338 color: #777;
339 }
340
341 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card-body h4 {
342 text-align: center;
343 }
344
345 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .wdt-chart-wizard-overlay {
346 border-radius: 4px;
347 transition: .5s ease;
348 width: 101%;
349 height: 101%;
350 opacity: 0;
351 position: absolute;
352 top: 50%;
353 left: 50%;
354 transform: translate(-50%, -50%);
355 background-color: #2196f3;
356 }
357
358 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card:hover .wdt-chart-wizard-overlay {
359 opacity: 0.1;
360 }
361
362 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card.selected .card-header {
363 border-color: #2196f3;
364 }
365
366 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card.selected .card-header .wdt-chart-wizard-overlay {
367 opacity: 0.1;
368 }
369
370 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card.not-selected .card-header {
371 opacity: 0.6;
372 }
373
374 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card.not-selected:hover .card-header {
375 opacity: 1;
376 }
377
378 .wpdt-c .wdt-chart-wizard .wdt-chart-wizard-chart-selecter-block .card.selected .card-header:after {
379 content: "\f00c";
380 color: #2196f3;
381 position: absolute;
382 top: 80%;
383 text-align: right;
384 right: 5%;
385 width: 100%;
386 font-size: 24px;
387 font-family: 'wpDataTablesIcons';
388 }
389
390 .wpdt-c .wdt-chart-wizard .charts-type.google-charts-type,
391 .wpdt-c .wdt-chart-wizard .charts-type.highcharts-charts-type,
392 .wpdt-c .wdt-chart-wizard .charts-type.apexcharts-charts-type,
393 .wpdt-c .wdt-chart-wizard .charts-type.highstock-charts-type,
394 .wpdt-c .wdt-chart-wizard .charts-type.chartjs-charts-type {
395 display: none;
396 }
397 .wpdt-c .wdt-chart-wizard .charts-type.google-charts-type.disabled,
398 .wpdt-c .wdt-chart-wizard .charts-type.highcharts-charts-type.disabled,
399 .wpdt-c .wdt-chart-wizard .charts-type.apexcharts-charts-type.disabled,
400 .wpdt-c .wdt-chart-wizard .charts-type.highstock-charts-type.disabled,
401 .wpdt-c .wdt-chart-wizard .charts-type.chartjs-charts-type.disabled {
402 opacity: .5;
403 pointer-events: none;
404 }
405 .wpdt-c .wdt-chart-wizard #wdt-add-all-chart-columns,
406 .wpdt-c .wdt-chart-wizard #wdt-add-chart-columns,
407 .wpdt-c .wdt-chart-wizard #wdt-remove-chart-columns,
408 .wpdt-c .wdt-chart-wizard #wdt-remove-all-chart-columns {
409 background: #F3F3FA;
410 border-radius: 4px;
411 padding: 4px 9px;
412 }
413
414 .wpdt-c .wdt-chart-wizard #wdt-add-all-chart-columns:after,
415 .wpdt-c .wdt-chart-wizard #wdt-add-chart-columns:after,
416 .wpdt-c .wdt-chart-wizard #wdt-remove-chart-columns:after,
417 .wpdt-c .wdt-chart-wizard #wdt-remove-all-chart-columns:after {
418 font-family: 'wpDataTablesIcons';
419 color: #091D70;
420 font-size: 13px;
421 line-height: 20px;
422 }
423
424 .wpdt-c .wdt-chart-wizard #wdt-add-all-chart-columns:after {
425 content:"\f101";
426 font-size: 15px;
427 }
428
429 .wpdt-c .wdt-chart-wizard #wdt-add-chart-columns:after {
430 content:"\f061";
431 }
432
433 .wpdt-c .wdt-chart-wizard #wdt-remove-chart-columns:after {
434 content:"\f060";
435 }
436
437 .wpdt-c .wdt-chart-wizard #wdt-remove-all-chart-columns:after {
438 content:"\f100";
439 font-size: 15px;
440 }
441
442 .wpdt-c .wdt-chart-wizard #chart-container-tabs ul li a:after {
443 display: none;
444 }
445
446 .wpdt-c .range-picker-table tbody td.selected {
447 background-color: rgba(0, 140, 255, 0.06);;
448 }
449 .wpdt-c .range-picker-table tbody td.pick-row {
450 width: 80px;
451 }
452 .wpdt-c .range-picker-table .add-row-to-range,
453 .wpdt-c .range-picker-table .pick-column-range {
454 background: #FFFFFF;
455 width: 16px;
456 height: 16px;
457 border: 1px solid #C1C7D0;
458 box-sizing: border-box;
459 border-radius: 3px;
460 margin: 0 !important;
461 box-shadow: none;
462 outline: none !important;
463 vertical-align: baseline;
464 opacity: 1 !important;
465 position: relative;
466 }
467 .wpdt-c .range-picker-table .pick-column-range:checked:before,
468 .wpdt-c .range-picker-table .add-row-to-range:checked:before {
469 font-family: 'wpDataTablesIcons';
470 content: '\f00c';
471 width: 16px;
472 height: 16px;
473 color: white;
474 border: 1px solid #2684FF;
475 background: #2684FF;
476 border-radius: 3px;
477 margin: 0;
478 padding: 1px 0 0 0;
479 font-size: 11px;
480 float: none;
481 font-weight: bold;
482 position: absolute;
483 left: -1px;
484 top: -1px;
485 opacity: 1;
486 }
487
488 .wpdt-c .wdt-chart-wizard #chart-container-tabs ul li.chart-container {
489 border-right: 2px solid #F1F1F1;
490 }
491
492 .wpdt-c .wdt-chart-wizard #chart-container-tabs ul li.chart-container.active {
493 border-right: 2px solid #2196F3;
494 transition: all;
495 transition-duration: 1000ms;
496 }
497
498 .gu-mirror.chart-column-block {
499 border: 1px solid #d7d7d7;
500 border-radius: 4px;
501 background-color: #fbfbfb;
502 text-transform: inherit;
503 height: 32px;
504 display: block;
505 font-weight: bold;
506 text-align: center;
507 padding: 6px 12px;
508 font-size: 13px;
509 }
510 .wpdt-c .wdt-custom-number-input {
511 position: relative;
512 }
513 .wpdt-c .wdt-custom-number-input input {
514 text-align: center;
515 }
516 .wpdt-c .wdt-custom-number-input .wdt-btn-number:hover,
517 .wpdt-c .wdt-custom-number-input .wdt-btn-number:hover:disabled,
518 .wpdt-c .wdt-custom-number-input .wdt-btn-number:active,
519 .wpdt-c .wdt-custom-number-input .wdt-btn-number:visited,
520 .wpdt-c .wdt-custom-number-input .wdt-btn-number{
521 position: absolute;
522 height: 100%;
523 width: 40px;
524 border: 1px solid #D7D9E2;
525 color: #8796AF;
526 background: #F8F8FA;
527 }
528
529 .wpdt-c .wdt-custom-number-input .wdt-btn-number.wdt-button-minus{
530 left: 0;
531 top: 0;
532 height: 100%;
533 border: 1px solid #D7D9E2;
534 color: #8796AF;
535 background: #F8F8FA;
536 border-radius: 2px 0 0 2px;
537 }
538 .wpdt-c .wdt-custom-number-input .wdt-btn-number.wdt-button-plus{
539 right: 0;
540 top: 0;
541 height: 100%;
542 border: 1px solid #D7D9E2;
543 color: #8796AF;
544 background: #F8F8FA;
545 border-radius: 0 2px 2px 0;
546 }
547 .render-engine .dropdown-menu > .disabled > a {
548 color: inherit !important;
549 opacity: 0.7;
550 }
551 .render-engine .dropdown-menu span.wdt-premium {
552 padding: 2px 6px;
553 background: rgba(0, 140, 255, 0.1);
554 border-radius: 45px;
555 width: fit-content;
556 cursor: not-allowed !important;
557 font-family: Inter;
558 font-style: normal;
559 font-weight: 500;
560 font-size: 13px;
561 line-height: 20px;
562 color: #008CFF;
563 margin-top: 4px;
564 box-shadow: none !important;
565 display: inline-block;
566 }
567 .render-engine .dropdown-menu .wdt-premium-option-disabled {
568 user-select: none;
569 cursor: not-allowed !important;
570 }
571 .wpdt-c .charts-type.highstock-charts-type.highstock-not-available-notice,
572 .wpdt-c .charts-type.apexcharts-charts-type.apexcharts-not-available-notice,
573 .wpdt-c .charts-type.highcharts-charts-type.highcharts-not-available-notice {
574 max-width: 1440px;
575 margin: 0 auto;
576 padding: 10px;
577 text-align: center;
578 }
579
580 .wpdt-c .charts-type.highstock-charts-type.highstock-not-available-notice .btn a,
581 .wpdt-c .charts-type.highstock-charts-type.highstock-not-available-notice .btn a:hover,
582 .wpdt-c .charts-type.highcharts-charts-type.highcharts-not-available-notice .btn a,
583 .wpdt-c .charts-type.highcharts-charts-type.highcharts-not-available-notice .btn a:hover,
584 .wpdt-c .charts-type.apexcharts-charts-type.apexcharts-not-available-notice .btn a,
585 .wpdt-c .charts-type.apexcharts-charts-type.apexcharts-not-available-notice .btn a:hover {
586 color: #ffffff;
587 }
588
589 .wpdt-c .charts-type.highstock-charts-type.highstock-not-available-notice .btn a:hover,
590 .wpdt-c .charts-type.highcharts-charts-type.highcharts-not-available-notice .btn a:hover,
591 .wpdt-c .charts-type.apexcharts-charts-type.apexcharts-not-available-notice .btn a:hover {
592 background-color: #0B86EC !important;
593 }
594
595 .wpdt-c .highcharts-img,
596 .wpdt-c .apexchats-img,
597 .wpdt-c .highstock-img {
598 width: 100%;
599 max-width: 1440px;
600 }