Skip to content

Commit

Permalink
Auto center the window vertically
Browse files Browse the repository at this point in the history
  + When the game is played in landscape format
    or in portrait format when it's not a touchscreen
  • Loading branch information
Dakurei committed Jul 25, 2024
1 parent 3e47881 commit b5d9cdd
Showing 1 changed file with 27 additions and 1 deletion.
28 changes: 27 additions & 1 deletion index.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,36 @@ body {
#app {
display: flex;
justify-content: center;
align-items: center;
}

#app > div:first-child {
transform-origin: top !important;
transform-origin: center !important;
}

/*
Supports automatic vertical centering as suggested in PR#1114, but only via CSS
Condition factorized to deduce CSS rules:
true if (isLandscape && !isMobile() && !hasTouchscreen() || (hasTouchscreen() && !isTouchControlsEnabled))
*/

/* isLandscape && !isMobile() && !hasTouchscreen() */
@media (orientation: landscape) and (pointer: fine) {
#app {
align-items: center;
}
}

@media (pointer: coarse) {
/* hasTouchscreen() && !isTouchControlsEnabled */
body:has(> #touchControls[class=visible]) #app {
align-items: start;
}

body:has(> #touchControls[class=visible]) #app > div:first-child {
transform-origin: top !important;
}
}

/* Need adjust input font-size */
Expand Down

0 comments on commit b5d9cdd

Please sign in to comment.