diff options
Diffstat (limited to 'app/assets/stylesheets/themes')
-rw-r--r-- | app/assets/stylesheets/themes/_dark.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/dark_mode_overrides.scss | 22 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_blue.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_gray.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_green.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_helper.scss | 66 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_indigo.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_blue.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_gray.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_green.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_indigo.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_light_red.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/themes/theme_red.scss | 1 |
13 files changed, 36 insertions, 64 deletions
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index eeb4604f32a..4b74e449e06 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -101,7 +101,6 @@ $white-dark: #444; $theme-indigo-50: #1a1a40; $border-color: #4f4f4f; -$nav-active-bg: rgba(255, 255, 255, 0.08); :root { color-scheme: dark; @@ -206,7 +205,6 @@ body.gl-dark { --black: #{$black}; --svg-status-bg: #{$white}; - --nav-active-bg: #{$nav-active-bg}; .gl-button.gl-button, .gl-button.gl-button.btn-block { diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 92740aaf89e..e1ba2a69420 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -60,26 +60,6 @@ } .nav-sidebar { - li { - a { - color: var(--gray-600); - } - - > a:hover { - background-color: var(--nav-active-bg); - } - - &.active { - box-shadow: none; - - &:not(.fly-out-top-item) { - > a:not(.has-sub-items) { - background-color: var(--nav-active-bg); - } - } - } - } - .sidebar-sub-level-items.fly-out-list { box-shadow: none; border: 1px solid $border-color; @@ -92,7 +72,7 @@ aside.right-sidebar:not(.right-sidebar-merge-requests) { } body.gl-dark { - @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); + @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $white); .terms { .logo-text { diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss index 817557f37cd..90122cec31f 100644 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -6,7 +6,6 @@ body { $theme-blue-200, $theme-blue-500, $theme-blue-700, - $gray-900, $theme-blue-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss index 75b111f90c7..a6cdfb36a7c 100644 --- a/app/assets/stylesheets/themes/theme_gray.scss +++ b/app/assets/stylesheets/themes/theme_gray.scss @@ -7,7 +7,6 @@ body { $gray-300, $gray-500, $gray-900, - $gray-900, $white ); } diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss index 7e387e97452..0300f261d64 100644 --- a/app/assets/stylesheets/themes/theme_green.scss +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -6,7 +6,6 @@ body { $theme-green-200, $theme-green-500, $theme-green-700, - $gray-900, $theme-green-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 042e21cebd6..d644d8acc98 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -6,18 +6,22 @@ $search-and-nav-links, $accent, $border-and-box-shadow, - $sidebar-text, - $nav-svg-color, - $color-alternate + $navbar-theme-color, + $navbar-theme-contrast-color ) { // Set custom properties --gl-theme-accent: #{$accent}; + $search-and-nav-links-a20: rgba($search-and-nav-links, 0.2); + $search-and-nav-links-a30: rgba($search-and-nav-links, 0.3); + $search-and-nav-links-a40: rgba($search-and-nav-links, 0.4); + $search-and-nav-links-a80: rgba($search-and-nav-links, 0.8); + // Header .navbar-gitlab { - background-color: $nav-svg-color; + background-color: $navbar-theme-color; .navbar-collapse { color: $search-and-nav-links; @@ -37,7 +41,7 @@ > button { &:hover, &:focus { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } @@ -45,13 +49,13 @@ &.dropdown.show { > a, > button { - color: $nav-svg-color; - background-color: $color-alternate; + color: $navbar-theme-color; + background-color: $navbar-theme-contrast-color; } } &.line-separator { - border-left: 1px solid rgba($search-and-nav-links, 0.2); + border-left: 1px solid $search-and-nav-links-a20; } } } @@ -65,12 +69,12 @@ color: $search-and-nav-links; &.header-search-new { - color: $sidebar-text; + color: $gray-900; } > a { .notification-dot { - border: 2px solid $nav-svg-color; + border: 2px solid $navbar-theme-color; } &.header-help-dropdown-toggle { @@ -88,7 +92,7 @@ &:hover, &:focus { @include media-breakpoint-up(sm) { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } svg { @@ -97,7 +101,7 @@ .notification-dot { will-change: border-color, background-color; - border-color: adjust-color($nav-svg-color, $red: 33, $green: 33, $blue: 33); + border-color: adjust-color($navbar-theme-color, $red: 33, $green: 33, $blue: 33); } &.header-help-dropdown-toggle .notification-dot { @@ -108,12 +112,12 @@ &.active > a, &.dropdown.show > a { - color: $nav-svg-color; - background-color: $color-alternate; + color: $navbar-theme-color; + background-color: $navbar-theme-contrast-color; &:hover { svg { - fill: $nav-svg-color; + fill: $navbar-theme-color; } } @@ -123,7 +127,7 @@ &.header-help-dropdown-toggle { .notification-dot { - background-color: $nav-svg-color; + background-color: $navbar-theme-color; } } } @@ -131,7 +135,7 @@ .impersonated-user, .impersonated-user:hover { svg { - fill: $nav-svg-color; + fill: $navbar-theme-color; } } } @@ -142,30 +146,30 @@ > a { &:hover, &:focus { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } } .header-search { - background-color: rgba($search-and-nav-links, 0.2) !important; + background-color: $search-and-nav-links-a20 !important; border-radius: $border-radius-default; &:hover { - background-color: rgba($search-and-nav-links, 0.3) !important; + background-color: $search-and-nav-links-a30 !important; } svg.gl-search-box-by-type-search-icon { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } input { background-color: transparent; - color: rgba($search-and-nav-links, 0.8); - box-shadow: inset 0 0 0 1px rgba($search-and-nav-links, 0.4); + color: $search-and-nav-links-a80; + box-shadow: inset 0 0 0 1px $search-and-nav-links-a40; &::placeholder { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } &:focus, @@ -178,27 +182,27 @@ .keyboard-shortcut-helper { color: $search-and-nav-links; - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } .search { form { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; &:hover { - background-color: rgba($search-and-nav-links, 0.3); + background-color: $search-and-nav-links-a30; } } .search-input::placeholder { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } .search-input-wrap { .search-icon, .clear-icon { - fill: rgba($search-and-nav-links, 0.8); + fill: $search-and-nav-links-a80; } } @@ -209,7 +213,7 @@ .search-input-wrap { .search-icon { - fill: rgba($search-and-nav-links, 0.8); + fill: $search-and-nav-links-a80; } } } @@ -217,7 +221,7 @@ // Sidebar .nav-sidebar li.active > a { - color: $sidebar-text; + color: $gray-900; } .nav-sidebar { diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index 3bf6cfea650..5a27a9cfdc5 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -6,7 +6,6 @@ body { $indigo-200, $indigo-500, $indigo-700, - $gray-900, $indigo-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss index 771a84911b3..7cb0d98802e 100644 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -6,7 +6,6 @@ body { $theme-light-blue-200, $theme-light-blue-500, $theme-light-blue-500, - $gray-900, $theme-light-blue-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss index ad19438d79a..a0cbec9a92b 100644 --- a/app/assets/stylesheets/themes/theme_light_gray.scss +++ b/app/assets/stylesheets/themes/theme_light_gray.scss @@ -6,7 +6,6 @@ body { $gray-500, $gray-700, $gray-500, - $gray-900, $gray-50, $gray-500 ); diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss index 8c991a7bfb3..797279cc37b 100644 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -6,7 +6,6 @@ body { $theme-green-200, $theme-green-500, $theme-green-500, - $gray-900, $theme-light-green-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss index 6c220e0459a..3632c5ad45a 100644 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -6,7 +6,6 @@ body { $indigo-200, $indigo-500, $indigo-500, - $gray-900, $indigo-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss index e1a715293b4..6c10d9178f1 100644 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -6,7 +6,6 @@ body { $theme-light-red-200, $theme-light-red-500, $theme-light-red-500, - $gray-900, $theme-light-red-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss index 19fd150727d..140e27de6e2 100644 --- a/app/assets/stylesheets/themes/theme_red.scss +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -6,7 +6,6 @@ body { $theme-red-200, $theme-red-500, $theme-red-700, - $gray-900, $theme-red-900, $white ); |