Мини-профиль by Snoopak

<?if($USER_LOGGED_IN$)?>
<div class="mini-profile">
<script type="text/javascript">
$(document).ready(function () {
$("#showMore").click(function () {
$(".mini-profile-data").toggle("fast");
});
});
</script>
<div class="mini-profile-title">
<?if($HOUR$>23 or $HOUR$<=6)?>Доброй ночи,
<?endif?>
<?if($HOUR$>6 and $HOUR$<=12)?>Доброе утро,
<?endif?>
<?if($HOUR$>12 and $HOUR$<=18)?>Добрый день,
<?endif?>
<?if($HOUR$>18 and $HOUR$<=23)?>Добрый вечер,
<?endif?>
$USERNAME$
</div>
<div class="mini-profile__middle">
<div class="mini-profile-avatar">
<?if($USER_LOGGED_IN$)?><img title="$USERNAME$" src="$USER_AVATAR_URL$">
<?else?><img class="userAvatar" title="$USERNAME$" src="/img/noavatar.gif">
<?endif?>
</div>
<div class="mini-profile-navigation">
<a href="javascript://" title="Мой профиль" id="showMore"><img src="/img/profle.svg"></a>
<a title="Сообщения" href="$PM_URL$"><img src="/img/mail.svg"></a>
<a title="Выход" href="$LOGOUT_LINK$"><img src="/img/power.svg"></a></div>
</div>
<div class="mini-profile-data" style="display: none;">
<a href="/index/8">Профиль</a>
<a href="/index/11" target="_blank">Редактировать данные</a>
<a href="/news/0-0-0-0-1">Добавить новость</a>
<a href="/load/0-0-0-0-1">Добавить файл</a>
</div>
</div>
<?else?>
$LOGIN_FORM$
<?endif?>

/* mini-profile */
/* author - Snoopak */
/* site - for-ucoz.ru */

/* light version */
.mini-profile {background: #fff; margin-bottom: 10px; border-radius: 3px; box-shadow: 0 2px 2px 0px rgba(68,68,68,.1)}
.mini-profile-title {background: #fafad2; padding: 10px;color: #b5b580; text-align: center; border-bottom: 1px solid #f1f1b1;}
.mini-profile-navigation {text-align: center;padding: 10px; border-top: 1px solid #fafafa;}
.mini-profile-navigation a {display: inline-block; margin: 0px 5px;}
.mini-profile-navigation a img {max-width: 35px; transition: 0.3s; vertical-align: middle;}
.mini-profile-navigation a:hover img {transform: scale(1.3);}

.mini-profile-avatar img {max-width: 100px; border: 3px solid #eaeaea; border-radius: 50%;}
.mini-profile-avatar {text-align: center; padding: 10px;}

.mini-profile-data {background: #fafafa; color: #828387; border-radius: 0 0 3px 3px;}
.mini-profile-data a {display: block; padding: 10px; border-bottom: 1px solid #f6f6f6; color: #999; text-transform: uppercase; transition: 0.3s}
.mini-profile-data a:last-of-type {border-bottom: 0}
.mini-profile-data a:hover {padding-left: 12px; background: rgba(234, 234, 234, 0.25); transition: 0.3s}

/* mini-profile */
/* author - Snoopak */
/* site - for-ucoz.ru */

/* dark version */
.mini-profile {background: #4e4e4e; margin-bottom: 10px; border-radius: 3px; box-shadow: 0 2px 2px 0px rgba(68,68,68,.1);}
.mini-profile-title {background: #fafad2; padding: 10px;color: #b5b580; text-align: center;}
.mini-profile-navigation {text-align: center;padding: 10px; border-top: 1px solid #5f5f5f;}
.mini-profile-navigation a {display: inline-block; margin: 0px 5px;}
.mini-profile-navigation a img {max-width: 35px; transition: 0.3s; vertical-align: middle;}
.mini-profile-navigation a:hover img {transform: scale(1.3);}

.mini-profile-avatar img {max-width: 100px; border: 3px solid #5f5f5f; border-radius: 50%;}
.mini-profile-avatar {text-align: center; padding: 10px;}

.mini-profile-data {background: #5f5f5f; color: #828387; border-radius: 0 0 3px 3px;}
.mini-profile-data a {display: block; padding: 10px; border-bottom: 1px solid #4e4e4e; color: #999; text-transform: uppercase; transition: 0.3s}
.mini-profile-data a:last-of-type {border-bottom: 0}
.mini-profile-data a:hover {padding-left: 12px; background: rgba(234, 234, 234, 0.25); transition: 0.3s; color: #4e4e4e;}