-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.css
135 lines (135 loc) · 2.6 KB
/
main.css
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
* {
user-select: none;
}
body {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}
#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
#scene {
position: relative;
}
#robot {
position: absolute;
perspective: 3rem;
left: -4rem;
}
#robot-lid {
position: absolute;
left: 7rem;
top: -3rem;
width: 7rem;
height: 6rem;
background-color: #fff;
transform: rotateY(0deg);
transform-origin: 100% 50%;
border-radius: .375rem;
transition: transform .2s, background-color .2s;
transition-timing-function: ease-in-out;
}
#robot-lid.opened {
background-color: #ddd;
transform: rotateY(2deg);
transform-origin: 100% 50%;
}
#robot-arm {
position: absolute;
top: -.625rem;
left: 5rem;
width: 3rem;
height: 1.25rem;
background-color: #555;
transform: translate(2rem, 0);
border-radius: .375rem 0 0 .375rem;
transition: transform .2s;
transition-timing-function: ease-in-out;
}
#robot-arm.reached {
transform: translate(0rem, 0);
}
#toggle {
position: absolute;
left: 0;
top: 0;
transition: transform .25s;
}
#toggle.move-up {
transform: translate(0, -3rem);
}
#toggle.move-down {
transform: translate(0, 3rem);
}
#toggle.eat {
transform: translate(4.5rem, 0);
}
#toggle-area {
position: absolute;
width: 10rem;
height: 10rem;
left: -5rem;
top: -5rem;
}
#toggle-bg {
position: absolute;
top: -.75rem;
left: -1.5rem;
width: 3rem;
height: 1.5rem;
background-color: #ddd;
border-radius: .75rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
}
#toggle-tip {
position: absolute;
width: 1.5rem;
height: 1.5rem;
left: -1.5rem;
top: -.75rem;
background-color: hsl(0, 80%, 55%);
box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .5);
border-radius: .75rem;
transition: background-color .1s, transform .2s;
transition-timing-function: ease-in-out;
transform: translate(0, 0);
}
#toggle-tip.toggled {
background-color: hsl(120deg, 50%, 55%);
transform: translate(100%, 0);
}
#link {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: .875rem;
}
#link a:not(:hover) {
text-decoration: none;
}
#bullets {
position: absolute;
top: 0;
left: 0;
}
.bullet {
position: absolute;
left: calc(3rem - 0.09375rem);
top: -0.09375rem;
width: 0.1875rem;
height: 0.1875rem;
border-radius: 50%;
background-color: #000;
opacity: 0;
}
.bullet.fire {
transition: transform .1s;
transform: translate(-2.75rem, 0);
transition-timing-function: linear;
}