pixies

1@use "@/common/styles/colors" as *
2
3.node-page
4  min-height: 100vh
5  display: flex
6  flex-direction: column
7  justify-content: center
8  align-items: center
9  color: $white
10  text-align: center
11  margin: 0
12  gap: 0.7rem
13
14.node-page hr
15  margin: 0
16
17.node-area
18  display: flex
19  flex-direction: column
20  gap: 1.5rem
21  margin-top: 1rem
22
23.node-add
24  width: 53rem
25  display: flex
26  justify-content: center
27  align-items: center
28  border: 2px solid $light-gray
29  background-color: var(--glass-bg)
30  backdrop-filter: blur(16px)
31  -webkit-backdrop-filter: blur(16px)
32  border-radius: 15px
33  cursor: pointer
34  user-select: none
35  gap: 0.5rem
36
37.node-add h1
38  font-size: 22pt
39  font-weight: 700
40  color: $subtext
41  margin-right: 1rem
42
43.node-add svg
44  font-size: 22pt
45  margin-left: 1rem
46
47.node-add:hover
48  border: 2px solid $green
49
50  h1
51    color: $white
52
53.node-disabled
54  width: 53rem
55  border: 2px dashed $light-gray
56  background-color: var(--glass-bg)
57  backdrop-filter: blur(16px)
58  -webkit-backdrop-filter: blur(16px)
59  border-radius: 15px
60  cursor: not-allowed
61  user-select: none
62
63.node-disabled:hover
64  border: 2px dashed $light-gray
65
66  h1
67    color: $subtext
68
69@media screen and (max-width: 862px)
70  .node-add
71    width: calc(20vw + 11rem)
72    border-radius: 15px
73    cursor: pointer
74
75  .node-add h1
76    font-size: 22pt