Mercurial > hg > nodescore
changeset 80:df5128a86598
css and inverted preview colors
line wrap: on
line diff
--- a/www/martin/css/nodescore.css Tue Jul 15 23:49:44 2014 +0100 +++ b/www/martin/css/nodescore.css Sat Jul 19 10:23:50 2014 +0100 @@ -4,7 +4,6 @@ height:100%; } - h3,h4,h5,h6 { width: 400px; display: inline; @@ -12,18 +11,11 @@ z-index: 2; } -h1{ - font: 44px Helvetica, Arial; -} +h1{ font: 44px Helvetica, Arial; } +h2 { font: 18px Helvetica, Arial; } +h3{ font: 12px Helvetica, Arial; } -h2 { font: 18px Helvetica, Arial; -} - -h3{ font: 12px Helvetica, Arial; - } - -h4{ - font: 19px Helvetica, Arial; +h4{ font: 19px Helvetica, Arial; text-align: center; margin-left:auto; margin-right:auto; } @@ -44,9 +36,9 @@ width: 1020px; border-radius: 15px; position: absolute; - top:30px; + top:7%; left: 3000px; - margin: 0 auto; + !margin: 0 auto; } @@ -129,23 +121,29 @@ width: 30%; margin: 0px; border: 1px solid gray; - padding: 5px 5px 5px 5px ; - color: black; - !overflow:hidden; + padding: 5px 5px 5px 5px; float:right; font-size:1em; } -#preview img{margin-top:15px; width:300px; background:transparent; position: relative; top:-20px;} - +#preview img{ + margin-top:15px; + width:300px; + background:transparent; + position: relative; + top:-20px; +} #remainingtime{ - padding:0; + padding:0px 10px; margin:0; - font-size:2.6em; - width:180px; - float:left; - background-color:transparent; + font-size:2.2em; + width:150px; + float:right; + !background-color:blue; + position:relative; + top:-5px; + !left:0px; } .footdata{ @@ -163,7 +161,6 @@ border-radius: 15px; border: 1px solid blue; padding: 1px 1px 1px 1px ; - width: 99%; height: 490px; } @@ -194,7 +191,7 @@ text-align:center } -.sqa {height:50%; width:50%; float:left; color: yellow; } +.sqa {height:50%; width:50%; float:left; color: blue; } .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; } @@ -244,7 +241,7 @@ background:transparent; float:right; font-size:1em; - padding:0px; + padding:0px 0px 10px 0px; } @@ -265,12 +262,15 @@ float:right; font-size:3em; margin-right:50px; +margin-top:10px; } #transport{ - position:relative; - padding: 0px; - bottom:40px; + position:absolute; + !padding: 0px; + right:240px; + top:15px; + float:right; } #ctrlstop{ @@ -350,57 +350,75 @@ } !#wide { - width:5600px; height:90%; border: 1px solid black; - padding: 16px 10px 16px 0px; display:inline; } + padding: 16px 10px 16px 0px; display:inline; +} .outermaster2{ - !background-color:black; - margin-top:4px; - height: 810px; + margin-top:5%; + height: 600px; width: 4400px; border-radius: 15px; - position: relative; - +filter: invert(100%); - -} + } -#map { width: 1250px; - position:absolute; - top:30px; - left: 0px; - height: 760px; - padding: 20px 50px 20px 50px; - !border: 1px dashed gray; - !background-color: black; +#map { width: 1200px; + height: 600px; + padding: 0px 0px 0px 40px; } #outerpreview { - height:700px; - width: 1200px; padding: 0; + height:600px; + width: 1200px; !border: 1px solid red; - background-color: white; - padding: 50px 50px 50px 50px; - position: relative; + padding: 0; + position: absolute; left:1500px; + top:60px; } -.pview { border: 1px dashed gray; height:45%; width:49%; float:left; background:white; z-index:-100; } -.pviewmusic { position:relative; top:60px; } +.pview { + border: 1px dashed gray; + height:45%; width:45%; float:left; + background:white; + z-index:-100; + margin-left:5px; + margin-top:5px; +} -.middle { float: left; width: 10.8%; height: 9%; padding: 0; border: 0; margin: 0.33%; - border: 1px solid red; background:white; border-radius:10px; } /* 100 = 6 * widt\h + 12 * margin */ +.pviewmusic { + !position:relative; + !top:60px; +} -.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 { float: left; + width: 10.8%; + height: 11%; + padding: 0; + border: 0; + margin: 0.33%; + border: 1px dashed black; + background:white; + border-radius:1px; + } /* 100 = 6 * widt\h + 12 * margin */ -.middle:hover img { +.middle p { font-size:2em; + position:relative; + left: 0px; opacity:0.3; + color:blue; + display:block; + } + +.middle img { padding: 20px 0px 0px 0px; + position:relative; top:-30px; + } + +.xmiddle:hover img { z-index:1000; width:500px; background-color: white; !position: absolute; border: 0px solid red; - border-radius:20px; + border-radius:10px; opacity: 1; box-shadow:4px -4px 10px 3px #888, inset 4px -4px 10px 3px #888; } @@ -411,10 +429,14 @@ } .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; + font-size:2em; + float: left; width: 45%; height: 50%; + padding: 0; border: 1px dashed gray; + margin: 0; + text-align: center; + font-weight: bold; + position:relative; + top: -100px; } .inner-0 { background-color: transparent; } @@ -433,18 +455,18 @@ padding: 1px 1px 1px 1px; text-align:center; font-size:1em; + visibility:hidden; } .head{ -!border: 1px solid black; -background:gray; -opacity:0.8; -padding:10px; -height:30px; -position:fixed; -top:0px; -left:20px; -width:100%; + !border: 1px solid black; + background:gray; + opacity:0.8; + padding:4px 0px 0px 4px; + height:50px; + position:fixed; + top:0px; + width:100%; } .footx{ @@ -454,8 +476,8 @@ height:30px; position:fixed; bottom:0px; - left:20px; width:100%; + padding:10px 0px 15px 10px; } @@ -477,7 +499,7 @@ .metrocase { margin-left:20px; float:left; - border-radius: 5px; + border-radius: 1px; width: 60px; height:30px; color: black; @@ -486,21 +508,16 @@ border: 1px solid white; } -#metronome0 { width: 60px; height: 30px; border-radius: 5px; float:left; } - - - - - - - +#metronome0 { width: 60px; height: 30px; border-radius: 1px; float:left; } #links {position:absolute; bottom:150px; left: 800px; width:900px;} - #transect {float:left; font-size:2em; padding:0px;} .tportpop { - width:200px; height: 90px; - margin: 1px solid white; position:relative; - left:300px; top:60px; border: 1px solid green; - border-radius: 10px; padding: 5px; + width:200px; + height: 90px; + margin: 1px solid white; + position:relative; + left:300px; top:60px; + border: 1px solid green; + border-radius: 1px; padding: 5px; } \ No newline at end of file
--- a/www/martin/index.html Tue Jul 15 23:49:44 2014 +0100 +++ b/www/martin/index.html Sat Jul 19 10:23:50 2014 +0100 @@ -62,6 +62,10 @@ // ]]></script> </div> + + + + <div id="outerpreview" > <div class="pview" id="preview-1" > @@ -191,6 +195,13 @@ <div class="metrocase" id="metro"> <div id="metronome0"></div> </div> + + <div id="transport" > + <input type="button" value="start" onclick="startSeq();" /> + <input type="button" value="stop" onclick="stopSeq();" /> + <input type="button" value="reset" onclick="resetSeq();" /> + </div> + <div id="client_latency">Latency: 0ms</div> <div id="client_chronometer" >00:00:00.0</div> </div>
--- a/www/martin/transport.html Tue Jul 15 23:49:44 2014 +0100 +++ b/www/martin/transport.html Sat Jul 19 10:23:50 2014 +0100 @@ -21,9 +21,11 @@ <div id="ctrlstop" style="position:absolute; top:10px; left:10px;"> <div id="c_chronometer" style="z-index: 2;">00:00:00.0</div> <div id="transport" > + <input type="button" value="start" onclick="startSeq();" /> <input type="button" value="stop" onclick="stopSeq();" /> <input type="button" value="reset" onclick="resetSeq();" /> + </div> </div>