mcopy/app/less/seq.less

246 lines
3.7 KiB
Plaintext
Raw Normal View History

//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;
2019-04-16 14:01:42 +00:00
padding-left: 92px;
#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 {
input[type=checkbox]{
border: 2px solid @FORWARD + @SECOND;
&:checked{
background: @FORWARD + @SECOND;
}
}
>div{
color: @FORWARD + @SECOND;
}
}
#camera_second_backward,
#projector_second_backward{
input[type=checkbox]{
border: 2px solid @BACKWARD + @SECOND;
&:checked{
background: @BACKWARD + @SECOND;
}
}
>div{
color: @BACKWARD + @SECOND;
}
}
#black{
input[type=checkbox]{
&:checked{
background: white;
}
}
}
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;
&.disabled{
cursor: not-allowed;
border-color: rgb(100, 100, 100);
}
}
.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;
2019-04-16 14:01:42 +00:00
top: 113px;
padding-top: 2px;
padding-bottom: 15px;
2019-04-16 14:01:42 +00:00
width: 75px;
div{
height: 43px;
line-height: 35px;
}
span{
text-indent: 7px;
display: inline-block;
margin-right: 5px;
}
2019-04-16 14:01:42 +00:00
i.fa{
right: 3px;
position: absolute;
margin-top: 10px;
}
}
#loop_current{
2019-04-28 02:28:23 +00:00
font-family: 'Menlo', monospace;
font-size: 22px;
margin-top: 13px;
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;
}