stupid files
[kismet-logviewer.git] / logviewer / static / css / spectrum.css
1 /***
2 Spectrum Colorpicker v1.8.0
3 https://github.com/bgrins/spectrum
4 Author: Brian Grinstead
5 License: 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 /*
251 Theme authors:
252 Here are the basic themeable display options (colors, fonts, global widths).
253 See 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 }