prismarine-web-client/lib/menus/components/common.js
KalmeMarq 1b08956d10
Mobile controls (#262)
* added readme pt-pt

* added url/querystring deps and fix chat pos/scale

url and querystring were missing in node_modules.
chat scale option wasn't implemented and chat input was on top instead of bottom.

* added bot version text field and guiScale for small screens

text field to choose bot version. gui scale changes on small screens (slider takes no effect then). Removed unused images.

* added mobile controls

* fixed bot and chat

* mobile controls only appear on mobile or if forced

* lint fix
2021-12-25 22:50:40 +01:00

72 lines
1.2 KiB
JavaScript

import { css } from 'lit'
const commonCss = css`
.dirt-bg {
position: absolute;
top: 0;
left: 0;
background: url('textures/1.17.1/gui/options_background.png'), rgba(0, 0, 0, 0.75);
background-size: 16px;
background-repeat: repeat;
width: 100%;
height: 100%;
transform-origin: top left;
transform: scale(2);
background-blend-mode: overlay;
}
.bg {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
}
.title {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
font-size: 10px;
color: white;
text-align: center;
text-shadow: 1px 1px #222;
}
.text {
color: white;
font-size: 10px;
text-shadow: 1px 1px #222;
}
`
/** @returns {boolean} */
function isMobile () {
const m = require('ismobilejs').default()
return m.any
}
/**
* @param {string} url
*/
function openURL (url) {
window.open(url, '_blank', 'noopener,noreferrer')
}
/**
* @param {HTMLElement} prev
* @param {HTMLElement} next
*/
function displayScreen (prev, next) {
prev.style.display = 'none'
next.style.display = 'block'
}
export {
commonCss,
isMobile,
openURL,
displayScreen
}