5d3f392cd3
Controls committed on blur, which turned leaving a field into a durable, revision-fenced document write the user could neither preview nor undo, and silently discarded a draft the field did not accept. A card's form now owns the staged text every control renders, and Save is the only point where drafts become writes. Reset stages the composed default the same way; an invalid draft blocks the save with its reason instead of being dropped; Discard drops the drafts; a collapsed card marks that it holds some. The Host stays the only authority on whether a value was accepted, so the save reads the section back and keeps the drafts of a save that did not land.
114 lines
1.9 KiB
CSS
114 lines
1.9 KiB
CSS
/* Plugin configuration fields: label, control, override badge, and hint. */
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.field + .field {
|
|
border-top: 1px solid var(--dsw-alias-border-l2);
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.badges {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.badge {
|
|
border-radius: 999px;
|
|
padding: 1px 8px;
|
|
font-size: 11px;
|
|
line-height: 17px;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
background: var(--dsw-alias-bg-module-platform);
|
|
color: var(--dsw-alias-label-secondary);
|
|
}
|
|
|
|
.badgeMuted {
|
|
border-radius: 999px;
|
|
padding: 1px 8px;
|
|
font-size: 11px;
|
|
line-height: 17px;
|
|
white-space: nowrap;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|
|
|
|
.reset {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--dsw-alias-label-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reset:hover:not(:disabled) {
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.reset:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.input {
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--dsw-alias-border-l2);
|
|
border-radius: 8px;
|
|
background: var(--dsw-alias-bg-layer-3);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: var(--dsw-alias-label-primary);
|
|
}
|
|
|
|
.input:focus-visible {
|
|
outline: none;
|
|
border-color: var(--dsw-alias-brand-primary);
|
|
}
|
|
|
|
.input:disabled {
|
|
color: var(--dsw-alias-label-tertiary);
|
|
cursor: default;
|
|
}
|
|
|
|
.inputInvalid {
|
|
composes: input;
|
|
border-color: var(--dsw-alias-label-error);
|
|
}
|
|
|
|
.invalid {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--dsw-alias-label-error);
|
|
}
|
|
|
|
.hint {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--dsw-alias-label-tertiary);
|
|
}
|