You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
4.4 KiB
178 lines
4.4 KiB
|
|
div.vis-color-picker {
|
|
position:absolute;
|
|
top: 0px;
|
|
left: 30px;
|
|
margin-top:-140px;
|
|
margin-left:30px;
|
|
width:310px;
|
|
height:444px;
|
|
z-index: 1;
|
|
padding: 10px;
|
|
border-radius:15px;
|
|
background-color:#ffffff;
|
|
display: none;
|
|
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-arrow {
|
|
position: absolute;
|
|
top:147px;
|
|
left:5px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-arrow::after,
|
|
div.vis-color-picker div.vis-arrow::before {
|
|
right: 100%;
|
|
top: 50%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-arrow:after {
|
|
border-color: rgba(255, 255, 255, 0);
|
|
border-right-color: #ffffff;
|
|
border-width: 30px;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-color {
|
|
position:absolute;
|
|
width: 289px;
|
|
height: 289px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
div.vis-color-picker div.vis-brightness {
|
|
position: absolute;
|
|
top:313px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-opacity {
|
|
position:absolute;
|
|
top:350px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-selector {
|
|
position:absolute;
|
|
top:137px;
|
|
left:137px;
|
|
width:15px;
|
|
height:15px;
|
|
border-radius:15px;
|
|
border:1px solid #ffffff;
|
|
background: #4c4c4c; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
|
|
|
|
div.vis-color-picker div.vis-new-color {
|
|
position:absolute;
|
|
width:140px;
|
|
height:20px;
|
|
border:1px solid rgba(0,0,0,0.1);
|
|
border-radius:5px;
|
|
top:380px;
|
|
left:159px;
|
|
text-align:right;
|
|
padding-right:2px;
|
|
font-size:10px;
|
|
color:rgba(0,0,0,0.4);
|
|
vertical-align:middle;
|
|
line-height:20px;
|
|
|
|
}
|
|
|
|
div.vis-color-picker div.vis-initial-color {
|
|
position:absolute;
|
|
width:140px;
|
|
height:20px;
|
|
border:1px solid rgba(0,0,0,0.1);
|
|
border-radius:5px;
|
|
top:380px;
|
|
left:10px;
|
|
text-align:left;
|
|
padding-left:2px;
|
|
font-size:10px;
|
|
color:rgba(0,0,0,0.4);
|
|
vertical-align:middle;
|
|
line-height:20px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-label {
|
|
position:absolute;
|
|
width:300px;
|
|
left:10px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-label.vis-brightness {
|
|
top:300px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-label.vis-opacity {
|
|
top:338px;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-button {
|
|
position:absolute;
|
|
width:68px;
|
|
height:25px;
|
|
border-radius:10px;
|
|
vertical-align: middle;
|
|
text-align:center;
|
|
line-height: 25px;
|
|
top:410px;
|
|
border:2px solid #d9d9d9;
|
|
background-color: #f7f7f7;
|
|
cursor:pointer;
|
|
}
|
|
|
|
div.vis-color-picker div.vis-button.vis-cancel {
|
|
/*border:2px solid #ff4e33;*/
|
|
/*background-color: #ff7761;*/
|
|
left:5px;
|
|
}
|
|
div.vis-color-picker div.vis-button.vis-load {
|
|
/*border:2px solid #a153e6;*/
|
|
/*background-color: #cb8dff;*/
|
|
left:82px;
|
|
}
|
|
div.vis-color-picker div.vis-button.vis-apply {
|
|
/*border:2px solid #4588e6;*/
|
|
/*background-color: #82b6ff;*/
|
|
left:159px;
|
|
}
|
|
div.vis-color-picker div.vis-button.vis-save {
|
|
/*border:2px solid #45e655;*/
|
|
/*background-color: #6dff7c;*/
|
|
left:236px;
|
|
}
|
|
|
|
|
|
div.vis-color-picker input.vis-range {
|
|
width: 290px;
|
|
height:20px;
|
|
}
|
|
|
|
/* TODO: is this redundant?
|
|
div.vis-color-picker input.vis-range-brightness {
|
|
width: 289px !important;
|
|
}
|
|
|
|
|
|
div.vis-color-picker input.vis-saturation-range {
|
|
width: 289px !important;
|
|
}*/
|