684 lines
11 KiB
SCSS
684 lines
11 KiB
SCSS
@import "client/common.css.scss";
|
|
|
|
[layout-id="session"] {
|
|
|
|
.resync {
|
|
margin-left:15px;
|
|
}
|
|
|
|
#session-controls {
|
|
|
|
width:100%;
|
|
padding:11px 0px 11px 0px;
|
|
background-color:#4c4c4c;
|
|
min-height:20px;
|
|
overflow-x:hidden;
|
|
position:relative;
|
|
}
|
|
}
|
|
|
|
|
|
.audio-devices {
|
|
font-family:"Raleway", arial, sans-serif;
|
|
border:none;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
color:#666;
|
|
}
|
|
|
|
|
|
.track {
|
|
width:70px;
|
|
height:290px;
|
|
display:inline-block;
|
|
margin-right:8px;
|
|
position:relative;
|
|
background-color:#242323;
|
|
}
|
|
|
|
.track-empty {
|
|
min-width:230px;
|
|
height:201px;
|
|
margin-right:8px;
|
|
padding-top:70px;
|
|
text-align:center;
|
|
font-weight:600;
|
|
font-style:italic;
|
|
font-size:16px;
|
|
white-space:normal;
|
|
color:#666;
|
|
}
|
|
|
|
#tracks {
|
|
margin-top:12px;
|
|
overflow:auto;
|
|
}
|
|
|
|
.track-empty a {
|
|
color:#aaa;
|
|
}
|
|
|
|
table.vu td {
|
|
border: 3px solid #222;
|
|
}
|
|
|
|
.track-vu-left {
|
|
position:absolute;
|
|
bottom:8px;
|
|
left:0px;
|
|
}
|
|
|
|
.track-vu-right {
|
|
position:absolute;
|
|
bottom:8px;
|
|
right:0px;
|
|
}
|
|
|
|
.vu-red-off {
|
|
background-color:#6c1709;
|
|
}
|
|
|
|
.vu-red-on {
|
|
background-color:#e73619;
|
|
}
|
|
|
|
.vu-green-off {
|
|
background-color:#244105;
|
|
}
|
|
|
|
.vu-green-on {
|
|
background-color:#72a43b;
|
|
}
|
|
|
|
.track-label {
|
|
position: absolute;
|
|
text-align:center;
|
|
width: 55px;
|
|
max-width: 55px;
|
|
white-space:normal;
|
|
top: 3px;
|
|
left: 7px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.track-close {
|
|
position:absolute;
|
|
top:3px;
|
|
right:3px;
|
|
width:12px;
|
|
height:12px;
|
|
}
|
|
|
|
|
|
|
|
/* Just bringing in Jeff's session.css file in entirety below */
|
|
/* But have modified significantly to make things work. Needs cleanup */
|
|
|
|
#session-controls {
|
|
.label {
|
|
float:left;
|
|
font-size:12px;
|
|
color:#ccc;
|
|
margin: 0px 0px 0px 4px;
|
|
}
|
|
|
|
.block {
|
|
float:left;
|
|
margin: 6px 8px 0px 8px;
|
|
}
|
|
|
|
.fader {
|
|
float:left;
|
|
position: relative;
|
|
margin: 0px 0px 0px 4px;
|
|
width: 60px;
|
|
height: 24px;
|
|
}
|
|
[control="fader"] {
|
|
height: 24px;
|
|
}
|
|
|
|
.fader.lohi {
|
|
background-image: url('/assets/content/bkg_volume.png');
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
.fader.flat {
|
|
background-image: url('/assets/content/bkg_playcontrols.png');
|
|
height: 17px;
|
|
width: 80px;
|
|
}
|
|
|
|
.handle {
|
|
position:absolute;
|
|
top:2px;
|
|
width:8px;
|
|
height:17px;
|
|
}
|
|
}
|
|
|
|
.settings {
|
|
margin-left:15px;
|
|
}
|
|
|
|
.leave {
|
|
margin-right:25px;
|
|
}
|
|
|
|
.session-mytracks {
|
|
margin-left:15px;
|
|
float:left;
|
|
display:inline-block;
|
|
width:19%;
|
|
min-width:165px;
|
|
border-right:solid 1px #666;
|
|
}
|
|
|
|
.session-livetracks {
|
|
margin-left:15px;
|
|
float:left;
|
|
display:inline-block;
|
|
width:35%;
|
|
min-width:220px;
|
|
border-right:solid 1px #666;
|
|
}
|
|
|
|
.session-recordings {
|
|
margin-left:15px;
|
|
display:inline-block;
|
|
width:35%;
|
|
min-width:220px;
|
|
}
|
|
|
|
#tracks .when-empty {
|
|
margin: 0px;
|
|
padding:0px;
|
|
display:block;
|
|
padding-top: 125px;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
}
|
|
#tracks .when-empty.recordings {
|
|
padding-top: 137px;
|
|
}
|
|
|
|
#tracks .when-empty a {
|
|
text-decoration: underline;
|
|
color: inherit;
|
|
}
|
|
|
|
|
|
|
|
.session-add {
|
|
margin-top:9px;
|
|
margin-bottom:8px;
|
|
font-size:16px;
|
|
height: 22px;
|
|
min-height: 22px;
|
|
max-height: 22px;
|
|
}
|
|
|
|
.session-add a {
|
|
color:#ccc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.session-add a img {
|
|
vertical-align:bottom;
|
|
}
|
|
|
|
.session-recording-name-wrapper {
|
|
position:relative;
|
|
white-space:nowrap;
|
|
|
|
}
|
|
|
|
.session-recording-name {
|
|
width:60%;
|
|
overflow:hidden;
|
|
margin-top:6px;
|
|
margin-bottom:8px;
|
|
font-size:16px;
|
|
}
|
|
|
|
.session-tracks-scroller {
|
|
position:relative;
|
|
overflow-x:auto;
|
|
overflow-y:hidden;
|
|
width:100%;
|
|
height:340px;
|
|
float:left;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.track {
|
|
width:70px;
|
|
height:290px;
|
|
display:inline-block;
|
|
margin-right:8px;
|
|
position:relative;
|
|
background-color:#242323;
|
|
}
|
|
|
|
|
|
.track-empty {
|
|
min-width:230px;
|
|
height:201px;
|
|
margin-right:8px;
|
|
padding-top:70px;
|
|
text-align:center;
|
|
font-weight:600;
|
|
font-style:italic;
|
|
font-size:16px;
|
|
white-space:normal;
|
|
color:#666;
|
|
}
|
|
|
|
.track-empty a {
|
|
color:#aaa;
|
|
}
|
|
|
|
.track-vu-left {
|
|
position:absolute;
|
|
bottom:8px;
|
|
left:0px;
|
|
}
|
|
|
|
.track-vu-right {
|
|
position:absolute;
|
|
bottom:8px;
|
|
right:0px;
|
|
}
|
|
|
|
.vu-red-off {
|
|
background-color:#6c1709;
|
|
}
|
|
|
|
.vu-red-on {
|
|
background-color:#e73619;
|
|
}
|
|
|
|
.vu-green-off {
|
|
background-color:#244105;
|
|
}
|
|
|
|
.vu-green-on {
|
|
background-color:#72a43b;
|
|
}
|
|
|
|
.track-label {
|
|
position: absolute;
|
|
width: 55px;
|
|
top: 3px;
|
|
left: 7px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.session-livetracks .loading {
|
|
opacity: .3;
|
|
-ms-filter: "alpha(opacity=30)";
|
|
}
|
|
|
|
.live-track-label {
|
|
white-space:normal;
|
|
text-align:center;
|
|
width: 60px;
|
|
height: 40px;
|
|
padding:5px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.recording-track-label {
|
|
white-space:normal;
|
|
text-align:center;
|
|
width: 60px;
|
|
height: 40px;
|
|
padding:5px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.track-close {
|
|
position:absolute;
|
|
top:3px;
|
|
right:3px;
|
|
width:12px;
|
|
height:12px;
|
|
}
|
|
|
|
.avatar-med {
|
|
position:absolute;
|
|
top:32px;
|
|
left:12px;
|
|
padding:1px;
|
|
width:44px;
|
|
height:44px;
|
|
background-color:#ed3618;
|
|
-webkit-border-radius:22px;
|
|
-moz-border-radius:22px;
|
|
border-radius:22px;
|
|
}
|
|
|
|
.avatar-recording {
|
|
position:absolute;
|
|
top:32px;
|
|
left:12px;
|
|
padding:1px;
|
|
width:44px;
|
|
height:44px;
|
|
background-color: none;
|
|
-webkit-border-radius:22px;
|
|
-moz-border-radius:22px;
|
|
border-radius:22px;
|
|
}
|
|
|
|
.avatar-med img {
|
|
width: 44px;
|
|
height: 44px;
|
|
-webkit-border-radius:22px;
|
|
-moz-border-radius:22px;
|
|
border-radius:22px;
|
|
}
|
|
|
|
.track-instrument {
|
|
position:absolute;
|
|
top:85px;
|
|
left:12px;
|
|
}
|
|
|
|
.track-gain {
|
|
position:absolute;
|
|
width:28px;
|
|
height:83px;
|
|
top:138px;
|
|
left:23px;
|
|
background-image:url('/assets/content/bkg_gain_slider.png');
|
|
background-repeat:repeat-y;
|
|
background-position:bottom;
|
|
}
|
|
|
|
.track-gain-wrapper {
|
|
cursor:pointer;
|
|
position:relative;
|
|
width:28px;
|
|
height:83px;
|
|
}
|
|
|
|
.track-gain-slider {
|
|
position:absolute;
|
|
cursor:pointer;
|
|
width:28px;
|
|
height:11px;
|
|
left:0px;
|
|
}
|
|
|
|
.track-icon-mute {
|
|
cursor: pointer;
|
|
position:absolute;
|
|
top:230px;
|
|
left:29px;
|
|
width: 20px;
|
|
height: 18px;
|
|
background-image:url('/assets/content/icon_mute.png');
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
.track-icon-mute.muted {
|
|
background-position: 0px 0px;
|
|
}
|
|
.track-icon-mute.enabled {
|
|
background-position: -20px 0px;
|
|
}
|
|
|
|
.session-livetracks .track-icon-mute, .session-recordings .track-icon-mute {
|
|
top:245px;
|
|
}
|
|
|
|
.track-icon-settings {
|
|
position:absolute;
|
|
top:255px;
|
|
left:28px;
|
|
}
|
|
|
|
.track-connection-green {
|
|
position:absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width: 70px;
|
|
height: 8px;
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-weight:bold;
|
|
font-size:8px;
|
|
text-align:center;
|
|
background-color:#72a43b;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.track-connection-yellow {
|
|
position:absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width: 70px;
|
|
height: 8px;
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-weight:bold;
|
|
font-size:8px;
|
|
text-align:center;
|
|
background-color:#cc9900;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.track-connection-red {
|
|
position:absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width: 70px;
|
|
height: 8px;
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-weight:bold;
|
|
font-size:8px;
|
|
text-align:center;
|
|
background-color:#980006;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.track-connection-grey {
|
|
position:absolute;
|
|
bottom:0px;
|
|
left:0px;
|
|
width: 70px;
|
|
height: 8px;
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-weight:bold;
|
|
font-size:8px;
|
|
text-align:center;
|
|
background-color:#666;
|
|
overflow:hidden;
|
|
}
|
|
|
|
|
|
.voicechat {
|
|
margin-top:10px;
|
|
width:152px;
|
|
height:25px;
|
|
background-color:#242323;
|
|
position:absolute;
|
|
bottom:0px;
|
|
}
|
|
|
|
.voicechat-label {
|
|
position:absolute;
|
|
font-size:11px;
|
|
font-weight:500;
|
|
top:7px;
|
|
left:8px;
|
|
}
|
|
|
|
.voicechat-gain {
|
|
position:absolute;
|
|
top:4px;
|
|
left:45px;
|
|
width:51px;
|
|
height:186px;
|
|
background-image:url(/assets/content/bkg_slider_gain_horiz.png);
|
|
background-repeat:repeat-x;
|
|
}
|
|
|
|
.voicechat-gain-wrapper {
|
|
position:relative;
|
|
width:51px;
|
|
height:18px;
|
|
}
|
|
|
|
.voicechat-gain-slider {
|
|
position:absolute;
|
|
top:0px;
|
|
left:60%;
|
|
width:10px;
|
|
height:18px;
|
|
}
|
|
|
|
.voicechat-mute {
|
|
position:absolute;
|
|
top:4px;
|
|
left: 103px;
|
|
width: 20px;
|
|
height: 18px;
|
|
background-image:url('/assets/content/icon_mute.png');
|
|
background-repeat:no-repeat;
|
|
}
|
|
|
|
.voicechat-mute.muted {
|
|
background-position: 0px 0px;
|
|
}
|
|
.voicechat-mute.enabled {
|
|
background-position: -20px 0px;
|
|
}
|
|
|
|
|
|
.voicechat-settings {
|
|
position:absolute;
|
|
top:4px;
|
|
left: 127px;
|
|
}
|
|
|
|
.recording {
|
|
bottom: 0px;
|
|
margin-top:15px;
|
|
padding:3px;
|
|
height:19px;
|
|
width:95%;
|
|
background-color:#242323;
|
|
position:absolute;
|
|
text-align:center;
|
|
font-size:13px;
|
|
}
|
|
|
|
.recording a {
|
|
color:#ccc;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.recording a img {
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.recording-controls {
|
|
margin-top:15px;
|
|
padding:3px 5px 3px 10px;
|
|
height:19px;
|
|
width:93%;
|
|
min-width:200px;
|
|
background-color:#242323;
|
|
position:relative;
|
|
font-size:13px;
|
|
text-align:center;
|
|
}
|
|
|
|
.recording-position {
|
|
display:inline-block;
|
|
width:80%;
|
|
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-size:11px;
|
|
height:18px;
|
|
vertical-align:top;
|
|
}
|
|
|
|
.recording-time {
|
|
display:inline-block;
|
|
height:16px;
|
|
vertical-align:top;
|
|
margin-top:4px;
|
|
}
|
|
|
|
.recording-playback {
|
|
display:inline-block;
|
|
background-image:url(/assets/content/bkg_playcontrols.png);
|
|
background-repeat:repeat-x;
|
|
position:relative;
|
|
width:65%;
|
|
height:16px;
|
|
margin-top:2px;
|
|
}
|
|
|
|
.recording-slider {
|
|
position:absolute;
|
|
left:40px;
|
|
top:0px;
|
|
}
|
|
|
|
.recording-current {
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
display:inline-block;
|
|
font-size:18px;
|
|
}
|
|
|
|
/* GAIN SLIDER POSITIONS -- TEMPORARY FOR DISPLAY PURPOSES ONLY */
|
|
.pos0 {
|
|
bottom:0px;
|
|
}
|
|
|
|
.pos10 {
|
|
bottom:10%;
|
|
}
|
|
|
|
.pos20 {
|
|
bottom:20%;
|
|
}
|
|
|
|
.pos30 {
|
|
bottom:30%;
|
|
}
|
|
|
|
.pos40 {
|
|
bottom:40%;
|
|
}
|
|
|
|
.pos50 {
|
|
bottom:50%;
|
|
}
|
|
|
|
.pos60 {
|
|
bottom:60%;
|
|
}
|
|
|
|
.pos70 {
|
|
bottom:70%;
|
|
}
|
|
|
|
.pos80 {
|
|
bottom:80%;
|
|
}
|
|
|
|
|