diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index f83f47a..be25b6a 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -68,7 +68,7 @@ - Вернуться на главную + Вернуться
@@ -379,8 +379,8 @@ const handleLogin = async () => { .back-link { position: absolute; - top: 20px; - left: 20px; + top: 10px; + left: 10px; color: white; text-decoration: none; display: flex; @@ -389,10 +389,16 @@ const handleLogin = async () => { font-weight: 500; transition: all 0.3s ease; z-index: 10; + font-size: 0.9rem; + padding: 6px 10px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50px; + backdrop-filter: blur(5px); } .back-link:hover { transform: translateX(-5px); + background-color: rgba(255, 255, 255, 0.2); } .wave-container { @@ -461,133 +467,135 @@ const handleLogin = async () => { } @media (max-width: 576px) { - .auth-bg { - padding: 1.5rem 1rem 3rem; - } - - .login-card { - padding: 2rem 1.5rem; - margin-top: 1rem; - } - - .form-group { + .brand-logo { + font-size: 1.8rem; + margin-top: 2.5rem; margin-bottom: 1.2rem; } - - .form-group label { - font-size: 0.95rem; + + .login-card { + width: 94%; + padding: 1.5rem 1.2rem; + margin-top: 0; } - .brand-logo { - margin-top: 2.5rem; + .login-header h2 { + font-size: 1.6rem; + } + + .login-header p { + font-size: 0.9rem; } } @media (max-width: 480px) { - .login-card { - padding: 1.8rem 1.2rem; - } - - .login-header h2 { - font-size: 1.5rem; - } - - .login-header p { - font-size: 0.95rem; - margin-bottom: 0.3rem; - } - .brand-logo { - font-size: 1.8rem; - margin-bottom: 1.5rem; + font-size: 1.6rem; + margin-bottom: 1rem; + margin-top: 2rem; } - .form-group input { - padding: 0.8rem 1rem; - font-size: 0.95rem; - } - - .action-button { - padding: 0.9rem; - font-size: 1rem; - } - - .auth-footer { - margin-top: 1.5rem; - font-size: 0.9rem; - } - - .back-link { - font-size: 0.85rem; - } - - .wave-container { - height: 80px; - } - - .wave { - height: 80px; - background-size: 1200px 80px; - transform: rotate(180deg); - } -} - -@media (max-width: 370px) { .login-card { - padding: 1.5rem 1rem; + padding: 1.4rem 1.1rem; + width: 95%; } .login-header h2 { font-size: 1.4rem; } - .login-header p { - font-size: 0.9rem; - } - - .form-group { - margin-bottom: 1rem; - } - - .form-group label { - font-size: 0.9rem; - margin-bottom: 0.3rem; - } - .form-group input { padding: 0.7rem 0.9rem; } - .brand-logo { - font-size: 1.6rem; - } - .action-button { padding: 0.8rem; + font-size: 0.95rem; } } -/* Стили для поддержки ориентации экрана */ -@media (max-height: 700px) and (min-width: 500px) { +@media (max-height: 700px) { .brand-logo { - margin-bottom: 1.5rem; - margin-top: 1rem; - } - - .login-card { - padding: 1.8rem; + font-size: 1.6rem; + margin-bottom: 0.8rem; } .login-header { - margin-bottom: 1.8rem; + margin-bottom: 0.8rem; + } + + .login-header h2 { + font-size: 1.5rem; + margin-bottom: 0.2rem; + } + + .login-header p { + margin-bottom: 0.8rem; } .form-group { - margin-bottom: 1rem; + margin-bottom: 0.6rem; + } + + .form-group label { + margin-bottom: 0.2rem; + } + + .form-group input { + padding: 0.6rem 0.8rem; + } + + .action-button { + padding: 0.7rem; + margin-top: 0.7rem; } .auth-footer { - margin-top: 1.2rem; + margin-top: 1rem; + } +} + +@media (max-height: 600px) { + .brand-logo { + font-size: 1.4rem; + margin-bottom: 0.5rem; + margin-top: 2rem; + } + + .login-card { + padding: 1.2rem 1rem; + } + + .login-header h2 { + font-size: 1.3rem; + } + + .login-header p { + font-size: 0.85rem; + margin-bottom: 0.5rem; + } + + .form-group { + margin-bottom: 0.5rem; + } + + .form-group label { + font-size: 0.85rem; + } + + .form-group input { + padding: 0.5rem 0.7rem; + font-size: 0.9rem; + } + + .action-button { + padding: 0.6rem; + font-size: 0.9rem; + } + + .auth-footer { + margin-top: 0.7rem; + font-size: 0.85rem; } } diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue index f67bc03..30018d0 100644 --- a/src/views/RegisterView.vue +++ b/src/views/RegisterView.vue @@ -98,7 +98,7 @@ - Вернуться на главную + Вернуться
@@ -434,8 +434,8 @@ const handleRegister = async () => { .back-link { position: absolute; - top: 20px; - left: 20px; + top: 10px; + left: 10px; color: white; text-decoration: none; display: flex; @@ -444,10 +444,16 @@ const handleRegister = async () => { font-weight: 500; transition: all 0.3s ease; z-index: 10; + font-size: 0.9rem; + padding: 6px 10px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 50px; + backdrop-filter: blur(5px); } .back-link:hover { transform: translateX(-5px); + background-color: rgba(255, 255, 255, 0.2); } .wave-container { @@ -516,82 +522,38 @@ const handleRegister = async () => { } @media (max-width: 576px) { - .auth-bg { - padding: 1.5rem 1rem 3rem; - } - - .register-card { - padding: 2rem 1.5rem; - margin: 3rem 0 2rem; - } - - .form-group { + .brand-logo { + font-size: 1.8rem; + margin-top: 2.5rem; margin-bottom: 1.2rem; } - - .form-group label { - font-size: 0.95rem; + + .register-card { + width: 94%; + padding: 1.5rem 1.2rem; + margin: 0; } - .brand-logo { - margin-top: 2.5rem; + .register-header h2 { + font-size: 1.6rem; + } + + .register-header p { + font-size: 0.9rem; + margin-bottom: 1.2rem; } } @media (max-width: 480px) { - .register-card { - padding: 1.8rem 1.2rem; - margin: 2rem 0 1.5rem; - } - - .register-header h2 { - font-size: 1.5rem; - } - - .register-header p { - font-size: 0.95rem; - margin-bottom: 0.3rem; - } - .brand-logo { - font-size: 1.8rem; - margin-bottom: 1.5rem; + font-size: 1.6rem; + margin-bottom: 1rem; + margin-top: 2rem; } - .form-group input { - padding: 0.8rem 1rem; - font-size: 0.95rem; - } - - .action-button { - padding: 0.9rem; - font-size: 1rem; - } - - .auth-footer { - margin-top: 1.5rem; - font-size: 0.9rem; - } - - .back-link { - font-size: 0.85rem; - } - - .wave-container { - height: 80px; - } - - .wave { - height: 80px; - background-size: 1200px 80px; - transform: rotate(180deg); - } -} - -@media (max-width: 370px) { .register-card { - padding: 1.5rem 1rem; - margin: 1.5rem 0 1rem; + padding: 1.3rem 1.1rem; + width: 95%; } .register-header h2 { @@ -599,83 +561,157 @@ const handleRegister = async () => { } .register-header p { - font-size: 0.9rem; - } - - .form-group { margin-bottom: 1rem; } - .form-group label { - font-size: 0.9rem; - margin-bottom: 0.3rem; - } - - .form-group input { - padding: 0.7rem 0.9rem; - } - - .brand-logo { - font-size: 1.6rem; - } - - .action-button { - padding: 0.8rem; - } -} - -/* Стили для поддержки ориентации экрана */ -@media (max-height: 800px) and (min-width: 500px) { - .brand-logo { - margin-bottom: 1.5rem; - margin-top: 1rem; - } - - .register-card { - padding: 1.8rem; - margin: 0.5rem 0 1.5rem; - } - - .register-header { - margin-bottom: 1.8rem; - } - - .form-group { - margin-bottom: 0.8rem; - } - - .auth-footer { - margin-top: 1.2rem; - } -} - -/* Для очень коротких экранов */ -@media (max-height: 650px) { - .auth-bg { - height: auto; - min-height: 100vh; - padding-top: 4rem; - padding-bottom: 4rem; - } - - .register-card { - margin: 0 0 1rem; - } - - .brand-logo { - margin: 3rem 0 1rem; - } - .form-group { margin-bottom: 0.7rem; } + .form-group input { + padding: 0.7rem 0.9rem; + } + + .action-button { + padding: 0.8rem; + font-size: 0.95rem; + } +} + +@media (max-height: 700px) { + .brand-logo { + font-size: 1.6rem; + margin-bottom: 0.8rem; + } + + .register-header { + margin-bottom: 0.8rem; + } + + .register-header h2 { + font-size: 1.5rem; + margin-bottom: 0.2rem; + } + + .register-header p { + margin-bottom: 0.6rem; + } + + .form-group { + margin-bottom: 0.6rem; + } + .form-group label { + margin-bottom: 0.2rem; + } + + .form-group input { + padding: 0.6rem 0.8rem; + } + + .action-button { + padding: 0.7rem; + margin-top: 0.7rem; + } + + .auth-footer { + margin-top: 0.8rem; + } +} + +@media (max-height: 640px) { + .brand-logo { + font-size: 1.4rem; + margin-bottom: 0.5rem; + margin-top: 1.5rem; + } + + .register-card { + padding: 1rem 1rem; + max-height: calc(100vh - 80px); + } + + .register-header h2 { + font-size: 1.2rem; + margin-bottom: 0.1rem; + } + + .register-header p { + font-size: 0.8rem; + margin-bottom: 0.4rem; + } + + .form-group { + margin-bottom: 0.4rem; + } + + .form-group label { + font-size: 0.8rem; + margin-bottom: 0.1rem; + } + + .form-group input { + padding: 0.5rem 0.6rem; + font-size: 0.85rem; + } + + .action-button { + padding: 0.5rem; + font-size: 0.85rem; + margin-top: 0.5rem; + } + + .auth-footer { + margin-top: 0.5rem; + font-size: 0.8rem; + } +} + +@media (max-height: 570px) { + .brand-logo { + font-size: 1.2rem; + margin-bottom: 0.3rem; + margin-top: 1rem; + } + + .register-card { + padding: 0.8rem; + } + + .register-header h2 { + font-size: 1.1rem; + margin-bottom: 0; + } + + .register-header p { + font-size: 0.75rem; margin-bottom: 0.3rem; } + .form-group { + margin-bottom: 0.3rem; + } + + .form-group label { + font-size: 0.75rem; + } + + .form-group input { + padding: 0.4rem 0.5rem; + font-size: 0.8rem; + } + + .action-button { + padding: 0.4rem; + font-size: 0.8rem; + } + + .auth-footer { + font-size: 0.75rem; + } + .wave-container { - display: none; + display: none; /* Скрываем волны на очень маленьких экранах */ } }