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