Build out CMY controls for lighting
This commit is contained in:
Matt
parent
9532c8cd8f
commit
08e4738b86
|
|
@ -97,9 +97,20 @@ footer {
|
|||
left: -8px;
|
||||
font-size: 27px;
|
||||
}
|
||||
#kelvin-preview {
|
||||
margin-top: 25px;
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
color: #272b30;
|
||||
}
|
||||
#dial-c {
|
||||
margin-top: 85px;
|
||||
margin-left: 15px;
|
||||
margin-top: 85px;
|
||||
}
|
||||
#dial-c .dial-wedge,
|
||||
#dial-c .dial-marker {
|
||||
|
|
@ -110,8 +121,8 @@ footer {
|
|||
border-color: #00FFFF;
|
||||
}
|
||||
#dial-m {
|
||||
margin-top: 85px;
|
||||
margin-left: 105px;
|
||||
margin-top: 85px;
|
||||
}
|
||||
#dial-m .dial-wedge,
|
||||
#dial-m .dial-marker {
|
||||
|
|
@ -122,8 +133,8 @@ footer {
|
|||
border-color: #FF00FF;
|
||||
}
|
||||
#dial-y {
|
||||
margin-top: 85px;
|
||||
margin-left: 195px;
|
||||
margin-top: 85px;
|
||||
}
|
||||
#dial-y .dial-wedge,
|
||||
#dial-y .dial-marker {
|
||||
|
|
@ -133,6 +144,22 @@ footer {
|
|||
color: #FFFF00;
|
||||
border-color: #FFFF00;
|
||||
}
|
||||
#dial-k {
|
||||
margin-left: 285px;
|
||||
margin-top: 85px;
|
||||
}
|
||||
#dial-k .dial-wedge,
|
||||
#dial-k .dial-marker {
|
||||
background: #000;
|
||||
}
|
||||
#dial-k input {
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
#dial-k input {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
.dial-wrapper {
|
||||
position: absolute;
|
||||
width: 5.5em;
|
||||
|
|
@ -151,7 +178,7 @@ footer {
|
|||
.dial-wrapper input {
|
||||
margin-top: 6em;
|
||||
width: 4.5em;
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
background: #272b30;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
|
|
@ -196,25 +223,19 @@ footer {
|
|||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% 2.75em;
|
||||
}
|
||||
/*@keyframes rotate-bg-1 {
|
||||
50%, 100% {
|
||||
transform: rotateZ(180deg);
|
||||
#cmy-preview {
|
||||
position: absolute;
|
||||
margin-top: 220px;
|
||||
margin-left: 15px;
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
color: #272b30;
|
||||
}
|
||||
}
|
||||
@keyframes rotate-bg-2 {
|
||||
0%, 50% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-marker {
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
*/
|
||||
.mcopy-light {
|
||||
background: #000;
|
||||
width: 15px;
|
||||
|
|
|
|||
|
|
@ -151,48 +151,55 @@ footer{
|
|||
}
|
||||
}
|
||||
|
||||
#kelvin-preview {
|
||||
margin-top: 25px;
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
border: 1px solid @COMMON;
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
color: @BG;
|
||||
}
|
||||
|
||||
@dial_size : 5.5em;
|
||||
@dial_thickness : 0.5em;
|
||||
@dial_cyan : #00FFFF;
|
||||
@dial_magenta : #FF00FF;
|
||||
@dial_yellow : #FFFF00;
|
||||
@dial_black : #000;
|
||||
@dial_left : 15px;
|
||||
@dial_spacing : 90px;
|
||||
|
||||
#dial-c {
|
||||
.dial-class (@color, @i) {
|
||||
margin-left: @dial_left + (@dial_spacing * @i);
|
||||
margin-top: 85px;
|
||||
margin-left: @dial_left;
|
||||
.dial-wedge,
|
||||
.dial-marker{
|
||||
background: @dial_cyan;
|
||||
background: @color;
|
||||
}
|
||||
input{
|
||||
color: @dial_cyan;
|
||||
border-color: @dial_cyan;
|
||||
color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
#dial-c {
|
||||
.dial-class(@dial_cyan, 0);
|
||||
|
||||
}
|
||||
#dial-m {
|
||||
margin-top: 85px;
|
||||
margin-left: @dial_left + @dial_spacing;
|
||||
.dial-wedge,
|
||||
.dial-marker{
|
||||
background: @dial_magenta;
|
||||
}
|
||||
input{
|
||||
color: @dial_magenta;
|
||||
border-color: @dial_magenta;
|
||||
}
|
||||
.dial-class(@dial_magenta, 1);
|
||||
}
|
||||
#dial-y {
|
||||
margin-top: 85px;
|
||||
margin-left: @dial_left + (@dial_spacing * 2);
|
||||
.dial-wedge,
|
||||
.dial-marker{
|
||||
background: @dial_yellow;
|
||||
.dial-class(@dial_yellow, 2);
|
||||
}
|
||||
#dial-k {
|
||||
.dial-class(@dial_black, 3);
|
||||
input{
|
||||
color: @dial_yellow;
|
||||
border-color: @dial_yellow;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +220,7 @@ footer{
|
|||
input{
|
||||
margin-top: @dial_size + 0.5em;
|
||||
width: @dial_size - 1em;
|
||||
margin-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
background: @BG;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
|
|
@ -259,25 +266,19 @@ footer{
|
|||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% @dial_size / 2;
|
||||
}
|
||||
/*@keyframes rotate-bg-1 {
|
||||
50%, 100% {
|
||||
transform: rotateZ(180deg);
|
||||
#cmy-preview {
|
||||
position: absolute;
|
||||
margin-top: 220px;
|
||||
margin-left: 15px;
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
border: 1px solid @COMMON;
|
||||
text-align: center;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
color: @BG;
|
||||
}
|
||||
}
|
||||
@keyframes rotate-bg-2 {
|
||||
0%, 50% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-marker {
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.mcopy-light{
|
||||
background: #000;
|
||||
|
|
|
|||
|
|
@ -94,6 +94,10 @@
|
|||
<div id="kelvin-slider">
|
||||
<div id="kelvin-scale"></div>
|
||||
<div id="kelvin-pos"></div>
|
||||
|
||||
<div id="kelvin-preview">
|
||||
rgb(0, 0, 0)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cmy-page" class="colors-page">
|
||||
|
|
@ -130,6 +134,21 @@
|
|||
<div class="dial-marker dial-end"></div>
|
||||
<input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
|
||||
</div>
|
||||
<div id="dial-k" class="dial-wrapper">
|
||||
<div class="dial-container-bg"></div>
|
||||
<div class="dial-container dial-container1">
|
||||
<div class="dial-wedge"></div>
|
||||
</div>
|
||||
<div class="dial-container dial-container2">
|
||||
<div class="dial-wedge"></div>
|
||||
</div>
|
||||
<div class="dial-marker dial-start"></div>
|
||||
<div class="dial-marker dial-end"></div>
|
||||
<input type="number" value="1.00" step="0.01" min="0.00" max="1.00" />
|
||||
</div>
|
||||
<div id="cmy-preview">
|
||||
rgb(0, 0, 0)
|
||||
</div>
|
||||
</div>
|
||||
<div id="rgb-page" class="colors-page">
|
||||
<input id="rgb" value="rgb(0, 0, 0)" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue