$bg:#283443; $light_gray:#333; $cursor: #333; @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { .login-container .el-input input { color: $cursor; } } /* reset element-ui css */ .login-container { .el-input { display: inline-block; height: 47px; width: 85%; input { background-color: #e8f0fe; border: 0px; -webkit-appearance: none; border-radius: 0px; padding: 12px 5px 12px 15px; color: $light_gray; height: 47px; caret-color: $cursor; } } .el-form-item { border: 1px solid rgba(255, 255, 255, 0.1); background: #E8F0FE; border-radius: 5px; color: #454545; } .tips{ color:#333; } } $bg:#2d3a4b; $dark_gray:#333; $light_gray:#eee; .login-container { background-image: url("../../assets/images/aiBgimg.png"); background-size: contain; min-height: 100%; width: 100%; /* background-color: $bg; */ overflow: hidden; display:flex; justify-content: flex-end; .gradient-background { position: absolute; background: linear-gradient(to bottom, #4f46e5, #3b82f6); /* from-indigo-600 to-blue-500 */ opacity: 0.75; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .form-content{ background: linear-gradient(to bottom, #4f46e5, #3b82f6); z-index: 999; width: 40%; .login_form{ display: flex; overflow: hidden; background: #FFF; height: 100vh; flex-direction: column; align-items: center; justify-content: center; /* .title-container{ background-color: #899fe1; .images{ height:100px; } } */ .login-form { width: 60%; position: relative; background:#FFF; padding:40px; } } } .tips { font-size: 14px; color: #818cf8; margin-bottom: 24px; width:100%; display: flex; justify-content: flex-end; span { &:first-of-type { margin-right: 16px; } } } .svg-container { padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block; } .title-container { position: relative; .title { font-size: 26px; color: $light_gray; margin: 0px auto 40px auto; text-align: center; font-weight: bold; } } .show-pwd { position: absolute; right: 10px; top: 7px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none; } .thirdparty-button { position: absolute; right: 0; bottom: 6px; } @media only screen and (max-width: 470px) { .thirdparty-button { display: none; } } }