506 lines
8.2 KiB
SCSS
506 lines
8.2 KiB
SCSS
@import "client/common";
|
|
|
|
.session-track {
|
|
|
|
display:inline-block;
|
|
margin: 10px 0 0 0;
|
|
color: $ColorTextTypical;
|
|
background-color: #242323;
|
|
border-radius: 6px;
|
|
min-height: 76px;
|
|
max-width: 210px;
|
|
position:relative;
|
|
@include border_box_sizing;
|
|
|
|
&:nth-child(1) {
|
|
margin-top:0;
|
|
}
|
|
|
|
.name {
|
|
width: 100%;
|
|
margin-bottom: 6px;
|
|
@include labelFont;
|
|
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.track-avatar {
|
|
float: left;
|
|
padding: 1px;
|
|
width: 44px;
|
|
height: 44px;
|
|
background-color: #ed3618;
|
|
-webkit-border-radius: 22px;
|
|
-moz-border-radius: 22px;
|
|
border-radius: 22px;
|
|
|
|
img {
|
|
width: 44px;
|
|
height: 44px;
|
|
-webkit-border-radius: 22px;
|
|
-moz-border-radius: 22px;
|
|
border-radius: 22px;
|
|
}
|
|
}
|
|
|
|
.track-instrument {
|
|
float: left;
|
|
padding: 1px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
table.vu {
|
|
float: left;
|
|
|
|
td {
|
|
border: 3px solid #242323;
|
|
}
|
|
}
|
|
|
|
.session-track-contents {
|
|
padding: 6px 6px 6px 10px;
|
|
}
|
|
.disabled-track-overlay {
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
background-color:#555;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.noAudioHelp {
|
|
display:none;
|
|
right:6px;
|
|
top:6px;
|
|
position:absolute;
|
|
color:#fc0;
|
|
z-index:1000;
|
|
font-size:12px;
|
|
}
|
|
|
|
&.no-mixer, &.no-audio {
|
|
.disabled-track-overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity:0.5;
|
|
z-index:1;
|
|
}
|
|
|
|
.noAudioHelp {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
|
|
.track-controls {
|
|
margin-top: 2px;
|
|
margin-left: 10px;
|
|
float:left;
|
|
}
|
|
|
|
.track-buttons {
|
|
margin-top:22px;
|
|
padding:0 0 0 3px;
|
|
}
|
|
|
|
.track-icon-mute {
|
|
float:left;
|
|
position:relative;
|
|
top:-1px;
|
|
left:0;
|
|
opacity: 0.7;
|
|
&:hover {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
.track-icon-pan {
|
|
float:left;
|
|
cursor: pointer;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image:url('/assets/content/icon_pan.png');
|
|
background-repeat:no-repeat;
|
|
text-align: center;
|
|
margin-left:10px;
|
|
opacity:0.7;
|
|
//-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
|
|
//transform: rotate(7deg);
|
|
&:hover {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
.track-connection-state {
|
|
width:20px;
|
|
height:20px;
|
|
float:left;
|
|
cursor:pointer;
|
|
text-align: center;
|
|
margin-left:10px;
|
|
border-radius:10px;
|
|
|
|
&.poor {
|
|
background-color:$poor;
|
|
}
|
|
&.warn {
|
|
background-color:$fair;
|
|
}
|
|
&.unknown {
|
|
background-color:$unknown;
|
|
}
|
|
&.good {
|
|
background-color:$good;
|
|
}
|
|
}
|
|
|
|
.track-icon-equalizer {
|
|
float:left;
|
|
cursor: pointer;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-image:url('/assets/content/icon_sound.png');
|
|
background-repeat:no-repeat;
|
|
text-align: center;
|
|
margin-left:7px;
|
|
opacity: 0.7;
|
|
&:hover {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
// for VST width considerations, widen my track and chat track
|
|
&.my-track {
|
|
width:235px;
|
|
max-width:235px;
|
|
}
|
|
|
|
&.chat-track {
|
|
width:235px;
|
|
max-width:235px;
|
|
}
|
|
|
|
// media overrides
|
|
&.backing-track, &.recorded-track, &.jam-track, &.metronome, &.recorded-category, &.jam-track-category {
|
|
width:210px;
|
|
table.vu {
|
|
float: right;
|
|
margin-top: 30px;
|
|
margin-right: 4px;
|
|
}
|
|
.track-controls {
|
|
float:right;
|
|
}
|
|
.track-buttons {
|
|
float:right;
|
|
}
|
|
.track-icon-pan {
|
|
float:right;
|
|
margin-right:15px;
|
|
}
|
|
.track-icon-mute{
|
|
float:right;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
margin-top:0;
|
|
}
|
|
}
|
|
|
|
&.music-mixer, &.chat-mixer {
|
|
width:210px;
|
|
.track-controls {
|
|
float:right;
|
|
}
|
|
}
|
|
|
|
&.metronome {
|
|
.track-instrument {
|
|
float:left;
|
|
margin-left:0;
|
|
margin-right: 10px;
|
|
margin-top: -4px;
|
|
}
|
|
.track-controls {
|
|
margin-left:0;
|
|
}
|
|
|
|
&.in-jam-track {
|
|
min-height:56px;
|
|
|
|
.track-buttons {
|
|
margin-top:2px;
|
|
}
|
|
table.vu {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.recorded-track, &.jam-track, &.recorded-category, &.jam-track-category {
|
|
height:56px;
|
|
min-height:56px;
|
|
.track-buttons {
|
|
margin-top:2px;
|
|
}
|
|
.track-controls {
|
|
margin-left:0;
|
|
}
|
|
table.vu {
|
|
margin-top:10px;
|
|
}
|
|
.track-instrument {
|
|
float: left;
|
|
margin: -4px 10px 0 0;
|
|
}
|
|
}
|
|
&.recorded-category, &.jam-track-category {
|
|
height:auto !important;
|
|
}
|
|
|
|
&.jam-track-category {
|
|
.jam-track-header {
|
|
position:absolute;
|
|
@include labelFont;
|
|
|
|
}
|
|
.name {
|
|
width:auto;
|
|
margin-left:60px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.react-holder {
|
|
&.SessionTrackVolumeHover, &.SessionSelfVolumeHover {
|
|
height:385px;
|
|
width:235px;
|
|
|
|
.session-track {
|
|
float:left;
|
|
background-color: #242323;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
height: 300px;
|
|
margin-right: 14px;
|
|
position: relative;
|
|
width: 70px;
|
|
margin-top:19px;
|
|
margin-left:24px;
|
|
}
|
|
|
|
.track-icon-mute {
|
|
float:none;
|
|
position: absolute;
|
|
top: 246px;
|
|
left: 29px;
|
|
}
|
|
|
|
.track-gain {
|
|
position:absolute;
|
|
width:28px;
|
|
height:209px;
|
|
top:32px;
|
|
left:23px;
|
|
}
|
|
|
|
.fader {
|
|
height:209px;
|
|
}
|
|
|
|
.handle {
|
|
bottom:0%;
|
|
display:none;
|
|
}
|
|
|
|
.textual-help {
|
|
float:left;
|
|
width:100px;
|
|
}
|
|
|
|
p {
|
|
font-size:12px !important;
|
|
padding:0;
|
|
margin:16px 0 0 !important;
|
|
line-height:125% !important;
|
|
&:nth-child(1) {
|
|
margin-top: 19px !important;
|
|
}
|
|
}
|
|
|
|
.icheckbox_minimal {
|
|
position:absolute;
|
|
top: 271px;
|
|
left: 12px;
|
|
}
|
|
|
|
input {
|
|
position:absolute;
|
|
top: 271px;
|
|
left: 12px;
|
|
}
|
|
|
|
label {
|
|
@include labelFont;
|
|
position:absolute;
|
|
top:273px;
|
|
left:34px
|
|
}
|
|
}
|
|
|
|
#self-volume-hover {
|
|
h3 {
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.monitor-mixer {
|
|
float:left;
|
|
width:235px;
|
|
@include border_box_sizing;
|
|
padding: 15px 0 15px 0;
|
|
|
|
h3 {
|
|
margin-left:36px;
|
|
}
|
|
|
|
.textual-help {
|
|
border-right:1px solid $ColorTextTypical;
|
|
float:right;
|
|
padding-right:25px !important;
|
|
|
|
p:nth-child(1) {
|
|
margin-top:0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-mixer {
|
|
float:left;
|
|
width:235px;
|
|
@include border-box-sizing;
|
|
padding: 15px 0 15px 0;
|
|
|
|
h3 {
|
|
margin-left:41px;
|
|
}
|
|
}
|
|
|
|
.mixer-holder {
|
|
|
|
padding-bottom:0;
|
|
|
|
.session-track {
|
|
margin-top:0;
|
|
}
|
|
|
|
.textual-help {
|
|
margin-top:0;
|
|
padding-right:10px;
|
|
|
|
p:nth-child(1) {
|
|
margin-top:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.SessionTrackVolumeHover {
|
|
.session-track {
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
|
|
&.SessionSelfVolumeHover {
|
|
width:470px ! important;
|
|
height:380px ! important;
|
|
}
|
|
|
|
&.SessionStatsHover {
|
|
width:385px;
|
|
height:675px;
|
|
@include border_box_sizing;
|
|
|
|
h3 {
|
|
margin-top:20px;
|
|
color: white;
|
|
margin-left:20px;
|
|
font-weight:bold;
|
|
}
|
|
|
|
&.self {
|
|
height:290px;
|
|
}
|
|
}
|
|
|
|
&.SessionTrackPanHover {
|
|
width:331px;
|
|
height:197px;
|
|
padding:15px;
|
|
@include border_box_sizing;
|
|
|
|
.session-pan {
|
|
.textual-help {
|
|
float:left;
|
|
width:100px;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size:12px !important;
|
|
padding:0 !important;
|
|
line-height:125% !important;
|
|
margin:0 !important;
|
|
}
|
|
.track-pan {
|
|
background-color: #242323;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
height: 70px;
|
|
position: relative;
|
|
width: 300px;
|
|
margin-top:15px;
|
|
}
|
|
.fader {
|
|
position:absolute;
|
|
width:205px;
|
|
height:24px;
|
|
top:34px;
|
|
left:44px;
|
|
background-image: url('/assets/content/bkg_slider_gain_horiz_24.png');
|
|
}
|
|
.handle {
|
|
display:none;
|
|
|
|
img {
|
|
position:absolute;
|
|
left:-5px;
|
|
}
|
|
}
|
|
.left-label {
|
|
@include labelFont;
|
|
position:absolute;
|
|
left:13px;
|
|
top:40px;
|
|
}
|
|
.right-label {
|
|
@include labelFont;
|
|
position:absolute;
|
|
right:12px;
|
|
top:40px;
|
|
}
|
|
.floater {
|
|
width:20px;
|
|
text-align:center;
|
|
top:-22px;
|
|
left:-8px;
|
|
@include labelFont;
|
|
position:absolute;
|
|
}
|
|
}
|
|
}
|