httemplate/elements/spectrum.css

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