PluginProbe
AF Companion – Starter Sites, Speed Booster & Growth Suite for Professional Publishing / trunk
AF Companion – Starter Sites, Speed Booster & Growth Suite for Professional Publishing vtrunk
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.2.7
af-companion / assets / css / main.css

main.css in AF Companion – Starter Sites, Speed Booster & Growth Suite for Professional Publishing trunk, at assets/css/main.css

726 lines 14.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Overriding WordPress native styles */
2 /* .toplevel_page_af-companion #fs_connect .fs-actions .button.button-primary{
3 display: none!important;
4 } */
5
6 .aftc {
7 max-width: none;
8 }
9
10 .aftc h2 {
11 text-align: inherit;
12 }
13
14 .aftc h2:first-child,
15 .aftc h3:first-child {
16 margin-top: 0;
17 }
18
19 .aftc hr {
20 margin: 2.62em 0;
21 }
22
23 .feature-section + hr {
24 margin-top: 0;
25 }
26
27 #wpbody select {
28 height: auto;
29 padding: .62em;
30 line-height: inherit;
31 }
32
33 .aftc .aftc__response .notice {
34 display: block !important;
35 max-width: 950px;
36 margin: auto;
37 }
38
39 /* Plugin elements */
40
41 .aftc__demo-import-files {
42 width: 100%;
43 }
44
45 .aftc__demo-import-preview-image-message {
46 font-style: italic;
47 }
48
49 /* Plugin title */
50
51 .aftc__title:before {
52 width: auto;
53 height: auto;
54 font-size: inherit;
55 margin-right: 6px;
56 margin-top: 6px;
57 }
58
59 /* Plugin intro text */
60
61 .aftc__intro-text ul{
62 display: flex;
63 -webkit-flex-wrap: wrap;
64 -ms-flex-wrap: wrap;
65 flex-wrap: wrap;
66 -webkit-justify-content: space-between;
67 justify-content: space-between;
68 }
69 .aftc__intro-text ul li{
70 width: 32%;
71 margin-right: 2%;
72 background: #FFF;
73 padding: 25px;
74 -webkit-border-radius: 3px;
75 border-radius: 3px;
76 -webkit-box-sizing: border-box;
77 -moz-box-sizing: border-box;
78 box-sizing: border-box;
79 }
80 .aftc__intro-text ul li:last-child {
81 margin-right: 0;
82 }
83 .aftc__intro-text ul li p {
84 margin-bottom: 0;
85 font-size: 14px;
86 color: #999;
87 }
88 .about-wrap p {
89 color: #777;
90 }
91 .about-wrap p.aftc__description {
92 margin-top: 0;
93 }
94
95 /* Plugin switch import mode link*/
96 .wp-admin input[type=file]{
97 width: 100%;
98 max-width: 100%;
99 }
100 /* Plugin multi select import and Plugin file upload containers */
101 .aftc__file-upload-container {
102 display: grid;
103 grid-template-columns: repeat(3, 1fr);
104 grid-gap: 30px;
105 background: #FFF;
106 padding: 50px 50px 60px;
107 -webkit-box-sizing: border-box;
108 -moz-box-sizing: border-box;
109 box-sizing: border-box;
110 }
111 .aftc__file-upload,
112 .aftc__multi-select-import,
113 .aftc__demo-import-notice:not(:empty) {
114 padding: 20px;
115 margin: 1.62em 0;
116 -webkit-box-sizing: border-box;
117 -moz-box-sizing: border-box;
118 box-sizing: border-box;
119 border: 1px solid #ddd;
120 background: #f5f7f9;
121 }
122 .about-wrap h2 {
123 font-size: 1.4em;
124 font-weight: 400;
125 margin: 0;
126 padding: 0 20px 0px;
127 grid-column: span 3;
128 color: #405566;
129 }
130 .aftc__file-upload {
131 margin: 0;
132 margin-bottom: -1px;
133 text-align: left;
134 }
135
136 .aftc__file-upload span {
137 font-size: .81em;
138 font-weight: normal;
139 opacity: .66;
140 }
141
142 .aftc__demo-import-notice:not(:empty) {
143 border: 0;
144 border-left: 4px solid #00a0d2;
145 -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
146 box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
147 }
148
149 [dir="rtl"] .aftc__demo-import-notice:not(:empty) {
150 border: 0;
151 border-right: 4px solid #00a0d2;
152 }
153
154 /* Plugin button */
155
156 .aftc__button-container {
157 margin-top: 1.62em;
158 margin-bottom: 1.62em;
159 }
160
161 /* AJAX loader */
162
163 p.aftc__ajax-loader {
164 font-size: 1.5em;
165 display: none;
166 }
167
168 .aftc__ajax-loader .spinner {
169 display: inline-block;
170 float: none;
171 visibility: visible;
172 margin-bottom: 6px;
173 vertical-align: middle;
174 }
175
176
177 /* New grid layout */
178 /*.wp-core-ui .notice.is-dismissible{*/
179 /* display: none;*/
180 /*}*/
181 .aftc__gl.js-aftc-gl {
182 background: #fff;
183 }
184 .aftc__gl-item {
185 float: left;
186 width: 100%;
187 position: relative;
188 -webkit-border-radius: 6px;
189 border-radius: 6px;
190 -webkit-box-shadow: 0 2px 5px rgb(143 163 184 / 12%);
191 box-shadow: 0 2px 5px rgb(143 163 184 / 12%);
192 -webkit-transition: all 0.5s ease-in-out;
193 -moz-transition: all 0.5s ease-in-out;
194 -ms-transition: all 0.5s ease-in-out;
195 -o-transition: all 0.5s ease-in-out;
196 transition: all 0.5s ease-in-out;
197 -webkit-box-sizing: border-box;
198 -moz-box-sizing: border-box;
199 box-sizing: border-box;
200 overflow: hidden;
201 }
202
203 .aftc__gl-item-image-container {
204 display: block;
205 overflow: hidden;
206 position: relative;
207 -webkit-backface-visibility: hidden;
208 -webkit-transition: opacity 0.2s ease-in-out;
209 transition: opacity 0.2s ease-in-out;
210 }
211
212 .aftc__gl-item-image {
213 height: auto;
214 width: 100%;
215 -webkit-transition: opacity 0.2s ease-in-out;
216 transition: opacity 0.2s ease-in-out;
217 }
218
219 .aftc__gl-item-image--no-image {
220 display: inline-block;
221 width: 50%;
222 text-align: center;
223 position: absolute;
224 top: 45%;
225 right: 25%;
226 left: 25%;
227 }
228 .aftc__gl-item-footer {
229 width: 100%;
230 margin: 0;
231 display: flex;
232 -webkit-flex-wrap: wrap;
233 -ms-flex-wrap: wrap;
234 flex-wrap: wrap;
235 -webkit-align-items: center;
236 align-items: center;
237 -webkit-box-sizing: border-box;
238 -moz-box-sizing: border-box;
239 box-sizing: border-box;
240 -webkit-justify-content: space-between;
241 justify-content: space-between;
242 padding: 20px 25px;
243 -webkit-border-radius: 0 0 6px 6px;
244 border-radius: 0 0 6px 6px;
245 border: 1px solid rgba(226,230,235,0.7);
246 background: rgba(235,237,241,0.2)
247 }
248
249 .aftc__gl-item.js-aftc-gl-item:hover .aftc__gl-item-footer {
250 opacity: 1;
251 visibility: visible;
252 }
253
254 .aftc__gl-item-footer--with-preview h4.aftc__gl-item-title {
255 font-size: 15px;
256 line-height: 1.33;
257 }
258
259 h4.aftc__gl-item-title {
260 white-space: nowrap;
261 text-overflow: ellipsis;
262 display: inline-block;
263 margin: 0;
264 }
265
266 .aftc__gl-item-button {
267 float: right;
268 }
269
270 .aftc__gl-item-button + .aftc__gl-item-button {
271 margin-right: 15px;
272 color: rgba(46,68,83,0.8);
273 background: #fff;
274 border-color: #e2e6eb;
275 box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
276 }
277
278 .aftc__gl-item-button + .aftc_modal + .aftc__gl-item-button {
279 margin-right: 15px;
280 }
281
282 .aftc__gl-item-container {
283 padding: 40px 30px;
284 background: #FFF;
285 display: grid;
286 grid-column-gap: 30px;
287 grid-row-gap: 30px;
288 max-width: 450px;
289 margin: 0 auto;
290 }
291
292 .aftc__gl-item-container h3 {
293 grid-column: span 2;
294 }
295
296 .js-aftc-gl-item-selected .aftc__gl-item {
297 grid-column: 2/4;
298 }
299
300 .js-aftc-gl-item-selected h3 {
301 grid-column: span 4;
302 }
303
304 @media screen and (max-width: 782px) {
305 .wp-core-ui .button,
306 .wp-core-ui .button.button-large,
307 .wp-core-ui .button.button-small,
308 a.preview, input#publish, input#save-post{
309 margin-bottom: 0;
310 }
311 }
312 @media screen and (min-width: 768px) {
313 .aftc__gl-item-container {
314 grid-template-columns: repeat(2, 1fr);
315 max-width: 950px !important;
316 width: 100%;
317 }
318 .js-aftc-gl-item-selected {
319 grid-template-columns: repeat(4, 1fr);
320 }
321 }
322
323 @media screen and (max-width: 768px) {
324 .aftc__file-upload-container .aftc__file-upload {
325 grid-column: 1/ span 3;
326 }
327 .wp-admin input[type=file]{
328 width: unset;
329 }
330 }
331
332 .about-wrap .aftc__gl-item.js-aftc-gl-item img{
333 -webkit-transition: all ease 0.5s;
334 -moz-transition: all ease 0.5s;
335 -ms-transition: all ease 0.5s;
336 -o-transition: all ease 0.5s;
337 transition: all ease 0.5s;
338 }
339
340 .about-wrap .aftc__gl-item.js-aftc-gl-item:hover img {
341 -webkit-transform: scale(1.025);
342 -moz-transform: scale(1.025);
343 -ms-transform: scale(1.025);
344 -o-transform: scale(1.025);
345 transform: scale(1.025);
346 }
347
348 .about-wrap img.aftc__logo {
349 max-width: 200px;
350 }
351
352 .aftc__gl-header {
353 padding-bottom: 10px;
354 text-align: center;
355 background: #FFF;
356 }
357
358 .aftc__gl-navigation {
359 font-size: 13px;
360 background: #f1f1f1;
361 }
362
363 .aftc__gl-navigation ul {
364 list-style-type: none;
365 margin: 0;
366 padding: 0;
367 overflow: hidden;
368 display: flex;
369 -webkit-flex-wrap: wrap;
370 -ms-flex-wrap: wrap;
371 flex-wrap: wrap;
372 -webkit-justify-content: center;
373 justify-content: center;
374 }
375 .aftc__gl-navigation li{
376 margin: 0;
377 }
378 .aftc__gl-navigation li:not(:last-child) {
379 margin: 0 15px 0 0;
380 }
381
382 .aftc__gl-navigation li a {
383 display: block;
384 text-align: center;
385 text-decoration: none;
386 color: #777;
387 font-size: 15px;
388 padding: 0 25px;
389 height: 48px;
390 line-height: 48px;
391 -webkit-border-radius: 3px 3px 0 0;
392 border-radius: 3px 3px 0 0;
393 -webkit-box-shadow: none;
394 box-shadow: none;
395 }
396 .aftc__gl-navigation li a:hover,
397 .aftc__gl-navigation li.active a,
398 .aftc__gl-navigation li.active a:hover {
399 color: #2e4453;
400 }
401 .aftc__gl-navigation li.active a,
402 .aftc__gl-navigation li a:hover {
403 background-color: #fff;
404 -webkit-box-shadow: 0 -2px 20px rgb(220 231 238 / 40%);
405 box-shadow: 0 -2px 20px rgb(220 231 238 / 40%);
406 }
407 .aftc__gl-navigation li:not(.active) a:hover {
408 -webkit-box-shadow: inset 0 -5px 5px rgb(0 0 0 / 1%);
409 box-shadow: inset 0 -5px 5px rgb(0 0 0 / 1%);
410 }
411
412 .aftc__gl-search-input {
413 display: inline-block;
414 width: 300px;
415 height: 60px;
416 margin: 50px 0 0;
417 }
418 .aftc__gl-search-input[type=search]{
419 padding: 0 20px;
420 width: 100%;
421 max-width: 400px;
422 }
423
424 /* Grid animations */
425 @keyframes aftc-fade {
426 from {
427 opacity: 1;
428 }
429 to {
430 opacity: 0;
431 }
432 }
433
434 .aftc-is-fadeout {
435 animation: aftc-fade linear 200ms 1 forwards;
436 }
437
438 .aftc-is-fadein {
439 animation: aftc-fade linear 200ms 1 reverse forwards;
440 }
441
442 /* Grid layout modal window */
443
444 .aftc__modal-image-container {
445 width: 100%;
446 height: 300px;
447 margin: 0;
448 overflow: hidden;
449 }
450
451 .aftc__modal-item-title {
452 margin-top: 0.5em;
453 font-weight: bold;
454 font-size: 24px;
455 }
456
457 .aftc__modal-image-container img {
458 width: 100%;
459 }
460
461 .aftc__modal-notice.aftc__demo-import-notice:not(:empty) {
462 border: 1px solid #e5e5e5;
463 border-left: 4px solid #00a0d2;
464 margin: 1em 0 0;
465 }
466
467 /* Redux */
468 .aftc__redux-option-name-label {
469 margin-right: 5px;
470 }
471
472 /* additional css for new design */
473 .toplevel_page_pt-one-click-demo-import #wpcontent {
474 padding-left: 0;
475 }
476 .about-wrap {
477 margin: 60px 0px 0 0px;
478 text-align: center;
479 }
480 .wp-core-ui .button-group.button-hero .button,
481 .wp-core-ui .button.button-hero {
482 font-size: 14px;
483 min-height: unset;
484 line-height: 1;
485 padding: 10px 18px;
486 }
487 .about-wrap h1 {
488 font-size: 2em;
489 padding: 20px 0 10px;
490 margin: 20px 0 0;
491 text-align: center;
492 }
493 .about-wrap .about-description, .about-wrap .about-text{
494 max-width: 1000px;
495 margin: auto;
496 padding: 0 15px 15px;
497 font-size: 16px;
498 line-height: 1.5;
499 }
500 .aftc__import-mode-switch {
501 display: inline-block;
502 color: rgba(46,68,83,0.8);;
503 padding: 12px 24px;
504 -webkit-border-radius: 3px;
505 border-radius: 3px;
506 transition: all 0.2s ease-in-out;
507 font-size: 1em;
508 font-weight: 700;
509 text-decoration: none;
510 color: rgba(46,68,83,0.8);
511 background: #fff;
512 border: 1px solid #e2e6eb;
513 box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
514 }
515 .aftc__import-mode-switch:hover {
516 color: #2e4453;
517 border-color: rgba(190,196,203,0.8);
518 background: #FFF;
519 }
520
521 .aftc__import-mode-switch.reload-importer {
522 color: #fff;
523 background: #0085BA;
524 margin-left: 15px;
525 border-color: rgba(1,118,165,0.6);
526 -webkit-box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
527 box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
528 }
529
530 .aftc__import-mode-switch.reload-importer:hover {
531 color: #fff;
532 background: #0591c9;
533 border-color: rgba(1,118,165,0.85);
534 box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
535 }
536 .about-wrap h3{
537 margin-bottom: 12px;
538 font-size: 1.4em;
539 }
540 .about-wrap li h4 {
541 font-size: 20px;
542 margin: 0px 0 12px;
543 line-height: 1.3;
544 }
545
546 .notice-detils-wrapper{
547 text-align: left;
548 }
549 .aftc__gl-item-button.button {
550 color: rgba(46,68,83,0.8);
551 background: #fff;
552 border-color: #e2e6eb;
553 box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
554 }
555 .wp-core-ui .button{
556 height: 35px;
557 line-height: 33px;
558 padding: 0 15px;
559 font-weight: 500;
560 }
561 .aftc-modal-content button.aftc__gl-item-button.button.button-primary.js-aftc-gl-import-data {
562 float: none;
563 margin-top: 30px;
564 }
565 button.aftc__button.button.button-hero.button-primary.aftc-activate-plugin {
566 margin-top: 30px;
567 }
568
569 .aftc__gl-item-button.button:hover,
570 .wp-core-ui .button:hover{
571 color: #2e4453;
572 border-color: rgba(190,196,203,0.8);
573 background: #FFF;
574 }
575 .wp-core-ui .button-primary{
576 color: #fff;
577 background: #0085ba;
578 border-color: rgba(1,118,165,0.6);
579 box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
580 }
581 .wp-core-ui .button-primary:hover {
582 color: #fff;
583 background: #0591c9;
584 border-color: rgba(1,118,165,0.85);
585 box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
586 }
587 .wp-core-ui .button-primary:focus{
588 color: #fff;
589 background: #0591c9;
590 border-color: rgba(1,118,165,0.85);
591 box-shadow: 0 1px 4px rgb(1 96 134 / 40%);
592 }
593 .aftc__gl-item-image-container {
594 max-height: 385px;
595 }
596 input[type=search]{
597 border: 1px solid #b2b7bb;
598 }
599 input[type=checkbox]:focus, input[type=color]:focus,
600 input[type=date]:focus, input[type=datetime-local]:focus,
601 input[type=datetime]:focus, input[type=email]:focus,
602 input[type=month]:focus, input[type=number]:focus,
603 input[type=password]:focus, input[type=radio]:focus,
604 input[type=search]:focus, input[type=tel]:focus,
605 input[type=text]:focus, input[type=time]:focus,
606 input[type=url]:focus, input[type=week]:focus,
607 select:focus, textarea:focus{
608 border-color: #5b9dd9;
609 box-shadow: 0 0 0 1px #5b9dd9;
610 }
611 .aftc__intro-text {
612 text-align: center;
613 margin: 50px;
614 max-width: 950px;
615 margin: 50px auto;
616 }
617
618 .ui-dialog {
619 width: 500px !important;
620 }
621 .notice, div.error, div.updated{
622 border-left-width: 8px;
623 }
624 .ui-dialog-buttonset .ui-button:first-child {
625 border: 2px solid #000;
626 width: auto;
627 color: #000;
628 background: 0 0;
629 margin: 0 auto;
630 font-size: 14px;
631 font-weight: 700;
632 line-height: 30px;
633 height: auto;
634 padding: 3px 20px;
635 -webkit-border-radius: 30px;
636 border-radius: 30px;
637 -webkit-box-shadow: none;
638 box-shadow: none;
639 -webkit-transition: all .4s ease;
640 transition: all .4s ease;
641 background: transparent;
642 }
643 .ui-dialog-buttonset .ui-button:first-child:hover {
644 background-color: #000;
645 color: #FFF;
646 border-color: #000;
647 }
648 .ui-button.ui-dialog-titlebar-close {
649 background: #f4511e;
650 color: #FFF;
651 }
652 .ui-button.ui-dialog-titlebar-close:focus,
653 .ui-button.ui-dialog-titlebar-close:hover {
654 color: #FFF;
655 }
656 .ui-button.ui-dialog-titlebar-close:focus {
657 -webkit-box-shadow: none;
658 box-shadow: none;
659 }
660 @media screen and (max-width: 1600px) {
661 .aftc__gl-item-image-container {
662 max-height: 320px;
663 }
664 }
665 .aftc__file-upload p {
666 margin-top: 0;
667 }
668
669
670 .aftc_modal {
671 display: none; /* Hidden by default */
672 position: fixed; /* Stay in place */
673 z-index: 1; /* Sit on top */
674 left: 0;
675 top: 0;
676 width: 100%; /* Full width */
677 height: 100%; /* Full height */
678 overflow: auto; /* Enable scroll if needed */
679 background-color: rgb(0,0,0); /* Fallback color */
680 background-color: rgba(100,100,100,0.4);
681 }
682
683 /* Modal Content/Box */
684 .aftc-modal-content {
685 background-color: #fefefe;
686 padding: 60px 40px;
687 width: 80%;
688 position: absolute;
689 left: calc(90px + 50%);
690 top: 50%;
691 transform: translate(-50%, -50%);
692 max-width: 500px;
693 text-align: center;
694 border-radius: 5px;
695 }
696
697 /* The Close Button */
698 .aftc_close {
699 color: #888;
700 float: right;
701 font-size: 28px;
702 display: inline-block;
703 padding: 2px 4px 8px;
704 position: relative;
705 top: -40px;
706 left: 21px;
707 }
708
709 .aftc_close:hover,
710 .aftc_close:focus {
711 text-decoration: none;
712 cursor: pointer;
713 color: #111;
714 }
715
716 ul.af-require-plugin-wrap {
717 text-align: left;
718 width: fit-content;
719 margin: 40px auto 0;
720 color: #7f888f;
721 }
722 .aftc.wrap.about-wrap > a {
723 display: block;
724 }
725
726