Skip to content

Commit 87ae80c

Browse files
aesopovaesopov
committed
Basic settings dialog
1 parent bdd741d commit 87ae80c

15 files changed

Lines changed: 1136 additions & 29 deletions

‎packages/ui/lib/dialogs/SettingsDialog.module.css‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
.dialog {
2+
width: min(1480px, calc(100% - 64px));
3+
height: min(940px, calc(100% - 64px));
4+
max-width: calc(100% - 64px);
5+
max-height: calc(100% - 64px);
6+
background: var(--bg);
7+
color: var(--fg);
8+
border: 1px solid var(--border-active);
9+
border-radius: 4px;
10+
overflow: hidden;
11+
display: grid;
12+
grid-template-rows: auto minmax(0, 1fr) auto;
13+
}
14+
15+
.header {
16+
display: flex;
17+
align-items: center;
18+
gap: 12px;
19+
padding: 10px 12px;
20+
border-bottom: 1px solid var(--border);
21+
background: var(--bg-secondary);
22+
}
23+
24+
.title {
25+
font-size: 13px;
26+
font-weight: 600;
27+
color: var(--fg-secondary);
28+
}
29+
30+
.search {
31+
flex: 1;
32+
min-width: 0;
33+
padding: 6px 8px;
34+
font-size: 13px;
35+
border-radius: 3px;
36+
border: 1px solid var(--input-border, var(--border));
37+
background: var(--bg);
38+
color: var(--fg);
39+
}
40+
41+
.search:focus {
42+
outline: 2px solid var(--border-active);
43+
outline-offset: 0;
44+
}
45+
46+
.body {
47+
min-height: 0;
48+
display: grid;
49+
grid-template-columns: 340px minmax(0, 1fr);
50+
}
51+
52+
.sidebar {
53+
border-right: 1px solid var(--border);
54+
overflow: auto;
55+
padding: 8px;
56+
display: flex;
57+
flex-direction: column;
58+
gap: 4px;
59+
}
60+
61+
.groupList {
62+
list-style: none;
63+
margin: 0;
64+
padding: 0;
65+
}
66+
67+
.group,
68+
.groupActive {
69+
text-align: left;
70+
border: 1px solid transparent;
71+
background: transparent;
72+
color: var(--fg);
73+
padding: 6px 8px;
74+
border-radius: 3px;
75+
cursor: pointer;
76+
font-size: 12px;
77+
}
78+
79+
.group:hover {
80+
background: var(--entry-hover);
81+
}
82+
83+
.groupActive {
84+
background: var(--entry-hover);
85+
border-color: var(--border-active);
86+
}
87+
88+
.main {
89+
min-width: 0;
90+
min-height: 0;
91+
overflow: auto;
92+
}
93+
94+
.settingsPane {
95+
min-height: 100%;
96+
padding: 12px;
97+
display: flex;
98+
flex-direction: column;
99+
gap: 12px;
100+
}
101+
102+
.settingCard {
103+
border: 1px solid var(--border);
104+
border-radius: 3px;
105+
background: var(--bg);
106+
padding: 10px;
107+
display: flex;
108+
flex-direction: column;
109+
gap: 10px;
110+
}
111+
112+
.settingHeaderRow {
113+
display: flex;
114+
align-items: center;
115+
justify-content: space-between;
116+
gap: 8px;
117+
}
118+
119+
.detailTitle {
120+
font-size: 15px;
121+
font-weight: 700;
122+
}
123+
124+
.settingMenuButton {
125+
display: inline-flex;
126+
align-items: center;
127+
justify-content: center;
128+
width: 28px;
129+
height: 28px;
130+
border: 1px solid var(--border);
131+
background: var(--bg-secondary);
132+
color: var(--fg-secondary);
133+
border-radius: 2px;
134+
cursor: pointer;
135+
}
136+
137+
.settingMenuButton:hover {
138+
background: var(--entry-hover);
139+
color: var(--fg);
140+
}
141+
142+
.settingMenuButton:focus,
143+
.settingMenuButton:focus-visible {
144+
outline: 2px solid var(--border-active);
145+
outline-offset: 0;
146+
}
147+
148+
.settingMenu {
149+
width: 240px;
150+
background: var(--bg);
151+
border: 1px solid var(--border-active);
152+
border-radius: 2px;
153+
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
154+
padding: 4px;
155+
}
156+
157+
.detailKey {
158+
font-size: 11px;
159+
color: var(--fg-muted);
160+
}
161+
162+
.description {
163+
font-size: 12px;
164+
color: var(--fg-secondary);
165+
white-space: pre-wrap;
166+
}
167+
168+
.input {
169+
padding: 6px 8px;
170+
font-size: 13px;
171+
border-radius: 3px;
172+
border: 1px solid var(--input-border, var(--border));
173+
background: var(--bg);
174+
color: var(--fg);
175+
}
176+
177+
.input:focus {
178+
outline: 2px solid var(--border-active);
179+
outline-offset: 0;
180+
}
181+
182+
.checkboxLabel {
183+
display: flex;
184+
align-items: center;
185+
gap: 8px;
186+
font-size: 13px;
187+
}
188+
189+
.metaBlock {
190+
display: grid;
191+
gap: 4px;
192+
padding: 8px;
193+
border: 1px solid var(--border);
194+
border-radius: 3px;
195+
font-size: 12px;
196+
color: var(--fg-secondary);
197+
}
198+
199+
.row {
200+
display: flex;
201+
gap: 8px;
202+
align-items: center;
203+
}
204+
205+
.jsonEditor {
206+
display: flex;
207+
flex-direction: column;
208+
gap: 8px;
209+
}
210+
211+
.jsonText {
212+
min-height: 180px;
213+
font-family: var(--font-mono, monospace);
214+
font-size: 12px;
215+
line-height: 1.5;
216+
border: 1px solid var(--input-border, var(--border));
217+
border-radius: 3px;
218+
background: var(--bg);
219+
color: var(--fg);
220+
padding: 8px;
221+
resize: vertical;
222+
}
223+
224+
.jsonText:focus {
225+
outline: 2px solid var(--border-active);
226+
outline-offset: 0;
227+
}
228+
229+
.error {
230+
color: var(--error-fg);
231+
font-size: 12px;
232+
}
233+
234+
.primaryButton,
235+
.secondaryButton {
236+
padding: 4px 12px;
237+
border: 1px solid var(--border-active);
238+
border-radius: 3px;
239+
background: var(--bg-secondary);
240+
color: var(--fg);
241+
font-size: 12px;
242+
cursor: pointer;
243+
}
244+
245+
.footer {
246+
display: flex;
247+
justify-content: flex-end;
248+
gap: 8px;
249+
padding: 8px 12px;
250+
border-top: 1px solid var(--border);
251+
font-size: 12px;
252+
color: var(--fg-secondary);
253+
}
254+
255+
.empty {
256+
color: var(--fg-muted);
257+
font-size: 12px;
258+
padding: 8px;
259+
}
260+

0 commit comments

Comments
 (0)