wolf3d-browser/styles.css
Brian Harris e0b653888d Wolfenstein 3D browser version
This is the code for the browser version of Wolfenstein 3D which is
playable on http://www.wolfenstein.com/game_NA.php
2013-05-16 11:34:31 -05:00

887 lines
16 KiB
CSS

/*
* Copyright (C) 2012 id Software LLC, a ZeniMax Media company.
*
* This file is part of the WOLF3D Browser Version GPL Source Code.
*
*/
html {
padding : 0;
background-color : black;
}
body {
margin : 0;
padding : 0;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-text-size-adjust: none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
width : 100%;
height : 100%;
}
.load-progress {
position : absolute;
left : 0;
bottom : 0;
height : 5px;
width : 0;
background-color : #666;
}
#main {
position : absolute;
left : 0;
top : 0;
width : 640px;
height : 400px;
left : 50%;
top : 50%;
margin-left : -320px;
margin-top : -200px;
overflow : hidden;
}
#game, #menu, #title-screen {
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 100%;
display : none;
background-repeat : no-repeat;
}
#title-screen {
background-image : url(art/title.png);
display : block;
}
#game {
background-color : rgb(0,56,56);
background-image : url(art/gamebg.png);
}
#game .loading {
background-color : rgb(0,56,56);
display : none;
position : absolute;
left : 0;
top : 0;
width : 100%;
height : 320px;
z-index : 60;
}
#game .loading img {
position : absolute;
left : 50%;
top : 50%;
margin-left : -224px;
margin-top : -48px;
}
#game .renderer {
z-index : 50;
background-color : #222;
overflow : hidden;
position : absolute;
left : 16px;
top : 8px;
cursor : crosshair;
}
#game *,
#game .renderer div,
#game .renderer div img,
#game .renderer .sprite,
#game .renderer .sprite img {
image-rendering : optimizeSpeed;
image-rendering : -moz-crisp-edges;
image-rendering : -o-crisp-edges;
image-rendering : optimize-contrast;
image-rendering : -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
#game .renderer .player-weapon {
z-index : 100000000;
width : 256px;
height : 256px;
position : absolute;
bottom : 0;
left : 50%;
margin-left : -128px;
background-image : url(art/attack.png);
background-repeat : no-repeat;
}
#game .renderer .overlay {
z-index : 200000000;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
display : none;
}
#game .renderer .damage-flash {
background : rgba(255,0,0,0.25);
}
#game .renderer .bonus-flash {
background : rgba(255,255,128,0.20);
}
#game .renderer .death {
background : rgba(255,0,0,0);
}
#game .renderer .pause {
background : rgba(32,32,32,0.5);
}
#game .renderer .pause img {
position : absolute;
left : 50%;
top : 50%;
margin-left : -64px;
margin-top : -32px;
}
#game .ceiling, #game .floor {
position : absolute;
z-index : 0;
left : 0;
width : 100%;
height : 50%;
}
#game .ceiling {
top : 0;
}
#game .floor{
top : 50%;
}
#game .hud {
position : absolute;
z-index : 100;
bottom : 0;
width : 640px;
height : 80px;
background-image : url(art/hudbg.png);
}
#game .hud .bj {
position : absolute;
width : 48px;
height : 64px;
left : 273px;
top : 9px;
overflow : hidden;
background-image : url(art/bj.png);
}
#game .hud .key1,
#game .hud .key2 {
position : absolute;
width : 16px;
height : 32px;
left : 480px;
overflow : hidden;
background-image : url(art/hudkeys.png);
}
#game .hud .key1 {
top : 8px;
}
#game .hud .key2 {
top : 40px;
background-position : -16px 0;
}
#game .hud .weapon {
position : absolute;
width : 96px;
height : 48px;
left : 512px;
top : 16px;
overflow : hidden;
background-image : url(art/hudweapons.png);
}
#game .hud .number-container {
position : absolute;
height : 32px;
top : 32px;
}
#game .hud .floor {
left : 48px;
}
#game .hud .score {
left : 96px;
}
#game .hud .lives {
left : 224px;
}
#game .hud .health {
left : 336px;
}
#game .hud .ammo {
left : 428px;
}
#game .hud .number {
display : inline-block;
width : 16px;
height : 32px;
overflow : hidden;
margin : 0;
background-image : url(art/hudnumbers.png);
background-repeat : no-repeat;
}
#game .fps {
position : absolute;
display : none;
z-index : 1000;
left : 20px;
top : 15px;
font-family : courier new;
font-size : 16px;
width : 70px;
height : 16px;
background : rgba(0,0,0,0.3);
color : rgb(200,200,200);
padding : 5px;
}
#text-screen {
background-color : #8a0000;
position : absolute;
height : 100%;
width : 100%;
left : 0;
top : 0;
z-index : 500;
display : none;
}
#game .intermission,
#game .gameover {
position : absolute;
height : 100%;
width : 100%;
left : 0;
top : 0;
background-color : #004141;
display : none;
}
#game .gameover {
background-image : url(art/intermission_gameover.png);
}
#game .intermission > div {
position : absolute;
}
#game .intermission .background,
#game .intermission .background-secret,
#game .intermission .background-victory {
position : absolute;
background-image : url(art/intermission.png);
height : 100%;
width : 100%;
left : 0;
top : 0;
z-index : 0;
display : none;
}
#game .intermission .background-secret {
background-image : url(art/intermission_secret.png);
}
#game .intermission .background-victory {
background-image : url(art/intermission_victory.png);
}
#game .intermission .bj {
left : 40px;
top : 32px;
width : 162px;
height : 174px;
background-image : url(art/intermissionbj.png);
overflow : hidden;
z-index : 10;
}
#game .intermission .stat,
#game .intermission .victory-stat {
z-index : 10;
}
#game .intermission .bonus {
left : 412px;
top : 108px;
}
#game .intermission .floor {
left : 412px;
top : 32px;
}
#game .intermission .total-time-minutes {
top : 128px;
left : 224px;
}
#game .intermission .total-time-seconds {
top : 128px;
left : 306px;
}
#game .intermission .time-minutes,
#game .intermission .par-minutes {
left : 412px;
}
#game .intermission .time-seconds,
#game .intermission .par-seconds {
left : 498px;
}
#game .intermission .time-minutes,
#game .intermission .time-seconds {
top : 152px;
}
#game .intermission .par-minutes,
#game .intermission .par-seconds {
top : 184px;
}
#game .intermission .kill-ratio,
#game .intermission .secret-ratio,
#game .intermission .treasure-ratio {
left : 492px;
}
#game .intermission .kill-ratio {
top : 224px;
}
#game .intermission .secret-ratio {
top : 256px;
}
#game .intermission .treasure-ratio {
top : 288px;
}
#game .intermission .avg-kill-ratio,
#game .intermission .avg-secret-ratio,
#game .intermission .avg-treasure-ratio {
left : 384px;
}
#game .intermission .avg-kill-ratio {
top : 224px;
}
#game .intermission .avg-secret-ratio {
top : 256px;
}
#game .intermission .avg-treasure-ratio {
top : 288px;
}
#game .intermission .digit {
display : inline-block;
width : 32px;
height : 32px;
background-image : url(art/intermissionfont.png);
background-repeat : no-repeat;
background-position : 32px 0px;
}
#game .intermission .num-0 {
background-position : 0px 0px;
}
#game .intermission .num-1 {
background-position : -32px 0px;
}
#game .intermission .num-2 {
background-position : -64px 0px;
}
#game .intermission .num-3 {
background-position : -96px 0px;
}
#game .intermission .num-4 {
background-position : -128px 0px;
}
#game .intermission .num-5 {
background-position : -160px 0px;
}
#game .intermission .num-6 {
background-position : -192px 0px;
}
#game .intermission .num-7 {
background-position : -224px 0px;
}
#game .intermission .num-8 {
background-position : -256px 0px;
}
#game .intermission .num-9 {
background-position : -288px 0px;
}
#menu div.menu {
width : 100%;
height : 100%;
}
#menu div.menu.main {
background-image : url(art/menubg_main.png);
}
#menu div.menu.episodes {
background-image : url(art/menubg_episodes.png);
}
#menu div.menu.levels {
background-image : url(art/menubg_levels.png);
}
#menu div.menu.skill {
background-image : url(art/menubg_skill.png);
}
#menu div.menu.sound {
background-image : url(art/menubg_sound.png);
}
#menu div.menu.control {
background-image : url(art/menubg_control.png);
}
#menu div.menu.customize {
background-image : url(art/menubg_customize.png);
}
#menu ul {
list-style : none;
margin : 0;
padding : 0;
position : absolute;
}
#menu div.menu.main ul {
left : 196px;
top : 118px;
width : 330px;
height : 232px;
}
#menu div.menu.sound ul {
left : 150px;
top : 87px;
width : 330px;
height : 232px;
}
#menu div.menu.episodes ul {
left : 44px;
top : 100px;
width : 550px;
height : 240px;
}
#menu div.menu.skill ul {
left : 144px;
top : 186px;
width : 384px;
height : 128px;
}
#menu div.menu.levels ul {
left : 90px;
top : 110px;
width : 256px;
height : 240px;
}
#menu div.menu.control ul {
left : 160px;
top : 156px;
width : 350px;
height : 100px;
}
#menu div.menu.customize ul {
left : 116px;
top : 192px;
width : 512px;
height : 96px;
}
#menu ul.two-column{
position : relative;
float : left;
width : 256px;
}
/* menu items */
#menu ul li div.button {
display : block;
height : 24px;
cursor : pointer;
margin-bottom : 8px;
background-image : url(art/menuitems.png);
}
#menu li.newgame div.button {
background-position : 0 0;
}
#menu li.active.newgame div.button {
background-position : -384px 0;
}
#menu li.sound div.button {
background-position : 0 -32px;
}
#menu li.active.sound div.button {
background-position : -384px -32px;
}
#menu li.control div.button {
background-position : 0 -64px;
}
#menu li.active.control div.button {
background-position : -384px -64px;
}
#menu li.readthis div.button {
background-position : 0 -96px;
}
#menu li.active.readthis div.button {
background-position : -384px -96px;
}
#menu li.resumegame div.button {
background-position : 0 -128px;
}
#menu li.active.resumegame div.button {
background-position : -384px -128px;
}
#menu li.baby div.button {
background-position : 0 -160px;
}
#menu li.active.baby div.button {
background-position : -384px -160px;
}
#menu li.easy div.button {
background-position : 0 -192px;
}
#menu li.active.easy div.button {
background-position : -384px -192px;
}
#menu li.medium div.button {
background-position : 0 -224px;
}
#menu li.active.medium div.button {
background-position : -384px -224px;
}
#menu li.hard div.button {
background-position : 0 -256px;
}
#menu li.active.hard div.button {
background-position : -384px -256px;
}
#menu li.sfxoff {
margin-bottom : 58px;
}
#menu li.sfxon div.button,
#menu li.musicon div.button,
#menu li.sfxoff div.button,
#menu li.musicoff div.button {
margin-left : 48px;
width : 256px;
}
#menu li.sfxon div.button,
#menu li.musicon div.button {
background-position : 0 -288px;
}
#menu li.active.sfxon div.button,
#menu li.active.musicon div.button {
background-position : -384px -288px;
}
#menu li.sfxoff div.button,
#menu li.musicoff div.button {
background-position : 0 -320px;
}
#menu li.active.sfxoff div.button,
#menu li.active.musicoff div.button {
background-position : -384px -320px;
}
#menu li.mouseenabled div.button {
background-position : 0 -352px;
}
#menu li.active.mouseenabled div.button {
background-position : -384px -352px;
}
#menu li.customize div.button {
background-position : 0 -384px;
}
#menu li.active.customize div.button {
background-position : -384px -384px;
}
#menu div.menu.episodes li div.button {
height : 56px;
width : 550px;
background-image : url(art/menuitems_episodes.png);
}
#menu div.menu.episodes li.episode-0 div.button {
background-position : 0 0;
}
#menu div.menu.episodes li.active.episode-0 div.button {
background-position : 0 -56px;
}
#menu div.menu.episodes li.episode-1 div.button {
background-position : 0 -112px;
}
#menu div.menu.episodes li.active.episode-1 div.button {
background-position : 0 -168px;
}
#menu div.menu.episodes li.episode-2 div.button {
background-position : 0 -224px;
}
#menu div.menu.episodes li.active.episode-2 div.button {
background-position : 0 -280px;
}
#menu div.menu.levels li div.button {
width : 256px;
margin-bottom : 16px;
background-image : url(art/menuitems_levels.png);
}
#menu li.level-0 div.button {
background-position : 0 0;
}
#menu li.active.level-0 div.button {
background-position : -256px 0;
}
#menu li.level-1 div.button {
background-position : 0 -32px;
}
#menu li.active.level-1 div.button {
background-position : -256px -32px;
}
#menu li.level-2 div.button {
background-position : 0 -64px;
}
#menu li.active.level-2 div.button {
background-position : -256px -64px;
}
#menu li.level-3 div.button {
background-position : 0 -96px;
}
#menu li.active.level-3 div.button {
background-position : -256px -96px;
}
#menu li.level-4 div.button {
background-position : 0 -128px;
}
#menu li.active.level-4 div.button {
background-position : -256px -128px;
}
#menu li.level-5 div.button {
background-position : 0 -160px;
}
#menu li.active.level-5 div.button {
background-position : -256px -160px;
}
#menu li.level-6 div.button {
background-position : 0 -192px;
}
#menu li.active.level-6 div.button {
background-position : -256px -192px;
}
#menu li.level-7 div.button {
background-position : 0 -224px;
}
#menu li.active.level-7 div.button {
background-position : -256px -224px;
}
#menu li.level-8 div.button{
background-position : 0 -256px;
}
#menu li.active.level-8 div.button {
background-position : -256px -256px;
}
#menu li.level-9 div.button {
background-position : 0 -288px;
}
#menu li.active.level-9 div.button {
background-position : -256px -288px;
}
/* menu toggle light */
#menu div.light {
width : 42px;
height : 16px;
margin-left : -48px;
margin-top : 4px;
overflow : hidden;
display : inline-block;
background-image : url(art/menulight.png);
}
#menu div.light.on {
background-position : 0 24px;
}
/* menu selector gun */
#menu ul.selector li.active::before {
display : block;
width : 46px;
height : 24px;
position : absolute;
left : -50px;
content : "";
background-image : url(art/menuselector.png);
}
#menu div.menu.control ul.selector li.active::before {
left : -100px;
}
/* customize keys menu */
#menu div.menu.customize ul.selector li.active::before {
left : -96px;
}
#menu div.menu.customize li div.button {
margin-bottom : 28px;
background : none;
}
#menu div.menu.customize li div.button span {
position : relative;
display : inline-block;
width : 122px;
height : 28px;
background-image : url(art/control_keys.png);
background-position : 0 -128px;
margin-right : -6px;
}
#menu div.menu.customize li div.button span.k1 {
}
#menu div.menu.customize li div.button span.k2 {
}
#menu div.menu.customize li div.button span.k3 {
}
#menu div.menu.customize li div.button span.k4 {
}
#menu div.menu.customize li div.button span:hover {
}
/* skill menu face */
#menu div.menu.skill div.face {
width : 48px;
height : 64px;
left : 460px;
top : 210px;
position : absolute;
background-image : url(art/skillfaces.png);
}
#menu div.menu.skill div.face.gd_baby {
background-position : 0 0;
}
#menu div.menu.skill div.face.gd_easy {
background-position : -48px 0;
}
#menu div.menu.skill div.face.gd_medium {
background-position : -96px 0;
}
#menu div.menu.skill div.face.gd_hard {
background-position : -144px 0;
}
/* menu confirm box */
#menu .message {
position : absolute;
z-index : 1000;
left : 0;
top : 0;
width : 100%;
height : 100%;
display : none;
}
#menu .message.confirm-newgame div.box {
position : absolute;
width : 460px;
height : 100px;
left : 50%;
top : 50%;
margin-left : -230px;
margin-top : -50px;
overflow : hidden;
background-image : url(art/confirm_newgame.png);
}
#menu .message.confirm-newgame div.box.blink {
background-position : 0 100px;
}