diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index ca47c70d4ce..33da77e84ca 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -129,16 +129,16 @@ td.flaggers td { } .admin-controls { - background-color: dark-light-diff($primary, $secondary, 90%, -75%); + background-color: dark-light-diff($primary, $secondary, 90%, -65%); padding: 10px 10px 3px 0; @include clearfix; .nav.nav-pills { li.active { a { - border-color: dark-light-diff($primary, $secondary, 90%, -60%); - background-color: lighten($primary, 40%); + border-color: dark-light-diff($primary, $secondary, 90%, -90%); + background-color: dark-light-diff($primary, $secondary, 40%, -10%); &:hover { - background-color: lighten($primary, 40%); + background-color: dark-light-diff($primary, $secondary, 40%, -10%); } } } @@ -1113,7 +1113,7 @@ table.api-keys { .content-list { h3 { - color: dark-light-diff($primary, $secondary, 50%, -60%); + color: dark-light-diff($primary, $secondary, 50%, -20%); font-size: 1.071em; padding-left: 5px; margin-bottom: 10px; diff --git a/app/assets/stylesheets/common/base/code_highlighting.scss b/app/assets/stylesheets/common/base/code_highlighting.scss index 02aa19e7274..c5fe8d617c6 100644 --- a/app/assets/stylesheets/common/base/code_highlighting.scss +++ b/app/assets/stylesheets/common/base/code_highlighting.scss @@ -7,7 +7,7 @@ github.com style (c) Vasily Polovnyov .hljs { display: block; padding: 0.5em; - color: #333; + color: dark-light-choose(#333, #f8f8f8); } .hljs-comment, @@ -26,7 +26,7 @@ github.com style (c) Vasily Polovnyov .hljs-subst, .hljs-request, .hljs-status { - color: #333; + color: dark-light-choose(#333, #f8f8f8); font-weight: bold; } @@ -40,7 +40,7 @@ github.com style (c) Vasily Polovnyov .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula { - color: #d14; + color: dark-light-choose(#d14, #f66); } .hljs-title, @@ -70,14 +70,14 @@ github.com style (c) Vasily Polovnyov .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword { - color: #000080; + color: dark-light-choose(#000080, #99f); font-weight: normal; } .hljs-attribute, .hljs-variable, .lisp .hljs-body { - color: #008080; + color: dark-light-choose(#008080, #0ee); } .hljs-regexp { @@ -132,8 +132,8 @@ github.com style (c) Vasily Polovnyov */ p > code, li > code, pre > code { - color: #333; - background: #f8f8f8; + color: dark-light-choose(#333, #f8f8f8); + background: dark-light-choose(#f8f8f8, #333); } // removed some unnecessary styles here diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 43da67c1e50..ce6ca6682c3 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -32,8 +32,8 @@ small { blockquote { - background-color: dark-light-diff($primary, $secondary, 97%, -45%); - border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%); + border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%); + background-color: dark-light-diff($primary, $secondary, 97%, -65%); overflow: hidden; clear: both; } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index ec590ae39c6..0013fab8cd2 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -50,8 +50,8 @@ aside.quote { .badge-wrapper { margin-left: 5px; } .title { - border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%); - background-color: dark-light-diff($primary, $secondary, 97%, -45%); + border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%); + background-color: dark-light-diff($primary, $secondary, 97%, -65%); color: scale-color($primary, $lightness: 30%); // IE will screw up the blockquote underneath if bottom padding is 0px padding: 12px 12px 1px 12px; @@ -113,8 +113,8 @@ aside.quote { .quote-button { display: none; position: absolute; - background-color: scale-color($primary, $lightness: 50%); - color: $secondary; + background-color: dark-light-diff($primary, $secondary, 50%, -50%); + color: dark-light-choose($secondary, $primary); padding: 10px; z-index: 401; @@ -124,7 +124,7 @@ aside.quote { } &:hover { - background-color: scale-color($primary, $lightness: 40%); + background-color: dark-light-diff($primary, $secondary, 40%, -40%); cursor: pointer; } } diff --git a/app/assets/stylesheets/common/components/buttons.css.scss b/app/assets/stylesheets/common/components/buttons.css.scss index 2821356313a..f55ff6d34e3 100644 --- a/app/assets/stylesheets/common/components/buttons.css.scss +++ b/app/assets/stylesheets/common/components/buttons.css.scss @@ -73,17 +73,16 @@ .btn-primary { border: none; - color: $secondary; font-weight: normal; - color: #fff; - background: $tertiary; + color: dark-light-choose($primary, scale-color($primary, $lightness: 60%)); + background: dark-light-choose($tertiary, $tertiary); &[href] { color: $secondary; } &:hover { color: #fff; - background: scale-color($tertiary, $lightness: -20%); + background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%)); } &:active { @include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%)); diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 01e77684b36..0c51ce420a6 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -42,3 +42,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default; @return scale-color($adjusted-color, $lightness: $darkness); } } +@function dark-light-choose($light-theme-result, $dark-theme-result) { + @if brightness($primary) < brightness($secondary) { + @return $light-theme-result; + } @else { + @return $dark-theme-result; + } +}