@tuprolog/arg2p-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -2
- package/dist/components/arg2p-editor.js +47 -47
- package/dist/components/arg2p-flags.js +197 -197
- package/dist/components/arg2p-graph.js +210 -210
- package/dist/components/arg2p-solutions.js +186 -186
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -45,5 +45,32 @@ npm install @tuprolog/arg2p-ui @tuprolog/arg2p
|
|
|
45
45
|
`@tuprolog/arg2p-ui/data` has what they are built on with no DOM: the contract of engines, the flags and profiles, the
|
|
46
46
|
formats of abstract frameworks (APX, TGF, ICCMA'23), the layout of graphs.
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
## Theming
|
|
49
|
+
|
|
50
|
+
The components take their colours and fonts from custom properties a page sets (they cross into the components), with
|
|
51
|
+
a light theme otherwise:
|
|
52
|
+
|
|
53
|
+
| Property | |
|
|
54
|
+
| --- | --- |
|
|
55
|
+
| `--arg2p-surface`, `--arg2p-surface-2` | The background of the components, and of their bars |
|
|
56
|
+
| `--arg2p-hover`, `--arg2p-border` | What is hovered, and the borders |
|
|
57
|
+
| `--arg2p-text`, `--arg2p-muted` | The text, and what is said aside |
|
|
58
|
+
| `--arg2p-accent`, `--arg2p-error`, `--arg2p-no` | What stands out: the active, the errors, the solutions that are no |
|
|
59
|
+
| `--arg2p-in`, `--arg2p-out`, `--arg2p-und`, `--arg2p-unlabelled` | The labels of the arguments (the same in every theme: they carry meaning) |
|
|
60
|
+
| `--arg2p-support` | The supports between arguments |
|
|
61
|
+
| `--arg2p-atom`, `--arg2p-functor`, `--arg2p-variable`, `--arg2p-comment` | The highlighting of the editors |
|
|
62
|
+
| `--arg2p-font`, `--arg2p-mono` | The fonts, of the text and of the code |
|
|
63
|
+
|
|
64
|
+
A dark theme, say:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
:root[data-theme='dark'] {
|
|
68
|
+
--arg2p-surface: #1f2125;
|
|
69
|
+
--arg2p-border: #383c43;
|
|
70
|
+
--arg2p-text: #e3e5e8;
|
|
71
|
+
--arg2p-muted: #9aa0a8;
|
|
72
|
+
--arg2p-accent: #3fb0ac;
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
The graph draws on a canvas: after the page changes theme, `restyle()` on `<arg2p-graph>` draws it in the new colours.
|
|
@@ -179,64 +179,64 @@ export class Arg2pEditor extends LitElement {
|
|
|
179
179
|
}
|
|
180
180
|
render() {
|
|
181
181
|
const problem = this.problem;
|
|
182
|
-
return html `
|
|
183
|
-
<div class="editor"></div>
|
|
182
|
+
return html `
|
|
183
|
+
<div class="editor"></div>
|
|
184
184
|
${problem === null
|
|
185
185
|
? nothing
|
|
186
|
-
: html `
|
|
187
|
-
<div
|
|
188
|
-
class="problem"
|
|
189
|
-
role="button"
|
|
190
|
-
tabindex="0"
|
|
191
|
-
title="Go to the error"
|
|
192
|
-
@click=${() => this.reveal(problem.line, problem.column)}
|
|
186
|
+
: html `
|
|
187
|
+
<div
|
|
188
|
+
class="problem"
|
|
189
|
+
role="button"
|
|
190
|
+
tabindex="0"
|
|
191
|
+
title="Go to the error"
|
|
192
|
+
@click=${() => this.reveal(problem.line, problem.column)}
|
|
193
193
|
@keydown=${(e) => {
|
|
194
194
|
if (e.key !== 'Enter' && e.key !== ' ')
|
|
195
195
|
return;
|
|
196
196
|
e.preventDefault();
|
|
197
197
|
this.reveal(problem.line, problem.column);
|
|
198
|
-
}}
|
|
199
|
-
>
|
|
200
|
-
<span class="place">${this.label ? `${this.label}, ` : ''}line ${problem.line}, col ${problem.column}</span>
|
|
201
|
-
<span>${problem.message}</span>
|
|
202
|
-
</div>
|
|
203
|
-
`}
|
|
198
|
+
}}
|
|
199
|
+
>
|
|
200
|
+
<span class="place">${this.label ? `${this.label}, ` : ''}line ${problem.line}, col ${problem.column}</span>
|
|
201
|
+
<span>${problem.message}</span>
|
|
202
|
+
</div>
|
|
203
|
+
`}
|
|
204
204
|
`;
|
|
205
205
|
}
|
|
206
206
|
static { this.styles = [
|
|
207
207
|
tokens,
|
|
208
|
-
css `
|
|
209
|
-
:host {
|
|
210
|
-
display: flex;
|
|
211
|
-
flex-direction: column;
|
|
212
|
-
min-height: 0;
|
|
213
|
-
border: 1px solid var(--_border);
|
|
214
|
-
border-radius: 4px;
|
|
215
|
-
overflow: hidden;
|
|
216
|
-
background: var(--_surface);
|
|
217
|
-
}
|
|
218
|
-
:host([kind='query']) {
|
|
219
|
-
flex: none;
|
|
220
|
-
}
|
|
221
|
-
.editor {
|
|
222
|
-
flex: 1;
|
|
223
|
-
min-height: 0;
|
|
224
|
-
font-size: 14px;
|
|
225
|
-
}
|
|
226
|
-
.problem {
|
|
227
|
-
display: flex;
|
|
228
|
-
gap: 8px;
|
|
229
|
-
padding: 4px 8px;
|
|
230
|
-
font-size: 12px;
|
|
231
|
-
color: var(--_error);
|
|
232
|
-
background: color-mix(in srgb, var(--_error) 8%, transparent);
|
|
233
|
-
border-top: 1px solid color-mix(in srgb, var(--_error) 30%, transparent);
|
|
234
|
-
cursor: pointer;
|
|
235
|
-
}
|
|
236
|
-
.place {
|
|
237
|
-
font-weight: 600;
|
|
238
|
-
white-space: nowrap;
|
|
239
|
-
}
|
|
208
|
+
css `
|
|
209
|
+
:host {
|
|
210
|
+
display: flex;
|
|
211
|
+
flex-direction: column;
|
|
212
|
+
min-height: 0;
|
|
213
|
+
border: 1px solid var(--_border);
|
|
214
|
+
border-radius: 4px;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
background: var(--_surface);
|
|
217
|
+
}
|
|
218
|
+
:host([kind='query']) {
|
|
219
|
+
flex: none;
|
|
220
|
+
}
|
|
221
|
+
.editor {
|
|
222
|
+
flex: 1;
|
|
223
|
+
min-height: 0;
|
|
224
|
+
font-size: 14px;
|
|
225
|
+
}
|
|
226
|
+
.problem {
|
|
227
|
+
display: flex;
|
|
228
|
+
gap: 8px;
|
|
229
|
+
padding: 4px 8px;
|
|
230
|
+
font-size: 12px;
|
|
231
|
+
color: var(--_error);
|
|
232
|
+
background: color-mix(in srgb, var(--_error) 8%, transparent);
|
|
233
|
+
border-top: 1px solid color-mix(in srgb, var(--_error) 30%, transparent);
|
|
234
|
+
cursor: pointer;
|
|
235
|
+
}
|
|
236
|
+
.place {
|
|
237
|
+
font-weight: 600;
|
|
238
|
+
white-space: nowrap;
|
|
239
|
+
}
|
|
240
240
|
`,
|
|
241
241
|
]; }
|
|
242
242
|
}
|
|
@@ -112,43 +112,43 @@ export class Arg2pFlags extends LitElement {
|
|
|
112
112
|
const relevant = FLAG_GROUPS.filter(group => info === undefined || info.groups.includes(group.id));
|
|
113
113
|
const others = FLAG_GROUPS.filter(group => !relevant.includes(group));
|
|
114
114
|
const warnings = this.warnings();
|
|
115
|
-
return html `
|
|
116
|
-
<section class="profile">
|
|
117
|
-
<label class="row">
|
|
118
|
-
<span class="name">Profile</span>
|
|
119
|
-
<select
|
|
120
|
-
data-value=${profile.name}
|
|
121
|
-
?disabled=${profile.source === 'theory'}
|
|
122
|
-
@change=${(e) => this.change(withValues(this.flags, 'graphBuildMode', [e.target.value]))}
|
|
123
|
-
>
|
|
124
|
-
${PROFILES.map(it => html `<option value=${it.name} ?selected=${it.name === profile.name}>${it.label}</option>`)}
|
|
125
|
-
${info === undefined ? html `<option selected value=${profile.name}>${profile.name}</option>` : nothing}
|
|
126
|
-
</select>
|
|
127
|
-
${this.badge(profile.source)}
|
|
128
|
-
</label>
|
|
129
|
-
<p class="help">
|
|
130
|
-
${info?.help ?? 'A profile this version of the panel does not know.'}
|
|
131
|
-
${profile.source === 'theory' ? html `<br /><em>The theory states it: change it there.</em>` : nothing}
|
|
132
|
-
</p>
|
|
133
|
-
</section>
|
|
134
|
-
${warnings.length > 0 ? html `<ul class="warnings" role="alert">${warnings.map(it => html `<li>${it}</li>`)}</ul>` : nothing}
|
|
135
|
-
${relevant.map(group => this.group(group))}
|
|
115
|
+
return html `
|
|
116
|
+
<section class="profile">
|
|
117
|
+
<label class="row">
|
|
118
|
+
<span class="name">Profile</span>
|
|
119
|
+
<select
|
|
120
|
+
data-value=${profile.name}
|
|
121
|
+
?disabled=${profile.source === 'theory'}
|
|
122
|
+
@change=${(e) => this.change(withValues(this.flags, 'graphBuildMode', [e.target.value]))}
|
|
123
|
+
>
|
|
124
|
+
${PROFILES.map(it => html `<option value=${it.name} ?selected=${it.name === profile.name}>${it.label}</option>`)}
|
|
125
|
+
${info === undefined ? html `<option selected value=${profile.name}>${profile.name}</option>` : nothing}
|
|
126
|
+
</select>
|
|
127
|
+
${this.badge(profile.source)}
|
|
128
|
+
</label>
|
|
129
|
+
<p class="help">
|
|
130
|
+
${info?.help ?? 'A profile this version of the panel does not know.'}
|
|
131
|
+
${profile.source === 'theory' ? html `<br /><em>The theory states it: change it there.</em>` : nothing}
|
|
132
|
+
</p>
|
|
133
|
+
</section>
|
|
134
|
+
${warnings.length > 0 ? html `<ul class="warnings" role="alert">${warnings.map(it => html `<li>${it}</li>`)}</ul>` : nothing}
|
|
135
|
+
${relevant.map(group => this.group(group))}
|
|
136
136
|
${others.length > 0
|
|
137
|
-
? html `
|
|
138
|
-
<details class="others">
|
|
139
|
-
<summary>Other flags <span class="muted">(${others.map(it => it.title.toLowerCase()).join(', ')}: preset by the profile)</span></summary>
|
|
140
|
-
${others.map(group => this.group(group))}
|
|
141
|
-
</details>
|
|
137
|
+
? html `
|
|
138
|
+
<details class="others">
|
|
139
|
+
<summary>Other flags <span class="muted">(${others.map(it => it.title.toLowerCase()).join(', ')}: preset by the profile)</span></summary>
|
|
140
|
+
${others.map(group => this.group(group))}
|
|
141
|
+
</details>
|
|
142
142
|
`
|
|
143
|
-
: nothing}
|
|
143
|
+
: nothing}
|
|
144
144
|
`;
|
|
145
145
|
}
|
|
146
146
|
group(group) {
|
|
147
|
-
return html `
|
|
148
|
-
<fieldset class="group">
|
|
149
|
-
<legend>${group.title}</legend>
|
|
150
|
-
${group.flags.map(flag => this.flag(flag))}
|
|
151
|
-
</fieldset>
|
|
147
|
+
return html `
|
|
148
|
+
<fieldset class="group">
|
|
149
|
+
<legend>${group.title}</legend>
|
|
150
|
+
${group.flags.map(flag => this.flag(flag))}
|
|
151
|
+
</fieldset>
|
|
152
152
|
`;
|
|
153
153
|
}
|
|
154
154
|
flag(flag) {
|
|
@@ -161,52 +161,52 @@ export class Arg2pFlags extends LitElement {
|
|
|
161
161
|
control = html `<input id=${id} type="checkbox" .checked=${values.length > 0} ?disabled=${locked} @change=${(e) => this.set(flag, e.target.checked ? ['true'] : [])} />`;
|
|
162
162
|
}
|
|
163
163
|
else if (flag.kind === 'choice') {
|
|
164
|
-
control = html `
|
|
165
|
-
<select id=${id} data-value=${values[0] ?? ''} ?disabled=${locked} @change=${(e) => this.set(flag, [e.target.value])}>
|
|
166
|
-
${values.length === 0 ? html `<option selected disabled value="">none</option>` : nothing}
|
|
167
|
-
${flag.options.map(it => html `<option value=${it.value} title=${it.help} ?selected=${values[0] === it.value}>${it.label}</option>`)}
|
|
168
|
-
</select>
|
|
164
|
+
control = html `
|
|
165
|
+
<select id=${id} data-value=${values[0] ?? ''} ?disabled=${locked} @change=${(e) => this.set(flag, [e.target.value])}>
|
|
166
|
+
${values.length === 0 ? html `<option selected disabled value="">none</option>` : nothing}
|
|
167
|
+
${flag.options.map(it => html `<option value=${it.value} title=${it.help} ?selected=${values[0] === it.value}>${it.label}</option>`)}
|
|
168
|
+
</select>
|
|
169
169
|
`;
|
|
170
170
|
}
|
|
171
171
|
else if (flag.kind === 'set') {
|
|
172
|
-
control = html `
|
|
173
|
-
<div class="set" id=${id} role="group" aria-label=${flag.label}>
|
|
174
|
-
${flag.options.map(it => html `
|
|
175
|
-
<label title=${it.help}>
|
|
176
|
-
<input
|
|
177
|
-
type="checkbox"
|
|
178
|
-
value=${it.value}
|
|
179
|
-
.checked=${values.includes(it.value)}
|
|
180
|
-
?disabled=${locked}
|
|
172
|
+
control = html `
|
|
173
|
+
<div class="set" id=${id} role="group" aria-label=${flag.label}>
|
|
174
|
+
${flag.options.map(it => html `
|
|
175
|
+
<label title=${it.help}>
|
|
176
|
+
<input
|
|
177
|
+
type="checkbox"
|
|
178
|
+
value=${it.value}
|
|
179
|
+
.checked=${values.includes(it.value)}
|
|
180
|
+
?disabled=${locked}
|
|
181
181
|
@change=${(e) => {
|
|
182
182
|
const on = e.target.checked;
|
|
183
183
|
this.set(flag, on ? [...values.filter(v => v !== it.value), it.value] : values.filter(v => v !== it.value));
|
|
184
|
-
}}
|
|
185
|
-
/>
|
|
186
|
-
${it.label}
|
|
187
|
-
</label>
|
|
188
|
-
`)}
|
|
189
|
-
</div>
|
|
184
|
+
}}
|
|
185
|
+
/>
|
|
186
|
+
${it.label}
|
|
187
|
+
</label>
|
|
188
|
+
`)}
|
|
189
|
+
</div>
|
|
190
190
|
`;
|
|
191
191
|
}
|
|
192
192
|
else {
|
|
193
193
|
control = html `<input id=${id} type="text" placeholder=${flag.placeholder ?? ''} .value=${values[0] ?? ''} ?disabled=${locked} @change=${(e) => this.set(flag, [e.target.value])} />`;
|
|
194
194
|
}
|
|
195
195
|
const option = flag.options?.find(it => it.value === values[0]);
|
|
196
|
-
return html `
|
|
197
|
-
<div class="flag ${flag.kind}" data-flag=${flag.name}>
|
|
198
|
-
<div class="row">
|
|
199
|
-
<label class="name" for=${id} title=${flag.help}>${flag.label}</label>
|
|
200
|
-
${flag.kind === 'set' ? nothing : control}
|
|
201
|
-
${this.badge(source)}
|
|
202
|
-
${stated && !locked ? html `<button type="button" class="reset" title="Take the value of the profile again (remove it from the flags)" @click=${() => this.change(without(this.flags, flag.name))}>reset</button>` : nothing}
|
|
203
|
-
</div>
|
|
204
|
-
${flag.kind === 'set' ? control : nothing}
|
|
205
|
-
<p class="help">
|
|
206
|
-
${flag.kind === 'choice' && option !== undefined ? option.help : flag.help}
|
|
207
|
-
${stated && source === 'profile' ? html `<br /><em>The flags state its default, which the profile overrides: state it in the theory to keep it.</em>` : nothing}
|
|
208
|
-
</p>
|
|
209
|
-
</div>
|
|
196
|
+
return html `
|
|
197
|
+
<div class="flag ${flag.kind}" data-flag=${flag.name}>
|
|
198
|
+
<div class="row">
|
|
199
|
+
<label class="name" for=${id} title=${flag.help}>${flag.label}</label>
|
|
200
|
+
${flag.kind === 'set' ? nothing : control}
|
|
201
|
+
${this.badge(source)}
|
|
202
|
+
${stated && !locked ? html `<button type="button" class="reset" title="Take the value of the profile again (remove it from the flags)" @click=${() => this.change(without(this.flags, flag.name))}>reset</button>` : nothing}
|
|
203
|
+
</div>
|
|
204
|
+
${flag.kind === 'set' ? control : nothing}
|
|
205
|
+
<p class="help">
|
|
206
|
+
${flag.kind === 'choice' && option !== undefined ? option.help : flag.help}
|
|
207
|
+
${stated && source === 'profile' ? html `<br /><em>The flags state its default, which the profile overrides: state it in the theory to keep it.</em>` : nothing}
|
|
208
|
+
</p>
|
|
209
|
+
</div>
|
|
210
210
|
`;
|
|
211
211
|
}
|
|
212
212
|
badge(source) {
|
|
@@ -220,137 +220,137 @@ export class Arg2pFlags extends LitElement {
|
|
|
220
220
|
}
|
|
221
221
|
static { this.styles = [
|
|
222
222
|
tokens,
|
|
223
|
-
css `
|
|
224
|
-
:host {
|
|
225
|
-
display: block;
|
|
226
|
-
font-size: 13px;
|
|
227
|
-
}
|
|
228
|
-
.profile {
|
|
229
|
-
padding: 8px 0;
|
|
230
|
-
}
|
|
231
|
-
.row {
|
|
232
|
-
display: flex;
|
|
233
|
-
align-items: center;
|
|
234
|
-
gap: 8px;
|
|
235
|
-
}
|
|
236
|
-
/* a flag: its name, its control, where its value comes from, and the reset */
|
|
237
|
-
.flag .row {
|
|
238
|
-
display: grid;
|
|
239
|
-
grid-template-columns: minmax(7em, 10em) minmax(0, 1fr) auto auto;
|
|
240
|
-
}
|
|
241
|
-
.flag.set .row {
|
|
242
|
-
grid-template-columns: minmax(7em, 10em) auto auto 1fr;
|
|
243
|
-
}
|
|
244
|
-
.flag .row > select,
|
|
245
|
-
.flag .row > input[type='text'] {
|
|
246
|
-
min-width: 0;
|
|
247
|
-
width: 100%;
|
|
248
|
-
}
|
|
249
|
-
.flag .row > input[type='checkbox'] {
|
|
250
|
-
justify-self: start;
|
|
251
|
-
margin: 0;
|
|
252
|
-
}
|
|
253
|
-
.name {
|
|
254
|
-
font-weight: 600;
|
|
255
|
-
}
|
|
256
|
-
.profile select {
|
|
257
|
-
flex: 1;
|
|
258
|
-
min-width: 0;
|
|
259
|
-
}
|
|
260
|
-
select,
|
|
261
|
-
input[type='text'] {
|
|
262
|
-
font: inherit;
|
|
263
|
-
color: var(--_text);
|
|
264
|
-
background: var(--_surface);
|
|
265
|
-
border: 1px solid var(--_border);
|
|
266
|
-
border-radius: 4px;
|
|
267
|
-
padding: 2px 4px;
|
|
268
|
-
}
|
|
269
|
-
input[type='text'] {
|
|
270
|
-
font-family: var(--_mono);
|
|
271
|
-
}
|
|
272
|
-
select:disabled,
|
|
273
|
-
input:disabled {
|
|
274
|
-
opacity: 0.7;
|
|
275
|
-
}
|
|
276
|
-
.help {
|
|
277
|
-
margin: 2px 0 0 0;
|
|
278
|
-
color: var(--_muted);
|
|
279
|
-
font-size: 12px;
|
|
280
|
-
}
|
|
281
|
-
.group {
|
|
282
|
-
border: 1px solid var(--_border);
|
|
283
|
-
border-radius: 6px;
|
|
284
|
-
margin: 8px 0;
|
|
285
|
-
padding: 4px 10px 8px 10px;
|
|
286
|
-
}
|
|
287
|
-
legend {
|
|
288
|
-
font-weight: 600;
|
|
289
|
-
padding: 0 4px;
|
|
290
|
-
}
|
|
291
|
-
.flag {
|
|
292
|
-
padding: 6px 0;
|
|
293
|
-
}
|
|
294
|
-
.flag + .flag {
|
|
295
|
-
border-top: 1px dashed var(--_border);
|
|
296
|
-
}
|
|
297
|
-
.set {
|
|
298
|
-
display: flex;
|
|
299
|
-
flex-wrap: wrap;
|
|
300
|
-
gap: 4px 14px;
|
|
301
|
-
margin-top: 4px;
|
|
302
|
-
}
|
|
303
|
-
.set label {
|
|
304
|
-
display: inline-flex;
|
|
305
|
-
align-items: center;
|
|
306
|
-
gap: 4px;
|
|
307
|
-
}
|
|
308
|
-
.badge {
|
|
309
|
-
font-size: 10px;
|
|
310
|
-
text-transform: uppercase;
|
|
311
|
-
letter-spacing: 0.04em;
|
|
312
|
-
border-radius: 4px;
|
|
313
|
-
padding: 0 5px;
|
|
314
|
-
border: 1px solid var(--_border);
|
|
315
|
-
color: var(--_muted);
|
|
316
|
-
}
|
|
317
|
-
.badge.flags {
|
|
318
|
-
color: var(--_accent);
|
|
319
|
-
border-color: var(--_accent);
|
|
320
|
-
}
|
|
321
|
-
.badge.theory {
|
|
322
|
-
color: #ffffff;
|
|
323
|
-
background: var(--_accent);
|
|
324
|
-
border-color: var(--_accent);
|
|
325
|
-
}
|
|
326
|
-
.badge.profile {
|
|
327
|
-
border-style: dashed;
|
|
328
|
-
}
|
|
329
|
-
.reset {
|
|
330
|
-
font: inherit;
|
|
331
|
-
font-size: 11px;
|
|
332
|
-
color: var(--_muted);
|
|
333
|
-
background: none;
|
|
334
|
-
border: none;
|
|
335
|
-
text-decoration: underline;
|
|
336
|
-
cursor: pointer;
|
|
337
|
-
padding: 0;
|
|
338
|
-
}
|
|
339
|
-
.warnings {
|
|
340
|
-
margin: 4px 0;
|
|
341
|
-
padding: 6px 10px 6px 24px;
|
|
342
|
-
border-left: 3px solid var(--_no);
|
|
343
|
-
background: color-mix(in srgb, var(--_no) 12%, transparent);
|
|
344
|
-
border-radius: 4px;
|
|
345
|
-
}
|
|
346
|
-
.others summary {
|
|
347
|
-
cursor: pointer;
|
|
348
|
-
padding: 6px 0;
|
|
349
|
-
}
|
|
350
|
-
.muted {
|
|
351
|
-
color: var(--_muted);
|
|
352
|
-
font-size: 12px;
|
|
353
|
-
}
|
|
223
|
+
css `
|
|
224
|
+
:host {
|
|
225
|
+
display: block;
|
|
226
|
+
font-size: 13px;
|
|
227
|
+
}
|
|
228
|
+
.profile {
|
|
229
|
+
padding: 8px 0;
|
|
230
|
+
}
|
|
231
|
+
.row {
|
|
232
|
+
display: flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: 8px;
|
|
235
|
+
}
|
|
236
|
+
/* a flag: its name, its control, where its value comes from, and the reset */
|
|
237
|
+
.flag .row {
|
|
238
|
+
display: grid;
|
|
239
|
+
grid-template-columns: minmax(7em, 10em) minmax(0, 1fr) auto auto;
|
|
240
|
+
}
|
|
241
|
+
.flag.set .row {
|
|
242
|
+
grid-template-columns: minmax(7em, 10em) auto auto 1fr;
|
|
243
|
+
}
|
|
244
|
+
.flag .row > select,
|
|
245
|
+
.flag .row > input[type='text'] {
|
|
246
|
+
min-width: 0;
|
|
247
|
+
width: 100%;
|
|
248
|
+
}
|
|
249
|
+
.flag .row > input[type='checkbox'] {
|
|
250
|
+
justify-self: start;
|
|
251
|
+
margin: 0;
|
|
252
|
+
}
|
|
253
|
+
.name {
|
|
254
|
+
font-weight: 600;
|
|
255
|
+
}
|
|
256
|
+
.profile select {
|
|
257
|
+
flex: 1;
|
|
258
|
+
min-width: 0;
|
|
259
|
+
}
|
|
260
|
+
select,
|
|
261
|
+
input[type='text'] {
|
|
262
|
+
font: inherit;
|
|
263
|
+
color: var(--_text);
|
|
264
|
+
background: var(--_surface);
|
|
265
|
+
border: 1px solid var(--_border);
|
|
266
|
+
border-radius: 4px;
|
|
267
|
+
padding: 2px 4px;
|
|
268
|
+
}
|
|
269
|
+
input[type='text'] {
|
|
270
|
+
font-family: var(--_mono);
|
|
271
|
+
}
|
|
272
|
+
select:disabled,
|
|
273
|
+
input:disabled {
|
|
274
|
+
opacity: 0.7;
|
|
275
|
+
}
|
|
276
|
+
.help {
|
|
277
|
+
margin: 2px 0 0 0;
|
|
278
|
+
color: var(--_muted);
|
|
279
|
+
font-size: 12px;
|
|
280
|
+
}
|
|
281
|
+
.group {
|
|
282
|
+
border: 1px solid var(--_border);
|
|
283
|
+
border-radius: 6px;
|
|
284
|
+
margin: 8px 0;
|
|
285
|
+
padding: 4px 10px 8px 10px;
|
|
286
|
+
}
|
|
287
|
+
legend {
|
|
288
|
+
font-weight: 600;
|
|
289
|
+
padding: 0 4px;
|
|
290
|
+
}
|
|
291
|
+
.flag {
|
|
292
|
+
padding: 6px 0;
|
|
293
|
+
}
|
|
294
|
+
.flag + .flag {
|
|
295
|
+
border-top: 1px dashed var(--_border);
|
|
296
|
+
}
|
|
297
|
+
.set {
|
|
298
|
+
display: flex;
|
|
299
|
+
flex-wrap: wrap;
|
|
300
|
+
gap: 4px 14px;
|
|
301
|
+
margin-top: 4px;
|
|
302
|
+
}
|
|
303
|
+
.set label {
|
|
304
|
+
display: inline-flex;
|
|
305
|
+
align-items: center;
|
|
306
|
+
gap: 4px;
|
|
307
|
+
}
|
|
308
|
+
.badge {
|
|
309
|
+
font-size: 10px;
|
|
310
|
+
text-transform: uppercase;
|
|
311
|
+
letter-spacing: 0.04em;
|
|
312
|
+
border-radius: 4px;
|
|
313
|
+
padding: 0 5px;
|
|
314
|
+
border: 1px solid var(--_border);
|
|
315
|
+
color: var(--_muted);
|
|
316
|
+
}
|
|
317
|
+
.badge.flags {
|
|
318
|
+
color: var(--_accent);
|
|
319
|
+
border-color: var(--_accent);
|
|
320
|
+
}
|
|
321
|
+
.badge.theory {
|
|
322
|
+
color: #ffffff;
|
|
323
|
+
background: var(--_accent);
|
|
324
|
+
border-color: var(--_accent);
|
|
325
|
+
}
|
|
326
|
+
.badge.profile {
|
|
327
|
+
border-style: dashed;
|
|
328
|
+
}
|
|
329
|
+
.reset {
|
|
330
|
+
font: inherit;
|
|
331
|
+
font-size: 11px;
|
|
332
|
+
color: var(--_muted);
|
|
333
|
+
background: none;
|
|
334
|
+
border: none;
|
|
335
|
+
text-decoration: underline;
|
|
336
|
+
cursor: pointer;
|
|
337
|
+
padding: 0;
|
|
338
|
+
}
|
|
339
|
+
.warnings {
|
|
340
|
+
margin: 4px 0;
|
|
341
|
+
padding: 6px 10px 6px 24px;
|
|
342
|
+
border-left: 3px solid var(--_no);
|
|
343
|
+
background: color-mix(in srgb, var(--_no) 12%, transparent);
|
|
344
|
+
border-radius: 4px;
|
|
345
|
+
}
|
|
346
|
+
.others summary {
|
|
347
|
+
cursor: pointer;
|
|
348
|
+
padding: 6px 0;
|
|
349
|
+
}
|
|
350
|
+
.muted {
|
|
351
|
+
color: var(--_muted);
|
|
352
|
+
font-size: 12px;
|
|
353
|
+
}
|
|
354
354
|
`,
|
|
355
355
|
]; }
|
|
356
356
|
}
|