1 files changed, 46 insertions, 24 deletions

diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index cb3c97f18a3..43ca5a512d5 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -46,6 +46,11 @@ a:not([href]):not([class]) {
   color: inherit;
   text-decoration: none;
 }
+kbd {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
 img {
   vertical-align: middle;
   border-style: none;
@@ -90,6 +95,18 @@ button::-moz-focus-inner,
   padding-left: 0;
   list-style: none;
 }
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 90%;
+  color: #fff;
+  background-color: #303030;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 100%;
+  font-weight: 600;
+}
 .container-fluid {
   width: 100%;
   padding-right: 15px;
@@ -725,6 +742,22 @@ input {
 .form-control::placeholder {
   color: #868686;
 }
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 0.6875rem;
+  line-height: 10px;
+  color: var(--gray-700, #525252);
+  vertical-align: middle;
+  background-color: var(--gray-10, #f5f5f5);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
+    var(--gray-200, #bfbfbf);
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
+}
 .navbar-gitlab {
   padding: 0 16px;
   z-index: 1000;
@@ -1489,7 +1522,7 @@ svg.s16 {
   vertical-align: -3px;
 }
 .header-content .header-search-new {
-  max-width: 600px;
+  max-width: 640px;
 }
 .header-search {
   min-width: 320px;
@@ -1499,29 +1532,10 @@ svg.s16 {
     min-width: 200px;
   }
 }
-.header-search.is-not-active::after {
-  content: "/";
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  right: 8px;
-  transform: translateY(calc(50% - 4px));
-  padding: 4px 5px;
-  font-size: 12px;
-  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
-    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-  line-height: 1;
-  vertical-align: middle;
-  border-width: 0;
-  border-style: solid;
-  border-image: none;
-  border-radius: 3px;
+.header-search .keyboard-shortcut-helper {
+  transform: translateY(calc(50% - 2px));
   box-shadow: none;
-  white-space: pre-wrap;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: keep-all;
+  border-color: transparent;
 }
 .search {
   margin: 0 8px;
@@ -1684,7 +1698,6 @@ svg.s16 {
 }
 
 .tab-width-8 {
-  -moz-tab-size: 8;
   tab-size: 8;
 }
 .gl-sr-only {
@@ -1738,6 +1751,12 @@ svg.s16 {
 .gl-absolute {
   position: absolute;
 }
+.gl-top-0 {
+  top: 0;
+}
+.gl-right-3 {
+  right: 0.5rem;
+}
 .gl-w-full {
   width: 100%;
 }
@@ -1773,6 +1792,9 @@ svg.s16 {
 .gl-font-weight-bold {
   font-weight: 600;
 }
+.gl-z-index-1 {
+  z-index: 1;
+}
 
 @import "startup/cloaking";
 @include cloak-startup-scss(none);