diff --git a/src/app/pages/create-page/create-page.scss b/src/app/pages/create-page/create-page.scss index 28efa9c..4f8a7ac 100644 --- a/src/app/pages/create-page/create-page.scss +++ b/src/app/pages/create-page/create-page.scss @@ -6,10 +6,10 @@ .back { position: absolute; - top: 18px; - left: 18px; - width: 38px; - height: 38px; + top: 14px; + left: 14px; + width: 44px; + height: 44px; border-radius: 50%; display: inline-flex; align-items: center; @@ -44,6 +44,10 @@ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; + + @media (max-width: 360px) { + gap: 6px; + } } .method { @@ -57,6 +61,13 @@ background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .1s, box-shadow .15s; + -webkit-appearance: none; + font-family: inherit; + + @media (max-width: 360px) { + height: 52px; + padding: 6px; + } &__logo { max-width: 100%; @@ -102,16 +113,17 @@ align-items: center; gap: 6px; padding: 0 14px; - height: 38px; + height: 44px; border-radius: 999px; border: 2px solid #e2e8f0; background: #f8fafc; color: #475569; font-family: inherit; - font-size: 13px; + font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; + -webkit-appearance: none; &__flag { font-size: 16px; line-height: 1; } &__sign { diff --git a/src/app/pages/fastcheck-page/fastcheck-page.scss b/src/app/pages/fastcheck-page/fastcheck-page.scss index 17294fb..5b5717b 100644 --- a/src/app/pages/fastcheck-page/fastcheck-page.scss +++ b/src/app/pages/fastcheck-page/fastcheck-page.scss @@ -14,6 +14,7 @@ justify-content: center; padding: 0 16px; height: 48px; + min-width: 64px; border-radius: 12px; font-size: 14px; font-weight: 700; @@ -23,6 +24,7 @@ font-family: inherit; white-space: nowrap; transition: opacity .15s, transform .1s, background .15s; + -webkit-appearance: none; &--ghost { background: #f1f5f9; @@ -69,6 +71,8 @@ justify-content: center; padding: 16px; animation: fade-in .15s ease-out; + overflow-y: auto; + -webkit-overflow-scrolling: touch; @media (max-width: 480px) { align-items: flex-end; @@ -85,29 +89,32 @@ text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25); animation: pop-in .2s ease-out; + margin: auto; @media (max-width: 480px) { max-width: 100%; border-radius: 24px 24px 0 0; - padding: 24px 20px 32px; + padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); + margin: auto 0 0; } } &__close { position: absolute; - top: 10px; - right: 12px; - width: 36px; - height: 36px; + top: 8px; + right: 8px; + width: 44px; + height: 44px; border-radius: 50%; border: none; background: #f1f5f9; color: #475569; - font-size: 22px; + font-size: 24px; line-height: 1; cursor: pointer; font-family: inherit; transition: background .15s; + -webkit-appearance: none; &:hover { background: #e2e8f0; } } @@ -155,10 +162,11 @@ padding: 12px; width: 264px; height: 264px; + max-width: 100%; margin: 0 auto; - @media (max-width: 360px) { - width: 100%; + @media (max-width: 380px) { + width: min(264px, 70vw); height: auto; aspect-ratio: 1; } @@ -179,18 +187,21 @@ .tg-link { display: inline-flex; align-items: center; + justify-content: center; gap: 8px; margin-top: 16px; - padding: 12px 20px; + padding: 14px 22px; + min-height: 48px; border-radius: 12px; background: #229ED9; color: #fff; - font-size: 14px; + font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .15s; &:hover { opacity: .9; } + &:active { transform: scale(.97); } } @keyframes fade-in { diff --git a/src/index.html b/src/index.html index ec6b43a..bb037d9 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@