mikegerwitz
/
lasertank-js
1
0
Fork 0
Code Releases Activity

Added titlebar to entire game "window"

master
Mike Gerwitz 2012-03-24 23:54:00 -04:00
parent 3d3bee68f6
commit abdda72148
2 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -35,6 +35,8 @@
</noscript>
<div id="game" class="game opening">
<div class="title">LaserTank.js</div>
<div class="body">
<ul id="menubar" class="menu">
<li>
<a id="mnu_help" href="#help">Game</a>
@ -100,6 +102,7 @@
</fieldset>
</div>
</div>
</div>
<div id="todo" class="dialog">
<div class="body">

29
style.css
View File

@ -15,6 +15,25 @@ body {
width: 696px;
}
/* simply ensures that absolute-positioned elements are below the title bar */
.game > div {
position: relative;
}
/* common to all titles (dialog-specific is further down) */
.title {
background-color: #000080;
background-image: -webkit-linear-gradient( left, #000080, #1084d0 );
background-image: -moz-linear-gradient( left, #000080, #1084d0 );
background-image: -ms-linear-gradient( left, #000080, #1084d0 );
background-image: -o-linear-gradient( left, #000080, #1084d0 );
font-weight: bold;
color: white;
padding: 0.4em;
}
/** menu **/
.game ul.menu,
.game ul.menu ul {
@ -187,17 +206,7 @@ body {
z-index: 2001;
}
.dialog > .body > .title {
background-color: #000080;
background-image: -webkit-linear-gradient( left, #000080, #1084d0 );
background-image: -moz-linear-gradient( left, #000080, #1084d0 );
background-image: -ms-linear-gradient( left, #000080, #1084d0 );
background-image: -o-linear-gradient( left, #000080, #1084d0 );
margin: -0.5em -0.5em 0.5em -0.5em;
font-weight: bold;
color: white;
padding: 0.4em;
}
.dialog .close {
float: right;