460 lines
9.6 KiB
CSS
Executable File
460 lines
9.6 KiB
CSS
Executable File
body{
|
|
background-color: black;
|
|
color: black;
|
|
font: 12px Helvetica, Arial;
|
|
padding:0px;
|
|
margin-top:2px;
|
|
margin-left:0px;
|
|
height:100%;
|
|
}
|
|
|
|
|
|
h3,h4,h5,h6 {
|
|
width: 400px;
|
|
background-color: white;
|
|
display: inline;
|
|
color: #666;
|
|
z-index: 2;
|
|
}
|
|
|
|
h1{ background-color: black; color:white;font: 44px Helvetica, Arial; }
|
|
h2{ font: 28px Helvetica, Arial; color:white}
|
|
h3{ font: 12px Helvetica, Arial; color:white }
|
|
h4{ background-color: black; font: 19px Helvetica, Arial;
|
|
text-align: center; margin-left:auto; margin-right:auto; color:white}
|
|
|
|
a:link { color:#666;}
|
|
a:visited { color: #666;}
|
|
a:hover { color: black; background-color:orange; }
|
|
a:active { color: black;background-color:white; }
|
|
|
|
ul, li, h4, h3, h2, h1, p{
|
|
padding:0;
|
|
margin:0;
|
|
list-style:none;
|
|
}
|
|
|
|
.outermaster{
|
|
margin-top:4px;
|
|
height: 580px;
|
|
width: 1020px;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
+filter: invert(100%);
|
|
}
|
|
.outermaster2{
|
|
margin-top:4px;
|
|
height: 880px;
|
|
width: 1020px;
|
|
border-radius: 15px;
|
|
position: relative;
|
|
+filter: invert(100%);
|
|
}
|
|
|
|
#live{
|
|
width: 100%;
|
|
height: 500px;
|
|
text-align: center;
|
|
border-radius: 15px;
|
|
background-color:black;
|
|
border: 0px solid blue;
|
|
position: absolute;
|
|
color: white;
|
|
top: 0px;
|
|
+filter: invert(100%);
|
|
z-index:-1;
|
|
margin-left: 0px;
|
|
padding:0px;
|
|
}
|
|
|
|
.xunit{
|
|
display:block;
|
|
background:black;
|
|
width: 155px;
|
|
height: 70px;
|
|
padding: 5px 5px 5px 5px;
|
|
float: left;
|
|
}
|
|
|
|
.precd{
|
|
height:70px;
|
|
color:white;
|
|
}
|
|
|
|
#info{
|
|
position: absolute;
|
|
border: 0px solid red;
|
|
border-radius:15px;
|
|
top: 450px;
|
|
!padding: 5px 5px 5px 5px;
|
|
height: 135px;
|
|
width: 100%;
|
|
}
|
|
|
|
#comms{
|
|
border-radius: 15px;
|
|
height: 120px;
|
|
width: 250px;
|
|
margin: 0px;
|
|
border: 1px solid gray;
|
|
color: black;
|
|
float:left;
|
|
padding: 5px 5px 5px 5px;
|
|
}
|
|
|
|
#xcomms{
|
|
border-radius: 15px;
|
|
height: 120px;
|
|
width: 250px;
|
|
margin: 0px;
|
|
border: 1px solid gray;
|
|
color: black;
|
|
padding: 5px 5px 5px 5px;
|
|
}
|
|
|
|
#midfoot{
|
|
!margin-left:auto; margin-right:auto;
|
|
border-radius: 15px;
|
|
height: 120px;
|
|
width: 30%;
|
|
margin: 0px;
|
|
margin-left:6%;
|
|
border: 1px solid gray;
|
|
padding: 5px 5px 5px 5px ;
|
|
background: black;
|
|
opacity:1;
|
|
float:left;
|
|
}
|
|
|
|
#preview{
|
|
border-radius: 15px;
|
|
height: 120px;
|
|
width: 30%;
|
|
margin: 0px;
|
|
border: 1px solid gray;
|
|
padding: 5px 5px 5px 5px ;
|
|
color: black;
|
|
!overflow:hidden;
|
|
float:right;
|
|
font-size:1em;
|
|
}
|
|
#preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;}
|
|
|
|
#timeinfo{
|
|
border-radius: 15px;
|
|
height:80px;
|
|
width: 95%;
|
|
margin: 0px;
|
|
padding: 5px 5px 5px 5px ;
|
|
background: transparent;
|
|
position:relative;
|
|
top:30px;
|
|
}
|
|
|
|
#remainingtime{
|
|
padding:0;
|
|
margin:0;
|
|
font-size:1.4em;
|
|
color:white;
|
|
position:relative;
|
|
left:40px;
|
|
top:90px;
|
|
width:120px;
|
|
float:left;
|
|
background-color:transparent;
|
|
}
|
|
|
|
.footdata{
|
|
margin-left:auto; margin-right:auto;
|
|
border-radius: 15px;
|
|
height: 50px;
|
|
width: 100%;
|
|
border: 0px solid gray;
|
|
position:absolute;
|
|
top: 0px;
|
|
background: black;
|
|
opacity:1;
|
|
}
|
|
|
|
.outersquare{
|
|
border-radius: 15px;
|
|
border: 1px solid blue;
|
|
padding: 1px 1px 1px 1px ;
|
|
background: black;
|
|
width: 99%;
|
|
height: 490px;
|
|
}
|
|
|
|
.svgmusic {
|
|
padding:0px;
|
|
border: 1px solid gray;
|
|
display:block;
|
|
border-radius: 15px;
|
|
margin: 0px;
|
|
width: 100%;
|
|
height: 445px;
|
|
}
|
|
|
|
svg { background-color: black; width:1000px; height:330px; display:block;}
|
|
line { stroke: white; }
|
|
text { fill: white;}
|
|
path { stroke: white; fill: white; }
|
|
rect { fill: white; }
|
|
polygon { fill: white; }
|
|
circle { stroke: white; }
|
|
|
|
|
|
#thesquare{ position:absolute; width:700px; }
|
|
.magicsquare {
|
|
border: 1px solid white;
|
|
padding: 2px 2px 2px 2px;
|
|
width: 110px;
|
|
height: 100px;
|
|
float: left;
|
|
font-size: 3em;
|
|
color:white;
|
|
text-align:center
|
|
}
|
|
|
|
.sqa {height:50%; width:50%; float:left; color: yellow; }
|
|
.sqb {height:50%; width:50%; float:right; color: green; }
|
|
.sqc {height:50%; width:50%; float:left; color: aqua; }
|
|
.sqd {height:50%; width:50%; float:right; color:red; }
|
|
|
|
.row {display:inline;}
|
|
.row img{ width:160px; display:inline;}
|
|
.row p{display:inline; color:yellow;}
|
|
.rrr {position:relative; display:inline;}
|
|
|
|
.sqrow{
|
|
display:inline;
|
|
padding: 2px 2px 10px 2px;
|
|
|
|
}
|
|
|
|
.latencies{
|
|
/* height: 90px; width: 200px;
|
|
border: 1px solid blue;
|
|
position: relative; top: 15%;
|
|
float: right;
|
|
padding: 5px 5px 5px 5px ;
|
|
background-color: yellow;
|
|
*/
|
|
}
|
|
|
|
#datetime{
|
|
display:table-cell; vertical-align:middle;
|
|
width:90px;
|
|
font-size:0.9em; color: white;
|
|
text-align:center;
|
|
position: relative;
|
|
bottom: 25px;
|
|
right: 4px;
|
|
float: left;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#current{
|
|
float:right;
|
|
position: relative;
|
|
right: 70%;
|
|
bottom:50px;
|
|
font-size:1.7em;
|
|
font-weight: bold;
|
|
color: white;
|
|
background-color: transparent;
|
|
z-index: 3;
|
|
opacity: 0.8;
|
|
padding: 3px 3px 3px 3px;
|
|
}
|
|
|
|
#client_latency{
|
|
background:transparent;
|
|
width:135px;
|
|
font-size:1em;
|
|
color: white;
|
|
z-index: 1;
|
|
padding: 3px 3px 3px 3px;
|
|
opacity: 0.8;
|
|
float:left;
|
|
position:relative;
|
|
left: 90px;
|
|
bottom: 72px;
|
|
|
|
}
|
|
|
|
.metrocase {
|
|
float:right;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
right: 20px;
|
|
top:-25px;
|
|
width: 60px;
|
|
height: 30px;
|
|
color: black;
|
|
text-align: center;
|
|
font-size: 4em; font-color: black;
|
|
background: transparent;
|
|
z-index: 2;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
#metronome0 { position: absolute; width: 60px; height: 30px; border-radius: 5px; float:left; }
|
|
#metronome1 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
|
#metronome2 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
|
#metronome3 { width: 50px; height: 40px; border-radius: 30px; float:left; }
|
|
|
|
#fluid {}
|
|
.fluid-img{ height:50%; width:50%; }
|
|
.clear { clear:both; }
|
|
|
|
#midcomms{
|
|
color:white;
|
|
width:160px;
|
|
height:40px;
|
|
background-color:transparent;
|
|
border: 0px solid yellow;
|
|
float:left;
|
|
}
|
|
|
|
#client_chronometer{
|
|
display:table-cell; vertical-align:middle;
|
|
border-radius: 15px;
|
|
float:right;
|
|
background-color: transparent;
|
|
color: white;
|
|
font-size: 3.7em;
|
|
text-align: center;
|
|
opacity:0.8;
|
|
position: relative;
|
|
left: 10px;
|
|
bottom:64px;
|
|
width: 210px;
|
|
z-position: 2;
|
|
}
|
|
|
|
#transport{
|
|
position:relative;
|
|
padding: 20px;
|
|
bottom:40px;
|
|
}
|
|
|
|
#ctrlstop{
|
|
position:absolute;
|
|
padding: 5px;
|
|
border: 1px solid gray;
|
|
bottom:120px;
|
|
left:1800px;
|
|
height:80px;
|
|
width:230px;
|
|
border-radius: 15px;
|
|
color: gray;
|
|
font-size: 3.5em;
|
|
}
|
|
|
|
#counttitle{
|
|
font-size:3em;
|
|
margin:0;
|
|
float:left;
|
|
width:120px;
|
|
position:relative;
|
|
top:-5px;
|
|
left:20px;
|
|
}
|
|
|
|
#count {
|
|
width:40px;
|
|
font-size: 5em;
|
|
font-weight:bolder;
|
|
margin:0;
|
|
padding:0;
|
|
position:relative;
|
|
left:35px;
|
|
top: -10px;
|
|
background:transparent;
|
|
float:left;
|
|
display:inline;
|
|
}
|
|
|
|
#totalcountdown {
|
|
font-size: 1.7em;
|
|
font-weight:bolder;
|
|
color:orange;
|
|
position:relative;
|
|
left: 0px;
|
|
bottom: -3px;
|
|
font-weight:bolder;
|
|
display:inline;
|
|
}
|
|
|
|
#countinnumber{
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
background-color:black;
|
|
font-size: 10em;
|
|
font-weight:bolder;
|
|
display:inline;
|
|
text-align:center;
|
|
z-index: 2;
|
|
opacity:0.5;
|
|
float:left;
|
|
}
|
|
|
|
#content-txt {
|
|
width: 100%;
|
|
height: 90%;
|
|
font-size:3em;
|
|
text-align:center;
|
|
background-color:black;
|
|
border:1px solid white;
|
|
margin-left:auto; margin-right:auto;
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
#wide { width:100%; height:90%; border: 1px solid black; padding: 6px 0px 6px 6px; }
|
|
#outer { width: 100%; height: 100%; padding: 0; border: 0px solid white; background-color: black; }
|
|
#outerpreview { position:absolute; top: 20px; left: 1100px; float:left;
|
|
height:600px; width: 1200px; padding: 0;
|
|
border: 1px solid gray; background-color: black;
|
|
}
|
|
|
|
.pview { border: 1px solid red; height:49%; width:49%; float:left; background:gray; z-index:-100; }
|
|
.middle { float: left; width: 10.8%; height: 10.5%; padding: 0; border: 0; margin: 0.33%;
|
|
border: 1px solid red; background:gray; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */
|
|
|
|
.middle p { font-size:2.5em; position:relative; left: 0px; opacity:0.3; color:blue; display:block;}
|
|
|
|
.middle img { padding: 20px 0px 0px 0px; position:relative; top:-30px;}
|
|
|
|
.middle:hover img {
|
|
z-index:1000;
|
|
width:500px;
|
|
background-color: orange;
|
|
!position: absolute;
|
|
border: 0px solid red;
|
|
border-radius:20px;
|
|
opacity: 1;
|
|
box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888;
|
|
}
|
|
|
|
.middle p.indexnum { font-size:1em; color:black; position:relative; top:-80px; left:90px; opacity:1;}
|
|
|
|
.inner-0, .inner-1, .inner-2, .inner-3 { font-size:2.5em; float: left; width: 47%; height: 50%;
|
|
padding: 0; border: 1px solid white; margin: 0;
|
|
text-align: center; font-weight: bold;
|
|
position:relative; top: -110px; }
|
|
|
|
.inner-0 { background-color: transparent; }
|
|
.inner-1 { background-color: transparent; }
|
|
.inner-2 { background-color: transparent; }
|
|
.inner-3 { background-color: transparent; }
|
|
|
|
.musicianprog { display:inline; float:left;
|
|
width:20%; background:transparent; height:40px;
|
|
padding: 5px 5px 5px 5px; text-align:center; }
|
|
|
|
|
|
#links {position:absolute; bottom:150px; left: 800px; width:900px;}
|
|
#transect {position:absolute; bottom:180px; left: 1300px; width:600px;} |