diff --git a/public/src/css/game.css b/public/src/css/game.css index 1d3a518..c51aaa5 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -67,6 +67,10 @@ } #touch-drum-img{ width: 100%; + height: 100%; + background-position: top; + background-size: cover; + background-repeat: no-repeat; } #touch-buttons{ display: none; @@ -76,9 +80,12 @@ opacity: 0.5; z-index: 5; } -#touch-buttons img{ +#touch-buttons div{ + display: inline-block; width: 12.5vmin; height: 12.5vmin; + background-size: contain; + background-repeat: no-repeat; } .portrait #touch-buttons{ top: 11vh; diff --git a/public/src/css/loadsong.css b/public/src/css/loadsong.css index 78e368d..534f6df 100644 --- a/public/src/css/loadsong.css +++ b/public/src/css/loadsong.css @@ -21,7 +21,10 @@ color: #fff; } #loading-don{ - width: 50%; + width: 10vw; + height: calc(10vw / 120 * 115); + background-size: contain; + background-repeat: no-repeat; } .loading-text{ position: relative; diff --git a/public/src/css/main.css b/public/src/css/main.css index 035ca53..97efcda 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -14,7 +14,8 @@ body{ height: 100%; margin: 0; padding: 0; - background: #fe7839 url("/assets/img/bg-pattern-1.png") top center; + background-color: #fe7839; + background-position: top center; background-size: 30vh; font-family: TnT, Meiryo, sans-serif; } @@ -236,7 +237,6 @@ kbd{ #song-select{ width: 100%; height: 100%; - background-image: url("/assets/img/bg_genre_0.png"); background-size: calc(100vh / 720 * 512); background-repeat: repeat no-repeat; animation: bgscroll 16s infinite linear; @@ -257,6 +257,8 @@ kbd{ width: 12.5vmin; height: 12.5vmin; opacity: 0.5; + background-size: contain; + background-repeat: no-repeat; } #song-sel-selectable{ position: absolute; diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css index eacadc0..0cced4c 100644 --- a/public/src/css/titlescreen.css +++ b/public/src/css/titlescreen.css @@ -15,13 +15,19 @@ display: flex; justify-content: center; align-items: center; - background: #1389f0 url("/assets/img/title-screen.png") no-repeat center; + background-color: #1389f0; + background-repeat: no-repeat; + background-position: center; background-size: cover; cursor: pointer; } .logo-big{ width: 90vmin; - height: auto; + height: calc(90vmin / 754 * 400); + background-size: contain; + background-repeat: no-repeat; + text-align: center; + color: transparent; } .click-to-continue{ position: absolute; diff --git a/public/src/js/view.js b/public/src/js/view.js index dbc1c27..4000517 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -1220,11 +1220,11 @@ if(this.touch > ms - 100){ if(!this.drumPadding){ this.drumPadding = true - this.touchDrumImg.style.paddingTop = "1%" + this.touchDrumImg.style.backgroundPositionY = "7px" } }else if(this.drumPadding){ this.drumPadding = false - this.touchDrumImg.style.paddingTop = "" + this.touchDrumImg.style.backgroundPositionY = "" } } } diff --git a/public/src/views/game.html b/public/src/views/game.html index 3061e9a..65aa851 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,6 +1,6 @@