From 15d063489619675ae2acdf4e922af969ef226e5c Mon Sep 17 00:00:00 2001 From: mmcwilliams Date: Tue, 2 Jan 2018 01:52:15 -0500 Subject: [PATCH] Complete style reorg, now with cmd.less --- app/css/app.css | 260 ++++++++++++++++++++--------------------- app/less/app.less | 270 +------------------------------------------ app/less/core.less | 33 ++++++ app/less/light.less | 2 + app/less/mixins.less | 28 +++++ app/less/seq.less | 207 +++++++++++++++++++++++++++++++++ 6 files changed, 404 insertions(+), 396 deletions(-) create mode 100644 app/less/core.less create mode 100644 app/less/mixins.less create mode 100644 app/less/seq.less diff --git a/app/css/app.css b/app/css/app.css index a978b14..a5f4cfa 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -22,6 +22,34 @@ footer { width: 100%; height: 150px; } +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: #272b30; + outline: none; +} +button:focus { + outline: none; +} #colors-tabs { width: 411px; } @@ -307,105 +335,6 @@ footer { left: 16px; color: #fff; } -#log { - position: fixed; - width: 100%; - height: 150px; -} -#screens { - overflow-x: hidden; -} -.screen { - display: none; -} -#w2ui-popup .swatch { - cursor: pointer; - width: 50px; - height: 50px; - display: inline-block; - margin: 3px; - box-sizing: border-box; - border: 1px solid #fff; -} -#w2ui-popup .swatch.default { - border-color: #9ecaed; - box-shadow: 0 0 10px #9ecaed; -} -#w2ui-popup #new-swatch { - display: none; -} -#preview-wrap { - margin-top: 140px; -} -#preview-wrap h4 { - display: inline-block; - margin: 0; - margin-left: 123px; - margin-right: 10px; - width: 81px; - height: 30px; -} -#preview-wrap h4 span { - display: block; - margin-top: 6px; - position: absolute; -} -#rgb { - border: 0; - border-radius: 0; - width: 411px; - font-size: 12px; - text-align: center; -} -#color { - width: 100px; - height: 100px; - margin: 0 50px; - background-color: #000; - float: right; -} -#counters .cam, -#counters_2 .cam, -#counters .proj, -#counters_2 .proj { - width: 50%; - padding-bottom: 25px; -} -#counters .cam label, -#counters_2 .cam label, -#counters .proj label, -#counters_2 .proj label { - text-align: center; - font-size: 24px; - display: block; -} -#counters .cam input, -#counters_2 .cam input, -#counters .proj input, -#counters_2 .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: 'Menlo', monospace; -} -#counters .cam input.changed, -#counters_2 .cam input.changed, -#counters .proj input.changed, -#counters_2 .proj input.changed { - color: #DAE035; -} -#counters .cam, -#counters_2 .cam { - float: left; -} -#counters .proj, -#counters_2 .proj { - float: right; -} #seq_scroll { width: 100%; overflow-x: scroll; @@ -465,34 +394,6 @@ footer { margin-top: 10px; padding: 6px 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: #272b30; - outline: none; -} -button:focus { - outline: none; -} #sequence { width: 970px; padding-bottom: 21px; @@ -591,6 +492,9 @@ button:focus { color: #DAE035; opacity: 1; } +.spacer { + margin-top: 15px; +} #seq_labels { font-family: 'Menlo', monospace; background-color: #272b30; @@ -634,6 +538,105 @@ button:focus { background: black; color: #fff; } +#log { + position: fixed; + width: 100%; + height: 150px; +} +#screens { + overflow-x: hidden; +} +.screen { + display: none; +} +#w2ui-popup .swatch { + cursor: pointer; + width: 50px; + height: 50px; + display: inline-block; + margin: 3px; + box-sizing: border-box; + border: 1px solid #fff; +} +#w2ui-popup .swatch.default { + border-color: #9ecaed; + box-shadow: 0 0 10px #9ecaed; +} +#w2ui-popup #new-swatch { + display: none; +} +#preview-wrap { + margin-top: 140px; +} +#preview-wrap h4 { + display: inline-block; + margin: 0; + margin-left: 123px; + margin-right: 10px; + width: 81px; + height: 30px; +} +#preview-wrap h4 span { + display: block; + margin-top: 6px; + position: absolute; +} +#rgb { + border: 0; + border-radius: 0; + width: 411px; + font-size: 12px; + text-align: center; +} +#color { + width: 100px; + height: 100px; + margin: 0 50px; + background-color: #000; + float: right; +} +#counters .cam, +#counters_2 .cam, +#counters .proj, +#counters_2 .proj { + width: 50%; + padding-bottom: 25px; +} +#counters .cam label, +#counters_2 .cam label, +#counters .proj label, +#counters_2 .proj label { + text-align: center; + font-size: 24px; + display: block; +} +#counters .cam input, +#counters_2 .cam input, +#counters .proj input, +#counters_2 .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: 'Menlo', monospace; +} +#counters .cam input.changed, +#counters_2 .cam input.changed, +#counters .proj input.changed, +#counters_2 .proj input.changed { + color: #DAE035; +} +#counters .cam, +#counters_2 .cam { + float: left; +} +#counters .proj, +#counters_2 .proj { + float: right; +} #overlay { position: fixed; top: 0; @@ -645,9 +648,6 @@ button:focus { background: rgba(0, 0, 0, 0.4); display: none; } -.spacer { - margin-top: 15px; -} .cp-app { position: relative !important; border-radius: 0px !important; diff --git a/app/less/app.less b/app/less/app.less index d5430b2..48666ff 100644 --- a/app/less/app.less +++ b/app/less/app.less @@ -1,62 +1,10 @@ @import "./variables.less"; +@import "./mixins.less"; -.monospace () { - font-family: 'Menlo', 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; - } -} - -*{ - cursor: default; - -webkit-touch-callout: none; - -webkit-user-select: none; -} - -html, body{ - -webkit-overflow-scrolling: auto; - overflow-x: hidden; -} - -input { - background: @INPUT_BG; - color: @COMMON; - border-color: @COMMON; - &:focus{ - outline: none !important; - } -} - -footer{ - position: fixed; - bottom: 0; - width: 100%; - height: @FOOTER_H; -} - +@import "./core.less"; @import "./light.less"; +@import "./seq.less"; +@import "./cmd.less"; #log{ position: fixed; @@ -155,213 +103,6 @@ footer{ float: right; } } -#seq_scroll{ - width: 100%; - overflow-x: scroll; - >div>div>div{ - float: left; - input{ - float: none; - } - } -} -#numbers{ - div{ - font-size: 10px; - text-align: center; - color: rgb(220, 220, 220); - } -} -#actions{ - padding: 8px 0 0 55px; - input[type=number] { - background: @INPUT_BG; - border: 2px solid @COMMON; - color: @COMMON; - padding: 6px; - border-radius: 5px; - float: right; - width: 90px; - margin-right: 60px; - } -} -#seq_stats{ - width: 40%; - float: right; - padding: 20px 61px 0 0; - h3{ - font-size: 20px; - margin: 16px 0 3px; - } - span{ - font-weight: 600; - float: right; - } - .timing{ - } -} -#seq_loop{ - width: 40%; - float: left; - padding: 0 0 0 56px; - h3{ - font-size: 20px; - margin: 12px 0 3px; - } - input{ - .monospace(); - background: @INPUT_BG; - color: @COMMON; - font-size: 21px; - width: 121px; - margin-top: 10px; - padding: 6px 12px; - } -} -button{ - .button(); - display: inline-block; - padding: 4px 16px; - font-size: 14px; -} - -#sequencer{ - -} -#sequence{ - width: 970px; - padding-bottom: 21px; - padding-left: 70px; - #cam_forward, - #proj_forward, - #black_forward{ - clear: both; - input[type=checkbox]{ - border: 2px solid @FORWARD; - &: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: 2px solid @BACKWARD; - &:checked{ - background: @BACKWARD; - //background: radial-gradient(circle at 25px 25px, #AB1A25, #343434); - } - } - >div{ - color: @BACKWARD; - } - } - input[type=checkbox]{ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background: transparent; - outline: none; - width: 35px; - height: 35px; - border-radius: 5px; - margin: 0; - margin-bottom: 3px; - margin-right: 3px; - display: inline-block; - box-sizing: border-box; - cursor: pointer; - } - .L{ - display: inline-block; - width: 35px; - height: 35px; - border-radius: 35px; - margin: 0; - margin-bottom: 3px; - margin-right: 3px; - border: 2px solid @COMMON; - opacity: 0.5; - cursor: pointer; - &.a{ - opacity: 1; - } - } - 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-right: 3px; - text-align: center; - opacity: 0.5; - &.h{ - color: @SELECTED; - opacity: 1; - } - } - } -} -#seq_labels{ - .monospace(); - background-color: #272b30; - position: absolute; - top: 128px; - padding-top: 2px; - padding-bottom: 15px; - width: 54px; - div{ - height: 43px; - line-height: 35px; - } - span{ - text-indent: 7px; - display: inline-block; - margin-right: 5px; - } -} - -#loop_current{ - margin-top: 54px; - width: 121px; - text-align: center; - color: @SELECTED; -} - -#console{ - background: #000; - border-top: 2px solid rgba(255, 255, 255, 0.3); - textarea{ - .monospace(); - font-size: 12px; - line-height: 17px; - outline: none !important; - border: none; - box-sizing: border-box; - margin: 0; - padding: 20px; - width: 100%; - height: @FOOTER_H; - display: block; - background: black; - color: @COMMON; - } -} #overlay{ position: fixed; @@ -375,9 +116,6 @@ button{ display: none; //z-index: 1200; } -.spacer{ - margin-top: 15px; -} .cp-app{ position: relative !important; diff --git a/app/less/core.less b/app/less/core.less new file mode 100644 index 0000000..5d25642 --- /dev/null +++ b/app/less/core.less @@ -0,0 +1,33 @@ +*{ + cursor: default; + -webkit-touch-callout: none; + -webkit-user-select: none; +} + +html, body{ + -webkit-overflow-scrolling: auto; + overflow-x: hidden; +} + +input { + background: @INPUT_BG; + color: @COMMON; + border-color: @COMMON; + &:focus{ + outline: none !important; + } +} + +footer{ + position: fixed; + bottom: 0; + width: 100%; + height: @FOOTER_H; +} + +button{ + .button(); + display: inline-block; + padding: 4px 16px; + font-size: 14px; +} \ No newline at end of file diff --git a/app/less/light.less b/app/less/light.less index a378119..ae72aba 100644 --- a/app/less/light.less +++ b/app/less/light.less @@ -1,3 +1,5 @@ +//LIGHT UI + #colors-tabs{ width: 411px; } diff --git a/app/less/mixins.less b/app/less/mixins.less new file mode 100644 index 0000000..5658868 --- /dev/null +++ b/app/less/mixins.less @@ -0,0 +1,28 @@ +.monospace () { + font-family: 'Menlo', 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; + } +} \ No newline at end of file diff --git a/app/less/seq.less b/app/less/seq.less new file mode 100644 index 0000000..f30e847 --- /dev/null +++ b/app/less/seq.less @@ -0,0 +1,207 @@ +//SEQUENCER UI + +#seq_scroll{ + width: 100%; + overflow-x: scroll; + >div>div>div{ + float: left; + input{ + float: none; + } + } +} +#numbers{ + div{ + font-size: 10px; + text-align: center; + color: rgb(220, 220, 220); + } +} +#actions{ + padding: 8px 0 0 55px; + input[type=number] { + background: @INPUT_BG; + border: 2px solid @COMMON; + color: @COMMON; + padding: 6px; + border-radius: 5px; + float: right; + width: 90px; + margin-right: 60px; + } +} +#seq_stats{ + width: 40%; + float: right; + padding: 20px 61px 0 0; + h3{ + font-size: 20px; + margin: 16px 0 3px; + } + span{ + font-weight: 600; + float: right; + } + .timing{ + } +} +#seq_loop{ + width: 40%; + float: left; + padding: 0 0 0 56px; + h3{ + font-size: 20px; + margin: 12px 0 3px; + } + input{ + .monospace(); + background: @INPUT_BG; + color: @COMMON; + font-size: 21px; + width: 121px; + margin-top: 10px; + padding: 6px 12px; + } +} + +#sequencer{ + +} +#sequence{ + width: 970px; + padding-bottom: 21px; + padding-left: 70px; + #cam_forward, + #proj_forward, + #black_forward{ + clear: both; + input[type=checkbox]{ + border: 2px solid @FORWARD; + &: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: 2px solid @BACKWARD; + &:checked{ + background: @BACKWARD; + //background: radial-gradient(circle at 25px 25px, #AB1A25, #343434); + } + } + >div{ + color: @BACKWARD; + } + } + input[type=checkbox]{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: transparent; + outline: none; + width: 35px; + height: 35px; + border-radius: 5px; + margin: 0; + margin-bottom: 3px; + margin-right: 3px; + display: inline-block; + box-sizing: border-box; + cursor: pointer; + } + .L{ + display: inline-block; + width: 35px; + height: 35px; + border-radius: 35px; + margin: 0; + margin-bottom: 3px; + margin-right: 3px; + border: 2px solid @COMMON; + opacity: 0.5; + cursor: pointer; + &.a{ + opacity: 1; + } + } + 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-right: 3px; + text-align: center; + opacity: 0.5; + &.h{ + color: @SELECTED; + opacity: 1; + } + } + } +} + +.spacer{ + margin-top: 15px; +} +#seq_labels{ + .monospace(); + background-color: #272b30; + position: absolute; + top: 128px; + padding-top: 2px; + padding-bottom: 15px; + width: 54px; + div{ + height: 43px; + line-height: 35px; + } + span{ + text-indent: 7px; + display: inline-block; + margin-right: 5px; + } +} + +#loop_current{ + margin-top: 54px; + width: 121px; + text-align: center; + color: @SELECTED; +} + +#console{ + background: #000; + border-top: 2px solid rgba(255, 255, 255, 0.3); + textarea{ + .monospace(); + font-size: 12px; + line-height: 17px; + outline: none !important; + border: none; + box-sizing: border-box; + margin: 0; + padding: 20px; + width: 100%; + height: @FOOTER_H; + display: block; + background: black; + color: @COMMON; + } +} \ No newline at end of file