PluginProbe
System Dashboard / 2.8.3
System Dashboard v2.8.3
trunk 1.0.0 1.1.0 1.1.1 1.2.0 1.3.0 1.3.1 1.3.2 1.4.0 1.5.1 1.5.2 1.6.0 1.7.1 1.7.2 1.8.0 1.9.0 2.0.0 2.0.1 2.0.2 2.1.0 2.1.1 2.1.2 2.1.3 2.2.0 2.2.1 All 62 releases
system-dashboard / admin / css / system-dashboard-admin.css

system-dashboard-admin.css in System Dashboard 2.8.3, at admin/css/system-dashboard-admin.css

710 lines 13.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * All of the CSS for your admin-specific functionality should be
3 * included in this file.
4 */
5
6 #screen-meta-links {
7 display: none;
8 }
9
10 #screen-meta-links+.csf-options {
11 margin-top: 24px;
12 }
13
14 .sd-options .csf-header-inner {
15 background-color: #fafafa;
16 border-bottom: 1px solid #f5f5f5;
17 }
18
19 .csf-theme-dark.sd-options .csf-header-inner h1 {
20 color: #23282d;
21 }
22
23 .sd-options .csf-header-inner h1 small {
24 font-size: 14px;
25 }
26
27 .sd-options .csf-buttons {
28 display: none;
29 }
30
31 .sd-options .csf-header a {
32 text-decoration: none;
33 transition: .25s;
34 }
35
36 .sd-options .sd-header-action span {
37 font-size: 1.125em;
38 }
39
40 .sd-options .csf-header a:hover {
41 text-decoration: underline;
42 }
43
44 .sd-options .sd-header-action {
45 line-height: 30px;
46 margin-left: 16px;
47 }
48
49 .sd-options .sd-header-action:first-child {
50 margin-left: 0;
51 }
52
53 .sd-options .field-info-line {
54 display: block;
55 width: 100%;
56 padding: 4px 0;
57 overflow: hidden;
58 border-bottom: 1px solid #eee;
59 }
60
61 .sd-options .field-info-line:first-child {
62 padding-top: 0;
63 }
64
65 .sd-options .field-info-line span {
66 display: inline-block;
67 width: 50%;
68 overflow: hidden;
69 padding-right: 16px;
70 }
71
72 .sd-options .field-info-line.line-full-width span {
73 /* font-weight: 600; */
74 width: 100%;
75 }
76
77 .sd-options .field-info-line:last-child,
78 .sd-options .field-info-line.line-full-width:last-child {
79 border-bottom: none;
80 }
81
82 .csf-field.main-section > .csf-title h4 {
83 font-size: 1.25em;
84 font-weight: 600;
85 color: #555;
86 padding-bottom: 10px;
87 border-bottom: 1px solid #ccd0d4;
88 }
89
90 .wordpress-overview, .server-overview {
91 color: #3c434a;
92 line-height: 1.7;
93 }
94
95 .sd-options h4.field-parts-title {
96 padding-bottom: 8px;
97 border-bottom: 1px solid #ccd0d4;
98 margin-bottom: 0;
99 }
100
101 .sd-options .field-parts {
102 display: flex;
103 width: 100%;
104 justify-content: space-between;
105 padding: 8px 0 10px;
106 border-bottom: 1px solid #eee;
107 }
108
109 .sd-options .field-parts.search-filter {
110 background: #fafafa;
111 padding: 8px !important;
112 border: 1px solid #ddd;
113 border-radius: 5px;
114 width: calc(100% - 16px);
115 margin-bottom: 4px;
116 }
117
118 .sd-options .field-parts.search-filter input[type="text"] {
119 width: 48%;
120 border: 1px solid #ddd;
121 }
122
123 .sd-options .search-filter-additional-info {
124 width: 48%;
125 }
126
127 .sd-options .field-parts.flex-direction-column {
128 flex-direction: column;
129 }
130
131 .sd-options .field-parts.plain-content {
132 padding: 8px 0 16px;
133 border-bottom: 0;
134 }
135
136 .sd-options .field-parts:first-child {
137 padding-top: 0;
138 }
139
140 .sd-options .ac-left .field-parts:last-child {
141 padding-bottom: 0;,
142 border-bottom: 0;
143 }
144
145 .sd-options .mc-collapsible .field-parts:first-child {
146 padding-top: 8px;
147 }
148
149 .sd-options .field-part {
150 width: 48%;
151 }
152
153 .sd-options .field-part.full-width {
154 width: 100%;
155 }
156
157 .sd-options .field-parts.single-top-part {
158 margin-bottom: 24px;
159 }
160
161 .sd-options .field-part .parts {
162 width: 100%;
163 display: flex;
164 justify-content: space-around;
165 }
166
167 .sd-options .field-part .parts-heading {
168 font-weight: 600;
169 }
170
171 .sd-options .field-part .halves {
172 width: 49%;
173 }
174
175 .sd-options .field-part .thirds {
176 width: 32%;
177 }
178
179 .sd-options .field-part .quarts {
180 width: 23.5%;
181 }
182
183 .sd-options .wpcore-hooks .field-part.full-width {
184 display: flex;
185 flex-direction: row;
186 justify-content: space-between;
187 align-items: center;
188 }
189
190 .sd-options .first-part > span {
191 color: #aaa;
192 }
193
194 .sd-options .first-part span.option__name {
195 color: #2271b1;
196 text-decoration: underline;
197 }
198
199 .sd-options .first-part span.option__value {
200 color: #3c434a;
201 }
202
203 .sd-options span.db-table-origin-plugin {
204 line-height: 2;
205 word-break: unset;
206 white-space: nowrap;
207 color: #3c434a;
208 }
209
210 img.spinner_inline {
211 height: 1.5em;
212 width: 1.5em;
213 position: relative;
214 bottom: -4px;
215 margin-right: 2px;
216 }
217
218 .ajax-value {
219 display: block;
220 height: auto;
221 }
222
223 .ajax-value pre {
224 word-break: break-all;
225 white-space: pre-wrap;
226 }
227
228 .csf-field .json-document {
229 padding: 0;
230 }
231
232 .csf-field a.json-toggle:before {
233 font-size: 1em;
234 top: .25em;
235 }
236
237 .csf-field a.json-toggle:hover:before {
238 color: #3c434a;
239 }
240
241 .csf-field ul.json-dict li {
242 margin-top: 3px;
243 margin-bottom: 3px;
244 }
245
246 .csf-field .json-string,
247 .csf-field .json-literal {
248 font-weight: 600;
249 }
250
251 .sd-options .field-part.long-value {
252 word-break: break-all;
253 }
254
255 a.link-muted {
256 color: #3c434a;
257 text-decoration: none;
258 }
259
260 a.link-muted:hover {
261 color: #135e96;
262 text-decoration: underline;
263 }
264
265 .phpinfo-details td.v {
266 overflow-wrap: anywhere;
267 }
268
269 .csf-field-accordion.phpinfo-details .csf-accordion-content {
270 background: #f5f5f5;
271 }
272
273 .csf-field.wordpress-more-tabs {
274 padding-top: 0;
275 border-top: none;
276 }
277
278 .custom-fields .csf-accordion-items {
279 display: flex;
280 justify-content: space-between;
281 }
282
283 .custom-fields .csf-accordion-item {
284 width: calc( ( 100% / 2 ) - 7.5px );
285 }
286
287 span.normal-weight {
288 font-weight: normal;
289 }
290
291 .site-health-dot {
292 display: inline-block;
293 width: 1.25em;
294 height: 1.25em;
295 margin-right: 6px;
296 margin-bottom: -1px;
297 font-size: 0.75em;
298 color: #ffffff;
299 font-weight: 600;
300 border-radius: 100px;
301 }
302
303 .site-health-dot.green {
304 background: #00a32a;
305 }
306
307 .site-health-dot.orange {
308 background: #dba617;
309 }
310
311 .hidden {
312 display: none !important;
313 }
314
315 .sd-italic {
316 font-style: italic;
317 }
318
319 .sd-faint {
320 opacity: 0.5;
321 }
322
323 .sd-viewer-intro {
324 padding: 8px;
325 background: #fafafa;
326 border: 1px solid #ddd;
327 border-radius: 5px;
328 margin-bottom: 16px;
329 }
330
331 /* Pure JS Accordion */
332
333 dl.mc-collapsible {
334 background-color: #fff;
335 position: relative;
336 }
337 dl.mc-collapsible[data-controls] {
338 margin-top: 15px;
339 }
340 dl.mc-collapsible .control {
341 /* font-family: "Open Sans", sans-serif; */
342 position: absolute;
343 top: -5px;
344 color: #2271b1;
345 width: 60px;
346 font-size: 0.875em;
347 text-align: end;
348 cursor: pointer;
349 right: 0;
350 height: 44px;
351 }
352 dl.mc-collapsible .control i {
353 display: inline-block;
354 font-size: 1.3em;
355 margin-inline: 3px;
356 vertical-align: middle;
357 }
358 dl.mc-collapsible .control span {
359 display: flex;
360 align-items: center;
361 justify-content: flex-end;
362 }
363 dl.mc-collapsible .control:hover span {
364 text-decoration: underline;
365 }
366 dl.mc-collapsible .control span:nth-child(2) {
367 display: none;
368 }
369 dl.mc-collapsible .control.controls-open span:nth-child(1) {
370 display: none;
371 }
372 dl.mc-collapsible .control.controls-open span:nth-child(2) {
373 display: flex;
374 }
375 dl.mc-collapsible dt {
376 /* font-family: Lato, sans-serif; */
377 padding: 0.75em 0;
378 font-size: 1em;
379 font-weight: 600;
380 position: relative;
381 cursor: pointer;
382 -webkit-user-select: none;
383 -moz-user-select: none;
384 -ms-user-select: none;
385 user-select: none;
386 transition: color 0.3s ease-out, background-color 0.45s ease-out;
387 }
388 dl.mc-collapsible dt:hover {
389 /* color: #a13021; */
390 }
391 dl.mc-collapsible dt::before, dl.mc-collapsible dt::after {
392 /* font-family: "Material Icons"; */
393 font-size: 1.5em;
394 font-weight: bold;
395 position: absolute;
396 display: block;
397 top: 50%;
398 transform: translatey(-50%) rotate(90deg);
399 transition: transform 0.3s ease-out, opacity 0.4s ease-out;
400 transform-origin: center;
401 }
402 dl.mc-collapsible.ac-left dt::before {
403 transform: translatey(-65%) rotate(0deg);
404 }
405 dl.mc-collapsible dd {
406 /* font-family: Roboto, sans-serif; */
407 max-height: 0em;
408 margin: 0;
409 padding: 0;
410 overflow: hidden;
411 transition: max-height 0.3s ease-out;
412 /* word-break: break-all; */
413 }
414 dl.mc-collapsible dd > div {
415 margin: 0;
416 }
417 dl.mc-collapsible dd > div > *:first-child {
418 margin-top: 0;
419 padding-top: 0;
420 }
421 /* dl.mc-collapsible dd > div > *:not(:first-child) {
422 margin-top: 0.5em;
423 } */
424 dl.mc-collapsible:not([data-style]) dt {
425 padding-right: 2.5em;
426 border-bottom: 1px #f2f2f2 solid;
427 }
428 dl.mc-collapsible:not([data-style]) dt.active, dl.mc-collapsible:not([data-style]) dt:hover {
429 /* background-color: #fafafa; */
430 border-bottom: 1px #ccc solid;
431 }
432 dl.mc-collapsible:not([data-style]) dt::before, dl.mc-collapsible:not([data-style]) dt::after {
433 right: 1em;
434 }
435 dl.mc-collapsible:not([data-style]) dt::before {
436 content: "›";
437 }
438 dl.mc-collapsible:not([data-style]) dt.active::before {
439 transform: translateX(-100%) translateY(-50%) rotate(-0.25turn);
440 }
441 dl.mc-collapsible:not([data-style]) dd {
442 /* padding-inline: 1em; */
443 padding: 0;
444 }
445 /*
446 dl.mc-collapsible:not([data-style]) dd div {
447 margin-top: 0.7em;
448 }
449 */
450 dl.mc-collapsible:not([data-style]).ac-left {
451 margin-bottom: 0;
452 }
453 dl.mc-collapsible:not([data-style]).ac-left dt {
454 padding-right: 0;
455 padding-bottom: 0;
456 padding-left: 1.25em;
457 border-bottom: 0;
458 }
459 dl.mc-collapsible:not([data-style]).ac-left dt.active {
460 padding-bottom: 0.75em;
461 border-bottom: 1px #eee solid;
462 }
463 dl.mc-collapsible:not([data-style]).ac-left dt.active:hover {
464 border-bottom: 1px #ccc solid;
465 }
466
467 dl.mc-collapsible:not([data-style]).ac-left dt::before, dl.mc-collapsible:not([data-style]).ac-left dt::after {
468 font-size: 1.5em;
469 left: 0;
470 right: unset;
471 }
472 dl.mc-collapsible:not([data-style]).ac-left dt::before {
473 font-size: 22px;
474 top: 20px;
475 }
476 dl.mc-collapsible:not([data-style]).ac-left dt.active::before {
477 transform: translateX(50%) translateY(-50%) rotate(0.25turn);
478 }
479 dl.mc-collapsible[data-style=qa] dt {
480 padding-left: 1.5em;
481 }
482 dl.mc-collapsible[data-style=qa] dt::before, dl.mc-collapsible[data-style=qa] dt::after {
483 color: #595959;
484 font-weight: normal;
485 left: 0.1em;
486 top: 1.1em;
487 vertical-align: middle;
488 transform-origin: center;
489 position: absolute;
490 }
491 dl.mc-collapsible[data-style=qa] dt::before {
492 content: "add_box";
493 }
494 dl.mc-collapsible[data-style=qa] dt::after {
495 content: "indeterminate_check_box";
496 opacity: 0;
497 transform-origin: 0;
498 }
499 dl.mc-collapsible[data-style=qa] dt.active::before, dl.mc-collapsible[data-style=qa] dt.active::after {
500 color: #a13021;
501 }
502 dl.mc-collapsible[data-style=qa] dt.active::before {
503 opacity: 0;
504 }
505 dl.mc-collapsible[data-style=qa] dt.active::after {
506 opacity: 1;
507 }
508 dl.mc-collapsible[data-style=qa] dd {
509 padding-left: 1em;
510 }
511 .mc-collapsible-title {
512 margin: 0;
513 padding: 8px 0;
514 border-bottom: 1px #ccc solid;
515 }
516 .group {
517 width: 100%;
518 margin-top: -24px;
519 /* background-color: #fff;
520 padding: 1em;
521 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
522 }
523
524 .group.margin-default {
525 margin-top: -8px;
526 }
527
528 .sd__hooks dl.mc-collapsible .control {
529 top: 8px;
530 }
531 .sd__hooks dl.mc-collapsible dt {
532 font-weight: normal;
533 }
534 .group h3 {
535 color: #595959;
536 /* font-family: Lato, sans-serif; */
537 text-align: center;
538 margin-top: 0.25em;
539 }
540
541 .group + .group {
542 margin-block: 1em;
543 }
544
545 /* END OF Pure JS Accordion */
546
547 .csf-field.has-switcher .csf-title h4 {
548 display: flex;
549 align-items: center;
550 }
551
552 /* CSS On / Off switcher -- https://codepen.io/MoorLex/pen/GZaavy */
553
554 input[type="checkbox"] {
555 display: none;
556 }
557
558 input[type="checkbox"] + label {
559 display: inline-block;
560 width: 40px;
561 height: 20px;
562 position: relative;
563 transition: 0.3s;
564 margin: 0 8px 0 0;
565 box-sizing: border-box;
566 }
567
568 input[type="checkbox"] + label:after,
569 input[type="checkbox"] + label:before {
570 content: '';
571 display: block;
572 position: absolute;
573 left: 0px;
574 top: 0px;
575 width: 20px;
576 height: 20px;
577 transition: 0.3s;
578 cursor: pointer;
579 }
580
581 input[type="checkbox"].inset-3:checked + label.red {
582 background: #ECA9A7;
583 }
584
585 input[type="checkbox"].inset-3:checked + label.red:after {
586 background: #D9534F;
587 }
588
589 input[type="checkbox"].inset-3:checked + label.green {
590 background: #AEDCAE;
591 }
592
593 input[type="checkbox"].inset-3:checked + label.green:after {
594 background: #5CB85C;
595 }
596
597 input[type="checkbox"].inset-3:checked + label:after {
598 left: calc(100% - 18px);
599 }
600
601 input[type="checkbox"].inset-3 + label {
602 background: #ddd;
603 border-radius: 20px;
604 }
605
606 input[type="checkbox"].inset-3 + label:after {
607 background: #fff;
608 border-radius: 50%;
609 width: 16px;
610 height: 16px;
611 top: 2px;
612 left: 2px;
613 }
614
615 /* Logs module */
616
617 .log-entries-header {
618 margin-bottom: 12px;
619 font-style: italic;
620 }
621
622 .log-entries-footer {
623 margin-top: 12px;
624 padding-top: 8px;
625 border-top: 1px solid #ddd;
626 }
627
628 #email-delivery-log div {
629 max-width: 100% !important;
630 }
631
632 #email-delivery-log img {
633 max-width: 100%;
634 }
635
636 #email-delivery-log .ui.accordion .title:not(.ui) {
637 font-family: inherit;
638 font-weight: 600;
639 color: inherit;
640 transition: 0.25s;
641 }
642
643 #email-delivery-log .ui.accordion .title.active {
644 border-bottom: 1px solid #ddd;
645 }
646
647 /* DataTables */
648
649 .sd-options .dataTables_wrapper .dataTables_length,
650 .sd-options .dataTables_wrapper .dataTables_filter {
651 margin-bottom: 8px;
652 }
653
654 .sd-options table.dataTable {
655 margin: 0 auto 8px;
656 }
657
658 .sd-options .dataTables_wrapper .dataTables_length select {
659 min-width: 52px;
660 }
661
662 .sd-options table.dataTable thead th,
663 .sd-options table.dataTable tfoot th {
664 font-weight: 500;
665 }
666
667 @media (max-width:768px) {
668
669 .custom-fields .csf-accordion-items {
670 flex-direction: column;
671 }
672 .custom-fields .csf-accordion-item {
673 width: 100%;
674 }
675
676 .sd-options .field-parts {
677 flex-direction: column;
678 }
679
680 .sd-options .field-part {
681 width: 100%;
682 }
683
684 .sd-options .field-parts.search-filter input[type="text"] {
685 width: 100%;
686 margin-bottom: 12px;
687 }
688
689 .sd-options .search-filter-additional-info {
690 width: 100%;
691 }
692
693 .sd-options .wpcore-hooks .field-part.full-width {
694 flex-direction: column;
695 }
696
697 }
698
699 @media (max-width:480px) {
700
701 .sd-options .field-info-line span {
702 width: auto;
703 padding-right: 0;
704 }
705
706 .sd-option .field-part {
707 width: 100%;
708 }
709
710 }