Auto center the window vertically (#2686)
+ When the game is played in landscape format or in portrait format when it's not a touchscreen
This commit is contained in:
parent
18dc9d216c
commit
1fb5389765
26
index.css
26
index.css
|
@ -26,11 +26,37 @@ body {
|
||||||
#app {
|
#app {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app > div:first-child {
|
#app > div:first-child {
|
||||||
|
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;
|
transform-origin: top !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#layout:fullscreen #dpad, #layout:fullscreen {
|
#layout:fullscreen #dpad, #layout:fullscreen {
|
||||||
bottom: 6rem;
|
bottom: 6rem;
|
||||||
|
|
Loading…
Reference in New Issue