PluginProbe
Essential Widgets / trunk
Essential Widgets vtrunk
3.2.1 3.3 3.2 trunk 1.0.0 1.0.1 1.1 1.2 1.2.1 1.2.2 1.3 1.4 1.4.1 1.5 1.6 1.7 1.7.1 1.7.2 1.7.3 1.7.4 1.8 1.9 2.0 2.1 2.2 All 31 releases
essential-widgets / admin / css / essential-widgets-dasbhoard-admin.css

essential-widgets-dasbhoard-admin.css in Essential Widgets trunk, at admin/css/essential-widgets-dasbhoard-admin.css

758 lines 14.8 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 >>> TABLE OF CONTENTS:
7 ----------------------------------------------------------------
8 # Typography
9 # Layout
10 # Clearing
11 # Lists
12 # Media
13 # Links
14 # Header
15 # Content
16 # Toggle Switch
17 # Other Products
18 # Footer
19 # Media Queries
20 ## >= 320px
21 ## >= 768px
22 ## >= 1024px
23 ## >= 1280px
24 --------------------------------------------------------------*/
25
26 /*--------------------------------------------------------------
27 # Typography
28 --------------------------------------------------------------*/
29 .ew-main,
30 .ew-main button,
31 .ew-main input,
32 .ew-main selcatchids,
33 .ew-main textarea,
34 .ew-main p {
35 color: #1a1a1a;
36 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
37 font-size: 16px;
38 font-size: 1rem;
39 font-weight: 400;
40 line-height: 1.5;
41 word-wrap: break-word;
42 -webkit-hyphens: auto;
43 -moz-hyphens: auto;
44 -ms-hyphens: auto;
45 hyphens: auto;
46 }
47
48 .ew-main h1 {
49 font-size: 24px;
50 font-size: 1.5rem;
51 }
52
53 .ew-main h2 {
54 font-size: 20px;
55 font-size: 1.25rem;
56 }
57
58 .ew-main h3 {
59 font-size: 18px;
60 font-size: 1.125rem;
61 }
62
63 .ew-main h4 {
64 font-size: 16px;
65 font-size: 1rem;
66 }
67
68 .ew-main h5 {
69 font-size: 14px;
70 font-size: 0.875rem;
71 }
72
73 .ew-main h6 {
74 font-size: 13px;
75 font-size: 0.8125rem;
76 }
77
78 .ew-main p {
79 margin: 0 0 1.5em;
80 }
81
82 /*--------------------------------------------------------------
83 # Layout
84 --------------------------------------------------------------*/
85
86 .ew-main {
87 -webkit-box-sizing: border-box;
88 -moz-box-sizing: border-box;
89 box-sizing: border-box;
90 }
91
92 .ew-main *,
93 .ew-main *:before,
94 .ew-main *:after {
95 -webkit-box-sizing: inherit;
96 -moz-box-sizing: inherit;
97 box-sizing: inherit;
98 }
99
100 .ew-main {
101 background-color: #fff;
102 }
103
104 /*--------------------------------------------------------------
105 # Clearing
106 --------------------------------------------------------------*/
107
108 .ew-main .clear:before,
109 .ew-main .clear:after {
110 content: "";
111 display: table;
112 }
113
114 .ew-main .clear:after {
115 clear: both;
116 }
117
118 /*--------------------------------------------------------------
119 # Lists
120 --------------------------------------------------------------*/
121 .ew-main .ul,
122 .ew-main ol {
123 margin: 0 0 1.5em 2em;
124 padding: 0;
125 }
126
127 .ew-main li {
128 margin: 0;
129 }
130
131 .ew-main ul {
132 list-style: disc;
133 }
134
135 .ew-main ol {
136 list-style: decimal;
137 }
138
139 .ew-main li > ul,
140 .ew-main li > ol {
141 margin-top: 0.55em;
142 margin-left: 1.5em;
143 margin-bottom: 0;
144 }
145
146 .ew-main li {
147 margin-bottom: 0.55em;
148 }
149
150 .ew-main dt {
151 font-weight: 700;
152 }
153
154 .ew-main dd {
155 margin: 0 1.5em 1.5em;
156 }
157
158 /*--------------------------------------------------------------
159 # Media
160 --------------------------------------------------------------*/
161 .ew-main img {
162 height: auto; /* Make sure images are scaled corrcatchidsly. */
163 max-width: 100%; /* Adhere to container width. */
164 vertical-align: middle;
165 }
166
167 /*--------------------------------------------------------------
168 # Links
169 --------------------------------------------------------------*/
170
171 .ew-main a {
172 color: #0085c3;
173 cursor: pointer;
174 text-decoration: none;
175 }
176
177 .ew-main a:hover,
178 .ew-main a:focus,
179 .ew-main a:active {
180 color: #444;
181 text-decoration: underline;
182 }
183
184 .ew-main a:focus {
185 outline: thin dotted;
186 }
187
188 .ew-main a:hover,
189 .ew-main a:active {
190 outline: 0;
191 }
192
193 /*--------------------------------------------------------------
194 # Header
195 --------------------------------------------------------------*/
196
197 .ew-main #masthead {
198 background: #00618d;
199 background: -webkit-radial-gradient(circle farthest-side at center bottom, #0085c3, #00618d 110%);
200 background: -o-radial-gradient(circle farthest-side at center bottom, #0085c3, #00618d 110%);
201 background: -moz-radial-gradient(circle farthest-side at center bottom, #0085c3, #00618d 110%);
202 background: radial-gradient(circle farthest-side at center bottom, #0085c3, #00618d 110%);
203 }
204
205 .ew-main #masthead .wrapper {
206 display: -webkit-box;
207 display: -ms-flexbox;
208 display: flex;
209 -ms-flex-flow: column wrap;
210 flex-flow : column wrap;
211 }
212
213 .ew-main #plugin-description {
214 margin: 0 auto;
215 max-width: 960px;
216 padding-bottom: 20px;
217 text-align: center;
218 }
219
220 .ew-main #plugin-description p:last-child {
221 margin-bottom: 0;
222 }
223
224 .ew-main #site-branding {
225 display: block;
226 order: 1;
227 padding: 30px 20px;
228 text-align: center;
229 width: 100%;
230 }
231
232 .ew-main .site-title {
233 font-family: "Trebuchet MS", Helvetica, sans-serif;
234 text-transform: capitalize;
235 }
236
237 .ew-main .site-title a {
238 color: #fff;
239 }
240
241 .ew-main .site-title a:hover,
242 .ew-main .site-title a:focus {
243 text-decoration: none;
244 }
245
246 .ew-main .site-title-additional {
247 color: #006ea4;
248 }
249
250 .ew-main .setting {
251 padding: 0 7px;
252 color: #fff;
253 }
254
255 /*--------------------------------------------------------------
256 # Content
257 --------------------------------------------------------------*/
258
259 .ew-main .container {
260 display: -webkit-box;
261 display: -ms-flexbox;
262 display: flex;
263 -ms-flex-flow: column wrap;
264 flex-flow: column wrap;
265 justify-content: center;
266 margin: 0 auto;
267 max-width: 680px;
268 }
269
270 .ew-main .module-container {
271 display: -webkit-box;
272 display: -ms-flexbox;
273 display: flex;
274 -ms-flex-flow: column wrap;
275 flex-flow: column wrap;
276 -webkit-box-pack: flex-start;
277 -ms-flex-pack: flex-start;
278 justify-content:flex-start;
279 }
280
281 .cwt .ew-options {
282 border-top: 1px solid #dfdfdf;
283 padding-top: 20px;
284 margin-top: 20px;
285 }
286
287 #module-status {
288 margin-bottom: 0;
289 }
290
291 #module-status .module-header {
292 background-color: transparent;
293 padding-top: 0;
294 padding-bottom: 0;
295 justify-content: flex-start;
296 }
297
298 #module-status .module-header h3 {
299 margin-right: 90px;
300 }
301
302 #module-status .loader {
303 right: inherit;
304 left: 170px;
305 }
306
307 .ew-main .module-header {
308 background-color: #f3f3f3;
309 display: -webkit-box;
310 display: -ms-flexbox;
311 display: flex;
312 -ms-flex-flow: column wrap;
313 flex-flow: column wrap;
314 padding: 11px 18px;
315 position: relative;
316 }
317
318 .ew-main .module-header.active {
319 -webkit-transition: all 0.2s ease;
320 -moz-transition: all 0.2s ease;
321 o-transition: all 0.2s ease;
322 transition: all 0.2s ease;
323 }
324
325 .ew-main .module-header.inactive {
326 -webkit-transition: all 0.2s ease;
327 -moz-transition: all 0.2s ease;
328 o-transition: all 0.2s ease;
329 transition: all 0.2s ease;
330 }
331
332 .ew-main .module-title,
333 .ew-main .other-catchthemes-products .module-content {
334 color: #23282d;
335 font-family: "Trebuchet MS", Helvetica, sans-serif;
336 font-weight: normal;
337 }
338
339 .ew-main .catch-modules {
340 display: -webkit-box;
341 display: -ms-flexbox;
342 display: flex;
343 -ms-flex-flow: column wrap;
344 flex-flow: column wrap;
345 margin-bottom: 20px;
346 }
347
348 .ew-main #module-disabled {
349 margin-bottom: 0;
350 }
351
352 .ew-main #module-disabled.catch-modules {
353 -webkit-box-flex: 0;
354 -ms-flex: 0 1 100%;
355 flex: 0 1 100%
356 }
357
358 .ew-main .catch-module-long {
359 background-color: #f9f9f9;
360 border-radius: 3px;
361 border: 2px solid #ccc;
362 border-top: 0;
363 display: -webkit-box;
364 display: -ms-flexbox;
365 display: flex;
366 -ms-flex-flow: column wrap;
367 flex-flow:column wrap;
368 }
369
370 .ew-main .module-content p:last-child {
371 margin-bottom: 0;
372 }
373
374 .ew-main #main-nav .dashicons {
375 line-height: 2.7;
376 }
377
378 /*--------------------------------------------------------------
379 # Toggle Switch
380 --------------------------------------------------------------*/
381
382 .ew-main .switch {
383 -webkit-box-flex: 0;
384 -webkit-flex-grow: 0;
385 -moz-box-flex: 0;
386 -ms-flex-positive: 0;
387 flex-grow: 0;
388 -webkit-flex-shrink: 0;
389 -ms-flex-negative: 0;
390 flex-shrink: 0;
391 position: relative;
392 float: none;
393 right: 0;
394 top: 2px;
395 }
396
397 .ew-main .module-title.active {
398 background-color: #0085c3;
399 }
400
401 .ew-main .switch label {
402 background-color: #48a348;
403 border-radius: 11px;
404 cursor: pointer;
405 height: 16px;
406 right:0;
407 position: absolute;
408 top: 3px;
409 width: 30px;
410 }
411
412 .ew-main .inactive .switch label {
413 background-color: #ccc;
414 }
415
416 .ew-main .switch input[type="checkbox"] {
417 visibility: hidden;
418 display: none;
419 }
420
421 .ew-main .switch label:after {
422 background-color: #fff;
423 border-radius: 100%;
424 content: '';
425 height: 12px;
426 left: 2px;
427 position: absolute;
428 -webkit-transition: all 0.2s ease-in-out;
429 -moz-transition: all 0.2s ease-in-out;
430 o-transition: all 0.2s ease-in-out;
431 transition: all 0.2s ease-in-out;
432 top: 2px;
433 width: 12px;
434 }
435
436 .ew-main .switch input[type="checkbox"]:checked + label:after {
437 left: 16px;
438 background-color: #fff;
439 }
440
441 .ew-main .loader {
442 border: 5px solid #48a348;
443 border-radius: 50%;
444 border-top: 2px solid transparent;
445 width: 20px;
446 height: 20px;
447 -webkit-animation: spin 2s linear infinite;
448 animation: spin 2s linear infinite;
449 position: absolute;
450 right: 60px;
451 display: none;
452 }
453
454 .ew-main p.info,
455 .ew-main p.info a {
456 font-size: 13px;
457 line-height: 2;
458 padding: 10px 12px;
459 }
460
461 @-webkit-keyframes spin {
462 0% { -webkit-transform: rotate(0deg); }
463 100% { -webkit-transform: rotate(360deg); }
464 }
465
466 @keyframes spin {
467 0% { transform: rotate(0deg); }
468 100% { transform: rotate(360deg); }
469 }
470
471 /* Catch Themes & Plugins switch */
472 #ctp-switch .switch {
473 position: relative;
474 display: inline-block;
475 width: 60px;
476 height: 34px;
477 top: 7px;
478 }
479
480 #ctp-switch.ew-main .module-header {
481 background-color: transparent;
482 }
483
484 /*--------------------------------------------------------------
485 # Other Products
486 --------------------------------------------------------------*/
487
488 .ew-main .other-catchthemes-products {
489 background-color: #f9f9f9;
490 clear: both;
491 display: block;
492 }
493
494 .ew-main .other-catchthemes-products .module-content {
495 border: none;
496 padding: 0;
497 position: relative;
498 text-align: center;
499 }
500
501 .ew-main .other-catchthemes-products .catch-modules {
502 background-color: #fff;
503 border: 1px solid #dedede;
504 }
505
506 .ew-main .other-catchthemes-products .catch-modules a {
507 color: #444;
508 display: block;
509 padding: 1em;
510 }
511
512 .ew-main .other-catchthemes-products .catch-modules a:hover,
513 .ew-main .other-catchthemes-products .catch-modules a:focus {
514 color: #0085c3;
515 text-decoration: none;
516 }
517
518 .ew-main .other-catchthemes-products .catch-modules .more-details {
519 background-color: #00618d;
520 color: #fff;
521 padding: 16px;
522 position: absolute;
523 left: 25%;
524 font-size: 15px;
525 font-size: 0.9375rem;
526 right: 25%;
527 text-align: center;
528 top: 35%;
529 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
530 opacity: 0;
531 -webkit-transition: opacity 0.1s ease-in-out;
532 transition: opacity 0.1s ease-in-out;
533 }
534
535 .ew-main .other-catchthemes-products .module-content:hover .more-details,
536 .ew-main .other-catchthemes-products .module-content:focus .more-details {
537 color: #fff;
538 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
539 opacity: 1;
540 text-decoration: none;
541 }
542
543 .ew-main .other-catchthemes-products .catch-modules .modules-thumbnail {
544 padding: 0;
545 }
546
547 /*--------------------------------------------------------------
548 # Footer
549 --------------------------------------------------------------*/
550
551 .ew-main .footer-navigation {
552 font-family: "Trebuchet MS", Helvetica, sans-serif;
553 }
554
555 .ew-main .menu-footer-container {
556 padding: 10px 20px 30px;
557 }
558
559 .ew-main .footer-navigation ul {
560 list-style: none;
561 }
562
563 .ew-main .footer-navigation a {
564 color: #444;
565 text-transform: capitalize;
566 padding: 10px 8px 10px 6px;
567 display: block;
568 }
569
570 .ew-main .footer-navigation a:hover,
571 .ew-main .footer-navigation a:focus {
572 color: #0085c3;
573 text-decoration: none;
574 }
575
576 .ew-main .site-footer .menu-footer {
577 display: -webkit-box;
578 display: -ms-flexbox;
579 display: flex;
580 -ms-flex-flow: row wrap;
581 flex-flow: row wrap;
582 -webkit-box-pack: center;
583 -ms-flex-pack: center;
584 justify-content: center;
585 align-items: center;
586 margin: 0;
587 }
588
589 .ew-main .site-footer .menu-footer li {
590 margin: 0;
591 }
592
593 .ew-options.module-container .catch-modules {
594 border: none;
595 }
596
597 /*--------------------------------------------------------------
598 # Media Queries
599 --------------------------------------------------------------*/
600
601 /*--------------------------------------------------------------
602 ## >= 320px
603 --------------------------------------------------------------*/
604
605 @media screen and (min-width: 20em) {
606 .ew-main .module-header {
607 display: -webkit-box;
608 display: -ms-flexbox;
609 display: flex;
610 -ms-flex-flow: row wrap;
611 flex-flow: row wrap;
612 -webkit-box-pack: space-between;
613 -ms-flex-pack: space-between;
614 justify-content: space-between;
615 }
616
617 .ew-main .module-title {
618 margin-bottom: 0;
619 }
620 }
621
622 /*--------------------------------------------------------------
623 ## >= 768px
624 --------------------------------------------------------------*/
625 @media screen and (min-width: 48em) {
626 .ew-main .container {
627 max-width: 100%;
628 }
629
630 .ew-main .module-container {
631 -ms-flex-flow: row wrap;
632 flex-flow: row wrap;
633 -webkit-box-pack: space-between;
634 -ms-flex-pack: space-between;
635 justify-content: space-between;
636 }
637
638 .ew-main #plugin-description {
639 padding-bottom: 30px;
640 }
641
642 .ew-main .catch-modules {
643 -webkit-box-flex: 0;
644 -ms-flex: 0 1 50%;
645 flex: 0 1 50%
646 }
647
648 .ew-options .catch-modules {
649 padding-right: 21px;
650 }
651
652 .ew-options .catch-modules:nth-child(2n) {
653 padding-right: 0;
654 }
655
656 .ew-main .menu-footer-container {
657 padding: 10px 40px 30px;
658 }
659 }
660
661 /*--------------------------------------------------------------
662 ## >= 1024px
663 --------------------------------------------------------------*/
664
665 @media screen and (min-width: 64em) {
666 .ew-main h1 {
667 font-size: 32px;
668 font-size: 2rem;
669 }
670
671 .ew-main h2 {
672 font-size: 22px;
673 font-size: 1.375rem;
674 }
675
676 .ew-main #site-branding {
677 padding: 40px;
678 }
679
680 .ew-main .module-container {
681 -webkit-box-pack: flex-start;
682 -ms-flex-pack: flex-start;
683 justify-content: flex-start;
684 }
685
686 .ew-main .module-container .wrapper {
687 display: -webkit-box;
688 display: -ms-flexbox;
689 display: flex;
690 -webkit-flex-wrap:wrap;
691 -ms-flex-wrap: wrap;
692 flex-wrap: wrap;
693 -webkit-box-pack: flex-start;
694 -ms-flex-pack: flex-start;
695 justify-content: flex-start;
696 }
697
698 .ew-main .menu-footer-container {
699 padding: 25px 40px;
700 }
701
702 .ew-main .footer-navigation a {
703 padding: 10px;
704 }
705 }
706
707 /*--------------------------------------------------------------
708 ## >= 1280px
709 --------------------------------------------------------------*/
710
711 @media screen and (min-width: 80em) {
712 .ew-main,
713 .ew-main button,
714 .ew-main input,
715 .ew-main selcatchids,
716 .ew-main textarea,
717 .ew-main p {
718 font-size: 18px;
719 font-size: 1.1875rem;
720 }
721
722 .ew-main h1 {
723 font-size: 48px;
724 font-size: 3rem;
725 }
726
727 .ew-main h2 {
728 font-size: 24px;
729 font-size: 1.5rem;
730 }
731
732 .ew-main #plugin-description {
733 padding-bottom: 40px;
734 }
735
736 .ew-main #site-branding {
737 padding: 50px;
738 }
739
740 .ew-main .footer-navigation a {
741 padding: 10px 10px 10px 13px;
742 }
743
744 .ew-main .catch-modules {
745 -webkit-box-flex: 0;
746 -ms-flex: 0 1 33.33%;
747 flex: 0 1 33.33%
748 }
749
750 .ew-options .catch-modules:nth-child(2n) {
751 padding-right: 21px;
752 }
753
754 .ew-options .catch-modules:nth-child(3n) {
755 padding-right: 0;
756 }
757 }
758