* { cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; } html, body { -webkit-overflow-scrolling: auto; overflow-x: hidden; } input { background: rgba(255, 255, 255, 0.05); color: #fff; border-color: #fff; } input:focus { outline: none !important; } footer { position: fixed; bottom: 0; width: 100%; height: 160px; } 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; } .clearfix:after { content: ""; clear: both; display: table; } #colors-tabs { width: 411px; } #colors-content { width: 411px; float: left; } #colors-content .colors-page { display: none; } #kelvin-page h3 { text-align: center; } #kelvin-page h4 { text-align: center; width: 411px; position: absolute; top: 121px; left: 110px; } #kelvin { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid #fff; width: 140px; font-size: 20px; margin: 20px auto; display: block; text-align: center; } #kelvin-slider { position: relative; width: 352px; margin: 40px auto 0; padding-bottom: 2px; cursor: pointer; } #kelvin-scale { width: 350px; height: 60px; border: 1px solid #fff; } #kelvin-scale span { display: inline-block; height: 58px; width: 1px; } #kelvin-pos { height: 64px; border: 2px solid #000; width: 5px; position: absolute; left: -1px; top: -2px; } #kelvin-pos:before { font-family: 'FontAwesome'; content: '\f107'; position: absolute; color: #000; top: -24px; 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-left: 15px; margin-top: 85px; } #dial-c .dial-wedge, #dial-c .dial-marker { background: #00FFFF; } #dial-c input { color: #00FFFF; border-color: #00FFFF; } #dial-m { margin-left: 105px; margin-top: 85px; } #dial-m .dial-wedge, #dial-m .dial-marker { background: #FF00FF; } #dial-m input { color: #FF00FF; border-color: #FF00FF; } #dial-y { margin-left: 195px; margin-top: 85px; } #dial-y .dial-wedge, #dial-y .dial-marker { background: #FFFF00; } #dial-y input { 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: 80px; height: 80px; } .dial-wrapper:after { content: ""; background: #272b30; border-radius: 50%; width: 66px; height: 66px; position: absolute; top: 7px; left: 7px; } .dial-wrapper input { margin-top: 94px; width: 52px; margin-left: 14px; background: #272b30; border: 1px solid; text-align: center; } .dial-container { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 40px; } .dial-container.dial-container1 { left: 40px; } .dial-container.dial-container1 .dial-wedge { transform: rotateZ(0deg); border-radius: 0 80px 80px 0; left: 0; transform-origin: 0 50%; } .dial-container.dial-container2 { left: 0; } .dial-container.dial-container2 .dial-wedge { transform: rotateZ(0deg); border-radius: 80px 0 0 80px; transform-origin: 40px 40px; } .dial-wedge { height: 80px; width: 40px; } .dial-marker { border-radius: 50%; height: 7px; width: 7px; position: absolute; top: 0; left: calc(50% - (14px * 2)); } .dial-end { transform: rotateZ(0deg); transform-origin: 50% 40px; } #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; } .mcopy-light { background: #000; width: 15px; height: 15px; border-radius: 15px; } #light-status { width: 360px; float: right; margin-top: -25px; } #light-status h3 { font-size: 20px; text-align: center; } #light-status > div { position: relative; clear: both; } #light-status > div:after { content: ""; display: block; } #light-status form { float: left; line-height: 30px; width: 40%; } #light-status form span { width: 20px; margin-left: 40px; display: inline-block; } #light-status form input[type=text] { width: 40px; background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid #fff; } #light-swatches { width: 100%; } #light-swatches .swatch { cursor: pointer; width: 50px; height: 50px; display: inline-block; margin: 3px; box-sizing: border-box; border: 1px solid #fff; } #light-swatches .swatch.default { border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed; } #light-swatches #new-swatch { cursor: pointer; display: inline-block; border: 1px solid #ffffff; width: 50px; height: 50px; margin: 3px; box-sizing: border-box; line-height: 88px; text-align: center; font-size: 22px; position: relative; opacity: 0.25; } #light-swatches #new-swatch:hover { opacity: 0.5; } #light-swatches #new-swatch:active { opacity: 1; } #light-swatches #new-swatch i { display: block; position: absolute; top: 14px; left: 16px; color: #fff; } #seq_scroll { width: 100%; overflow-x: scroll; } #seq_scroll > div > div > div { float: left; } #seq_scroll > div > div > div input { float: none; } #numbers div { font-size: 10px; text-align: center; color: #dcdcdc; } #actions { padding: 8px 0 0 55px; } #actions input[type=number] { background: rgba(255, 255, 255, 0.05); border: 2px solid #fff; color: #fff; padding: 6px; border-radius: 5px; float: right; width: 90px; margin-right: 60px; } #seq_stats { width: 40%; float: right; padding: 20px 61px 0 0; } #seq_stats h3 { font-size: 20px; margin: 16px 0 3px; } #seq_stats span { font-weight: 600; float: right; } #seq_loop_wrap { width: 40%; float: left; padding: 0 0 0 56px; } #seq_loop_wrap h3 { font-size: 20px; margin: 12px 0 3px; } #seq_loop_wrap input { font-family: 'Menlo', monospace; background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 21px; width: 121px; margin-top: 10px; padding: 6px 12px; } #sequence { width: 970px; padding-bottom: 21px; padding-left: 92px; } #sequence #camera_forward, #sequence #camera_second_forward, #sequence #projector_forward, #sequence #projector_second_forward, #sequence #black_forward { clear: both; } #sequence #camera_forward input[type=checkbox], #sequence #camera_second_forward input[type=checkbox], #sequence #projector_forward input[type=checkbox], #sequence #projector_second_forward input[type=checkbox], #sequence #black_forward input[type=checkbox] { border: 2px solid #00C4A0; } #sequence #camera_forward input[type=checkbox]:checked, #sequence #camera_second_forward input[type=checkbox]:checked, #sequence #projector_forward input[type=checkbox]:checked, #sequence #projector_second_forward input[type=checkbox]:checked, #sequence #black_forward input[type=checkbox]:checked { background: #00C4A0; } #sequence #camera_forward > div, #sequence #camera_second_forward > div, #sequence #projector_forward > div, #sequence #projector_second_forward > div, #sequence #black_forward > div { color: #00C4A0; } #sequence #camera_backward, #sequence #camera_second_backward, #sequence #projector_backward, #sequence #projector_second_backward, #sequence #black_backward { clear: both; } #sequence #camera_backward input[type=checkbox], #sequence #camera_second_backward input[type=checkbox], #sequence #projector_backward input[type=checkbox], #sequence #projector_second_backward input[type=checkbox], #sequence #black_backward input[type=checkbox] { border: 2px solid #AB1A25; } #sequence #camera_backward input[type=checkbox]:checked, #sequence #camera_second_backward input[type=checkbox]:checked, #sequence #projector_backward input[type=checkbox]:checked, #sequence #projector_second_backward input[type=checkbox]:checked, #sequence #black_backward input[type=checkbox]:checked { background: #AB1A25; } #sequence #camera_backward > div, #sequence #camera_second_backward > div, #sequence #projector_backward > div, #sequence #projector_second_backward > div, #sequence #black_backward > div { color: #AB1A25; } #sequence #camera_second_forward input[type=checkbox], #sequence #projector_second_forward input[type=checkbox] { border: 2px solid #14d8b4; } #sequence #camera_second_forward input[type=checkbox]:checked, #sequence #projector_second_forward input[type=checkbox]:checked { background: #14d8b4; } #sequence #camera_second_forward > div, #sequence #projector_second_forward > div { color: #14d8b4; } #sequence #camera_second_backward input[type=checkbox], #sequence #projector_second_backward input[type=checkbox] { border: 2px solid #bf2e39; } #sequence #camera_second_backward input[type=checkbox]:checked, #sequence #projector_second_backward input[type=checkbox]:checked { background: #bf2e39; } #sequence #camera_second_backward > div, #sequence #projector_second_backward > div { color: #bf2e39; } #sequence 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; } #sequence .L { display: inline-block; width: 35px; height: 35px; border-radius: 35px; margin: 0; margin-bottom: 3px; margin-right: 3px; border: 2px solid #fff; opacity: 0.5; cursor: pointer; } #sequence .L.a { opacity: 1; } #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-right: 3px; text-align: center; opacity: 0.5; } #sequence #numbers > div.h { color: #DAE035; opacity: 1; } .spacer { margin-top: 15px; } #seq_labels { font-family: 'Menlo', monospace; background-color: #272b30; position: absolute; top: 113px; padding-top: 2px; padding-bottom: 15px; width: 75px; } #seq_labels div { height: 43px; line-height: 35px; } #seq_labels span { text-indent: 7px; display: inline-block; margin-right: 5px; } #seq_labels i.fa { right: 3px; position: absolute; margin-top: 10px; } #loop_current { font-family: 'Menlo', monospace; font-size: 22px; margin-top: 13px; margin-right: 50px; width: 93px; text-align: center; position: relative; float: right; color: #DAE035; } #seq_pause { display: none; } #seq_progress { width: 100%; height: 15px; position: fixed; left: 0; bottom: 0; } #buttons > div, #buttons_2 > div { width: 50%; float: left; } #buttons .proj2, #buttons_2 .proj2 { float: right !important; } .cmd { width: 240px; text-align: center; margin: 10px auto; display: block; font-size: 16px; } .cmd i { margin-top: 3px; } .cmd i:first-child { float: left; margin-right: 5px; } .cmd i:last-child { float: right; margin-right: 5px; } .cmd.fwd i { color: #fff; } .cmd.bwd i { color: #fff; } .cmd:active.fwd, .cmd.active.fwd { background: #00C4A0; border-color: #00C4A0; } .cmd:active.bwd, .cmd.active.bwd { background: #AB1A25; border-color: #AB1A25; } .cmd:active i, .cmd.active i { color: #272b30; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.05); } #settings > div { width: 300px; margin: 0 auto; } #settings > div > div { width: 360px; } #settings input[type=text], #settings select { 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: 6px 12px; font-size: 21px; min-width: 300px; } #settings input[type=text] span, #settings select span { display: block; font-size: 16px; font-weight: 200; } #settings input[type=text]:active, #settings select:active, #settings input[type=text] .active, #settings select .active { background: #fff; color: #272b30; outline: none; } #settings input[type=text]:focus, #settings select:focus { outline: none; } #settings input[type=text].active, #settings select.active { border-color: #DAE035; color: #DAE035; } #settings button { margin-top: -1px; float: right; } #settings input[type=radio] { float: right; margin-right: 20px; } #settings .spacer { margin-top: 10px; } .cm-s-monokai.CodeMirror { background: #272b30 !important; } .cm-s-monokai .CodeMirror-gutters { background: #363a3f !important; } #mscript_cmd { margin: 7px 0 0 10px; } #mscript_cmd button { font-size: 12px; padding: 6px 14px 4px; } #console { background: #000; border-top: 2px solid rgba(255, 255, 255, 0.3); } #console textarea { font-family: 'Menlo', monospace; font-size: 12px; line-height: 17px; outline: none !important; border: none; box-sizing: border-box; margin: 0; padding: 20px; width: 100%; height: 122px; display: block; background: black; color: #fff; } #video input, #video select { 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: 6px 12px; font-size: 21px; min-width: 300px; } #video input span, #video select span { display: block; font-size: 16px; font-weight: 200; } #video input:active, #video select:active, #video input .active, #video select .active { background: #fff; color: #272b30; outline: none; } #video input:focus, #video select:focus { outline: none; } #video input.active, #video select.active { border-color: #DAE035; color: #DAE035; } #video button, #video select { padding: 9px 16px 8px; } #path_bar { padding: 5px; height: 50px; } #path_bar input { float: left; } #path_bar button { float: left; margin-left: 5px; } #path_bar select { line-height: 41px; height: 37px; margin-right: 5px; float: right; box-sizing: content-box; padding: 0 0 0 8px; } #filmout_monitor { display: none; border: 2px solid white; box-sizing: border-box; height: 360px; margin: 0 auto; position: relative; } #filmout_monitor.on { display: block; } #filmout_preview_wrap { background: #000; width: 100%; height: 360px; } #filmout { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; top: 0; left: 0; right: 0; bottom: 0; display: block; opacity: 0; } #filmout.on { opacity: 1; } #filmout_position_wrap { padding-top: 5px; height: 50px; } #filmout_position_wrap input { margin-right: 5px; margin-left: 5px; width: 308px !important; box-sizing: border-box; } #filmout_position_wrap button, #filmout_position_wrap input { float: left; } #filmout_position_wrap > div { width: 425px; margin: 0 auto; } #filmout_functions { padding-top: 5px; } #filmout_functions > div { width: 425px; margin: 0 auto; } #filmout_stats_video, #filmout_stats_monitor { width: 150px; position: absolute; padding: 10px 5px; text-align: center; } #filmout_stats_video h3, #filmout_stats_monitor h3 { font-size: 20px; margin: 16px 0 3px; text-align: center; } #filmout_stats_video { left: 5px; } #filmout_stats_monitor { right: 5px; } .hide { display: none; } .show { display: block; } #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_3 .cam, #move_to .cam, #move_to_2 .cam, #counters .cam2, #counters_2 .cam2, #counters_3 .cam2, #move_to .cam2, #move_to_2 .cam2, #counters .proj, #counters_2 .proj, #counters_3 .proj, #move_to .proj, #move_to_2 .proj, #counters .proj2, #counters_2 .proj2, #counters_3 .proj2, #move_to .proj2, #move_to_2 .proj2 { width: 50%; padding-bottom: 10px; } #counters .cam label, #counters_2 .cam label, #counters_3 .cam label, #move_to .cam label, #move_to_2 .cam label, #counters .cam2 label, #counters_2 .cam2 label, #counters_3 .cam2 label, #move_to .cam2 label, #move_to_2 .cam2 label, #counters .proj label, #counters_2 .proj label, #counters_3 .proj label, #move_to .proj label, #move_to_2 .proj label, #counters .proj2 label, #counters_2 .proj2 label, #counters_3 .proj2 label, #move_to .proj2 label, #move_to_2 .proj2 label { text-align: center; font-size: 24px; display: block; } #counters .cam input, #counters_2 .cam input, #counters_3 .cam input, #move_to .cam input, #move_to_2 .cam input, #counters .cam2 input, #counters_2 .cam2 input, #counters_3 .cam2 input, #move_to .cam2 input, #move_to_2 .cam2 input, #counters .proj input, #counters_2 .proj input, #counters_3 .proj input, #move_to .proj input, #move_to_2 .proj input, #counters .proj2 input, #counters_2 .proj2 input, #counters_3 .proj2 input, #move_to .proj2 input, #move_to_2 .proj2 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_3 .cam input.changed, #move_to .cam input.changed, #move_to_2 .cam input.changed, #counters .cam2 input.changed, #counters_2 .cam2 input.changed, #counters_3 .cam2 input.changed, #move_to .cam2 input.changed, #move_to_2 .cam2 input.changed, #counters .proj input.changed, #counters_2 .proj input.changed, #counters_3 .proj input.changed, #move_to .proj input.changed, #move_to_2 .proj input.changed, #counters .proj2 input.changed, #counters_2 .proj2 input.changed, #counters_3 .proj2 input.changed, #move_to .proj2 input.changed, #move_to_2 .proj2 input.changed { color: #DAE035; } #counters .cam, #counters_2 .cam, #counters_3 .cam, #move_to .cam, #move_to_2 .cam, #counters .cam2, #counters_2 .cam2, #counters_3 .cam2, #move_to .cam2, #move_to_2 .cam2 { float: left; } #counters .proj, #counters_2 .proj, #counters_3 .proj, #move_to .proj, #move_to_2 .proj, #counters .proj2, #counters_2 .proj2, #counters_3 .proj2, #move_to .proj2, #move_to_2 .proj2 { float: right; } #counters.projectors .proj, #counters.projectors .proj2 { width: 25%; } #counters.projectors .proj label, #counters.projectors .proj2 label { line-height: 34px; font-size: 18px; } #counters.projectors .proj input, #counters.projectors .proj2 input { width: 90%; } #counters.cameras .cam, #counters.cameras .cam2 { width: 25%; } #counters.cameras .cam label, #counters.cameras .cam2 label { line-height: 34px; font-size: 18px; } #counters.cameras .cam input, #counters.cameras .cam2 input { width: 90%; } #move_to, #move_to_2 { margin-top: 20px; } #move_to .cam > div, #move_to_2 .cam > div, #move_to .cam2 > div, #move_to_2 .cam2 > div, #move_to .proj > div, #move_to_2 .proj > div, #move_to .proj2 > div, #move_to_2 .proj2 > div { width: 294px; margin: 0 auto; } #move_to .cam label, #move_to_2 .cam label, #move_to .cam2 label, #move_to_2 .cam2 label, #move_to .proj label, #move_to_2 .proj label, #move_to .proj2 label, #move_to_2 .proj2 label { font-size: 18px; } #move_to .cam input, #move_to_2 .cam input, #move_to .cam2 input, #move_to_2 .cam2 input, #move_to .proj input, #move_to_2 .proj input, #move_to .proj2 input, #move_to_2 .proj2 input { display: inline-block; width: 206px; } #move_to .cam button, #move_to_2 .cam button, #move_to .cam2 button, #move_to_2 .cam2 button, #move_to .proj button, #move_to_2 .proj button, #move_to .proj2 button, #move_to_2 .proj2 button { padding: 7px 16px; float: right; } #move_to > .proj2, #move_to_2 > .proj2 { float: right; } .cam2, .proj2 { display: none; } .cam2 > *, .proj2 > * { visibility: hidden; } .cam2.on, .proj2.on { display: block; } .cam2.on > *, .proj2.on > * { visibility: visible; } #overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; } #spinnerMsg { position: absolute; width: 80%; z-index: 2000000000; left: 50%; top: 50%; text-align: center; margin-left: -40%; margin-top: 50px; font-size: 17px; color: #fff; text-shadow: 1px 1px 2px #000; } #spinnerCancel { display: none; position: absolute; z-index: 2000000000; left: 50%; top: 50%; text-align: center; margin-left: -40%; margin-top: 120px; width: 80%; } #spinnerCancel .btn { margin: 0 auto; background: rgba(80, 80, 80, 0.4); } .cp-app { position: relative !important; border-radius: 0px !important; top: 0px !important; } .cp-app .cp-memo { bottom: 2px !important; } .progress { width: 240px; margin: 85px -120px; display: block; position: absolute; left: 50%; top: 50%; }