Skip to content

G
gitlab-ce
Commit af906641 authored by Michael Le's avatar Michael Le
Browse files
Options

Use neutral colours for nav background 

Use black and white as
base color instead of indigo

Changelog: changed
parent 67985489
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 31 deletions
app/assets/stylesheets/framework/header.scss
View file @ af906641
$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important;
.navbar-gitlab { .navbar-gitlab {
padding: 0 16px; padding: 0 16px;
z-index: $header-zindex; z-index: $header-zindex;
...@@ -574,7 +572,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -574,7 +572,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
} }
.frequent-items-list-item-container > a:hover { .frequent-items-list-item-container > a:hover {
background-color: $top-nav-hover-bg; background-color: $nav-active-bg;
} }
} }
...@@ -589,11 +587,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -589,11 +587,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
} }
.top-nav-menu-item { .top-nav-menu-item {
color: var(--indigo-900, $theme-indigo-900) !important;
&.active, &.active,
&:hover { &:hover {
background-color: $top-nav-hover-bg; background-color: $nav-active-bg;
} }
.gl-icon { .gl-icon {
...@@ -603,7 +599,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important ...@@ -603,7 +599,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
.top-nav-responsive { .top-nav-responsive {
@include gl-display-none; @include gl-display-none;
color: var(--indigo-900, $theme-indigo-900);
} }
.top-nav-responsive-open { .top-nav-responsive-open {
......
app/assets/stylesheets/framework/variables.scss
View file @ af906641
...@@ -475,6 +475,7 @@ $gl-line-height-18: 18px; ...@@ -475,6 +475,7 @@ $gl-line-height-18: 18px;
$gl-line-height-20: 20px; $gl-line-height-20: 20px;
$gl-line-height-24: 24px; $gl-line-height-24: 24px;
$gl-line-height-14: 14px; $gl-line-height-14: 14px;
$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important;
$pages-group-name-color: #4c4e54; $pages-group-name-color: #4c4e54;
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ af906641
...@@ -9,7 +9,6 @@ body.gl-dark { ...@@ -9,7 +9,6 @@ body.gl-dark {
--gray-900: #fafafa; --gray-900: #fafafa;
--green-100: #0d532a; --green-100: #0d532a;
--green-700: #91d4a8; --green-700: #91d4a8;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--gl-text-color: #fafafa; --gl-text-color: #fafafa;
--border-color: #4f4f4f; --border-color: #4f4f4f;
--black: #fff; --black: #fff;
...@@ -1073,7 +1072,7 @@ input { ...@@ -1073,7 +1072,7 @@ input {
margin: 0 auto; margin: 0 auto;
} }
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { .nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar a { .nav-sidebar a {
text-decoration: none; text-decoration: none;
...@@ -1104,7 +1103,7 @@ input { ...@@ -1104,7 +1103,7 @@ input {
font-weight: 600; font-weight: 600;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar ul { .nav-sidebar ul {
padding-left: 0; padding-left: 0;
...@@ -1265,7 +1264,7 @@ input { ...@@ -1265,7 +1264,7 @@ input {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item) li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px; height: 60px;
...@@ -1739,7 +1738,6 @@ body.gl-dark { ...@@ -1739,7 +1738,6 @@ body.gl-dark {
--indigo-800: #d1d1f0; --indigo-800: #d1d1f0;
--indigo-900: #ebebfa; --indigo-900: #ebebfa;
--indigo-950: #f7f7ff; --indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150; --purple-50: #232150;
--purple-100: #2f2a6b; --purple-100: #2f2a6b;
--purple-200: #453894; --purple-200: #453894;
...@@ -1761,6 +1759,7 @@ body.gl-dark { ...@@ -1761,6 +1759,7 @@ body.gl-dark {
--white: #333; --white: #333;
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
--nav-active-bg: rgba(255, 255, 255, 0.08);
} }
.nav-sidebar li a { .nav-sidebar li a {
color: var(--gray-600); color: var(--gray-600);
...@@ -1769,7 +1768,7 @@ body.gl-dark { ...@@ -1769,7 +1768,7 @@ body.gl-dark {
box-shadow: none; box-shadow: none;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: var(--indigo-900-alpha-008); background-color: var(--nav-active-bg);
} }
body.gl-dark { body.gl-dark {
--gl-theme-accent: #868686; --gl-theme-accent: #868686;
...@@ -1972,7 +1971,6 @@ body.gl-dark { ...@@ -1972,7 +1971,6 @@ body.gl-dark {
--indigo-800: #d1d1f0; --indigo-800: #d1d1f0;
--indigo-900: #ebebfa; --indigo-900: #ebebfa;
--indigo-950: #f7f7ff; --indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150; --purple-50: #232150;
--purple-100: #2f2a6b; --purple-100: #2f2a6b;
--purple-200: #453894; --purple-200: #453894;
...@@ -1994,6 +1992,7 @@ body.gl-dark { ...@@ -1994,6 +1992,7 @@ body.gl-dark {
--white: #333; --white: #333;
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
--nav-active-bg: rgba(255, 255, 255, 0.08);
} }
.tab-width-8 { .tab-width-8 {
-moz-tab-size: 8; -moz-tab-size: 8;
......
app/assets/stylesheets/startup/startup-general.scss
View file @ af906641
...@@ -1058,7 +1058,7 @@ input { ...@@ -1058,7 +1058,7 @@ input {
margin: 0 auto; margin: 0 auto;
} }
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { .nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar a { .nav-sidebar a {
text-decoration: none; text-decoration: none;
...@@ -1089,7 +1089,7 @@ input { ...@@ -1089,7 +1089,7 @@ input {
font-weight: 600; font-weight: 600;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar ul { .nav-sidebar ul {
padding-left: 0; padding-left: 0;
...@@ -1250,7 +1250,7 @@ input { ...@@ -1250,7 +1250,7 @@ input {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item) li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px; height: 60px;
......
app/assets/stylesheets/themes/_dark.scss
View file @ af906641
...@@ -70,7 +70,6 @@ $indigo-700: #a6a6de; ...@@ -70,7 +70,6 @@ $indigo-700: #a6a6de;
$indigo-800: #d1d1f0; $indigo-800: #d1d1f0;
$indigo-900: #ebebfa; $indigo-900: #ebebfa;
$indigo-950: #f7f7ff; $indigo-950: #f7f7ff;
$indigo-900-alpha-008: rgba($indigo-900, 0.08);
$purple-50: #232150; $purple-50: #232150;
$purple-100: #2f2a6b; $purple-100: #2f2a6b;
...@@ -174,7 +173,6 @@ body.gl-dark { ...@@ -174,7 +173,6 @@ body.gl-dark {
--indigo-800: #{$indigo-800}; --indigo-800: #{$indigo-800};
--indigo-900: #{$indigo-900}; --indigo-900: #{$indigo-900};
--indigo-950: #{$indigo-950}; --indigo-950: #{$indigo-950};
--indigo-900-alpha-008: #{$indigo-900-alpha-008};
--purple-50: #{$purple-50}; --purple-50: #{$purple-50};
--purple-100: #{$purple-100}; --purple-100: #{$purple-100};
......
app/assets/stylesheets/themes/dark_mode_overrides.scss
View file @ af906641
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
} }
> a:hover { > a:hover {
background-color: var(--indigo-900-alpha-008); background-color: var(--nav-active-bg);
} }
&.active { &.active {
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
&:not(.fly-out-top-item) { &:not(.fly-out-top-item) {
> a:not(.has-sub-items) { > a:not(.has-sub-items) {
background-color: var(--indigo-900-alpha-008); background-color: var(--nav-active-bg);
} }
} }
} }
......
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ af906641
...@@ -9,7 +9,6 @@ body.gl-dark { ...@@ -9,7 +9,6 @@ body.gl-dark {
--gray-900: #fafafa; --gray-900: #fafafa;
--green-100: #0d532a; --green-100: #0d532a;
--green-700: #91d4a8; --green-700: #91d4a8;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--gl-text-color: #fafafa; --gl-text-color: #fafafa;
--border-color: #4f4f4f; --border-color: #4f4f4f;
--black: #fff; --black: #fff;
...@@ -1073,7 +1072,7 @@ input { ...@@ -1073,7 +1072,7 @@ input {
margin: 0 auto; margin: 0 auto;
} }
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { .nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar a { .nav-sidebar a {
text-decoration: none; text-decoration: none;
...@@ -1104,7 +1103,7 @@ input { ...@@ -1104,7 +1103,7 @@ input {
font-weight: 600; font-weight: 600;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar ul { .nav-sidebar ul {
padding-left: 0; padding-left: 0;
...@@ -1265,7 +1264,7 @@ input { ...@@ -1265,7 +1264,7 @@ input {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item) li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px; height: 60px;
...@@ -1739,7 +1738,6 @@ body.gl-dark { ...@@ -1739,7 +1738,6 @@ body.gl-dark {
--indigo-800: #d1d1f0; --indigo-800: #d1d1f0;
--indigo-900: #ebebfa; --indigo-900: #ebebfa;
--indigo-950: #f7f7ff; --indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150; --purple-50: #232150;
--purple-100: #2f2a6b; --purple-100: #2f2a6b;
--purple-200: #453894; --purple-200: #453894;
...@@ -1761,6 +1759,7 @@ body.gl-dark { ...@@ -1761,6 +1759,7 @@ body.gl-dark {
--white: #333; --white: #333;
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
--nav-active-bg: rgba(255, 255, 255, 0.08);
} }
.nav-sidebar li a { .nav-sidebar li a {
color: var(--gray-600); color: var(--gray-600);
...@@ -1769,7 +1768,7 @@ body.gl-dark { ...@@ -1769,7 +1768,7 @@ body.gl-dark {
box-shadow: none; box-shadow: none;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: var(--indigo-900-alpha-008); background-color: var(--nav-active-bg);
} }
body.gl-dark { body.gl-dark {
--gl-theme-accent: #868686; --gl-theme-accent: #868686;
...@@ -1972,7 +1971,6 @@ body.gl-dark { ...@@ -1972,7 +1971,6 @@ body.gl-dark {
--indigo-800: #d1d1f0; --indigo-800: #d1d1f0;
--indigo-900: #ebebfa; --indigo-900: #ebebfa;
--indigo-950: #f7f7ff; --indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150; --purple-50: #232150;
--purple-100: #2f2a6b; --purple-100: #2f2a6b;
--purple-200: #453894; --purple-200: #453894;
...@@ -1994,6 +1992,7 @@ body.gl-dark { ...@@ -1994,6 +1992,7 @@ body.gl-dark {
--white: #333; --white: #333;
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
--nav-active-bg: rgba(255, 255, 255, 0.08);
} }
.tab-width-8 { .tab-width-8 {
-moz-tab-size: 8; -moz-tab-size: 8;
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ af906641
...@@ -1058,7 +1058,7 @@ input { ...@@ -1058,7 +1058,7 @@ input {
margin: 0 auto; margin: 0 auto;
} }
.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { .nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar a { .nav-sidebar a {
text-decoration: none; text-decoration: none;
...@@ -1089,7 +1089,7 @@ input { ...@@ -1089,7 +1089,7 @@ input {
font-weight: 600; font-weight: 600;
} }
.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar ul { .nav-sidebar ul {
padding-left: 0; padding-left: 0;
...@@ -1250,7 +1250,7 @@ input { ...@@ -1250,7 +1250,7 @@ input {
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active:not(.fly-out-top-item) li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: var(--nav-active-bg);
} }
.nav-sidebar:not(.sidebar-expanded-mobile) .context-header { .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
height: 60px; height: 60px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7