diff options
Diffstat (limited to 'app/assets/stylesheets/themes')
-rw-r--r-- | app/assets/stylesheets/themes/_dark.scss | 28 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_helper.scss | 30 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light.scss | 10 |
3 files changed, 67 insertions, 1 deletions
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 8e1438eaf8a..f12b2ee2591 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -72,6 +72,18 @@ $indigo-900: #ebebfa; $indigo-950: #f7f7ff; $indigo-900-alpha-008: rgba($indigo-900, 0.08); +$purple-50: #232150; +$purple-100: #2f2a6b; +$purple-200: #453894; +$purple-300: #5943b6; +$purple-400: #694cc0; +$purple-500: #7b58cf; +$purple-600: #9475db; +$purple-700: #ac93e6; +$purple-800: #cbbbf2; +$purple-900: #e1d8f9; +$purple-950: #f4f0ff; + $gray-lightest: #222; $gray-light: $gray-50; $gray-lighter: #303030; @@ -163,6 +175,18 @@ body.gl-dark { --indigo-950: #{$indigo-950}; --indigo-900-alpha-008: #{$indigo-900-alpha-008}; + --purple-50: #{$purple-50}; + --purple-100: #{$purple-100}; + --purple-200: #{$purple-200}; + --purple-300: #{$purple-300}; + --purple-400: #{$purple-400}; + --purple-500: #{$purple-500}; + --purple-600: #{$purple-600}; + --purple-700: #{$purple-700}; + --purple-800: #{$purple-800}; + --purple-900: #{$purple-900}; + --purple-950: #{$purple-950}; + --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; @@ -252,6 +276,10 @@ $well-inner-border: $gray-200; color: $gray-900; } +.gl-label-text-dark.gl-label-text-dark { + color: $gray-10; +} + // This applies to "gl-labels" from "gitlab-ui" .gl-label.gl-label-scoped.gl-label-text-dark, .gl-label.gl-label-scoped.gl-label-text-light { diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index a94169ab494..a9e8b238d78 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -140,6 +140,34 @@ } } + .header-search { + background-color: rgba($search-and-nav-links, 0.2) !important; + + &:hover { + background-color: rgba($search-and-nav-links, 0.3) !important; + } + + svg { + color: rgba($search-and-nav-links, 0.8) !important; + } + + input { + background-color: transparent; + color: rgba($search-and-nav-links, 0.8); + + &::placeholder { + color: rgba($search-and-nav-links, 0.8); + } + + &:focus, + &:active { + &::placeholder { + color: $search-and-nav-links; + } + } + } + } + .search { form { background-color: rgba($search-and-nav-links, 0.2); @@ -184,7 +212,7 @@ a:hover, &.active a, .fly-out-top-item-container { - background-color: $purple-900; + background-color: var(--purple-100, $purple-900); color: var(--black, $white); } } diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index b41377475c5..4c3bc1b2298 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -45,6 +45,16 @@ body { } } + .header-search { + background-color: $white !important; + box-shadow: inset 0 0 0 1px $border-color !important; + + &:hover { + background-color: $white !important; + box-shadow: inset 0 0 0 1px $blue-200 !important; + } + } + .search { form { background-color: $white; |