html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* TODO: Account for mobile browser URL bar so users don't have to scroll the page */
body {
box-sizing: border-box;
/**
* @see https://getbootstrap.com/docs/4.1/content/reboot
*/
background-color: #fff;
font-family:
/* Safari for OS X and iOS (San Francisco) */
-apple-system,
/* Windows */
"Segoe UI",
/* Android */
"Roboto",
/* Basic web fallback */
"Helvetica Neue", Arial, sans-serif,
/* Emoji fonts */
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
}
/* Clearfix to prevent margin collapsing due to child elements, which would mess up the min-height: 100vh above */
body:before,
body:after {
content: ' ';
display: table;
}
body.dragging {
cursor: no-drop;
}
catchphrase-app {
height: 100%;
margin: 0 auto;
max-height: 50rem;
max-width: 600px;
}
@media (min-width: 768px) {
html {
font-size: 20px;
}
catchphrase-app {
max-width: 720px;
}
}
/**
* Shared styles
* TODO: Move to shared file and load here and inside each component's Shadow DOM.
* Currently only applies to the player-rename-dialog content because it gets appended to
*/
input {
padding: 0.5rem;
width: 12rem;
}
label {
display: inline-block;
}