3 files changed, 89 insertions, 22 deletions
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 3b28025053b..b4e896325d6 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -119,7 +119,7 @@ kbd kbd {
 .form-control {
   display: block;
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 400;
@@ -132,10 +132,6 @@ kbd kbd {
 }
 @media (prefers-reduced-motion: reduce) {
 }
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #ececef;
-}
 .form-control::placeholder {
   color: #a4a3a8;
   opacity: 1;
@@ -655,7 +651,7 @@ html {
   color: #ececef;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #434248;
+  border: 1px solid #535158;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -665,9 +661,12 @@ html {
 .dropdown-menu-toggle.dropdown-menu-toggle {
   justify-content: flex-start;
   overflow: hidden;
+  padding-top: 7px;
+  padding-bottom: 7px;
   padding-right: 25px;
   position: relative;
   text-overflow: ellipsis;
+  line-height: 16px;
   width: 160px;
 }
 .dropdown-menu {
@@ -1493,6 +1492,43 @@ kbd {
     display: none;
   }
 }
+.super-sidebar {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--gray-10, #1f1e24);
+  border-right: 1px solid rgba(251, 250, 253, 0.08);
+  transform: translate3d(0, 0, 0);
+  width: 256px;
+  z-index: 600;
+}
+.super-sidebar.super-sidebar-loading {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .super-sidebar.super-sidebar-loading {
+    transform: translate3d(0, 0, 0);
+  }
+}
+.page-with-super-sidebar {
+  padding-left: 0;
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar {
+    padding-left: 256px;
+  }
+}
+.page-with-super-sidebar-collapsed .super-sidebar {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar-collapsed {
+    padding-left: 0;
+  }
+}
 input::-moz-placeholder {
   color: #737278;
   opacity: 1;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index adafe719892..0a0fa83ff67 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -119,7 +119,7 @@ kbd kbd {
 .form-control {
   display: block;
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 400;
@@ -132,10 +132,6 @@ kbd kbd {
 }
 @media (prefers-reduced-motion: reduce) {
 }
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #333238;
-}
 .form-control::placeholder {
   color: #626168;
   opacity: 1;
@@ -655,7 +651,7 @@ html {
   color: #333238;
   font-size: 14px;
   text-align: left;
-  border: 1px solid #dcdcde;
+  border: 1px solid #bfbfc3;
   border-radius: 0.25rem;
   white-space: nowrap;
 }
@@ -665,9 +661,12 @@ html {
 .dropdown-menu-toggle.dropdown-menu-toggle {
   justify-content: flex-start;
   overflow: hidden;
+  padding-top: 7px;
+  padding-bottom: 7px;
   padding-right: 25px;
   position: relative;
   text-overflow: ellipsis;
+  line-height: 16px;
   width: 160px;
 }
 .dropdown-menu {
@@ -1493,6 +1492,43 @@ kbd {
     display: none;
   }
 }
+.super-sidebar {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--gray-10, #fbfafd);
+  border-right: 1px solid rgba(31, 30, 36, 0.08);
+  transform: translate3d(0, 0, 0);
+  width: 256px;
+  z-index: 600;
+}
+.super-sidebar.super-sidebar-loading {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .super-sidebar.super-sidebar-loading {
+    transform: translate3d(0, 0, 0);
+  }
+}
+.page-with-super-sidebar {
+  padding-left: 0;
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar {
+    padding-left: 256px;
+  }
+}
+.page-with-super-sidebar-collapsed .super-sidebar {
+  transform: translate3d(-100%, 0, 0);
+}
+@media (min-width: 1200px) {
+  .page-with-super-sidebar-collapsed {
+    padding-left: 0;
+  }
+}
 input::-moz-placeholder {
   color: #89888d;
   opacity: 1;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 3aace601c45..57f61508178 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -192,7 +192,7 @@ hr {
 .form-control {
   display: block;
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
   font-weight: 400;
@@ -205,10 +205,6 @@ hr {
 }
 @media (prefers-reduced-motion: reduce) {
 }
-.form-control:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 #333238;
-}
 .form-control::placeholder {
   color: #626168;
   opacity: 1;
@@ -262,7 +258,7 @@ input.btn-block[type="button"] {
   display: block;
   min-height: 1.5rem;
   padding-left: 1.5rem;
-  color-adjust: exact;
+  print-color-adjust: exact;
 }
 .custom-control-input {
   position: absolute;
@@ -303,7 +299,7 @@ input.btn-block[type="button"] {
   pointer-events: none;
   content: "";
   background-color: #fff;
-  border: #737278 solid 1px;
+  border: 1px solid #737278;
 }
 .custom-control-label::after {
   position: absolute;
@@ -313,7 +309,7 @@ input.btn-block[type="button"] {
   width: 1rem;
   height: 1rem;
   content: "";
-  background: no-repeat 50% / 50% 50%;
+  background: 50% / 50% 50% no-repeat;
 }
 .custom-checkbox .custom-control-label::before {
   border-radius: 0.25rem;
@@ -663,7 +659,6 @@ body.navless {
 .btn-block {
   width: 100%;
   margin: 0;
-  margin-bottom: 1rem;
 }
 .btn-block.btn {
   padding: 6px 0;
@@ -726,7 +721,7 @@ label.label-bold {
   color: #89888d;
 }
 .gl-show-field-errors .form-control:not(textarea) {
-  height: 34px;
+  height: 32px;
 }
 .navbar-empty {
   justify-content: center;