1 files changed, 75 insertions, 37 deletions

diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 62d45332204..001431e517b 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -12,6 +12,7 @@ body.gl-dark {
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --black: #fff;
+  --nav-active-bg: rgba(255, 255, 255, 0.08);
 }
 :root {
   --white: #333;
@@ -350,9 +351,6 @@ h1 {
   .d-lg-none {
     display: none !important;
   }
-  .d-lg-block {
-    display: block !important;
-  }
 }
 .sr-only {
   position: absolute;
@@ -393,8 +391,7 @@ a.gl-badge.badge-info:active {
   background-color: #0b5cad;
 }
 a.gl-badge.badge-info:active {
-  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
-    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
 }
 .gl-badge.badge-success {
@@ -407,8 +404,7 @@ a.gl-badge.badge-success:active {
   background-color: #24663b;
 }
 a.gl-badge.badge-success:active {
-  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
-    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
 }
 .gl-badge.badge-warning {
@@ -421,8 +417,7 @@ a.gl-badge.badge-warning:active {
   background-color: #8f4700;
 }
 a.gl-badge.badge-warning:active {
-  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
-    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
 }
 .gl-button .gl-badge {
@@ -487,9 +482,8 @@ a.gl-badge.badge-warning:active {
 }
 .gl-link:active {
   text-decoration: underline;
-  box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.4),
-    0 0 0 4px rgba(66, 143, 220, 0.48);
-  outline: none;
+  outline: 2px solid #1f75cb;
+  outline-offset: 2px;
 }
 .gl-button {
   display: inline-flex;
@@ -518,8 +512,7 @@ a.gl-badge.badge-warning:active {
 }
 .gl-button.gl-button.btn-default:active,
 .gl-button.gl-button.btn-default.active {
-  box-shadow: inset 0 0 0 2px #bfbfbf, 0 0 0 1px rgba(51, 51, 51, 0.4),
-    0 0 0 4px rgba(66, 143, 220, 0.48);
+  box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb;
   outline: none;
   background-color: #404040;
 }
@@ -742,7 +735,7 @@ body {
   }
 }
 @media (max-width: 767.98px) {
-  .dropdown-menu-toggle {
+  .dropdown-menu-toggle.dropdown-menu-toggle {
     width: 100%;
   }
 }
@@ -770,15 +763,6 @@ input {
   right: 0;
   border-radius: 0;
 }
-.navbar-gitlab .logo-text {
-  line-height: initial;
-}
-.navbar-gitlab .logo-text svg {
-  width: 55px;
-  height: 14px;
-  margin: 0;
-  fill: #333;
-}
 .navbar-gitlab .close-icon {
   display: none;
 }
@@ -790,13 +774,6 @@ input {
   min-height: var(--header-height, 40px);
   padding-left: 0;
 }
-.navbar-gitlab .header-content .title-container {
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 auto;
-  padding-top: 0;
-  overflow: visible;
-}
 .navbar-gitlab .header-content .title {
   padding-right: 0;
   color: currentColor;
@@ -817,9 +794,12 @@ input {
   display: flex;
   align-items: center;
   padding: 2px 8px;
-  margin: 5px 2px 5px -8px;
+  margin: 4px 2px 4px -12px;
   border-radius: 4px;
 }
+.navbar-gitlab .header-content .title .canary-badge {
+  margin-left: -8px;
+}
 .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) {
   margin: 0 2px;
 }
@@ -853,7 +833,7 @@ input {
   border-radius: 0;
   min-width: 45px;
   padding: 0;
-  margin: 8px -7px 8px 0;
+  margin: 8px 8px 8px 0;
   font-size: 14px;
   text-align: center;
   color: currentColor;
@@ -997,6 +977,16 @@ input {
 .top-nav-toggle .dropdown-icon {
   margin-right: 0.5rem;
 }
+.tanuki-logo .tanuki {
+  fill: #e24329;
+}
+.tanuki-logo .left-cheek,
+.tanuki-logo .right-cheek {
+  fill: #fc6d26;
+}
+.tanuki-logo .chin {
+  fill: #fca326;
+}
 .context-header {
   position: relative;
   margin-right: 2px;
@@ -1513,8 +1503,16 @@ svg.s12 {
 svg.s16 {
   vertical-align: -3px;
 }
+.header-content .header-search-new {
+  max-width: 600px;
+}
 .header-search {
-  width: 320px;
+  min-width: 320px;
+}
+@media (min-width: 768px) and (max-width: 1199.98px) {
+  .header-search {
+    min-width: 200px;
+  }
 }
 .header-search.is-not-active::after {
   content: "/";
@@ -1535,6 +1533,7 @@ svg.s16 {
   border-radius: 3px;
   box-shadow: none;
   white-space: pre-wrap;
+  box-sizing: border-box;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: keep-all;
@@ -1787,6 +1786,7 @@ body.gl-dark {
   --white: #333;
   --black: #fff;
   --svg-status-bg: #333;
+  --nav-active-bg: rgba(255, 255, 255, 0.08);
 }
 .nav-sidebar li a {
   color: var(--gray-600);
@@ -1862,6 +1862,7 @@ body.gl-dark
 }
 body.gl-dark .header-search {
   background-color: rgba(250, 250, 250, 0.2) !important;
+  border-radius: 4px;
 }
 body.gl-dark .header-search svg.gl-search-box-by-type-search-icon {
   color: rgba(250, 250, 250, 0.8);
@@ -1900,9 +1901,6 @@ body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
   background-color: var(--gray-100, #303030);
   color: var(--gray-900, #fafafa);
 }
-body.gl-dark .logo-text svg {
-  fill: var(--gl-text-color);
-}
 body.gl-dark .navbar-gitlab {
   background-color: var(--gray-50);
   box-shadow: 0 1px 0 0 var(--gray-100);
@@ -2023,6 +2021,7 @@ body.gl-dark {
   --white: #333;
   --black: #fff;
   --svg-status-bg: #333;
+  --nav-active-bg: rgba(255, 255, 255, 0.08);
 }
 .tab-width-8 {
   -moz-tab-size: 8;
@@ -2045,17 +2044,47 @@ body.gl-dark {
 .gl-display-none {
   display: none;
 }
+@media (min-width: 992px) {
+  .gl-lg-display-none\! {
+    display: none !important;
+  }
+}
+.gl-display-flex {
+  display: flex;
+}
+@media (min-width: 992px) {
+  .gl-lg-display-flex {
+    display: flex;
+  }
+}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
   }
 }
+@media (min-width: 992px) {
+  .gl-lg-display-block {
+    display: block;
+  }
+}
+.gl-display-inline-block\! {
+  display: inline-block !important;
+}
+.gl-align-items-stretch {
+  align-items: stretch;
+}
+.gl-flex-grow-1 {
+  flex-grow: 1;
+}
 .gl-relative {
   position: relative;
 }
 .gl-absolute {
   position: absolute;
 }
+.gl-w-full {
+  width: 100%;
+}
 .gl-px-3 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2063,6 +2092,9 @@ body.gl-dark {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
+.gl-pt-0 {
+  padding-top: 0;
+}
 .gl-ml-n2 {
   margin-left: -0.25rem;
 }
@@ -2073,6 +2105,12 @@ body.gl-dark {
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
+.gl-text-right {
+  text-align: right;
+}
+.gl-white-space-nowrap {
+  white-space: nowrap;
+}
 .gl-font-sm {
   font-size: 0.75rem;
 }