1 files changed, 68 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
new file mode 100755
index 000000000..15addd1e8
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use './src/styles/vendor/variables' as vv;
+
+$dark-secondary: darken(vv.$secondary, 4%);
+
+::ng-deep cd-login-password-form {
+  h4 {
+    margin: 0 0 30px;
+  }
+
+  .form-group {
+    background-color: $dark-secondary;
+    border-left: 4px solid vv.$white;
+
+    &:focus-within {
+      border-left: 4px solid map.get(vv.$theme-colors, 'accent');
+    }
+  }
+
+  .btn-password,
+  .btn-password:focus,
+  .form-control,
+  .form-control:focus {
+    background-color: $dark-secondary;
+    border: 0;
+    box-shadow: none;
+    color: vv.$body-color-bright;
+    filter: none;
+    outline: none;
+  }
+
+  .form-control::placeholder {
+    color: vv.$gray-600;
+  }
+
+  .btn-password:focus {
+    outline-color: vv.$primary;
+  }
+
+  button.btn:not(:first-child) {
+    margin-left: 5px;
+  }
+}
+
+// This will override the colors applied by chrome
+@keyframes autofill {
+  to {
+    background-color: $dark-secondary;
+    color: vv.$body-color-bright;
+  }
+}
+
+input:-webkit-autofill {
+  animation-fill-mode: both;
+  animation-name: autofill;
+  border-radius: 0;
+  box-shadow: 0 0 0 1000px $dark-secondary inset;
+  -webkit-text-fill-color: vv.$body-color-bright;
+  transition-property: none;
+}
+
+.invalid-feedback {
+  padding-left: 9px;
+}
+
+.is-invalid.cd-form-control {
+  border-color: transparent;
+}