|
|
|
body{
|
|
|
|
background-color: #222;
|
|
|
|
background: url(data:image/jpg;base64,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
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
color: #aaaaaa;
|
|
|
|
}
|
|
|
|
.cp-app {
|
|
|
|
position: relative;
|
|
|
|
float: left;
|
|
|
|
margin: 10px 0 0 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#testPatch {
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 20px;
|
|
|
|
width: 100px;
|
|
|
|
height: 48px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 48px;
|
|
|
|
font-family: Courier,mono;
|
|
|
|
border: 1px solid #444;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
#contrastPatch {
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 72px;
|
|
|
|
width: 100px;
|
|
|
|
height: 48px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 48px;
|
|
|
|
font-family: Courier,mono;
|
|
|
|
border: 1px solid #444;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
#contrastPatch div {
|
|
|
|
position: absolute;
|
|
|
|
top: 5px;
|
|
|
|
right: 50%;
|
|
|
|
bottom: 5px;
|
|
|
|
left: 5px;
|
|
|
|
}
|
|
|
|
#contrastPatch i {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
#colorValues {
|
|
|
|
position: absolute;
|
|
|
|
right: 140px;
|
|
|
|
top: 20px;
|
|
|
|
height: 102px;
|
|
|
|
/* width: 183px; */
|
|
|
|
width: 200px;
|
|
|
|
font-family: Courier,mono;
|
|
|
|
border: 1px solid #444;
|
|
|
|
color: #aaaaaa;
|
|
|
|
padding: 2px 0px 2px 4px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
font-size: 14px;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
line-height: 16px;
|
|
|
|
background-color: #222;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
.sliders {
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 140px;
|
|
|
|
width: 303px;
|
|
|
|
}
|
|
|
|
.sliders div {
|
|
|
|
height: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
border: 1px solid #444;
|
|
|
|
background-color: #222;
|
|
|
|
}
|
|
|
|
.sliders div div {
|
|
|
|
height: 10px;
|
|
|
|
margin-bottom: 0px;
|
|
|
|
border: none;
|
|
|
|
background-color: #333;
|
|
|
|
border-right: 1px solid #555;
|
|
|
|
}
|
|
|
|
#rgbR {
|
|
|
|
background-color: #0ff;
|
|
|
|
}
|
|
|
|
#rgbG {
|
|
|
|
background-color: #f0f;
|
|
|
|
}
|
|
|
|
#rgbB {
|
|
|
|
background-color: #ff0;
|
|
|
|
}
|
|
|
|
#rgbR div {
|
|
|
|
background-color: #c00;
|
|
|
|
}
|
|
|
|
#rgbG div {
|
|
|
|
background-color: #0a0;
|
|
|
|
}
|
|
|
|
#rgbB div {
|
|
|
|
background-color: #00f;
|
|
|
|
}
|
|
|
|
#cmyC div {
|
|
|
|
background-color: #0ff;
|
|
|
|
}
|
|
|
|
#cmyM div {
|
|
|
|
background-color: #f0f;
|
|
|
|
}
|
|
|
|
#cmyY div {
|
|
|
|
background-color: #ff0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#rgbR:before, #rgbG:before, #rgbB:before,
|
|
|
|
#hslH:before, #hslS:before, #hslL:before,
|
|
|
|
#cmyC:before, #cmyM:before, #cmyY:before{
|
|
|
|
display: block;
|
|
|
|
float: left;
|
|
|
|
margin-left: -18px;
|
|
|
|
margin-top: -3px;
|
|
|
|
color: #808080;
|
|
|
|
|
|
|
|
font-family: Courier,mono;
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 15px;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
#rgbR:after, #rgbG:after, #rgbB:after {
|
|
|
|
display: block;
|
|
|
|
float: right;
|
|
|
|
margin-top: -12px;
|
|
|
|
margin-right: -1em;
|
|
|
|
color: #808080;
|
|
|
|
|
|
|
|
font-family: Courier,mono;
|
|
|
|
font-size: 15px;
|
|
|
|
line-height: 15px;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
#rgbR:before {
|
|
|
|
content: 'R';
|
|
|
|
}
|
|
|
|
#rgbG:before {
|
|
|
|
content: 'G';
|
|
|
|
}
|
|
|
|
#rgbB:before {
|
|
|
|
content: 'B';
|
|
|
|
}
|
|
|
|
#rgbR:after {
|
|
|
|
content: 'C';
|
|
|
|
}
|
|
|
|
#rgbG:after {
|
|
|
|
content: 'M';
|
|
|
|
}
|
|
|
|
#rgbB:after {
|
|
|
|
content: 'Y';
|
|
|
|
}
|
|
|
|
#hslH:before {
|
|
|
|
content: 'H';
|
|
|
|
}
|
|
|
|
#hslS:before {
|
|
|
|
content: 'S';
|
|
|
|
}
|
|
|
|
#hslL:before {
|
|
|
|
content: 'L';
|
|
|
|
}
|
|
|
|
#cmyC:before {
|
|
|
|
content: 'C';
|
|
|
|
}
|
|
|
|
#cmyM:before {
|
|
|
|
content: 'M';
|
|
|
|
}
|
|
|
|
#cmyY:before {
|
|
|
|
content: 'Y';
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#hsv_map {
|
|
|
|
width: 240px;
|
|
|
|
height: 200px;
|
|
|
|
position: absolute;
|
|
|
|
right: 350px;
|
|
|
|
top: 20px;
|
|
|
|
}
|
|
|
|
#hsv_map .cover {
|
|
|
|
opacity: 0;
|
|
|
|
background-color: #000;
|
|
|
|
position: absolute;
|
|
|
|
top: -1px;
|
|
|
|
right: 39px;
|
|
|
|
bottom: -1px;
|
|
|
|
left: -1px;
|
|
|
|
border-radius: 50%;
|
|
|
|
cursor: crosshair;
|
|
|
|
}
|
|
|
|
#hsv_map .bar-bg, #hsv_map .bar-white {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 25px;
|
|
|
|
height: 200px;
|
|
|
|
|
|
|
|
}
|
|
|
|
#hsv_map .bar-bg {
|
|
|
|
|
|
|
|
}
|
|
|
|
#hsv_map .bar-white {
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.hsv-cursor {
|
|
|
|
position: absolute;
|
|
|
|
border: 1px solid #eee;
|
|
|
|
border-radius: 50%;
|
|
|
|
width: 9px;
|
|
|
|
height: 9px;
|
|
|
|
cursor: default;
|
|
|
|
margin: -5px;
|
|
|
|
cursor: crosshair;
|
|
|
|
}
|
|
|
|
.dark .hsv-cursor {
|
|
|
|
border-color: #333;
|
|
|
|
}
|
|
|
|
.no-cursor .hsv-cursor, #hsv_map.no-cursor .cover {
|
|
|
|
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12P4//8/MwAI/wMBbrqo4gAAAABJRU5ErkJggg==), auto;
|
|
|
|
/*url(_blank.gif), url(_blank.png), url(_blank.cur), auto;*/
|
|
|
|
}
|
|
|
|
#luminanceBar {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
/* background-color: red; */
|
|
|
|
}
|
|
|
|
.hsv-barcursors {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
width: 25px;
|
|
|
|
top: 0;
|
|
|
|
height: 200px;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.hsv-barcursor-l, .hsv-barcursor-r {
|
|
|
|
position: absolute;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border: 4px solid transparent;
|
|
|
|
margin-top: -4px;
|
|
|
|
}
|
|
|
|
.hsv-barcursor-l {
|
|
|
|
left: 0;
|
|
|
|
border-left: 4px solid #eee;
|
|
|
|
}
|
|
|
|
.hsv-barcursor-r {
|
|
|
|
right: 0;
|
|
|
|
border-right: 4px solid #eee;
|
|
|
|
}
|
|
|
|
.dark .hsv-barcursor-l {
|
|
|
|
border-left-color: #333;
|
|
|
|
}
|
|
|
|
.dark .hsv-barcursor-r {
|
|
|
|
border-right-color: #333;
|
|
|
|
}
|
|
|
|
|
|
|
|
#color_squares {
|
|
|
|
position: absolute;
|
|
|
|
right: 350px;
|
|
|
|
top: 233px;
|
|
|
|
}
|
|
|
|
#color_squares div {
|
|
|
|
width: 27px;
|
|
|
|
height: 27px;
|
|
|
|
margin-left: 6px;
|
|
|
|
float: left;
|
|
|
|
border: 1px solid #444;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#model_display {
|
|
|
|
font-family: Courier,mono;
|
|
|
|
border: 1px solid #444;
|
|
|
|
color: #aaaaaa;
|
|
|
|
padding: 2px 3px;
|
|
|
|
font-size: 14px;
|
|
|
|
list-style: none;
|
|
|
|
height: 400px;
|
|
|
|
width: 50%;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
#model_display ul {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0 0 0 20px;
|
|
|
|
}
|
|
|
|
#model_display li {
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#description {
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 270px;
|
|
|
|
width: 568px;
|
|
|
|
font-family: Courier,mono;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #999;
|
|
|
|
}
|