browser/devtools/shared/widgets/spectrum.css@a63d609f5ebe (annotated)
browser/devtools/shared/widgets/spectrum.css
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
| michael@0 | 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| michael@0 | 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
| michael@0 | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| michael@0 | 4 | |
| michael@0 | 5 | #eyedropper-button { |
| michael@0 | 6 | background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); |
| michael@0 | 7 | width: 16px; |
| michael@0 | 8 | height: 16px; |
| michael@0 | 9 | background-size: 64px 16px; |
| michael@0 | 10 | background-position: 0 center; |
| michael@0 | 11 | background-repeat: no-repeat; |
| michael@0 | 12 | -moz-margin-start: 5px; |
| michael@0 | 13 | border-radius: 2px; |
| michael@0 | 14 | cursor: pointer; |
| michael@0 | 15 | } |
| michael@0 | 16 | |
| michael@0 | 17 | .theme-light #eyedropper-button { |
| michael@0 | 18 | filter: url(chrome://browser/skin/devtools/filters.svg#invert); |
| michael@0 | 19 | border: 1px solid #AAA; |
| michael@0 | 20 | } |
| michael@0 | 21 | |
| michael@0 | 22 | .theme-dark #eyedropper-button { |
| michael@0 | 23 | border: 1px solid #444; |
| michael@0 | 24 | } |
| michael@0 | 25 | |
| michael@0 | 26 | #eyedropper-button:hover { |
| michael@0 | 27 | background-position: -16px center; |
| michael@0 | 28 | } |
| michael@0 | 29 | #eyedropper-button:hover:active { |
| michael@0 | 30 | background-position: -32px center; |
| michael@0 | 31 | } |
| michael@0 | 32 | #eyedropper-button[checked=true] { |
| michael@0 | 33 | background-position: -48px center; |
| michael@0 | 34 | } |
| michael@0 | 35 | |
| michael@0 | 36 | @media (min-resolution: 2dppx) { |
| michael@0 | 37 | #eyedropper-button { |
| michael@0 | 38 | background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); |
| michael@0 | 39 | } |
| michael@0 | 40 | } |
| michael@0 | 41 | |
| michael@0 | 42 | /* Mix-in classes */ |
| michael@0 | 43 | |
| michael@0 | 44 | .spectrum-checker { |
| michael@0 | 45 | background-color: #eee; |
| michael@0 | 46 | background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), |
| michael@0 | 47 | linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); |
| michael@0 | 48 | background-size: 12px 12px; |
| michael@0 | 49 | background-position: 0 0, 6px 6px; |
| michael@0 | 50 | } |
| michael@0 | 51 | |
| michael@0 | 52 | .spectrum-slider-control { |
| michael@0 | 53 | cursor: pointer; |
| michael@0 | 54 | border: 1px solid black; |
| michael@0 | 55 | background: white; |
| michael@0 | 56 | opacity: .7; |
| michael@0 | 57 | } |
| michael@0 | 58 | |
| michael@0 | 59 | .spectrum-box { |
| michael@0 | 60 | border: solid 1px #333; |
| michael@0 | 61 | } |
| michael@0 | 62 | |
| michael@0 | 63 | /* Elements */ |
| michael@0 | 64 | |
| michael@0 | 65 | .spectrum-container { |
| michael@0 | 66 | position: relative; |
| michael@0 | 67 | display: none; |
| michael@0 | 68 | top: 0; |
| michael@0 | 69 | left: 0; |
| michael@0 | 70 | border-radius: 0; |
| michael@0 | 71 | width: 200px; |
| michael@0 | 72 | padding: 5px; |
| michael@0 | 73 | } |
| michael@0 | 74 | |
| michael@0 | 75 | .spectrum-show { |
| michael@0 | 76 | display: inline-block; |
| michael@0 | 77 | } |
| michael@0 | 78 | |
| michael@0 | 79 | /* Keep aspect ratio: |
| michael@0 | 80 | http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */ |
| michael@0 | 81 | .spectrum-top { |
| michael@0 | 82 | position: relative; |
| michael@0 | 83 | width: 100%; |
| michael@0 | 84 | display: inline-block; |
| michael@0 | 85 | } |
| michael@0 | 86 | |
| michael@0 | 87 | .spectrum-top-inner { |
| michael@0 | 88 | position: absolute; |
| michael@0 | 89 | top:0; |
| michael@0 | 90 | left:0; |
| michael@0 | 91 | bottom:0; |
| michael@0 | 92 | right:0; |
| michael@0 | 93 | } |
| michael@0 | 94 | |
| michael@0 | 95 | .spectrum-color { |
| michael@0 | 96 | position: absolute; |
| michael@0 | 97 | top: 0; |
| michael@0 | 98 | left: 0; |
| michael@0 | 99 | bottom: 0; |
| michael@0 | 100 | right: 20%; |
| michael@0 | 101 | } |
| michael@0 | 102 | |
| michael@0 | 103 | .spectrum-hue { |
| michael@0 | 104 | position: absolute; |
| michael@0 | 105 | top: 0; |
| michael@0 | 106 | right: 0; |
| michael@0 | 107 | bottom: 0; |
| michael@0 | 108 | left: 83%; |
| michael@0 | 109 | } |
| michael@0 | 110 | |
| michael@0 | 111 | .spectrum-fill { |
| michael@0 | 112 | /* Same as spectrum-color width */ |
| michael@0 | 113 | margin-top: 85%; |
| michael@0 | 114 | } |
| michael@0 | 115 | |
| michael@0 | 116 | .spectrum-sat, .spectrum-val { |
| michael@0 | 117 | position: absolute; |
| michael@0 | 118 | top: 0; |
| michael@0 | 119 | left: 0; |
| michael@0 | 120 | right: 0; |
| michael@0 | 121 | bottom: 0; |
| michael@0 | 122 | } |
| michael@0 | 123 | |
| michael@0 | 124 | .spectrum-dragger, .spectrum-slider { |
| michael@0 | 125 | -moz-user-select: none; |
| michael@0 | 126 | } |
| michael@0 | 127 | |
| michael@0 | 128 | .spectrum-alpha { |
| michael@0 | 129 | position: relative; |
| michael@0 | 130 | height: 8px; |
| michael@0 | 131 | margin-top: 3px; |
| michael@0 | 132 | } |
| michael@0 | 133 | |
| michael@0 | 134 | .spectrum-alpha-inner { |
| michael@0 | 135 | height: 100%; |
| michael@0 | 136 | } |
| michael@0 | 137 | |
| michael@0 | 138 | .spectrum-alpha-handle { |
| michael@0 | 139 | position: absolute; |
| michael@0 | 140 | top: -3px; |
| michael@0 | 141 | bottom: -3px; |
| michael@0 | 142 | width: 5px; |
| michael@0 | 143 | left: 50%; |
| michael@0 | 144 | } |
| michael@0 | 145 | |
| michael@0 | 146 | .spectrum-sat { |
| michael@0 | 147 | background-image: -moz-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); |
| michael@0 | 148 | } |
| michael@0 | 149 | |
| michael@0 | 150 | .spectrum-val { |
| michael@0 | 151 | background-image: -moz-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); |
| michael@0 | 152 | } |
| michael@0 | 153 | |
| michael@0 | 154 | .spectrum-hue { |
| michael@0 | 155 | background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
| michael@0 | 156 | } |
| michael@0 | 157 | |
| michael@0 | 158 | .spectrum-dragger { |
| michael@0 | 159 | position: absolute; |
| michael@0 | 160 | top: 0px; |
| michael@0 | 161 | left: 0px; |
| michael@0 | 162 | cursor: pointer; |
| michael@0 | 163 | border-radius: 50%; |
| michael@0 | 164 | height: 8px; |
| michael@0 | 165 | width: 8px; |
| michael@0 | 166 | border: 1px solid white; |
| michael@0 | 167 | background: black; |
| michael@0 | 168 | } |
| michael@0 | 169 | |
| michael@0 | 170 | .spectrum-slider { |
| michael@0 | 171 | position: absolute; |
| michael@0 | 172 | top: 0; |
| michael@0 | 173 | height: 5px; |
| michael@0 | 174 | left: -3px; |
| michael@0 | 175 | right: -3px; |
| michael@0 | 176 | } |
