backend_iot/static/style.css (view raw)
1.surface-pro {
2 background-color: #000000;
3 display: flex;
4 flex-direction: row;
5 justify-content: center;
6 width: 100%;
7}
8
9.surface-pro .div {
10 background-color: #000000;
11 width: 1440px;
12 height: 960px;
13 position: relative;
14}
15
16.surface-pro .overlap {
17 position: absolute;
18 width: 288px;
19 height: 105px;
20 top: 0;
21 left: 288px;
22 background-color: #000000;
23}
24
25.surface-pro .text {
26 top: 27px;
27 left: 77px;
28 color: #ffffff;
29 font-size: 40px;
30 white-space: nowrap;
31 position: absolute;
32 font-family: "Inter", Helvetica;
33 font-weight: 400;
34 text-align: center;
35 letter-spacing: 0;
36 line-height: normal;
37}
38
39.surface-pro .text-wrapper {
40 font-family: "Inter", Helvetica;
41 font-weight: 400;
42 color: #ffffff;
43 font-size: 40px;
44 letter-spacing: 0;
45}
46
47.surface-pro .span {
48 font-size: 20px;
49}
50
51.surface-pro .overlap-group {
52 position: absolute;
53 width: 288px;
54 height: 105px;
55 top: 0;
56 left: 864px;
57 background-color: #000000;
58}
59
60.surface-pro .AQI-int {
61 left: 94px;
62 position: absolute;
63 top: 27px;
64 font-family: "Inter", Helvetica;
65 font-weight: 400;
66 color: #ffffff;
67 font-size: 40px;
68 text-align: center;
69 letter-spacing: 0;
70 line-height: normal;
71 white-space: nowrap;
72}
73
74.surface-pro .rectangle {
75 position: absolute;
76 width: 288px;
77 height: 12px;
78 top: 93px;
79 left: 0;
80 background-color: #b51010;
81}
82
83.surface-pro .overlap-2 {
84 position: absolute;
85 width: 288px;
86 height: 105px;
87 top: 0;
88 left: 1152px;
89 background-color: #000000;
90}
91
92.surface-pro .AQI-ext {
93 left: 87px;
94 position: absolute;
95 top: 27px;
96 font-family: "Inter", Helvetica;
97 font-weight: 400;
98 color: #ffffff;
99 font-size: 40px;
100 text-align: center;
101 letter-spacing: 0;
102 line-height: normal;
103 white-space: nowrap;
104}
105
106.surface-pro .rectangle-2 {
107 position: absolute;
108 width: 288px;
109 height: 12px;
110 top: 93px;
111 left: 0;
112 background-color: #fab639;
113}
114
115.surface-pro .group {
116 position: absolute;
117 width: 280px;
118 height: 532px;
119 top: 190px;
120 left: 576px;
121 background-image: url(./img/volvo-concept-26-interior-06-768x405-1.png);
122 background-size: cover;
123 background-position: 50% 50%;
124}
125
126.surface-pro .overlap-3 {
127 position: absolute;
128 width: 172px;
129 height: 239px;
130 top: 332px;
131 left: 297px;
132}
133
134.surface-pro .vector {
135 position: absolute;
136 width: 49px;
137 height: 49px;
138 top: 100px;
139 left: 123px;
140}
141
142.surface-pro .overlap-wrapper {
143 position: absolute;
144 width: 138px;
145 height: 239px;
146 top: 0;
147 left: 0;
148}
149
150.surface-pro .overlap-group-2 {
151 position: relative;
152 height: 239px;
153}
154
155.surface-pro .frame-wrapper {
156 position: absolute;
157 width: 112px;
158 height: 221px;
159 top: 10px;
160 left: 18px;
161}
162
163.surface-pro .frame {
164 position: relative;
165 height: 221px;
166 overflow: hidden;
167 overflow-y: scroll;
168}
169
170.surface-pro .element {
171 top: -310px;
172 left: 34px;
173 color: transparent;
174 font-size: 64px;
175 position: absolute;
176 font-family: "Inter", Helvetica;
177 font-weight: 400;
178 text-align: center;
179 letter-spacing: 0;
180 line-height: normal;
181}
182
183.surface-pro .text-wrapper-2 {
184 color: #000000;
185}
186
187.surface-pro .text-wrapper-3 {
188 color: #ffffff;
189}
190
191.surface-pro .rectangle-3 {
192 position: absolute;
193 width: 138px;
194 height: 79px;
195 top: 0;
196 left: 0;
197 background: linear-gradient(180deg, rgb(0, 0, 0) 31.25%, rgba(0, 0, 0, 0) 100%);
198}
199
200.surface-pro .rectangle-4 {
201 position: absolute;
202 width: 138px;
203 height: 79px;
204 top: 160px;
205 left: 0;
206 transform: rotate(-180deg);
207 background: linear-gradient(180deg, rgb(0, 0, 0) 31.25%, rgba(0, 0, 0, 0) 100%);
208}
209
210.surface-pro .rectangle-5 {
211 position: absolute;
212 width: 138px;
213 height: 79px;
214 top: 0;
215 left: 9px;
216 background: linear-gradient(180deg, rgb(0, 0, 0) 31.25%, rgba(0, 0, 0, 0) 100%);
217}
218
219.surface-pro .rectangle-6 {
220 position: absolute;
221 width: 138px;
222 height: 79px;
223 top: 160px;
224 left: 9px;
225 transform: rotate(-180deg);
226 background: linear-gradient(180deg, rgb(0, 0, 0) 31.25%, rgba(0, 0, 0, 0) 100%);
227}
228
229.surface-pro .overlap-group-wrapper {
230 position: absolute;
231 width: 138px;
232 height: 239px;
233 top: 332px;
234 left: 110px;
235}
236
237.surface-pro .div-wrapper {
238 position: absolute;
239 width: 112px;
240 height: 221px;
241 top: 10px;
242 left: 13px;
243}
244
245.surface-pro .p {
246 width: 109px;
247 top: -88px;
248 left: 1px;
249 color: transparent;
250 font-size: 64px;
251 position: absolute;
252 font-family: "Inter", Helvetica;
253 font-weight: 400;
254 text-align: center;
255 letter-spacing: 0;
256 line-height: normal;
257 color: white;
258}
259
260.surface-pro .tint {
261 position: absolute;
262 top: 27px;
263 left: 84px;
264 font-family: "Inter", Helvetica;
265 font-weight: 400;
266 color: #ffffff;
267 font-size: 40px;
268 text-align: center;
269 letter-spacing: 0;
270 line-height: normal;
271 white-space: nowrap;
272}
273
274.surface-pro .overlap-4 {
275 position: absolute;
276 width: 885px;
277 height: 152px;
278 top: 808px;
279 left: 0;
280}
281
282.surface-pro .group-2 {
283 position: absolute;
284 width: 290px;
285 height: 105px;
286 top: 47px;
287 left: 288px;
288}
289
290.surface-pro .overlap-5 {
291 position: relative;
292 width: 288px;
293 height: 105px;
294 background-color: #000000;
295}
296
297.surface-pro .text-wrapper-4 {
298 position: absolute;
299 width: 288px;
300 top: 29px;
301 left: 0;
302 font-family: "Inter", Helvetica;
303 font-weight: 400;
304 color: #ffffff;
305 font-size: 40px;
306 text-align: center;
307 letter-spacing: 0;
308 line-height: normal;
309}
310
311.surface-pro .group-3 {
312 position: absolute;
313 width: 290px;
314 height: 105px;
315 top: 47px;
316 left: 0;
317}
318
319.surface-pro .group-4 {
320 position: absolute;
321 width: 326px;
322 height: 127px;
323 top: 0;
324 left: 559px;
325}
326
327.surface-pro .overlap-6 {
328 position: relative;
329 width: 322px;
330 height: 127px;
331 background-color: #000000;
332 border-radius: 35px;
333 border: 1px solid;
334 border-color: #ffffff;
335}
336
337.surface-pro .overlap-group-3 {
338 position: absolute;
339 width: 161px;
340 height: 127px;
341 top: 0;
342 left: 0;
343 background-image: url(./img/tasto-ricircolo.svg);
344 background-size: 100% 100%;
345}
346
347.surface-pro .text-wrapper-5 {
348 position: absolute;
349 width: 161px;
350 top: 37px;
351 left: 0;
352 font-family: "Inter", Helvetica;
353 font-weight: 400;
354 color: #ffffff;
355 font-size: 45px;
356 text-align: center;
357 letter-spacing: 0;
358 line-height: normal;
359}
360
361.surface-pro .text-wrapper-6 {
362 position: absolute;
363 width: 161px;
364 top: 36px;
365 left: 160px;
366 font-family: "Inter", Helvetica;
367 font-weight: 400;
368 color: #ffffff;
369 font-size: 45px;
370 text-align: center;
371 letter-spacing: 0;
372 line-height: normal;
373}
374
375.surface-pro .group-5 {
376 position: absolute;
377 width: 387px;
378 height: 357px;
379 top: 273px;
380 left: 944px;
381}
382
383.surface-pro .overlap-7 {
384 position: relative;
385 width: 385px;
386 height: 357px;
387 background-color: #000000;
388}
389
390.surface-pro .text-wrapper-7 {
391 position: absolute;
392 top: 111px;
393 left: 153px;
394 font-family: "Inter", Helvetica;
395 font-weight: 400;
396 color: #ffffff;
397 font-size: 40px;
398 text-align: center;
399 letter-spacing: 0;
400 line-height: normal;
401 white-space: nowrap;
402}
403
404.surface-pro .rectangle-7 {
405 position: absolute;
406 width: 154px;
407 height: 61px;
408 top: 183px;
409 left: 109px;
410 background-color: #ffffff;
411 border-radius: 22px;
412}
413
414.surface-pro .img {
415 position: absolute;
416 width: 117px;
417 height: 52px;
418 top: 188px;
419 left: 124px;
420}
421
422.surface-pro .ellipse {
423 position: absolute;
424 width: 315px;
425 height: 315px;
426 top: 21px;
427 left: 29px;
428 border-radius: 157.5px;
429 border: 30px solid;
430 border-color: #ff1616;
431 filter: blur(30px);
432}
433
434.surface-pro .ellipse-2 {
435 position: absolute;
436 width: 291px;
437 height: 291px;
438 top: 33px;
439 left: 41px;
440 border-radius: 145.5px;
441 border: 6px solid;
442 border-color: #ffffff;
443 backdrop-filter: blur(50px) brightness(100%);
444 -webkit-backdrop-filter: blur(50px) brightness(100%);
445}
446
447
448.frame::-webkit-scrollbar {
449 display: none;
450}