fs
6ea3c2b88c
Add three reusable size tier classes (app-dialog-sm, app-dialog-md, app-dialog-lg) to base dialog CSS, replacing per-variant max-width rules. Each tier uses width: min(Xrem, calc(100vw - 2rem)) for consistent fixed widths with responsive mobile fallback. - Confirm dialog + session warning: app-dialog-sm (24rem) - Bookmark + bookmark group dialog: app-dialog-md (32rem) - Remove max-width from app-confirm-dialog.css and app-bookmark-form.css Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.1 KiB
CSS
42 lines
1.1 KiB
CSS
@layer components {
|
|
/* Confirm dialog — modal overlay for destructive action confirmation with danger/warning variants. */
|
|
dialog[data-app-confirm-dialog] > article.app-confirm-dialog > header {
|
|
position: relative;
|
|
padding-inline-end: 2rem;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] > article.app-confirm-dialog > header h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] [data-app-confirm-close].close {
|
|
position: absolute;
|
|
inset-inline-end: 1rem;
|
|
inset-block-start: 1rem;
|
|
float: none;
|
|
margin: 0;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] [data-app-confirm-message] {
|
|
margin-bottom: 0.5rem;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] [data-app-confirm-note] {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] footer {
|
|
padding: 10px;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog][data-confirm-variant="danger"] > article {
|
|
border-top: 3px solid var(--app-del-color, #b42318);
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog][data-confirm-variant="warning"] > article {
|
|
border-top: 3px solid var(--app-warning-color, #b54708);
|
|
}
|
|
}
|