@import (reference) './app.less';
.yo-login {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: url('~@/assets/image/login-bg.jpg') no-repeat center;
  &::before {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
  }
  &--placeholder {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 0;
    .container-sm {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      height: 0;
    }
  }
  .ant-form {
    width: 300px;
    padding: @padding-lg;

    border-radius: @border-radius-base + 2px;
    background: linear-gradient(45deg, @white, fade(@white, 80%));
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  /deep/.ant-form-item-label {
    transition: @animation-duration-base;
    transform: translate(0);
    >label {
      color: fade(@black, 40%);
    }
  }
  &--label {
    /deep/.ant-form-item-label {
      transform: translate(11px, 28px);
    }
  }
  /deep/.ant-input {
    border-width: 0 0 @border-width-base 0 !important;
    border-color: fade(@black, 10%);
    background-color: transparent;
  }
  /deep/.ant-input:hover,
  /deep/.ant-input:focus {
    border-width: 0 0 @border-width-base 0 !important;
    border-color: @primary-color;
    box-shadow: none;
  }
}