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;
|
left: -8px;
|
||||||
font-size: 27px;
|
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 {
|
.mcopy-light {
|
||||||
background: #000;
|
background: #000;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
|
|
|
||||||
131
app/css/app.less
131
app/css/app.less
|
|
@ -141,7 +141,7 @@ footer{
|
||||||
left: -1px;
|
left: -1px;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
&:before{
|
&:before{
|
||||||
font-family:'FontAwesome';
|
font-family: 'FontAwesome';
|
||||||
content: '\f107';
|
content: '\f107';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
@ -150,6 +150,135 @@ footer{
|
||||||
font-size: 27px;
|
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{
|
.mcopy-light{
|
||||||
background: #000;
|
background: #000;
|
||||||
width: 15px;
|
width: 15px;
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,39 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="cmy-page" class="colors-page">
|
<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>
|
||||||
<div id="rgb-page" class="colors-page">
|
<div id="rgb-page" class="colors-page">
|
||||||
<input id="rgb" value="rgb(0, 0, 0)" />
|
<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
|
//RGB GUI
|
||||||
light.rgb = {};
|
light.rgb = {};
|
||||||
light.rgb.elem;
|
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
|
//RGB GUI
|
||||||
light.rgb = {};
|
light.rgb = {};
|
||||||
light.rgb.elem;
|
light.rgb.elem;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue