diff options
| author | Alex Xu <alex_y_xu@yahoo.ca> | 2013-09-21 17:59:47 -0400 |
|---|---|---|
| committer | Alex Xu <alex_y_xu@yahoo.ca> | 2013-09-21 18:01:23 -0400 |
| commit | d10491524e0582d8d216d68d2b9f61028fd72f5e (patch) | |
| tree | 36b9cf460e59104d6b2b6b3b0f60d1c73d6cee28 | |
| parent | 01ffd81c6a74d2f03939b26ecceb5281bb1f1519 (diff) | |
| download | html5ks-d10491524e0582d8d216d68d2b9f61028fd72f5e.tar.xz html5ks-d10491524e0582d8d216d68d2b9f61028fd72f5e.zip | |
warn-container -> interstitial, misc css fixes
| -rw-r--r-- | www/css/index.css | 28 | ||||
| -rw-r--r-- | www/index.html | 10 | ||||
| -rw-r--r-- | www/js/html5ks.js | 10 |
3 files changed, 35 insertions, 13 deletions
diff --git a/www/css/index.css b/www/css/index.css index 2768d76..ffd2f9f 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -28,17 +28,22 @@ body { background: gray; font: 22px/27px Playtime, sans-serif; } +#all { + height: 100%; + position: absolute; + width: 100%; +} h2 { font: 20px/24px Playtime; /* yes, h2 has *smaller* font */ font-weight: bold; } /* warnings */ -#warn-container { +#interstitial { visibility: hidden; cursor: auto; } -html.no-js #warn-container { +html.no-js #interstitial { visibility: visible; } #warn { @@ -71,7 +76,7 @@ html.no-js #gotit { display: none; } -/* wooo, the real content */ +/* pre-content */ #container, #vid { cursor: url("../dump/ui/mousecursor.png"), default; position: absolute; @@ -98,9 +103,26 @@ html.no-js #gotit { opacity: 0.5; z-index: 10; } + +/* dialogs */ #dialogs { z-index: 50; + width: 504px; + height: 395px; + background: url(../dump/ui/bg-config.png); + margin-left: -252px; + margin-top: -197.5px; } +#options { + padding: 10px 20px; +} +#return { + position: absolute; + bottom: 15px; + right: 20px; +} + +/* content */ #show { height: 100%; } diff --git a/www/index.html b/www/index.html index 721a803..ed976ba 100644 --- a/www/index.html +++ b/www/index.html @@ -27,8 +27,8 @@ <script src="js/imachine.js"></script> <script src="js/i18n.js"></script> </head> - <body><div id="all" style="height: 100%; position: absolute; width: 100%;"> - <div id="warn-container"> + <body><div id="all"> + <div id="interstitial"> <div id="warn"> <h2>We use a lot of new features in this; your browser seems to have some issues...</h2> <ul id="warns"> @@ -68,13 +68,13 @@ <div class="options-button main_menu_config button"></div> <div class="quit button main_menu_quit disabled"></div> </div> - <div id="version" style=""> + <div id="version"> Katawa Shoujo v1.1 <br> HTML5KS 0.1.0 </div> </div> - <div id="dialogs" style="display: none; width: 504px; height: 395px; background: url(dump/ui/bg-config.png); margin-left: -252px; margin-top: -197.5px;" class="centered"> + <div id="dialogs" class="centered" style="display: none;"> <div id="options" style="padding: 10px 20px;"> <h2>Options</h2> <label class="button"><input type="checkbox" class="option" id="hdisable"> <span class="hdisabled_label"></span></label> @@ -89,7 +89,7 @@ <label><input type="range" min="0.0" max="1.0" step="0.001" class="option" id="soundVolume"> <span class="tr config_sfxvol_label"></span> <span id="test-sound" class="button config_sfxtest_label"><img src="dump/ui/bt-musicplay.png" alt="Play"></span></label> </div> <div id="return" class="button" style="position: absolute; bottom: 15px; right: 20px;"> - <img src="dump/ui/bt-return.png" alt=""> + <img src="dump/ui/bt-return.png"> Return </div> </div> diff --git a/www/js/html5ks.js b/www/js/html5ks.js index 9ca2bde..c7aba9b 100644 --- a/www/js/html5ks.js +++ b/www/js/html5ks.js @@ -179,12 +179,12 @@ window.html5ks = { }, warnUnsupported: function () { if (!html5ks.persistent.gotit) { - var warn = document.getElementById("warn-container"); + var interstitial = document.getElementById("interstitial"); document.getElementById("gotit").addEventListener("mouseup", function () { - warn.style.mozAnimation = "0.5s dissolveout"; - warn.style.webkitAnimation = "0.5s dissolveout"; - warn.style.animation = "0.5s dissolveout"; - warn.style.opacity = 0; + interstitial.style.mozAnimation = "1s dissolveout"; + interstitial.style.webkitAnimation = "1s dissolveout"; + interstitial.style.animation = "1s dissolveout"; + interstitial.style.opacity = 0; html5ks.persistent.gotit = true; html5ks.start(); }, false); |