Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
wellsousaaa
GitHub Repository: wellsousaaa/Five-Nights-at-Freddys-Web
Path: blob/main/src/css/CustomNight.module.css
270 views
1
.golden_freddy {
2
width: 100vw;
3
height: 100vh;
4
background-image: url("../media/Textures/golden_freddy.webp");
5
background-color: #000;
6
background-size: contain;
7
background-position: center;
8
background-repeat: no-repeat;
9
}
10
11
.custom_night_container {
12
overflow: auto;
13
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
14
color: white;
15
backdrop-filter: blur(7px) brightness(0.5);
16
17
display: flex;
18
flex-direction: column;
19
justify-content: space-evenly;
20
height: 100vh;
21
}
22
23
.github_icon {
24
width: fit-content;
25
height: fit-content;
26
position: absolute;
27
bottom: 2%;
28
right: 2%;
29
cursor: pointer;
30
transition: transform 200ms 50ms;
31
}
32
33
.github_icon a {
34
width: fit-content;
35
height: fit-content;
36
}
37
38
.github_icon:hover {
39
transform: scale(1.2);
40
transition: transform 200ms 50ms;
41
}
42
43
.custom_night_container h1 {
44
font-weight: 400;
45
margin-left: 30px;
46
opacity: 0.8;
47
}
48
49
.animatronics_container {
50
display: flex;
51
justify-content: space-evenly;
52
}
53
54
.animatronic {
55
display: flex;
56
flex-direction: column;
57
align-items: center;
58
}
59
60
.animatronic img {
61
max-width: 200px;
62
width: 20vw;
63
}
64
65
.animatronic > span {
66
font-size: 20pt;
67
margin-bottom: 15px;
68
}
69
70
.range_buttons {
71
display: flex;
72
justify-content: space-between;
73
align-items: center;
74
margin-top: 25px;
75
font-size: 1.5rem;
76
font-family: "Consolas";
77
width: 100%;
78
}
79
80
.range_buttons button {
81
border-radius: 5px;
82
width: 50px;
83
outline: none;
84
background-color: var(--button-color);
85
color: inherit;
86
font-weight: bolder;
87
border: none;
88
font-size: inherit;
89
cursor: pointer;
90
transition: transform 200ms 50ms;
91
}
92
93
.range_buttons button:not(:disabled):hover,
94
.range_buttons button:not(:disabled):focus-within {
95
transform: scale(1.15);
96
transition: transform 200ms 50ms;
97
}
98
99
.range_buttons button:disabled {
100
cursor: default;
101
opacity: 0.8;
102
}
103
104
.start_screen {
105
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
106
/* height: 100vh; */
107
display: flex;
108
align-self: center;
109
justify-content: space-evenly;
110
flex-wrap: wrap;
111
align-items: center;
112
}
113
114
.start_screen span {
115
flex: 100%;
116
margin-bottom: 15px;
117
font-size: 12.5pt;
118
}
119
120
.ready_button {
121
font-weight: 800;
122
padding: auto 10px;
123
124
font-size: 17pt;
125
}
126
127
.start_screen button:not(.ready_button) {
128
font-size: 15pt;
129
}
130
131
.start_screen button:not(.ready_button)[data-selected="false"] {
132
opacity: 0.6;
133
}
134
135
.start_screen button:not(.ready_button)[data-selected="true"]:before {
136
content: "▶ ";
137
}
138
139
.start_screen button {
140
border-radius: 6.5px;
141
/* width: 100px; */
142
cursor: pointer;
143
height: 100%;
144
outline: none;
145
color: white;
146
background-color: var(--button-color);
147
border: none;
148
}
149
150
.footer {
151
opacity: 0.8;
152
height: 50px;
153
text-align: center;
154
}
155
156
.footer p {
157
margin-top: 0;
158
}
159
160
@media screen and (min-width: 750px) {
161
.custom_night_container h1 {
162
margin-bottom: 30px;
163
}
164
.start_screen {
165
width: 50%;
166
}
167
.start_screen button {
168
margin-top: 10px;
169
height: 50px;
170
}
171
172
.range_buttons button {
173
height: 50px;
174
}
175
176
.footer {
177
margin-top: 50px;
178
}
179
}
180
181
@media screen and (max-width: 750px) {
182
.custom_night_container h1 {
183
/* margin-bottom: 2%; */
184
margin-top: 2%;
185
font-size: 15pt;
186
}
187
188
.start_screen {
189
width: 90%;
190
}
191
.ready_button {
192
margin: 1.2% auto 1% auto;
193
}
194
195
.start_screen button {
196
font-size: 10pt !important;
197
height: 35px;
198
}
199
200
.range_buttons {
201
margin-top: 15px;
202
max-height: 30px;
203
}
204
205
.footer {
206
margin: 1% 0px 1% 0px;
207
}
208
}
209
210