Skip to content

G
gitlab-ce
Commit 588c897c authored by Simon Knox's avatar Simon Knox
Browse files
Options

Merge branch 'psi-dark-overides' into 'master' 

Consolidate location of dark mode rule overrides

See merge request gitlab-org/gitlab!71352
parents c75eab8b 6e76e153
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 133 deletions
app/assets/stylesheets/application_dark.scss
View file @ 588c897c
...@@ -2,74 +2,4 @@ ...@@ -2,74 +2,4 @@
@import './application'; @import './application';
@import './themes/theme_helper'; @import './themes/dark_mode_overrides';
body.gl-dark {
@include gitlab-theme(
$gray-900,
$gray-400,
$gray-500,
$gray-800,
$gray-900,
$white
);
.logo-text svg {
fill: var(--gl-text-color);
}
.navbar-gitlab {
background-color: var(--gray-50);
box-shadow: 0 1px 0 0 var(--gray-100);
.navbar-sub-nav,
.navbar-nav {
li {
> a:hover,
> a:focus,
> button:hover,
> button:focus {
color: var(--gl-text-color);
background-color: var(--gray-200);
}
}
li.active,
li.dropdown.show {
> a,
> button {
color: var(--gl-text-color);
background-color: var(--gray-200);
}
}
}
.header-search {
background-color: var(--gray-100) !important;
box-shadow: inset 0 0 0 1px var(--border-color) !important;
&:active,
&:hover {
background-color: var(--gray-100) !important;
box-shadow: inset 0 0 0 1px var(--blue-200) !important;
}
}
.search {
form {
background-color: var(--gray-100);
box-shadow: inset 0 0 0 1px var(--border-color);
&:active,
&:hover {
background-color: var(--gray-100);
box-shadow: inset 0 0 0 1px var(--blue-200);
}
}
}
}
.md :not(pre.code) > code {
background-color: $gray-200;
}
}
app/assets/stylesheets/startup/startup-dark.scss
View file @ 588c897c
...@@ -16,9 +16,6 @@ body.gl-dark { ...@@ -16,9 +16,6 @@ body.gl-dark {
--border-color: #4f4f4f; --border-color: #4f4f4f;
--black: #fff; --black: #fff;
} }
.nav-sidebar li.active {
box-shadow: none;
}
:root { :root {
--white: #333; --white: #333;
} }
...@@ -1610,6 +1607,95 @@ svg.s16 { ...@@ -1610,6 +1607,95 @@ svg.s16 {
.rect-avatar.s32 { .rect-avatar.s32 {
border-radius: 4px; border-radius: 4px;
} }
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
--green-300: #217645;
--green-400: #108548;
--green-500: #2da160;
--green-600: #52b87a;
--green-700: #91d4a8;
--green-800: #c3e6cd;
--green-900: #ecf4ee;
--green-950: #f1fdf6;
--blue-50: #033464;
--blue-100: #064787;
--blue-200: #0b5cad;
--blue-300: #1068bf;
--blue-400: #1f75cb;
--blue-500: #428fdc;
--blue-600: #63a6e9;
--blue-700: #9dc7f1;
--blue-800: #cbe2f9;
--blue-900: #e9f3fc;
--blue-950: #f2f9ff;
--orange-50: #5c2900;
--orange-100: #703800;
--orange-200: #8f4700;
--orange-300: #9e5400;
--orange-400: #ab6100;
--orange-500: #c17d10;
--orange-600: #d99530;
--orange-700: #e9be74;
--orange-800: #f5d9a8;
--orange-900: #fdf1dd;
--orange-950: #fff4e1;
--red-50: #660e00;
--red-100: #8d1300;
--red-200: #ae1800;
--red-300: #c91c00;
--red-400: #dd2b0e;
--red-500: #ec5941;
--red-600: #f57f6c;
--red-700: #fcb5aa;
--red-800: #fdd4cd;
--red-900: #fcf1ef;
--red-950: #fff4f3;
--indigo-50: #1a1a40;
--indigo-100: #292961;
--indigo-200: #393982;
--indigo-300: #4b4ba3;
--indigo-400: #5b5bbd;
--indigo-500: #6666c4;
--indigo-600: #7c7ccc;
--indigo-700: #a6a6de;
--indigo-800: #d1d1f0;
--indigo-900: #ebebfa;
--indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150;
--purple-100: #2f2a6b;
--purple-200: #453894;
--purple-300: #5943b6;
--purple-400: #694cc0;
--purple-500: #7b58cf;
--purple-600: #9475db;
--purple-700: #ac93e6;
--purple-800: #cbbbf2;
--purple-900: #e1d8f9;
--purple-950: #f4f0ff;
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
--svg-status-bg: #333;
}
.nav-sidebar li.active {
box-shadow: none;
}
body.gl-dark .navbar-gitlab { body.gl-dark .navbar-gitlab {
background-color: #fafafa; background-color: #fafafa;
} }
...@@ -1819,9 +1905,6 @@ body.gl-dark { ...@@ -1819,9 +1905,6 @@ body.gl-dark {
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
} }
.nav-sidebar li.active {
box-shadow: none;
}
.tab-width-8 { .tab-width-8 {
-moz-tab-size: 8; -moz-tab-size: 8;
tab-size: 8; tab-size: 8;
......
app/assets/stylesheets/themes/_dark.scss
View file @ 588c897c
...@@ -257,53 +257,3 @@ $line-removed-dark: $red-200; ...@@ -257,53 +257,3 @@ $line-removed-dark: $red-200;
$well-expand-item: $gray-200; $well-expand-item: $gray-200;
$well-inner-border: $gray-200; $well-inner-border: $gray-200;
// Misc component overrides that should live elsewhere
.gl-label {
filter: brightness(0.9) contrast(1.1);
// This applies to the gl-label markups
// rendered and cached in the backend (labels_helper.rb)
&.gl-label-scoped {
.gl-label-text-scoped,
.gl-label-close {
color: $gray-900;
}
}
}
// white-ish text for light labels
.gl-label-text-light.gl-label-text-light {
color: $gray-900;
}
.gl-label-text-dark.gl-label-text-dark {
color: $gray-10;
}
// This applies to "gl-labels" from "gitlab-ui"
.gl-label.gl-label-scoped.gl-label-text-dark,
.gl-label.gl-label-scoped.gl-label-text-light {
.gl-label-text-scoped,
.gl-label-close {
color: $gray-900;
}
}
// duplicated class as the original .atwho-view style is added later
.atwho-view.atwho-view {
background-color: $white;
color: $gray-900;
border-color: $gray-800;
}
.nav-sidebar {
li.active {
box-shadow: none;
}
.sidebar-sub-level-items.fly-out-list {
box-shadow: none;
border: 1px solid $border-color;
}
}
app/assets/stylesheets/themes/dark_mode_overrides.scss 0 → 100644
View file @ 588c897c
@import './themes/dark';
@import 'page_bundles/mixins_and_variables_and_functions';
@import './themes/theme_helper';
// Some hacks and overrides for things that don't properly support dark mode
.gl-label {
filter: brightness(0.9) contrast(1.1);
// This applies to the gl-label markups
// rendered and cached in the backend (labels_helper.rb)
&.gl-label-scoped {
.gl-label-text-scoped,
.gl-label-close {
color: $gray-900;
}
}
}
// white-ish text for light labels
.gl-label-text-light.gl-label-text-light {
color: $gray-900;
}
.gl-label-text-dark.gl-label-text-dark {
color: $gray-10;
}
// This applies to "gl-labels" from "gitlab-ui"
.gl-label.gl-label-scoped.gl-label-text-dark,
.gl-label.gl-label-scoped.gl-label-text-light {
.gl-label-text-scoped,
.gl-label-close {
color: $gray-900;
}
}
// duplicated class as the original .atwho-view style is added later
.atwho-view.atwho-view {
background-color: $white;
color: $gray-900;
border-color: $gray-800;
}
.nav-sidebar {
li.active {
box-shadow: none;
}
.sidebar-sub-level-items.fly-out-list {
box-shadow: none;
border: 1px solid $border-color;
}
}
body.gl-dark {
@include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white);
.logo-text svg {
fill: var(--gl-text-color);
}
.navbar-gitlab {
background-color: var(--gray-50);
box-shadow: 0 1px 0 0 var(--gray-100);
.navbar-sub-nav,
.navbar-nav {
li {
> a:hover,
> a:focus,
> button:hover,
> button:focus {
color: var(--gl-text-color);
background-color: var(--gray-200);
}
}
li.active,
li.dropdown.show {
> a,
> button {
color: var(--gl-text-color);
background-color: var(--gray-200);
}
}
}
.header-search {
background-color: var(--gray-100) !important;
box-shadow: inset 0 0 0 1px var(--border-color) !important;
&:active,
&:hover {
background-color: var(--gray-100) !important;
box-shadow: inset 0 0 0 1px var(--blue-200) !important;
}
}
.search {
form {
background-color: var(--gray-100);
box-shadow: inset 0 0 0 1px var(--border-color);
&:active,
&:hover {
background-color: var(--gray-100);
box-shadow: inset 0 0 0 1px var(--blue-200);
}
}
}
}
.md :not(pre.code) > code {
background-color: $gray-200;
}
}
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ 588c897c
...@@ -16,9 +16,6 @@ body.gl-dark { ...@@ -16,9 +16,6 @@ body.gl-dark {
--border-color: #4f4f4f; --border-color: #4f4f4f;
--black: #fff; --black: #fff;
} }
.nav-sidebar li.active {
box-shadow: none;
}
:root { :root {
--white: #333; --white: #333;
} }
...@@ -1610,6 +1607,95 @@ svg.s16 { ...@@ -1610,6 +1607,95 @@ svg.s16 {
.rect-avatar.s32 { .rect-avatar.s32 {
border-radius: 4px; border-radius: 4px;
} }
body.gl-dark {
--gray-10: #1f1f1f;
--gray-50: #303030;
--gray-100: #404040;
--gray-200: #525252;
--gray-300: #5e5e5e;
--gray-400: #868686;
--gray-500: #999;
--gray-600: #bfbfbf;
--gray-700: #dbdbdb;
--gray-800: #f0f0f0;
--gray-900: #fafafa;
--gray-950: #fff;
--green-50: #0a4020;
--green-100: #0d532a;
--green-200: #24663b;
--green-300: #217645;
--green-400: #108548;
--green-500: #2da160;
--green-600: #52b87a;
--green-700: #91d4a8;
--green-800: #c3e6cd;
--green-900: #ecf4ee;
--green-950: #f1fdf6;
--blue-50: #033464;
--blue-100: #064787;
--blue-200: #0b5cad;
--blue-300: #1068bf;
--blue-400: #1f75cb;
--blue-500: #428fdc;
--blue-600: #63a6e9;
--blue-700: #9dc7f1;
--blue-800: #cbe2f9;
--blue-900: #e9f3fc;
--blue-950: #f2f9ff;
--orange-50: #5c2900;
--orange-100: #703800;
--orange-200: #8f4700;
--orange-300: #9e5400;
--orange-400: #ab6100;
--orange-500: #c17d10;
--orange-600: #d99530;
--orange-700: #e9be74;
--orange-800: #f5d9a8;
--orange-900: #fdf1dd;
--orange-950: #fff4e1;
--red-50: #660e00;
--red-100: #8d1300;
--red-200: #ae1800;
--red-300: #c91c00;
--red-400: #dd2b0e;
--red-500: #ec5941;
--red-600: #f57f6c;
--red-700: #fcb5aa;
--red-800: #fdd4cd;
--red-900: #fcf1ef;
--red-950: #fff4f3;
--indigo-50: #1a1a40;
--indigo-100: #292961;
--indigo-200: #393982;
--indigo-300: #4b4ba3;
--indigo-400: #5b5bbd;
--indigo-500: #6666c4;
--indigo-600: #7c7ccc;
--indigo-700: #a6a6de;
--indigo-800: #d1d1f0;
--indigo-900: #ebebfa;
--indigo-950: #f7f7ff;
--indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
--purple-50: #232150;
--purple-100: #2f2a6b;
--purple-200: #453894;
--purple-300: #5943b6;
--purple-400: #694cc0;
--purple-500: #7b58cf;
--purple-600: #9475db;
--purple-700: #ac93e6;
--purple-800: #cbbbf2;
--purple-900: #e1d8f9;
--purple-950: #f4f0ff;
--gl-text-color: #fafafa;
--border-color: #4f4f4f;
--white: #333;
--black: #fff;
--svg-status-bg: #333;
}
.nav-sidebar li.active {
box-shadow: none;
}
body.gl-dark .navbar-gitlab { body.gl-dark .navbar-gitlab {
background-color: #fafafa; background-color: #fafafa;
} }
...@@ -1819,9 +1905,6 @@ body.gl-dark { ...@@ -1819,9 +1905,6 @@ body.gl-dark {
--black: #fff; --black: #fff;
--svg-status-bg: #333; --svg-status-bg: #333;
} }
.nav-sidebar li.active {
box-shadow: none;
}
.tab-width-8 { .tab-width-8 {
-moz-tab-size: 8; -moz-tab-size: 8;
tab-size: 8; tab-size: 8;
......
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