4 новых мини-профиля для ucoz

<script type="text/javascript">$( document ).ready(function() {$(".profile-button").click(function(){ $( "body" ).toggleClass( "profile-show" );});});</script>  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

.profile-button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  margin: 1em;
  padding:0.8em;
  color: #7d8194;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  font-size: 1.5em;
  border: solid 2px #7d8194;
  border-radius: 4px;
  background: transparent;
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
}
.profile-button span {
  display: none;
}

.profile-button:hover {
  background-color: #7d8194;
  color: #fff;
}
.profile-wrap {
  position: fixed;
  z-index: 999;
  background: #ebedf4;
  -webkit-transition: width 0.3s, height 0.3s;
  transition: width 0.3s, height 0.3s;
  width: 0;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;
  height: 0;
  font-size: 1.5em;
  bottom: 1em;
  left: 1em;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

@media screen and (max-width: 50em) {
  .profile-button {
  margin: 0.25em;
  }
  .profile-wrap {
  bottom: 0.25em;
  left: 0.25em;
  }
}

.profile-content {
  height: 100%;
  opacity: 0;
  color: #64697d;
  text-align: right;
}

.profile {
  display: inline-block;
  line-height: 42px;
  font-weight: 700;
  padding: 1em;
}

.profile img {
  float: right;
  border-radius: 50%;
  margin-left: 10px;
  width: 42px;
}

.link-list {
  padding: 1em 0;
  margin: 0 0.5em;
  border-bottom: 2px solid rgba(125,129,148,0.2);
  border-top: 2px solid rgba(125,129,148,0.2);
  text-align: left;
}

.link-list a {
  display: block;
  color: #7d8194;
  text-decoration: none;
  padding: 0.5em 1em;
}

.link-list a:hover,
.link-list a:focus {
  color: #64697d;
}

.link-list a span {
  margin-left: -1px;
  vertical-align: middle;
}
.icon-list {
  position: absolute;
  right: 1em;
  bottom: 0.2em;
}

.icon-list a {
  font-size: 1.5em;
  margin-left: 0.25em;
  color: rgba(125,129,148,0.5);
}
.icon-list a:hover {
  color: rgba(125,129,148,0.7);
}
.profile-show .profile-wrap {
  max-width: 17em;
  width: auto;
  height: auto;
  padding-bottom: 40px;
  -webkit-animation: anim-jelly 0.8s linear forwards;
  animation: anim-jelly 0.8s linear forwards;
  border-radius: 4px;
}

.profile-show .profile-content {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.3s;
  transition: opacity 0.3s 0.3s;
}
.profile-show .profile-button {
  background-color: rgba(204, 204, 204, 0);
  color: #B4B7C4;
  border: 2px solid rgba(204, 204, 204, 0);
}
.profile-content #uidLogForm {padding: 10px;}
.profile-content #uidLogForm a.login-with i {
  width: 25em !important;
  height: 4em !important;
  background-size: 100% 90% !important;
  border-radius: 4px !important;
}

.profile-button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  margin: 1em;
  padding: 0.8em;
  color: #7A9BAE;
  text-align: center;
  vertical-align: middle !important;
  line-height: 1em;
  font-size: 1.5em;
  border: solid 2px #7A9BAE;
  border-radius: 4px;
  background: transparent;
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
}
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #7A9BAE;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  background: #7A9BAE;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  width: 0;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #ADCEE2;  
  text-align: right;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;  
  font-weight: 700;  
  padding: 1em;  
}  

.profile img {  
  float: right;  
  border-radius: 50%;  
  margin-left: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #ADCEE2;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #D5EEFF;  
}  

.link-list a span {  
  margin-left: -1px;  
  font-weight: 400;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a:hover {
  opacity: 1;
}
.icon-list a {
  font-size: 1.5em;
  margin-left: 0.25em;
  color: #ACC9DB;
  opacity: 0.8;
}
.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #ACC9DB;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}

.profile-button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  margin: 1em;
  padding: 0.8em;
  color: #FF7272;
  text-align: center;
  vertical-align: middle;
  line-height: 2em;
  font-size: 1.5em;
  border: solid 2px #FF7272;
  border-radius: 4px;
  background: transparent;
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;
}
.profile-button span {
  display: none;
}

.profile-button:hover {
  background-color: #FF7272;
  color: #fff;
}
.profile-wrap {
  position: fixed;
  z-index: 999;
  background: #FF6E6E;
  -webkit-transition: width 0.3s, height 0.3s;
  transition: width 0.3s, height 0.3s;
  width: 0;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;
  height: 0;
  font-size: 1.5em;
  bottom: 1em;
  left: 1em;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

@media screen and (max-width: 50em) {
  .profile-button {
  margin: 0.25em;
  }
  .profile-wrap {
  bottom: 0.25em;
  left: 0.25em;
  }
}

.profile-content {
  height: 100%;
  opacity: 0;
  color: #ffe0e0;
  text-align: left;
}

.profile {
  display: inline-block;
  line-height: 42px;
  padding: 1em;
}

.profile img {
  float: left;
  border-radius: 50%;
  margin-right: 10px;
  width: 42px;
}

.link-list {
  padding: 1em 0;
  margin: 0 0.5em;
  border-bottom: 2px solid rgba(125,129,148,0.2);
  border-top: 2px solid rgba(125,129,148,0.2);
  text-align: left;
}

.link-list a {
  display: block;
  color: #ffe0e0;
  text-decoration: none;
  padding: 0.5em 1em;
}

.link-list a:hover,
.link-list a:focus {
  color: #FFB3B3;
}

.link-list a span {
  margin-left: -1px;
  font-weight: 400;
  vertical-align: middle;
}
.icon-list {
  position: absolute;
  right: 1em;
  bottom: 0.2em;
}

.icon-list a {
  font-size: 1.5em;
  margin-left: 0.25em;
  color: #ffe0e0;
}
.icon-list a:hover {color: #FFB3B3;}

.profile-show .profile-wrap {
  max-width: 17em;
  width: auto;
  height: auto;
  padding-bottom: 40px;
  -webkit-animation: anim-jelly 0.8s linear forwards;
  animation: anim-jelly 0.8s linear forwards;
  border-radius: 4px;
}

.profile-show .profile-content {
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.3s;
  transition: opacity 0.3s 0.3s;
}
.profile-show .profile-button {
  background-color: rgba(204, 204, 204, 0);
  color: #FFB3B3;
  border: 2px solid rgba(204, 204, 204, 0);
}
.profile-content #uidLogForm {padding: 10px;}
.profile-content #uidLogForm a.login-with i {
  width: 25em !important;
  height: 4em !important;
  background-size: 100% 90% !important;
  border-radius: 4px !important;
}

.profile-button {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  z-index: 1000;  
  margin: 1em;  
  padding: 0.8em;
  color: #1ECD97;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 2em;  
  font-size: 1.5em;  
  border: solid 2px #1ECD97;  
  border-radius: 4px;  
  background: transparent;  
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
}  
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #1ECD97;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  background: #43E1B0;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  width: 0;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #E5FFF7;  
  text-align: left;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;
  padding: 1em;  
}  

.profile img {  
  float: left;  
  border-radius: 50%;  
  margin-right: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #E5FFF7;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #fff;  
}  

.link-list a span {  
  margin-left: -1px;  
  font-weight: 400;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a {  
  font-size: 1.5em;  
  margin-left: 0.25em;  
  color: #A7FFE4;  
}  

.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #A7FFE4;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}

<div class="profile-wrap">  
<div class="profile-content">  
<?if($USER_LOGGED_IN$)?><div class="profile"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://s70.ucoz.net/a/02/1258.jpg<?endif?>" alt="$USER_FULL_NAME$"><span>$USER_FULL_NAME$</span></div>  
<div class="link-list">  
<a href="$PERSONAL_PAGE_LINK$" rel="nofollow"><span><i class="fa fa-user"></i> Мой профиль</span></a>  
<a href="$PM_URL$" rel="nofollow"><span><i class="fa fa-envelope"></i> У вас $UNREAD_PM$ сообщен<?if($UNREAD_PM$%10=0||$UNREAD_PM$%10>4||$UNREAD_PM$%100>10&&$UNREAD_PM$%100<15)?>ий<?else?><?if($UNREAD_PM$%10=1)?>е<?else?>я<?endif?><?endif?></span></a>  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/11','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><span><i class="fa fa-cogs"></i> Редактировать профиль</span></a>  
<a href="/index/34-$USER_ID$" rel="nofollow"><span><i class="fa fa-comment"></i> Мои комментарии</span></a>  
</div>  
<div class="icon-list">  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/86','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-comments-o"></i></a>  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/15-1','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-users"></i></a>  
<a href="$LOGOUT_LINK$"><i class="fa fa-fw fa-power-off"></i></a>  
</div>  
<?else?>$LOG_FORM$<?endif?>  
  </div>  
  </div>  
<a class="profile-button"><i class="fa fa-user"></i><span>Открыть профиль</span></a>