| @@ -24,17 +24,39 @@ | ||
| 24 | 24 | .hsr-list__item { |
| 25 | 25 | font-weight: 700; |
| 26 | 26 | font-size: 14px; |
| 27 | 27 | line-height: 24px; |
| 28 | - color: #727586; | |
| 28 | + color: $gray-base; | |
| 29 | 29 | padding: 16px 24px; |
| 30 | 30 | cursor: pointer; |
| 31 | 31 | margin: 0; |
| 32 | + display: flex; | |
| 33 | + align-items: center; | |
| 34 | + border-bottom: 1px solid transparent; | |
| 35 | + | |
| 36 | + svg { | |
| 37 | + margin-right: 5px; | |
| 38 | + | |
| 39 | + path { | |
| 40 | + fill: $gray-base; | |
| 41 | + } | |
| 42 | + | |
| 43 | + } | |
| 32 | 44 | } |
| 33 | 45 | |
| 34 | 46 | .hsr-active { |
| 35 | - color: #673DE6; | |
| 36 | - border-bottom: #673DE6 1px solid; | |
| 47 | + color: $primary-purple; | |
| 48 | + border-bottom: $primary-purple 1px solid; | |
| 49 | + | |
| 50 | + svg { | |
| 51 | + margin-right: 5px; | |
| 52 | + | |
| 53 | + path { | |
| 54 | + fill: $primary-purple; | |
| 55 | + } | |
| 56 | + | |
| 57 | + } | |
| 58 | + | |
| 37 | 59 | } |
| 38 | 60 | |
| 39 | 61 | .hsr-onboarding { |
| 40 | 62 | width: 100%; |
| @@ -530,5 +552,113 @@ | ||
| 530 | 552 | } |
| 531 | 553 | |
| 532 | 554 | .hsr-show { |
| 533 | 555 | display: block; |
| 556 | +} | |
| 557 | + | |
| 558 | +.hts-domain-step { | |
| 559 | + | |
| 560 | + .hts-website-url,.hts-nameservers { | |
| 561 | + background-color:$gray-light; | |
| 562 | + padding: 16px; | |
| 563 | + margin-top: 10px; | |
| 564 | + text-align: left; | |
| 565 | + color: $gray-base; | |
| 566 | + | |
| 567 | + span { | |
| 568 | + color: $primary-purple; | |
| 569 | + margin-left: 30px; | |
| 570 | + font-weight: 600; | |
| 571 | + } | |
| 572 | + | |
| 573 | + } | |
| 574 | + .hts-nameservers { | |
| 575 | + div { | |
| 576 | + display: flex; | |
| 577 | + align-items: baseline; | |
| 578 | + | |
| 579 | + p { | |
| 580 | + min-width: 125px; | |
| 581 | + } | |
| 582 | + | |
| 583 | + b { | |
| 584 | + color: $dark; | |
| 585 | + display: flex; | |
| 586 | + align-items: center; | |
| 587 | + | |
| 588 | + svg { | |
| 589 | + margin-left: 10px; | |
| 590 | + cursor: pointer; | |
| 591 | + } | |
| 592 | + } | |
| 593 | + } | |
| 594 | + } | |
| 595 | + | |
| 596 | + .hts-yt-video { | |
| 597 | + display: flex; | |
| 598 | + align-items: center; | |
| 599 | + justify-content: space-between; | |
| 600 | + | |
| 601 | + @media(max-width: 767px) { | |
| 602 | + flex-direction: column; | |
| 603 | + align-items: flex-start; | |
| 604 | + } | |
| 605 | + | |
| 606 | + .hts-wrap { | |
| 607 | + display: flex; | |
| 608 | + align-items: center; | |
| 609 | + | |
| 610 | + @media(max-width: 767px) { | |
| 611 | + img { | |
| 612 | + display: block; | |
| 613 | + margin: 10px auto 10px 0; | |
| 614 | + } | |
| 615 | + display: block; | |
| 616 | + } | |
| 617 | + | |
| 618 | + .hts-video-description { | |
| 619 | + margin-left: 15px; | |
| 620 | + | |
| 621 | + @media(max-width: 767px) { | |
| 622 | + margin-left: 0; | |
| 623 | + } | |
| 624 | + | |
| 625 | + p { | |
| 626 | + font-size: 12px; | |
| 627 | + color: $gray-base; | |
| 628 | + } | |
| 629 | + } | |
| 630 | + } | |
| 631 | + | |
| 632 | + .hts-video-button { | |
| 633 | + | |
| 634 | + a { | |
| 635 | + display: flex; | |
| 636 | + } | |
| 637 | + | |
| 638 | + @media(max-width: 767px) { | |
| 639 | + margin-top: 10px; | |
| 640 | + } | |
| 641 | + } | |
| 642 | + | |
| 643 | + } | |
| 644 | + | |
| 645 | +} | |
| 646 | + | |
| 647 | +.hts-tab-content { | |
| 648 | + | |
| 649 | + .wrapper { | |
| 650 | + margin: auto; | |
| 651 | + max-width: 730px; | |
| 652 | + width: 100%; | |
| 653 | + } | |
| 654 | + | |
| 655 | + .hts-container { | |
| 656 | + background-color: #fff; | |
| 657 | + border: 1px solid #dadce0; | |
| 658 | + border-radius: 8px; | |
| 659 | + margin-top: 25px; | |
| 660 | + padding: 40px; | |
| 661 | + text-align: left; | |
| 662 | + } | |
| 663 | + | |
| 534 | 664 | } |
