jam-cloud/web/app/assets/stylesheets/client/dragDropTracks.css.scss

186 lines
3.6 KiB
SCSS

@import "client/common.css.scss";
@charset "UTF-8";
.dialog.gear-wizard, #configure-tracks-dialog {
.icon-instrument-select {
padding: 3px 0; // to combine 24 of .current-instrument + 3x on either side
margin: 0 0 15px 25px; // 15 margin-bottom to match tracks on the left
width: 30px;
}
.unassigned-output-channels {
min-height: 90px;
overflow-y: auto;
max-height: 90px;
//padding-right:18px; // to keep draggables off of scrollbar. maybe necessary
&.drag-in-progress {
}
&.possible-target {
border: solid 1px white;
&.drag-hovering {
border: solid 1px #ED3618;
}
}
}
.channels-holder {
.ftue-input {
background-position:4px 6px;
padding-left:14px;
}
}
.unassigned-input-channels {
min-height: 240px;
overflow-y: auto;
max-height:93%;
//padding-right:18px; // to keep draggables off of scrollbar. maybe necessary
&.compensate {
.ftue-input:not(.hovering) {
}
}
.ftue-input {
}
&.drag-in-progress {
}
&.possible-target {
border: solid 1px white;
&.drag-hovering {
border: solid 1px #ED3618;
}
}
}
.num {
position: absolute;
height: 29px;
line-height: 29px;
}
.track, .output {
margin-bottom: 15px;
.track-target, .output-target {
&.possible-target {
border-color: white;
}
&.drag-hovering {
border-color: #ED3618;
}
}
}
// do not show tracks with 2 channels as a possible target
.track .track-target.possible-target[track-count="2"] {
border-color:#999;
}
// do now show output slots with 1 channel as a possible target
.output .output-target.possible-target[output-count="1"] {
border-color:#999;
}
.ftue-input {
font-size: 12px;
cursor: move;
padding: 4px;
padding-left:10px;
border: solid 1px #999;
margin-bottom: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
line-height:20px;
background-image:url('/assets/content/icon_drag_handle.png');
background-position:0 3px;
background-repeat:no-repeat;
//direction: rtl;
&.ui-draggable-dragging {
margin-bottom: 0;
z-index:10000;
background-color:#333;
}
/**
&:hover {
color:white;
overflow:visible;
background-color:#333;
width: auto !important;
direction:ltr;
position:absolute;
line-height:19.5px;
}*/
}
.track-target, .output-target {
position:relative;
cursor: move;
padding: 4px;
border: solid 1px #999;
margin-left: 15px;
height: 20px;
overflow: hidden;
&.drag-in-progress {
overflow: visible;
}
.ftue-input {
padding: 0;
padding-left:10px;
border: 0;
margin-bottom: 0;
&.ui-draggable-dragging {
padding: 4px;
padding-left:14px;
background-position:4px 6px;
border: solid 1px #999;
overflow: visible;
}
}
.placeholder {
display: none;
font-size: 12px;
}
&[track-count="0"], &[output-count="0"] {
.placeholder {
display: inline;
}
}
&[track-count="2"] {
.ftue-input {
width: 49%;
display: inline-block;
@include border_box_sizing;
&:nth-of-type(1) {
float: left;
padding-right:2px;
/**&:after {
float:right;
content: ',';
padding-right:3px;
}*/
}
&:nth-of-type(2) {
padding-left:10px;
float: right;
}
}
}
}
}