source: other-projects/nz-flag-design/trunk/main-form/bgrins-spectrum/spectrum.css@ 29741

Last change on this file since 29741 was 29741, checked in by davidb, 9 years ago

Support JS library for colour picker
  • Property svn:executable set to *
File size: 14.6 KB
Line 
1/***
2Spectrum Colorpicker v1.6.0
3https://github.com/bgrins/spectrum
4Author: Brian Grinstead
5License: MIT
6***/
7
8.sp-container {
9 position:absolute;
10 top:0;
11 left:0;
12 display:inline-block;
13 *display: inline;
14 *zoom: 1;
15 /* https://github.com/bgrins/spectrum/issues/40 */
16 z-index: 9999994;
17 overflow: hidden;
18}
19.sp-container.sp-flat {
20 position: relative;
21}
22
23/* Fix for * { box-sizing: border-box; } */
24.sp-container,
25.sp-container * {
26 -webkit-box-sizing: content-box;
27 -moz-box-sizing: content-box;
28 box-sizing: content-box;
29}
30
31/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
32.sp-top {
33 position:relative;
34 width: 100%;
35 display:inline-block;
36}
37.sp-top-inner {
38 position:absolute;
39 top:0;
40 left:0;
41 bottom:0;
42 right:0;
43}
44.sp-color {
45 position: absolute;
46 top:0;
47 left:0;
48 bottom:0;
49 right:20%;
50}
51.sp-hue {
52 position: absolute;
53 top:0;
54 right:0;
55 bottom:0;
56 left:84%;
57 height: 100%;
58}
59
60.sp-clear-enabled .sp-hue {
61 top:33px;
62 height: 77.5%;
63}
64
65.sp-fill {
66 padding-top: 80%;
67}
68.sp-sat, .sp-val {
69 position: absolute;
70 top:0;
71 left:0;
72 right:0;
73 bottom:0;
74}
75
76.sp-alpha-enabled .sp-top {
77 margin-bottom: 18px;
78}
79.sp-alpha-enabled .sp-alpha {
80 display: block;
81}
82.sp-alpha-handle {
83 position:absolute;
84 top:-4px;
85 bottom: -4px;
86 width: 6px;
87 left: 50%;
88 cursor: pointer;
89 border: 1px solid black;
90 background: white;
91 opacity: .8;
92}
93.sp-alpha {
94 display: none;
95 position: absolute;
96 bottom: -14px;
97 right: 0;
98 left: 0;
99 height: 8px;
100}
101.sp-alpha-inner {
102 border: solid 1px #333;
103}
104
105.sp-clear {
106 display: none;
107}
108
109.sp-clear.sp-clear-display {
110 background-position: center;
111}
112
113.sp-clear-enabled .sp-clear {
114 display: block;
115 position:absolute;
116 top:0px;
117 right:0;
118 bottom:0;
119 left:84%;
120 height: 28px;
121}
122
123/* Don't allow text selection */
124.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
125 -webkit-user-select:none;
126 -moz-user-select: -moz-none;
127 -o-user-select:none;
128 user-select: none;
129}
130
131.sp-container.sp-input-disabled .sp-input-container {
132 display: none;
133}
134.sp-container.sp-buttons-disabled .sp-button-container {
135 display: none;
136}
137.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
138 display: none;
139}
140.sp-palette-only .sp-picker-container {
141 display: none;
142}
143.sp-palette-disabled .sp-palette-container {
144 display: none;
145}
146
147.sp-initial-disabled .sp-initial {
148 display: none;
149}
150
151
152/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
153.sp-sat {
154 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
155 background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
156 background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
157 background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
158 background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
159 background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
160 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
161 filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
162}
163.sp-val {
164 background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
165 background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
166 background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
167 background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
168 background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
169 background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
170 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
171 filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
172}
173
174.sp-hue {
175 background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
176 background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
177 background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
178 background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
179 background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
180 background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
181}
182
183/* IE filters do not support multiple color stops.
184 Generate 6 divs, line them up, and do two color gradients for each.
185 Yes, really.
186 */
187.sp-1 {
188 height:17%;
189 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
190}
191.sp-2 {
192 height:16%;
193 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
194}
195.sp-3 {
196 height:17%;
197 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
198}
199.sp-4 {
200 height:17%;
201 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
202}
203.sp-5 {
204 height:16%;
205 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
206}
207.sp-6 {
208 height:17%;
209 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
210}
211
212.sp-hidden {
213 display: none !important;
214}
215
216/* Clearfix hack */
217.sp-cf:before, .sp-cf:after { content: ""; display: table; }
218.sp-cf:after { clear: both; }
219.sp-cf { *zoom: 1; }
220
221/* Mobile devices, make hue slider bigger so it is easier to slide */
222@media (max-device-width: 480px) {
223 .sp-color { right: 40%; }
224 .sp-hue { left: 63%; }
225 .sp-fill { padding-top: 60%; }
226}
227.sp-dragger {
228 border-radius: 5px;
229 height: 5px;
230 width: 5px;
231 border: 1px solid #fff;
232 background: #000;
233 cursor: pointer;
234 position:absolute;
235 top:0;
236 left: 0;
237}
238.sp-slider {
239 position: absolute;
240 top:0;
241 cursor:pointer;
242 height: 3px;
243 left: -1px;
244 right: -1px;
245 border: 1px solid #000;
246 background: white;
247 opacity: .8;
248}
249
250/*
251Theme authors:
252Here are the basic themeable display options (colors, fonts, global widths).
253See http://bgrins.github.io/spectrum/themes/ for instructions.
254*/
255
256.sp-container {
257 border-radius: 0;
258 background-color: #ECECEC;
259 border: solid 1px #f0c49B;
260 padding: 0;
261}
262.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
263 font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
264 -webkit-box-sizing: border-box;
265 -moz-box-sizing: border-box;
266 -ms-box-sizing: border-box;
267 box-sizing: border-box;
268}
269.sp-top {
270 margin-bottom: 3px;
271}
272.sp-color, .sp-hue, .sp-clear {
273 border: solid 1px #666;
274}
275
276/* Input */
277.sp-input-container {
278 float:right;
279 width: 100px;
280 margin-bottom: 4px;
281}
282.sp-initial-disabled .sp-input-container {
283 width: 100%;
284}
285.sp-input {
286 font-size: 12px !important;
287 border: 1px inset;
288 padding: 4px 5px;
289 margin: 0;
290 width: 100%;
291 background:transparent;
292 border-radius: 3px;
293 color: #222;
294}
295.sp-input:focus {
296 border: 1px solid orange;
297}
298.sp-input.sp-validation-error {
299 border: 1px solid red;
300 background: #fdd;
301}
302.sp-picker-container , .sp-palette-container {
303 float:left;
304 position: relative;
305 padding: 10px;
306 padding-bottom: 300px;
307 margin-bottom: -290px;
308}
309.sp-picker-container {
310 width: 172px;
311 border-left: solid 1px #fff;
312}
313
314/* Palettes */
315.sp-palette-container {
316 border-right: solid 1px #ccc;
317}
318
319.sp-palette-only .sp-palette-container {
320 border: 0;
321}
322
323.sp-palette .sp-thumb-el {
324 display: block;
325 position:relative;
326 float:left;
327 width: 24px;
328 height: 15px;
329 margin: 3px;
330 cursor: pointer;
331 border:solid 2px transparent;
332}
333.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
334 border-color: orange;
335}
336.sp-thumb-el {
337 position:relative;
338}
339
340/* Initial */
341.sp-initial {
342 float: left;
343 border: solid 1px #333;
344}
345.sp-initial span {
346 width: 30px;
347 height: 25px;
348 border:none;
349 display:block;
350 float:left;
351 margin:0;
352}
353
354.sp-initial .sp-clear-display {
355 background-position: center;
356}
357
358/* Buttons */
359.sp-palette-button-container,
360.sp-button-container {
361 float: right;
362}
363
364/* Replacer (the little preview div that shows up instead of the <input>) */
365.sp-replacer {
366 margin:0;
367 overflow:hidden;
368 cursor:pointer;
369 padding: 4px;
370 display:inline-block;
371 *zoom: 1;
372 *display: inline;
373 border: solid 1px #91765d;
374 background: #eee;
375 color: #333;
376 vertical-align: middle;
377}
378.sp-replacer:hover, .sp-replacer.sp-active {
379 border-color: #F0C49B;
380 color: #111;
381}
382.sp-replacer.sp-disabled {
383 cursor:default;
384 border-color: silver;
385 color: silver;
386}
387.sp-dd {
388 padding: 2px 0;
389 height: 16px;
390 line-height: 16px;
391 float:left;
392 font-size:10px;
393}
394.sp-preview {
395 position:relative;
396 width:25px;
397 height: 20px;
398 border: solid 1px #222;
399 margin-right: 5px;
400 float:left;
401 z-index: 0;
402}
403
404.sp-palette {
405 *width: 220px;
406 max-width: 220px;
407}
408.sp-palette .sp-thumb-el {
409 width:16px;
410 height: 16px;
411 margin:2px 1px;
412 border: solid 1px #d0d0d0;
413}
414
415.sp-container {
416 padding-bottom:0;
417}
418
419
420/* Buttons: http://hellohappy.org/css3-buttons/ */
421.sp-container button {
422 background-color: #eeeeee;
423 background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
424 background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
425 background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
426 background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
427 background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
428 border: 1px solid #ccc;
429 border-bottom: 1px solid #bbb;
430 border-radius: 3px;
431 color: #333;
432 font-size: 14px;
433 line-height: 1;
434 padding: 5px 4px;
435 text-align: center;
436 text-shadow: 0 1px 0 #eee;
437 vertical-align: middle;
438}
439.sp-container button:hover {
440 background-color: #dddddd;
441 background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
442 background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
443 background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
444 background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
445 background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
446 border: 1px solid #bbb;
447 border-bottom: 1px solid #999;
448 cursor: pointer;
449 text-shadow: 0 1px 0 #ddd;
450}
451.sp-container button:active {
452 border: 1px solid #aaa;
453 border-bottom: 1px solid #888;
454 -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
455 -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
456 -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
457 -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
458 box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
459}
460.sp-cancel {
461 font-size: 11px;
462 color: #d93f3f !important;
463 margin:0;
464 padding:2px;
465 margin-right: 5px;
466 vertical-align: middle;
467 text-decoration:none;
468
469}
470.sp-cancel:hover {
471 color: #d93f3f !important;
472 text-decoration: underline;
473}
474
475
476.sp-palette span:hover, .sp-palette span.sp-thumb-active {
477 border-color: #000;
478}
479
480.sp-preview, .sp-alpha, .sp-thumb-el {
481 position:relative;
482 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
483}
484.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
485 display:block;
486 position:absolute;
487 top:0;left:0;bottom:0;right:0;
488}
489
490.sp-palette .sp-thumb-inner {
491 background-position: 50% 50%;
492 background-repeat: no-repeat;
493}
494
495.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
496 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
497}
498
499.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
500 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
501}
502
503.sp-clear-display {
504 background-repeat:no-repeat;
505 background-position: center;
506 background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
507}
Note: See TracBrowser for help on using the repository browser.