.ui-colorpicker, .ui-dialog.ui-colorpicker { width: auto; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ui-colorpicker-inline { position: static; } .ui-colorpicker-buttonset { float: left; margin-left: .4em; } .ui-colorpicker-buttonset .ui-button { margin: .5em 0 .5em 0; cursor: pointer; } .ui-colorpicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-colorpicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-colorpicker-buttonpane button.ui-colorpicker-current { float: left; } .ui-colorpicker table { font-size: 100%; /* Reset browser table font-size */ margin: 0; } .ui-colorpicker table td { vertical-align: top; } .ui-colorpicker-padding-left { padding-left: 10px; } .ui-colorpicker-padding-top { padding-top: 10px; } .ui-colorpicker-border { border: 1px inset; display: inline-block; } /* Bar & map */ .ui-colorpicker-map > *, .ui-colorpicker-bar > * { position: absolute; cursor: crosshair; } .ui-colorpicker-map-pointer, .ui-colorpicker-bar-pointer { position: absolute; } /* Map */ .ui-colorpicker-map, .ui-colorpicker-map > * { display: block; width: 256px; height: 256px; overflow: hidden; } .ui-colorpicker-map-layer-1, .ui-colorpicker-map-layer-2 { background: url(images/map.png) no-repeat; } .ui-colorpicker-map-layer-alpha { background: url(images/map-opacity.png); } .ui-colorpicker-map-pointer { display: inline-block; width: 15px; height: 15px; background: url(images/map-pointer.png) no-repeat; } /* Bar */ .ui-colorpicker-bar, .ui-colorpicker-bar > * { display: block; width: 20px; height: 256px; overflow: hidden; background-repeat: repeat-x; } .ui-colorpicker-bar-layer-1, .ui-colorpicker-bar-layer-2, .ui-colorpicker-bar-layer-3, .ui-colorpicker-bar-layer-4 { background: url(images/bar.png) repeat-x; } .ui-colorpicker-bar-layer-alpha { background: url(images/bar-opacity.png); } .ui-colorpicker-bar-layer-alphabar { background: url(images/bar-alpha.png); } .ui-colorpicker-bar-pointer { display: inline-block; width: 20px; height: 7px; background: url(images/bar-pointer.png) no-repeat; } /* Preview */ .ui-colorpicker-preview { text-align: center; } .ui-colorpicker-preview-initial { cursor: pointer; } .ui-colorpicker-preview-initial, .ui-colorpicker-preview-current { width: 50px; height: 20px; display: inline-block; } .ui-colorpicker-preview-initial-alpha, .ui-colorpicker-preview-current-alpha { width: 50px; height: 20px; display: inline-block; background: url(images/preview-opacity.png) repeat; } /* Inputs */ .ui-colorpicker-rgb label, .ui-colorpicker-hsv label, .ui-colorpicker-hsl label, .ui-colorpicker-lab label, .ui-colorpicker-cmyk label, .ui-colorpicker-alpha label { width: 1.5em; display: inline-block; } .ui-colorpicker-number { margin: .1em; width: 4em; } /* Hex */ .ui-colorpicker-hex { text-align: center; } /* Swatches */ .ui-colorpicker-swatches { width: 84px; height: 256px; overflow: auto; background-color: #f8f8f8; } .ui-colorpicker-swatch { cursor: pointer; float: left; width: 11px; height: 11px; border-right: 1px solid black; border-bottom: 1px solid black; }