/* 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; }