Панель входа DLE дизайн
Панель входа для DLE которая занимает все пространсво экрана. Внизу фон картинка скрывет все содержимое сайта.
По центру модальное окно.
---
----
Тег { login } ставим в самом низу перед боди.
Содержимое login.tpl
<div data-name="© 2004-2020 club. Все права защищены" class="overlay js-overlay-campaign">
<div class="popup js-popup-campaign">
<div class="kabinet">
<div class="kab-login">
<s class="bg-logo"></s>
<span>club для любителей кино и просмотра онлайн фильмов бесплатно самого лучшего качества в России.</span>
<div class="loginforma">
[not-group=5]
<div class="logform-profil">
<div class="logform-avatar">
<img alt="" src="{foto}" /><br />
<a class="kn-vhod" href="{profile-link}">{login}</a>
<a class="knopka" href="{logout-link}">Выход</a>
</div>
<div class="logform-menu">
<ul>
<li><a href="{addnews-link}">Добавить новость</a></li>
<li>[admin-link]<a href="{admin-link}" target="_blank">Админпанель</a>[/admin-link]</li>
<li><a href="{pm-link}">Сообщения <sup>{new-pm} из {all-pm}</sup></a></li>
<li><a href="{favorites-link}">Закладки <sup>{favorite-count}</sup></a></li>
<li><a href="{newposts-link}">Непрочитанные новости</a></li>
</ul>
</div>
</div>
[/not-group]
[group=5]
<form class="logform-pola" method="post">
<label for="login_name"><input placeholder="{login-method}" type="text" name="login_name" id="login_name"></label>
<label for="login_password" class="log-form-pass"><input placeholder="Пароль" type="password" name="login_password" id="login_password"></label>
<button class="btn knopka" onclick="submit();" type="submit" title="Войти"> Войти</button>
<input name="login" type="hidden" id="login" value="submit">
<a class="right" href="{registration-link}">Регистрация</a> |
<a href="{lostpassword-link}">Забыли пароль?</a>
</form>
[/group]
</div>
<div data-name="Или" class="kablog-soc">Войти с помощью соц. сетей</div>
[vk]<a href="{vk_url}" target="_blank" class="soc_vk bg-log_vk"> </a>[/vk]
[yandex]<a href="{yandex_url}" target="_blank" class="soc_ya bg-log_yand"></a>[/yandex]
[facebook]<a href="{facebook_url}" target="_blank" class="soc_fb"></a>[/facebook]
[google]<a href="{google_url}" target="_blank" class="soc_gp bg-log_google"></a>[/google]
[odnoklassniki]<a href="{odnoklassniki_url}" target="_blank" class="soc_od"></a>[/odnoklassniki]
[mailru]<a href="{mailru_url}" target="_blank" class="soc_mail bg-log_mail"></a>[/mailru]
</div>
<div class="kab-malinf">
<s class="bg-logo"></s><br />
<span>Kinby.club для любителей кино и просмотра онлайн фильмов бесплатно самого лучшего качества в России.</span>
<span>
<a href="" class="bg-log_inst"></a>
<a href="" class="bg-log_telegr"></a>
</span>
</div>
</div>
<div class="close-popup js-close-campaign">X</div>
</div>
</div>Стили панели:
/* MODAL okno KABINET*/
.overlay {display:none; position: fixed;width: 100%;height: 100vh;top: 0;left: 0; background: url("../images/bg-pan-vhod.jpg") center top; background-size: cover; z-index: 90;}
.overlay::after {content: attr(data-name); display: inline-block; color: var(--red); position: absolute;bottom: 20px;right: 20px;z-index:99;}
.popup {display:flex; overflow: hidden; border-radius:40px; position: absolute; width: 70%; left: 50%; top: 50%; background: #bd322d; transform: translate(-50%, -50%); z-index: 91;}
.kabinet {width:100%;text-align: center;}
.kabinet > div{width:50%; padding:40px;}
.kab-login {padding:40px 60px; background: var(--white); color:var(--grey-2);}
.kab-login span {display:block; margin:20px 0;}
.kablog-soc {position:relative; width:80%; padding-top:20px;margin: 40px auto 10px auto; border-top:1px solid var(--grey-2); }
.kablog-soc::after {content: attr(data-name); display: block; width:40px; margin-left:-20px; background: var(--white); position: absolute;top: -7px; left:50%;z-index:93;}
.kab-malinf{ color: var(--white); background: url("../images/bg-pan-vhod2.jpg") right top; background-size: cover; display: flex; flex-flow: column nowrap; height: 100%;align-items: center;justify-content: center;}
.kab-malinf > span {display:block; margin:60px 40px; font-size:17px;}
.close-popup {color: var(--white); cursor:pointer; font-size:28px; position: absolute; top:20px; right:30px; z-index: 94;}
.loginforma {font-size:16px; line-height:1; }
.loginforma input {padding:10px 10px 10px 40px; width:100%; display:block; margin: 0 0 20px 0; border-radius:25px; border: 1px solid var(--grey-3); background: var(--white); width:100%;}
.loginforma a {color: var(--grey-3);}
.loginforma label{position:relative; display:block; width:100%;}
.logform-pola label::before {content:""; display:block;width: 15px; height: 15px;background:url("../images/sprit.png") -391px -117px; position:absolute; top:11px; left:8px; z-index:10; }
.logform-pola .log-form-pass::before {background-position: -391px -187px;}
.logform-profil {display:flex; flex-flow: row wrap;justify-content: space-between;align-items: start;align-content: start;}
.logform-avatar {width:35%;}
.logform-avatar img {width:100px; height:100px; margin:0 auto 20px auto; }
.logform-avatar .kn-vhod {width:100px; margin: 0 auto; display:block; border:1px solid var(--green); border-radius:25px; padding:10px; color: var(--green); }
.logform-avatar .knopka {min-width:100px; width:100px; color: var(--white);}
.logform-menu {width:60%; text-align:left;}
.logform-menu li {margin:10px 0;}