1 files changed, 155 insertions, 0 deletions
diff --git a/devtools/client/shared/widgets/spectrum.css b/devtools/client/shared/widgets/spectrum.css
new file mode 100644
index 000000000..46826f2e1
--- /dev/null
+++ b/devtools/client/shared/widgets/spectrum.css
@@ -0,0 +1,155 @@
+/* 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;
+  display: block;
+}
+
+#eyedropper-button::before {
+  background-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
+}
+
+/* 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-tooltip {
+  padding: 4px;
+}
+
+.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;
+}