settings: make the user and audit-log dialogs opaque
The Add User dialog was see-through over its own overlay in dark mode. Both it and the audit-log detail dialog set background: var(--bg-card), which is translucent in dark mode - frontend/CLAUDE.md already names this trap and says a modal panel must use var(--bg-card-solid). The shared Modal.vue and the .modal rule in style.css were already correct; these two hand-rolled panels were not. Audited every modal-ish panel in the app while here. The remaining var(--bg-card) uses are correct and deliberate: .relationships-section and .permission-category are cards, and the audit-log .filters rules are form controls - translucency is the intended look on all of them. One more was worth changing: the warranty asset-search dropdown floats above the form INSIDE a modal, so a translucent panel let the fields show through the suggestions. That one is now solid too.
This commit is contained in:
@@ -319,7 +319,8 @@ onMounted(loadLogs)
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-card);
|
||||
/* SOLID, not var(--bg-card) - translucent in dark mode over the overlay. */
|
||||
background: var(--bg-card-solid);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
min-width: 500px;
|
||||
|
||||
@@ -636,7 +636,9 @@ onMounted(loadData)
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-card);
|
||||
/* SOLID, not var(--bg-card): the card variable is translucent in dark mode,
|
||||
which left this dialog see-through over its own overlay. */
|
||||
background: var(--bg-card-solid);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
width: 500px;
|
||||
|
||||
Reference in New Issue
Block a user