diff --git a/app/css/app.css b/app/css/app.css
index e4f41ce..ad8dfe8 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -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;
diff --git a/app/css/app.less b/app/css/app.less
index 84f9b66..d95fa8b 100644
--- a/app/css/app.less
+++ b/app/css/app.less
@@ -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;
diff --git a/app/index.html b/app/index.html
index 94e242d..6561600 100644
--- a/app/index.html
+++ b/app/index.html
@@ -94,6 +94,10 @@
+
+
+ rgb(0, 0, 0)
+