Skip to content

G
gitlab-ce
Commit e227d47a authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch '322680-dark-mode' into 'master' 

Updated sidepanel in Dark mode [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!64182
parents 4ebbb004 267fdbf7
Show whitespace changes
Inline Side-by-side
Showing with 280 additions and 38 deletions
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
View file @ e227d47a
......@@ -13,13 +13,49 @@ $top-level-item-color: $purple-900;
box-shadow: none;
}
&.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid $border-color;
}
&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
color: $white;
}
&.gl-dark .nav-sidebar li a,
&.gl-dark .toggle-sidebar-button .collapse-text,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title {
&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
color: $gray-darkest;
}
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
@include gl-mt-0;
}
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
background: $white;
color: $gray-darkest;
&::before {
border-right-color: $white;
}
}
&.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: $white;
}
&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
......@@ -183,7 +219,7 @@ $top-level-item-color: $purple-900;
.avatar.s32 {
@extend .rect-avatar.s32;
color: $gray-900;
//color: $gray-900;
box-shadow: $avatar-box-shadow;
}
}
......@@ -226,7 +262,7 @@ $top-level-item-color: $purple-900;
color: $white;
@if $has-sub-items {
@include gl-mt-n2;
@include gl-mt-0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} @else {
......@@ -244,13 +280,13 @@ $top-level-item-color: $purple-900;
content: '';
display: block;
top: 50%;
left: $gl-spacing-scale-3/-2;
margin-top: -$gl-spacing-scale-3;
left: -$gl-spacing-scale-2;
margin-top: -$gl-spacing-scale-2;
width: 0;
height: 0;
border-top: $gl-spacing-scale-3 solid transparent;
border-bottom: $gl-spacing-scale-3 solid transparent;
border-right: $gl-spacing-scale-3 solid $black;
border-top: $gl-spacing-scale-2 solid transparent;
border-bottom: $gl-spacing-scale-2 solid transparent;
border-right: $gl-spacing-scale-2 solid $black;
}
}
}
......@@ -356,6 +392,8 @@ $top-level-item-color: $purple-900;
}
a.has-sub-items + .sidebar-sub-level-items {
@include gl-mt-n2;
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: true);
}
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ e227d47a
......@@ -1240,6 +1240,18 @@ input {
body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid #404040;
}
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar li a,
body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring.gl-dark
......@@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-top: 0;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
background: #333;
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
border-right-color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: #333;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
......@@ -1482,12 +1576,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
margin-top: -0.25rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #fff;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
......@@ -1523,7 +1623,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -1691,7 +1791,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
......@@ -1732,7 +1831,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
......
app/assets/stylesheets/startup/startup-general.scss
View file @ e227d47a
......@@ -1444,12 +1444,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
margin-top: -0.25rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #000;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #000;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
......@@ -1485,7 +1491,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -1653,7 +1659,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
......@@ -1694,7 +1699,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
......
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ e227d47a
......@@ -1240,6 +1240,18 @@ input {
body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
box-shadow: none;
border: 1px solid #404040;
}
body.sidebar-refactoring.gl-dark
.sidebar-top-level-items
.context-header
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar li a,
body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
body.sidebar-refactoring.gl-dark
......@@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark
.nav-sidebar-inner-scroll
> div.context-header
a
.sidebar-context-title {
.sidebar-context-title,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-top: 0;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
background: #333;
color: #c4c4c4;
}
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring.gl-dark
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
border-right-color: #333;
}
body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
background-color: #333;
}
body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
......@@ -1482,12 +1576,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
margin-top: -0.25rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #fff;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
......@@ -1523,7 +1623,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -1691,7 +1791,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
......@@ -1732,7 +1831,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #fafafa;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
body.sidebar-refactoring
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ e227d47a
......@@ -1444,12 +1444,18 @@ body.sidebar-refactoring
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
margin-top: -0.25rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #000;
border-top: 0.25rem solid transparent;
border-bottom: 0.25rem solid transparent;
border-right: 0.25rem solid #000;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items {
margin-top: -0.25rem;
}
body.sidebar-refactoring
.nav-sidebar
......@@ -1485,7 +1491,7 @@ body.sidebar-refactoring
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-top: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
......@@ -1653,7 +1659,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
......@@ -1694,7 +1699,6 @@ body.sidebar-refactoring
a
.avatar-container.rect-avatar
.avatar.s32 {
color: #303030;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
body.sidebar-refactoring
......
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