| /* https://github.com/bgrins/spectrum */ |
| .spectrum-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| display: inline-block; |
| background: rgba(230, 230, 230, 1) !important; |
| border: 1px solid #646464; |
| padding: 10px; |
| width: 220px; |
| z-index: 10; |
| -webkit-user-select: none; |
| } |
| |
| .spectrum-top { |
| position: relative; |
| width: 100%; |
| display: inline-block; |
| } |
| |
| .spectrum-color { |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 40px; |
| } |
| |
| .spectrum-display-value { |
| -webkit-user-select: text; |
| position: relative; |
| left: 2px; |
| top: -6px; |
| } |
| |
| .spectrum-hue { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 170px; |
| -webkit-box-reflect: right -28px; |
| } |
| |
| .spectrum-fill { |
| /* Same as spectrum-color width to force aspect ratio. */ |
| margin-top: 150px; |
| } |
| |
| .spectrum-range-container { |
| position: relative; |
| padding-bottom: 5px; |
| } |
| |
| .spectrum-range-container * { |
| font-size: 11px; |
| vertical-align: middle; |
| } |
| |
| .spectrum-range-container label { |
| display: inline-block; |
| padding-right: 4px; |
| } |
| |
| .spectrum-range-container input { |
| position: absolute; |
| left: 15px; |
| right: 40px; |
| margin: 3px 0 0 0; |
| } |
| |
| .spectrum-dragger, |
| .spectrum-slider { |
| -webkit-user-select: none; |
| } |
| |
| .spectrum-sat { |
| background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0)); |
| } |
| |
| .spectrum-val { |
| background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0)); |
| } |
| |
| .spectrum-hue { |
| background: -webkit-linear-gradient(bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
| } |
| |
| .spectrum-dragger { |
| border-radius: 5px; |
| height: 5px; |
| width: 5px; |
| border: 1px solid white; |
| cursor: pointer; |
| position: absolute; |
| top: 0; |
| left: 0; |
| background: black; |
| } |
| |
| .spectrum-slider { |
| position: absolute; |
| top: 0; |
| cursor: pointer; |
| border: 1px solid black; |
| height: 4px; |
| left: -1px; |
| right: -1px; |
| } |
| |
| .spectrum-container .swatch { |
| width: 20px; |
| height:20px; |
| margin: 0; |
| } |