Start of session screen from Jeff
This commit is contained in:
Jonathon Wilson
parent
67bdb5a714
commit
dfdfd159cb
|
|
@ -98,16 +98,18 @@ input[type="button"] {
|
|||
font-weight:300;
|
||||
cursor:pointer;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.clearall {
|
||||
clear:both;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.left {
|
||||
float:left;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float:right;
|
||||
float:right;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
|
|||
|
|
@ -85,4 +85,96 @@
|
|||
width: 32px; height: 32px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#session-mytracks {
|
||||
margin-left:-20px;
|
||||
float:left;
|
||||
display:inline-block;
|
||||
width:19%;
|
||||
min-width:165px;
|
||||
border-right:solid 1px #666;
|
||||
}
|
||||
|
||||
#session-tracks-scroller {
|
||||
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;
|
||||
}
|
||||
|
||||
.track-close {
|
||||
position:absolute;
|
||||
top:3px;
|
||||
right:3px;
|
||||
width:12px;
|
||||
height:12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,9 +28,190 @@
|
|||
</div>
|
||||
<!-- end session controls -->
|
||||
|
||||
<!-- content scrolling area -->
|
||||
<div id="content-scroller">
|
||||
|
||||
<!-- content wrapper -->
|
||||
<div id="content-wrapper">
|
||||
|
||||
<!-- my tracks -->
|
||||
<div id="session-mytracks">
|
||||
<h2>my tracks</h2>
|
||||
|
||||
<!-- add track button -->
|
||||
<div class="session-add"><a href="javascript:showMytrack()"><img src="images/content/icon_add.png" width="19" height="19" align="texttop" /> Add Track</a></div>
|
||||
|
||||
<!-- my tracks scroller -->
|
||||
<div id="session-tracks-scroller">
|
||||
|
||||
<!-- track 1 -->
|
||||
<div id="mytrack-1" class="track">
|
||||
|
||||
<!-- left vu meter -->
|
||||
<table class="track-vu-left" cellspacing=3 cellpadding=0 border=0>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- right vu meter -->
|
||||
<table class="track-vu-right" cellspacing=3 cellpadding=0 border=0>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-red-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width=3 height=17 class="vu-green-on"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- track label -->
|
||||
<div class="track-label">
|
||||
Track 1
|
||||
</div>
|
||||
|
||||
<!-- close button -->
|
||||
<div class="track-close op30">
|
||||
<img src="images/content/icon_closetrack.png" width="12" height="12" />
|
||||
</div>
|
||||
|
||||
<!-- avatar -->
|
||||
<div class="avatar-med"><img src="images/shared/avatar_jonathon.png" width="246" height="246" /></div>
|
||||
|
||||
|
||||
<!-- instrument -->
|
||||
<div class="track-instrument"><img src="images/content/icon_instrument_guitar45.png" width="45" height="45" /></div>
|
||||
|
||||
<!-- gain -->
|
||||
<div class="track-gain">
|
||||
<div class="track-gain-wrapper">
|
||||
|
||||
<!-- gain slider -->
|
||||
<div class="track-gain-slider pos50"><img src="images/content/slider_gain_vertical.png" width="28" height="11" /></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mute icon -->
|
||||
<div class="track-icon-mute"><img src="images/content/icon_mute.png" width="20" height="18" /></div>
|
||||
|
||||
<!-- settings icon -->
|
||||
<div class="track-icon-settings"><img src="images/content/icon_settings_lg.png" width="18" height="18" /></div>
|
||||
|
||||
<!-- connection indicator -->
|
||||
<div class="track-connection-green">CONNECTION</div>
|
||||
<!-- end track -->
|
||||
<br clear="all" />
|
||||
<!-- voice chat box -->
|
||||
<div id="voicechat">
|
||||
|
||||
<div class="voicechat-label">CHAT</div>
|
||||
|
||||
<!-- voice chat gain -->
|
||||
<div class="voicechat-gain">
|
||||
<div class="voicechat-gain-wrapper">
|
||||
|
||||
<!-- voice chat gain slider -->
|
||||
<div class="voicechat-gain-slider"><img src="images/content/slider_gain_horiz.png" width="10" height="18" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mute icon -->
|
||||
<div class="voicechat-mute"><img src="images/content/icon_mute.png" width="20" height="18" /></div>
|
||||
|
||||
<!-- settings icon -->
|
||||
<div class="voicechat-settings"><img src="images/content/icon_settings_lg.png" width="18" height="18" /></div>
|
||||
|
||||
</div>
|
||||
<!-- end voice chat -->
|
||||
|
||||
</div>
|
||||
<!-- end my tracks scroller -->
|
||||
|
||||
</div>
|
||||
<!-- end my tracks -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Original Jonathon Stuff -->
|
||||
<div id="session-contents">
|
||||
<div id="session-info" style="display:none;"></div>
|
||||
<div id="session-tracks"></div>
|
||||
<div id="session-tracks" style="display:none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue