weseek__growi/apps/app/src/components/LoginForm.module.scss

@use '@growi/core/scss/bootstrap/init' as bs;

@use '~/styles/atoms/placeholders/buttons';

.login-form :global {
  // To adjust the behavior, this problem is not solved.
  // See https://github.com/AaronCCWong/react-card-flip/issues/56
  .react-card-front,
  .react-card-back {
    height: 0% !important;
  }

  .collapse-external-auth {
    overflow: hidden;
  }

  .link-growi-org {
    position: absolute;
    bottom: 9px;
    z-index: 3;
  }

  .text-line {
    &:before,
    &:after {
      flex-grow: 1;
      height: 1px;
      margin:0 1em;
      content: '';
      background: rgba(white,0.5);
    }
  }


  .ldap-space {
    padding-right: 76px;
  }

  .input-ldap {
    position: absolute;
    top: 4px;
    right: 5px;
  }
}


// Button colors
:root {
  .login-form :global {

    .btn {
      @extend %btn-nologin;
    }

    .btn-register {
      @extend %btn-register;
    }

    .btn-login {
      --bs-btn-bg: #{rgba(#204986, 0.6)};
      --bs-btn-hover-bg: #{rgba(#204986, 0.8)};
      --bs-btn-active-bg: #{rgba(#204986, 0.8)};
    }

    .btn-function {
      --bs-btn-bg: #{rgba(bs.$gray-800, 0.8)};
      --bs-btn-hover-bg: #{rgba(bs.$gray-800, 0.5)};
      --bs-btn-active-bg: #{rgba(bs.$gray-800, 0.5)};
    }

    .btn-auth-google {
      --bs-btn-bg: #{rgba(#4285F4, 0.4)};
      --bs-btn-hover-bg: #{rgba(#4285F4, 0.8)};
      --bs-btn-active-bg: #{rgba(#4285F4, 0.8)};
    }

    .btn-auth-github {
      --bs-btn-bg: #{rgba(#403D3E, 0.4)};
      --bs-btn-hover-bg: #{rgba(#403D3E, 0.7)};
      --bs-btn-active-bg: #{rgba(#403D3E, 0.7)};
    }

    .btn-auth-facebook {
      --bs-btn-bg: #{rgba(#29487d, 0.4)};
      --bs-btn-hover-bg: #{rgba(#29487d, 0.9)};
      --bs-btn-active-bg: #{rgba(#29487d, 0.9)};
    }

    .btn-auth-oidc {
      --bs-btn-bg: #{rgba(#835B1A, 0.4)};
      --bs-btn-hover-bg: #{rgba(#835B1A, 0.8)};
      --bs-btn-active-bg: #{rgba(#835B1A, 0.8)};
    }

    .btn-auth-saml {
      --bs-btn-bg: #{rgba(#138957, 0.4)};
      --bs-btn-hover-bg: #{rgba(#138957, 0.7)};
      --bs-btn-active-bg: #{rgba(#138957, 0.7)};
    }
  }
}