diff options
| -rw-r--r-- | svg/colorpicker.js | 447 | ||||
| -rw-r--r-- | svg/colorpicker.js.LICENSE | 25 | ||||
| -rw-r--r-- | svg/subcan.js | 72 | ||||
| -rw-r--r-- | svg/subcan_dxf.svg | 32 | ||||
| -rw-r--r-- | svg/themes.css | 177 |
5 files changed, 745 insertions, 8 deletions
diff --git a/svg/colorpicker.js b/svg/colorpicker.js new file mode 100644 index 0000000..05dc000 --- /dev/null +++ b/svg/colorpicker.js @@ -0,0 +1,447 @@ +/** + * ColorPicker - pure JavaScript color picker without using images, external CSS or 1px divs. + * Copyright © 2011 David Durman, All rights reserved. + */ +(function(window, document, undefined) { + + var type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML"), + picker, slide, hueOffset = 15, svgNS = 'http://www.w3.org/2000/svg'; + + // This HTML snippet is inserted into the innerHTML property of the passed color picker element + // when the no-hassle call to ColorPicker() is used, i.e. ColorPicker(function(hex, hsv, rgb) { ... }); + + var colorpickerHTMLSnippet = [ + + '<div class="picker-wrapper">', + '<div class="picker"></div>', + '<div class="picker-indicator"></div>', + '</div>', + '<div class="slide-wrapper">', + '<div class="slide"></div>', + '<div class="slide-indicator"></div>', + '</div>' + + ].join(''); + + /** + * Return mouse position relative to the element el. + */ + function mousePosition(evt) { + // IE: + if (window.event && window.event.contentOverflow !== undefined) { + return { x: window.event.offsetX, y: window.event.offsetY }; + } + // Webkit: + if (evt.offsetX !== undefined && evt.offsetY !== undefined) { + return { x: evt.offsetX, y: evt.offsetY }; + } + // Firefox: + var wrapper = evt.target.parentNode.parentNode; + return { x: evt.layerX - wrapper.offsetLeft, y: evt.layerY - wrapper.offsetTop }; + } + + /** + * Create SVG element. + */ + function $(el, attrs, children) { + el = document.createElementNS(svgNS, el); + for (var key in attrs) + el.setAttribute(key, attrs[key]); + if (Object.prototype.toString.call(children) != '[object Array]') children = [children]; + var i = 0, len = (children[0] && children.length) || 0; + for (; i < len; i++) + el.appendChild(children[i]); + return el; + } + + /** + * Create slide and picker markup depending on the supported technology. + */ + if (type == 'SVG') { + + slide = $('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '100%', height: '100%' }, + [ + $('defs', {}, + $('linearGradient', { id: 'gradient-hsv', x1: '0%', y1: '100%', x2: '0%', y2: '0%'}, + [ + $('stop', { offset: '0%', 'stop-color': '#FF0000', 'stop-opacity': '1' }), + $('stop', { offset: '13%', 'stop-color': '#FF00FF', 'stop-opacity': '1' }), + $('stop', { offset: '25%', 'stop-color': '#8000FF', 'stop-opacity': '1' }), + $('stop', { offset: '38%', 'stop-color': '#0040FF', 'stop-opacity': '1' }), + $('stop', { offset: '50%', 'stop-color': '#00FFFF', 'stop-opacity': '1' }), + $('stop', { offset: '63%', 'stop-color': '#00FF40', 'stop-opacity': '1' }), + $('stop', { offset: '75%', 'stop-color': '#0BED00', 'stop-opacity': '1' }), + $('stop', { offset: '88%', 'stop-color': '#FFFF00', 'stop-opacity': '1' }), + $('stop', { offset: '100%', 'stop-color': '#FF0000', 'stop-opacity': '1' }) + ] + ) + ), + $('rect', { x: '0', y: '0', width: '100%', height: '100%', fill: 'url(#gradient-hsv)'}) + ] + ); + + picker = $('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '100%', height: '100%' }, + [ + $('defs', {}, + [ + $('linearGradient', { id: 'gradient-black', x1: '0%', y1: '100%', x2: '0%', y2: '0%'}, + [ + $('stop', { offset: '0%', 'stop-color': '#000000', 'stop-opacity': '1' }), + $('stop', { offset: '100%', 'stop-color': '#CC9A81', 'stop-opacity': '0' }) + ] + ), + $('linearGradient', { id: 'gradient-white', x1: '0%', y1: '100%', x2: '100%', y2: '100%'}, + [ + $('stop', { offset: '0%', 'stop-color': '#FFFFFF', 'stop-opacity': '1' }), + $('stop', { offset: '100%', 'stop-color': '#CC9A81', 'stop-opacity': '0' }) + ] + ) + ] + ), + $('rect', { x: '0', y: '0', width: '100%', height: '100%', fill: 'url(#gradient-white)'}), + $('rect', { x: '0', y: '0', width: '100%', height: '100%', fill: 'url(#gradient-black)'}) + ] + ); + + } else if (type == 'VML') { + slide = [ + '<DIV style="position: relative; width: 100%; height: 100%">', + '<v:rect style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" stroked="f" filled="t">', + '<v:fill type="gradient" method="none" angle="0" color="red" color2="red" colors="8519f fuchsia;.25 #8000ff;24903f #0040ff;.5 aqua;41287f #00ff40;.75 #0bed00;57671f yellow"></v:fill>', + '</v:rect>', + '</DIV>' + ].join(''); + + picker = [ + '<DIV style="position: relative; width: 100%; height: 100%">', + '<v:rect style="position: absolute; left: -1px; top: -1px; width: 101%; height: 101%" stroked="f" filled="t">', + '<v:fill type="gradient" method="none" angle="270" color="#FFFFFF" opacity="100%" color2="#CC9A81" o:opacity2="0%"></v:fill>', + '</v:rect>', + '<v:rect style="position: absolute; left: 0px; top: 0px; width: 100%; height: 101%" stroked="f" filled="t">', + '<v:fill type="gradient" method="none" angle="0" color="#000000" opacity="100%" color2="#CC9A81" o:opacity2="0%"></v:fill>', + '</v:rect>', + '</DIV>' + ].join(''); + + if (!document.namespaces['v']) + document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML'); + } + + /** + * Convert HSV representation to RGB HEX string. + * Credits to http://www.raphaeljs.com + */ + function hsv2rgb(hsv) { + var R, G, B, X, C; + var h = (hsv.h % 360) / 60; + + C = hsv.v * hsv.s; + X = C * (1 - Math.abs(h % 2 - 1)); + R = G = B = hsv.v - C; + + h = ~~h; + R += [C, X, 0, 0, X, C][h]; + G += [X, C, C, X, 0, 0][h]; + B += [0, 0, X, C, C, X][h]; + + var r = Math.floor(R * 255); + var g = Math.floor(G * 255); + var b = Math.floor(B * 255); + return { r: r, g: g, b: b, hex: "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1) }; + } + + /** + * Convert RGB representation to HSV. + * r, g, b can be either in <0,1> range or <0,255> range. + * Credits to http://www.raphaeljs.com + */ + function rgb2hsv(rgb) { + + var r = rgb.r; + var g = rgb.g; + var b = rgb.b; + + if (rgb.r > 1 || rgb.g > 1 || rgb.b > 1) { + r /= 255; + g /= 255; + b /= 255; + } + + var H, S, V, C; + V = Math.max(r, g, b); + C = V - Math.min(r, g, b); + H = (C == 0 ? null : + V == r ? (g - b) / C + (g < b ? 6 : 0) : + V == g ? (b - r) / C + 2 : + (r - g) / C + 4); + H = (H % 6) * 60; + S = C == 0 ? 0 : C / V; + return { h: H, s: S, v: V }; + } + + /** + * Return click event handler for the slider. + * Sets picker background color and calls ctx.callback if provided. + */ + function slideListener(ctx, slideElement, pickerElement) { + return function(evt) { + evt = evt || window.event; + var mouse = mousePosition(evt); + ctx.h = mouse.y / slideElement.offsetHeight * 360 + hueOffset; + /* ctx.s = ctx.v = 1; */ + var c = hsv2rgb({ h: ctx.h, s: 1, v: 1 }); + pickerElement.style.backgroundColor = c.hex; + ctx.callback && ctx.callback(c.hex, { h: ctx.h - hueOffset, s: ctx.s, v: ctx.v }, { r: c.r, g: c.g, b: c.b }, undefined, mouse); + } + }; + + /** + * Return click event handler for the picker. + * Calls ctx.callback if provided. + */ + function pickerListener(ctx, pickerElement) { + return function(evt) { + evt = evt || window.event; + var mouse = mousePosition(evt), + width = pickerElement.offsetWidth, + height = pickerElement.offsetHeight; + + ctx.s = mouse.x / width; + ctx.v = (height - mouse.y) / height; + var c = hsv2rgb(ctx); + ctx.callback && ctx.callback(c.hex, { h: ctx.h - hueOffset, s: ctx.s, v: ctx.v }, { r: c.r, g: c.g, b: c.b }, mouse); + } + }; + + var uniqID = 0; + + /** + * ColorPicker. + * @param {DOMElement} slideElement HSV slide element. + * @param {DOMElement} pickerElement HSV picker element. + * @param {Function} callback Called whenever the color is changed provided chosen color in RGB HEX format as the only argument. + */ + function ColorPicker(slideElement, pickerElement, callback) { + + if (!(this instanceof ColorPicker)) return new ColorPicker(slideElement, pickerElement, callback); + + this.h = 0; + this.s = 1; + this.v = 1; + + if (!callback) { + // call of the form ColorPicker(element, funtion(hex, hsv, rgb) { ... }), i.e. the no-hassle call. + + var element = slideElement; + element.innerHTML = colorpickerHTMLSnippet; + + this.slideElement = element.getElementsByClassName('slide')[0]; + this.pickerElement = element.getElementsByClassName('picker')[0]; + var slideIndicator = element.getElementsByClassName('slide-indicator')[0]; + var pickerIndicator = element.getElementsByClassName('picker-indicator')[0]; + + ColorPicker.fixIndicators(slideIndicator, pickerIndicator); + + this.callback = function(hex, hsv, rgb, pickerCoordinate, slideCoordinate) { + + ColorPicker.positionIndicators(slideIndicator, pickerIndicator, slideCoordinate, pickerCoordinate); + + pickerElement(hex, hsv, rgb); + }; + + } else { + + this.callback = callback; + this.pickerElement = pickerElement; + this.slideElement = slideElement; + } + + if (type == 'SVG') { + + // Generate uniq IDs for linearGradients so that we don't have the same IDs within one document. + // Then reference those gradients in the associated rectangles. + + var slideClone = slide.cloneNode(true); + var pickerClone = picker.cloneNode(true); + + var hsvGradient = slideClone.getElementById('gradient-hsv'); + + var hsvRect = slideClone.getElementsByTagName('rect')[0]; + + hsvGradient.id = 'gradient-hsv-' + uniqID; + hsvRect.setAttribute('fill', 'url(#' + hsvGradient.id + ')'); + + var blackAndWhiteGradients = [pickerClone.getElementById('gradient-black'), pickerClone.getElementById('gradient-white')]; + var whiteAndBlackRects = pickerClone.getElementsByTagName('rect'); + + blackAndWhiteGradients[0].id = 'gradient-black-' + uniqID; + blackAndWhiteGradients[1].id = 'gradient-white-' + uniqID; + + whiteAndBlackRects[0].setAttribute('fill', 'url(#' + blackAndWhiteGradients[1].id + ')'); + whiteAndBlackRects[1].setAttribute('fill', 'url(#' + blackAndWhiteGradients[0].id + ')'); + + this.slideElement.appendChild(slideClone); + this.pickerElement.appendChild(pickerClone); + + uniqID++; + + } else { + + this.slideElement.innerHTML = slide; + this.pickerElement.innerHTML = picker; + } + + addEventListener(this.slideElement, 'click', slideListener(this, this.slideElement, this.pickerElement)); + addEventListener(this.pickerElement, 'click', pickerListener(this, this.pickerElement)); + + enableDragging(this, this.slideElement, slideListener(this, this.slideElement, this.pickerElement)); + enableDragging(this, this.pickerElement, pickerListener(this, this.pickerElement)); + }; + + function addEventListener(element, event, listener) { + + if (element.attachEvent) { + + element.attachEvent('on' + event, listener); + + } else if (element.addEventListener) { + + element.addEventListener(event, listener, false); + } + } + + /** + * Enable drag&drop color selection. + * @param {object} ctx ColorPicker instance. + * @param {DOMElement} element HSV slide element or HSV picker element. + * @param {Function} listener Function that will be called whenever mouse is dragged over the element with event object as argument. + */ + function enableDragging(ctx, element, listener) { + + var mousedown = false; + + addEventListener(element, 'mousedown', function(evt) { mousedown = true; }); + addEventListener(element, 'mouseup', function(evt) { mousedown = false; }); + addEventListener(element, 'mouseout', function(evt) { mousedown = false; }); + addEventListener(element, 'mousemove', function(evt) { + + if (mousedown) { + + listener(evt); + } + }); + } + + + ColorPicker.hsv2rgb = function(hsv) { + var rgbHex = hsv2rgb(hsv); + delete rgbHex.hex; + return rgbHex; + }; + + ColorPicker.hsv2hex = function(hsv) { + return hsv2rgb(hsv).hex; + }; + + ColorPicker.rgb2hsv = rgb2hsv; + + ColorPicker.rgb2hex = function(rgb) { + return hsv2rgb(rgb2hsv(rgb)).hex; + }; + + ColorPicker.hex2hsv = function(hex) { + return rgb2hsv(ColorPicker.hex2rgb(hex)); + }; + + ColorPicker.hex2rgb = function(hex) { + return { r: parseInt(hex.substr(1, 2), 16), g: parseInt(hex.substr(3, 2), 16), b: parseInt(hex.substr(5, 2), 16) }; + }; + + /** + * Sets color of the picker in hsv/rgb/hex format. + * @param {object} ctx ColorPicker instance. + * @param {object} hsv Object of the form: { h: <hue>, s: <saturation>, v: <value> }. + * @param {object} rgb Object of the form: { r: <red>, g: <green>, b: <blue> }. + * @param {string} hex String of the form: #RRGGBB. + */ + function setColor(ctx, hsv, rgb, hex) { + ctx.h = hsv.h % 360; + ctx.s = hsv.s; + ctx.v = hsv.v; + + var c = hsv2rgb(ctx); + + var mouseSlide = { + y: (ctx.h * ctx.slideElement.offsetHeight) / 360, + x: 0 // not important + }; + + var pickerHeight = ctx.pickerElement.offsetHeight; + + var mousePicker = { + x: ctx.s * ctx.pickerElement.offsetWidth, + y: pickerHeight - ctx.v * pickerHeight + }; + + ctx.pickerElement.style.backgroundColor = hsv2rgb({ h: ctx.h, s: 1, v: 1 }).hex; + ctx.callback && ctx.callback(hex || c.hex, { h: ctx.h, s: ctx.s, v: ctx.v }, rgb || { r: c.r, g: c.g, b: c.b }, mousePicker, mouseSlide); + + return ctx; + }; + + /** + * Sets color of the picker in rgb format. + * @param {object} rgb Object of the form: { r: <red>, g: <green>, b: <blue> }. + */ + ColorPicker.prototype.setHsv = function(hsv) { + return setColor(this, hsv); + }; + + /** + * Sets color of the picker in rgb format. + * @param {object} rgb Object of the form: { r: <red>, g: <green>, b: <blue> }. + */ + ColorPicker.prototype.setRgb = function(rgb) { + return setColor(this, rgb2hsv(rgb), rgb); + }; + + /** + * Sets color of the picker in hex format. + * @param {string} hex Hex color format #RRGGBB. + */ + ColorPicker.prototype.setHex = function(hex) { + return setColor(this, ColorPicker.hex2hsv(hex), undefined, hex); + }; + + /** + * Helper to position indicators. + * @param {HTMLElement} slideIndicator DOM element representing the indicator of the slide area. + * @param {HTMLElement} pickerIndicator DOM element representing the indicator of the picker area. + * @param {object} mouseSlide Coordinates of the mouse cursor in the slide area. + * @param {object} mousePicker Coordinates of the mouse cursor in the picker area. + */ + ColorPicker.positionIndicators = function(slideIndicator, pickerIndicator, mouseSlide, mousePicker) { + if (mouseSlide) { + /*pickerIndicator.style.left = 'auto'; + pickerIndicator.style.right = '0px'; + pickerIndicator.style.top = '0px'; */ + slideIndicator.style.top = (mouseSlide.y - slideIndicator.offsetHeight/2) + 'px'; + } + if (mousePicker) { + pickerIndicator.style.top = (mousePicker.y - pickerIndicator.offsetHeight/2) + 'px'; + pickerIndicator.style.left = (mousePicker.x - pickerIndicator.offsetWidth/2) + 'px'; + } + }; + + /** + * Helper to fix indicators - this is recommended (and needed) for dragable color selection (see enabledDragging()). + */ + ColorPicker.fixIndicators = function(slideIndicator, pickerIndicator) { + + pickerIndicator.style.pointerEvents = 'none'; + slideIndicator.style.pointerEvents = 'none'; + }; + + window.ColorPicker = ColorPicker; + +})(window, window.document); diff --git a/svg/colorpicker.js.LICENSE b/svg/colorpicker.js.LICENSE new file mode 100644 index 0000000..58eabfa --- /dev/null +++ b/svg/colorpicker.js.LICENSE @@ -0,0 +1,25 @@ +License +======== + +FlexiColorPicker is licensed under the MIT license: + +Copyright (c) 2011 - 2012 David Durman + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + diff --git a/svg/subcan.js b/svg/subcan.js index 8008196..7254044 100644 --- a/svg/subcan.js +++ b/svg/subcan.js @@ -13,6 +13,57 @@ function simple_xpath(expr) { return nodes; } +var picktgt = null; +var picktimer = null; + +function picker_end() { + node = simple_xpath('//*[contains(svg:title, "'+picktgt+'=")]')[0]; + node.style.strokeWidth = 1.0; + node.style.stroke = '#b0b0b0'; + + picktgt = null; + var picker = document.getElementById('picker'); + picker.style.visibility = 'hidden'; +} + +function picker_begin(target) { + if (picktgt) { + window.clearTimeout(picktimer); + picker_end(); + } + + node = simple_xpath('//*[contains(svg:title, "'+target+'=")]')[0]; + node.style.strokeWidth = 3.0; + node.style.stroke = '#ff7700'; + + picktgt = target; + var picker = document.getElementById('picker'); + picker.style.visibility = 'visible'; + picktimer = window.setTimeout(picker_end, 2500); +} + +function picker_refresh() { + window.clearTimeout(picktimer); + picktimer = window.setTimeout(picker_end, 2500); +} + +function on_picker(hex, hsv, rgb) { + console.log('pick', picktgt, rgb); + picker_refresh(); + + $.jsonRPC.request('light_set', { + params: [id, [rgb.r, rgb.g, rgb.b]], + error: function(result) { + console.log('light_set RGB error', result); + }, + success: function(result) { + // console.log('light_set ', id, ' => ', mouseset, ' OK: ', result['result']); + // immediate_update(id, mouseset); + } + }); +} + + var mousesel = null; var mouseset = null; var mouseorig = 0; @@ -100,6 +151,13 @@ function on_mouse_timer() { function on_evt_mousedown(node, evt) { var id = node.id.substring(4); + + if (id.substr(0,3) == 'dmx') { + console.log('dmx click', id); + picker_begin(id); + return false; + } + // console.log('node', node, 'y', evt.clientY); mousestart = new Date().getTime(); node.style.fill = "#0088ff"; @@ -172,12 +230,14 @@ function on_evt_mousemove(node, evt) { function on_evt_mouseup(node, evt) { // console.log('--- up ---'); - window.setTimeout((function() { - var sel = mousesel; - return function() { - sel.style.fillOpacity = 0.0; - } - })(), 250); + if (mousesel) { + window.setTimeout((function() { + var sel = mousesel; + return function() { + sel.style.fillOpacity = 0.0; + } + })(), 250); + } mousesel = null; evt.cancelBubble = true; diff --git a/svg/subcan_dxf.svg b/svg/subcan_dxf.svg index e8b43a9..02c8e2f 100644 --- a/svg/subcan_dxf.svg +++ b/svg/subcan_dxf.svg @@ -1,6 +1,8 @@ <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> +<?xml-stylesheet href="themes.css" type="text/css"?> + <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" @@ -10,7 +12,7 @@ xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="840" + width="960" height="480" id="svg2" version="1.1" @@ -26,6 +28,9 @@ xlink:href="jquery.jsonrpc.js" id="script4" /> <script + xlink:href="colorpicker.js" + id="script5" /> + <script xlink:href="subcan.js" id="script6" /> <defs @@ -222,7 +227,7 @@ <rect style="fill:#262628;fill-opacity:1;stroke:none" id="rect9252" - width="840" + width="960" height="480" x="0.5" y="-0.5" /> @@ -4653,4 +4658,27 @@ y="199.5" inkscape:label="#rect3791" /> </g> + <g + inkscape:groupmode="layer" + id="layer8" + inkscape:label="picker"> + <foreignObject class="node" x="680" y="240" width="290" height="240" id="picker" style="visibility:hidden;"> + <body xmlns="http://www.w3.org/1999/xhtml"> + <div id="color-picker" class="cp-normal" /> + <script type="text/javascript"> + ColorPicker(document.getElementById('color-picker'), on_picker); + </script> + </body> + </foreignObject> +<!-- <rect + style="fill:#ff7af6;fill-opacity:1;stroke:none" + id="picker" + width="200" + height="220" + x="760" + y="260" + inkscape:label="#rect3860"> + + </rect> --> + </g> </svg> diff --git a/svg/themes.css b/svg/themes.css new file mode 100644 index 0000000..7a49d13 --- /dev/null +++ b/svg/themes.css @@ -0,0 +1,177 @@ +/* Common stuff */ +.picker-wrapper, +.slide-wrapper { + position: relative; + float: left; +} +.picker-indicator, +.slide-indicator { + position: absolute; + left: 0; + top: 0; + pointer-events: none; +} +.picker, +.slide { + cursor: crosshair; + float: left; +} + +/* Default skin */ + +.cp-default { + background-color: gray; + padding: 12px; + box-shadow: 0 0 40px #000; + border-radius: 15px; + float: left; +} +.cp-default .picker { + width: 200px; + height: 200px; +} +.cp-default .slide { + width: 30px; + height: 200px; +} +.cp-default .slide-wrapper { + margin-left: 10px; +} +.cp-default .picker-indicator { + width: 5px; + height: 5px; + border: 2px solid darkblue; + -moz-border-radius: 4px; + -o-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + opacity: .5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + filter: alpha(opacity=50); + background-color: white; +} +.cp-default .slide-indicator { + width: 100%; + height: 10px; + left: -4px; + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + filter: alpha(opacity=60); + border: 4px solid lightblue; + -moz-border-radius: 4px; + -o-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + background-color: white; +} + +/* Small skin */ + +.cp-small { + padding: 5px; + background-color: white; + float: left; + border-radius: 5px; +} +.cp-small .picker { + width: 100px; + height: 100px; +} +.cp-small .slide { + width: 15px; + height: 100px; +} +.cp-small .slide-wrapper { + margin-left: 5px; +} +.cp-small .picker-indicator { + width: 1px; + height: 1px; + border: 1px solid black; + background-color: white; +} +.cp-small .slide-indicator { + width: 100%; + height: 2px; + left: 0px; + background-color: black; +} + +/* Fancy skin */ + +.cp-fancy { + padding: 10px; +/* background-color: #C5F7EA; */ + background: -webkit-linear-gradient(top, #aaa 0%, #222 100%); + float: left; + border: 1px solid #999; + box-shadow: inset 0 0 10px white; +} +.cp-fancy .picker { + width: 200px; + height: 200px; +} +.cp-fancy .slide { + width: 30px; + height: 200px; +} +.cp-fancy .slide-wrapper { + margin-left: 10px; +} +.cp-fancy .picker-indicator { + width: 24px; + height: 24px; + background-image: url(http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/target.png); +} +.cp-fancy .slide-indicator { + width: 30px; + height: 31px; + left: 30px; + background-image: url(http://cdn1.iconfinder.com/data/icons/bluecoral/Left.png); +} + +/* Normal skin */ + +.cp-normal { + padding: 10px; + background-color: white; + float: left; + border: 4px solid #d6d6d6; + box-shadow: inset 0 0 10px white; +} +.cp-normal .picker { + width: 200px; + height: 200px; +} +.cp-normal .slide { + width: 30px; + height: 200px; +} +.cp-normal .slide-wrapper { + margin-left: 10px; +} +.cp-normal .picker-indicator { + width: 5px; + height: 5px; + border: 1px solid gray; + opacity: .5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + filter: alpha(opacity=50); + background-color: white; + pointer-events: none; +} +.cp-normal .slide-indicator { + width: 100%; + height: 10px; + left: -4px; + opacity: .6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + filter: alpha(opacity=60); + border: 4px solid gray; + background-color: white; + pointer-events: none; +} |
