From 7dc90523db9097b00c5f49ad9c9e3c4fb36719ce Mon Sep 17 00:00:00 2001 From: Alex Xu Date: Tue, 25 Feb 2014 17:28:50 -0500 Subject: bleh more --- Makefile | 6 ++-- Modernizr | 2 +- www/css/index.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++-------- www/index.html | 26 ++++++++------ www/js/api.js | 4 +-- www/js/menu.js | 2 ++ 6 files changed, 114 insertions(+), 31 deletions(-) diff --git a/Makefile b/Makefile index 1eefe38..6047e70 100644 --- a/Makefile +++ b/Makefile @@ -3,7 +3,7 @@ SPACE := $(null) $(null) FFMPEG ?= ffmpeg -v warning -y CWEBP ?= cwebp -CWEBP += -short -alpha_cleanup +CWEBP += -quiet -alpha_cleanup WEBPMUX ?= webpmux CONVERT ?= convert APNGASM ?= apngasm @@ -11,7 +11,7 @@ UGLIFYJS ?= uglifyjs ifdef MINIMAL ZOPFLIPNG ?= : DEFLOPT ?= : -DEFLUFF ?= : +DEFLUFF ?= cat PNGQUANT ?= : else ZOPFLIPNG ?= zopflipng @@ -129,7 +129,7 @@ $(DUMP)/ui/bt-cf-unchecked.webp $(DUMP)/ui/bt-cf-checked.webp: %.webp: %.png mv -f "$<".tmp "$<" $(DUMP)/ui/ctc_strip-0.png: $(CTC_ANIM_SRC) - $(CONVERT) "$<" -crop 16x16 $(patsubst %.png,%*.png,$<) + $(CONVERT) "$<" -crop 16x16 $(DUMP)/ui/ctc_strip-%d.png $(DUMP)/ui/ctc_strip-%.png: $(CTC_ANIM_SRC) $(DUMP)/ui/ctc_strip-0.png @touch -r "$(DUMP)/ui/ctc_strip-0.png" "$@" diff --git a/Modernizr b/Modernizr index 8a5b7a9..96b3e67 160000 --- a/Modernizr +++ b/Modernizr @@ -1 +1 @@ -Subproject commit 8a5b7a95bf03bef04f0917ce3fa36f633017863a +Subproject commit 96b3e677965b33e4af227d573da69775f2ad480b diff --git a/www/css/index.css b/www/css/index.css index b94f40d..c2c3f9c 100644 --- a/www/css/index.css +++ b/www/css/index.css @@ -101,23 +101,69 @@ html.no-js #gotit { /* dialogs */ #dialogs { - background: url("../dump/ui/bg-config.png"); z-index: 50; width: 504px; height: 395px; margin-left: -252px; margin-top: -197.5px; } +.no-webp #dialogs { + background: url("../dump/ui/bg-config.png"); +} .webp #dialogs { background: url("../dump/ui/bg-config.webp"); } -#options { +#dialogs > div { + display: none; padding: 10px 20px; } +.config_sfxtest_label { + padding-left: 24px; + background-repeat: no-repeat; +} +.no-webp .config_sfxtest_label { + background-image: url("../dump/ui/bt-musicplay.png"); +} +.webp .config_sfxtest_label { + background-image: url("../dump/ui/bt-musicplay.webp"); +} +.config_language_sel { + padding-left: 24px; + background-repeat: no-repeat; +} +.no-webp .config_language_sel { + background-image: url("../dump/ui/bt-language.png"); +} +.webp .config_language_sel { + background-image: url("../dump/ui/bt-language.webp"); +} +.saves { + overflow-y: scroll; + height: 260px; + width: 450px; +} +.new_save_button { + padding-left: 30px; + background-repeat: no-repeat; +} +.no-webp .new_save_button { + background-image: url("../dump/ui/bt-star.png"); +} +.webp .new_save_button { + background-image: url("../dump/ui/bt-star.webp"); +} #return { position: absolute; bottom: 15px; right: 20px; + padding-left: 30px; + background-repeat: no-repeat; +} +.no-webp #return { + background-image: url("../dump/ui/bt-return.png"); +} +.webp #return { + background-image: url("../dump/ui/bt-return.webp"); } /* content */ @@ -128,13 +174,15 @@ html.no-js #gotit { position: absolute; } #window { - background: url("../dump/ui/bg-say.png"); width: 800px; height: 160px; position: absolute; top: 440px; left: 0; } +.no-webp #window { + background: url("../dump/ui/bg-say.png"); +} .webp #window { background: url("../dump/ui/bg-say.webp"); } @@ -156,15 +204,18 @@ html.no-js #gotit { left: 28px; } #nvl { - background: url("../dump/ui/bg-nvl.png") no-repeat top left; + background: white no-repeat top left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +.no-webp #nvl { + background-image: url("../dump/ui/bg-nvl.png"); +} .webp #nvl { - background: url("../dump/ui/bg-nvl.webp") no-repeat top left; + background-image: url("../dump/ui/bg-nvl.webp"); } #nvlsay { padding: 15px 35px; @@ -179,12 +230,14 @@ html.no-js #gotit { right: 10px; width: 16px; height: 16px; - background-image: url("../dump/ui/ctc.png"); -o-animation: blink 2s infinite linear; -moz-animation: blink 2s infinite linear; -webkit-animation: blink 2s infinite linear; animation: blink 2s infinite linear; } +.no-webp .ctc { + background-image: url("../dump/ui/ctc.png"); +} .webp .ctc { background-image: url("../dump/ui/ctc.webp"); } @@ -224,14 +277,29 @@ html.no-js #gotit { right: 10px; display: none; } +.no-webp #auto { + background: url("dump/ui/sd-auto.png"); +} +.webp #auto { + background: url("dump/ui/sd-auto.webp"); +} +.no-webp #skip { + background: url("dump/ui/sd-skip.png"); +} +.webp #skip { + background: url("dump/ui/sd-skip.webp"); +} #choices { left: 0; } .webp .choice { - background: url("../dump/ui/bg-choice.webp") no-repeat top center; + background-image: url("../dump/ui/bg-choice.webp"); +} +.no-webp .choice { + background-image: url("../dump/ui/bg-choice.png"); } .choice { - background: url("../dump/ui/bg-choice.png") no-repeat top center; + background: white no-repeat top center; text-align: center; height: 35px; line-height: 30px; @@ -241,10 +309,13 @@ html.no-js #gotit { text-align: center; } .webp #context-menu { - background: url("../dump/ui/bg-gm.webp") no-repeat top center; + background-image: url("../dump/ui/bg-gm.webp"); +} +.no-webp #context-menu { + background-image: url("../dump/ui/bg-gm.png"); } #context-menu { - background: url("../dump/ui/bg-gm.png") no-repeat top center; + background: white no-repeat top center; margin-top: -210px; padding-top: 60px; position: absolute; @@ -266,6 +337,11 @@ html.no-js #gotit { } /* main menu */ +#main-menu-buttons { + top: 377px; + position: absolute; + left: 81px; +} #main-menu-buttons .button { margin: 4px; } @@ -297,16 +373,17 @@ input[type="checkbox"] { .webp input[type="checkbox"] + span:before { background-image: url("../dump/ui/bt-cf-unchecked.webp"); } -input[type="checkbox"] + span:before { +.no-webp input[type="checkbox"] + span:before { background-image: url("../dump/ui/bt-cf-unchecked.png"); +} +input[type="checkbox"] + span:before { display: inline-block; height: 19px; width: 20px; content: ""; - background-position: left bottom; - background-repeat: no-repeat; + background: white left bottom no-repeat; } -input[type="checkbox"]:checked + span:before { +.no-webp input[type="checkbox"]:checked + span:before { background-image: url("../dump/ui/bt-cf-checked.png"); } .webp input[type="checkbox"]:checked + span:before { diff --git a/www/index.html b/www/index.html index 357cab6..600b52f 100644 --- a/www/index.html +++ b/www/index.html @@ -48,11 +48,11 @@
- Auto - Skip + +