Commit d5b0e901 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Ruben Davila

Start CSS for dark theme

parent 3c815f97
/** /**
* Styles the GitLab application with a specific color theme * Styles the GitLab application with a specific color theme
*
* $color-light -
* $color -
* $color-darker -
* $color-dark -
*/ */
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
@mixin gitlab-theme($color-200, $color-500, $color-700, $color-800, $color-900) {
header.navbar-gitlab-new { header.navbar-gitlab-new {
background: linear-gradient(to right, $color-darker, $color); background: linear-gradient(to right, $color-900, $color-800);
}
.page-with-sidebar {
.toggle-nav-collapse,
.pin-nav-btn {
color: $color-light;
&:hover {
color: $white-light;
}
}
.sidebar-wrapper {
background: $color-darker;
}
.sidebar-action-buttons {
color: $color-light;
background-color: lighten($color-darker, 5%);
}
.nav-sidebar {
li {
a {
color: $color-light;
&:hover,
&:focus,
&:active {
background: $color-dark;
} }
i { .navbar-sub-nav {
color: $color-light; color: $color-200;
} }
path, .nav-sidebar li.active {
polygon { box-shadow: inset 4px 0 0 $color-700;
fill: $color-light;
}
.count { > a {
color: $color-light; color: $color-900;
background: $color-dark;
} }
svg { svg {
position: relative; fill: $color-900;
top: 3px;
}
}
&.separate-item {
border-top: 1px solid $color;
}
&.active a {
color: $white-light;
background: $color-dark;
&.no-highlight {
border: none;
}
i {
color: $white-light;
}
path,
polygon {
fill: $white-light;
}
} }
} }
.about-gitlab {
color: $color-light;
}
}
}
} }
$theme-black-light: #979797; $dark-50: #fafafa;
$theme-black: #373737; $dark-100: #f2f2f2;
$theme-black-dark: #272727; $dark-200: #dfdfdf;
$theme-black-darker: #222; $dark-300: #cccccc;
$dark-400: #bababa;
$theme-indigo-light: #98c; $dark-500: #a7a7a7;
$theme-indigo: #548; $dark-600: #949494;
$theme-indigo-dark: #436; $dark-700: #707070;
$theme-indigo-darker: #325; $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($theme-indigo-light, $theme-indigo, $theme-indigo-dark, $theme-indigo-darker); @include gitlab-theme($indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900);
} }
&.ui_dark { &.ui_dark {
@include gitlab-theme($theme-black-light, $theme-black, $theme-black-dark, $theme-black-darker); @include gitlab-theme($dark-200, $dark-500, $dark-700, $dark-800, $dark-900);
} }
} }
...@@ -256,7 +256,6 @@ header.navbar-gitlab-new { ...@@ -256,7 +256,6 @@ header.navbar-gitlab-new {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
margin: 0 0 0 6px; margin: 0 0 0 6px;
color: $indigo-200;
.dropdown-chevron { .dropdown-chevron {
position: relative; position: relative;
......
...@@ -154,16 +154,9 @@ $new-sidebar-collapsed-width: 50px; ...@@ -154,16 +154,9 @@ $new-sidebar-collapsed-width: 50px;
} }
li.active { li.active {
box-shadow: inset 4px 0 0 $active-border;
> a { > a {
color: $active-color;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
} }
svg {
fill: $active-color;
}
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
......
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