diff --git a/app/css/app.css b/app/css/app.css index 553fbd4..a9c050d 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1,3 +1,8 @@ +html, +body { + -webkit-overflow-scrolling: auto; + overflow-x: hidden; +} input:focus { outline: none !important; } @@ -12,6 +17,9 @@ footer { width: 100%; height: 150px; } +#screens { + overflow-x: hidden; +} .screen { display: none; } @@ -70,6 +78,187 @@ footer { background-color: #000; float: right; } +#counters .cam, +#counters .proj { + width: 50%; + padding-bottom: 25px; +} +#counters .cam label, +#counters .proj label { + text-align: center; + font-size: 24px; + display: block; +} +#counters .cam input, +#counters .proj input { + background: rgba(255, 255, 255, 0.05); + color: #fff; + padding: 6px 12px; + font-size: 21px; + display: block; + margin: 0 auto; + text-align: center; + font-family: monospace; +} +#counters .cam input.changed, +#counters .proj input.changed { + color: #DAE035; +} +#counters .cam { + float: left; +} +#counters .proj { + float: right; +} +#seq_scroll { + width: 100%; + overflow-x: scroll; +} +#seq_scroll > div > div > div { + float: left; +} +#seq_scroll > div > div > div input { + float: none; +} +#seq_scroll > div > div > div > div { + font-size: 8px; + text-align: center; + color: #dcdcdc; +} +#actions { + padding: 20px; +} +#seq_stats { + width: 40%; + float: right; + padding: 20px; + margin-top: 57px; +} +#seq_stats span { + font-weight: 600; + float: right; +} +#seq_loop { + padding: 0 28px; +} +#seq_loop input { + font-family: monospace; + font-size: 23px; + width: 121px; + padding: 12px; +} +button { + display: block; + border-radius: 5px; + border: 2px solid #fff; + text-align: center; + background: transparent; + color: #fff; + padding: 8px 0; + font-size: 12px; + font-weight: 400; + display: inline-block; + padding: 4px 16px; + font-size: 14px; +} +button span { + display: block; + font-size: 16px; + font-weight: 200; +} +button:active, +button .active { + background: #fff; + color: #322b2f; + outline: none; +} +button:focus { + outline: none; +} +#sequence { + width: 970px; + padding-bottom: 25px; + padding-left: 70px; + height: 230px; +} +#sequence #cam_forward, +#sequence #proj_forward, +#sequence #black_forward { + clear: both; +} +#sequence #cam_forward input[type=checkbox], +#sequence #proj_forward input[type=checkbox], +#sequence #black_forward input[type=checkbox] { + border: 1px solid #00C4A0; + margin-right: 3px; +} +#sequence #cam_forward input[type=checkbox]:checked, +#sequence #proj_forward input[type=checkbox]:checked, +#sequence #black_forward input[type=checkbox]:checked { + background: #00C4A0; +} +#sequence #cam_forward > div, +#sequence #proj_forward > div, +#sequence #black_forward > div { + color: #00C4A0; +} +#sequence #cam_backward, +#sequence #proj_backward, +#sequence #black_backward { + clear: both; +} +#sequence #cam_backward input[type=checkbox], +#sequence #proj_backward input[type=checkbox], +#sequence #black_backward input[type=checkbox] { + border: 1px solid #AB1A25; + margin-right: 3px; +} +#sequence #cam_backward input[type=checkbox]:checked, +#sequence #proj_backward input[type=checkbox]:checked, +#sequence #black_backward input[type=checkbox]:checked { + background: #AB1A25; +} +#sequence #cam_backward > div, +#sequence #proj_backward > div, +#sequence #black_backward > div { + color: #AB1A25; +} +#sequence #cam_backward { + margin-top: 15px; +} +#sequence input[type=checkbox] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + outline: none; + display: block; + width: 35px; + height: 35px; + border-radius: 5px; + margin: 0; + margin-bottom: 3px; + float: left; + box-sizing: border-box; +} +#sequence input.h { + border-color: #DAE035 !important; +} +#sequence input.h:checked { + background: #DAE035 !important; +} +#sequence #numbers { + clear: both; +} +#sequence #numbers > div { + width: 35px; + color: #fff; + font-family: monospace; + float: left; + margin: 3px; + text-align: center; + opacity: 0.5; +} .cp-app { position: relative !important; border-radius: 0px !important; diff --git a/app/css/app.less b/app/css/app.less index 81930cb..9d13962 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -1,3 +1,47 @@ +@BG: rgb(50, 43, 47); +@COMMON: #fff; + +@FORWARD: #00C4A0; +@BACKWARD: #AB1A25; +@SELECTED: #DAE035; + +@SEQ: #3C3636; +@SCRIPT: rgb(39, 40, 34); + +.monospace () { + font-family: monospace; +} + +.button (@color: @COMMON) { + display: block; + border-radius: 5px; + border: 2px solid @color; + text-align: center; + background: transparent; + color: @color; + padding: 8px 0; + font-size: 12px; + font-weight: 400; + span{ + display: block; + font-size: 16px; + font-weight: 200; + } + &:active,.active{ + background: @color; + color: @BG; + outline: none; + } + &:focus{ + outline: none; + } +} + +html, body{ + -webkit-overflow-scrolling: auto; + overflow-x: hidden; +} + input { &:focus{ outline: none !important; @@ -17,6 +61,10 @@ footer{ height: 150px; } +#screens{ + overflow-x: hidden; +} + .screen{ display: none; } @@ -77,6 +125,162 @@ footer{ float: right; } +#counters{ + .cam,.proj{ + width: 50%; + padding-bottom: 25px; + label{ + text-align: center; + font-size: 24px; + display: block; + } + input{ + background: rgba(255, 255, 255, 0.05); + color: @COMMON; + padding: 6px 12px; + font-size: 21px; + display: block; + margin: 0 auto; + text-align: center; + .monospace(); + &.changed{ + color: @SELECTED; + } + } + } + .cam{ + float: left; + } + .proj{ + float: right; + } +} +#seq_scroll{ + width: 100%; + overflow-x: scroll; + >div>div>div{ + float: left; + input{ + float: none; + } + >div{ + font-size: 8px; + text-align: center; + + color: rgb(220, 220, 220); + } + } +} +#actions{ + padding: 20px 0 0 55px; +} +#seq_stats{ + width: 40%; + float: right; + padding: 20px; + margin-top: 57px; + span{ + font-weight: 600; + float: right; + } + .timing{ + } +} +#seq_loop{ + padding: 0 28px; + input{ + .monospace(); + font-size: 23px; + width: 121px; + padding: 12px; + } +} +button{ + .button(); + display: inline-block; + padding: 4px 16px; + font-size: 14px; +} + +#sequencer{ + +} +#sequence{ + width: 970px; + padding-bottom: 25px; + padding-left: 70px; + height: 230px; + #cam_forward, + #proj_forward, + #black_forward{ + clear: both; + input[type=checkbox]{ + border: 1px solid @FORWARD; + margin-right: 3px; + &:checked{ + background: @FORWARD; + //background: radial-gradient(circle at 25px 25px, #00C4A0, #343434); + } + } + >div{ + color: @FORWARD; + } + } + #cam_backward, + #proj_backward, + #black_backward{ + clear: both; + input[type=checkbox]{ + border: 1px solid @BACKWARD; + margin-right: 3px; + &:checked{ + background: @BACKWARD; + //background: radial-gradient(circle at 25px 25px, #AB1A25, #343434); + } + } + >div{ + color: @BACKWARD; + } + } + #cam_backward{ + margin-top: 15px; + } + input[type=checkbox]{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + outline: none; + display: block; + width: 35px; + height: 35px; + border-radius: 5px; + margin: 0; + margin-bottom: 3px; + float: left; + box-sizing: border-box; + } + input.h{ + //background: @SELECTED !important; + border-color: @SELECTED !important; + &:checked{ + background: @SELECTED !important; + } + } + #numbers{ + clear: both; + > div{ + width: 35px; + color: @COMMON; + font-family: monospace; + float: left; + margin: 3px; + text-align: center; + opacity: 0.5; + } + } +} + .cp-app{ position: relative !important; border-radius: 0px !important; diff --git a/app/index.html b/app/index.html index ccb6d2d..5207aef 100644 --- a/app/index.html +++ b/app/index.html @@ -12,6 +12,47 @@
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+

STATS

+
Number of instructions: 0
+
Time to complete: 0 ms
+
Camera end position: 00000
+
Projector end position: 00000
+
+
+ + + + + +
+
+

LOOPS

+ +
+
+