crosswords/js_client/infoBox.js

56 lines
1.3 KiB
JavaScript
Raw Normal View History

2021-06-17 16:02:50 +02:00
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
export class InfoBox extends LitElement {
static get styles() {
return css`
.hinttext {
color: white;
margin-left: 1em;
margin-top: 0.8em;
}
.infobox {
z-index: 20;
position: fixed;
top: 0em;
left: 0em;
right: 0em;
height: 6em;
border-style: solid;
border-color: white;
border-width: 0.2 em;
background-color: #333;
color: white;
}
`;
}
static get properties() {
return {
horizontal_hint: { type: String },
vertical_hint: { type: String }
};
}
constructor() {
super();
this.vertical_hint = "";
this.horizontal_hint = "";
}
render() {
return html`
<div class="infobox">
<div class="hinttext"> ${this.horizontal_hint}</div>
<div class="hinttext"> ${this.vertical_hint}</div>
</div>
`;
}
}
customElements.define('info-box', InfoBox);