tenfourfox/devtools/client/shared/widgets/spectrum.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#eyedropper-button {
  margin-inline-start: 5px;
}

#eyedropper-button::before {
  background-image: url("chrome://devtools/skin/images/command-eyedropper.png");
}

@media (min-resolution: 1.1dppx) {
  #eyedropper-button::before {
    background-image: url("chrome://devtools/skin/images/command-eyedropper@2x.png");
  }
}

/* Mix-in classes */

.spectrum-checker {
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

.spectrum-slider-control {
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,.6);
  background: #fff;
  border-radius: 10px;
  opacity: .8;
}

.spectrum-box {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 2px;
  background-clip: content-box;
}

/* Elements */

.spectrum-container {
  position: relative;
  display: none;
  top: 0;
  left: 0;
  border-radius: 0;
  width: 200px;
  padding: 5px;
}

.spectrum-show {
  display: inline-block;
}

/* Keep aspect ratio:
http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
.spectrum-top {
  position: relative;
  width: 100%;
  display: inline-block;
}

.spectrum-top-inner {
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.spectrum-color {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 20%;
}

.spectrum-hue {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 83%;
}

.spectrum-fill {
  /* Same as spectrum-color width */
  margin-top: 85%;
}

.spectrum-sat, .spectrum-val {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.spectrum-dragger, .spectrum-slider {
  -moz-user-select: none;
}

.spectrum-alpha {
  position: relative;
  height: 8px;
  margin-top: 3px;
}

.spectrum-alpha-inner {
  height: 100%;
}

.spectrum-alpha-handle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 5px;
  left: 50%;
}

.spectrum-sat {
  background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
}

.spectrum-val {
  background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
}

.spectrum-hue {
  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.spectrum-dragger {
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  border: 1px solid white;
  box-shadow: 0 0 2px rgba(0,0,0,.6);
}

.spectrum-slider {
  position: absolute;
  top: 0;
  height: 5px;
  left: -3px;
  right: -3px;
}