From 7147c0e8af480ea461181776fad726bcca11b65e Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:10:54 -0700 Subject: [PATCH 01/12] DEV: Replace sqrt() implementation with lib Copied the needed functions out of https://github.com/terkel/mathsass MIT license --- .../stylesheets/common/foundation/math.scss | 165 ++++++++++++++++++ .../common/foundation/variables.scss | 25 +-- lib/sass/discourse_sass_compiler.rb | 6 + 3 files changed, 172 insertions(+), 24 deletions(-) create mode 100644 app/assets/stylesheets/common/foundation/math.scss diff --git a/app/assets/stylesheets/common/foundation/math.scss b/app/assets/stylesheets/common/foundation/math.scss new file mode 100644 index 00000000000..f7132c42708 --- /dev/null +++ b/app/assets/stylesheets/common/foundation/math.scss @@ -0,0 +1,165 @@ +// This file: +// Copyright (c) 2013 Takeru Suzuki +// Licensed under the MIT license. +// https://github.com/terkel/mathsass + +// Constants +$E: 2.718281828459045; +$PI: 3.141592653589793; +$LN2: 0.6931471805599453; +$SQRT2: 1.4142135623730951; + +@function error($message) { + @warn "#{_error("The direction used does not exist")}"; + @return null; +} + +// Returns the factorial of a non-negative integer. +// @param {Number} $x A non-negative integer. +// @return {Number} +// @example +// fact(0) // 1 +// fact(8) // 40320 +@function fact ($x) { + @if $x < 0 or $x != floor($x) { + @warn "Argument for `fact()` must be a positive integer."; + @return null; + } + $ret: 1; + @while $x > 0 { + $ret: $ret * $x; + $x: $x - 1; + } + @return $ret; +} + + +// Returns a two-element list containing the normalized fraction and exponent of number. +// @param {Number} $x +// @return {List} fraction, exponent +@function frexp ($x) { + $exp: 0; + @if $x < 0 { + $x: $x * -1; + } + @if $x < 0.5 { + @while $x < 0.5 { + $x: $x * 2; + $exp: $exp - 1; + } + } @else if $x >= 1 { + @while $x >= 1 { + $x: $x / 2; + $exp: $exp + 1; + } + } + @return $x, $exp; +} + +// Returns $x * 2^$exp +// @param {Number} $x +// @param {Number} $exp +@function ldexp ($x, $exp) { + $b: if($exp >= 0, 2, 1 / 2); + @if $exp < 0 { + $exp: $exp * -1; + } + @while $exp > 0 { + @if $exp % 2 == 1 { + $x: $x * $b; + } + $b: $b * $b; + $exp: floor($exp * 0.5); + } + @return $x; +} + +// Returns the natural logarithm of a number. +// @param {Number} $x +// @example +// log(2) // 0.69315 +// log(10) // 2.30259 +@function log ($x) { + @if $x <= 0 { + @return 0 / 0; + } + $k: nth(frexp($x / $SQRT2), 2); + $x: $x / ldexp(1, $k); + $x: ($x - 1) / ($x + 1); + $x2: $x * $x; + $i: 1; + $s: $x; + $sp: null; + @while $sp != $s { + $x: $x * $x2; + $i: $i + 2; + $sp: $s; + $s: $s + $x / $i; + } + @return $LN2 * $k + 2 * $s; +} + +@function ipow($base, $exp) { + @if $exp != floor($exp) { + @return error("Exponent for `ipow()` must be an integer."); + } + $r: 1; + $s: 0; + @if $exp < 0 { + $exp: $exp * -1; + $s: 1; + } + @while $exp > 0 { + @if $exp % 2 == 1 { + $r: $r * $base; + } + $exp: floor($exp * 0.5); + $base: $base * $base; + } + @return if($s != 0, 1 / $r, $r); +} + +// Returns E^x, where x is the argument, and E is Euler's constant, the base of the natural logarithms. +// @param {Number} $x +// @example +// exp(1) // 2.71828 +// exp(-1) // 0.36788 +@function exp ($x) { + $ret: 0; + @for $n from 0 to 24 { + $ret: $ret + ipow($x, $n) / fact($n); + } + @return $ret; +} + +// Returns base to the exponent power. +// @param {Number} $base The base number +// @param {Number} $exp The exponent to which to raise base +// @return {Number} +// @example +// pow(4, 2) // 16 +// pow(4, -2) // 0.0625 +// pow(4, 0.2) // 1.31951 +@function pow ($base, $exp) { + @if $exp == floor($exp) { + @return ipow($base, $exp); + } @else { + @return exp(log($base) * $exp); + } +} + +// Returns the square root of a number. +// @param {Number} $x +// @example +// sqrt(2) // 1.41421 +// sqrt(5) // 2.23607 +@function sqrt ($x) { + @if $x < 0 { + @return error("Argument for `sqrt()` must be a positive number."); + } + $ret: 1; + @for $i from 1 through 24 { + $ret: $ret - (pow($ret, 2) - $x) / (2 * $ret); + } + @return $ret; +} diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index b5c4f27071b..ae0b4e01bf4 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -30,33 +30,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default; /* These files don't actually exist. They're injected by DiscourseSassImporter. */ @import "theme_variables"; @import "plugins_variables"; +@import "common/foundation/math"; // Color Utilities -// Square Root function -// http://codepen.io/Designer023/pen/DkEtw -@function approximateSq($num, $approx) { - $root : (( $num / $approx ) + $approx) / 2; - @return $root; -} - -@function sqrt($num) { - $root:0; - $testRoot : 0.001; - $upperBounds : round($num / 2) + 1; //never need over half the main number. Add one just to be sure! - $loops : $upperBounds; - @for $test from 2 through $upperBounds { - $sq : $test * $test; - @if $sq <= $num { - $testRoot : $test; - } - } - - $root : (approximateSq($num, $testRoot)); - - @return $root; -} - // w3c definition of color brightness @function brightness($color) { @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); diff --git a/lib/sass/discourse_sass_compiler.rb b/lib/sass/discourse_sass_compiler.rb index c8f1908245d..fb0c2a66c30 100644 --- a/lib/sass/discourse_sass_compiler.rb +++ b/lib/sass/discourse_sass_compiler.rb @@ -1,6 +1,12 @@ require_dependency 'sass/discourse_sass_importer' require 'pathname' +module Sass::Script::Functions + def _error(message) + raise Sass::SyntaxError, mesage + end +end + class DiscourseSassCompiler def self.compile(scss, target, opts={}) From 3eb2668fcf617518baab17dd7d0078f0a4b2a530 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:30:34 -0700 Subject: [PATCH 02/12] Add color boxes on the theme chooser page TODO: filter down to the colors actually used --- .../admin/templates/customize_colors.hbs | 87 +++++++++++++++++++ .../stylesheets/common/admin/admin_base.scss | 54 ++++++++++++ 2 files changed, 141 insertions(+) diff --git a/app/assets/javascripts/admin/templates/customize_colors.hbs b/app/assets/javascripts/admin/templates/customize_colors.hbs index 85fc27abb84..439e819f4ad 100644 --- a/app/assets/javascripts/admin/templates/customize_colors.hbs +++ b/app/assets/javascripts/admin/templates/customize_colors.hbs @@ -40,6 +40,93 @@ +
+ Various greys used throught the UI. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ choose-grey() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ choose-grey() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dark-light-diff() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dark-light-diff() +
+
+ {{#if colors.length}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index a988f543896..7043a13496f 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -1663,3 +1663,57 @@ table#user-badges { .mobile-view .full-width { margin: 0; } + +.cboxcontainer { + display: inline-block; + padding: 8px; + padding-bottom: 4px; + + * { + width: 20px; + height: 20px; + display: inline-block; + border: 1px solid $tertiary; + } + &.primary { + background: $primary; + } + &.secondary { + background: $secondary; + } +} +.cbox0 { background: choose-grey(0%); } +.cbox10 { background: choose-grey(10%); } +.cbox20 { background: choose-grey(20%); } +.cbox30 { background: choose-grey(30%); } +.cbox40 { background: choose-grey(40%); } +.cbox50 { background: choose-grey(50%); } +.cbox60 { background: choose-grey(60%); } +.cbox70 { background: choose-grey(70%); } +.cbox80 { background: choose-grey(80%); } +.cbox90 { background: choose-grey(90%); } +.cbox100 { background: choose-grey(100%); } +.cbox5 { background: choose-grey(5%); } +.cbox15 { background: choose-grey(15%); } +.cbox25 { background: choose-grey(25%); } +.cbox95 { background: choose-grey(95%); } +.cbox85 { background: choose-grey(85%); } +.cbox75 { background: choose-grey(75%); } + +.dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); } +.dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); } +.dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); } +.dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); } +.dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); } +.dbox50 { background: dark-light-diff($primary, $secondary, 50%, -50%); } +.dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); } +.dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); } +.dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); } +.dbox90 { background: dark-light-diff($primary, $secondary, 90%, -90%); } +.dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); } +.dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); } +.dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); } +.dbox25 { background: dark-light-diff($primary, $secondary, 25%, -25%); } +.dbox95 { background: dark-light-diff($primary, $secondary, 95%, -95%); } +.dbox85 { background: dark-light-diff($primary, $secondary, 85%, -85%); } +.dbox75 { background: dark-light-diff($primary, $secondary, 75%, -75%); } From 26c3d7446072bfdfdae8c3774f9e7fb4474ed4b8 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:31:00 -0700 Subject: [PATCH 03/12] Split srgb-scale into its own function --- .../common/foundation/variables.scss | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index ae0b4e01bf4..3acece6258b 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -39,24 +39,32 @@ $base-font-family: Helvetica, Arial, sans-serif !default; @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); } -// Replaces dark-light-diff($primary, $secondary, 50%, -50%) // Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2 -@function choose-grey($percent) { +@function srgb-scale($foreground, $background, $percent) { $ratio: ($percent / 100%); $iratio: 1 - $ratio; - $pr2: red($primary) * red($primary); - $pg2: green($primary) * green($primary); - $pb2: blue($primary) * blue($primary); - $sr2: red($secondary) * red($secondary); - $sg2: green($secondary) * green($secondary); - $sb2: blue($secondary) * blue($secondary); - $rr2: $pr2 * $ratio + $sr2 * $iratio; - $rg2: $pg2 * $ratio + $sg2 * $iratio; - $rb2: $pb2 * $ratio + $sb2 * $iratio; - $rr: sqrt($rr2); - $rg: sqrt($rg2); - $rb: sqrt($rb2); - @return rgb($rr, $rg, $rb); + $f_r2: red($foreground) * red($foreground); + $f_g2: green($foreground) * green($foreground); + $f_b2: blue($foreground) * blue($foreground); + $b_r2: red($background) * red($background); + $b_g2: green($background) * green($background); + $b_b2: blue($background) * blue($background); + $r_r2: $f_r2 * $ratio + $b_r2 * $iratio; + $r_g2: $f_g2 * $ratio + $b_g2 * $iratio; + $r_b2: $f_b2 * $ratio + $b_b2 * $iratio; + $r_r: sqrt($r_r2); + $r_g: sqrt($r_g2); + $r_b: sqrt($r_b2); + @return rgb($r_r, $r_g, $r_b); +} + +// Replaces dark-light-diff($primary, $secondary, 50%, -50%) +@function choose-grey($percent) { + @return srgb-scale($primary, $secondary, $percent); +} + +@function choose-gray($percent) { + @return choose-grey($percent); } @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) { From 7e8ee8e7257a37626ca488bca39cc5331af6bd4f Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:52:37 -0700 Subject: [PATCH 04/12] FIX: mobile composer dark theme --- app/assets/stylesheets/mobile/compose.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index c850e804d04..91c2ef2ba99 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -128,6 +128,9 @@ display: none !important; // can be removed if inline JS CSS is removed from com margin-top: 6px; width: 99%; box-sizing: border-box; + background: $secondary; + color: $primary; + border-color: choose-grey(10%); } .wmd-controls { transition: top 0.3s ease; @@ -172,7 +175,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); } .wmd-input { - color: darken($primary, 40%); + color: dark-light-choose(darken($primary, 40%), choose-grey(90%)); } .wmd-input { bottom: 35px; From 9c92a491b53da8b85763999c39c8d6c788d4849b Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:59:32 -0700 Subject: [PATCH 05/12] FIX: Tweaks to mobile select posts UI --- app/assets/stylesheets/mobile/compose.scss | 9 ++++++--- app/assets/stylesheets/mobile/topic-post.scss | 6 +++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 91c2ef2ba99..4fb2c9c0044 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -13,6 +13,12 @@ display: none !important; // can be removed if inline JS CSS is removed from com display: none !important; // can be removed if inline JS CSS is removed from composer-popup } +input { + background: $secondary; + color: $primary; + border-color: choose-grey(15%); +} + #reply-control { // used for upload link .composer-bottom-right { @@ -128,9 +134,6 @@ display: none !important; // can be removed if inline JS CSS is removed from com margin-top: 6px; width: 99%; box-sizing: border-box; - background: $secondary; - color: $primary; - border-color: choose-grey(10%); } .wmd-controls { transition: top 0.3s ease; diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index d69d3b13721..844b479d05c 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -399,11 +399,11 @@ iframe { float: left; width: 97%; padding-left: 3%; - background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); + background-color: srgb-scale($tertiary, $secondary, 15%); .btn { margin-bottom: 10px; color: $secondary; - background: scale-color($tertiary, $lightness: 50%); + background: $tertiary; clear: both; } p { @@ -420,7 +420,7 @@ button.select-post { position: absolute; z-index: 401; // 400 is the reply-to tab left: 200px; - background-color: scale-color($tertiary, $lightness: 50%); + background-color: srgb-scale($tertiary, $secondary, 60%); color: $secondary; padding: 5px; } From 123f50cd7125d9960be04f75bd770d09f19d9453 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 14:05:04 -0700 Subject: [PATCH 06/12] FIX: Mobile user profile --- app/assets/stylesheets/mobile/user.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index f64f9256167..da7ae77f4cb 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -261,7 +261,7 @@ .details { padding: 15px 15px 4px 15px; - background-color: rgba($primary, .9); + background-color: dark-light-choose(rgba($primary, .9), rgba($secondary, .9)); h1 { font-size: 2.143em; @@ -306,7 +306,7 @@ width: 100%; position: relative; float: left; - color: dark-light-diff($secondary, $primary, 75%, 0%); + color: dark-light-choose(scale-color($secondary, $lightness: 75%), choose-grey(90%)); h1 {font-weight: bold;} @@ -362,14 +362,14 @@ } .secondary { display: none; } - .profile-image { - height: 0; - } + .profile-image { + height: 0; + } .details { padding: 12px 15px 2px 15px; margin-top: 0; - background: rgba($primary, 1); + background: dark-light-choose(rgba($primary, 1), choose-grey(5%)); .bio { display: none; } .primary { From 7083bfdf2716f695992fa66e82d018342ca4fee4 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 14:25:07 -0700 Subject: [PATCH 07/12] FIX: /user/x/notifications in mobile dark theme --- app/assets/stylesheets/mobile/user.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index da7ae77f4cb..42032f3fec5 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -468,7 +468,7 @@ } .notification { &.unread { - background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); + background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%)); } li { display: inline-block; } From aaccb73a3bbaecfaa20488ef4371a8d93ea94974 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 14:35:28 -0700 Subject: [PATCH 08/12] Use choose-grey(5%) instead of diff(97%) --- app/assets/stylesheets/common/base/topic-post.scss | 2 +- app/assets/stylesheets/common/components/badges.css.scss | 4 ++-- app/assets/stylesheets/common/foundation/mixins.scss | 2 +- app/assets/stylesheets/desktop/topic-post.scss | 8 ++++---- app/assets/stylesheets/mobile/topic-post.scss | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index c655b6d0554..1908afc4dc6 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -169,7 +169,7 @@ pre { display: block; padding: 5px 10px; color: $primary; - background: dark-light-diff($primary, $secondary, 97%, -65%); + background: choose-grey(5%); max-height: 500px; } } diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index 0a03ef0aa07..d83ea438d93 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/app/assets/stylesheets/common/components/badges.css.scss @@ -265,9 +265,9 @@ &.clicks { font-weight: normal; - background-color: dark-light-diff($primary, $secondary, 85%, -65%); + background-color: dark-light-diff($primary, $secondary, 85%, -60%); top: -1px; - color: dark-light-diff($primary, $secondary, 50%, -45%); + color: dark-light-diff($primary, $secondary, 50%, -20%); position: relative; margin-left: 2px; border: none; diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index 4b560cc46f9..25ec023f0af 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -98,5 +98,5 @@ // Stuff we repeat @mixin post-aside { border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%); - background-color: dark-light-diff($primary, $secondary, 97%, -75%); + background-color: choose-grey(5%); } diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 2a97d2dc9e0..7c389b38f62 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -308,7 +308,7 @@ a.star { .topic-map { margin: 20px 0 0 0; - background: dark-light-diff($primary, $secondary, 97%, -75%); + background: choose-grey(5%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: none; // would cause double top border @@ -414,7 +414,7 @@ a.star { border: 0; padding: 0 23px; color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); - background: dark-light-diff($primary, $secondary, 97%, -75%); + background: choose-grey(5%); border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); &:hover { @@ -626,13 +626,13 @@ blockquote { .quote { &>blockquote { .onebox-result { - background-color: dark-light-diff($primary, $secondary, 97%, -45%); + background-color: choose-grey(5%); } } aside { .quote, .title, blockquote, .onebox, .onebox-result { - background: dark-light-diff($primary, $secondary, 97%, -45%); + background: choose-grey(5%); border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%); } diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 844b479d05c..050d6d6d6f7 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -168,7 +168,7 @@ a.star { .topic-map { margin: 10px 0; - background: dark-light-diff($primary, $secondary, 97%, -45%); + background: choose-grey(5%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: none; // would cause double top border @@ -287,7 +287,7 @@ a.star { border: 0; padding: 0 15px; color: $primary; - background: dark-light-diff($primary, $secondary, 97%, -75%); + background: choose-grey(5%); border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); .fa { From fad5af0f7d2f134237a0cd0b623c3d783954722e Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 15:10:09 -0700 Subject: [PATCH 09/12] FEATURE: Green/red background for ins/del elements --- app/assets/stylesheets/common/base/topic-post.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 1908afc4dc6..167cbd4e455 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -31,6 +31,8 @@ h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; } h1 { line-height: 1em; } /* normalize.css sets h1 font size but not line height */ a { word-wrap: break-word; } + ins { background-color: dark-light-choose(scale-color($success, $lightness: 90%), scale-color($success, $lightness: -60%)); } + del { background-color: dark-light-choose(scale-color($danger, $lightness: 90%), scale-color($danger, $lightness: -60%)); } } From eb00a924521638ee7430d00d1fb9c33c7468e363 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 16:33:44 -0700 Subject: [PATCH 10/12] FIX: onebox links were too dark --- app/assets/stylesheets/common/base/onebox.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss index 390ac83d527..1ca4e635ea5 100644 --- a/app/assets/stylesheets/common/base/onebox.scss +++ b/app/assets/stylesheets/common/base/onebox.scss @@ -120,12 +120,12 @@ aside.onebox { } a[href] { - color: scale-color($tertiary, $lightness: -20%); + color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary); text-decoration: none; } a[href]:visited { - color: scale-color($tertiary, $lightness: -20%); + color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary); } img { From 1218d47eb50057d6a841c1136a584886938ac348 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 16:47:34 -0700 Subject: [PATCH 11/12] Rename choose-grey() to blend-primary-secondary() --- .../admin/templates/customize_colors.hbs | 4 +-- .../stylesheets/common/admin/admin_base.scss | 36 ++++++++++--------- .../stylesheets/common/base/topic-post.scss | 2 +- .../stylesheets/common/foundation/mixins.scss | 2 +- .../common/foundation/variables.scss | 6 +--- .../stylesheets/desktop/topic-post.scss | 8 ++--- app/assets/stylesheets/mobile/compose.scss | 4 +-- app/assets/stylesheets/mobile/topic-post.scss | 4 +-- app/assets/stylesheets/mobile/user.scss | 4 +-- 9 files changed, 34 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/admin/templates/customize_colors.hbs b/app/assets/javascripts/admin/templates/customize_colors.hbs index 439e819f4ad..4e5dc4a5a26 100644 --- a/app/assets/javascripts/admin/templates/customize_colors.hbs +++ b/app/assets/javascripts/admin/templates/customize_colors.hbs @@ -60,7 +60,7 @@
- choose-grey() + blend-primary-secondary()
@@ -81,7 +81,7 @@
- choose-grey() + blend-primary-secondary()
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index 7043a13496f..fcbe2825759 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -1682,23 +1682,25 @@ table#user-badges { background: $secondary; } } -.cbox0 { background: choose-grey(0%); } -.cbox10 { background: choose-grey(10%); } -.cbox20 { background: choose-grey(20%); } -.cbox30 { background: choose-grey(30%); } -.cbox40 { background: choose-grey(40%); } -.cbox50 { background: choose-grey(50%); } -.cbox60 { background: choose-grey(60%); } -.cbox70 { background: choose-grey(70%); } -.cbox80 { background: choose-grey(80%); } -.cbox90 { background: choose-grey(90%); } -.cbox100 { background: choose-grey(100%); } -.cbox5 { background: choose-grey(5%); } -.cbox15 { background: choose-grey(15%); } -.cbox25 { background: choose-grey(25%); } -.cbox95 { background: choose-grey(95%); } -.cbox85 { background: choose-grey(85%); } -.cbox75 { background: choose-grey(75%); } +.cbox0 { background: blend-primary-secondary(0%); } +.cbox10 { background: blend-primary-secondary(10%); } +.cbox20 { background: blend-primary-secondary(20%); } +.cbox30 { background: blend-primary-secondary(30%); } +.cbox40 { background: blend-primary-secondary(40%); } +.cbox50 { background: blend-primary-secondary(50%); } +.cbox60 { background: blend-primary-secondary(60%); } +.cbox70 { background: blend-primary-secondary(70%); } +.cbox80 { background: blend-primary-secondary(80%); } +.cbox90 { background: blend-primary-secondary(90%); } +.cbox100 { background: blend-primary-secondary(100%); } +.cbox5 { background: blend-primary-secondary(5%); } +.cbox7 { background: blend-primary-secondary(7%); } +.cbox15 { background: blend-primary-secondary(15%); } +.cbox17 { background: blend-primary-secondary(17%); } +.cbox25 { background: blend-primary-secondary(25%); } +.cbox95 { background: blend-primary-secondary(95%); } +.cbox85 { background: blend-primary-secondary(85%); } +.cbox75 { background: blend-primary-secondary(75%); } .dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); } .dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); } diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 167cbd4e455..ab1437c0685 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -171,7 +171,7 @@ pre { display: block; padding: 5px 10px; color: $primary; - background: choose-grey(5%); + background: blend-primary-secondary(5%); max-height: 500px; } } diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index 25ec023f0af..1770d524d4a 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -98,5 +98,5 @@ // Stuff we repeat @mixin post-aside { border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%); - background-color: choose-grey(5%); + background-color: blend-primary-secondary(5%); } diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 3acece6258b..b09dbc2893a 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -59,14 +59,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default; } // Replaces dark-light-diff($primary, $secondary, 50%, -50%) -@function choose-grey($percent) { +@function blend-primary-secondary($percent) { @return srgb-scale($primary, $secondary, $percent); } -@function choose-gray($percent) { - @return choose-grey($percent); -} - @function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) { @if brightness($adjusted-color) < brightness($comparison-color) { @return scale-color($adjusted-color, $lightness: $lightness); diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 7c389b38f62..5d6195a4ebe 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -308,7 +308,7 @@ a.star { .topic-map { margin: 20px 0 0 0; - background: choose-grey(5%); + background: blend-primary-secondary(5%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: none; // would cause double top border @@ -414,7 +414,7 @@ a.star { border: 0; padding: 0 23px; color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); - background: choose-grey(5%); + background: blend-primary-secondary(5%); border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); &:hover { @@ -626,13 +626,13 @@ blockquote { .quote { &>blockquote { .onebox-result { - background-color: choose-grey(5%); + background-color: blend-primary-secondary(5%); } } aside { .quote, .title, blockquote, .onebox, .onebox-result { - background: choose-grey(5%); + background: blend-primary-secondary(5%); border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%); } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 4fb2c9c0044..cc0c26f0f18 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -16,7 +16,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com input { background: $secondary; color: $primary; - border-color: choose-grey(15%); + border-color: blend-primary-secondary(15%); } #reply-control { @@ -178,7 +178,7 @@ input { background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%)); } .wmd-input { - color: dark-light-choose(darken($primary, 40%), choose-grey(90%)); + color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%)); } .wmd-input { bottom: 35px; diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 050d6d6d6f7..ef1bbbe8b33 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -168,7 +168,7 @@ a.star { .topic-map { margin: 10px 0; - background: choose-grey(5%); + background: blend-primary-secondary(5%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: none; // would cause double top border @@ -287,7 +287,7 @@ a.star { border: 0; padding: 0 15px; color: $primary; - background: choose-grey(5%); + background: blend-primary-secondary(5%); border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); .fa { diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss index 42032f3fec5..13b7ebad09a 100644 --- a/app/assets/stylesheets/mobile/user.scss +++ b/app/assets/stylesheets/mobile/user.scss @@ -306,7 +306,7 @@ width: 100%; position: relative; float: left; - color: dark-light-choose(scale-color($secondary, $lightness: 75%), choose-grey(90%)); + color: dark-light-choose(scale-color($secondary, $lightness: 75%), blend-primary-secondary(90%)); h1 {font-weight: bold;} @@ -369,7 +369,7 @@ .details { padding: 12px 15px 2px 15px; margin-top: 0; - background: dark-light-choose(rgba($primary, 1), choose-grey(5%)); + background: dark-light-choose(rgba($primary, 1), blend-primary-secondary(5%)); .bio { display: none; } .primary { From 7c7580d2267f63d9355c52348a7ef4e1ec43ee85 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 17:10:31 -0700 Subject: [PATCH 12/12] FIX: Remove mouseover listener --- .../javascripts/discourse/lib/desktop-notifications.js.es6 | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/discourse/lib/desktop-notifications.js.es6 b/app/assets/javascripts/discourse/lib/desktop-notifications.js.es6 index a0e2cc7d235..641b721cfed 100644 --- a/app/assets/javascripts/discourse/lib/desktop-notifications.js.es6 +++ b/app/assets/javascripts/discourse/lib/desktop-notifications.js.es6 @@ -80,7 +80,6 @@ function setupNotifications() { if (document) { document.addEventListener("scroll", resetIdle); } - window.addEventListener("mouseover", resetIdle); PageTracker.on("change", resetIdle); }