1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/shared/widgets/spectrum.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,176 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +#eyedropper-button {
1.9 + background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
1.10 + width: 16px;
1.11 + height: 16px;
1.12 + background-size: 64px 16px;
1.13 + background-position: 0 center;
1.14 + background-repeat: no-repeat;
1.15 + -moz-margin-start: 5px;
1.16 + border-radius: 2px;
1.17 + cursor: pointer;
1.18 +}
1.19 +
1.20 +.theme-light #eyedropper-button {
1.21 + filter: url(chrome://browser/skin/devtools/filters.svg#invert);
1.22 + border: 1px solid #AAA;
1.23 +}
1.24 +
1.25 +.theme-dark #eyedropper-button {
1.26 + border: 1px solid #444;
1.27 +}
1.28 +
1.29 +#eyedropper-button:hover {
1.30 + background-position: -16px center;
1.31 +}
1.32 +#eyedropper-button:hover:active {
1.33 + background-position: -32px center;
1.34 +}
1.35 +#eyedropper-button[checked=true] {
1.36 + background-position: -48px center;
1.37 +}
1.38 +
1.39 +@media (min-resolution: 2dppx) {
1.40 + #eyedropper-button {
1.41 + background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
1.42 + }
1.43 +}
1.44 +
1.45 +/* Mix-in classes */
1.46 +
1.47 +.spectrum-checker {
1.48 + background-color: #eee;
1.49 + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
1.50 + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
1.51 + background-size: 12px 12px;
1.52 + background-position: 0 0, 6px 6px;
1.53 +}
1.54 +
1.55 +.spectrum-slider-control {
1.56 + cursor: pointer;
1.57 + border: 1px solid black;
1.58 + background: white;
1.59 + opacity: .7;
1.60 +}
1.61 +
1.62 +.spectrum-box {
1.63 + border: solid 1px #333;
1.64 +}
1.65 +
1.66 +/* Elements */
1.67 +
1.68 +.spectrum-container {
1.69 + position: relative;
1.70 + display: none;
1.71 + top: 0;
1.72 + left: 0;
1.73 + border-radius: 0;
1.74 + width: 200px;
1.75 + padding: 5px;
1.76 +}
1.77 +
1.78 +.spectrum-show {
1.79 + display: inline-block;
1.80 +}
1.81 +
1.82 +/* Keep aspect ratio:
1.83 +http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
1.84 +.spectrum-top {
1.85 + position: relative;
1.86 + width: 100%;
1.87 + display: inline-block;
1.88 +}
1.89 +
1.90 +.spectrum-top-inner {
1.91 + position: absolute;
1.92 + top:0;
1.93 + left:0;
1.94 + bottom:0;
1.95 + right:0;
1.96 +}
1.97 +
1.98 +.spectrum-color {
1.99 + position: absolute;
1.100 + top: 0;
1.101 + left: 0;
1.102 + bottom: 0;
1.103 + right: 20%;
1.104 +}
1.105 +
1.106 +.spectrum-hue {
1.107 + position: absolute;
1.108 + top: 0;
1.109 + right: 0;
1.110 + bottom: 0;
1.111 + left: 83%;
1.112 +}
1.113 +
1.114 +.spectrum-fill {
1.115 + /* Same as spectrum-color width */
1.116 + margin-top: 85%;
1.117 +}
1.118 +
1.119 +.spectrum-sat, .spectrum-val {
1.120 + position: absolute;
1.121 + top: 0;
1.122 + left: 0;
1.123 + right: 0;
1.124 + bottom: 0;
1.125 +}
1.126 +
1.127 +.spectrum-dragger, .spectrum-slider {
1.128 + -moz-user-select: none;
1.129 +}
1.130 +
1.131 +.spectrum-alpha {
1.132 + position: relative;
1.133 + height: 8px;
1.134 + margin-top: 3px;
1.135 +}
1.136 +
1.137 +.spectrum-alpha-inner {
1.138 + height: 100%;
1.139 +}
1.140 +
1.141 +.spectrum-alpha-handle {
1.142 + position: absolute;
1.143 + top: -3px;
1.144 + bottom: -3px;
1.145 + width: 5px;
1.146 + left: 50%;
1.147 +}
1.148 +
1.149 +.spectrum-sat {
1.150 + background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
1.151 +}
1.152 +
1.153 +.spectrum-val {
1.154 + background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
1.155 +}
1.156 +
1.157 +.spectrum-hue {
1.158 + background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
1.159 +}
1.160 +
1.161 +.spectrum-dragger {
1.162 + position: absolute;
1.163 + top: 0px;
1.164 + left: 0px;
1.165 + cursor: pointer;
1.166 + border-radius: 50%;
1.167 + height: 8px;
1.168 + width: 8px;
1.169 + border: 1px solid white;
1.170 + background: black;
1.171 +}
1.172 +
1.173 +.spectrum-slider {
1.174 + position: absolute;
1.175 + top: 0;
1.176 + height: 5px;
1.177 + left: -3px;
1.178 + right: -3px;
1.179 +}
