redux-welcome.scss (20493B)
1 $green: #7ad03a; 2 $red: #a00; 3 $orange: #ffba00; 4 $blue: #2ea2cc; 5 6 #wpbody-content .wrap { 7 height: auto !important; 8 overflow: initial !important; 9 max-width: initial !important; 10 } 11 12 .about-wrap { 13 hr { 14 border: inherit; 15 border-top: 1px solid #ccc; 16 } 17 &.redux-status { 18 .updated, 19 .error { 20 margin-top: 10px; 21 } 22 23 .updated { 24 &.redux-message { 25 display: block !important; 26 } 27 } 28 29 .redux-message { 30 position: relative; 31 border-left-color: #00a2e3 !important; 32 overflow: hidden; 33 34 a.skip, 35 a.docs { 36 opacity: 0.5; 37 text-decoration: none !important; 38 } 39 } 40 41 #debug-report { 42 display: none; 43 margin: 10px 0; 44 padding: 0; 45 position: relative; 46 47 textarea { 48 font-family: monospace; 49 width: 100%; 50 margin: 0; 51 height: 300px; 52 padding: 20px; 53 -moz-border-radius: 0; 54 -webkit-border-radius: 0; 55 border-radius: 0; 56 resize: none; 57 font-size: 12px; 58 line-height: 20px; 59 outline: 0; 60 } 61 } 62 63 table.redux_status_table { 64 margin-bottom: 1em; 65 66 tr { 67 &:nth-child(2n) { 68 th, 69 td { 70 background: #fcfcfc; 71 } 72 } 73 } 74 75 th { 76 font-weight: 700; 77 padding: 9px; 78 } 79 80 td:first-child { 81 width: 33%; 82 } 83 84 td.help { 85 width: 1em; 86 } 87 88 td { 89 padding: 9px; 90 //font-size: 1.1em; 91 92 mark { 93 background: transparent none; 94 } 95 96 mark.yes { 97 color: $green; 98 } 99 100 mark.no { 101 color: #999; 102 } 103 104 mark.error { 105 color: $red; 106 } 107 108 ul { 109 margin: 0; 110 } 111 } 112 113 .redux-hint-qtip { 114 cursor: help; 115 color: #666; 116 display: inline-block; 117 font-size: 16px; 118 font-style: normal; 119 height: 16px; 120 line-height: 16px; 121 position: relative; 122 vertical-align: middle; 123 width: 16px; 124 125 &::after { 126 font-family: Dashicons; 127 speak: none; 128 font-weight: 400; 129 font-variant: normal; 130 text-transform: none; 131 line-height: 1; 132 -webkit-font-smoothing: antialiased; 133 margin: 0; 134 text-indent: 0; 135 position: absolute; 136 top: 0; 137 left: 0; 138 width: 100%; 139 height: 100%; 140 text-align: center; 141 content: ""; 142 cursor: help; 143 } 144 } 145 } 146 } 147 } 148 149 .about-wrap { 150 #footer-upgrade { 151 display: none; 152 } 153 154 .redux-badge { 155 position: absolute; 156 top: 0; 157 158 background: #00a2e3; 159 padding: 20px; 160 161 color: #efefef; 162 margin: 5px 0 0 0; 163 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 164 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 165 166 &::before { 167 color: #fff; 168 -webkit-font-smoothing: antialiased; 169 -moz-osx-font-smoothing: grayscale; 170 font-size: 80px; 171 font-weight: normal; 172 width: 165px; 173 height: 165px; 174 line-height: 165px; 175 text-align: center; 176 position: absolute; 177 top: 0; 178 margin: 0; 179 vertical-align: middle; 180 } 181 182 .el { 183 background: #00a2e3; 184 display: block !important; 185 font-size: 8em; 186 color: #fff; 187 margin-bottom: 30px; 188 } 189 190 span { 191 font-weight: 600; 192 font-size: 14px; 193 text-align: center; 194 position: absolute; 195 bottom: 0; 196 background: rgba(50, 50, 49, 0.47); 197 left: 0; 198 right: 0; 199 padding: 8px; 200 } 201 small { 202 clear: both; 203 font-weight: 600; 204 font-size: 14px; 205 text-align: center; 206 position: absolute; 207 bottom: 0; 208 background: transparent; 209 left: 0; 210 right: 0; 211 padding: 8px; 212 } 213 } 214 215 .redux-feature { 216 overflow: visible !important; 217 *zoom: 1; 218 219 &::before, 220 &::after { 221 content: " "; 222 display: table; 223 } 224 225 &::after { 226 clear: both; 227 } 228 229 } 230 231 h3 + .redux-feature { 232 margin-top: 0; 233 } 234 235 .feature-rest div { 236 width: 50% !important; 237 238 -moz-box-sizing: border-box; 239 box-sizing: border-box; 240 margin: 0 !important; 241 242 &.icon::before { 243 font-weight: normal; 244 width: 100%; 245 font-size: 170px; 246 line-height: 125px; 247 color: #9c5d90; 248 display: inline-block; 249 position: relative; 250 text-align: center; 251 speak: none; 252 -webkit-font-smoothing: antialiased; 253 -moz-osx-font-smoothing: grayscale; 254 } 255 } 256 257 div.icon { 258 width: 0 !important; 259 padding: 0; 260 margin: 20px 0 !important; 261 } 262 263 .about-integrations { 264 background: #fff; 265 margin: 20px 0; 266 padding: 1px 20px 10px; 267 } 268 269 .changelog { 270 h2 { 271 line-height: 1.4; 272 padding-bottom: 0; 273 } 274 275 .feature-section { 276 padding-top: 1.4em; 277 } 278 279 .prettyprint { 280 overflow-wrap: break-word; 281 } 282 283 .gist-it-gist { 284 .gist-file { 285 border: 0 !important; 286 background: 0 !important; 287 288 .gist-data { 289 border: 0 !important; 290 background: 0 !important; 291 292 pre { 293 padding-top: 10px !important; 294 word-break: break-word; 295 } 296 } 297 } 298 } 299 } 300 301 .theme-screenshot { 302 color: #eee; 303 transition: all 0.5s; 304 &:hover { 305 color: #fff; 306 } 307 308 i { 309 text-align: center; 310 display: block; 311 margin: 10px; 312 font-size: 90px; 313 line-height: 200px; 314 transition: all 0.5s ease; 315 } 316 } 317 318 .theme-browser { 319 .theme { 320 transition: all 0.5s; 321 &:hover .theme-screenshot i { 322 transition: all 0.5s; 323 font-size: 120px; 324 } 325 326 .theme-screenshot::after { 327 content: inherit; 328 display: inherit; 329 padding-top: inherit; 330 } 331 } 332 } 333 334 .theme-screenshot { 335 figure { 336 position: relative; 337 overflow: hidden; 338 cursor: pointer; 339 margin: 0; 340 341 i { 342 position: relative; 343 display: block; 344 font-size: 11em; 345 opacity: 0.8; 346 } 347 348 figcaption { 349 padding: 15px; 350 color: #fff; 351 text-transform: uppercase; 352 font-size: 1.25em; 353 -webkit-backface-visibility: hidden; 354 backface-visibility: hidden; 355 356 &::before, 357 &::after { 358 pointer-events: none; 359 } 360 } 361 362 figcaption, 363 figcaption > a { 364 position: absolute; 365 top: 0; 366 left: 0; 367 right: 0; 368 bottom: 0; 369 } 370 371 figcaption > a { 372 z-index: 1000; 373 text-indent: 200%; 374 white-space: nowrap; 375 font-size: 0; 376 opacity: 0; 377 } 378 379 p { 380 margin: 0; 381 letter-spacing: 1px; 382 font-size: 68.5%; 383 } 384 385 i { 386 opacity: 0.7; 387 -webkit-transition: opacity 0.35s; 388 transition: opacity 0.35s; 389 } 390 } 391 } 392 393 .theme:hover { 394 figcaption { 395 &::before, 396 &::after { 397 opacity: 1; 398 -webkit-transform: scale(1); 399 transform: scale(1); 400 } 401 } 402 403 i { 404 opacity: 0.3; 405 } 406 407 p { 408 opacity: 1; 409 -webkit-transform: translate3d(0, 0, 0); 410 transform: translate3d(0, 0, 0); 411 text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); 412 } 413 414 } 415 416 figure { 417 figcaption { 418 &::before, 419 &::after { 420 position: absolute; 421 top: 15px; 422 right: 15px; 423 bottom: 15px; 424 left: 15px; 425 content: ""; 426 opacity: 0; 427 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 428 transition: opacity 0.35s, transform 0.35s; 429 } 430 431 &::before { 432 border-top: 1px solid #fff; 433 border-bottom: 1px solid #fff; 434 -webkit-transform: scale(0, 1); 435 transform: scale(0, 1); 436 } 437 438 &::after { 439 border-right: 1px solid #fff; 440 border-left: 1px solid #fff; 441 -webkit-transform: scale(1, 0); 442 transform: scale(1, 0); 443 } 444 } 445 446 p { 447 padding: 10px; 448 text-transform: none; 449 opacity: 0; 450 margin-top: 0 !important; 451 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 452 transition: opacity 0.35s, transform 0.35s; 453 -webkit-transform: translate3d(0, 20px, 0); 454 transform: translate3d(0, 20px, 0); 455 } 456 } 457 } 458 459 .redux-message, 460 p.redux-actions { 461 .twitter-share-button { 462 margin-top: -3px; 463 margin-left: 3px; 464 vertical-align: middle; 465 } 466 467 a { 468 &.review-us { 469 opacity: 0.5; 470 text-decoration: none !important; 471 } 472 } 473 a.button-demo { 474 margin-left: 15px; 475 color: #a00; 476 477 &.active { 478 color: #d98500; 479 } 480 } 481 } 482 483 #redux-message { 484 margin: 5px 0 15px; 485 margin-top: 15px !important; 486 display: block !important; 487 border-color: #00a2e3; 488 489 h4 { 490 margin-top: 0.5em; 491 } 492 } 493 494 @media only screen and (min-width: 2000px) { 495 #wpwrap .theme-browser .theme:nth-child(4n), 496 #wpwrap .theme-browser .theme:nth-child(5n) { 497 margin-right: 3%; 498 } 499 } 500 501 @media screen and (max-width: 500px) { 502 .about-wrap h2 .nav-tab { 503 width: 100%; 504 margin: 0; 505 padding: 0; 506 height: 40px; 507 line-height: 40px; 508 text-align: center; 509 margin-bottom: 10px; 510 margin-top: 10px; 511 } 512 513 .about-wrap h2.nav-tab-wrapper { 514 padding: 0; 515 width: 100%; 516 } 517 } 518 519 @media only screen and (max-width: 1120px) { 520 .theme-browser .theme:nth-child(odd) { 521 margin-right: 5% !important; 522 } 523 524 .theme-browser .theme { 525 width: 47.5% !important; 526 margin-right: auto !important; 527 } 528 } 529 530 @media screen and (max-width: 620px) { 531 .theme-browser .theme { 532 width: 100% !important; 533 margin-right: 0; 534 } 535 } 536 537 #support_div { 538 input.hash { 539 text-align: center; 540 } 541 .hide { 542 display: none; 543 } 544 545 .previous { 546 opacity: 0.8; 547 } 548 549 /*form styles*/ 550 #supportform { 551 /*width: 500px;*/ 552 margin-top: 10px; 553 text-align: center; 554 position: relative; 555 fieldset { 556 background: #fff; 557 border: 0 none; 558 border-radius: 3px; 559 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 560 padding: 20px 30px; 561 562 box-sizing: border-box; 563 width: 86%; 564 margin: 0 7%; 565 /*stacking fieldsets above each other*/ 566 position: absolute; 567 /*Hide all except first fieldset*/ 568 &:not(:first-of-type) { 569 display: none; 570 } 571 } 572 /*inputs*/ 573 input, 574 textarea { 575 padding: 15px; 576 border: 1px solid #ccc; 577 border-radius: 3px; 578 margin-bottom: 10px; 579 width: 100%; 580 box-sizing: border-box; 581 font-family: montserrat; 582 color: #2c3e50; 583 font-size: 13px; 584 } 585 586 input.checkbox { 587 width: initial; 588 margin-top: 10px; 589 } 590 591 /*buttons*/ 592 .action-button { 593 width: 100px; 594 background: #27ae60; 595 font-weight: bold; 596 color: #fff; 597 border: 0 none; 598 border-radius: 1px; 599 cursor: pointer; 600 padding: 10px 5px; 601 margin: 10px 5px; 602 &:disabled { 603 opacity: 0.5; 604 } 605 &:hover, 606 &:focus { 607 box-shadow: 0 0 0 2px #fff, 0 0 0 3px #27ae60; 608 } 609 } 610 /*headings*/ 611 .fs-title { 612 font-size: 15px; 613 text-transform: uppercase; 614 color: #2c3e50; 615 margin-bottom: 10px; 616 } 617 618 .fs-subtitle { 619 font-weight: normal; 620 font-size: 13px; 621 text-align: left; 622 color: #666; 623 margin-bottom: 20px; 624 } 625 626 #toDebug li { 627 text-align: left; 628 width: 45%; 629 float: left; 630 } 631 #user_type { 632 width: 100%; 633 td { 634 cursor: pointer; 635 width: 50%; 636 i { 637 font-size: 130px; 638 margin-bottom: 10px; 639 } 640 &:hover i { 641 color: #176c8e; 642 } 643 small { 644 line-height: 2.5em; 645 font-style: italic; 646 } 647 } 648 } 649 #support_hash { 650 text-align: center; 651 word-break: break-all; 652 } 653 } 654 655 .breadcrumb { 656 /*centering*/ 657 display: inline-block; 658 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); 659 overflow: hidden; 660 border-radius: 5px; 661 margin: 15px 0; 662 /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/ 663 counter-reset: flag; 664 li { 665 text-decoration: none; 666 outline: none; 667 display: block; 668 float: left; 669 font-size: 12px; 670 transition: all 0.5s; 671 width: auto; 672 margin: 0; 673 line-height: 36px; 674 color: #fff; 675 /*need more margin on the left of links to accomodate the numbers*/ 676 padding: 0 10px 0 60px; 677 background: #666; 678 //background: linear-gradient(#666, #333); 679 position: relative; 680 /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/ 681 &:first-child { 682 padding-left: 46px; 683 border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ 684 &::before { 685 left: 14px; 686 } 687 } 688 &:last-child { 689 border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ 690 padding-right: 20px; 691 /*we dont need an arrow after the last link*/ 692 &::after { 693 content: none; 694 } 695 } 696 &.active { 697 background: #333; 698 //background: linear-gradient(#333, #000); 699 &::after { 700 background: #333; 701 //background: linear-gradient(135deg, #333, #000); 702 } 703 &::before { 704 background: #555; 705 } 706 } 707 /*adding the arrows for the breadcrumbs using rotated pseudo elements*/ 708 &::after { 709 content: ""; 710 position: absolute; 711 top: 0; 712 right: -18px; /*half of square's length*/ 713 /*same dimension as the line-height of .breadcrumb a */ 714 width: 36px; 715 height: 36px; 716 /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 717 length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) 718 if diagonal required = 1; length = 1/1.414 = 0.707*/ 719 transform: scale(0.707) rotate(45deg); 720 /*we need to prevent the arrows from getting buried under the next link*/ 721 z-index: 1; 722 /*background same as links but the gradient will be rotated to compensate with the transform applied*/ 723 background: #666; 724 //background: linear-gradient(135deg, #666, #333); 725 /*stylish arrow design using box shadow*/ 726 box-shadow: 727 2px -2px 0 2px rgba(0, 0, 0, 0.4), 728 3px -3px 0 2px rgba(255, 255, 255, 0.1); 729 /* 730 5px - for rounded arrows and 731 50px - to prevent hover glitches on the border created using shadows*/ 732 border-radius: 0 5px 0 50px; 733 transition: all 0.5s; 734 } 735 /*we will use the :before element to show numbers*/ 736 &::before { 737 transition: all 0.5s; 738 content: counter(flag); 739 counter-increment: flag; 740 /*some styles now*/ 741 border-radius: 100%; 742 width: 20px; 743 height: 20px; 744 line-height: 20px; 745 margin: 8px 0; 746 position: absolute; 747 top: 0; 748 left: 30px; 749 background: #444; 750 //background: linear-gradient(#444, #222); 751 font-weight: bold; 752 } 753 754 } 755 } 756 } 757 758 .redux-product { 759 margin-bottom: 15px; 760 border: 1px solid #ccc; 761 background: #fff; 762 padding: 0px 20px; 763 min-width: 350px; 764 float: left; 765 margin-right: 20px; 766 .name { 767 color: #23282d; 768 font-size: 32px; 769 font-weight: 100; 770 margin: 10px 0 0; 771 line-height: 1.3; 772 word-wrap: break-word; 773 overflow-wrap: break-word; 774 text-align: left; 775 } 776 .version { 777 color: #72777c; 778 font-size: 13px; 779 font-weight: 400; 780 float: none; 781 display: inline-block; 782 margin-left: 10px; 783 } 784 .author { 785 margin: 15px 0 25px; 786 color: #72777c; 787 font-size: 16px; 788 font-weight: 400; 789 line-height: inherit; 790 } 791 .type { 792 margin-left: 5px; 793 background-color: #f0ad4e; 794 display: inline; 795 padding: 0.2em 0.5em 0.2em; 796 font-weight: 400; 797 line-height: 1; 798 font-size: 12px; 799 color: #fff !important; 800 text-align: center; 801 white-space: nowrap; 802 vertical-align: baseline; 803 border-radius: 0.25em; 804 &.theme { 805 background-color: #0099d5; 806 } 807 } 808 } 809 .hide { 810 display: none !important; 811 }