Establish CMYK controls in markup
This commit is contained in:
parent
5f2dbd77b7
commit
ae2c490afd
118
app/css/app.css
118
app/css/app.css
|
|
@ -97,6 +97,124 @@ footer {
|
|||
left: -8px;
|
||||
font-size: 27px;
|
||||
}
|
||||
#dial-c {
|
||||
margin-top: 85px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
#dial-c .dial-wedge,
|
||||
#dial-c .dial-marker {
|
||||
background: #00FFFF;
|
||||
}
|
||||
#dial-c input {
|
||||
color: #00FFFF;
|
||||
border-color: #00FFFF;
|
||||
}
|
||||
#dial-m {
|
||||
margin-top: 85px;
|
||||
margin-left: 105px;
|
||||
}
|
||||
#dial-m .dial-wedge,
|
||||
#dial-m .dial-marker {
|
||||
background: #FF00FF;
|
||||
}
|
||||
#dial-m input {
|
||||
color: #FF00FF;
|
||||
border-color: #FF00FF;
|
||||
}
|
||||
#dial-y {
|
||||
margin-top: 85px;
|
||||
margin-left: 195px;
|
||||
}
|
||||
#dial-y .dial-wedge,
|
||||
#dial-y .dial-marker {
|
||||
background: #FFFF00;
|
||||
}
|
||||
#dial-y input {
|
||||
color: #FFFF00;
|
||||
border-color: #FFFF00;
|
||||
}
|
||||
.dial-wrapper {
|
||||
position: absolute;
|
||||
width: 5.5em;
|
||||
height: 5.5em;
|
||||
}
|
||||
.dial-wrapper:after {
|
||||
content: "";
|
||||
background: #272b30;
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
left: 0.25em;
|
||||
}
|
||||
.dial-wrapper input {
|
||||
margin-top: 6em;
|
||||
width: 4.5em;
|
||||
margin-left: 1em;
|
||||
background: #272b30;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
.dial-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 2.75em;
|
||||
}
|
||||
.dial-container.dial-container1 {
|
||||
left: 2.75em;
|
||||
}
|
||||
.dial-container.dial-container1 .dial-wedge {
|
||||
transform: rotateZ(360deg);
|
||||
border-radius: 0 5.5em 5.5em 0;
|
||||
left: 0;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
.dial-container.dial-container2 {
|
||||
left: 0;
|
||||
}
|
||||
.dial-container.dial-container2 .dial-wedge {
|
||||
transform: rotateZ(0);
|
||||
border-radius: 5.5em 0 0 5.5em;
|
||||
transform-origin: 5.5em 5.5em;
|
||||
}
|
||||
.dial-wedge {
|
||||
height: 5.5em;
|
||||
width: 2.75em;
|
||||
}
|
||||
.dial-marker {
|
||||
border-radius: 50%;
|
||||
height: 0.25em;
|
||||
width: 0.25em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(49%);
|
||||
}
|
||||
.dial-end {
|
||||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% 2.75em;
|
||||
}
|
||||
/*@keyframes rotate-bg-1 {
|
||||
50%, 100% {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
@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;
|
||||
|
|
|
|||
129
app/css/app.less
129
app/css/app.less
|
|
@ -150,6 +150,135 @@ footer{
|
|||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
@dial_size : 5.5em;
|
||||
@dial_thickness : 0.5em;
|
||||
@dial_cyan : #00FFFF;
|
||||
@dial_magenta : #FF00FF;
|
||||
@dial_yellow : #FFFF00;
|
||||
@dial_left : 15px;
|
||||
@dial_spacing : 90px;
|
||||
|
||||
#dial-c {
|
||||
margin-top: 85px;
|
||||
margin-left: @dial_left;
|
||||
.dial-wedge,
|
||||
.dial-marker{
|
||||
background: @dial_cyan;
|
||||
}
|
||||
input{
|
||||
color: @dial_cyan;
|
||||
border-color: @dial_cyan;
|
||||
}
|
||||
}
|
||||
#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-y {
|
||||
margin-top: 85px;
|
||||
margin-left: @dial_left + (@dial_spacing * 2);
|
||||
.dial-wedge,
|
||||
.dial-marker{
|
||||
background: @dial_yellow;
|
||||
}
|
||||
input{
|
||||
color: @dial_yellow;
|
||||
border-color: @dial_yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.dial-wrapper {
|
||||
position: absolute;
|
||||
width: @dial_size;
|
||||
height: @dial_size;
|
||||
&:after {
|
||||
content: "";
|
||||
background: @BG;
|
||||
border-radius: 50%;
|
||||
width: @dial_size - @dial_thickness;
|
||||
height: @dial_size - @dial_thickness;
|
||||
position: absolute;
|
||||
top: @dial_thickness / 2;
|
||||
left: @dial_thickness / 2;
|
||||
}
|
||||
input{
|
||||
margin-top: @dial_size + 0.5em;
|
||||
width: @dial_size - 1em;
|
||||
margin-left: 1em;
|
||||
background: @BG;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.dial-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: @dial_size / 2;
|
||||
&.dial-container1 {
|
||||
left: @dial_size / 2;
|
||||
.dial-wedge {
|
||||
transform: rotateZ(360deg);
|
||||
border-radius: 0 @dial_size @dial_size 0;
|
||||
left: 0;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
}
|
||||
&.dial-container2 {
|
||||
left: 0;
|
||||
.dial-wedge {
|
||||
transform: rotateZ(0);
|
||||
border-radius: @dial_size 0 0 @dial_size;
|
||||
transform-origin: @dial_size @dial_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dial-wedge {
|
||||
height: @dial_size;
|
||||
width: @dial_size / 2;
|
||||
}
|
||||
.dial-marker {
|
||||
border-radius: 50%;
|
||||
height: @dial_thickness / 2;
|
||||
width: @dial_thickness / 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - (@dial_thickness * 2));
|
||||
}
|
||||
.dial-end {
|
||||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% @dial_size / 2;
|
||||
}
|
||||
/*@keyframes rotate-bg-1 {
|
||||
50%, 100% {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
@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;
|
||||
|
|
|
|||
|
|
@ -97,6 +97,39 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="cmy-page" class="colors-page">
|
||||
<div id="dial-c" class="dial-wrapper">
|
||||
<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="dial-m" class="dial-wrapper">
|
||||
<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="dial-y" class="dial-wrapper">
|
||||
<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>
|
||||
<div id="rgb-page" class="colors-page">
|
||||
<input id="rgb" value="rgb(0, 0, 0)" />
|
||||
|
|
|
|||
|
|
@ -3806,6 +3806,12 @@ light.cmy.init = function () {
|
|||
|
||||
};
|
||||
|
||||
light.cmy.setDial = function (dial, val) {
|
||||
'use strict';
|
||||
var elem = $('#dial-' + dial);
|
||||
|
||||
};
|
||||
|
||||
//RGB GUI
|
||||
light.rgb = {};
|
||||
light.rgb.elem;
|
||||
|
|
|
|||
|
|
@ -767,6 +767,12 @@ light.cmy.init = function () {
|
|||
|
||||
};
|
||||
|
||||
light.cmy.setDial = function (dial, val) {
|
||||
'use strict';
|
||||
var elem = $('#dial-' + dial);
|
||||
|
||||
};
|
||||
|
||||
//RGB GUI
|
||||
light.rgb = {};
|
||||
light.rgb.elem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue