mcopy/app/less/seq.less

230 lines
3.5 KiB
Plaintext

//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_wrap{
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;
}
}
#sequence{
width: 970px;
padding-bottom: 21px;
padding-left: 70px;
#camera_forward,
#camera_second_forward,
#projector_forward,
#projector_second_forward,
#black_forward{
clear: both;
input[type=checkbox]{
border: 2px solid @FORWARD;
&:checked{
background: @FORWARD;
}
}
>div{
color: @FORWARD;
}
}
#camera_backward,
#camera_second_backward,
#projector_backward,
#projector_second_backward,
#black_backward{
clear: both;
input[type=checkbox]{
border: 2px solid @BACKWARD;
&:checked{
background: @BACKWARD;
}
}
>div{
color: @BACKWARD;
}
}
#camera_second_forward,
#projector_second_forward {
display: none;
input[type=checkbox]{
border: 2px solid @FORWARD + @SECOND;
&:checked{
background: @FORWARD + @SECOND;
}
}
>div{
color: @FORWARD + @SECOND;
}
}
#camera_second_backward,
#projector_second_backward{
display: none;
input[type=checkbox]{
border: 2px solid @BACKWARD + @SECOND;
&:checked{
background: @BACKWARD + @SECOND;
}
}
>div{
color: @BACKWARD + @SECOND;
}
}
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: 115px;
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: 21px;
margin-right: 50px;
width: 93px;
text-align: center;
position: relative;
float: right;
color: @SELECTED;
}
#seq_pause{
display: none;
}
#seq_progress{
width: 100%;
height: 15px;
position: fixed;
left: 0;
bottom: 0;
}