html, body {
margin: 0 !important;
/* needed to fix buggy vw/vh behavior in safari:
https://stackoverflow.com/questions/25516934/safari-css-using-calc-with-vh-does-not-work
*/
width: 100%;
height: 100%;
}
body {
font-size: 0.75rem;
color: white;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
#wrap {
display: flex;
align-items: center;
justify-content: center;
}
.sprite {
fill:yellow;
stroke:#ccc;
stroke-width: 0.1875rem;
}
canvas {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#screen-back {
background: #fcf7e4;
height: calc(100% - 0.625rem);
width: calc(100% - 0.625rem);
position: absolute;
z-index: -1;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
border-radius: 0.75rem;
border: 0.3125rem solid #fcf7e4;
}
#screen {
align-content: center;
justify-content: center;
align-items: center;
height: 100vh;
}
.has-focus {
border: 0.3125rem solid #96266c !important;
}
#paint-surface {
position: absolute;
}
#paint-surface.borders {
/* filter: drop-shadow(0px 0px 0.625rem #6B4F76) */
border-right: 0.5rem inset #2f99a1;
border-left: 0.5rem outset #2f99a1;
border-top: 0.5rem outset #f290c1;
border-bottom: 0.5rem inset #f290c1;
}
#paint-surface-container {
text-align: center;
/* messes up safari overflow-y: hidden; */
width: 100%;
}
#debug-stats {
position: absolute;
bottom: 0.5%;
left: 2.5%;
color: #333;
font-size: 0.6875rem;
z-index: 5;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
.stats {
margin-top: 0.5rem;
}
.blur .info {
opacity: 0.2;
}
.just-screen #debug-stats,
.just-screen #screen-back,
.just-screen #controls,
.just-screen #instructions {
display: none;
}
.just-screen #paint-surface-container {
height: 100%;
width: 100%;
}
.just-screen #paint-surface {
border: none;
position: relative;
}
.just-screen .paint-surface-spacer {
flex-grow: 1;
}
/* ----- screen css ----- */
.game-embed {
position: relative;
left: 0.5rem;
top: 0.5rem;
width: calc(100% - 2rem);
border: 0.5rem solid #333333;
background-color: #333;
min-height: 58%;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0% 0.5rem, 0.5rem 0%, calc(100% - 0.5rem) 0%, 100% 0.5rem,
100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));
}
.hidden {
display: none;
}
#game-screen {
border: none;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top;
}
.game-player {
width: 100%;
height: 100%;
position: relative;
background: #249ca3;
border-radius: 1.25rem;
display: flex;
flex-direction: column;
}
.game-player-background {
text-align: center;
width: 100%;
height: 52%;
bottom: 0rem;
background: #249ca3;
border-radius: 0 0 1.25rem 1.25rem;
z-index: 1;
flex-shrink: 1;
}
.game-sys-button-group {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
width: 35%;
left: calc((100% - 35%)/2);
top: 63%;
z-index: 30;
}
.game-sys-button.game-reset-button {
padding: 0.25rem 0.4rem;
}
.game-sys-button.game-menu-button {
margin-right: 0.25rem;
}
.game-reset-button i:before {
font-style: normal;
font-family: icons;
content: "\f021";
}
.game-player-logo, .game-player-msft {
position: absolute;
width: 100%;
text-align: center;
color: #fff;
z-index: 20;
}
.game-player-logo {
bottom: calc(50% + 0.5rem);
font-size: 2rem;
opacity: 0.2;
}
.game-player-msft {
bottom: 0.5rem;
}
.game-player-msft:before {
background-size: contain;
background-repeat: no-repeat;
height: 1rem;
width: 4.7rem;
display: inline-block;
vertical-align: middle;
content: "";
background-image: url(data:image/png;base64,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);
}
/* ----- joystick css ----- */
.game-joystick {
display: flex;
flex-direction: column;
height: 35%;
width: 50%;
position: absolute;
left: 0;
bottom: 0;
touch-action: none;
z-index: 20;
transition: opacity 0.2s;
max-width: 40%;
}
.game-joystick-svg {
width: 100%;
height: initial;
}
/* ----- buttons css ----- */
.game-buttons {
display: flex;
flex-direction: column;
height: 35%;
width: 50%;
position: absolute;
right: 0;
bottom: 0;
z-index: 20;
transition: opacity 0.2s;
max-width: 40%;
}
.game-button-svg {
user-select: none;
touch-action: none;
margin-left: auto;
}
.game-sys-button {
color: #cecece;
background-color: #333;
text-align: center;
margin-top: 0.25rem;
padding: 0.25rem 1rem;
border-radius: 4rem;
border: 0.25rem solid #397382;
font-size: 1rem;
user-select: none;
display: inline-block;
transition: opacity 0.2s;
}
.game-buttons svg text {
fill: #cecece;
stroke: #cecece;
stroke-width: 0.4;
}
.game-button-svg {
width: 100%;
height: initial;
}
.game-joystick,
.game-sys-button,
.game-button-svg svg text {
cursor: pointer;
}
.blur .game-joystick, .blur .game-buttons, .blur .game-sys-button {
opacity: 0.3;
}
/**
* This covers the tablet/mobile view for the simulator where just the screen is shown
*/
/*
===== Standard view
*/
/* width constrained */
.game-player {
width: 100vw;
height: calc((20 / 17) * 100vw);
}
html {
font-size: 4.5vw;
}
/* height constrained */
@media (min-aspect-ratio: 17 / 20) {
.game-player {
height: 100vh;
width: calc((17 / 20) * 100vh);
}
html {
/* font-size: calc((17 / 20) * 4.5vh) */
/* calc + vw/vh + font-size is buggy in Safari */
font-size: 3.825vh;
}
}
/*
===== Landscape view
(always height constrained)
*/
@media (min-aspect-ratio: 5/3) and (min-width: 250px) and (min-height: 200px) {
.game-player {
width: 100%;
height: 100%;
max-width: 300vh;
}
.game-joystick,
.game-buttons {
width: calc((100vw - 130vh)/2);
height: calc((100vw - 130vh)/2);
max-width: 80vh;
max-height: 80vh;
}
.game-embed {
height: 100%;
max-height: 100%;
width: 130vh;
left: 0;
top: 0;
margin: auto;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
}
#game-screen {
object-position: unset;
}
.game-player-background {
height: 0px;
}
.game-player-msft {
display: none;
}
.game-sys-button-group {
position: fixed;
flex-direction: column;
top: 1rem;
left: calc(50% + 100vh - 34vh);
width: 22vh;
}
}
/*
===== Landscape view
(always height constrained)
*/
@media (min-aspect-ratio: 2/1) and (min-width: 250px) and (min-height: 200px) {
.game-sys-button-group {
flex-direction: row;
left: calc(50% + 100vh - 32vh);
width: 26vh;
}
}
/*
===== Mini view (no controls)
*/
@media
(max-width: 250px),
(max-height: 200px) {
/* hide controls */
.game-player-msft, .game-buttons, .game-joystick, .game-sys-button {
display: none;
}
.game-embed {
width: calc(100% - 2rem);
height: calc(100% - 2rem);
flex-grow: unset;
padding-bottom: 0;
}
.game-player-background {
height:0;
}
#debug-stats {
display: none;
}
/* width constrained */
.game-player {
width: 100vw;
height: calc((20 / 26) * 100vw);
}
}
/* height constrained */
@media
(max-width: 250px) and (min-aspect-ratio: 26 / 20),
(max-height: 200px) and (min-aspect-ratio: 26 / 20) {
.game-player {
height: 100vh;
width: calc((26 / 20) * 100vh);
}
html {
/* font-size: calc((26 / 20) * 4.5vh); */
/* calc + vw/vh + font-size is buggy in Safari */
font-size: 5.85vh;
}
}