From f856e68ea822b6e7534b439bd665615e96109a49 Mon Sep 17 00:00:00 2001 From: Falknat Date: Fri, 16 Jan 2026 10:22:32 +0700 Subject: [PATCH] =?UTF-8?q?=D0=9C=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D1=84=D1=80=D0=BE=D0=BD=D1=82?= =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Улучшены окна подтверждений --- front_vue/src/components/ConfirmDialog.vue | 51 ++++++++++++---------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/front_vue/src/components/ConfirmDialog.vue b/front_vue/src/components/ConfirmDialog.vue index 4674210..600f76a 100644 --- a/front_vue/src/components/ConfirmDialog.vue +++ b/front_vue/src/components/ConfirmDialog.vue @@ -121,8 +121,7 @@ const handleDiscard = () => { .dialog-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(4px); + background: var(--bg-body); display: flex; align-items: center; justify-content: center; @@ -130,39 +129,44 @@ const handleDiscard = () => { } .dialog { - background: var(--bg-secondary); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - padding: 32px; - max-width: 420px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; text-align: center; - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); + width: 100%; + height: 100%; + padding: 24px; } .dialog h3 { - margin: 0 0 12px; - font-size: 20px; + margin: 0 0 16px; + font-size: 24px; font-weight: 600; color: var(--text-primary); } .dialog p { - margin: 0 0 24px; - font-size: 14px; + margin: 0 0 48px; + font-size: 16px; color: var(--text-muted); line-height: 1.5; + max-width: 320px; } .dialog-buttons { display: flex; + flex-direction: column; gap: 12px; - justify-content: center; + width: 100%; + max-width: 320px; } .dialog-buttons button { - padding: 10px 20px; - border-radius: 8px; - font-size: 14px; + width: 100%; + padding: 16px 24px; + border-radius: 12px; + font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; @@ -223,8 +227,8 @@ const handleDiscard = () => { .btn-loader { display: inline-block; - width: 16px; - height: 16px; + width: 18px; + height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: currentColor; border-radius: 50%; @@ -240,12 +244,12 @@ const handleDiscard = () => { /* Transition */ .dialog-enter-active, .dialog-leave-active { - transition: all 0.2s ease; + transition: opacity 0.25s ease; } .dialog-enter-active .dialog, .dialog-leave-active .dialog { - transition: transform 0.2s ease; + transition: transform 0.25s ease; } .dialog-enter-from, @@ -253,8 +257,11 @@ const handleDiscard = () => { opacity: 0; } -.dialog-enter-from .dialog, +.dialog-enter-from .dialog { + transform: translateY(20px); +} + .dialog-leave-to .dialog { - transform: scale(0.95); + transform: translateY(-20px); }