pixies

1@use "@/common/styles/colors" as *
2
3.node-item
4  border: 2px solid $light-gray
5  background-color: var(--glass-bg)
6  backdrop-filter: blur(16px)
7  -webkit-backdrop-filter: blur(16px)
8  border-radius: 15px
9  display: flex
10  width: 50rem
11  cursor: pointer
12  padding: 1rem 1.5rem
13  justify-content: space-between
14  align-items: center
15  user-select: none
16
17.hover-green:hover
18  border: 2px solid $green
19
20.hover-orange:hover
21  border: 2px solid $orange
22
23.hover-red:hover
24  border: 2px solid $red
25
26.node-info-area
27  display: flex
28  align-items: center
29  gap: 1rem
30
31.node-info-area svg
32  font-size: 30pt
33
34.node-info-area h1
35  margin: 0
36  font-size: 16pt
37
38.node-info-area p
39  margin: 0
40  font-size: 11pt
41  color: $subtext
42
43.node-info
44  display: flex
45  flex-direction: column
46  align-items: flex-start
47
48.node-info *
49  max-width: 11rem
50  text-overflow: ellipsis
51  overflow: hidden
52  white-space: nowrap
53
54.speed-area
55  display: flex
56  gap: 1rem
57
58.icon-text
59  display: flex
60  gap: 0.5rem
61  align-items: center
62
63.icon-text h2
64  margin: 0
65  color: $subtext
66
67.speed-item
68  display: flex
69  gap: 0.5rem
70
71.speed-item svg
72  font-size: 24pt
73
74.speed-item h1
75  margin: 0
76  font-size: 20pt
77  color: $subtext
78
79.speed-icon
80  font-size: 28pt
81
82@media screen and (max-width: 862px)
83  .node-item
84    width: calc(20vw + 8rem)
85    flex-direction: column
86    gap: 1rem
87
88  .speed-area
89    flex-direction: column
90    gap: 0.5rem
91  .icon-text h2
92    font-size: 14pt