1@use "@/common/styles/colors" as *
2
3.dialog-area
4 position: fixed
5 top: 0
6 bottom: 0
7 left: 0
8 right: 0
9 width: 100%
10 height: 100%
11 background-color: rgba(0, 0, 0, 0.7)
12 display: flex
13 align-items: center
14 z-index: 999
15 justify-content: center
16 backdrop-filter: blur(4px)
17 transition: all 0.2s
18 animation: opacity 0.3s
19 overflow-x: hidden
20 overflow-y: auto
21 padding: 1rem 0
22 box-sizing: border-box
23
24.dialog-area-hidden
25 opacity: 0
26 animation: opacity 0.3s reverse
27
28.dialog
29 padding: 1.25rem
30 background-color: $dark-gray
31 backdrop-filter: blur(4px)
32 -webkit-backdrop-filter: blur(4px)
33 border: 1px solid $light-gray
34 border-radius: 1rem
35 animation: fadeIn 0.3s
36 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)
37 min-width: 320px
38 max-width: min(500px, 90vw)
39 max-height: calc(100vh - 2rem)
40 box-sizing: border-box
41 display: flex
42 flex-direction: column
43 flex-shrink: 0
44
45 &.storage-dialog-wrapper,
46 &.integration-dialog,
47 &.welcome-dialog
48 max-width: 90vw
49
50.dialog-hidden
51 visibility: hidden
52 opacity: 0
53 animation: fadeOut 0.3s
54
55.dialog-header
56 display: flex
57 align-items: center
58 justify-content: space-between
59 user-select: none
60 flex-shrink: 0
61
62.dialog a
63 color: $accent-primary
64 cursor: pointer
65 transition: color 0.15s ease
66
67.dialog a:hover
68 color: $accent-secondary
69
70.dialog-main
71 display: flex
72 align-items: center
73 flex-direction: column
74 width: 100%
75 box-sizing: border-box
76 flex: 1 1 auto
77 min-height: 0
78 overflow-x: hidden
79 overflow-y: auto
80
81 &::-webkit-scrollbar
82 width: 0.4rem
83
84 &::-webkit-scrollbar-track
85 background: transparent
86
87 &::-webkit-scrollbar-thumb
88 background: $light-gray
89 border-radius: 0.25rem
90
91 &:hover
92 background: $subtext
93
94.dialog-buttons
95 display: flex
96 margin-top: 1.25rem
97 justify-content: flex-end
98 gap: 0.75rem
99 flex-shrink: 0
100
101.dialog-text
102 font-size: 1.25rem
103 font-weight: 700
104 color: $white
105 margin: 0
106
107.dialog-description
108 font-size: 1.05rem
109 font-weight: 600
110 margin: 14px 2px 2px
111 color: $subtext
112 line-height: 1.6
113 word-wrap: break-word
114 overflow-wrap: break-word
115 max-width: 100%
116
117.dialog-description a
118 color: $accent-primary
119 text-decoration: underline
120
121.dialog-value
122 color: $accent-primary
123 font-weight: 600
124
125.dialog-icon
126 cursor: pointer
127 color: $subtext
128 transition: color 0.15s ease
129 font-size: 1.1rem
130
131.dialog-icon:hover
132 color: $accent-danger
133
134.dialog-btn
135 display: flex
136 align-items: center
137 justify-content: center
138 gap: 0.6rem
139 padding: 0.7rem 1.25rem
140 background-color: $darker-gray
141 border: 1px solid $light-gray
142 border-radius: 0.6rem
143 color: $white
144 font-size: 1rem
145 font-weight: 500
146 cursor: pointer
147 transition: all 0.15s ease
148
149 &:hover
150 border-color: $accent-primary
151 color: $accent-primary
152
153 &:disabled
154 cursor: default
155 opacity: 0.6
156
157 &:hover
158 border-color: $light-gray
159 color: $white
160
161 svg
162 font-size: 1rem
163
164.dialog-btn-danger
165 &:hover
166 border-color: $accent-danger
167 color: $accent-danger
168
169.dialog-secondary
170 &:hover
171 border-color: $accent-danger
172 color: $accent-danger
173
174.dialog-input
175 font-size: 1rem
176 padding: 0.7rem 1rem
177 font-weight: 500
178 margin-top: 15px
179 margin-bottom: 15px
180 width: 100%
181 background-color: $darker-gray
182 color: $white
183 border: 1px solid $light-gray
184 border-radius: 0.6rem
185 text-align: center
186 box-sizing: border-box
187 outline: none
188 transition: all 0.15s ease
189
190.dialog-input::placeholder
191 color: $subtext
192
193.dialog-input:focus
194 border-color: $accent-primary
195
196.input-error
197 border-color: $accent-danger
198
199.input-error:focus
200 border-color: $accent-danger
201
202.dialog-loading
203 min-width: 200px
204 min-height: 100px
205 display: flex
206 align-items: center
207 justify-content: center
208
209@media (max-width: 600px)
210 .dialog
211 min-width: 280px
212 max-width: 95vw
213 padding: 1rem
214
215 .dialog-text
216 font-size: 1.15rem
217
218 .dialog-description
219 font-size: 1rem
220
221 .dialog-btn
222 font-size: 0.95rem
223 padding: 0.6rem 1rem