pixies

1@use "@/common/styles/colors" as *
2
3.install-page
4  min-height: 100vh
5  display: flex
6  align-items: center
7  justify-content: center
8  padding: 120px 24px 80px
9
10.install-container
11  width: 100%
12  max-width: 700px
13
14.install-header
15  text-align: center
16  margin-bottom: 40px
17
18  h1
19    font-size: 2.5rem
20    font-weight: 700
21    margin-bottom: 8px
22
23  p
24    font-size: 1.125rem
25    color: $text-secondary
26
27.quick-install
28  background: $background-lighter
29  border: 1px solid $border-color
30  border-radius: 12px
31  padding: 24px
32  margin-bottom: 32px
33
34.quick-install-header
35  text-align: center
36  margin-bottom: 16px
37
38  h2
39    font-size: 1.25rem
40    font-weight: 600
41    margin-bottom: 4px
42
43  p
44    font-size: 0.875rem
45    color: $text-secondary
46
47.command-row
48  display: flex
49  align-items: center
50  background: $background
51  border: 1px solid $border-color
52  border-radius: 8px
53  padding: 14px 16px
54  cursor: pointer
55  transition: border-color 0.2s ease
56
57  &:hover
58    border-color: $primary
59
60  code
61    flex: 1
62    font-family: "JetBrains Mono", "Fira Code", monospace
63    font-size: 0.875rem
64    color: $text
65    overflow: hidden
66    text-overflow: ellipsis
67    white-space: nowrap
68
69.copy-btn
70  display: flex
71  align-items: center
72  gap: 6px
73  background: none
74  border: none
75  color: $text-muted
76  font-size: 0.8125rem
77  font-weight: 500
78  padding: 6px 12px
79  cursor: pointer
80  transition: color 0.2s ease
81  border-radius: 6px
82
83  &:hover
84    color: $primary
85    background: rgba($primary, 0.1)
86
87  &.copied
88    color: $primary
89
90.divider
91  display: flex
92  align-items: center
93  gap: 16px
94  margin-bottom: 24px
95
96  &::before, &::after
97    content: ""
98    flex: 1
99    height: 1px
100    background: $border-color
101
102  span
103    font-size: 0.8125rem
104    color: $text-muted
105
106.install-options
107  display: grid
108  grid-template-columns: repeat(3, 1fr)
109  gap: 12px
110  margin-bottom: 40px
111
112.install-option
113  display: flex
114  align-items: center
115  gap: 14px
116  padding: 18px 20px
117  background: $background-lighter
118  border: 1px solid $border-color
119  border-radius: 10px
120  cursor: pointer
121  transition: all 0.2s ease
122  text-align: left
123
124  &:hover
125    border-color: $border-hover
126    background: lighten($background-lighter, 2%)
127
128  > svg
129    font-size: 1.75rem
130    color: $text-secondary
131    transition: color 0.2s ease
132
133  .option-text
134    display: flex
135    flex-direction: column
136    gap: 2px
137
138    strong
139      font-size: 0.9375rem
140      font-weight: 600
141      color: $text
142
143    span
144      font-size: 0.75rem
145      color: $text-muted
146
147.help-section
148  text-align: center
149  padding-top: 24px
150  border-top: 1px solid $border-color
151
152  > p
153    font-size: 0.875rem
154    color: $text-muted
155    margin-bottom: 12px
156
157.help-links
158  display: flex
159  justify-content: center
160  gap: 24px
161
162  a
163    color: $text-secondary
164    font-size: 0.875rem
165    font-weight: 500
166    cursor: pointer
167    transition: color 0.2s ease
168
169    &:hover
170      color: $primary
171
172@media (max-width: 640px)
173  .install-header h1
174    font-size: 2rem
175
176  .install-options
177    grid-template-columns: 1fr
178
179  .command-row
180    flex-direction: column
181    gap: 12px
182
183    code
184      width: 100%
185      text-align: center
186      font-size: 0.75rem
187