906 lines
14 KiB
SCSS
906 lines
14 KiB
SCSS
@import "client/common";
|
|
|
|
[layout-id="session"] {
|
|
|
|
.resync {
|
|
margin-left:15px;
|
|
}
|
|
|
|
#session-controls {
|
|
|
|
width:100%;
|
|
padding:11px 0px 11px 0px;
|
|
background-color:#4c4c4c;
|
|
min-height:20px;
|
|
position:relative;
|
|
}
|
|
|
|
.pending-metronome {
|
|
.spinner-large {
|
|
margin:20px auto 0;
|
|
text-align:center;
|
|
}
|
|
p {
|
|
text-align:center;
|
|
font-size:14px;
|
|
}
|
|
}
|
|
|
|
.track {
|
|
width:70px;
|
|
height:300px;
|
|
display:inline-block;
|
|
margin-right:8px;
|
|
position:relative;
|
|
background-color:#242323;
|
|
-webkit-border-radius:4px;
|
|
-moz-border-radius:4px;
|
|
border-radius:4px;
|
|
|
|
.disabled-track-overlay {
|
|
width:100%;
|
|
height:100%;
|
|
position:absolute;
|
|
background-color:#555;
|
|
opacity:0.5;
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
.track-instrument {
|
|
position:absolute;
|
|
top:85px;
|
|
left:12px;
|
|
}
|
|
|
|
.recording-position {
|
|
display:inline-block;
|
|
width:80%;
|
|
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
font-size:11px;
|
|
height:18px;
|
|
vertical-align:top;
|
|
}
|
|
|
|
.session-recordedtracks-container {
|
|
//display: block;
|
|
}
|
|
|
|
.recording-controls {
|
|
display:none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 25px;
|
|
|
|
.play-button {
|
|
top:2px;
|
|
}
|
|
.recording-current {
|
|
top:3px ! important;
|
|
}
|
|
}
|
|
|
|
.playback-mode-buttons {
|
|
display:none;
|
|
}
|
|
|
|
.monitor-mode-holder .easydropdown-wrapper{
|
|
top:-7px;
|
|
left:5px;
|
|
}
|
|
|
|
.open-media-file-header, .use-metronome-header {
|
|
font-size:16px;
|
|
line-height:100%;
|
|
margin:0;
|
|
|
|
img {
|
|
position:relative;
|
|
top:3px;
|
|
}
|
|
}
|
|
.open-media-file-header {
|
|
float: left;
|
|
}
|
|
|
|
.use-metronome-header {
|
|
clear: both;
|
|
}
|
|
|
|
.open-media-file-options {
|
|
font-size:16px;
|
|
float:left;
|
|
list-style: none !important;
|
|
margin: 7px 0 0 7px !important;
|
|
li {
|
|
margin-bottom:5px !important;
|
|
a {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#track-settings {
|
|
img {
|
|
position:relative;
|
|
top:3px;
|
|
}
|
|
}
|
|
|
|
|
|
.session-recording-name-wrapper{
|
|
position:relative;
|
|
white-space:normal;
|
|
display:none;
|
|
|
|
.session-recording-name {
|
|
position:relative;
|
|
margin-top:9px;
|
|
margin-bottom:8px;
|
|
font-size:16px;
|
|
height: 22px;
|
|
min-height: 22px;
|
|
max-height: 22px;
|
|
display: inline-block;
|
|
width:60%;
|
|
text-overflow:ellipsis;
|
|
}
|
|
|
|
.session-add {
|
|
margin-top:9px;
|
|
}
|
|
.session-add a {
|
|
vertical-align:top;
|
|
outline:none;
|
|
|
|
img {
|
|
margin-top:-3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.session-recording-name {
|
|
width:60%;
|
|
overflow:hidden;
|
|
margin-top:9px;
|
|
margin-bottom:8px;
|
|
font-size:16px;
|
|
}
|
|
|
|
.download-jamtrack {
|
|
margin-top:50px;
|
|
}
|
|
|
|
.metronome-playback-options {
|
|
height:100%;
|
|
line-height:100%;
|
|
vertical-align:middle;
|
|
|
|
span.metronome-state {
|
|
cursor:pointer;
|
|
height:100%;
|
|
line-height:100%;
|
|
vertical-align:middle;
|
|
}
|
|
}
|
|
|
|
#metronome-playback-help {
|
|
position:absolute;
|
|
right:5px;
|
|
top:5px;
|
|
color:#ffcc00;
|
|
cursor:help;
|
|
}
|
|
}
|
|
|
|
|
|
.audio-devices {
|
|
border:none;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
color:#666;
|
|
}
|
|
|
|
.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;
|
|
height: 15px;
|
|
min-height: 11px;
|
|
max-height: 33px;
|
|
max-width: 55px;
|
|
white-space:normal;
|
|
top: 3px;
|
|
left: 7px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-overflow:ellipsis;
|
|
}
|
|
|
|
.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.livetracks {
|
|
margin: 0px;
|
|
padding:0px;
|
|
display:block;
|
|
padding-top: 125px;
|
|
vertical-align:middle;
|
|
text-align:center;
|
|
}
|
|
#tracks .when-empty.recordings {
|
|
//padding-top: 137px;
|
|
text-align:left;
|
|
padding-top:6px;
|
|
margin:0;
|
|
}
|
|
|
|
#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-tracks-scroller {
|
|
position:relative;
|
|
overflow-x:auto;
|
|
overflow-y:hidden;
|
|
width:100%;
|
|
height:370px;
|
|
float:left;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
|
|
|
|
|
|
.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-gain {
|
|
position:absolute;
|
|
width:28px;
|
|
height:63px;
|
|
top:138px;
|
|
left:23px;
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
.track-icon-loop {
|
|
cursor: pointer;
|
|
position:absolute;
|
|
top:250px;
|
|
left:11px;
|
|
width: 20px;
|
|
height: 18px;
|
|
text-align: center;
|
|
font-size: 8pt;
|
|
font-weight: bold;
|
|
|
|
.icheckbox_minimal {
|
|
top:5px;
|
|
margin-right:5px;
|
|
}
|
|
}
|
|
|
|
.metronome-selects {
|
|
position: absolute;
|
|
width: 52px;
|
|
top:252px;
|
|
left: 10px;
|
|
|
|
height: 18px;
|
|
text-align: center;
|
|
//display: block;
|
|
//padding: 4px;
|
|
|
|
select.metronome-select {
|
|
position: relative;
|
|
padding: 4px 0px 4px 0px;
|
|
margin: 0;
|
|
width: 100% !important;
|
|
font-size: 10px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.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:225px;
|
|
}
|
|
|
|
.track-icon-settings {
|
|
position:absolute;
|
|
top:235px;
|
|
left:28px;
|
|
}
|
|
|
|
.track-connection {
|
|
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;
|
|
overflow:hidden;
|
|
}
|
|
.track-connection.green {
|
|
background-color:#72a43b;
|
|
}
|
|
|
|
.track-connection.yellow {
|
|
background-color:#cc9900;
|
|
}
|
|
|
|
.track-connection.red {
|
|
background-color:#980006;
|
|
}
|
|
|
|
.track-connection.grey {
|
|
background-color:#666;
|
|
}
|
|
|
|
.session-mytracks {
|
|
.track-connection {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
.session-recordings {
|
|
.track-connection {
|
|
display:none;
|
|
}
|
|
|
|
.track-close {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
#recording-finished-dialog .recording-controls {
|
|
display:block;
|
|
}
|
|
|
|
|
|
.voicechat {
|
|
margin-top:10px;
|
|
width:130px;
|
|
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:absolute;
|
|
font-size:13px;
|
|
text-align:center;
|
|
}
|
|
|
|
.recording-time {
|
|
display:inline-block;
|
|
height:16px;
|
|
vertical-align:top;
|
|
margin-top:4px;
|
|
}
|
|
|
|
.recording-time.duration-time {
|
|
padding-left:2px;
|
|
}
|
|
|
|
.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;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.recording-slider {
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
|
|
img {
|
|
position:absolute;
|
|
}
|
|
}
|
|
|
|
.recording-current {
|
|
font-family:Arial, Helvetica, sans-serif;
|
|
display:inline-block;
|
|
font-size:18px;
|
|
}
|
|
|
|
|
|
.playback-mode-buttons {
|
|
display:none;
|
|
}
|
|
|
|
.currently-recording {
|
|
background-color: $ColorRecordingBackground;
|
|
}
|
|
|
|
#recording-timer {
|
|
margin-left:8px;
|
|
}
|
|
|
|
/* 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%;
|
|
}
|
|
|
|
|
|
#update-session-invite-musicians {
|
|
margin: 10px;
|
|
}
|
|
|
|
.rate-thumbsup {
|
|
width:64px;
|
|
height:64px;
|
|
display:inline-block;
|
|
background-image:url('/assets/content/icon_thumbsup_big_off.png');
|
|
}
|
|
|
|
.rate-thumbsup.selected {
|
|
background-image:url('/assets/content/icon_thumbsup_big_on.png');
|
|
}
|
|
|
|
.rate-thumbsdown {
|
|
width:64px;
|
|
height:64px;
|
|
display:inline-block;
|
|
background-image:url('/assets/content/icon_thumbsdown_big_off.png');
|
|
}
|
|
|
|
.rate-thumbsdown.selected {
|
|
background-image:url('/assets/content/icon_thumbsdown_big_on.png');
|
|
}
|
|
|
|
|
|
.recording-controls {
|
|
|
|
.play-button {
|
|
outline:none;
|
|
}
|
|
|
|
.play-button img.pausebutton {
|
|
display:none;
|
|
}
|
|
} |