Browse Source

Fixed the style a bit

master
Joshua Moerman 11 years ago
parent
commit
6f0f557bc6
  1. 38
      index.css
  2. 6
      index.html

38
index.css

@ -1,7 +1,8 @@
/* General */
body {
color: #888;
background: #000;
font-family: Georgia, serif;
color: #999;
background: #333;
font-size: 16pt;
margin: 0px;
overflow: hidden;
@ -19,36 +20,43 @@ a {
/* Login */
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
background: rgba(0,0,0,0.5);
z-index: 99999;
opacity:1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}
.modalDialog > div {
text-align: center;
width: 300px;
position: relative;
margin: 10% auto;
margin: 40px auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
/* App */
#app {
position: absolute;
width: 1000px;
height: 600px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* BALLS */
#ballscreen {
position: absolute;
background-color: rgba(0.0, 0.0, 0.0, 0.0);
width: 1000px;
height: 600px;
border: 1px solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.ball {
-webkit-transition: left 0.1s linear, top 0.1s linear;
@ -67,8 +75,10 @@ a {
/* LINES */
#svgscreen {
position: absolute;
width: 1000px;
height: 600px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#svgscreen line.guitar {
stroke: rgb(255,127,0);

6
index.html

@ -29,14 +29,14 @@
<div id="app">
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
<rect width="100%" height="100%" style="fill:rgb(0, 0, 0);"/>
</svg>
<div id="ballscreen"></div>
<div id="text">
(<span id="status">provide your name</span>)
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a><br/>
<span id="status"></span>
</div>
</div>