From f77d6fa2bc2719e52dc05c25e7f13aabb00cdea5 Mon Sep 17 00:00:00 2001 From: Andrew Benner Date: Wed, 1 Apr 2015 13:41:42 -0400 Subject: [PATCH] Fix #150 - Fix colour editor for use in browsers that don't use -webkit- prefix --- .../default/InlineColorEditor/ColorEditor.js | 9 +++++++-- .../default/InlineColorEditor/css/main.less | 12 ++++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/extensions/default/InlineColorEditor/ColorEditor.js b/src/extensions/default/InlineColorEditor/ColorEditor.js index 007799cf5a4..25a28dd3f2d 100644 --- a/src/extensions/default/InlineColorEditor/ColorEditor.js +++ b/src/extensions/default/InlineColorEditor/ColorEditor.js @@ -171,8 +171,13 @@ define(function (require, exports, module) { // Update gradients in color square & opacity slider this.$selectionBase.css("background-color", colorObject.toHexString()); - this.$opacityGradient.css("background-image", "-webkit-gradient(linear, 0% 0%, 0% 100%, from(" + hueColor + "), to(transparent))"); - + this.$opacityGradient.css("background-image", "-moz-linear-gradient(top, " + hueColor + " 0%, rgba(0,0,0,0) 100%)"); + this.$opacityGradient.css("background-image", "-webkit-gradient(linear, top, bottom, color-stop(0%, " + hueColor + "), color-stop(100%,rgba(0,0,0,0)))"); + this.$opacityGradient.css("background-image", "-webkit-linear-gradient(top, " + hueColor + " 0%, rgba(0,0,0,0) 100%)"); + this.$opacityGradient.css("background-image", "-o-linear-gradient(top, " + hueColor + " 0%, rgba(0,0,0,0) 100%)"); + this.$opacityGradient.css("background-image", "-ms-linear-gradient(top, " + hueColor + " 0%, rgba(0,0,0,0) 100%)"); + this.$opacityGradient.css("background-image", "linear-gradient(to bottom, " + hueColor + " 0%, rgba(0,0,0,0) 100%)"); + // Update slider thumb positions this.$hueSelector.css("bottom", (this._hsv.h / 360 * 100) + "%"); this.$opacitySelector.css("bottom", (this._hsv.a * 100) + "%"); diff --git a/src/extensions/default/InlineColorEditor/css/main.less b/src/extensions/default/InlineColorEditor/css/main.less index c9b46f3f01b..ca93607ee7d 100644 --- a/src/extensions/default/InlineColorEditor/css/main.less +++ b/src/extensions/default/InlineColorEditor/css/main.less @@ -138,9 +138,17 @@ } .color-editor section .color-selection-field .saturation-gradient { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, from(#fff), to(rgba(255,255,255,0))); + background-image: -moz-linear-gradient(left, #FFFFFF 0%, rgba(255,255,255,0) 100%); + background-image: -o-linear-gradient(left, #FFFFFF 0%, rgba(255,255,255,0) 100%); + background-image: -ms-linear-gradient(left, #FFFFFF 0%, rgba(255,255,255,0) 100%); + background-image: linear-gradient(left, #FFFFFF 0%, rgba(255,255,255,0) 100%); } .color-editor section .color-selection-field .luminosity-gradient { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000)); + background-image: -moz-linear-gradient(bottom, #000000 0%, rgba(255,255,255,0) 100%); + background-image: -o-linear-gradient(bottom, #000000 0%, rgba(255,255,255,0) 100%); + background-image: -ms-linear-gradient(bottom, #000000 0%, rgba(255,255,255,0) 100%); + background-image: linear-gradient(bottom, #000000 0%, rgba(255,255,255,0) 100%); } .color-editor section .color-selection-field .selector-base { width: 12px; @@ -203,6 +211,10 @@ } .color-editor section .hue-slider { background-image: -webkit-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); + background-image: -moz-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); + background-image: -o-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); + background-image: -ms-linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); + background-image: linear-gradient(top, #f00, #f0f, #00f, #0ff, #0f0, #ff0, #f00); } .color-editor section footer { font-size: 100%;