1 /***

     2 Spectrum Colorpicker v1.0.9

     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     z-index: 2147483647;

    16     overflow: hidden;

    17 }

    18 .sp-container.sp-flat {

    19     position: relative;

    20 }

    21 

    22 /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */

    23 .sp-top {

    24   position:relative;

    25   width: 100%;

    26   display:inline-block;

    27 }

    28 .sp-top-inner {

    29    position:absolute;

    30    top:0;

    31    left:0;

    32    bottom:0;

    33    right:0;

    34 }

    35 .sp-color {

    36     position: absolute;

    37     top:0;

    38     left:0;

    39     bottom:0;

    40     right:20%;

    41 }

    42 .sp-hue {

    43     position: absolute;

    44     top:0;

    45     right:0;

    46     bottom:0;

    47     left:84%;

    48     height: 100%;

    49 }

    50 .sp-fill {

    51     padding-top: 80%;

    52 }

    53 .sp-sat, .sp-val {

    54     position: absolute;

    55     top:0;

    56     left:0;

    57     right:0;

    58     bottom:0;

    59 }

    60 

    61 .sp-alpha-enabled .sp-top

    62 {

    63     margin-bottom: 18px;

    64 }

    65 .sp-alpha-enabled .sp-alpha

    66 {

    67     display: block;

    68 }

    69 

    70 .sp-alpha-handle

    71 {

    72     position:absolute;

    73     top:-4px;

    74     bottom: -4px;

    75     width: 6px;

    76     left: 50%;

    77     cursor: pointer;

    78     border: 1px solid black;

    79     background: white;

    80     opacity: .8;

    81 }

    82 

    83 .sp-alpha

    84 {

    85     display: none;

    86     position: absolute;

    87     bottom: -14px;

    88     right: 0;

    89     left: 0;

    90     height: 8px;

    91 }

    92 .sp-alpha-inner{

    93     border: solid 1px #333;

    94 }

    95 

    96 /* Don't allow text selection */

    97 .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {

    98     -webkit-user-select:none;

    99     -moz-user-select: -moz-none;

   100     -o-user-select:none;

   101     user-select: none;

   102 }

   103 

   104 .sp-container.sp-input-disabled .sp-input-container {

   105     display: none;

   106 }

   107 .sp-container.sp-buttons-disabled .sp-button-container {

   108     display: none;

   109 }

   110 .sp-palette-only .sp-picker-container {

   111     display: none;

   112 }

   113 .sp-palette-disabled .sp-palette-container {

   114     display: none;

   115 }

   116 

   117 .sp-initial-disabled .sp-initial {

   118     display: none;

   119 }

   120 

   121 

   122 /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */

   123 .sp-sat {

   124     background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));

   125     background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));

   126     background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));

   127     background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));

   128     background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));

   129     background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));

   130     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";

   131     filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');

   132 }

   133 .sp-val {

   134     background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));

   135     background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));

   136     background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));

   137     background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));

   138     background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));

   139     background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));

   140     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";

   141     filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');

   142 }

   143 

   144 .sp-hue {

   145     background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

   146     background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

   147     background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

   148     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));

   149     background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

   150 }

   151 

   152 /* IE filters do not support multiple color stops.

   153    Generate 6 divs, line them up, and do two color gradients for each.

   154    Yes, really.

   155  */

   156 

   157 .sp-1 {

   158     height:17%;

   159     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');

   160 }

   161 .sp-2 {

   162     height:16%;

   163     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');

   164 }

   165 .sp-3 {

   166     height:17%;

   167     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');

   168 }

   169 .sp-4 {

   170     height:17%;

   171     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');

   172 }

   173 .sp-5 {

   174     height:16%;

   175     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');

   176 }

   177 .sp-6 {

   178     height:17%;

   179     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');

   180 }

   181 

   182 .sp-hidden {

   183     display: none !important;

   184 }

   185 

   186 /* Clearfix hack */

   187 .sp-cf:before, .sp-cf:after { content: ""; display: table; }

   188 .sp-cf:after { clear: both; }

   189 .sp-cf { *zoom: 1; }

   190 

   191 /* Mobile devices, make hue slider bigger so it is easier to slide */

   192 @media (max-device-width: 480px) {

   193     .sp-color { right: 40%; }

   194     .sp-hue { left: 63%; }

   195     .sp-fill { padding-top: 60%; }

   196 }

   197 

   198 .sp-dragger {

   199    border-radius: 5px;

   200    height: 5px;

   201    width: 5px;

   202    border: 1px solid #fff;

   203    background: #000;

   204    cursor: pointer;

   205    position:absolute;

   206    top:0;

   207    left: 0;

   208 }

   209 .sp-slider {

   210     position: absolute;

   211     top:0;

   212     cursor:pointer;

   213     height: 3px;

   214     left: -1px;

   215     right: -1px;

   216     border: 1px solid #000;

   217     background: white;

   218     opacity: .8;

   219 }

   220 

   221 /* Basic display options (colors, fonts, global widths) */

   222 .sp-container {

   223     border-radius: 0;

   224     background-color: #ECECEC;

   225     border: solid 1px #f0c49B;

   226     padding: 0;

   227 }

   228 .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue

   229 {

   230     font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

   231     -webkit-box-sizing: border-box;

   232     -moz-box-sizing: border-box;

   233     -ms-box-sizing: border-box;

   234     box-sizing: border-box;

   235 }

   236 .sp-top

   237 {

   238     margin-bottom: 3px;

   239 }

   240 .sp-color, .sp-hue

   241 {

   242     border: solid 1px #666;

   243 }

   244 

   245 /* Input */

   246 .sp-input-container {

   247     float:right;

   248     width: 100px;

   249     margin-bottom: 4px;

   250 }

   251 .sp-initial-disabled  .sp-input-container {

   252     width: 100%;

   253 }

   254 .sp-input {

   255    font-size: 12px !important;

   256    border: 1px inset;

   257    padding: 4px 5px;

   258    margin: 0;

   259    width: 100%;

   260    background:transparent;

   261    border-radius: 3px;

   262    color: #222;

   263 }

   264 .sp-input:focus  {

   265     border: 1px solid orange;

   266 }

   267 .sp-input.sp-validation-error

   268 {

   269     border: 1px solid red;

   270     background: #fdd;

   271 }

   272 .sp-picker-container , .sp-palette-container

   273 {

   274     float:left;

   275     position: relative;

   276     padding: 10px;

   277     padding-bottom: 300px;

   278     margin-bottom: -290px;

   279 }

   280 .sp-picker-container

   281 {

   282     width: 172px;

   283     border-left: solid 1px #fff;

   284 }

   285 

   286 /* Palettes */

   287 .sp-palette-container

   288 {

   289     border-right: solid 1px #ccc;

   290 }

   291 

   292 .sp-palette .sp-thumb-el {

   293     display: block;

   294     position:relative;

   295     float:left;

   296     width: 24px;

   297     height: 15px;

   298     margin: 3px;

   299     cursor: pointer;

   300     border:solid 2px transparent;

   301 }

   302 .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {

   303     border-color: orange;

   304 }

   305 .sp-thumb-el

   306 {

   307     position:relative;

   308 }

   309 

   310 /* Initial */

   311 .sp-initial

   312 {

   313     float: left;

   314     border: solid 1px #333;

   315 }

   316 .sp-initial span {

   317     width: 30px;

   318     height: 25px;

   319     border:none;

   320     display:block;

   321     float:left;

   322     margin:0;

   323 }

   324 

   325 /* Buttons */

   326 .sp-button-container {

   327     float: right;

   328 }

   329 

   330 /* Replacer (the little preview div that shows up instead of the <input>) */

   331 .sp-replacer {

   332     margin:0;

   333     overflow:hidden;

   334     cursor:pointer;

   335     padding: 4px;

   336     display:inline-block;

   337     *zoom: 1;

   338     *display: inline;

   339     border: solid 1px #91765d;

   340     background: #eee;

   341     color: #333;

   342     vertical-align: middle;

   343 }

   344 .sp-replacer:hover, .sp-replacer.sp-active {

   345     border-color: #F0C49B;

   346     color: #111;

   347 }

   348 .sp-replacer.sp-disabled {

   349     cursor:default;

   350     border-color: silver;

   351     color: silver;

   352 }

   353 .sp-dd {

   354     padding: 2px 0;

   355     height: 16px;

   356     line-height: 16px;

   357     float:left;

   358     font-size:10px;

   359 }

   360 .sp-preview

   361 {

   362     position:relative;

   363     width:25px;

   364     height: 20px;

   365     border: solid 1px #222;

   366     margin-right: 5px;

   367     float:left;

   368     z-index: 0;

   369 }

   370 

   371 .sp-palette

   372 {

   373     *width: 220px;

   374     max-width: 220px;

   375 }

   376 .sp-palette .sp-thumb-el

   377 {

   378     width:16px;

   379     height: 16px;

   380     margin:2px 1px;

   381     border: solid 1px #d0d0d0;

   382 }

   383 

   384 .sp-container

   385 {

   386     padding-bottom:0;

   387 }

   388 

   389 

   390 /* Buttons: http://hellohappy.org/css3-buttons/ */

   391 .sp-container button {

   392   background-color: #eeeeee;

   393   background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);

   394   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);

   395   background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);

   396   background-image: -o-linear-gradient(top, #eeeeee, #cccccc);

   397   background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);

   398   background-image: linear-gradient(to bottom, #eeeeee, #cccccc);

   399   border: 1px solid #ccc;

   400   border-bottom: 1px solid #bbb;

   401   border-radius: 3px;

   402   color: #333;

   403   font-size: 14px;

   404   line-height: 1;

   405   padding: 5px 4px;

   406   text-align: center;

   407   text-shadow: 0 1px 0 #eee;

   408   vertical-align: middle;

   409 }

   410 .sp-container button:hover {

   411     background-color: #dddddd;

   412     background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);

   413     background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);

   414     background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);

   415     background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);

   416     background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);

   417     background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);

   418     border: 1px solid #bbb;

   419     border-bottom: 1px solid #999;

   420     cursor: pointer;

   421     text-shadow: 0 1px 0 #ddd;

   422 }

   423 .sp-container button:active {

   424     border: 1px solid #aaa;

   425     border-bottom: 1px solid #888;

   426     -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;

   427     -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;

   428     -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;

   429     -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;

   430     box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;

   431 }

   432 .sp-cancel

   433 {

   434     font-size: 11px;

   435     color: #d93f3f !important;

   436     margin:0;

   437     padding:2px;

   438     margin-right: 5px;

   439     vertical-align: middle;

   440     text-decoration:none;

   441 

   442 }

   443 .sp-cancel:hover

   444 {

   445     color: #d93f3f !important;

   446     text-decoration: underline;

   447 }

   448 

   449 

   450 .sp-palette span:hover, .sp-palette span.sp-thumb-active

   451 {

   452     border-color: #000;

   453 }

   454 

   455 .sp-preview, .sp-alpha, .sp-thumb-el

   456 {

   457     position:relative;

   458     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);

   459 }

   460 .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner

   461 {

   462     display:block;

   463     position:absolute;

   464     top:0;left:0;bottom:0;right:0;

   465 }

   466 

   467 .sp-palette .sp-thumb-inner

   468 {

   469     background-position: 50% 50%;

   470     background-repeat: no-repeat;

   471 }

   472 

   473 .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner

   474 {

   475     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);

   476 }

   477 

   478 .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner

   479 {

   480     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);

   481 }