Skip to content

G
gitlab-ce
Commit 6e76e153 authored by Simon Knox's avatar Simon Knox
Browse files
Options

Consoliate location of dark mode rule overrides 

These were split between two files before, making them
harder to manage and occasionally meaning they were overridden
by app styles. This is a simple way to fix that
parent addb2599
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 133 deletions
app/assets/stylesheets/application_dark.scss
View file @ 6e76e153
...@@ -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 @ 6e76e153
...@@ -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;
} }
...@@ -1618,6 +1615,95 @@ svg.s16 { ...@@ -1618,6 +1615,95 @@ svg.s16 {
.avatar.s32 { .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;
} }
...@@ -1827,9 +1913,6 @@ body.gl-dark { ...@@ -1827,9 +1913,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 @ 6e76e153
...@@ -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 @ 6e76e153
@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 @ 6e76e153
...@@ -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;
} }
...@@ -1618,6 +1615,95 @@ svg.s16 { ...@@ -1618,6 +1615,95 @@ svg.s16 {
.avatar.s32 { .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;
} }
...@@ -1827,9 +1913,6 @@ body.gl-dark { ...@@ -1827,9 +1913,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