nova-live/projects/live-app/src/modules/login/login.component.scss

ion-header {
  background-color: transparent;

  ion-toolbar {
    --border-style: none;
  }
}
ion-content {
  // --padding-top: 0;
  --background: #fff;
  font-family: Source Han Sans CN;
  --keyboard-offset: 0vw;
  position: relative;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 11.733vw;
    background: transparent;
    display: flex;
    align-items: center;
    padding-left: 1.333vw;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.533vw;
      font-weight: 600;
      padding-right: 7.733vw;
    }
  }
  .container {
    width: 100%;
    // height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    // background-image: url('../../../../assets/img/miner-filecoin/login_meta.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background-size: cover;

    .logo {
      margin: 21.333vw auto 13.333vw auto;
      text-align: center;

      img {
        width: 21.333vw;
        height: 21.333vw;
      }
    }

    .input {
      width: 84vw;
      height: 10.667vw;
      background: #f2f1f6;
      opacity: 0.8;
      border-radius: 3.2vw;
      border-bottom: 0.133vw solid #eee;
      margin-bottom: 5.333vw;
      display: flex;
      align-items: center;

      .icon {
        width: 4.8vw;
        height: 4.8vw;
        margin: 0 2.667vw;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .watch {
        width: 5.333vw;
        height: 4vw;
        margin: 0 2.667vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .captcha {
        // width: 18.133vw;
        // height: 6.4vw;
        border: 0.133vw solid #0113c2;
        border-radius: 1.067vw;
        font-size: 3.2vw;
        font-weight: 400;
        color: #241aff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 2.667vw;
        text-align: center;
      }
    }

    .submit {
      width: 84vw;
      height: 10.667vw;
      background: #0054e9;
      border-radius: 3.2vw;
      font-size: 4.8vw;
      font-weight: bold;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 1.333vw;
      margin-top: 10.667vw;
    }

    .opts {
      width: 84vw;
      height: 8vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4vw;
      .code {
        font-size: 3.2vw;
        font-weight: 400;
        // color: #FFFFFF;
      }

      .forget {
        font-size: 3.2vw;
        font-weight: 400;
        // color: #BBBBBB;
      }
    }

    .register {
      width: 84vw;
      height: 8vw;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.2vw;
      font-weight: 400;
      // color: #FFFFFE;
      margin-top: 8vw;

      .icon {
        width: 32px;
        height: 32px;
        transform: scale(0.5);
        margin-left: 1.333vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .agreement {
      width: 84vw;
      height: 13.333vw;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      font-size: 4vw;
      font-weight: 400;
      color: #9f9f9f;
      margin-top: 6.667vw;
      margin-bottom: 6.667vw;
      span {
        color: #3f51b5;
      }
      .content {
        margin-left: 2.667vw;
        width: 90%;
      }
      ion-checkbox {
        --background: #108ee9;
        // --border-color: #fff;
        // --border-color-checked: #fff;
        --background-checked: #108ee9;
      }
    }
  }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}