PluginProbe
Catch Gallery / 1.4
Catch Gallery v1.4
trunk 1.0 1.0.1 1.1 1.2 1.3 1.4 1.5 1.6 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.6.8 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 All 27 releases
catch-gallery / admin / css / admin-dashboard.css

admin-dashboard.css in Catch Gallery 1.4, at admin/css/admin-dashboard.css

836 lines 14.7 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-dashboard functionality should be
3 * included in this file.
4 */
5 .wpcatchtab.active,
6 table td strong {
7 display: block;
8 }
9
10 .show-more.button {
11 margin: 10px 0 5px 0;
12 }
13
14 .as-shortcode .new:hover .show-me,
15 .welcome-panel img,
16 .as-shortcode .new > div a,
17 .wpcatchtab.active,
18 #public-usage .content p strong,
19 table td strong {
20 display: block;
21 }
22
23 #public-usage .content {
24 display: -webkit-box;
25 display: -ms-flexbox;
26 display: flex;
27 -ms-flex-wrap: wrap;
28 flex-wrap: wrap;
29 }
30
31 #public-usage .content > .as-widget,
32 #public-usage .content > .as-shortcode {
33 -webkit-box-flex: 0;
34 -ms-flex: 0 1 100%;
35 flex: 0 1 100%;
36 }
37
38 .welcome-panel img {
39 height: 40px;
40 width: 40px;
41 vertical-align: middle;
42 margin: 0 auto 14px auto;
43 }
44
45 .welcome-panel .welcome-panel-column,
46 .welcome-panel .welcome-panel-column:first-child {
47 max-width: 980px;
48 width: 100%;
49 }
50
51 /* Form */
52 .show-more .dashicons {
53 vertical-align: middle;
54 }
55
56 .button.reset-token,
57 .button.reset-token:hover,
58 .button.reset-token:focus {
59 background-color: #d54e21;
60 border-color: #d54e21;
61 color: #fff;
62 }
63
64 .button.get-token,
65 .button.get-token:hover,
66 .button.get-token:focus {
67 background-color: #22D41A;
68 border-color: #22D41A;
69 color: #fff;
70 }
71
72 .as-shortcode .new {
73 position: relative;
74 }
75
76 .as-shortcode .new .dashicons,
77 .as-shortcode .button {
78 vertical-align: middle;
79 }
80
81 .as-shortcode .new > div a {
82 margin-bottom: 3px;
83 }
84
85 .as-shortcode .new>div {
86 display: none;
87 position: absolute;
88 right: -54px;
89 top: -1px;
90 }
91
92 #welcome-message {
93 border-radius: 4px;
94 margin-right: 20px;
95 margin-top: 10px;
96 padding: 1px 5px;
97 }
98
99 #access-token .info {
100 padding: 10px 12px;
101 }
102
103 #access-token .info,
104 #request-queries {
105 line-height: 2;
106 }
107
108 /* Custom Scripts */
109
110 .wrap {
111 position: relative;
112 margin: 25px 20px 0 10px;
113 -ms-word-wrap: break-word;
114 word-wrap: break-word;
115 }
116
117 .wrap,
118 .welcome-panel p,
119 .welcome-panel .welcome-panel-close::before,
120 .content .widefat td,
121 .content .widefat thead th {
122 color: #23282d;
123 }
124
125 .welcome-panel .welcome-panel-close::before {
126 left: inherit;
127 right: 10px;
128 z-index: 9;
129 }
130
131 .welcome-panel {
132 border-left: 4px solid #44b450;
133 margin: 21px 0;
134 padding-bottom: 21px;
135 padding-left: 21px;
136 padding-right: 21px;
137 }
138
139 .welcome-panel-content {
140 margin-left: 0;
141 }
142
143 .wrap h1,
144 .wrap h2,
145 .wrap h3,
146 .wrap h4,
147 .wrap h5,
148 .wrap h6,
149 .welcome-panel h3,
150 .wrap p,
151 .welcome-panel-column p,
152 #go-premium ul {
153 margin-top: 0;
154 }
155
156 .wrap a {
157 text-decoration: none;
158 }
159
160 .wrap a:hover,
161 .wrap a:focus {
162 opacity: 0.9;
163 }
164
165 .welcome-panel-column >:last-child,
166 #public-usage .content > div:last-child,
167 #public-usage .content .as-widget >:last-child,
168 #public-usage .content .as-shortcode >:last-child,
169 #public-usage .content .shortcode-option-container > div:last-child {
170 margin-bottom: 0;
171 }
172
173 .content-wrapper {
174 background-color: #fff;
175 position: relative;
176 max-width: 1280px;
177 }
178
179 .content-wrapper .content {
180 padding: 21px;
181 }
182
183 .content-wrapper .button.dismiss {
184 position: absolute;
185 right: 15px;
186 top: 15px;
187 background-color: transparent;
188 border: 0;
189 box-shadow: none;
190 padding: 0;
191 }
192
193 .content-wrapper h2,
194 .content-wrapper .header h3 {
195 margin: 0;
196 padding: 16px 21px;
197 }
198
199 .content-wrapper h2,
200 .content-wrapper .header h3,
201 .catch-sidebar-title,
202 .sidebar-spot-inner {
203 border-bottom: 1px solid #ddd;
204 }
205
206 .content-wrapper h2,
207 .content-wrapper .header h3,
208 .catch-sidebar-spot h2,
209 .catch-sidebar-full-width h2,
210 .widefat td,
211 .widefat thead th,
212 .about-text h2 {
213 font-size: 18px;
214 font-size: 1.125rem;
215 line-height: 1.5;
216 }
217
218 .welcome-panel .button {
219 border: none;
220 background: none;
221 box-shadow: none;
222 }
223
224 .welcome-panel .welcome-panel-close {
225 text-indent: -9999px;
226 }
227
228 .welcome-panel .welcome-panel-close::before {
229 font-size: 30px;
230 font-size: 1.875rem;
231 text-indent: 0;
232 }
233
234 .catch-content-wrapper {
235 display: table;
236 width: 100%;
237 table-layout: fixed;
238 }
239
240 .wpcatchtab {
241 display: none;
242 }
243
244 .widefat thead th,
245 .table-icons {
246 font-weight: 600;
247 }
248
249 .content-wrapper .catch-lists li strong {
250 font-weight: 700;
251 }
252
253 .wrap .content .as-shortcode .shortcode-option-container > div,
254 .about-text h2,
255 .wrap p,
256 .welcome-panel h3 {
257 margin-bottom: 14px;
258 }
259
260 .dashicons {
261 font-size: 24px;
262 font-size: 1.5rem;
263 height: 30px;
264 width: 30px;
265 }
266
267 .sidebar-spot-inner ul li,
268 .catch-sidebar-spot h3 {
269 margin-bottom: 7px;
270 }
271
272 .wrap .wpcatchtab,
273 #sidebar,
274 .content-wrapper {
275 margin-top: 21px;
276 }
277
278 .content-wrapper,
279 .sidebar-spot-inner,
280 .sidebar-spot-inner ul,
281 .catch-sidebar-title {
282 margin-bottom: 21px;
283 }
284
285 .catch-sidebar-spot,
286 .catch-sidebar-full-width {
287 float: left;
288 width: 100%;
289 box-sizing: border-box;
290 }
291
292 .sidebar-spot-inner {
293 padding-bottom: 21px;
294 }
295
296 .catch-lists:before,
297 .catch-lists:after,
298 .content-wrapper:before,
299 .content-wrapper:after,
300 .content-wrapper .content:before,
301 .content-wrapper .content:after {
302 content: "";
303 display: table;
304 table-layout: fixed;
305 }
306
307 .catch-lists:after,
308 .content-wrapper:after,
309 .content-wrapper .content:after {
310 clear: both;
311 }
312
313 .catch-lists li {
314 position: relative;
315 padding-left: 21px;
316 }
317
318 .catch-lists li:before {
319 content:"\2713\0020";
320 left: 0;
321 font-weight: 700;
322 position: absolute;
323 }
324
325 #pro-screenshot .catch-lists li {
326 padding-left: 0;
327 }
328
329 #pro-screenshot .catch-lists li::before {
330 content: none;
331 }
332
333 .wp-ui-highlight {
334 background-color: #0073aa;
335 }
336
337 /*Sidebar*/
338 .catch-sidebar-title {
339 padding-bottom: 10px;
340 }
341
342 .catch-sidebar-title,
343 .catch-sidebar-spot h3 {
344 font-size: 14px;
345 font-size: 0.875rem;
346 font-weight: 700;
347 }
348
349 .catch-sidebar-spot h3 {
350 color: #444;
351 }
352
353 /*For Table*/
354 .table-icons {
355 font-size: 21px;
356 font-size: 1.3125rem;
357 display: inline-block;
358 }
359
360 .icon-green,
361 .highlighted {
362 color: #48a348;
363 }
364
365 .icon-red {
366 color: #c7353e;
367 }
368
369 #title,
370 #pro,
371 #free,
372 .fixed .column-free,
373 .fixed .column-pro,
374 .catch-footer {
375 text-align: center;
376 }
377
378 img {
379 height: auto;
380 max-width: 100%;
381 }
382
383 table {
384 border-collapse: collapse;
385 border-spacing: 0;
386 }
387
388 table thead th {
389 padding: 14px;
390 }
391
392 #premium-extensions table,
393 #premium-extensions th,
394 #premium-extensions td {
395 border: 1px solid #ddd;
396 }
397
398 table td strong,
399 table td p {
400 letter-spacing: 0.01em;
401 }
402
403 dd,
404 li {
405 margin-bottom: 21px;
406 }
407
408 .widefat td p,
409 .catch-lists li p {
410 margin-top: 7px;
411 }
412
413 .fixed .column-free,
414 .fixed .column-pro {
415 width: 15%;
416 }
417
418 .fixed .column-free,
419 .fixed .column-pro,
420 .widefat td {
421 vertical-align: middle;
422 }
423
424 .widefat td,
425 .widefat thead th {
426 padding: 14px 21px;
427 }
428
429 /*Footer*/
430 .catch-footer {
431 margin-top: 14px;
432 border-bottom: 1px solid #fff;
433 }
434
435 .catch-footer-menu ul li,
436 .catch-footer-menu ul li a,
437 .catch-footer-site-info a {
438 display: inline-block;
439 margin-bottom: 0;
440 }
441
442 .catch-footer-menu ul {
443 margin: 0;
444 }
445
446 .catch-footer-menu ul li a{
447 padding: 10px;
448 }
449
450 .catch-footer-site-info {
451 border-bottom: 1px solid #ddd;
452 }
453
454 .catch-footer-site-info a {
455 padding: 12px;
456 }
457
458 .catch-footer-menu {
459 border-top: 1px solid #fff;
460 border-bottom: 1px solid #ddd;
461 }
462
463 .content-wrapper.col-1,
464 .content-wrapper.col-2 {
465 max-width: 735px;
466 }
467
468 #plugin-description {
469 max-width: 1200px;
470 }
471
472 /* => 667px */
473 @media screen and (min-width: 41.6875em) {
474 .shortcode-option-container {
475 display: flex;
476 flex-flow: row wrap;
477 }
478
479 .shortcode-option-container > div {
480 -webkit-box-flex: 0;
481 -ms-flex: 0 1 50%;
482 flex: 0 1 50%;
483 }
484
485 .welcome-panel h3 {
486 text-align: left;
487 }
488
489 .welcome-panel img {
490 display: inline-block;
491 margin-bottom: 0;
492 margin-right: 14px;
493 }
494
495 #public-usage .content {
496 display: -webkit-box;
497 display: -ms-flexbox;
498 display: flex;
499 -ms-flex-wrap: nowrap;
500 flex-wrap: nowrap;
501 }
502
503 #public-usage .content > .as-widget,
504 #public-usage .content > .as-shortcode {
505 -webkit-box-flex: 0;
506 -ms-flex: 0 1 50%;
507 flex: 0 1 50%;
508 }
509
510 #public-usage .content > .as-widget {
511 padding-right: 21px;
512 }
513
514 #public-usage .content > .as-shortcode {
515 border-left: 1px solid #ddd;
516 padding-left: 21px;
517 }
518
519 #public-usage .content > .as-widget,
520 #public-usage .content > .as-shortcode {
521 margin-bottom: 0;
522 }
523
524 .catch-sidebar-spot {
525 width: 50%;
526 padding-right: 21px;
527 }
528
529 .catch-sidebar-spot-wrapper .catch-sidebar-spot:nth-of-type(even),
530 .col-2 .catch-lists li:nth-of-type(even),
531 .col-3 .catch-lists li:nth-child(2n),
532 .col-4 .catch-lists li:nth-child(2n) {
533 padding-right: 0;
534 }
535
536 .catch-footer {
537 margin-top: 21px;
538 }
539
540 .catch-lists li {
541 display: inline-block;
542 float: left;
543 -webkit-box-sizing: border-box;
544 box-sizing: border-box;
545 width: 100%;
546 }
547
548 .content-wrapper.col-3 {
549 max-width: 100%;
550 width: 100%;
551 }
552
553 .col-2 .catch-lists li,
554 .col-3 .catch-lists li,
555 .col-4 .catch-lists li,
556 .module-container .module-wrap {
557 width: 50%;
558 }
559
560 .col-2 .catch-lists li,
561 .col-3 .catch-lists li,
562 .col-4 .catch-lists li {
563 padding-right: 21px;
564 }
565
566 .module-wrap {
567 padding-right: 21px;
568 }
569
570 .module-container .module-wrap:nth-child(2n) {
571 padding-right: 0;
572 }
573 }
574
575 /* => 783px */
576 @media screen and (min-width: 48.9375em) {
577 .wrap {
578 margin-right: 30px;
579 }
580
581 .form-table input[type="text"],
582 .form-table input[type="search"],
583 .form-table input[type="radio"],
584 .form-table input[type="tel"],
585 .form-table input[type="time"],
586 .form-table input[type="url"],
587 .form-table input[type="week"],
588 .form-table input[type="password"],
589 .form-table input[type="checkbox"],
590 .form-table input[type="color"],
591 .form-table input[type="date"],
592 .form-table input[type="datetime"],
593 .form-table input[type="datetime-local"],
594 .form-table input[type="email"],
595 .form-table input[type="month"],
596 .form-table input[type="number"],
597 .form-table select,
598 .form-table textarea {
599 margin-right: 10px;
600 display: inline-block;
601 }
602
603 .form-table td span {
604 display: inline-block;
605 }
606
607 h3.option-toggle a {
608 background-position: 99% 50%;
609 }
610
611 h3.option-active a {
612 background-position: 99% 50%;
613 }
614 }
615
616 /* => 1024px */
617 @media screen and (min-width: 64em) {
618 .catch-sidebar-spot-wrapper .catch-sidebar-spot,
619 .catch-sidebar-spot-wrapper .catch-sidebar-spot:nth-of-type(even),
620 .col-3 .catch-lists li:nth-child(2n) {
621 padding-right: 21px;
622 }
623
624 .catch-sidebar-spot-wrapper .catch-sidebar-spot:nth-child(3n) {
625 padding-right: 0;
626 }
627
628 .catch-sidebar-spot,
629 .col-3 .catch-lists li {
630 width: 33.33%;
631 }
632
633 .col-3 .catch-lists li:nth-child(3n) {
634 padding-right: 0;
635 }
636
637 .table-icons {
638 font-size: 30px;
639 font-size: 1.875rem;
640 }
641 }
642
643 /* => 1200px */
644 @media screen and (min-width: 75em) {
645 .welcome-panel .welcome-panel-close::before,
646 .welcome-panel .welcome-panel-close {
647 top: 50%;
648 transform: translateY(-50%);
649 }
650
651 .welcome-panel {
652 padding-right: 49px;
653 }
654
655 .catch_widget_settings,
656 .catch-widget-sidebar {
657 display: table-cell;
658 vertical-align: top;
659 }
660
661 .catch_widget_settings,
662 .catch-sidebar-spot,
663 .col-2 .sidebar-spot-inner .catch-lists li,
664 .col-3 .sidebar-spot-inner .catch-lists li {
665 width: 100%;
666 }
667
668 .catch-widget-sidebar {
669 width: 245px;
670 padding: 0 0 0 50px;
671 }
672
673 #sidebar {
674 margin-top: 66px;
675 }
676
677 .col-4 .catch-lists li,
678 .col-4 .catch-lists li:nth-child(2n) {
679 padding-right: 21px;
680 }
681
682 .catch-sidebar-spot,
683 .catch-sidebar-spot-wrapper .catch-sidebar-spot,
684 .catch-sidebar-spot-wrapper .catch-sidebar-spot:nth-of-type(even),
685 .col-2 .sidebar-spot-inner .catch-lists li,
686 .col-3 .sidebar-spot-inner .catch-lists li,
687 .col-4 .catch-lists li:nth-child(4n) {
688 padding-right: 0;
689 }
690
691 .catch-sidebar-spot:last-child .sidebar-spot-inner {
692 border: 0;
693 }
694
695 .catch-footer {
696 margin-top: 160px;
697 }
698
699 .col-4 .catch-lists li {
700 width: 25%;
701 }
702
703 .module-container .module-wrap {
704 width: 33.33%;
705 }
706
707 .module-container .module-wrap:nth-child(2n) {
708 padding-right: 21px;
709 }
710
711 .module-container .module-wrap:nth-child(3n) {
712 padding-right: 0;
713 }
714
715 }
716 /* jQuery UI Tooltip CSS */
717 .ui-tooltip {
718 padding: 8px;
719 position: absolute;
720 z-index: 9999;
721 max-width: 300px;
722 }
723 body .ui-tooltip {
724 border-width: 2px;
725 }
726
727 .ui-widget-content {
728 background: #ffffff;
729 }
730
731 .ui-widget.ui-widget-content {
732 border: 1px solid #c5c5c5;
733 }
734
735 .tooltip {
736 cursor: pointer;
737 }
738
739 /*--------------------------------------------------------------
740 # Toggle Switch
741 --------------------------------------------------------------*/
742 .catch-gallery-main .switch {
743 -webkit-box-flex: 0;
744 -webkit-flex-grow: 0;
745 -moz-box-flex: 0;
746 -ms-flex-positive: 0;
747 flex-grow: 0;
748 -webkit-flex-shrink: 0;
749 -ms-flex-negative: 0;
750 flex-shrink: 0;
751 position: relative;
752 float: none;
753 right: 0;
754 top: 2px;
755 }
756
757 .catch-gallery-main.module-title.active {
758 background-color: #0085c3;
759 }
760
761 .catch-gallery-main .switch label {
762 background-color: #48a348;
763 border-radius: 11px;
764 cursor: pointer;
765 height: 16px;
766 right:0;
767 position: absolute;
768 top: 3px;
769 width: 30px;
770 }
771
772 .catch-gallery-main .inactive .switch label {
773 background-color: #ccc;
774 }
775
776 .catch-gallery-main .switch input[type="checkbox"] {
777 visibility: hidden;
778 display: none;
779 }
780
781 .catch-gallery-main .switch label:after {
782 background-color: #fff;
783 border-radius: 100%;
784 content: '';
785 height: 12px;
786 left: 2px;
787 position: absolute;
788 -webkit-transition: all 0.2s ease-in-out;
789 -moz-transition: all 0.2s ease-in-out;
790 o-transition: all 0.2s ease-in-out;
791 transition: all 0.2s ease-in-out;
792 top: 2px;
793 width: 12px;
794 }
795
796 .catch-gallery-main .switch input[type="checkbox"]:checked + label:after {
797 left: 16px;
798 background-color: #fff;
799 }
800
801 .catch-gallery-main .loader {
802 border: 5px solid #48a348;
803 border-radius: 50%;
804 border-top: 2px solid transparent;
805 width: 20px;
806 height: 20px;
807 -webkit-animation: spin 2s linear infinite;
808 animation: spin 2s linear infinite;
809 position: absolute;
810 right: 60px;
811 display: none;
812 }
813
814 @-webkit-keyframes spin {
815 0% { -webkit-transform: rotate(0deg); }
816 100% { -webkit-transform: rotate(360deg); }
817 }
818
819 @keyframes spin {
820 0% { transform: rotate(0deg); }
821 100% { transform: rotate(360deg); }
822 }
823
824 /* Catch Themes & Plugins switch */
825 #ctp-switch .switch {
826 position: relative;
827 display: inline-block;
828 width: 60px;
829 height: 34px;
830 top: 7px;
831 }
832
833 #ctp-switch.catch-gallery-main .module-header {
834 background-color: transparent;
835 }
836