UI polishes, file chooser

This commit is contained in:
2026-06-10 14:09:50 +02:00
parent 1f34435893
commit 4544a89443
13 changed files with 357 additions and 115 deletions

View File

@@ -829,3 +829,92 @@
.recipient-editor-table td:nth-child(2) { min-width: 300px; }
.recipient-address-stack { min-width: 260px; }
}
/* Attachment file chooser panel embedded in the shared rules editor. */
.attachment-rules-editor {
display: grid;
gap: 12px;
min-width: 0;
}
.attachment-rules-editor.has-file-browser {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
align-items: start;
}
.attachment-rules-main {
min-width: 0;
}
.attachment-rules-table tr.is-choosing-file td {
background: var(--panel-soft);
}
.attachment-rules-footer-actions {
margin-top: 12px;
}
.attachment-file-browser-panel {
display: grid;
gap: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel-soft);
padding: 14px;
min-width: 0;
}
.attachment-file-browser-header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: start;
}
.attachment-file-browser-header h3 {
margin: 0 0 4px;
font-size: 15px;
}
.attachment-file-browser-list {
display: grid;
gap: 8px;
}
.attachment-file-browser-list .btn {
justify-content: flex-start;
text-align: left;
white-space: normal;
}
.attachment-file-browser-actions {
justify-content: flex-end;
}
@media (max-width: 1100px) {
.attachment-rules-editor.has-file-browser {
grid-template-columns: 1fr;
}
}
/* Chooser-backed readonly fields: legible, clickable display values without a text caret. */
.chooser-display-input,
.field-with-action input.chooser-display-input {
background: var(--panel-soft);
border-color: var(--line-dark);
color: var(--ink);
cursor: pointer;
caret-color: transparent;
user-select: none;
}
.chooser-display-input:hover,
.field-with-action input.chooser-display-input:hover {
background: var(--panel);
border-color: var(--accent);
}
.chooser-display-input:focus,
.field-with-action input.chooser-display-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(239, 107, 58, .16);
}
.chooser-display-input:disabled,
.field-with-action input.chooser-display-input:disabled {
background: var(--panel-soft);
border-color: var(--line);
color: var(--muted);
cursor: not-allowed;
opacity: 1;
}