Skip to content

G
gitlab-ce
Commit 4ccdecb1 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Ruben Davila
Browse files
Options

Finish adding dark theme

parent d5b0e901
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 98 deletions
app/assets/stylesheets/framework/gitlab-theme.scss
View file @ 4ccdecb1
...@@ -2,15 +2,157 @@ ...@@ -2,15 +2,157 @@
* Styles the GitLab application with a specific color theme * Styles the GitLab application with a specific color theme
*/ */
@mixin gitlab-theme($color-200, $color-500, $color-700, $color-800, $color-900) { @mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900) {
// Header
header.navbar-gitlab-new { header.navbar-gitlab-new {
background: linear-gradient(to right, $color-900, $color-800); background: linear-gradient(to right, $color-900, $color-800);
.navbar-collapse {
color: $color-200;
}
.container-fluid {
.navbar-toggle {
border-left: 1px solid lighten($color-700, 10%);
}
}
.navbar-sub-nav,
.navbar-nav {
> li {
> a:hover,
> a:focus {
background-color: rgba($color-200, .2);
}
&.active > a,
&.dropdown.open > a {
color: $color-900;
background-color: $white-light;
svg {
fill: currentColor;
}
}
&.line-separator {
border-left: 1px solid rgba($color-200, .2);
}
}
} }
.navbar-sub-nav { .navbar-sub-nav {
color: $color-200; color: $color-200;
} }
.nav {
> li {
color: $color-200;
> a {
svg {
fill: $color-200;
}
&.header-user-dropdown-toggle {
.header-user-avatar {
border-color: $color-200;
}
}
&:hover,
&:focus {
@media (min-width: $screen-sm-min) {
background-color: rgba($color-200, .2);
}
svg {
fill: currentColor;
}
}
}
&.active > a,
&.dropdown.open > a {
color: $color-900;
&:hover {
svg {
fill: $color-900;
}
}
}
.impersonated-user,
.impersonated-user:hover {
svg {
fill: $color-900;
}
}
}
}
}
.title {
> a {
&:hover,
&:focus {
background-color: rgba($color-200, .2);
}
}
}
.search {
form {
background-color: rgba($color-200, .2);
&:hover {
background-color: rgba($color-200, .3);
}
}
.location-badge {
color: $color-100;
background-color: rgba($color-200, .1);
border-right: 1px solid $color-800;
}
.search-input::placeholder {
color: rgba($color-200, .8);
}
.search-input-wrap {
.search-icon,
.clear-icon {
color: rgba($color-200, .8);
}
}
&.search-active {
form {
background-color: $white-light;
}
.location-badge {
color: $gl-text-color;
}
.search-input-wrap {
.search-icon {
color: rgba($color-200, .8);
}
}
}
}
.btn-sign-in {
background-color: $color-100;
color: $color-900;
}
// Sidebar
.nav-sidebar li.active { .nav-sidebar li.active {
box-shadow: inset 4px 0 0 $color-700; box-shadow: inset 4px 0 0 $color-700;
...@@ -22,33 +164,18 @@ ...@@ -22,33 +164,18 @@
fill: $color-900; fill: $color-900;
} }
} }
} }
$dark-50: #fafafa;
$dark-100: #f2f2f2;
$dark-200: #dfdfdf;
$dark-300: #cccccc;
$dark-400: #bababa;
$dark-500: #a7a7a7;
$dark-600: #949494;
$dark-700: #707070;
$dark-800: #4f4f4f;
$dark-900: #2e2e2e;
$dark-950: #1f1f1f;
$indigo-200: #d1d1f0;
$indigo-500: #6666c4;
$indigo-700: #4b4ba3;
$indigo-800: #393982;
$indigo-900: #292961;
body { body {
&.ui_indigo { &.ui_indigo {
@include gitlab-theme($indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900); @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900);
} }
&.ui_dark { &.ui_dark {
@include gitlab-theme($dark-200, $dark-500, $dark-700, $dark-800, $dark-900); @include gitlab-theme($dark-100, $dark-200, $dark-500, $dark-700, $dark-800, $dark-900);
} }
} }
app/assets/stylesheets/framework/header.scss
View file @ 4ccdecb1
...@@ -111,7 +111,6 @@ header { ...@@ -111,7 +111,6 @@ header {
svg { svg {
height: 16px; height: 16px;
width: 23px; width: 23px;
fill: currentColor;
} }
} }
......
app/assets/stylesheets/framework/variables.scss
View file @ 4ccdecb1
...@@ -86,6 +86,18 @@ $indigo-800: #393982; ...@@ -86,6 +86,18 @@ $indigo-800: #393982;
$indigo-900: #292961; $indigo-900: #292961;
$indigo-950: #1a1a40; $indigo-950: #1a1a40;
$dark-50: #fafafa;
$dark-100: #f2f2f2;
$dark-200: #dfdfdf;
$dark-300: #cccccc;
$dark-400: #bababa;
$dark-500: #a7a7a7;
$dark-600: #949494;
$dark-700: #707070;
$dark-800: #4f4f4f;
$dark-900: #2e2e2e;
$dark-950: #1f1f1f;
$black: #000; $black: #000;
$black-transparent: rgba(0, 0, 0, 0.3); $black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424; $almost-black: #242424;
......
app/assets/stylesheets/new_nav.scss
View file @ 4ccdecb1
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
header.navbar-gitlab-new { header.navbar-gitlab-new {
color: $white-light; color: $white-light;
background: linear-gradient(to right, $indigo-900, $indigo-800);
border-bottom: 0; border-bottom: 0;
min-height: $new-navbar-height; min-height: $new-navbar-height;
...@@ -65,11 +64,6 @@ header.navbar-gitlab-new { ...@@ -65,11 +64,6 @@ header.navbar-gitlab-new {
fill: $white-light; fill: $white-light;
} }
} }
&:hover,
&:focus {
background-color: rgba($indigo-200, .2);
}
} }
} }
...@@ -106,7 +100,6 @@ header.navbar-gitlab-new { ...@@ -106,7 +100,6 @@ header.navbar-gitlab-new {
.navbar-collapse { .navbar-collapse {
padding-left: 0; padding-left: 0;
color: $indigo-200;
box-shadow: 0; box-shadow: 0;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
...@@ -132,7 +125,6 @@ header.navbar-gitlab-new { ...@@ -132,7 +125,6 @@ header.navbar-gitlab-new {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: currentColor; color: currentColor;
border-left: 1px solid lighten($indigo-700, 10%);
&:hover, &:hover,
&:focus, &:focus,
...@@ -167,42 +159,27 @@ header.navbar-gitlab-new { ...@@ -167,42 +159,27 @@ header.navbar-gitlab-new {
will-change: color; will-change: color;
margin: 4px 2px; margin: 4px 2px;
padding: 6px 8px; padding: 6px 8px;
color: $indigo-200;
height: 32px; height: 32px;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
padding: 0; padding: 0;
} }
svg {
fill: $indigo-200;
}
&.header-user-dropdown-toggle { &.header-user-dropdown-toggle {
margin-left: 2px; margin-left: 2px;
.header-user-avatar { .header-user-avatar {
border-color: $indigo-200;
margin-right: 0; margin-right: 0;
} }
} }
}
.header-new-dropdown-toggle {
margin-right: 0;
}
> a:hover, &:hover,
> a:focus { &:focus {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
opacity: 1; opacity: 1;
color: $white-light; color: $white-light;
@media (min-width: $screen-sm-min) {
background-color: rgba($indigo-200, .2);
}
svg { svg {
fill: currentColor; fill: currentColor;
} }
...@@ -213,6 +190,11 @@ header.navbar-gitlab-new { ...@@ -213,6 +190,11 @@ header.navbar-gitlab-new {
} }
} }
} }
}
.header-new-dropdown-toggle {
margin-right: 0;
}
.impersonated-user, .impersonated-user,
.impersonated-user:hover { .impersonated-user:hover {
...@@ -220,10 +202,6 @@ header.navbar-gitlab-new { ...@@ -220,10 +202,6 @@ header.navbar-gitlab-new {
background-color: $white-light; background-color: $white-light;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
svg {
fill: $indigo-900;
}
} }
.impersonation-btn, .impersonation-btn,
...@@ -241,7 +219,6 @@ header.navbar-gitlab-new { ...@@ -241,7 +219,6 @@ header.navbar-gitlab-new {
&.active > a, &.active > a,
&.dropdown.open > a { &.dropdown.open > a {
color: $indigo-900;
background-color: $white-light; background-color: $white-light;
svg { svg {
...@@ -273,17 +250,6 @@ header.navbar-gitlab-new { ...@@ -273,17 +250,6 @@ header.navbar-gitlab-new {
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
color: $white-light; color: $white-light;
background-color: rgba($indigo-200, .2);
svg {
fill: currentColor;
}
}
&.active > a,
&.dropdown.open > a {
color: $indigo-900;
background-color: $white-light;
svg { svg {
fill: currentColor; fill: currentColor;
...@@ -308,7 +274,6 @@ header.navbar-gitlab-new { ...@@ -308,7 +274,6 @@ header.navbar-gitlab-new {
} }
&.line-separator { &.line-separator {
border-left: 1px solid rgba($indigo-200, .2);
margin: 8px; margin: 8px;
} }
} }
...@@ -338,17 +303,14 @@ header.navbar-gitlab-new { ...@@ -338,17 +303,14 @@ header.navbar-gitlab-new {
height: 32px; height: 32px;
border: 0; border: 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
background-color: rgba($indigo-200, .2);
transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
&:hover { &:hover {
background-color: rgba($indigo-200, .3);
box-shadow: none; box-shadow: none;
} }
} }
&.search-active form { &.search-active form {
background-color: $white-light;
box-shadow: none; box-shadow: none;
.search-input { .search-input {
...@@ -376,43 +338,26 @@ header.navbar-gitlab-new { ...@@ -376,43 +338,26 @@ header.navbar-gitlab-new {
} }
.search-input::placeholder { .search-input::placeholder {
color: rgba($indigo-200, .8);
transition: color ease-in-out 0.15s; transition: color ease-in-out 0.15s;
} }
.location-badge { .location-badge {
font-size: 12px; font-size: 12px;
color: $indigo-100;
background-color: rgba($indigo-200, .1);
will-change: color;
margin: -4px 4px -4px -4px; margin: -4px 4px -4px -4px;
line-height: 25px; line-height: 25px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
border-right: 1px solid $indigo-800;
height: 32px; height: 32px;
transition: border-color ease-in-out 0.15s; transition: border-color ease-in-out 0.15s;
} }
.search-input-wrap {
.search-icon,
.clear-icon {
color: rgba($indigo-200, .8);
}
}
&.search-active { &.search-active {
.location-badge { .location-badge {
color: $gl-text-color;
background-color: $nav-badge-bg; background-color: $nav-badge-bg;
border-color: $border-color; border-color: $border-color;
} }
.search-input-wrap { .search-input-wrap {
.search-icon {
color: rgba($indigo-200, .8);
}
.clear-icon { .clear-icon {
color: $white-light; color: $white-light;
} }
...@@ -526,8 +471,6 @@ header.navbar-gitlab-new { ...@@ -526,8 +471,6 @@ header.navbar-gitlab-new {
.btn-sign-in { .btn-sign-in {
margin-top: 3px; margin-top: 3px;
background-color: $indigo-100;
color: $indigo-900;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
&:hover { &:hover {
......
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