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