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; /* Скрываем волны на очень маленьких экранах */
}
}