diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 3e7c51e..b7e6266 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -3190,13 +3190,6 @@ button { line-height: 1.4; } -.banking-sheet__content .banking-form-error { - margin: 10px 3px 0; - color: #ff8b98; - font-size: 11px; - line-height: 1.4; -} - .banking-sheet__content > button:last-child { margin-top: 15px; } diff --git a/frontend/src/views/apps/BankingApp.vue b/frontend/src/views/apps/BankingApp.vue index 46c4ce4..d5a11e8 100644 --- a/frontend/src/views/apps/BankingApp.vue +++ b/frontend/src/views/apps/BankingApp.vue @@ -578,7 +578,7 @@ onBeforeUnmount(() => { {{ phone.t(`Apps.banking.forms.${action}.title`) }}

{{ phone.t(`Apps.banking.forms.${action}.body`) }}

- + {

{{ phone.t('Apps.banking.noContacts') }}

- { - + {{ toastText }} @@ -583,11 +580,18 @@ onBeforeUnmount(() => { --house-panel: rgb(255 255 255/0.84); --house-text: #161619; --house-muted: #72727a; + position: absolute; + inset: 0; + overflow: hidden; + isolation: isolate; background: radial-gradient(circle at 15% 4%, #ffd39b 0, transparent 32%), linear-gradient(165deg, #f4e9dd 0, #f3f3f7 47%, #e8edf3 100%); color: var(--house-text); } +.house-toast { + pointer-events: none; +} :global(.phone-app.dark .house-page) { --house-bg: #101114; --house-panel: rgb(39 39 43/0.78); @@ -598,11 +602,21 @@ onBeforeUnmount(() => { linear-gradient(165deg, #26201d 0, #111216 48%, #171d25 100%); } .house-navbar { + --k-safe-area-top: 46px; --k-navbar-bg-color: transparent; + position: absolute; + z-index: 5; + top: 0; + right: 0; + left: 0; + background: transparent !important; +} +.house-navbar::after { + opacity: 0; } .house-scroll { - position: relative; - height: 100%; + position: absolute; + inset: 104px 0 25px; padding: 9px 13px 34px; overflow-x: hidden; overflow-y: auto; @@ -626,7 +640,8 @@ onBeforeUnmount(() => { opacity: 1; } .house-state { - height: 100%; + position: absolute; + inset: 104px 0 25px; padding: 30px; display: flex; flex-direction: column; @@ -742,11 +757,7 @@ onBeforeUnmount(() => { text-align: left; box-shadow: 0 8px 20px #24252b12; cursor: pointer; - transition: - border-color 140ms ease, - background-color 140ms ease, - box-shadow 140ms ease, - opacity 100ms ease; + transition: opacity 100ms ease; } :global(.phone-app.dark .house-property) { border-color: #ffffff12; @@ -835,35 +846,35 @@ onBeforeUnmount(() => { font-size: 8px; text-align: center; } -.house-detail-sheet, -.house-candidates-sheet { +:global(.house-detail-sheet), +:global(.house-candidates-sheet) { --k-sheet-bg-color: var(--house-bg); height: 88%; overflow: hidden; border-radius: 28px 28px 0 0; } .house-detail { + position: relative; height: 100%; padding: 18px 14px 40px; overflow-y: auto; text-align: center; } .house-detail__close { - position: absolute; + position: sticky; z-index: 2; - top: 13px; - right: 14px; + top: 0; width: 32px; height: 32px; + margin: 0 0 -32px auto; border-radius: 50%; display: grid; place-items: center; - background: var(--house-panel); } .house-detail__mark { width: 83px; height: 83px; - margin: 9px auto 8px; + margin: 45px auto 8px; border-radius: 27px; display: grid; place-items: center; @@ -902,6 +913,7 @@ onBeforeUnmount(() => { --k-button-bg-color: var(--house-accent); width: 100%; margin-bottom: 18px; + gap: 6px; } .house-detail h3 { margin: 0 0 8px; @@ -924,14 +936,11 @@ onBeforeUnmount(() => { padding: 12px; background: var(--house-panel); color: var(--house-text); - font-size: 10px; + font-size: 13px; + line-height: 1.2; font-weight: 800; cursor: pointer; - transition: - border-color 140ms ease, - background-color 140ms ease, - box-shadow 140ms ease, - opacity 100ms ease; + transition: opacity 100ms ease; } .house-actions svg { color: var(--house-accent); @@ -940,18 +949,6 @@ onBeforeUnmount(() => { cursor: default; opacity: 0.42; } -@media (hover: hover) and (pointer: fine) { - .house-property:hover, - .house-actions button:not(:disabled):hover { - border-color: #f47a3870; - background-color: rgb(255 255 255/0.94); - box-shadow: 0 10px 24px #7b3a1c1c; - } - :global(.phone-app.dark .house-property:hover), - :global(.phone-app.dark .house-actions button:not(:disabled):hover) { - background-color: rgb(49 45 44/0.96); - } -} .house-property:active, .house-actions button:not(:disabled):active { opacity: 0.78; @@ -974,10 +971,12 @@ onBeforeUnmount(() => { } .house-keys header small { color: var(--house-muted); - font-size: 8px; + font-size: 10px; + line-height: 1.2; } .house-keys header strong { - font-size: 14px; + font-size: 17px; + line-height: 1.2; } .house-keys__empty { padding: 18px;