PluginProbe
WP Data Access – App Builder for Tables, Forms, Charts, Maps & Dashboards / 5.2
WP Data Access – App Builder for Tables, Forms, Charts, Maps & Dashboards v5.2
5.5.83 5.5.82 5.5.81 5.5.80 5.5.79 5.5.77 5.5.76 5.5.75 5.5.73 5.5.72 5.5.22 5.5.23 5.5.29 5.5.3 5.5.31 5.5.32 5.5.34 5.5.35 5.5.36 5.5.37 5.5.4 5.5.40 5.5.41 5.5.42 5.5.43 All 159 releases
wp-data-access / assets / css / wpda_dashboard.css

wpda_dashboard.css in WP Data Access – App Builder for Tables, Forms, Charts, Maps & Dashboards 5.2, at assets/css/wpda_dashboard.css

718 lines 16.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* DASHBOARD */
2
3 #wpda-dashboard {
4 background-color: #fff;
5 color: inherit;
6 width: 100%;
7 margin-left: -20px;
8 padding: 0 0 0 20px;
9 border-bottom: 1px solid #c3c4c7;
10 }
11 #wpda-dashboard .wpda-dashboard {
12 display: flex;
13 justify-content: flex-start;
14 flex-direction: row;
15 }
16 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group {
17 display: flex;
18 justify-content: space-around;
19 flex-direction: row;
20 flex-wrap: wrap;
21 padding: 0 3px;
22 border-right: 1px solid #c3c4c7;
23 }
24 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group:last-child {
25 margin-right: 20px;
26 border-right: none;
27 }
28 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group:hover {
29 background-color: #f6f7f7;
30 font-weight: bold;
31 }
32 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group .wpda-dashboard-item {
33 display: flex;
34 flex-direction: column;
35 font-size: 8.5px;
36 font-weight: bold;
37 align-items: center;
38 text-align: center;
39 text-decoration: none;
40 color: #3c434a;
41 }
42 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group .wpda-dashboard-item:hover {
43 color: #2271b1;
44 cursor: pointer;
45 }
46 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group .wpda-dashboard-item .fas {
47 font-size: 28px;
48 padding: 10px 8px 0 8px;
49 }
50 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group .wpda-dashboard-item div {
51 padding: 8px;
52 }
53 #wpda-dashboard .wpda-dashboard .wpda-dashboard-group .subject {
54 text-align: center;
55 font-size: 9px;
56 margin-bottom: 5px;
57 }
58 #wpda-dashboard-mobile {
59 background-color: #fff;
60 color: inherit;
61 margin-left: -10px;
62 padding: 0;
63 border-bottom: 1px solid #c3c4c7;
64 }
65 @media screen and (min-width: 782px) {
66 #wpda-dashboard-mobile {
67 margin-left: -20px;
68 }
69 }
70 #wpda-dashboard-drop-down {
71 display: flex;
72 flex-direction: row;
73 padding: 10px;
74 }
75 .wpda-dashboard-toolbar {
76 display: flex;
77 justify-content: space-between;
78 font-size: 24px;
79 background-color: #fff;
80 color: inherit;
81 width: 100%;
82 margin-left: -20px;
83 padding: 0 0 0 20px;
84 border-bottom: 1px solid #c3c4c7;
85 }
86
87 .wpda-dashboard-toolbar > div > div {
88 display: inline-block;
89 margin: 0;
90 border-right: 1px solid #c3c4c7;
91 padding: 0 4px;
92 }
93 .wpda-dashboard-toolbar > div > div {
94 padding: 0 2px;
95 }
96 .wpda-dashboard-toolbar > div > div:last-child {
97 border: none;
98 }
99 .wpda-dashboard-toolbar > div > div > div {
100 display: inline-block;
101 text-align: center;
102 font-size: 8px;
103 line-height: 8px;
104 padding: 8px 4px;
105 margin: 0;
106 border: none;
107 }
108 .wpda-dashboard-toolbar > div > div > div i {
109 font-size: 24px;
110 margin-bottom: 5px;
111 }
112 .wpda-dashboard-toolbar > div > div > div:hover {
113 background-color: #f6f7f7;
114 }
115 .wpda-dashboard-toolbar > div:nth-child(2) {
116 margin: auto 20px;
117 }
118 .wpda-dashboard-toolbar > div > div:last-child {
119 margin-right: 20px;
120 }
121 .wpda-nowrap {
122 white-space: nowrap;
123 }
124 .wpda-promotion {
125 font-size: 20px;
126 }
127 .wpda-promotion i.fas.fa-star {
128 font-weight: 600;
129 }
130 .wpda-promotion a {
131 text-decoration: none;
132 }
133 .wpda-add-panel {
134 margin-left: -20px;
135 padding: 10px 0 0 20px;
136 background-color: #fff;
137 border-bottom: 1px solid #c3c4c7;
138 }
139 .wpda-add-panel form {
140 padding: 0 20px 0 0;
141 }
142 .wpda-add-panel label {
143 font-weight: normal;
144 display: inline-block;
145 width: 120px;
146 text-align: right;
147 padding-right: 5px;
148 }
149 .wpda-add-panel div {
150 margin: 0;
151 padding: 0;
152 }
153 .wpda-add-panel div {
154 padding-bottom: 2px;
155 }
156 .wpda-add-panel div:last-child {
157 padding-bottom: 10px;
158 }
159 .wpda-dashboard-content {
160 width: 100%;
161 padding-top: 20px;
162 display: flex;
163 flex-direction: row;
164 }
165 .wpda-dashboard-column {
166 padding-right: 20px;
167 width: 0;
168 }
169 .wpda-dashboard-content .wpda-dashboard-column-1 {
170 flex: 1 1 100%;
171 }
172 .wpda-dashboard-content .wpda-dashboard-column-2 {
173 flex: 1 1 50%;
174 }
175 .wpda-dashboard-content .wpda-dashboard-column-3 {
176 flex: 1 1 33%;
177 }
178 .wpda-dashboard-content .wpda-dashboard-column-4 {
179 flex: 1 1 25%;
180 }
181 .wpda_nav_title {
182 font-size: 16px;
183 font-weight: bold;
184 padding-left: 4px;
185 }
186 .wpda_nav_toggle {
187 font-size: 16px;
188 font-weight: bold;
189 cursor: pointer;
190 }
191 #wpda-dashboard-mobile ul {
192 display: none;
193 flex-direction: column;
194 flex-wrap: wrap;
195 justify-content: space-between;
196 text-align: left;
197 list-style-type: none;
198 margin-top: 0;
199 margin-bottom: 0;
200 }
201 #wpda-dashboard-mobile ul li.menu-item {
202 cursor: pointer;
203 font-weight: bold;
204 padding: 8px 10px;
205 margin: 0;
206 }
207 #wpda-dashboard-mobile ul li.menu-item a {
208 text-decoration: none;
209 color: inherit;
210 }
211 #wpda-dashboard-mobile ul li.menu-item:hover {
212 background-color: grey;
213 color: white;
214 }
215 #wpda-dashboard-mobile .fas {
216 width: 20px;
217 }
218 .wpda-separator {
219 border-bottom: 1px solid #c3c4c7;
220 }
221
222 div.wpda-widget-content div.wpda-dashboard-chart-settings,
223 div.wpda-widget-content div.wpda-dashboard-chart-settings div {
224 display: block;
225 padding: 0 0 2px 0;
226 }
227
228 div.wpda-widget-content div.wpda-dashboard-chart-settings textarea {
229 display: block;
230 }
231
232 .wpda_insert_query_builder {
233 float: right;
234 }
235
236 textarea.wpda_chart_sql {
237 width: 100% !important;
238 min-height: 160px;
239 padding: 10px;
240
241 }
242
243 .wpda-dashboard-chart-settings-buttons {
244 text-align: right;
245 padding-top: 10px !important;
246 }
247
248 fieldset.wpda_fieldset.wpda_fieldset_dashboard {
249 padding-top: 2px;
250 padding-bottom: 2px;
251 margin-bottom: 10px;
252 }
253
254 fieldset.wpda_fieldset.wpda_fieldset_chart_layout label {
255 display: inline-block;
256 width: 60px;
257 }
258
259 div.wpda-dailog-layout div {
260 padding: 2px;
261 }
262
263 div.wpda-dailog-layout label {
264 display: inline-block;
265 width: 100px;
266 }
267
268 div.wpda-dailog-layout fieldset > div > textarea {
269 width: 100%;
270 height: 120px;
271 }
272
273 div.wpda-dailog-layout fieldset > legend > span {
274 text-decoration: none;
275 outline: 0;
276 cursor: pointer;
277 }
278
279 div.ui-dialog div.ui-dialog-content {
280 padding: 1px;
281 }
282
283 .ui-dialog .ui-dialog-buttonpane {
284 border-width: 0;
285 padding: 0;
286 margin: 0;
287 }
288
289 #adminmenuwrap {
290 margin-top: 0 !important;
291 }
292
293 /* WIDGET */
294
295 .wpda-widget {
296 margin-bottom: 20px;
297 font-size: 13px;
298 }
299 .wpda-widget:last-child {
300 margin-bottom: 0;
301 }
302 .wpda-widget .ui-widget-header {
303 font-size: 120%;
304 }
305 .wpda-widget .wpda-chart-container {
306 overflow: auto;
307 padding: 10px !important;
308 }
309 .wpda-widget .wpda-chart-container .wpda_widget_chart_selection {
310 display: inline-block;
311 width: calc( 100% - 15px );
312 padding-right: 0;
313 }
314 .wpda-widget .wpda-chart-container .wpda_widget_chart_selection select {
315 float: right;
316 }
317 .wpda_widget_chart_container {
318 padding: 5px;
319 }
320 .wpda-widget-content div div {
321 align-self: center;
322 }
323 .wpda-widget-content div.ui-tabs {
324 margin: 0 !important;
325 padding: 0 !important;
326 border: none !important;
327 }
328 .wpda-widget-content div.ui-tabs.wpda-dbms-container {
329 padding: 12px 16px 16px 16px !important;
330 }
331 .wpda-widget-content .ui-tabs .ui-tabs-panel {
332 width: 100%;
333 border: none;
334 padding: 0;
335 margin: 0;
336 }
337 .wpda-widget-content ul.ui-tabs-nav {
338 background: unset;
339 border: none !important;
340 border-bottom: 1px solid rgb(170, 170, 170) !important;
341 width: 100%;
342 border-radius: 0;
343 padding-right: 0;
344 margin: 0 -0.2em 0 -0.1em;
345
346 background: unset;
347 border: none !important;
348 border-bottom: 1px solid rgb(170, 170, 170) !important;
349 width: -webkit-fill-available;
350 border-radius: 0;
351 margin: 0 -4px;
352 padding: 0;
353 }
354 .wpda-widget-content div:first-child {
355 display: flex;
356 flex-direction: row;
357 justify-content: space-between;
358 align-items: center;
359 border-radius: 4px 4px 0 0;
360 padding: 6px;
361 }
362 .wpda-widget-content div:first-child span.icons i {
363 cursor: pointer;
364 }
365 .wpda-widget-content div:last-child {
366 display: flex;
367 flex-direction: column;
368 align-items: flex-start;
369 border-radius: 0 0 4px 4px;
370 border-top: none;
371 box-sizing: border-box;
372 width: 100%;
373 }
374 table.wpda_dbms_table {
375 width: 100%;
376 margin: 10px;
377 }
378 table.wpda_dbms_table tbody tr th.wpda-widget-dbms-separator {
379 padding-top: 20px;
380 }
381 table.wpda_dbms_table tbody tr th.wpda-widget-dbms-separator-end {
382 padding-bottom: 10px;
383 }
384 table.wpda_dbms_table tbody tr th {
385 background-color: transparent;
386 text-align: right;
387 }
388 table.wpda_dbms_table tbody th {
389 white-space: nowrap;
390 }
391 table.wpda_dbms_table tbody tr th.wpda-widget-dbms-separator,
392 table.wpda_dbms_table tbody tr th.wpda-dbms-link {
393 text-align: left;
394 }
395 table.wpda-widget-dbms {
396 table-layout: fixed;
397 width: 100%;
398 margin-top: 5px;
399 }
400 table.wpda-widget-dbms thead tr {
401 display: block;
402 background-color: #555;
403 color: #fff;
404 }
405 table.wpda-widget-dbms tbody {
406 display: block;
407 height: 240px;
408 overflow-y: scroll;
409 border-collapse: collapse;
410 }
411 table.wpda-widget-dbms th {
412 text-align: left;
413 }
414 .wpda-widget-dbms tbody tr:hover {
415 background: #ddd;
416 }
417 .wpda-widget-dbms th {
418 padding: 5px 4px;
419 }
420 .wpda-widget-dbms td {
421 padding: 5px;
422 }
423 .wpda-dbms-link {
424 cursor: pointer;
425 }
426 .ui-widget {
427 font-family: inherit !important;
428 font-size: inherit !important;
429 }
430
431 div.wpda-dashboard-content div.dataTables_wrapper,
432 div.wpda-dashboard-content div.dataTables_wrapper div.dt-buttons,
433 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_length,
434 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_paginate,
435 div.wpda-dashboard-content div.dataTables_wrapper div.DataTables_sort_wrapper {
436 display: block;
437 }
438 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_wrapper,
439 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_length,
440 div.wpda-dashboard-content div.dataTables_wrapper div.dt-buttons,
441 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_filter,
442 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_info,
443 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_paginate {
444 padding: 0;
445 }
446 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_length {
447 padding-left: 10px;
448 }
449 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_filter {
450 margin-right: -2px;
451 }
452 div.wpda-dashboard-content div.dataTables_wrapper div.dataTables_paginate {
453 width: auto;
454 margin-right: -2px;
455 }
456 div.wpda-dashboard-content div.dataTables_wrapper th {
457 text-align: left;
458 }
459 div.wpda-dashboard-content div.dataTables_wrapper th.wpdaforms-action-icons {
460 text-align: right;
461 }
462
463 div.wpda-dashboard-content div.wpdadataproject_menu,
464 div.wpda-dashboard-content div.wpdadataproject_menu_items,
465 div.wpda-dashboard-content div.wpdadataproject_menu_pages,
466 div.wpda-dashboard-content div.wpdadataproject_menu_pages div {
467 display: block;
468 padding: 0;
469 }
470 div.wpda-dashboard-content div.wpdadataproject_menu {
471 padding: 10px 10px 0 10px;
472 }
473 div.wpda-dashboard-content div.wpdadataproject_menu_pages {
474 padding: 0 10px 10px 10px;
475 }
476 div.wpda-dashboard-content table.ui-widget-content {
477 border: none;
478 }
479 div.wpda-dashboard-content div.wpdadataproject_menu .ui-menu {
480 margin-bottom: 7px;
481 }
482 div.wpda-dashboard-content div.wpdadataproject_menu .ui-menu li div:hover {
483 background: #f6f7f7 !important;
484 }
485 div.wpda-dashboard-content div.wpdadataforms_table div.dt-buttons {
486 margin-bottom: 10px;
487 }
488 div.wpda-dashboard-content div.wpdadataforms_table div.dataTables_length {
489 padding-left: 0;
490 }
491 div.wpdadataforms_modal .dt-buttons {
492 text-align: right;
493 width: 100%;
494 }
495 div.wpdadataforms_modal .ui-toolbar {
496 clear: both;
497 }
498
499 div.wpda-dashboard-content table.wpda-datatable {
500 padding: 10px 0;
501 }
502 div.wpda-dashboard-content button.dt-button {
503 margin: 0;
504 height: 30px;
505 }
506
507 table.dataTable thead .sorting,
508 table.dataTable thead .sorting_asc,
509 table.dataTable thead .sorting_desc {
510 background-image: none;
511 }
512
513 /* TOOLTIP */
514
515 .wpda_tooltip_css {
516 background: black;
517 color: white;
518 border: 2px solid white;
519 font: bold 10px "Helvetica Neue", Sans-Serif;
520 text-transform: uppercase;
521 box-shadow: 0 0 7px black;
522 }
523 .wpda_tooltip_css_ic {
524 background: black;
525 color: white;
526 border: 2px solid white;
527 font: bold 10px "Helvetica Neue", Sans-Serif;
528 text-transform: none;
529 box-shadow: 0 0 7px black;
530 }
531 i.wpda_tooltip:hover {
532 cursor: pointer;
533 }
534 .wpda_tooltip_dashboard {
535 background: black;
536 color: white;
537 border: 2px solid white;
538 font: bold 10px "Helvetica Neue", Sans-Serif;
539 box-shadow: 0 0 7px black;
540 }
541 .wpda_tooltip_icons_css, .arrow:after {
542 background: black;
543 border: 2px solid white;
544 }
545 .wpda_tooltip_icons_css {
546 padding: 10px 20px;
547 color: white;
548 border-radius: 20px;
549 font: bold 10px "Helvetica Neue", Sans-Serif;
550 text-transform: uppercase;
551 box-shadow: 0 0 7px black;
552 }
553 .arrow {
554 width: 70px;
555 height: 16px;
556 overflow: hidden;
557 position: absolute;
558 left: 50%;
559 margin-left: -35px;
560 bottom: -16px;
561 }
562 .arrow.top {
563 top: -16px;
564 bottom: auto;
565 }
566 .arrow.left {
567 left: 20%;
568 }
569 .arrow:after {
570 content: "";
571 position: absolute;
572 left: 20px;
573 top: -20px;
574 width: 25px;
575 height: 25px;
576 box-shadow: 6px 5px 9px -9px black;
577 -webkit-transform: rotate(45deg);
578 -ms-transform: rotate(45deg);
579 transform: rotate(45deg);
580 }
581 .arrow.top:after {
582 bottom: -20px;
583 top: auto;
584 }
585
586 /* CHART TYPES */
587 ul.wpda_google_chart_types {
588 list-style-type: none;
589 padding: 0;
590 margin: 0;
591 }
592 ul.wpda_google_chart_types li {
593 display: inline-block;
594 }
595 ul.wpda_google_chart_types li input[type="checkbox"] {
596 display: none;
597 }
598 ul.wpda_google_chart_types li label {
599 border: 1px solid #fff;
600 padding: 10px;
601 display: block;
602 position: relative;
603 margin: 0 2px;
604 cursor: pointer;
605 -webkit-touch-callout: none;
606 -webkit-user-select: none;
607 -khtml-user-select: none;
608 -moz-user-select: none;
609 -ms-user-select: none;
610 user-select: none;
611 }
612 ul.wpda_google_chart_types li label::before {
613 background-color: white;
614 color: white;
615 content: " ";
616 display: block;
617 border-radius: 50%;
618 border: 1px solid #c3c4c7;
619 position: absolute;
620 top: -5px;
621 left: -5px;
622 width: 25px;
623 height: 25px;
624 text-align: center;
625 line-height: 25px;
626 transition-duration: 0.4s;
627 transform: scale(0);
628 }
629 ul.wpda_google_chart_types li label img {
630 height: 120px;
631 width: 120px;
632 transition-duration: 0.2s;
633 transform-origin: 50% 50%;
634 margin: 4px 4px 0 4px;
635 }
636 ul.wpda_google_chart_types li input[type="checkbox"]:checked+label {
637 border-color: #8c8f94;
638 border-radius: 4px;
639 }
640 ul.wpda_google_chart_types li input[type="checkbox"]:checked+label::before {
641 content: "\2713";
642 background-color: #8c8f94;
643 transform: scale(1.4);
644 left: 119px;
645 }
646 ul.wpda_google_chart_types li input[type="checkbox"]:checked+label img {
647 box-shadow: 0 0 5px #dedede;
648 }
649
650 div.wpda-query-select-content textarea {
651 width: 100%;
652 height: 100px;
653 max-height: 100px;
654 }
655 .ui-dialog {
656 z-index: 999999 !important;
657 }
658
659 div.wpda_dashboard_free_message {
660 padding: 4px;
661 text-align: center;
662 }
663 div.wpda_dashboard_free_message table {
664 margin-left: auto;
665 margin-right: auto;
666 }
667
668 div.wpda-widget-content .wpda_widget_chart_container * {
669 border-radius: 0 !important;
670 }
671 div.wpda_widget_chart_container .goog-inline-block,
672 div.wpda_widget_chart_container .google-visualization-table-page-numbers {
673 display: inline-block !important;
674 width: unset !important;
675 }
676 div.wpda_widget_chart_container .google-visualization-table,
677 div.wpda_widget_chart_container .google-visualization-table>div {
678 padding: 0 !important;
679 }
680 div.wpda_widget_chart_container .google-visualization-table .gradient,
681 div.wpda_widget_chart_container .goog-custom-button {
682 background-image: none !important;
683 background: #ddd !important;
684 padding: 0 !important;
685 }
686 div.wpda_widget_chart_container .google-visualization-table-page-numbers a {
687 width: 20px;
688 text-align: center !important;
689 }
690
691 div.wpda-add-share-dashboard {
692 display: grid;
693 grid-template-columns: 1fr 1fr;
694 }
695
696 div.google-visualization-tooltip {
697 pointer-events: none
698 }
699
700 .wpda-dashboard-share {
701 padding-right: 8px;
702 }
703 fieldset.wpda-dashboard-rename label {
704 width: 100px;
705 display: inline-block;
706 }
707 div[aria-describedby=shareDashboard] .ui-dialog-title,
708 div[aria-describedby=shareWidget] .ui-dialog-title {
709 overflow: visible;
710 margin-right: 20px;
711 }
712 #shareDashboard select {
713 box-sizing: border-box;
714 }
715
716 div.wpda-widget-content .dataTables_wrapper .dataTables_length select {
717 padding-right: 1.6em;
718 }