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 }