фикс
This commit is contained in:
Professional
parent
5e8b25f84d
commit
8aa649d49c
@ -68,7 +68,7 @@
|
||||
|
||||
<router-link to="/" class="back-link">
|
||||
<i class="bi-arrow-left"></i>
|
||||
Вернуться на главную
|
||||
Вернуться
|
||||
</router-link>
|
||||
|
||||
<div class="wave-container">
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
|
||||
<router-link to="/" class="back-link">
|
||||
<i class="bi-arrow-left"></i>
|
||||
Вернуться на главную
|
||||
Вернуться
|
||||
</router-link>
|
||||
|
||||
<div class="wave-container">
|
||||
@ -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; /* Скрываем волны на очень маленьких экранах */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user