diff --git a/src/css/spectrum/spectrum-overrides.css b/src/css/spectrum/spectrum-overrides.css index 2b214ded..0b9f2431 100644 --- a/src/css/spectrum/spectrum-overrides.css +++ b/src/css/spectrum/spectrum-overrides.css @@ -7,7 +7,7 @@ border-radius: 4px; background-color: #2B2B2B; border: solid 4px #888; - padding: 5px; + padding: 5px 5px 0 5px; } .sp-container[data-y-position=bottom] { @@ -70,6 +70,12 @@ border-right-width: 0; } +.sp-picker-container { + padding: 5px; + padding-bottom: 300px; + margin-bottom: -295px; +} + .sp-slider { height: 5px; left: -2px; @@ -95,4 +101,17 @@ .sp-palette .sp-thumb-el.sp-thumb-active { border-color: gold; box-shadow: 0 0 0px 1px gold; +} + +.sp-input { + border: 1px solid #666; + margin: 0; + background: #111; + border-radius: 2px; + color: #D3D3D3; + font-family: Courier!important; +} + +.sp-input.sp-validation-error { + background: #330000; } \ No newline at end of file diff --git a/src/js/Constants.js b/src/js/Constants.js index d3af0d98..851c9405 100644 --- a/src/js/Constants.js +++ b/src/js/Constants.js @@ -18,6 +18,9 @@ var Constants = { DEFAULT_PEN_COLOR : '#000000', TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)', + // Used for Spectrum input + PREFERRED_COLOR_FORMAT : 'rgb', + /* * Fake semi-transparent color used to highlight transparent * strokes and rectangles: diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index 786ced1e..2180d485 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -22,6 +22,7 @@ var spectrumCfg = { showPalette: true, showButtons: false, + showInput: true, palette: [ ['rgba(0,0,0,0)'] ], diff --git a/src/js/lib/spectrum/spectrum.js b/src/js/lib/spectrum/spectrum.js index c2ee8385..731b0ce1 100644 --- a/src/js/lib/spectrum/spectrum.js +++ b/src/js/lib/spectrum/spectrum.js @@ -670,7 +670,7 @@ // Update the text entry input as it changes happen if (opts.showInput) { - textInput.val(realColor.toString(format)); + textInput.val(realColor.toString(Constants.PREFERRED_COLOR_FORMAT || format)); } if (opts.showPalette) {