/** * jQuery Wheel Color Picker * Base Stylesheet * * http://www.jar2.net/projects/jquery-wheelcolorpicker * * Copyright © 2011 Fajar Chandra. All rights reserved. * Released under MIT License. * http://www.opensource.org/licenses/mit-license.php * * Note: Width, height, left, and top properties are handled by the * plugin. Please do not change these values. */ .jQWCP-wWidget { position: absolute; width: 420px; height: 180px; background: #eee; box-shadow: 1px 1px 4px #000; border-radius: 4px; border: solid 1px #aaa; padding: 10px; } .jQWCP-wWidget.jQWCP-block { position: relative; border-top-color: #aaa; border-left-color: #aaa; border-right-color: #ddd; border-bottom-color: #ddd; box-shadow: -1px -1px 1px #666; } .jQWCP-wWheel { background: url('images/wheel.500.jpg') no-repeat center center; background-size: contain; position: relative; float: left; width: 180px; height: 180px; border-radius: 50%; border: solid 1px #aaa; margin: -1px; transition: border .15s; } .jQWCP-wWheel:hover { border-color: #666; } .jQWCP-wWheelOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; border-radius: 50%; } .jQWCP-wWheelCursor { background: url('images/crosshair.png') no-repeat center center; width: 19px; height: 19px; margin: -9px 0 0 -9px; position: absolute; top: 50%; left: 50%; } .jQWCP-slider-wrapper, .jQWCP-wPreview { position: relative; width: 20px; height: 180px; float: left; margin-left: 10px; } .jQWCP-slider, .jQWCP-wPreviewBox { position: absolute; width: 20px; height: 180px; left: 0; top: 0; border: solid 1px #aaa; margin: -1px; border-radius: 4px; transition: border .15s; } .jQWCP-slider-wrapper:hover .jQWCP-slider { border-color: #666; } .jQWCP-scursor { position: absolute; left: 0; top: 0; background: url('images/slider.png') no-repeat center center; width: 26px; height: 19px; margin: -9px 0 0 -3px; } .jQWCP-wAlphaSlider { background: url('images/alpha.png'); } .jQWCP-wPreviewBox { background: url('images/alpha.png'); }