mcopy/app/css/app.css

784 lines
14 KiB
CSS

* {
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: 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;
}
#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(22%);
}
.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 {
width: 40%;
float: left;
padding: 0 0 0 56px;
}
#seq_loop h3 {
font-size: 20px;
margin: 12px 0 3px;
}
#seq_loop 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: 70px;
}
#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: 2px solid #00C4A0;
}
#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: 2px solid #AB1A25;
}
#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 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: 128px;
padding-top: 2px;
padding-bottom: 15px;
width: 54px;
}
#seq_labels div {
height: 43px;
line-height: 35px;
}
#seq_labels span {
text-indent: 7px;
display: inline-block;
margin-right: 5px;
}
#loop_current {
margin-top: 54px;
width: 121px;
text-align: center;
color: #DAE035;
}
#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: 150px;
display: block;
background: black;
color: #fff;
}
#buttons > div {
width: 50%;
float: left;
}
.cmd {
width: 240px;
text-align: center;
margin: 5px auto;
display: block;
font-size: 16px;
}
.cmd i {
float: left;
margin-right: 5px;
}
.cmd.fwd i {
color: #00C4A0;
}
.cmd.bwd i {
color: #AB1A25;
}
.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 button {
margin-top: -1px;
float: right;
}
#settings input[type=radio] {
float: right;
margin-right: 20px;
}
#settings .spacer {
margin-top: 10px;
}
#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;
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;
}
.cp-app {
position: relative !important;
border-radius: 0px !important;
top: 0px !important;
}
.cp-app .cp-memo {
bottom: 2px !important;
}
.cm-s-monokai.CodeMirror {
background: #272b30 !important;
}
.cm-s-monokai .CodeMirror-gutters {
background: #363a3f !important;
}