1 files changed, 54 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
new file mode 100644
index 000000000..0fdc3c6ba
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use './src/styles/vendor/variables' as vv;
+
+$dark-secondary: darken(vv.$secondary, 4%);
+
+::ng-deep cd-login {
+  .form-group {
+    background-color: $dark-secondary;
+    border-left: 4px solid vv.$white;
+    height: auto;
+    margin-bottom: 2rem;
+
+    &: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;
+  }
+
+  .placeholder {
+    color: vv.$gray-600;
+  }
+
+  .btn-password:focus {
+    outline-color: vv.$primary;
+  }
+}
+
+// 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;
+}