gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(style): changed colors for dark-mode (#16404)

Browse Source
This commit is contained in:
Chloe Collier
2018-01-03 22:39:19 -08:00
committed by mrugesh mohapatra
parent a5a75ca9f9
commit 5f65f04ba4
4 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/less/code-mirror.less
View File

@ -34,4 +34,4 @@
.CodeMirror-lint-tooltip { .CodeMirror-lint-tooltip {
z-index: 9999; z-index: 9999;
} }

4
client/less/lib/bootstrap/variables.less
View File

@ -14,6 +14,7 @@
@gray: lighten(@gray-base, 33.5%); // #555 @gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777 @gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee @gray-lighter: lighten(@gray-base, 93.5%); // #eee
@silver-chalice: lighten(@gray-base, 45%); // #a6a6a6
@brand-primary: darkgreen; @brand-primary: darkgreen;
@brand-success: #457E86; @brand-success: #457E86;
@ -41,7 +42,8 @@
//## Night mode styles //## Night mode styles
@night-body-bg: @gray-dark; @night-body-bg: @gray-dark;
@night-text-color: #ccc; @night-text-color: #ccc;
@night-search-color: #044421;
//== Typography //== Typography
// //

23
common/app/Nav/nav.less
View File

@ -153,6 +153,28 @@ li.nav-avatar {
} }
.night { .night {
.nav-component-wrapper {
::-webkit-input-placeholder {
color: @night-text-color;
}
::-moz-placeholder {
color: @night-text-color;
}
::-ms-placeholder {
color: @night-text-color;
}
::placeholder {
color: @night-text-color;
}
.fcc_input {
background-color: @night-search-color;
color: @night-text-color;
}
}
.navbar-default { .navbar-default {
.navbar-nav { .navbar-nav {
& > li > a { & > li > a {
@ -230,7 +252,6 @@ li.nav-avatar {
align-items: center; align-items: center;
margin-right: 10px; margin-right: 10px;
} }
} }
.logo-glyph { .logo-glyph {

8
common/app/routes/Challenges/challenges.less
View File

@ -98,10 +98,10 @@
color: #02a902; color: #02a902;
} }
.@{ns}-editor .CodeMirror { .@{ns}-editor .CodeMirror {
background-color:#242424; background-color:@night-body-bg;
color:#ABABAB; color:#ABABAB;
&-gutters { &-gutters {
background-color:#242424; background-color:@night-body-bg;
color:#ABABAB; color:#ABABAB;
} }
.cm-bracket, .cm-tag { .cm-bracket, .cm-tag {
@ -113,6 +113,9 @@
.cm-keyword, .cm-attribute { .cm-keyword, .cm-attribute {
color:#9BBBDC; color:#9BBBDC;
} }
&-line {
caret-color:#ABABAB;
}
} }
.refresh-icon { .refresh-icon {
color: @icon-light-gray; color: @icon-light-gray;
@ -212,6 +215,7 @@
.@{ns}-preview { .@{ns}-preview {
.max-element-height(); .max-element-height();
width: 100%; width: 100%;
background-color: @silver-chalice;
} }
.@{ns}-preview-frame { .@{ns}-preview-frame {