PluginProbe
Catch IDs / trunk
Catch IDs vtrunk
2.7.3 2.8 2.8.1 3.0 trunk 1.0 1.1 1.2 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.5 All 39 releases
catch-ids / css / catch-ids.css

catch-ids.css in Catch IDs trunk, at css/catch-ids.css

751 lines 15.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 >>> 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 .catchids-main,
30 .catchids-main button,
31 .catchids-main input,
32 .catchids-main selcatchids,
33 .catchids-main textarea,
34 .catchids-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 .catchids-main h1 {
49 font-size: 24px;
50 font-size: 1.5rem;
51 }
52
53 .catchids-main h2 {
54 font-size: 20px;
55 font-size: 1.25rem;
56 }
57
58 .catchids-main h3 {
59 font-size: 18px;
60 font-size: 1.125rem;
61 }
62
63 .catchids-main h4 {
64 font-size: 16px;
65 font-size: 1rem;
66 }
67
68 .catchids-main h5 {
69 font-size: 14px;
70 font-size: 0.875rem;
71 }
72
73 .catchids-main h6 {
74 font-size: 13px;
75 font-size: 0.8125rem;
76 }
77
78 .catchids-main p {
79 margin: 0 0 1.5em;
80 }
81
82 /*--------------------------------------------------------------
83 # Layout
84 --------------------------------------------------------------*/
85
86 .catchids-main {
87 -webkit-box-sizing: border-box;
88 -moz-box-sizing: border-box;
89 box-sizing: border-box;
90 }
91
92 .catchids-main *,
93 .catchids-main *:before,
94 .catchids-main *:after {
95 -webkit-box-sizing: inherit;
96 -moz-box-sizing: inherit;
97 box-sizing: inherit;
98 }
99
100 .catchids-main {
101 background-color: #fff;
102 }
103
104 /*--------------------------------------------------------------
105 # Clearing
106 --------------------------------------------------------------*/
107
108 .catchids-main .clear:before,
109 .catchids-main .clear:after {
110 content: "";
111 display: table;
112 }
113
114 .catchids-main .clear:after {
115 clear: both;
116 }
117
118 /*--------------------------------------------------------------
119 # Lists
120 --------------------------------------------------------------*/
121 .catchids-main .ul,
122 .catchids-main ol {
123 margin: 0 0 1.5em 2em;
124 padding: 0;
125 }
126
127 .catchids-main li {
128 margin: 0;
129 }
130
131 .catchids-main ul {
132 list-style: disc;
133 }
134
135 .catchids-main ol {
136 list-style: decimal;
137 }
138
139 .catchids-main li > ul,
140 .catchids-main li > ol {
141 margin-top: 0.55em;
142 margin-left: 1.5em;
143 margin-bottom: 0;
144 }
145
146 .catchids-main li {
147 margin-bottom: 0.55em;
148 }
149
150 .catchids-main dt {
151 font-weight: 700;
152 }
153
154 .catchids-main dd {
155 margin: 0 1.5em 1.5em;
156 }
157
158 /*--------------------------------------------------------------
159 # Media
160 --------------------------------------------------------------*/
161 .catchids-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 .catchids-main a {
172 color: #0085c3;
173 cursor: pointer;
174 text-decoration: none;
175 }
176
177 .catchids-main a:hover,
178 .catchids-main a:focus,
179 .catchids-main a:active {
180 color: #444;
181 text-decoration: underline;
182 }
183
184 .catchids-main a:focus {
185 outline: thin dotted;
186 }
187
188 .catchids-main a:hover,
189 .catchids-main a:active {
190 outline: 0;
191 }
192
193 /*--------------------------------------------------------------
194 # Header
195 --------------------------------------------------------------*/
196
197 .catchids-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 .catchids-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 .catchids-main #plugin-description {
214 margin: 0 auto;
215 max-width: 960px;
216 padding-bottom: 20px;
217 text-align: center;
218 }
219
220 .catchids-main #plugin-description p:last-child {
221 margin-bottom: 0;
222 }
223
224 .catchids-main #site-branding {
225 display: block;
226 order: 1;
227 padding: 30px 20px;
228 text-align: center;
229 width: 100%;
230 }
231
232 .catchids-main .site-title {
233 font-family: "Trebuchet MS", Helvetica, sans-serif;
234 text-transform: capitalize;
235 }
236
237 .catchids-main .site-title a {
238 color: #fff;
239 }
240
241 .catchids-main .site-title a:hover,
242 .catchids-main .site-title a:focus {
243 text-decoration: none;
244 }
245
246 .catchids-main .site-title-additional {
247 color: #006ea4;
248 }
249
250 .catchids-main .setting {
251 padding: 0 7px;
252 color: #fff;
253 }
254
255 /*--------------------------------------------------------------
256 # Content
257 --------------------------------------------------------------*/
258
259 .catchids-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 .catchids-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 .catch-ids-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 .catchids-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 .catchids-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 .catchids-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 .catchids-main .module-title,
333 .catchids-main .other-catchthemes-products .module-content {
334 color: #23282d;
335 font-family: "Trebuchet MS", Helvetica, sans-serif;
336 font-weight: normal;
337 }
338
339 .catchids-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 .catchids-main #module-disabled {
349 margin-bottom: 0;
350 }
351
352 .catchids-main #module-disabled.catch-modules {
353 -webkit-box-flex: 0;
354 -ms-flex: 0 1 100%;
355 flex: 0 1 100%
356 }
357
358 .catchids-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 .catchids-main .module-content p:last-child {
371 margin-bottom: 0;
372 }
373
374 .catchids-main #main-nav .dashicons {
375 line-height: 2.7;
376 }
377
378 /*--------------------------------------------------------------
379 # Toggle Switch
380 --------------------------------------------------------------*/
381
382 .catchids-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 .catchids-main .module-title.active {
398 background-color: #0085c3;
399 }
400
401 .catchids-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 .catchids-main .inactive .switch label {
413 background-color: #ccc;
414 }
415
416 .catchids-main .switch input[type="checkbox"] {
417 visibility: hidden;
418 display: none;
419 }
420
421 .catchids-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 .catchids-main .switch input[type="checkbox"]:checked + label:after {
437 left: 16px;
438 background-color: #fff;
439 }
440
441 .catchids-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 @-webkit-keyframes spin {
455 0% { -webkit-transform: rotate(0deg); }
456 100% { -webkit-transform: rotate(360deg); }
457 }
458
459 @keyframes spin {
460 0% { transform: rotate(0deg); }
461 100% { transform: rotate(360deg); }
462 }
463
464 /* Catch Themes & Plugins switch */
465 #ctp-switch .switch {
466 position: relative;
467 display: inline-block;
468 width: 60px;
469 height: 34px;
470 top: 7px;
471 }
472
473 #ctp-switch.catchids-main .module-header {
474 background-color: transparent;
475 }
476
477 /*--------------------------------------------------------------
478 # Other Products
479 --------------------------------------------------------------*/
480
481 .catchids-main .other-catchthemes-products {
482 background-color: #f9f9f9;
483 clear: both;
484 display: block;
485 }
486
487 .catchids-main .other-catchthemes-products .module-content {
488 border: none;
489 padding: 0;
490 position: relative;
491 text-align: center;
492 }
493
494 .catchids-main .other-catchthemes-products .catch-modules {
495 background-color: #fff;
496 border: 1px solid #dedede;
497 }
498
499 .catchids-main .other-catchthemes-products .catch-modules a {
500 color: #444;
501 display: block;
502 padding: 1em;
503 }
504
505 .catchids-main .other-catchthemes-products .catch-modules a:hover,
506 .catchids-main .other-catchthemes-products .catch-modules a:focus {
507 color: #0085c3;
508 text-decoration: none;
509 }
510
511 .catchids-main .other-catchthemes-products .catch-modules .more-details {
512 background-color: #00618d;
513 color: #fff;
514 padding: 16px;
515 position: absolute;
516 left: 25%;
517 font-size: 15px;
518 font-size: 0.9375rem;
519 right: 25%;
520 text-align: center;
521 top: 35%;
522 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
523 opacity: 0;
524 -webkit-transition: opacity 0.1s ease-in-out;
525 transition: opacity 0.1s ease-in-out;
526 }
527
528 .catchids-main .other-catchthemes-products .module-content:hover .more-details,
529 .catchids-main .other-catchthemes-products .module-content:focus .more-details {
530 color: #fff;
531 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
532 opacity: 1;
533 text-decoration: none;
534 }
535
536 .catchids-main .other-catchthemes-products .catch-modules .modules-thumbnail {
537 padding: 0;
538 }
539
540 /*--------------------------------------------------------------
541 # Footer
542 --------------------------------------------------------------*/
543
544 .catchids-main .footer-navigation {
545 font-family: "Trebuchet MS", Helvetica, sans-serif;
546 }
547
548 .catchids-main .menu-footer-container {
549 padding: 10px 20px 30px;
550 }
551
552 .catchids-main .footer-navigation ul {
553 list-style: none;
554 }
555
556 .catchids-main .footer-navigation a {
557 color: #444;
558 text-transform: capitalize;
559 padding: 10px 8px 10px 6px;
560 display: block;
561 }
562
563 .catchids-main .footer-navigation a:hover,
564 .catchids-main .footer-navigation a:focus {
565 color: #0085c3;
566 text-decoration: none;
567 }
568
569 .catchids-main .site-footer .menu-footer {
570 display: -webkit-box;
571 display: -ms-flexbox;
572 display: flex;
573 -ms-flex-flow: row wrap;
574 flex-flow: row wrap;
575 -webkit-box-pack: center;
576 -ms-flex-pack: center;
577 justify-content: center;
578 align-items: center;
579 margin: 0;
580 }
581
582 .catchids-main .site-footer .menu-footer li {
583 margin: 0;
584 }
585
586 .catch-ids-options.module-container .catch-modules {
587 border: none;
588 }
589
590 /*--------------------------------------------------------------
591 # Media Queries
592 --------------------------------------------------------------*/
593
594 /*--------------------------------------------------------------
595 ## >= 320px
596 --------------------------------------------------------------*/
597
598 @media screen and (min-width: 20em) {
599 .catchids-main .module-header {
600 display: -webkit-box;
601 display: -ms-flexbox;
602 display: flex;
603 -ms-flex-flow: row wrap;
604 flex-flow: row wrap;
605 -webkit-box-pack: space-between;
606 -ms-flex-pack: space-between;
607 justify-content: space-between;
608 }
609
610 .catchids-main .module-title {
611 margin-bottom: 0;
612 }
613 }
614
615 /*--------------------------------------------------------------
616 ## >= 768px
617 --------------------------------------------------------------*/
618 @media screen and (min-width: 48em) {
619 .catchids-main .container {
620 max-width: 100%;
621 }
622
623 .catchids-main .module-container {
624 -ms-flex-flow: row wrap;
625 flex-flow: row wrap;
626 -webkit-box-pack: space-between;
627 -ms-flex-pack: space-between;
628 justify-content: space-between;
629 }
630
631 .catchids-main #plugin-description {
632 padding-bottom: 30px;
633 }
634
635 .catchids-main .catch-modules {
636 -webkit-box-flex: 0;
637 -ms-flex: 0 1 50%;
638 flex: 0 1 50%
639 }
640
641 .catch-ids-options .catch-modules {
642 padding-right: 21px;
643 }
644
645 .catch-ids-options .catch-modules:nth-child(2n) {
646 padding-right: 0;
647 }
648
649 .catchids-main .menu-footer-container {
650 padding: 10px 40px 30px;
651 }
652 }
653
654 /*--------------------------------------------------------------
655 ## >= 1024px
656 --------------------------------------------------------------*/
657
658 @media screen and (min-width: 64em) {
659 .catchids-main h1 {
660 font-size: 32px;
661 font-size: 2rem;
662 }
663
664 .catchids-main h2 {
665 font-size: 22px;
666 font-size: 1.375rem;
667 }
668
669 .catchids-main #site-branding {
670 padding: 40px;
671 }
672
673 .catchids-main .module-container {
674 -webkit-box-pack: flex-start;
675 -ms-flex-pack: flex-start;
676 justify-content: flex-start;
677 }
678
679 .catchids-main .module-container .wrapper {
680 display: -webkit-box;
681 display: -ms-flexbox;
682 display: flex;
683 -webkit-flex-wrap:wrap;
684 -ms-flex-wrap: wrap;
685 flex-wrap: wrap;
686 -webkit-box-pack: flex-start;
687 -ms-flex-pack: flex-start;
688 justify-content: flex-start;
689 }
690
691 .catchids-main .menu-footer-container {
692 padding: 25px 40px;
693 }
694
695 .catchids-main .footer-navigation a {
696 padding: 10px;
697 }
698 }
699
700 /*--------------------------------------------------------------
701 ## >= 1280px
702 --------------------------------------------------------------*/
703
704 @media screen and (min-width: 80em) {
705 .catchids-main,
706 .catchids-main button,
707 .catchids-main input,
708 .catchids-main selcatchids,
709 .catchids-main textarea,
710 .catchids-main p {
711 font-size: 18px;
712 font-size: 1.1875rem;
713 }
714
715 .catchids-main h1 {
716 font-size: 48px;
717 font-size: 3rem;
718 }
719
720 .catchids-main h2 {
721 font-size: 24px;
722 font-size: 1.5rem;
723 }
724
725 .catchids-main #plugin-description {
726 padding-bottom: 40px;
727 }
728
729 .catchids-main #site-branding {
730 padding: 50px;
731 }
732
733 .catchids-main .footer-navigation a {
734 padding: 10px 10px 10px 13px;
735 }
736
737 .catchids-main .catch-modules {
738 -webkit-box-flex: 0;
739 -ms-flex: 0 1 33.33%;
740 flex: 0 1 33.33%
741 }
742
743 .catch-ids-options .catch-modules:nth-child(2n) {
744 padding-right: 21px;
745 }
746
747 .catch-ids-options .catch-modules:nth-child(3n) {
748 padding-right: 0;
749 }
750 }
751