PluginProbe
Catch Web Tools / trunk
Catch Web Tools vtrunk
trunk 0.1 0.2 0.3 0.4 1.0 1.1 1.2 1.3 1.4 1.4.1 1.5 1.5.1 1.5.2 1.6 1.7 1.8 1.8.1 1.9 1.9.1 1.9.2 1.9.3 1.9.4 1.9.5 1.9.6 All 58 releases
catch-web-tools / admin / css / catch-ids.css

catch-ids.css in Catch Web Tools trunk, at admin/css/catch-ids.css

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