michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: #eyedropper-button {
michael@0:   background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
michael@0:   width: 16px;
michael@0:   height: 16px;
michael@0:   background-size: 64px 16px;
michael@0:   background-position: 0 center;
michael@0:   background-repeat: no-repeat;
michael@0:   -moz-margin-start: 5px;
michael@0:   border-radius: 2px;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: .theme-light #eyedropper-button {
michael@0:   filter: url(chrome://browser/skin/devtools/filters.svg#invert);
michael@0:   border: 1px solid #AAA;
michael@0: }
michael@0: 
michael@0: .theme-dark #eyedropper-button {
michael@0:   border: 1px solid #444;
michael@0: }
michael@0: 
michael@0: #eyedropper-button:hover {
michael@0:   background-position: -16px center;
michael@0: }
michael@0: #eyedropper-button:hover:active {
michael@0:   background-position: -32px center;
michael@0: }
michael@0: #eyedropper-button[checked=true] {
michael@0:   background-position: -48px center;
michael@0: }
michael@0: 
michael@0: @media (min-resolution: 2dppx) {
michael@0:   #eyedropper-button {
michael@0:     background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* Mix-in classes */
michael@0: 
michael@0: .spectrum-checker {
michael@0:   background-color: #eee;
michael@0:   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
michael@0:     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
michael@0:   background-size: 12px 12px;
michael@0:   background-position: 0 0, 6px 6px;
michael@0: }
michael@0: 
michael@0: .spectrum-slider-control {
michael@0:   cursor: pointer;
michael@0:   border: 1px solid black;
michael@0:   background: white;
michael@0:   opacity: .7;
michael@0: }
michael@0: 
michael@0: .spectrum-box {
michael@0:   border: solid 1px #333;
michael@0: }
michael@0: 
michael@0: /* Elements */
michael@0: 
michael@0: .spectrum-container {
michael@0:   position: relative;
michael@0:   display: none;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   border-radius: 0;
michael@0:   width: 200px;
michael@0:   padding: 5px;
michael@0: }
michael@0: 
michael@0: .spectrum-show {
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: /* Keep aspect ratio:
michael@0: http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
michael@0: .spectrum-top {
michael@0:   position: relative;
michael@0:   width: 100%;
michael@0:   display: inline-block;
michael@0: }
michael@0: 
michael@0: .spectrum-top-inner {
michael@0:   position: absolute;
michael@0:   top:0;
michael@0:   left:0;
michael@0:   bottom:0;
michael@0:   right:0;
michael@0: }
michael@0: 
michael@0: .spectrum-color {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   bottom: 0;
michael@0:   right: 20%;
michael@0: }
michael@0: 
michael@0: .spectrum-hue {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   right: 0;
michael@0:   bottom: 0;
michael@0:   left: 83%;
michael@0: }
michael@0: 
michael@0: .spectrum-fill {
michael@0:   /* Same as spectrum-color width */
michael@0:   margin-top: 85%;
michael@0: }
michael@0: 
michael@0: .spectrum-sat, .spectrum-val {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   left: 0;
michael@0:   right: 0;
michael@0:   bottom: 0;
michael@0: }
michael@0: 
michael@0: .spectrum-dragger, .spectrum-slider {
michael@0:   -moz-user-select: none;
michael@0: }
michael@0: 
michael@0: .spectrum-alpha {
michael@0:   position: relative;
michael@0:   height: 8px;
michael@0:   margin-top: 3px;
michael@0: }
michael@0: 
michael@0: .spectrum-alpha-inner {
michael@0:   height: 100%;
michael@0: }
michael@0: 
michael@0: .spectrum-alpha-handle {
michael@0:   position: absolute;
michael@0:   top: -3px;
michael@0:   bottom: -3px;
michael@0:   width: 5px;
michael@0:   left: 50%;
michael@0: }
michael@0: 
michael@0: .spectrum-sat {
michael@0:   background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
michael@0: }
michael@0: 
michael@0: .spectrum-val {
michael@0:   background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
michael@0: }
michael@0: 
michael@0: .spectrum-hue {
michael@0:   background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
michael@0: }
michael@0: 
michael@0: .spectrum-dragger {
michael@0:   position: absolute;
michael@0:   top: 0px;
michael@0:   left: 0px;
michael@0:   cursor: pointer;
michael@0:   border-radius: 50%;
michael@0:   height: 8px;
michael@0:   width: 8px;
michael@0:   border: 1px solid white;
michael@0:   background: black;
michael@0: }
michael@0: 
michael@0: .spectrum-slider {
michael@0:   position: absolute;
michael@0:   top: 0;
michael@0:   height: 5px;
michael@0:   left: -3px;
michael@0:   right: -3px;
michael@0: }