Add shared critical confirmation popup for destructive actions
This commit is contained in:
@@ -1132,7 +1132,6 @@ p {
|
||||
.client-local-rule > button:last-child:focus-visible,
|
||||
.client-local-rule-add:focus-visible,
|
||||
.client-local-rules-save:focus-visible,
|
||||
.client-local-rules-discard button:focus-visible,
|
||||
.client-local-rules-actions button:focus-visible {
|
||||
outline: 0;
|
||||
color: var(--client-accent);
|
||||
@@ -1203,39 +1202,6 @@ p {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.client-local-rules-discard {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: var(--client-muted);
|
||||
font-size: 9px;
|
||||
line-height: 1.55;
|
||||
animation: client-local-rules-notice 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.client-local-rules-discard strong {
|
||||
color: oklch(0.68 0.15 28);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.client-local-rules-discard div {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.client-local-rules-discard button {
|
||||
padding: 4px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.client-local-rules-discard .is-danger {
|
||||
color: oklch(0.68 0.15 28);
|
||||
}
|
||||
|
||||
.client-local-rules-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -1888,90 +1854,142 @@ p {
|
||||
transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-form.is-confirming-delete .client-form-content {
|
||||
opacity: 0;
|
||||
filter: blur(8px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.client-delete-confirmation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
min-height: 250px;
|
||||
.client-confirmation-popup {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 12px;
|
||||
padding: 34px;
|
||||
border-radius: 20px;
|
||||
background: color-mix(in oklch, var(--client-panel) 88%, transparent);
|
||||
box-shadow: 0 20px 54px oklch(0.08 0.015 145 / 0.12);
|
||||
backdrop-filter: blur(16px);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: client-delete-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background: color-mix(in oklch, var(--client-bg) 76%, transparent);
|
||||
-webkit-backdrop-filter: blur(0);
|
||||
backdrop-filter: blur(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 260ms ease, -webkit-backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 520ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 520ms;
|
||||
}
|
||||
|
||||
.client-delete-confirmation > span {
|
||||
color: oklch(0.68 0.15 28);
|
||||
font-size: 10px;
|
||||
.client-confirmation-popup.is-open {
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(18px);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.client-confirmation-dialog {
|
||||
width: min(430px, calc(100vw - 48px));
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 32px 34px;
|
||||
background: color-mix(in oklch, var(--client-bg) 82%, transparent);
|
||||
box-shadow: 0 0 86px color-mix(in oklch, var(--client-bg) 86%, transparent);
|
||||
color: var(--client-text);
|
||||
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
opacity: 0;
|
||||
filter: blur(18px);
|
||||
transform: scale(0.9);
|
||||
transition: opacity 300ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-confirmation-popup.is-open .client-confirmation-dialog {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: scale(1);
|
||||
transition-delay: 90ms;
|
||||
}
|
||||
|
||||
.client-confirmation-dialog > * {
|
||||
opacity: 0;
|
||||
filter: blur(7px);
|
||||
transform: translateY(7px);
|
||||
transition: opacity 260ms ease, filter 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-confirmation-popup.is-open .client-confirmation-kicker {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
transition-delay: 170ms;
|
||||
}
|
||||
|
||||
.client-confirmation-popup.is-open .client-confirmation-dialog h2 {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
transition-delay: 210ms;
|
||||
}
|
||||
|
||||
.client-confirmation-popup.is-open .client-confirmation-dialog p {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
transition-delay: 270ms;
|
||||
}
|
||||
|
||||
.client-confirmation-popup.is-open .client-confirmation-actions {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
transform: translateY(0);
|
||||
transition-delay: 330ms;
|
||||
}
|
||||
|
||||
.client-confirmation-kicker {
|
||||
color: var(--client-muted);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.client-delete-confirmation h2 {
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.04em;
|
||||
.client-confirmation-dialog h2 {
|
||||
color: oklch(0.68 0.15 28);
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.client-delete-confirmation p {
|
||||
.client-confirmation-dialog p {
|
||||
max-width: 54ch;
|
||||
color: var(--client-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.client-delete-actions {
|
||||
.client-confirmation-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
gap: 18px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.client-delete-actions button {
|
||||
padding: 10px 14px;
|
||||
.client-confirmation-actions button {
|
||||
padding: 6px 0;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: color-mix(in oklch, var(--client-control) 74%, transparent);
|
||||
background: transparent;
|
||||
color: var(--client-text);
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: color 220ms ease, background 220ms ease, transform 220ms ease;
|
||||
transition: color 200ms ease, filter 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-delete-actions button:hover:not(:disabled),
|
||||
.client-delete-actions button:focus-visible {
|
||||
.client-confirmation-actions button:hover:not(:disabled),
|
||||
.client-confirmation-actions button:focus-visible {
|
||||
outline: none;
|
||||
background: var(--client-control);
|
||||
filter: drop-shadow(0 0 7px currentColor);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.client-delete-actions .is-danger {
|
||||
.client-confirmation-actions .is-danger {
|
||||
color: oklch(0.68 0.15 28);
|
||||
}
|
||||
|
||||
.client-delete-actions button:disabled {
|
||||
opacity: 0.45;
|
||||
.client-confirmation-actions button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
@keyframes client-delete-reveal {
|
||||
from { opacity: 0; filter: blur(8px); transform: translate(-50%, -48%) scale(0.97); }
|
||||
to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
|
||||
}
|
||||
|
||||
.client-form.is-waiting {
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
@@ -2882,7 +2900,6 @@ p {
|
||||
.client-local-rule-add-slot > span,
|
||||
.client-local-rules-save,
|
||||
.client-local-rules-runtime,
|
||||
.client-local-rules-discard,
|
||||
.client-local-rules-actions button {
|
||||
transition: none;
|
||||
animation: none;
|
||||
@@ -2907,8 +2924,10 @@ p {
|
||||
}
|
||||
|
||||
.client-form-content,
|
||||
.client-delete-confirmation,
|
||||
.client-delete-actions button,
|
||||
.client-confirmation-popup,
|
||||
.client-confirmation-dialog,
|
||||
.client-confirmation-dialog > *,
|
||||
.client-confirmation-actions button,
|
||||
.client-subscription-delete .client-trash-lid {
|
||||
transition: none;
|
||||
animation: none;
|
||||
|
||||
Reference in New Issue
Block a user