ar-image-tracker/styles.css at master · dolianich/ar-image-tracker · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
html, body{
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

h2 {
    font-family: "Avenir Next", Calibri, Verdana, sans-serif;
    color: #ff1bab;
    text-align: center;
  }

#container {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
      }

      #scanning {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: transparent;
	z-index: 2;
      }
      @media (min-aspect-ratio: 1/1) {
	#scanning .inner {
	  width: 50vh;
	  height: 50vh;
	}
      }
      @media (max-aspect-ratio: 1/1) {
	#scanning .inner {
	  width: 80vw;
	  height: 80vw;
	}
      }

      #scanning .inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	background:
	  linear-gradient(to right, #ff1bab 10px, transparent 10px) 0 0,
	  linear-gradient(to right, #ff1bab 10px, transparent 10px) 0 100%,
	  linear-gradient(to left, #ff1bab 10px, transparent 10px) 100% 0,
	  linear-gradient(to left, #ff1bab 10px, transparent 10px) 100% 100%,
	  linear-gradient(to bottom, #ff1bab 10px, transparent 10px) 0 0,
	  linear-gradient(to bottom, #ff1bab 10px, transparent 10px) 100% 0,
	  linear-gradient(to top, #ff1bab 10px, transparent 10px) 0 100%,
	  linear-gradient(to top, #ff1bab 10px, transparent 10px) 100% 100%;
	background-repeat: no-repeat;
	background-size: 40px 40px;
      }

      #scanning.hidden {
	display: none;
      }

      #scanning img {
	opacity: 0.6;
	width: 90%;
	align-self: center;
      }

      #scanning .inner .scanline {
	position: absolute;
	width: 100%;
	height: 10px;
	background: #ff1bab;
	animation: move 2s linear infinite;
      }

      @keyframes move {
	0%, 100% { top: 0% }
	50% { top: calc(100% - 10px) }
      }