59 lines
1.4 KiB
CSS
59 lines
1.4 KiB
CSS
@layer components {
|
|
dialog[data-app-confirm-dialog] > article.app-confirm-dialog {
|
|
max-width: 32rem;
|
|
}
|
|
|
|
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 {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 10px;
|
|
}
|
|
|
|
dialog[data-app-confirm-dialog] footer button {
|
|
margin: 0;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
dialog[data-app-confirm-dialog] footer {
|
|
flex-direction: column-reverse;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
}
|