[enh] CSS transitions + return link.

portal/assets/css/ynh-style.css

@@ -146,6 +146,7 @@ textarea {
 .icon-connexion:before { content: '\e802'; }
 .icon-pencil:before { content: '\e804'; }
 .icon-trash:before { content: '\e80c'; }
+.icon-angle-left:before { content: '\e803'; }
 
 
 /* ==========================================================================
@@ -247,8 +248,35 @@ textarea {
   color: #fff;
 }
 
+.user-container-edit:after,
+.user-container-password:after {
+  content: '\e803';
+  font-family: 'ynh_ssowat';
+  display: block;
+  height: 1em;
+  width: 1em;
+  position: absolute;
+  top: 50%;
+  left: -16px;
+  z-index: 0;
+  margin-top: -0.75em;
+  font-size: 2em;
+  font-weight: normal;
+  color: #b4b4b4;
+  opacity: 0;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
+}
+.user-container-edit:hover:after,
+.user-container-password:hover:after {
+  left: -20px;
+  opacity: 1;
+}
+
 .user-container:before {
   display: block;
+  position: relative;
+  z-index: 1;
   float: left;
   margin-right: 10px;
   content: '\e801';
@@ -263,6 +291,8 @@ textarea {
   background: #b4b4b4;
   color: #dedede;
   overflow: hidden;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
 }
 .user-container:hover:before {
   color: #fff;
@@ -285,13 +315,16 @@ textarea {
   content: '\e804';
   font-family: 'ynh_ssowat';
   color: #b4b4b4;
-  display: none;
+  display: inline-block;vertical-align: text-top;
   font-size: 0.8em;
   width: 1em;
   height: 1em;
   margin-left: .5em;
+  opacity: 0;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
 }
-.user-container-info:hover  .user-username:after {display: inline-block;vertical-align: text-top;}
+.user-container-info:hover  .user-username:after {opacity: 1;}
 
 .user-container .user-mail {
   color: #999;
@@ -310,6 +343,8 @@ textarea {
     padding: 1.25em 1em;
     position: relative;
     z-index: 1;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
   }
     .user-menu a:hover,
     .user-menu a:focus {
@@ -381,11 +416,15 @@ label + .help-link {
   background: #41444f;
   color: #fff;
   font-weight: bold;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
 }
 label + .help-link:hover {background: #30333b;}
 
 .btn {
   cursor: pointer;
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
 }
 
 .btn-group {
@@ -406,6 +445,8 @@ label + .help-link:hover {background: #30333b;}
   margin-bottom: 0.3em;
   display: block;
   position: relative;z-index: 1; /* prevent strange label overlap */
+          transition: all 0.1s ease;
+  -webkit-transition: all 0.1s ease;
 }
 .form-test:-moz-placeholder{color:#ccc;}
 .form-text::-moz-placeholder{color:#ccc;}

portal/assets/fonts/ynh_ssowat/ynh_ssowat.svg

@@ -10,6 +10,7 @@
 <glyph glyph-name="lock" unicode="&#xe800;" d="m179 421h285v108q0 59-42 101t-101 41-101-41-41-101v-108z m464-53v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v322q0 22 16 38t38 15h17v108q0 102 74 176t176 74 177-74 73-176v-108h18q23 0 38-15t16-38z" horiz-adv-x="642.9" />
 <glyph glyph-name="pencil" unicode="&#xe804;" d="m203-7l50 51-131 131-51-51v-60h72v-71h60z m291 518q0 12-12 12-5 0-9-4l-303-302q-4-4-4-10 0-12 13-12 5 0 9 4l303 302q3 4 3 10z m-30 107l232-232-464-465h-232v233z m381-54q0-29-20-50l-93-93-232 233 93 92q20 21 50 21 29 0 51-21l131-131q20-22 20-51z" horiz-adv-x="857.1" />
 <glyph glyph-name="trash" unicode="&#xe80c;" d="m286 439v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m143 0v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m142 0v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q7 0 12-5t5-13z m72-404v529h-500v-529q0-12 4-22t8-15 6-5h464q2 0 6 5t8 15 4 22z m-375 601h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+<glyph glyph-name="angle-left" unicode="&#xe803;" d="m350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 260q-6 6-6 13t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
 <glyph glyph-name="off" unicode="&#xe802;" d="m857 350q0-87-34-166t-91-137-137-92-166-34-167 34-136 92-92 137-34 166q0 102 45 191t126 151q24 18 54 14t46-28q18-23 14-53t-28-47q-54-41-84-101t-30-127q0-58 22-111t62-91 91-61 111-23 110 23 92 61 61 91 22 111q0 68-30 127t-84 101q-24 18-28 47t14 53q17 24 47 28t53-14q81-61 126-151t45-191z m-357 429v-358q0-29-21-50t-50-21-51 21-21 50v358q0 29 21 50t51 21 50-21 21-50z" horiz-adv-x="857.1" />
 </font>
 </defs>