54 lines
2.0 KiB
CSS
54 lines
2.0 KiB
CSS
.ui-dialog { position: fixed; inset: 0; z-index: 9999; display: none; }
|
|
.ui-dialog.is-open { display: block; }
|
|
|
|
.ui-dialog__backdrop {
|
|
position: absolute; inset: 0;
|
|
background: rgba(0,0,0,.55);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.ui-dialog__panel {
|
|
position: relative;
|
|
width: min(520px, calc(100% - 32px));
|
|
margin: 12vh auto 0;
|
|
background: #111;
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,.55);
|
|
overflow: hidden;
|
|
}
|
|
.ui-dialog { position: fixed; inset: 0; z-index: 200000; display: none; }
|
|
.ui-dialog__header { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.10); }
|
|
.ui-dialog__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
|
|
.ui-dialog__x {
|
|
width: 36px; height: 36px; border: 0; background: transparent; color: rgba(255,255,255,.8);
|
|
font-size: 22px; cursor: pointer; border-radius: 10px;
|
|
}
|
|
.ui-dialog__x:hover { background: rgba(255,255,255,.08); }
|
|
|
|
.ui-dialog__body { padding: 16px; }
|
|
.ui-dialog__message { margin: 0; white-space: pre-line; line-height: 1.6; color: rgba(255,255,255,.92); }
|
|
|
|
.ui-dialog__footer { display:flex; gap: 10px; justify-content:flex-end; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.10); }
|
|
|
|
.ui-dialog__btn {
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255,.16);
|
|
background: rgba(255,255,255,.06);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
.ui-dialog__btn:hover { background: rgba(255,255,255,.10); }
|
|
|
|
.ui-dialog__btn--ok { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.45); }
|
|
.ui-dialog__btn--ok:hover { background: rgba(99,102,241,.30); }
|
|
|
|
.ui-dialog__btn--danger { background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.45); }
|
|
.ui-dialog__btn--danger:hover { background: rgba(239,68,68,.28); }
|
|
|
|
.ui-dialog__btn[disabled] { opacity: .6; cursor: not-allowed; }
|
|
|