fig-frontend/client/src/components/backdrop.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { html, css, LitElement, unsafeCSS } from "lit";
import { customElement } from "lit/decorators.js";

import * as Config from "../config";

import blueprint from "../assets/blueprint.jpg";

@customElement("fig-backdrop")
export class Backdrop extends LitElement {
  static styles = css`
#backdrop {
  z-index: -2;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  background-image: url("${unsafeCSS(new URL(blueprint, Config.SCRIPT_URL))}");
}
#blur {
  z-index: -1;
  backdrop-filter: blur(3px);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  background-size: 100px 100px;
  background-position: -20px -20px;
  background-image:
      linear-gradient(to right, lightgrey 1px, transparent 1px),
      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
}
`;
  render() {
    return html`
<div id="backdrop"></div>
<div id="blur"></div>
`;
  }
}