login_form:
<div class="crmp-login-wrapper">
<div class="custom-login-panel">
<div class="login-logo">
<img src="/styles/your_style/logo_crmp.png" alt="CRMP ONLINE">
</div>
<div class="login-header">
<h2>Добро пожаловать</h2>
<p>Вход в панель управления. Будьте внимательны: не оставляйте данные в чужих руках.</p>
</div>
<xf:form action="{{ link('login/login') }}" class="login-form">
<div class="input-group">
<input type="text" name="login" class="custom-input" placeholder="Имя или email" required="required" />
</div>
<div class="input-group password-group">
<input type="password" name="password" class="custom-input" placeholder="Пароль" required="required" />
<i class="fa fa-eye show-password"></i>
</div>
<button type="submit" class="custom-button">Войти в панель</button>
</xf:form>
<div class="login-footer">
<p>CRMP ONLINE — официальный форум</p>
</div>
</div>
</div>
Extra.less:
/* ========================================= */
/* КАСТОМНАЯ ПАНЕЛЬ АВТОРИЗАЦИИ (CRMP СТИЛЬ) */
/* ========================================= */
/* Ограничиваем применение только на странице логина */
[data-template="login"] {
/* Скрываем стандартные заголовки и хлебные крошки XF */
.p-title, .p-breadcrumbs {
display: none;
}
.p-body-inner {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh; /* Центрируем по вертикали */
}
}
.crmp-login-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.custom-login-panel {
background-color: #18181a; /* Темный фон карточки */
border-radius: 16px;
padding: 40px 30px;
max-width: 380px;
width: 100%;
/* Тень карточки */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
/* Оранжевая полоска сверху (можно убрать, если не нужна) */
border-top: 3px solid #ffb032;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
.login-logo {
margin-bottom: 25px;
img {
max-width: 140px;
height: auto;
}
}
.login-header {
margin-bottom: 30px;
h2 {
color: #ffffff;
font-size: 24px;
font-weight: bold;
margin: 0 0 10px 0;
}
p {
color: #9aa0a6;
font-size: 13px;
line-height: 1.5;
margin: 0;
padding: 0 10px;
}
}
.login-form {
.input-group {
margin-bottom: 15px;
position: relative;
.custom-input {
background-color: #222224;
border: 1px solid #333;
border-radius: 12px;
color: #ffffff;
padding: 15px 20px;
width: 100%;
font-size: 15px;
box-sizing: border-box;
transition: all 0.3s ease;
&::placeholder {
color: #666;
}
/* Свечение при фокусе (как на скрине у логина) */
&:focus {
border-color: #ffb032;
box-shadow: 0 0 0 1px #ffb032;
outline: none;
}
}
}
.password-group {
.show-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #777;
cursor: pointer;
transition: color 0.3s ease;
&:hover {
color: #ffb032;
}
}
}
.custom-button {
background-color: #ffb032; /* Основной оранжевый */
color: #111; /* Темный текст на кнопке */
border: none;
border-radius: 12px;
padding: 16px;
width: 100%;
font-size: 16px;
font-weight: 700;
cursor: pointer;
margin-top: 15px;
/* Эффект свечения как на скрине */
box-shadow: 0 8px 25px rgba(255, 176, 50, 0.3);
transition: all 0.3s ease;
&:hover {
background-color: #ffbc4b;
box-shadow: 0 8px 30px rgba(255, 176, 50, 0.5);
transform: translateY(-1px);
}
&:active {
transform: translateY(1px);
}
}
}
.login-footer {
margin-top: 35px;
border-top: 1px dashed #333; /* Пунктирная линия внизу */
padding-top: 15px;
p {
color: #555;
font-size: 12px;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
}
